@extends('layouts.app')

@section('content')
<div class="container-fluid">

    {{-- CSS Styles --}}
    <style>
        .unified-header-card {
            background: #ffffff;
            border: 1px solid #e5e7eb;
            border-radius: 10px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
        }

        .header-top {
            padding: 0.75rem 1.25rem;
            border-bottom: 1px solid #f1f5f9;
        }

        .nav-breadcrumb {
            list-style: none;
            background: transparent;
            padding: 0;
            margin: 0;
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 0.25rem;
            font-size: 0.85rem;
        }

        .nav-breadcrumb a {
            color: #64748b;
            text-decoration: none;
            transition: color 0.2s ease;
            display: flex;
            align-items: center;
            gap: 0.25rem;
        }

        .nav-breadcrumb a:hover {
            color: #17479E;
        }

        .nav-breadcrumb .active {
            color: #17479E;
            font-weight: 600;
        }

        .nav-sep {
            color: #cbd5e1;
            font-size: 0.7rem;
            margin: 0 0.4rem;
        }

        .analytics-card {
            transition: all 0.3s ease;
        }

        .analytics-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15) !important;
        }

        .card-number {
            font-size: 1.75rem;
        }

        .card-icon-box {
            width: 40px;
            height: 40px;
        }

        .card-icon {
            font-size: 1.1rem;
        }

        .performance-card {
            background: white;
            border-radius: 12px;
            padding: 1.5rem;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
            transition: all 0.3s ease;
            cursor: pointer;
            height: 100%;
        }

        .performance-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 20px rgba(23, 71, 158, 0.2);
            border: 2px solid #17479E;
        }

        .performance-title {
            font-size: 1.1rem;
            font-weight: 700;
            color: #1e293b;
            margin-bottom: 1rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .performance-count-display {
            text-align: center;
            padding: 2rem 0;
        }

        .performance-count-number {
            font-size: 3rem;
            font-weight: 700;
            color: #17479E;
            margin-bottom: 0.5rem;
        }

        .performance-count-label {
            font-size: 0.9rem;
            color: #64748b;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .deduction-section {
            margin-bottom: 1.5rem;
        }

        .deduction-section:last-child {
            margin-bottom: 0;
        }

        .deduction-count {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 1rem;
            padding: 1rem;
            background: #f8fafc;
            border-radius: 8px;
            margin-top: 0.5rem;
        }

        .deduction-count-number {
            font-size: 2rem;
            font-weight: 700;
        }

        .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;
        }

        .user-avatar {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: linear-gradient(135deg, #17479E 0%, #87CEEB 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: 600;
            font-size: 0.85rem;
        }

        .empty-state {
            text-align: center;
            padding: 3rem 0;
        }

        .empty-state i {
            font-size: 4rem;
            color: #cbd5e1;
            margin-bottom: 1rem;
        }

        /* Modal Styles */
        .modal-header {
            background: linear-gradient(135deg, #17479E 0%, #87CEEB 100%);
            color: white;
            border-bottom: none;
        }

        .modal-title {
            font-weight: 700;
        }

        .modal-body {
            padding: 0;
        }

        .modal-table {
            margin-bottom: 0;
        }

        .modal-table thead th {
            position: sticky;
            top: 0;
            z-index: 10;
        }

        /* Pagination Styles */
        .pagination-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1rem 1.25rem;
            background: #f8f9fa;
            border-top: 1px solid #dee2e6;
        }

        .pagination-info {
            font-size: 0.875rem;
            color: #64748b;
        }

        .pagination-buttons {
            display: flex;
            gap: 0.5rem;
        }

        .pagination-btn {
            padding: 0.5rem 1rem;
            border: 1px solid #dee2e6;
            background: white;
            color: #17479E;
            border-radius: 6px;
            cursor: pointer;
            font-weight: 600;
            transition: all 0.2s ease;
        }

        .pagination-btn:hover:not(:disabled) {
            background: #17479E;
            color: white;
        }

        .pagination-btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        .pagination-page-numbers {
            display: flex;
            gap: 0.25rem;
        }

        .pagination-page-btn {
            padding: 0.5rem 0.75rem;
            border: 1px solid #dee2e6;
            background: white;
            color: #64748b;
            border-radius: 6px;
            cursor: pointer;
            font-weight: 600;
            transition: all 0.2s ease;
            min-width: 40px;
            text-align: center;
        }

        .pagination-page-btn:hover {
            background: #e3f2fd;
            border-color: #17479E;
        }

        .pagination-page-btn.active {
            background: #17479E;
            color: white;
            border-color: #17479E;
        }

        .modal-user-row {
            display: none;
        }

        .modal-user-row.visible {
            display: table-row;
        }

        @media (max-width: 768px) {
            .header-top {
                padding: 0.75rem 1rem;
            }

            .analytics-card .card-number {
                font-size: 1.5rem !important;
            }

            .analytics-card .card-icon-box {
                width: 36px !important;
                height: 36px !important;
            }

            .analytics-card .card-icon {
                font-size: 0.95rem !important;
            }

            .performance-card {
                padding: 1rem;
            }

            .performance-title {
                font-size: 1rem;
            }

            .performance-count-number {
                font-size: 2rem;
            }

            .deduction-count-number {
                font-size: 1.5rem;
            }

            .pagination-container {
                flex-direction: column;
                gap: 1rem;
            }

            .pagination-page-numbers {
                flex-wrap: wrap;
            }
        }

        @media (max-width: 576px) {
            .analytics-card .card-number {
                font-size: 1.35rem !important;
            }

            .analytics-card .card-icon-box {
                width: 32px !important;
                height: 32px !important;
            }

            .analytics-card .card-icon {
                font-size: 0.85rem !important;
            }

            .analytics-card .card-body {
                padding: 0.75rem !important;
            }

            .nav-breadcrumb {
                font-size: 0.75rem;
            }

            .performance-count-number {
                font-size: 1.5rem;
            }
        }
    </style>

    {{-- Breadcrumb Header --}}
    <div class="card unified-header-card mb-4">
        <div class="header-top">
            <nav aria-label="breadcrumb">
                <ol class="nav-breadcrumb">
                    <li>
                        <a href="{{ route('dashboard') }}">
                            <i class="fas fa-home"></i>
                            <span class="d-none d-sm-inline">Dashboard</span>
                        </a>
                    </li>
                    <span class="nav-sep">
                        <i class="fas fa-chevron-right"></i>
                    </span>
                    <li>
                        <a href="{{ route('branches.index') }}">
                            <span>Branches</span>
                        </a>
                    </li>
                    <span class="nav-sep">
                        <i class="fas fa-chevron-right"></i>
                    </span>
                    <li class="active" aria-current="page">
                        {{ $branch->name }} Users
                    </li>
                </ol>
            </nav>
        </div>
    </div>

    {{-- Page Header with Gradient --}}
    <div class="mb-4" style="background: linear-gradient(135deg, #17479E 0%, #87CEEB 100%); padding: 32px; border-radius: 12px; color: white; box-shadow: 0 4px 12px rgba(23, 71, 158, 0.15);">
        <div class="d-flex justify-content-between align-items-center flex-wrap gap-3">
            <div class="d-flex align-items-center gap-3">
                <div style="width: 50px; height: 50px; background: rgba(255,255,255,0.2); border-radius: 12px; display: flex; align-items: center; justify-content: center; color: white; font-size: 24px; backdrop-filter: blur(10px);">
                    <i class="fas fa-users"></i>
                </div>
                <div>
                    <h1 class="mb-1" style="font-size: 28px; font-weight: 700; color: white;">
                        {{ $branch->name }} Branch Users
                    </h1>
                    <p class="mb-0 d-none d-sm-block" style="color: rgba(255,255,255,0.9); font-size: 14px;">
                        User analytics and performance tracking
                    </p>
                </div>
            </div>
            <div class="d-flex gap-2 flex-wrap">
                <span class="fw-semibold px-3 py-2" style="background: white; color: #17479E; border-radius: 8px; display: inline-flex; align-items: center; font-size: 14px; gap: 8px;">
                    <i class="fas fa-user-friends"></i>
                    <span>{{ $users->count() }} Users</span>
                </span>
            </div>
        </div>
    </div>

    {{-- Login Analytics Cards --}}
    <div class="row g-3 mb-4">
        @php
            $login_cards = [
                [
                    'title' => 'Logged In Today',
                    'key' => 'today',
                    'icon' => 'fas fa-calendar-day',
                    'gradient' => 'linear-gradient(135deg, #10b981 0%, #059669 100%)',
                ],
                [
                    'title' => 'This Week',
                    'key' => 'this_week',
                    'icon' => 'fas fa-calendar-week',
                    'gradient' => 'linear-gradient(135deg, #3b82f6 0%, #2563eb 100%)',
                ],
                [
                    'title' => 'This Month',
                    'key' => 'this_month',
                    'icon' => 'fas fa-calendar-alt',
                    'gradient' => 'linear-gradient(135deg, #f59e0b 0%, #d97706 100%)',
                ],
                [
                    'title' => 'Long Time Ago',
                    'key' => 'long_time',
                    'icon' => 'fas fa-clock',
                    'gradient' => 'linear-gradient(135deg, #dc3545 0%, #c41e30 100%)',
                ],
            ];
        @endphp

        @foreach ($login_cards as $card)
            <div class="col-6 col-md-3">
                <div class="card border-0 shadow-sm h-100 analytics-card" style="background: #fff; border-radius: 12px;">
                    <div class="card-body p-3">
                        <div class="d-flex justify-content-between align-items-start mb-2">
                            <div class="flex-grow-1">
                                <p class="text-muted mb-1 small fw-medium">{{ $card['title'] }}</p>
                                <h3 class="fw-bold mb-0 card-number" style="color: #1e293b;">
                                    {{ count($loginAnalytics[$card['key']] ?? []) }}
                                </h3>
                                <p class="mb-0 text-muted" style="font-size: 0.75rem;">
                                    <i class="fas fa-user-check me-1"></i> Active Users
                                </p>
                            </div>
                            <div class="d-flex align-items-center justify-content-center card-icon-box" style="background: {{ $card['gradient'] }}; border-radius: 10px;">
                                <i class="{{ $card['icon'] }} text-white card-icon"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        @endforeach
    </div>

    {{-- Performance Analytics Section --}}
    <div class="row g-3 mb-4">
        {{-- Top Performers (Enquiries) --}}
        <div class="col-md-6 col-lg-3">
            <div class="performance-card" data-bs-toggle="modal" data-bs-target="#topPerformersModal">
                <div class="performance-title">
                    <i class="fas fa-trophy text-warning"></i>
                    <span>Top Performers</span>
                </div>
                <div class="performance-count-display">
                    <div class="performance-count-number">
                        {{ ($enquiryPerformance['top_performers'] ?? collect())->count() }}
                    </div>
                    <div class="performance-count-label">
                        Users with Enquiries
                    </div>
                </div>
            </div>
        </div>

        {{-- Most Rejections --}}
        <div class="col-md-6 col-lg-3">
            <div class="performance-card" data-bs-toggle="modal" data-bs-target="#mostRejectionsModal">
                <div class="performance-title">
                    <i class="fas fa-exclamation-triangle text-danger"></i>
                    <span>Most Rejections</span>
                </div>
                <div class="performance-count-display">
                    <div class="performance-count-number">
                        {{ ($rejectionPerformance['poor_performers'] ?? collect())->count() }}
                    </div>
                    <div class="performance-count-label">
                        Users with Rejections
                    </div>
                </div>
            </div>
        </div>

        {{-- Withdraw Savings Leaders --}}
        <div class="col-md-6 col-lg-3">
            <div class="performance-card" data-bs-toggle="modal" data-bs-target="#withdrawLeadersModal">
                <div class="performance-title">
                    <i class="fas fa-hand-holding-usd text-info"></i>
                    <span>Withdraw Leaders</span>
                </div>
                <div class="performance-count-display">
                    <div class="performance-count-number">
                        {{ ($withdrawSavingsLeaders ?? collect())->count() }}
                    </div>
                    <div class="performance-count-label">
                        Withdrawal Processors
                    </div>
                </div>
            </div>
        </div>

        {{-- Deduction Leaders --}}
        <div class="col-md-6 col-lg-3">
            <div class="performance-card" data-bs-toggle="modal" data-bs-target="#deductionLeadersModal">
                <div class="performance-title">
                    <i class="fas fa-exchange-alt text-primary"></i>
                    <span>Deduction Leaders</span>
                </div>
                <div class="deduction-section">
                    <small class="text-success fw-semibold d-block mb-1" style="text-align: center;">
                        <i class="fas fa-arrow-up"></i> Increase
                    </small>
                    <div class="deduction-count">
                        <div class="deduction-count-number text-success">
                            {{ ($deductionLeaders['increase'] ?? collect())->count() }}
                        </div>
                        <div class="performance-count-label" style="font-size: 0.75rem;">Users</div>
                    </div>
                </div>
                <div class="deduction-section">
                    <small class="text-danger fw-semibold d-block mb-1" style="text-align: center;">
                        <i class="fas fa-arrow-down"></i> Decrease
                    </small>
                    <div class="deduction-count">
                        <div class="deduction-count-number text-danger">
                            {{ ($deductionLeaders['decrease'] ?? collect())->count() }}
                        </div>
                        <div class="performance-count-label" style="font-size: 0.75rem;">Users</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- All Users Table --}}
    <div class="card border-0 shadow-sm">
        <div class="card-header" style="background: linear-gradient(135deg, #17479E 0%, #87CEEB 100%); color: white; padding: 1rem 1.25rem;">
            <h5 class="mb-0 fw-bold">
                <i class="fas fa-table me-2"></i>
                All Users
            </h5>
        </div>
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover mb-0">
                    <thead>
                        <tr>
                            <th class="text-center" width="60">
                                <i class="fas fa-hashtag me-1"></i>
                                <span class="fw-bold">SN</span>
                            </th>
                            <th>
                                <i class="fas fa-user me-2"></i>
                                <span class="fw-bold">Name</span>
                            </th>
                            <th>
                                <i class="fas fa-envelope me-2"></i>
                                <span class="fw-bold">Email</span>
                            </th>
                            <th class="text-center">
                                <i class="fas fa-clipboard-list me-2"></i>
                                <span class="fw-bold">Enquiries</span>
                            </th>
                            <th class="text-center">
                                <i class="fas fa-times-circle me-2"></i>
                                <span class="fw-bold">Rejections</span>
                            </th>
                            <th>
                                <i class="fas fa-clock me-2"></i>
                                <span class="fw-bold">Last Login</span>
                            </th>
                            <th class="text-center" width="120">
                                <i class="fas fa-cog me-2"></i>
                                <span class="fw-bold">Actions</span>
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($users as $user)
                            <tr>
                                <td class="text-center align-middle">
                                    <div class="badge" style="background: #64748b; color: white; font-weight: bold; padding: 0.5rem 0.75rem; border-radius: 8px;">
                                        {{ $loop->iteration }}
                                    </div>
                                </td>
                                <td class="align-middle">
                                    <div class="d-flex align-items-center gap-2">
                                        <div class="user-avatar" style="width: 32px; height: 32px; font-size: 0.75rem;">
                                            {{ strtoupper(substr($user->name, 0, 2)) }}
                                        </div>
                                        <span class="fw-semibold text-uppercase">{{ $user->name }}</span>
                                    </div>
                                </td>
                                <td class="align-middle">
                                    <span class="text-muted">{{ $user->email }}</span>
                                </td>
                                <td class="text-center align-middle">
                                    <span class="badge bg-success" style="padding: 0.4rem 0.8rem; border-radius: 6px; font-size: 0.85rem; min-width: 50px;">
                                        {{ $enquiryPerformance['all_counts'][$user->id] ?? 0 }}
                                    </span>
                                </td>
                                <td class="text-center align-middle">
                                    <span class="badge bg-danger" style="padding: 0.4rem 0.8rem; border-radius: 6px; font-size: 0.85rem; min-width: 50px;">
                                        {{ $rejectionPerformance['all_counts'][$user->id] ?? 0 }}
                                    </span>
                                </td>
                                <td class="align-middle">
                                    @if($user->last_login)
                                        <div class="d-flex flex-column">
                                            <span class="fw-semibold text-primary" style="font-size: 0.85rem;">
                                                {{ \Carbon\Carbon::parse($user->last_login)->format('d/m/Y') }}
                                            </span>
                                            <small class="text-muted">
                                                {{ \Carbon\Carbon::parse($user->last_login)->format('H:i') }} HRS
                                            </small>
                                        </div>
                                    @else
                                        <span class="text-muted">
                                            <i class="fas fa-minus-circle"></i> Never
                                        </span>
                                    @endif
                                </td>
                                <td class="text-center align-middle">
                                    <a href="{{ route('users.show', $user->id) }}"
                                       class="btn btn-sm btn-outline-primary"
                                       style="border-radius: 8px; font-weight: 600; transition: all 0.2s; text-transform: uppercase; font-size: 11px; letter-spacing: 0.5px; padding: 0.5rem 1rem;">
                                        <i class="fas fa-eye me-1"></i>View
                                    </a>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="7">
                                    <div class="empty-state">
                                        <i class="fas fa-users-slash"></i>
                                        <h5 class="text-muted fw-bold mb-2">No Users Found</h5>
                                        <p class="text-muted">There are no users in this branch yet</p>
                                    </div>
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>

