@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>

{{-- Modern Breadcrumb --}}
<nav aria-label="breadcrumb" class="mb-4">
    <ol class="breadcrumb modern-breadcrumb-notification">
        <li class="breadcrumb-item">
            <a href="{{ route('dashboard') }}" class="breadcrumb-link">
                <i class="bx bx-home"></i>
                <span>Dashboard</span>
            </a>
        </li>
        <li class="breadcrumb-item active">
            <i class="bx bx-group"></i>
            <span>Members List</span>
        </li>
    </ol>
</nav>

{{-- Modern Page Header --}}
<div class="page-header-modern mb-4" style="overflow: visible !important; position: relative; z-index: 100;">
    <div class="d-flex justify-content-between align-items-center">
        <div class="d-flex align-items-center">
            <div class="header-icon me-3">
                <i class="bx bx-group"></i>
            </div>
            <div>
                <h1 class="page-title mb-0 text-white">Members List</h1>
                <p class="page-subtitle mb-0">View member details and deduction information</p>
            </div>
        </div>
        <div class="d-flex align-items-center gap-3" style="position: relative; z-index: 1000;">
            {{-- Filter Button --}}
            <button class="btn" data-bs-toggle="modal" data-bs-target="#filtersModal" style="background: rgba(255,255,255,0.25); color: white; border: 2px solid rgba(255,255,255,0.5); font-weight: 600; padding: 0.6rem 1.2rem; border-radius: 8px;">
                <i class="bx bx-filter-alt"></i> Filters
            </button>
        </div>
    </div>
</div>


