@extends('layouts.app')

@section('content')
<style>
/* Reference Table Styling */
.table {
    border-collapse: collapse;
    border-spacing: 0;
    background: white;
    width: 100%;
    margin: 0;
    border: 1px solid #dee2e6;
}

.table thead th {
    background: #CEEDF5 !important;
    color: #17479E !important;
    font-weight: 600;
    border: 1px solid #dee2e6 !important;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
    transition: all 0.3s ease;
}

.table thead th:hover {
    background: #B8E2F0 !important;
}

.table tbody tr {
    transition: all 0.2s ease;
    background: white;
}

.table tbody tr:nth-child(even) {
    background: #f8f9fa;
}

.table tbody tr:hover {
    background: #e3f2fd !important;
}

.table tbody td {
    padding: 0.75rem 1rem !important;
    vertical-align: middle;
    border: 1px solid #dee2e6;
    font-size: 0.875rem;
    color: #495057;
}

.card {
    border-radius: 16px !important;
    border: none !important;
    box-shadow: 0 8px 25px rgba(23, 71, 158, 0.15);
}

.table-responsive {
    overflow-x: auto;
    margin-bottom: 1.5rem;
}

.card-body {
    overflow-x: auto;
}

.form-control, .form-select {
    border: 2px solid rgba(23, 71, 158, 0.1);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    transition: all 0.3s ease;
}

.form-control:focus, .form-select:focus {
    border-color: #17479E;
    box-shadow: 0 0 0 0.2rem rgba(23, 71, 158, 0.25);
}

/* Custom Styling for Laravel Pagination Links */
.pagination {
    margin-top: 20px;
    justify-content: center;
}
.page-item .page-link {
    color: #17479E;
    border: 1px solid #17479E;
    margin: 0 5px;
    border-radius: 8px;
    transition: all 0.3s ease;
}
.page-item.active .page-link {
    background-color: #17479E;
    border-color: #17479E;
    color: white;
}
.page-item:not(.active) .page-link:hover {
    background-color: rgba(23, 71, 158, 0.1);
}

.icon-wrapper {
    background: rgba(23, 71, 158, 0.1);
    padding: 0.5rem;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.quick-filter-btn {
    border-radius: 20px;
    padding: 0.4rem 1rem;
    font-size: 0.875rem;
    transition: all 0.3s ease;
}

.quick-filter-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(23, 71, 158, 0.2);
}
</style>

{{-- PAGE HEADER WITH BREADCRUMB --}}
<div class="card border-0 shadow-sm mb-4">
    <div class="card-body py-3">
        <div class="d-flex flex-wrap align-items-center justify-content-between gap-3">
            <div class="d-flex align-items-center gap-3">
                <div class="icon-wrapper">
                    <i class="fas fa-users text-primary fs-4" style="color: #17479E !important;"></i>
                </div>
                <h5 class="fw-bold mb-0 text-dark">Members List (Deduction Code 667)</h5>
            </div>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb mb-0">
                    <li class="breadcrumb-item">
                        <a href="{{ route('dashboard') }}" class="text-decoration-none">
                            <i class="fas fa-home me-1"></i>Dashboard
                        </a>
                    </li>
                    <li class="breadcrumb-item active" aria-current="page">
                        <span class="badge" style="background: linear-gradient(135deg, #87CEEB 0%, #17479e 100%); color: white;">
                            Members
                        </span>
                    </li>
                </ol>
            </nav>
        </div>
    </div>
</div>