</div>

{{-- Top Performers Modal --}}
<div class="modal fade" id="topPerformersModal" tabindex="-1" aria-labelledby="topPerformersModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="topPerformersModalLabel">
                    <i class="fas fa-trophy me-2"></i>Top Performers - Enquiries
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="table-responsive">
                    <table class="table table-hover mb-0 modal-table">
                        <thead>
                            <tr>
                                <th class="text-center" width="60">SN</th>
                                <th>Name</th>
                                <th>Email</th>
                                <th class="text-center">Enquiries</th>
                            </tr>
                        </thead>
                        <tbody id="topPerformersTableBody">
                            @forelse(($enquiryPerformance['top_performers'] ?? collect()) as $performer)
                                <tr class="modal-user-row" data-modal="topPerformers">
                                    <td class="text-center">{{ $loop->iteration }}</td>
                                    <td>
                                        <div class="d-flex align-items-center gap-2">
                                            <div class="user-avatar" style="width: 32px; height: 32px; font-size: 0.75rem;">
                                                {{ strtoupper(substr($performer['user']->name ?? 'N', 0, 2)) }}
                                            </div>
                                            <span class="fw-semibold">{{ $performer['user']->name ?? 'N/A' }}</span>
                                        </div>
                                    </td>
                                    <td>{{ $performer['user']->email ?? 'N/A' }}</td>
                                    <td class="text-center">
                                        <span class="badge bg-success">{{ $performer['count'] }}</span>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="4" class="text-center text-muted py-4">
                                        <i class="fas fa-inbox fa-2x mb-2"></i>
                                        <p>No top performers data available</p>
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
            @if(($enquiryPerformance['top_performers'] ?? collect())->count() > 0)
            <div class="pagination-container">
                <div class="pagination-info" id="topPerformersInfo">Showing 1-10 of {{ ($enquiryPerformance['top_performers'] ?? collect())->count() }}</div>
                <div class="pagination-buttons">
                    <button class="pagination-btn" onclick="changePage('topPerformers', -1)" id="topPerformersPrev">Previous</button>
                    <div class="pagination-page-numbers" id="topPerformersPages"></div>
                    <button class="pagination-btn" onclick="changePage('topPerformers', 1)" id="topPerformersNext">Next</button>
                </div>
            </div>
            @endif
        </div>
    </div>
