<x-admin-layout>
    <x-slot name="header">
        <!-- Hid header content to let the definition below take precedence visually -->
    </x-slot>

    <!-- Main Outer Container -->
    <div class="p-0 font-sans bg-slate-50 min-h-screen">

        @if(session('success'))
            <div x-data="{ show: true }" x-init="setTimeout(() => show = false, 3000)" x-show="show" id="success-alert"
                class="mx-4 mb-6 bg-emerald-50 p-3 rounded-lg shadow-sm relative md:mx-0"
                role="alert">
                <div class="flex">
                    <span class="font-semibold">{{ session('success') }}</span>
                </div>
            </div>
        @endif

        <!-- SINGLE WHITE CARD CONTAINER -->
        <div class="bg-white border-none shadow-none md:rounded-none p-4 md:p-6 relative min-h-screen">

            <div class="mb-6 flex items-center justify-between">
                <h5 class="text-[14px] font-bold text-gray-700 uppercase tracking-wide">
                    Gestion des cotisations
                </h5>
            </div>

            <!-- New Professional Filter Section -->
            <div class="mb-6 p-4 bg-gray-50/50 border border-gray-200 rounded-sm">
                <form method="GET" action="{{ route('admin.contributions.index') }}">
                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-3 mb-6">
                        <!-- Management Year Filter -->
                        <div>
                            <select name="management_year_id" onchange="this.form.submit()"
                                class="block w-full px-3 py-2 border border-gray-300 rounded-sm text-[13px] font-semibold text-gray-700 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 bg-white transition-all h-[38px] cursor-pointer">
                                <option value="">Toutes les années</option>
                                @foreach($years as $year)
                                    <option value="{{ $year->id }}" {{ request('management_year_id') == $year->id ? 'selected' : '' }}>
                                        Gestion {{ $year->year }} {{ $year->status === 'actif' ? '(ACTUELLE)' : '' }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        <!-- Account Filter -->
                        <div>
                            <select name="account_id" onchange="this.form.submit()"
                                class="block w-full px-3 py-2 border border-gray-300 rounded-sm text-[13px] font-semibold text-gray-700 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 bg-white transition-all h-[38px] cursor-pointer">
                                <option value="">Tous les comptes</option>
                                @foreach($accounts as $account)
                                    <option value="{{ $account->id }}" {{ request('account_id') == $account->id ? 'selected' : '' }}>
                                        {{ $account->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        <!-- Project Filter -->
                        <div>
                            <select name="project_id" onchange="this.form.submit()"
                                class="block w-full px-3 py-2 border border-gray-300 rounded-sm text-[13px] font-semibold text-gray-700 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 bg-white transition-all h-[38px] cursor-pointer">
                                <option value="">Tous les projets</option>
                                @foreach($projects as $project)
                                    <option value="{{ $project->id }}" {{ request('project_id') == $project->id ? 'selected' : '' }}>
                                        {{ $project->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        <!-- Member Filter -->
                        <div>
                            <select name="user_id" onchange="this.form.submit()"
                                class="block w-full px-3 py-2 border border-gray-300 rounded-sm text-[13px] font-semibold text-gray-700 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 bg-white transition-all h-[38px] cursor-pointer">
                                <option value="">Tous les membres</option>
                                @foreach($members as $member)
                                    <option value="{{ $member->id }}" {{ request('user_id') == $member->id ? 'selected' : '' }}>
                                        {{ $member->first_name }} {{ $member->last_name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        <!-- Status Filter -->
                        <div>
                            <select name="status" onchange="this.form.submit()"
                                class="block w-full px-3 py-2 border border-gray-300 rounded-sm text-[13px] font-semibold text-gray-700 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 bg-white transition-all h-[38px] cursor-pointer">
                                <option value="">Tous les statuts</option>
                                <option value="paye" {{ request('status') === 'paye' ? 'selected' : '' }}>Payé</option>
                                <option value="non_paye" {{ request('status') === 'non_paye' ? 'selected' : '' }}>Non payé</option>
                                <option value="en_attente" {{ request('status') === 'en_attente' ? 'selected' : '' }}>En attente (Retards)</option>
                            </select>
                        </div>

                        <!-- Frequency Filter -->
                        <div>
                            <select name="frequency" onchange="this.form.submit()"
                                class="block w-full px-3 py-2 border border-gray-300 rounded-sm text-[13px] font-semibold text-gray-700 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 bg-white transition-all h-[38px] cursor-pointer">
                                <option value="">Toutes fréquences</option>
                                <option value="mensuelle" {{ request('frequency') === 'mensuelle' ? 'selected' : '' }}>Mensuelle</option>
                                <option value="hebdomadaire" {{ request('frequency') === 'hebdomadaire' ? 'selected' : '' }}>Hebdomadaire</option>
                                <option value="annuelle" {{ request('frequency') === 'annuelle' ? 'selected' : '' }}>Annuelle</option>
                                <option value="ponctuelle" {{ request('frequency') === 'ponctuelle' ? 'selected' : '' }}>Ponctuelle</option>
                            </select>
                        </div>

                        <!-- Date Start Filter -->
                        <div>
                            <input type="date" name="start_date" value="{{ request('start_date') }}" onchange="this.form.submit()"
                                class="block w-full px-3 py-2 border border-gray-300 rounded-sm text-[13px] font-semibold text-gray-700 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 bg-white transition-all h-[38px]">
                        </div>

                        <!-- Date End Filter -->
                        <div>
                            <input type="date" name="end_date" value="{{ request('end_date') }}" onchange="this.form.submit()"
                                class="block w-full px-3 py-2 border border-gray-300 rounded-sm text-[13px] font-semibold text-gray-700 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 bg-white transition-all h-[38px]">
                        </div>

                        <!-- Action Buttons -->
                        <div class="flex items-center gap-2">
                            <button type="submit" 
                                class="inline-flex items-center px-4 py-2 border border-emerald-600 text-white text-[13px] font-bold rounded-sm hover:opacity-90 h-[38px] transition-all group"
                                style="background-color: #10b981 !important;">
                                <svg class="w-4 h-4 mr-2 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
                                </svg>
                                Filtrer
                            </button>
                            <a href="{{ route('admin.contributions.index') }}"
                                class="inline-flex items-center px-4 py-2 border border-red-600 text-white text-[13px] font-bold rounded-sm hover:opacity-90 h-[38px] transition-all group"
                                style="background-color: #e01e22 !important; text-decoration: none !important;">
                                <svg class="w-4 h-4 mr-2 text-white" fill="none"
                                    stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M6 18L18 6M6 6l12 12" />
                                </svg>
                                Effacer
                            </a>
                        </div>
                    </div>

                    <!-- Total Row -->
                    <div class="flex flex-col sm:flex-row items-stretch sm:items-center justify-between gap-4 pt-4 border-t border-gray-200">
                        <div class="flex items-center">
                            <span class="w-full sm:w-auto bg-emerald-50 text-emerald-700 px-4 py-2 rounded-sm text-[13px] border border-emerald-200 flex items-center justify-center sm:justify-start font-bold">
                                <svg class="w-4 h-4 mr-2 text-emerald-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                                </svg>
                                Montant Total : <span class="font-bold ml-1.5">{{ \App\Models\Setting::format($totalAmount) }}</span>
                            </span>
                        </div>
                    </div>
                </form>
            </div>

            <!-- Controls Row: Tabs and Buttons (Inside Card) -->
            <div class="flex flex-col lg:flex-row lg:items-center justify-between mb-6 gap-4">
                <!-- Group: Navigation and Exports -->
                <div class="flex flex-col sm:flex-row items-stretch sm:items-center gap-3">
                    <!-- "Liste des cotisations" -->
                    <button
                        class="inline-flex items-center justify-center px-4 py-2 border border-amber-400 shadow-sm text-[13px] font-bold text-black rounded-sm hover:opacity-90 h-[38px] transition-all"
                        style="background-color: #fbbf24 !important;">
                        Liste des cotisations
                        <svg class="ml-2 w-4 h-4 text-black transform rotate-180" fill="currentColor"
                            viewBox="0 0 20 20">
                            <path fill-rule="evenodd"
                                d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z"
                                clip-rule="evenodd" />
                        </svg>
                    </button>

                    <div class="flex items-center gap-2">

                        <!-- Export PDF -->
                        <a href="{{ route('admin.contributions.export.pdf', request()->query()) }}"
                            class="flex-1 sm:flex-initial inline-flex items-center justify-center px-4 py-2 text-white text-[13px] font-bold rounded-sm shadow-sm h-[38px] hover:opacity-90 transition-all group no-underline"
                            style="background-color: #e01e22 !important; border: 1px solid #e01e22 !important; text-decoration: none !important;">
                            <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor"
                                viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
                            </svg>
                            <span>PDF</span>
                        </a>
                    </div>
                </div>

                @if(auth()->user()->canManage())
                <!-- "Nouvelle Cotisation" -->
                <a href="{{ route('admin.contributions.create') }}"
                    class="inline-flex items-center justify-center px-4 py-2 text-white text-[13px] font-bold rounded-sm shadow-sm h-[38px] leading-none lg:w-auto hover:opacity-90"
                    style="background-color: #5867dd !important;">
                    <svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20">
                        <path
                            d="M8 9a3 3 0 100-6 3 3 0 000 6zM8 11a6 6 0 016 6H2a6 6 0 016-6zM16 7a1 1 0 10-2 0v1h-1a1 1 0 100 2h1v1a1 1 0 102 0v-1h1a1 1 0 100-2h-1V7z" />
                    </svg>
                    Nouvelle Cotisation
                </a>
                @endif
            </div>


            <style>
                .custom-scrollbar::-webkit-scrollbar {
                    height: 6px;
                    width: 6px;
                }
                .custom-scrollbar::-webkit-scrollbar-track {
                    background: #f8fafc;
                }
                .custom-scrollbar::-webkit-scrollbar-thumb {
                    background: #cbd5e1;
                    border-radius: 10px;
                }
                .custom-scrollbar::-webkit-scrollbar-thumb:hover {
                    background: #94a3b8;
                }
            </style>

            <!-- Table (Inside Card) -->
            <div class="overflow-x-auto border border-gray-200 rounded-sm shadow-sm custom-scrollbar">
                <style>
                    .custom-v-lines th, .custom-v-lines td { border-right: 1px solid #d1d5db !important; }
                    .custom-v-lines th:last-child, .custom-v-lines td:last-child { border-right: none !important; }
                </style>
                <table class="min-w-full divide-y divide-gray-200 text-[13px] custom-v-lines">
                    <thead class="sticky top-0 z-10">
                        <tr class="bg-gray-50/80">


                            <th
                                class="px-4 py-3.5 text-left text-[13px] font-bold text-slate-900 uppercase tracking-widest border-b border-gray-200 whitespace-nowrap">
                                Date
                            </th>

                            <th
                                class="px-4 py-3.5 text-left text-[13px] font-bold text-slate-900 uppercase tracking-widest border-b border-gray-200 whitespace-nowrap min-w-[220px]">
                                Membre
                            </th>
                            <th
                                class="px-3 md:px-4 py-3.5 text-left text-[13px] font-bold text-slate-900 uppercase tracking-widest border-b border-gray-200">
                                Projet
                            </th>
                            <th
                                class="px-2 py-3.5 text-left text-[13px] font-bold text-slate-900 uppercase tracking-widest border-b border-gray-200 whitespace-nowrap">
                                Mt Versé
                            </th>
                             <th
                                 class="hidden lg:table-cell px-2 py-3.5 text-left text-[13px] font-bold text-slate-900 uppercase tracking-widest border-b border-gray-200 whitespace-nowrap">
                                 Mt Cotisé
                             </th>
                            <th
                                class="px-2 md:px-4 py-3.5 text-left text-[13px] font-bold text-slate-900 uppercase tracking-widest border-b border-gray-200 whitespace-nowrap">
                                Restant
                            </th>
                            <th
                                class="px-4 py-3.5 text-center text-[13px] font-bold text-slate-900 uppercase tracking-widest border-b border-gray-200 whitespace-nowrap">
                                Statut
                            </th>
                            @if(auth()->user()->canManage())
                            <th
                                class="px-4 py-3.5 text-center text-[13px] font-bold text-slate-900 uppercase tracking-widest border-b border-gray-200">
                                Actions
                            </th>
                            @endif
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-200 text-slate-700 bg-white">
                        @forelse($contributions as $contribution)
                            <tr class="hover:bg-gray-50/50 transition-colors">



                                <!-- Date -->
                                <td class="px-4 py-3.5 whitespace-nowrap">
                                    <span
                                        class="text-[13px] text-slate-800 font-bold tracking-tight">{{ $contribution->payment_date->format('d/m/Y') }}</span>
                                </td>

                                <!-- Membre -->
                                <td class="px-4 py-3.5">
                                    <span class="text-[13px] text-slate-900 font-bold uppercase tracking-tight leading-none">
                                        {{ $contribution->user->first_name }} {{ $contribution->user->last_name }}
                                    </span>
                                </td>


                                <!-- Projet -->
                                <td class="px-2 md:px-4 py-3.5">
                                    <span class="text-[13px] text-slate-900 font-bold uppercase leading-tight">
                                        {{ $contribution->project->name }}
                                    </span>
                                </td>

                                <!-- Montant Versé -->
                                <td class="px-2 py-3.5 whitespace-nowrap">
                                    @if(isset($isLatePayment) && $isLatePayment)
                                        @php 
                                            $paidForThisDebt = $contribution->contributions->sum('amount'); 
                                        @endphp
                                        <span class="text-[13px] {{ $paidForThisDebt == 0 ? 'text-rose-600' : 'text-slate-900' }} font-bold">
                                            {{ \App\Models\Setting::format($paidForThisDebt) }}
                                        </span>
                                    @else
                                        <span class="text-[13px] text-slate-900 font-bold">
                                            {{ \App\Models\Setting::format($contribution->amount) }}
                                        </span>
                                    @endif
                                </td>

                                <!-- Total Cotisé -->
                                <td class="hidden lg:table-cell px-2 py-3.5 whitespace-nowrap">
                                    <span class="text-[13px] text-slate-900 font-bold">
                                        {{ \App\Models\Setting::format($contribution->user->getTotalPaidForProject($contribution->project_id)) }}
                                    </span>
                                </td>

                                <!-- Montant Restant -->
                                <td class="px-2 md:px-4 py-3.5 whitespace-nowrap text-center">
                                    @if(isset($isLatePayment) && $isLatePayment)
                                        @php
                                            $remainingForThisDebt = $contribution->getRemainingAmount();
                                        @endphp
                                        @if($remainingForThisDebt > 0)
                                            <span class="text-[13px] text-rose-600 font-bold">
                                                {{ \App\Models\Setting::format($remainingForThisDebt) }}
                                            </span>
                                        @else
                                            <span class="inline-flex items-center px-3 py-1 rounded-full bg-yellow-400 text-yellow-950 border border-yellow-500 text-[10px] font-black uppercase tracking-widest">
                                                A jour
                                            </span>
                                        @endif
                                    @else
                                        @php
                                            $remaining = $contribution->user->getRemainingBalanceForProject($contribution->project_id);
                                        @endphp
                                        @if($remaining > 0)
                                            <span class="text-[13px] text-rose-600 font-bold">
                                                {{ \App\Models\Setting::format($remaining) }}
                                            </span>
                                        @else
                                            <span
                                                class="inline-flex items-center px-3 py-1 rounded-full bg-yellow-400 text-yellow-950 border border-yellow-500 text-[10px] font-black uppercase tracking-widest">
                                            A jour
                                            </span>
                                        @endif
                                    @endif
                                </td>


                                <!-- Statut -->
                                <td class="px-2 md:px-4 py-3.5 whitespace-nowrap text-center">
                                    @if($contribution->status === 'paye')
                                        <span
                                            class="inline-flex items-center px-3 py-1 rounded-full bg-yellow-400 text-yellow-950 border border-yellow-500 text-[10px] font-black uppercase tracking-widest">
                                            À jour
                                        </span>
                                    @elseif($contribution instanceof \App\Models\ExpectedContribution)
                                        <span
                                            class="inline-flex items-center px-3 py-1 rounded-full bg-amber-100 text-amber-800 border border-amber-600 text-[10px] font-black uppercase tracking-widest">
                                            En retard
                                        </span>
                                    @else
                                        <span
                                            class="inline-flex items-center px-3 py-1 rounded-full bg-rose-100 text-rose-800 border border-rose-600 text-[10px] font-black uppercase tracking-widest">
                                            Non payé
                                        </span>
                                    @endif
                                </td>


                                @if(auth()->user()->canManage())
                                <!-- Actions Section -->
                                <td class="px-4 py-3 whitespace-nowrap text-center">
                                    <div class="flex items-center justify-center space-x-2">
                                        @if($contribution instanceof \App\Models\ExpectedContribution)
                                            <!-- Payer -->
                                            <a href="{{ route('admin.contributions.create', ['user_id' => $contribution->user_id, 'project_id' => $contribution->project_id, 'expected_contribution_id' => $contribution->id, 'amount' => $contribution->amount]) }}"
                                                class="flex items-center justify-center px-3 h-8 rounded bg-indigo-50 text-indigo-600 border border-indigo-100 hover:bg-indigo-600 hover:text-white text-[11px] font-bold"
                                                title="Enregistrer le paiement">
                                                <svg class="w-3.5 h-3.5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
                                                </svg>
                                                Payer
                                            </a>
                                        @else

                                            <!-- Modifier -->
                                            <a href="{{ route('admin.contributions.edit', $contribution) }}"
                                                class="flex items-center justify-center w-8 h-8 rounded bg-indigo-50 text-indigo-600 border border-indigo-100 hover:bg-indigo-600 hover:text-white"
                                                title="Modifier">
                                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                        d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
                                                </svg>
                                            </a>
    
                                            <!-- Supprimer -->
                                            <form id="delete-contribution-{{ $contribution->id }}" method="POST"
                                                action="{{ route('admin.contributions.destroy', $contribution) }}"
                                                class="inline">
                                                @csrf
                                                @method('DELETE')
                                                <button type="button"
                                                    data-action="delete-contribution"
                                                    data-form-id="delete-contribution-{{ $contribution->id }}"
                                                    data-confirm-message="Confirmer la suppression de cette cotisation ?"
                                                    class="flex items-center justify-center w-8 h-8 rounded bg-red-50 text-red-600 border border-red-100 hover:bg-red-600 hover:text-white transition-colors"
                                                    title="Supprimer">
                                                    <svg class="w-4 h-4 pointer-events-none" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                            d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                                                    </svg>
                                                </button>
                                            </form>
                                        @endif
                                    </div>
                                </td>
                                @endif
                            </tr>
                        @empty
                            <tr>
                                <td colspan="{{ auth()->user()->canManage() ? 12 : 11 }}" class="px-6 py-12 text-center text-gray-400 text-sm italic">
                                    Aucune cotisation trouvée.
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            <!-- Pagination (Always Visible) -->
            <div class="px-4 md:px-6 py-4 border-t border-gray-200 flex flex-col sm:flex-row items-center justify-between bg-gray-50/10 gap-4">
                <div></div>
                
                <div class="flex items-center space-x-1 ml-auto">
                    {{-- Previous Button --}}
                    @if ($contributions->onFirstPage())
                        <span class="w-8 h-8 flex items-center justify-center text-gray-300 bg-white border border-gray-200 rounded-sm cursor-not-allowed transition-all">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7 text-gray-300" />
                            </svg>
                        </span>
                    @else
                        <a href="{{ $contributions->previousPageUrl() }}" class="w-8 h-8 flex items-center justify-center text-gray-600 bg-white border border-gray-200 rounded-sm hover:bg-gray-50 hover:text-indigo-600 transition-all">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
                            </svg>
                        </a>
                    @endif

                    {{-- Page Numbers --}}
                    @if($contributions->lastPage() > 0)
                        @foreach ($contributions->getUrlRange(1, $contributions->lastPage()) as $page => $url)
                            @if ($page == $contributions->currentPage())
                                <span class="w-8 h-8 flex items-center justify-center text-[13px] text-white border rounded-sm font-bold shadow-sm"
                                    style="background-color: #5867dd !important; border-color: #5867dd !important;">
                                    {{ $page }}
                                </span>
                            @else
                                <a href="{{ $url }}" class="w-8 h-8 flex items-center justify-center text-[12px] text-gray-600 bg-white border border-gray-200 rounded-sm hover:bg-gray-50 hover:text-indigo-600 transition-all">
                                    {{ $page }}
                                </a>
                            @endif
                        @endforeach
                    @else
                        <span class="w-8 h-8 flex items-center justify-center text-[13px] text-white border rounded-sm font-bold shadow-sm"
                            style="background-color: #5867dd !important; border-color: #5867dd !important;">1</span>
                    @endif

                    {{-- Next Button --}}
                    @if ($contributions->hasMorePages())
                        <a href="{{ $contributions->nextPageUrl() }}" class="w-8 h-8 flex items-center justify-center text-gray-600 bg-white border border-gray-200 rounded-sm hover:bg-gray-50 hover:text-indigo-600 transition-all">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                            </svg>
                        </a>
                    @else
                        <span class="w-8 h-8 flex items-center justify-center text-gray-300 bg-white border border-gray-200 rounded-sm cursor-not-allowed transition-all">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7 text-gray-300" />
                            </svg>
                        </span>
                    @endif
                </div>
            </div>

        </div> <!-- End of SINGLE WHITE CARD CONTAINER -->
    </div>
    @include('partials.form-submit-script')
</x-admin-layout>