{{-- IMPROVED FILTER CARD --}}
<form action="{{ route('deductions.members.list') }}" method="GET" id="filterForm">
    <div class="card mb-4">
        
        {{-- CARD HEADER: Title na Count --}}
        <div class="card-header py-3" style="background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%); border-bottom: 2px solid rgba(23, 71, 158, 0.1);">
            <div class="d-flex justify-content-between align-items-center">
                {{-- Title kuu ya Filter --}}
                <div class="d-flex align-items-center gap-2">
                    <div class="icon-wrapper">
                        <i class="bi bi-funnel-fill text-primary fs-5"></i>
                    </div>
                    <h6 class="mb-0 fw-bold text-dark">Filter Options</h6>
                </div>
                
                {{-- Count ya records --}}
                <div class="d-flex align-items-center gap-2">
                    <span class="text-muted fw-normal" style="font-size: 0.9rem;">Total Members:</span>
                    <span class="badge bg-primary px-3 py-2" style="font-size: 0.95rem; font-weight: 600;">
                        {{ number_format($members->total()) }}
                    </span>
                </div>
            </div>
        </div>

        {{-- CARD BODY: Form ya Filters --}}
        <div class="card-body p-4">
            <div class="row g-4">
                
                {{-- ROW 1: Check Date, Check Number, First Name --}}
                <div class="col-lg-4 col-md-6">
                    <label for="date" class="form-label fw-semibold text-dark mb-2">
                        <i class="bi bi-calendar-event text-primary me-2"></i>
                        Check Date
                    </label>
                    <input type="date" 
                           name="date" 
                           id="date" 
                           class="form-control"
                           value="{{ request('date', $date) }}">
                    <small class="text-muted mt-1 d-block">
                        <i class="bi bi-info-circle me-1"></i>
                        Filter by payment date
                    </small>
                </div>
                
                <div class="col-lg-4 col-md-6">
                    <label for="checkNumber" class="form-label fw-semibold text-dark mb-2">
                        <i class="bi bi-hash text-primary me-2"></i>
                        Check Number
                    </label>
                    <input type="text" 
                           name="checkNumber" 
                           id="checkNumber" 
                           class="form-control" 
                           placeholder="Enter check number" 
                           value="{{ request('checkNumber', $checkNumber) }}">
                    <small class="text-muted mt-1 d-block">
                        <i class="bi bi-info-circle me-1"></i>
                        Search by check number
                    </small>
                </div>

                <div class="col-lg-4 col-md-6">
                    <label for="firstName" class="form-label fw-semibold text-dark mb-2">
                        <i class="bi bi-person text-primary me-2"></i>
                        First Name
                    </label>
                    <input type="text" 
                           name="firstName" 
                           id="firstName" 
                           class="form-control" 
                           placeholder="Enter first name" 
                           value="{{ request('firstName', $firstName) }}">
                    <small class="text-muted mt-1 d-block">
                        <i class="bi bi-info-circle me-1"></i>
                        Search by first name
                    </small>
                </div>

                {{-- ROW 2: Middle Name, Last Name, Action Buttons --}}
                <div class="col-lg-4 col-md-6">
                    <label for="middleName" class="form-label fw-semibold text-dark mb-2">
                        <i class="bi bi-person-badge text-primary me-2"></i>
                        Middle Name
                    </label>
                    <input type="text" 
                           name="middleName" 
                           id="middleName" 
                           class="form-control" 
                           placeholder="Enter middle name" 
                           value="{{ request('middleName', $middleName) }}">
                    <small class="text-muted mt-1 d-block">
                        <i class="bi bi-info-circle me-1"></i>
                        Search by middle name
                    </small>
                </div>

                <div class="col-lg-4 col-md-6">
                    <label for="lastName" class="form-label fw-semibold text-dark mb-2">
                        <i class="bi bi-person-check text-primary me-2"></i>
                        Last Name
                    </label>
                    <input type="text" 
                           name="lastName" 
                           id="lastName" 
                           class="form-control" 
                           placeholder="Enter last name" 
                           value="{{ request('lastName', $lastName) }}">
                    <small class="text-muted mt-1 d-block">
                        <i class="bi bi-info-circle me-1"></i>
                        Search by last name
                    </small>
                </div>

                {{-- ACTION BUTTONS --}}
                <div class="col-lg-4 col-md-12">
                    <label class="form-label fw-semibold text-dark mb-2 d-none d-lg-block">
                        &nbsp;
                    </label>
                    <div class="d-flex gap-2">
                        {{-- Filter Button --}}
                        <button type="submit" name="action" value="view" class="btn btn-primary flex-fill">
                            <i class="fas fa-filter me-2"></i>
                            Apply Filter
                        </button>
                        
                        {{-- Export Button --}}
                        <a href="{{ route('deductions.members.list', array_merge(request()->query(), ['action' => 'export'])) }}" 
                           class="btn btn-success flex-fill">
                            <i class="bi bi-file-earmark-excel me-2"></i>
                            Export Excel
                        </a>
                    </div>
                </div>
                
            </div>
            
            {{-- QUICK FILTERS --}}
            <div class="row mt-4 pt-3" style="border-top: 1px dashed rgba(23, 71, 158, 0.2);">
                <div class="col-12">
                    <div class="d-flex flex-wrap align-items-center gap-2">
                        <small class="text-muted fw-semibold me-2">
                            <i class="bi bi-lightning-fill me-1"></i>
                            Quick Filters:
                        </small>
                        <button type="button" class="btn btn-sm btn-outline-primary quick-filter-btn" onclick="setToday()">
                            <i class="bi bi-calendar-check me-1"></i>
                            Today
                        </button>
                        <button type="button" class="btn btn-sm btn-outline-primary quick-filter-btn" onclick="setThisMonth()">
                            <i class="bi bi-calendar-month me-1"></i>
                            This Month
                        </button>
                        <button type="button" class="btn btn-sm btn-outline-primary quick-filter-btn" onclick="setLastMonth()">
                            <i class="bi bi-calendar2-month me-1"></i>
                            Last Month
                        </button>
                        <a href="{{ route('deductions.members.list') }}" class="btn btn-sm btn-outline-secondary quick-filter-btn ms-auto">
                            <i class="bi bi-arrow-clockwise me-1"></i>
                            Reset All
                        </a>
                    </div>
                </div>
            </div>
            
        </div>
    </div>