</div>

{{-- Most Rejections Modal --}}
<div class="modal fade" id="mostRejectionsModal" tabindex="-1" aria-labelledby="mostRejectionsModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="mostRejectionsModalLabel">
                    <i class="fas fa-exclamation-triangle me-2"></i>Most Rejections
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="table-responsive">
                    <table class="table table-hover mb-0 modal-table">
                        <thead>
                            <tr>
                                <th class="text-center" width="60">SN</th>
                                <th>Name</th>
                                <th>Email</th>
                                <th class="text-center">Rejections</th>
                            </tr>
                        </thead>
                        <tbody id="mostRejectionsTableBody">
                            @forelse(($rejectionPerformance['poor_performers'] ?? collect()) as $performer)
                                <tr class="modal-user-row" data-modal="mostRejections">
                                    <td class="text-center">{{ $loop->iteration }}</td>
                                    <td>
                                        <div class="d-flex align-items-center gap-2">
                                            <div class="user-avatar" style="width: 32px; height: 32px; font-size: 0.75rem;">
                                                {{ strtoupper(substr($performer['user']->name ?? 'N', 0, 2)) }}
                                            </div>
                                            <span class="fw-semibold">{{ $performer['user']->name ?? 'N/A' }}</span>
                                        </div>
                                    </td>
                                    <td>{{ $performer['user']->email ?? 'N/A' }}</td>
                                    <td class="text-center">
                                        <span class="badge bg-danger">{{ $performer['count'] }}</span>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="4" class="text-center text-muted py-4">
                                        <i class="fas fa-inbox fa-2x mb-2"></i>
                                        <p>No rejection data available</p>
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
            @if(($rejectionPerformance['poor_performers'] ?? collect())->count() > 0)
            <div class="pagination-container">
                <div class="pagination-info" id="mostRejectionsInfo">Showing 1-10 of {{ ($rejectionPerformance['poor_performers'] ?? collect())->count() }}</div>
                <div class="pagination-buttons">
                    <button class="pagination-btn" onclick="changePage('mostRejections', -1)" id="mostRejectionsPrev">Previous</button>
                    <div class="pagination-page-numbers" id="mostRejectionsPages"></div>
                    <button class="pagination-btn" onclick="changePage('mostRejections', 1)" id="mostRejectionsNext">Next</button>
                </div>
            </div>
            @endif
        </div>
    </div>
