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

            <!-- Header Section (Inside Card) -->
            <div class="mb-6 flex items-center justify-between">
                <h5 class="text-[14px] font-bold text-gray-700 uppercase tracking-wide">
                    Gestion des membres
                </h5>
            </div>

            <!-- New Professional Filter Section -->
            <div class="mb-6 p-4 bg-gray-50/50 border border-gray-200 rounded-sm">
                <div class="flex flex-col md:flex-row md:items-center gap-4">
                    <!-- Search Field -->
                    <div class="flex-1 w-full">
                        <div class="relative">
                            <span class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                <svg class="h-4 w-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                                </svg>
                            </span>
                            <input type="text" name="search" placeholder="Rechercher par nom, code ou téléphone..." 
                                class="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-sm text-[13px] font-semibold text-gray-700 placeholder-gray-400 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 bg-white transition-all h-[38px]">
                        </div>
                    </div>

                    <!-- Status Filter and Buttons Group -->
                    <div class="flex flex-wrap items-center gap-3 w-full md:w-auto">
                        <!-- Status Filter -->
                        <div class="flex-1 md:w-[180px]">
                            <select name="status" 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="active">Actif</option>
                                <option value="pending">En attente</option>
                                <option value="inactive">Inactif</option>
                            </select>
                        </div>

                        <!-- Buttons -->
                        <div class="flex items-center gap-2">
                            <button type="button" 
                                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>
                                <span class="hidden sm:inline">Filtrer</span>
                                <span class="sm:hidden">Filtrer</span>
                            </button>
                            <button type="button" 
                                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;">
                                <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="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
                                </svg>
                                <span class="hidden sm:inline">Effacer</span>
                                <span class="sm:hidden">Reset</span>
                            </button>
                        </div>
                    </div>
                </div>
            </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 membres" -->
                    <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 membres
                        <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.members.export.pdf') }}"
                            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"
                            style="background-color: #e01e22 !important; border: 1px solid #e01e22 !important; text-decoration: none;">
                            <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())
                <!-- "Ajouter un membre" -->
                <a href="{{ route('admin.members.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>
                    Ajouter un membre
                </a>
                @endif
            </div>


            <!-- Table (Inside Card) -->
            <div class="overflow-x-auto border border-gray-200 rounded-sm shadow-sm">
                <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 custom-v-lines">
                    <thead>
                        <tr class="bg-gray-50/80">


                            <!-- Headers -->
                            <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">
                                Prénom
                            </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">
                                Nom
                            </th>
                            <th class="hidden md:table-cell px-4 py-3.5 text-left text-[13px] font-bold text-slate-900 uppercase tracking-widest border-b border-gray-200">
                                Pièce d'id.
                            </th>
                            <th class="hidden lg:table-cell px-4 py-3.5 text-left text-[13px] font-bold text-slate-900 uppercase tracking-widest border-b border-gray-200 whitespace-nowrap">
                                Résidence
                            </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">
                                Contact
                            </th>
                            <th class="hidden sm:table-cell 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 bg-white">
                        @forelse($members as $member)
                            <tr class="hover:bg-gray-50/50 transition-colors">



                                <!-- Prénom -->
                                <td class="px-4 py-3.5 whitespace-nowrap">
                                    <span class="text-[13px] text-slate-900 font-bold uppercase tracking-tight">{{ $member->first_name }}</span>
                                </td>

                                <!-- Nom -->
                                <td class="px-4 py-3.5 whitespace-nowrap">
                                    <span class="text-[13px] text-slate-900 font-bold uppercase tracking-tight">{{ $member->last_name }}</span>
                                </td>

                                <!-- Pièce d'identité -->
                                <td class="hidden md:table-cell px-4 py-3.5 w-[120px]">
                                    <div class="flex flex-col space-y-0.5">
                                        @if($member->cni)
                                            <span class="text-[13px] font-bold text-slate-900">{{ $member->cni }}</span>
                                        @endif
                                        @if($member->passport_number)
                                            <span class="text-[13px] text-slate-900 font-bold italic">Pasp.: {{ $member->passport_number }}</span>
                                        @endif
                                    </div>
                                </td>

                                <!-- Résidence -->
                                <td class="hidden lg:table-cell px-4 py-3.5 whitespace-nowrap">
                                    <span class="text-[13px] text-slate-900 font-bold uppercase tracking-tight">{{ $member->residence }}</span>
                                </td>

                                <!-- Contact (with Flag) -->
                                <td class="px-4 py-3.5 min-w-[140px]">
                                    <div class="flex flex-col space-y-0.5">
                                        <div class="flex items-center space-x-1.5">
                                            <span class="text-base leading-none">
                                                @if(Str::startsWith($member->phone, '+34') || Str::startsWith($member->phone, '34'))
                                                    🇪🇸
                                                @else
                                                    🇸🇳
                                                @endif
                                            </span>
                                            <span class="text-[13px] text-slate-900 font-bold whitespace-nowrap tracking-tighter">{{ $member->phone }}</span>
                                        </div>
                                        <div class="pl-5 hidden sm:block">
                                            <span class="text-[13px] text-slate-900 font-bold break-all leading-tight italic">{{ $member->email }}</span>
                                        </div>
                                    </div>
                                </td>

                                <!-- Statut -->
                                <td class="hidden sm:table-cell px-4 py-3.5 whitespace-nowrap text-center">
                                    @if($member->status === 'active')
                                        <span class="inline-flex items-center px-3 py-1 rounded-full bg-emerald-100 text-emerald-800 border border-emerald-600 text-[10px] font-black uppercase tracking-widest">
                                            Actif
                                        </span>
                                    @elseif($member->status === 'pending')
                                        <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 attente
                                        </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">
                                            Inactif
                                        </span>
                                    @endif
                                </td>

                                @if(auth()->user()->canManage())
                                <!-- Actions Section -->
                                <td class="px-4 py-4 whitespace-nowrap text-center">
                                    <div class="flex items-center justify-center space-x-2">
                                        <!-- Modifier -->
                                        <a href="{{ route('admin.members.edit', $member) }}"
                                            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-member-{{ $member->id }}" method="POST" action="{{ route('admin.members.destroy', $member) }}" class="inline">
                                            @csrf
                                            @method('DELETE')
                                            <button type="button"
                                                data-action="delete-member"
                                                data-form-id="delete-member-{{ $member->id }}"
                                                data-confirm-message="Confirmer la suppression ?"
                                                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>
                                    </div>
                                </td>
                                @endif
                            </tr>
                        @empty
                            <tr>
                                <td colspan="{{ auth()->user()->canManage() ? 8 : 7 }}" class="px-6 py-12 text-center text-gray-400 text-sm italic">
                                    Aucun membre trouvé.
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            <!-- Pagination (Inside Card) -->
            <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 ($members->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="{{ $members->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($members->lastPage() > 0)
                        @foreach ($members->getUrlRange(1, $members->lastPage()) as $page => $url)
                            @if ($page == $members->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 ($members->hasMorePages())
                        <a href="{{ $members->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>