</form>

{{-- MEMBERS LIST TABLE --}}
<div class="card border-0 shadow-lg">
    <div class="card-header" style="background: linear-gradient(135deg, #87CEEB 0%, #4facfe 100%); color: white; padding: 1rem 1.5rem;">
        <h5 class="mb-0 fw-bold">
            <i class="fas fa-users me-2"></i>Members List 
            <small>(Page {{ $members->currentPage() }} of {{ $members->lastPage() }})</small>
        </h5>
    </div>
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-hover mb-0 modern-table" style="width:100%">
                <thead>
                    <tr class="text-white">
                        <th width="60" class="text-center border-0">SN</th>
                        <th class="border-0">Check Number</th>
                        <th class="border-0">National ID</th>
                        <th class="border-0">Name</th>
                        <th class="border-0">Monthly Salary</th>
                        <th class="border-0">Vote Code</th>
                        <th class="border-0">Department</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($members as $index => $member)
                    <tr>
                        <td class="text-center align-middle">
                            <div class="badge" style="background: #17479E; color: white; font-weight: bold; width: 35px; height: 35px; display: flex; align-items: center; justify-content: center; border-radius: 50%;">
                                {{ $members->firstItem() + $index }}
                            </div>
                        </td>
                        <td class="align-middle">{{ $member->checkNumber }}</td>
                        <td class="align-middle">{{ $member->nationalId }}</td>
                        <td class="align-middle text-uppercase">{{ $member->firstName }} {{ $member->middleName }} {{ $member->lastName }}</td>
                        <td class="align-middle">
                            <span class="badge bg-success-subtle text-success px-2 py-1">
                                TSh {{ number_format($member->monthlySalary, 2) }}
                            </span>
                        </td>
                        <td class="align-middle">{{ $member->voteCode }}</td>
                        <td class="align-middle text-uppercase">{{ $member->deptName }}</td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="7" class="text-center py-5">
                            <div class="text-muted">
                                <i class="fas fa-inbox fa-3x mb-3 opacity-50"></i>
                                <h5>No members found</h5>
                                <p>No member records match the current filters.</p>
                            </div>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
    
    {{-- PAGINATION FOOTER --}}
    @if($members->hasPages())
    <div class="card-footer bg-light">
        <div class="d-flex justify-content-between align-items-center">
            <div class="text-muted small">
                Showing {{ $members->firstItem() }} to {{ $members->lastItem() }} of {{ $members->total() }} entries
            </div>
            <div>
                {{ $members->links('pagination::bootstrap-5') }}
            </div>
        </div>
    </div>
    @endif
</div>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">

<script>
    // Quick Filter Functions
    function setToday() {
        const today = new Date();
        const dateStr = today.toISOString().split('T')[0];
        document.getElementById('date').value = dateStr;
    }

    function setThisMonth() {
        const now = new Date();
        const firstDay = new Date(now.getFullYear(), now.getMonth(), 1);
        const dateStr = firstDay.toISOString().split('T')[0];
        document.getElementById('date').value = dateStr;
    }

    function setLastMonth() {
        const now = new Date();
        const firstDayLastMonth = new Date(now.getFullYear(), now.getMonth() - 1, 1);
        const dateStr = firstDayLastMonth.toISOString().split('T')[0];
        document.getElementById('date').value = dateStr;
    }
</script>
@endsection