</div>

{{-- Withdraw Leaders Modal --}}
<div class="modal fade" id="withdrawLeadersModal" tabindex="-1" aria-labelledby="withdrawLeadersModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="withdrawLeadersModalLabel">
                    <i class="fas fa-hand-holding-usd me-2"></i>Withdraw Savings Leaders
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="table-responsive">
                    <table class="table table-hover mb-0 modal-table">
                        <thead>
                            <tr>
                                <th class="text-center" width="60">SN</th>
                                <th>Name</th>
                                <th>Email</th>
                                <th class="text-center">Withdrawals</th>
                            </tr>
                        </thead>
                        <tbody id="withdrawLeadersTableBody">
                            @forelse(($withdrawSavingsLeaders ?? collect()) as $leader)
                                <tr class="modal-user-row" data-modal="withdrawLeaders">
                                    <td class="text-center">{{ $loop->iteration }}</td>
                                    <td>
                                        <div class="d-flex align-items-center gap-2">
                                            <div class="user-avatar" style="width: 32px; height: 32px; font-size: 0.75rem;">
                                                {{ strtoupper(substr($leader['user']->name ?? 'N', 0, 2)) }}
                                            </div>
                                            <span class="fw-semibold">{{ $leader['user']->name ?? 'N/A' }}</span>
                                        </div>
                                    </td>
                                    <td>{{ $leader['user']->email ?? 'N/A' }}</td>
                                    <td class="text-center">
                                        <span class="badge bg-info">{{ $leader['count'] }}</span>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="4" class="text-center text-muted py-4">
                                        <i class="fas fa-inbox fa-2x mb-2"></i>
                                        <p>No withdrawal data available</p>
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
            @if(($withdrawSavingsLeaders ?? collect())->count() > 0)
            <div class="pagination-container">
                <div class="pagination-info" id="withdrawLeadersInfo">Showing 1-10 of {{ ($withdrawSavingsLeaders ?? collect())->count() }}</div>
                <div class="pagination-buttons">
                    <button class="pagination-btn" onclick="changePage('withdrawLeaders', -1)" id="withdrawLeadersPrev">Previous</button>
                    <div class="pagination-page-numbers" id="withdrawLeadersPages"></div>
                    <button class="pagination-btn" onclick="changePage('withdrawLeaders', 1)" id="withdrawLeadersNext">Next</button>
                </div>
            </div>
            @endif
        </div>
    </div>