{{-- 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>
                {{ $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>

{{-- MODERN FILTER MODAL --}}
<div class="modal fade" id="filtersModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
        <div class="modal-content modern-filter-modal">
            {{-- Header --}}
            <div class="modal-header">
                <div>
                    <h5 class="modal-title">
                        <i class="bx bx-filter me-2"></i>Advanced Filters
                    </h5>
                    <p class="modal-subtitle">Filter members by date, name, or check number</p>
                </div>
                <button type="button" class="btn-close-modern" data-bs-dismiss="modal">
                    <i class="fas fa-times"></i>
                </button>
            </div>

            {{-- Body --}}
            <div class="modal-body">
                <form action="{{ route('deductions.members.list') }}" method="GET" id="filtersForm">
                    <div class="row g-3">
                        {{-- Check Date Filter --}}
                        <div class="col-md-6">
                            <div class="filter-group">
                                <label class="filter-label">
                                    <i class="bx bx-calendar"></i>
                                    Check Date
                                </label>
                                <input type="date"
                                       name="date"
                                       class="form-control"
                                       value="{{ request('date', $date) }}">
                            </div>
                        </div>

                        {{-- Check Number Filter --}}
                        <div class="col-md-6">
                            <div class="filter-group">
                                <label class="filter-label">
                                    <i class="bx bx-hash"></i>
                                    Check Number
                                </label>
                                <input type="text"
                                       name="checkNumber"
                                       class="form-control"
                                       placeholder="Enter check number"
                                       value="{{ request('checkNumber', $checkNumber) }}">
                            </div>
                        </div>

                        {{-- First Name Filter --}}
                        <div class="col-md-6">
                            <div class="filter-group">
                                <label class="filter-label">
                                    <i class="bx bx-user"></i>
                                    First Name
                                </label>
                                <input type="text"
                                       name="firstName"
                                       class="form-control"
                                       placeholder="Enter first name"
                                       value="{{ request('firstName', $firstName) }}">
                            </div>
                        </div>

                        {{-- Middle Name Filter --}}
                        <div class="col-md-6">
                            <div class="filter-group">
                                <label class="filter-label">
                                    <i class="bx bx-user-circle"></i>
                                    Middle Name
                                </label>
                                <input type="text"
                                       name="middleName"
                                       class="form-control"
                                       placeholder="Enter middle name"
                                       value="{{ request('middleName', $middleName) }}">
                            </div>
                        </div>

                        {{-- Last Name Filter --}}
                        <div class="col-md-6">
                            <div class="filter-group">
                                <label class="filter-label">
                                    <i class="bx bx-user-check"></i>
                                    Last Name
                                </label>
                                <input type="text"
                                       name="lastName"
                                       class="form-control"
                                       placeholder="Enter last name"
                                       value="{{ request('lastName', $lastName) }}">
                            </div>
                        </div>

                        {{-- Action Type Hidden Field --}}
                        <input type="hidden" name="action" value="view" id="filterAction">
                    </div>

                    {{-- Quick Filters Section --}}
                    <div class="row mt-4 pt-3" style="border-top: 1px solid #e2e8f0;">
                        <div class="col-12">
                            <label class="filter-label mb-2">
                                <i class="bx bx-bolt"></i>
                                Quick Date Filters
                            </label>
                            <div class="d-flex flex-wrap gap-2">
                                <button type="button" class="btn btn-sm btn-outline-primary" onclick="setTodayModal()">
                                    <i class="bi bi-calendar-check me-1"></i>
                                    Today
                                </button>
                                <button type="button" class="btn btn-sm btn-outline-primary" onclick="setThisMonthModal()">
                                    <i class="bi bi-calendar-month me-1"></i>
                                    This Month
                                </button>
                                <button type="button" class="btn btn-sm btn-outline-primary" onclick="setLastMonthModal()">
                                    <i class="bi bi-calendar2-month me-1"></i>
                                    Last Month
                                </button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>

            {{-- Footer --}}
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                    <i class="bx bx-x me-1"></i>
                    Cancel
                </button>
                <a href="{{ route('deductions.members.list') }}" class="btn btn-outline-warning">
                    <i class="bx bx-refresh me-1"></i>
                    Reset
                </a>
                <button type="button" class="btn btn-success" onclick="exportMembers()">
                    <i class="bx bx-download me-1"></i>
                    Export Excel
                </button>
                <button type="submit" form="filtersForm" class="btn btn-primary">
                    <i class="bx bx-search me-1"></i>
                    Apply Filters
                </button>
            </div>
        </div>
    </div>
</div>

@push('styles')
<style>
/* Notification-Style Modern Breadcrumb & Header */
.modern-breadcrumb-notification {
    background: white;
    padding: 14px 20px;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    margin-bottom: 0;
    border: 1px solid #e5e7eb;
}

.modern-breadcrumb-notification .breadcrumb-item {
    display: flex;
    align-items: center;
    font-size: 14px;
}

.breadcrumb-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #6b7280;
    text-decoration: none;
    transition: color 0.2s;
}

.breadcrumb-link:hover {
    color: #3b82f6;
}

.page-header-modern {
    background: linear-gradient(135deg, #17479E 0%, #87CEEB 100%);
    padding: 36px;
    border-radius: 6px;
    color: white;
    box-shadow: 0 2px 6px rgba(23, 71, 158, 0.15);
    position: relative;
    overflow: visible;
}

.header-icon {
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
}

.page-title {
    font-size: 28px;
    font-weight: 700;
}

.page-subtitle {
    font-size: 14px;
    opacity: 0.95;
}

/* Header Buttons Hover Effects */
.page-header-modern .btn:hover {
    background: rgba(255,255,255,0.35) !important;
    border-color: rgba(255,255,255,0.7) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* Dropdown Menu Z-index Fix */
.page-header-modern .dropdown {
    position: relative;
    z-index: 1050;
}

.page-header-modern .dropdown-menu {
    position: absolute !important;
    z-index: 1060 !important;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    padding: 0.5rem 0;
    min-width: 220px;
    margin-top: 0.5rem !important;
}

/* Modern Filter Modal Styles */
.modern-filter-modal {
    border-radius: 16px;
    overflow: hidden;
    border: none;
}

.modern-filter-modal .modal-header {
    background: linear-gradient(135deg, #17479E 0%, #2563eb 100%);
    color: white;
    padding: 24px 28px;
    border-bottom: none;
}

.modern-filter-modal .modal-title {
    font-size: 20px;
    font-weight: 700;
    margin: 0;
    color: white;
}

.modern-filter-modal .modal-subtitle {
    font-size: 13px;
    margin: 4px 0 0 0;
    opacity: 0.9;
    color: white;
}

.btn-close-modern {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    color: white;
}

.btn-close-modern:hover {
    background: rgba(255, 255, 255, 0.3);
}

.modern-filter-modal .modal-body {
    padding: 24px 28px;
    background: #f8f9fa;
}

.filter-group {
    margin-bottom: 0;
}

.filter-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 14px;
    color: #1e293b;
    margin-bottom: 8px;
}

.filter-label i {
    font-size: 16px;
    color: #5B9FDE;
}

.filter-group .form-control,
.filter-group .form-select {
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 14px;
    transition: all 0.2s ease;
}

.filter-group .form-control:focus,
.filter-group .form-select:focus {
    border-color: #5B9FDE;
    box-shadow: 0 0 0 3px rgba(91, 159, 222, 0.1);
}

.modern-filter-modal .modal-footer {
    padding: 16px 28px;
    background: white;
    border-top: 1px solid #e2e8f0;
}

.modern-filter-modal .btn {
    border-radius: 8px;
    padding: 10px 20px;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.2s ease;
}

.modern-filter-modal .btn-primary {
    background: linear-gradient(135deg, #5B9FDE 0%, #7CB3E8 100%);
    border: none;
}

.modern-filter-modal .btn-primary:hover {
    background: linear-gradient(135deg, #4A8ECD 0%, #6BA2D7 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(91, 159, 222, 0.3);
}

@media (max-width: 768px) {
    .modern-filter-modal .modal-header {
        padding: 20px;
    }

    .modern-filter-modal .modal-body {
        padding: 20px;
    }

    .modern-filter-modal .modal-footer {
        padding: 16px 20px;
        flex-direction: column;
        gap: 8px;
    }

    .modern-filter-modal .btn {
        width: 100%;
    }
}
</style>
@endpush

<script>
    // Modal Quick Filter Functions
    function setTodayModal() {
        const today = new Date();
        const dateStr = today.toISOString().split('T')[0];
        document.querySelector('#filtersModal input[name="date"]').value = dateStr;
    }

    function setThisMonthModal() {
        const now = new Date();
        const firstDay = new Date(now.getFullYear(), now.getMonth(), 1);
        const dateStr = firstDay.toISOString().split('T')[0];
        document.querySelector('#filtersModal input[name="date"]').value = dateStr;
    }

    function setLastMonthModal() {
        const now = new Date();
        const firstDayLastMonth = new Date(now.getFullYear(), now.getMonth() - 1, 1);
        const dateStr = firstDayLastMonth.toISOString().split('T')[0];
        document.querySelector('#filtersModal input[name="date"]').value = dateStr;
    }

    // Export function
    function exportMembers() {
        const params = new URLSearchParams(window.location.search);
        params.set('action', 'export');
        window.location.href = '{{ route("deductions.members.list") }}?' + params.toString();
    }
</script>

@endsection