</div>

{{-- Deduction Leaders Modal --}}
<div class="modal fade" id="deductionLeadersModal" tabindex="-1" aria-labelledby="deductionLeadersModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="deductionLeadersModalLabel">
                    <i class="fas fa-exchange-alt me-2"></i>Deduction Leaders
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                {{-- Increase Section --}}
                <div class="mb-4">
                    <h6 class="text-success fw-bold mb-3">
                        <i class="fas fa-arrow-up me-2"></i>Deduction Increase
                    </h6>
                    <div class="table-responsive">
                        <table class="table table-hover mb-0 modal-table">
                            <thead>
                                <tr>
                                    <th class="text-center" width="60">SN</th>
                                    <th>Name</th>
                                    <th>Email</th>
                                    <th class="text-center">Count</th>
                                </tr>
                            </thead>
                            <tbody id="deductionIncreaseTableBody">
                                @forelse(($deductionLeaders['increase'] ?? collect()) as $leader)
                                    <tr class="modal-user-row" data-modal="deductionIncrease">
                                        <td class="text-center">{{ $loop->iteration }}</td>
                                        <td>
                                            <div class="d-flex align-items-center gap-2">
                                                <div class="user-avatar" style="width: 32px; height: 32px; font-size: 0.75rem;">
                                                    {{ strtoupper(substr($leader['user']->name ?? 'N', 0, 2)) }}
                                                </div>
                                                <span class="fw-semibold">{{ $leader['user']->name ?? 'N/A' }}</span>
                                            </div>
                                        </td>
                                        <td>{{ $leader['user']->email ?? 'N/A' }}</td>
                                        <td class="text-center">
                                            <span class="badge bg-success">{{ $leader['count'] }}</span>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="4" class="text-center text-muted py-4">
                                            <i class="fas fa-inbox fa-2x mb-2"></i>
                                            <p>No deduction increase data available</p>
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                    @if(($deductionLeaders['increase'] ?? collect())->count() > 0)
                    <div class="pagination-container">
                        <div class="pagination-info" id="deductionIncreaseInfo">Showing 1-10 of {{ ($deductionLeaders['increase'] ?? collect())->count() }}</div>
                        <div class="pagination-buttons">
                            <button class="pagination-btn" onclick="changePage('deductionIncrease', -1)" id="deductionIncreasePrev">Previous</button>
                            <div class="pagination-page-numbers" id="deductionIncreasePages"></div>
                            <button class="pagination-btn" onclick="changePage('deductionIncrease', 1)" id="deductionIncreaseNext">Next</button>
                        </div>
                    </div>
                    @endif
                </div>

                {{-- Decrease Section --}}
                <div>
                    <h6 class="text-danger fw-bold mb-3">
                        <i class="fas fa-arrow-down me-2"></i>Deduction Decrease
                    </h6>
                    <div class="table-responsive">
                        <table class="table table-hover mb-0 modal-table">
                            <thead>
                                <tr>
                                    <th class="text-center" width="60">SN</th>
                                    <th>Name</th>
                                    <th>Email</th>
                                    <th class="text-center">Count</th>
                                </tr>
                            </thead>
                            <tbody id="deductionDecreaseTableBody">
                                @forelse(($deductionLeaders['decrease'] ?? collect()) as $leader)
                                    <tr class="modal-user-row" data-modal="deductionDecrease">
                                        <td class="text-center">{{ $loop->iteration }}</td>
                                        <td>
                                            <div class="d-flex align-items-center gap-2">
                                                <div class="user-avatar" style="width: 32px; height: 32px; font-size: 0.75rem;">
                                                    {{ strtoupper(substr($leader['user']->name ?? 'N', 0, 2)) }}
                                                </div>
                                                <span class="fw-semibold">{{ $leader['user']->name ?? 'N/A' }}</span>
                                            </div>
                                        </td>
                                        <td>{{ $leader['user']->email ?? 'N/A' }}</td>
                                        <td class="text-center">
                                            <span class="badge bg-danger">{{ $leader['count'] }}</span>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="4" class="text-center text-muted py-4">
                                            <i class="fas fa-inbox fa-2x mb-2"></i>
                                            <p>No deduction decrease data available</p>
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                    @if(($deductionLeaders['decrease'] ?? collect())->count() > 0)
                    <div class="pagination-container">
                        <div class="pagination-info" id="deductionDecreaseInfo">Showing 1-10 of {{ ($deductionLeaders['decrease'] ?? collect())->count() }}</div>
                        <div class="pagination-buttons">
                            <button class="pagination-btn" onclick="changePage('deductionDecrease', -1)" id="deductionDecreasePrev">Previous</button>
                            <div class="pagination-page-numbers" id="deductionDecreasePages"></div>
                            <button class="pagination-btn" onclick="changePage('deductionDecrease', 1)" id="deductionDecreaseNext">Next</button>
                        </div>
                    </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>

{{-- JavaScript for Pagination --}}
<script>
    // Pagination state for each modal
    const paginationState = {
        topPerformers: { currentPage: 1, itemsPerPage: 10 },
        mostRejections: { currentPage: 1, itemsPerPage: 10 },
        withdrawLeaders: { currentPage: 1, itemsPerPage: 10 },
        deductionIncrease: { currentPage: 1, itemsPerPage: 10 },
        deductionDecrease: { currentPage: 1, itemsPerPage: 10 }
    };

    // Initialize pagination when modals are shown
    document.addEventListener('DOMContentLoaded', function() {
        // Initialize all modals
        ['topPerformers', 'mostRejections', 'withdrawLeaders', 'deductionIncrease', 'deductionDecrease'].forEach(modal => {
            updatePagination(modal);
        });
    });

    function updatePagination(modalName) {
        const state = paginationState[modalName];
        const rows = document.querySelectorAll(`.modal-user-row[data-modal="${modalName}"]`);
        const totalItems = rows.length;
        const totalPages = Math.ceil(totalItems / state.itemsPerPage);

        // Show/hide rows based on current page
        rows.forEach((row, index) => {
            const startIndex = (state.currentPage - 1) * state.itemsPerPage;
            const endIndex = startIndex + state.itemsPerPage;

            if (index >= startIndex && index < endIndex) {
                row.classList.add('visible');
            } else {
                row.classList.remove('visible');
            }
        });

        // Update pagination info
        const startItem = totalItems > 0 ? (state.currentPage - 1) * state.itemsPerPage + 1 : 0;
        const endItem = Math.min(state.currentPage * state.itemsPerPage, totalItems);
        const infoElement = document.getElementById(`${modalName}Info`);
        if (infoElement) {
            infoElement.textContent = `Showing ${startItem}-${endItem} of ${totalItems}`;
        }

        // Update prev/next buttons
        const prevBtn = document.getElementById(`${modalName}Prev`);
        const nextBtn = document.getElementById(`${modalName}Next`);
        if (prevBtn) prevBtn.disabled = state.currentPage === 1;
        if (nextBtn) nextBtn.disabled = state.currentPage === totalPages || totalPages === 0;

        // Update page numbers
        updatePageNumbers(modalName, totalPages);
    }

    function updatePageNumbers(modalName, totalPages) {
        const pagesContainer = document.getElementById(`${modalName}Pages`);
        if (!pagesContainer) return;

        pagesContainer.innerHTML = '';
        const state = paginationState[modalName];
        const maxVisiblePages = 5;

        let startPage = Math.max(1, state.currentPage - Math.floor(maxVisiblePages / 2));
        let endPage = Math.min(totalPages, startPage + maxVisiblePages - 1);

        if (endPage - startPage < maxVisiblePages - 1) {
            startPage = Math.max(1, endPage - maxVisiblePages + 1);
        }

        for (let i = startPage; i <= endPage; i++) {
            const pageBtn = document.createElement('button');
            pageBtn.className = `pagination-page-btn ${i === state.currentPage ? 'active' : ''}`;
            pageBtn.textContent = i;
            pageBtn.onclick = () => goToPage(modalName, i);
            pagesContainer.appendChild(pageBtn);
        }
    }

    function changePage(modalName, direction) {
        const state = paginationState[modalName];
        const rows = document.querySelectorAll(`.modal-user-row[data-modal="${modalName}"]`);
        const totalPages = Math.ceil(rows.length / state.itemsPerPage);

        state.currentPage += direction;
        state.currentPage = Math.max(1, Math.min(state.currentPage, totalPages));

        updatePagination(modalName);
    }

    function goToPage(modalName, pageNumber) {
        paginationState[modalName].currentPage = pageNumber;
        updatePagination(modalName);
    }
</script>

@endsection