<x-admin-layout>
    <div class="p-0 font-sans bg-slate-50 min-h-screen">
        @if ($errors->any())
            <div id="error-alert"
                class="mx-4 mb-6 bg-white border-l-4 border-red-500 text-red-800 p-4 rounded-sm shadow-md relative md:mx-0"
                role="alert">
                <div class="ml-3">
                    <p class="font-bold text-sm">Oups ! Quelque chose s'est mal passé.</p>
                    <ul class="mt-1 list-disc list-inside text-sm">
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
                <button onclick="document.getElementById('error-alert').remove()"
                    class="absolute top-0 right-0 mt-4 mr-4 text-red-500 hover:text-red-700 focus:outline-none">
                    <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                    </svg>
                </button>
            </div>
        @endif


        <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">
                    Nouveau Projet
                </h5>
                <a href="{{ route('admin.projects.index') }}"
                    class="px-4 py-2 text-gray-600 hover:text-gray-900 transition-all text-sm font-bold flex items-center">
                    <svg class="h-4 w-4 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M10 19l-7-7m0 0l7-7m-7 7h18" />
                    </svg>
                    Retour
                </a>
            </div>

            <form method="POST" action="{{ route('admin.projects.store') }}" class="space-y-6">
                @csrf

                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div class="md:col-span-2">
                        <label for="name" class="block text-sm font-semibold text-gray-700 mb-2">Nom du projet <span
                                class="text-red-600 font-bold">*</span></label>
                        <input type="text" name="name" id="name" value="{{ old('name') }}" required
                            class="block w-full px-3 py-2 border border-gray-300 rounded-sm focus:ring-1 focus:ring-blue-600 focus:border-blue-600 transition-all h-[38px] capitalize">
                    </div>



                    <div>
                        <label for="amount" class="block text-sm font-semibold text-gray-700 mb-2">Montant <span
                                class="text-red-600 font-bold">*</span></label>
                        <input type="number" step="0.01" min="0" name="amount" id="amount" value="{{ old('amount') }}"
                            required
                            class="block w-full px-3 py-2 border border-gray-300 rounded-sm focus:ring-1 focus:ring-blue-600 focus:border-blue-600 transition-all h-[38px]">
                    </div>

                    <div>
                        <label for="contribution_type" class="block text-sm font-semibold text-gray-700 mb-2">Type de
                            cotisation <span class="text-red-600 font-bold">*</span></label>
                        <select name="contribution_type" id="contribution_type" required
                            class="block w-full px-3 py-2 border border-gray-300 rounded-sm focus:ring-1 focus:ring-blue-600 focus:border-blue-600 transition-all h-[38px] bg-white">
                            <option value="fixe" {{ old('contribution_type', 'fixe') === 'fixe' ? 'selected' : '' }}>Fixe
                            </option>
                            <option value="variable" {{ old('contribution_type') === 'variable' ? 'selected' : '' }}>
                                Variable</option>
                        </select>
                    </div>

                    <div>
                        <label for="frequency" class="block text-sm font-semibold text-gray-700 mb-2">Fréquence <span
                                class="text-red-600 font-bold">*</span></label>
                        <select name="frequency" id="frequency" required
                            class="block w-full px-3 py-2 border border-gray-300 rounded-sm focus:ring-1 focus:ring-blue-600 focus:border-blue-600 transition-all h-[38px] bg-white">
                            <option value="mensuelle" {{ old('frequency', 'mensuelle') === 'mensuelle' ? 'selected' : '' }}>Mensuelle</option>
                            <option value="hebdomadaire" {{ old('frequency') === 'hebdomadaire' ? 'selected' : '' }}>
                                Hebdomadaire</option>
                            <option value="annuelle" {{ old('frequency') === 'annuelle' ? 'selected' : '' }}>Annuelle
                            </option>
                            <option value="personnalisee" {{ old('frequency') === 'personnalisee' ? 'selected' : '' }}>
                                Personnalisée</option>
                        </select>
                    </div>

                    <div>
                        <label for="custom_frequency_days" class="block text-sm font-semibold text-gray-700 mb-2">Tous
                            les X jours</label>
                        <input type="number" min="1" name="custom_frequency_days" id="custom_frequency_days"
                            value="{{ old('custom_frequency_days') }}"
                            class="block w-full px-3 py-2 border border-gray-300 rounded-sm focus:ring-1 focus:ring-blue-600 focus:border-blue-600 transition-all h-[38px]">
                    </div>

                    <div>
                        <label for="start_date" class="block text-sm font-semibold text-gray-700 mb-2">Date de début
                            <span class="text-red-600 font-bold">*</span></label>
                        <input type="date" name="start_date" id="start_date" value="{{ old('start_date') }}" required
                            class="block w-full px-3 py-2 border border-gray-300 rounded-sm focus:ring-1 focus:ring-blue-600 focus:border-blue-600 transition-all h-[38px]">
                    </div>

                    <div>
                        <label for="end_date" class="block text-sm font-semibold text-gray-700 mb-2">Date de fin
                            (Optionnel)</label>
                        <input type="date" name="end_date" id="end_date" value="{{ old('end_date') }}"
                            class="block w-full px-3 py-2 border border-gray-300 rounded-sm focus:ring-1 focus:ring-blue-600 focus:border-blue-600 transition-all h-[38px]">
                    </div>

                    <div>
                        <label for="status" class="block text-sm font-semibold text-gray-700 mb-2">Statut <span
                                class="text-red-600 font-bold">*</span></label>
                        <select name="status" id="status" required
                            class="block w-full px-3 py-2 border border-gray-300 rounded-sm focus:ring-1 focus:ring-blue-600 focus:border-blue-600 transition-all h-[38px] bg-white">
                            <option value="actif" {{ old('status') === 'actif' ? 'selected' : '' }}>Actif</option>
                            <option value="termine" {{ old('status') === 'termine' ? 'selected' : '' }}>Terminé</option>
                        </select>
                    </div>

                    <div>
                        <label for="is_public" class="block text-sm font-semibold text-gray-700 mb-2">Projet public
                            <span class="text-red-600 font-bold">*</span></label>
                        <select name="is_public" id="is_public" required
                            class="block w-full px-3 py-2 border border-gray-300 rounded-sm focus:ring-1 focus:ring-blue-600 focus:border-blue-600 transition-all h-[38px] bg-white">
                            <option value="0" {{ old('is_public') == '0' ? 'selected' : '' }}>Non</option>
                            <option value="1" {{ old('is_public') == '1' ? 'selected' : '' }}>Oui</option>
                        </select>
                    </div>

                    <div class="md:col-span-2" x-data="{
                        modalOpen: false,
                        search: '',
                        selected: {{ json_encode(array_map('intval', old('members', []))) }},
                        options: {{ json_encode($members->map(function ($member) {
    return ['id' => $member->id, 'name' => ($member->first_name ?? '') . ' ' . ($member->last_name ?? '') . ' (' . ($member->name ?? $member->email ?? '') . ')'];
})->values()) }},
                        get filteredOptions() {
                            if (this.search === '') return this.options;
                            return this.options.filter(option => option.name.toLowerCase().includes(this.search.toLowerCase()));
                        },
                        toggle(id) {
                            if (this.selected.includes(id)) {
                                this.selected = this.selected.filter(item => item !== id);
                            } else {
                                this.selected.push(id);
                            }
                        },
                        isSelected(id) {
                            return this.selected.includes(id);
                        },
                        getSelectedLabel(id) {
                            return this.options.find(o => o.id === id)?.name || '';
                        }
                    }">
                        <label class="block text-sm font-semibold text-gray-700 mb-2">Membres <span
                                class="text-red-600 font-bold">*</span></label>

                        <!-- Hidden Inputs for Form Submission -->
                        <div class="hidden">
                            <template x-for="id in selected" :key="id">
                                <input type="hidden" name="members[]" :value="id">
                            </template>
                        </div>

                        <!-- Main View: Summary & Trigger -->
                        <!-- Main View: Trigger & Summary -->
                        <div class="mb-3">
                            <button type="button" @click="modalOpen = true"
                                style="background-color: #5867dd !important; color: white !important;"
                                class="w-full inline-flex items-center justify-center px-4 py-2 bg-[#5867dd] border border-transparent rounded-sm font-semibold text-sm text-white uppercase tracking-widest shadow-sm hover:bg-[#4854c6] focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 disabled:opacity-25 transition ease-in-out duration-150">
                                <svg class="h-4 w-4 mr-2 text-white" fill="none" viewBox="0 0 24 24"
                                    stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" />
                                </svg>
                                Sélectionner des membres
                            </button>
                        </div>

                        <div class="border border-gray-300 rounded-sm p-4 bg-gray-50/50">
                            <div class="mb-3 flex justify-between items-center">
                                <span class="text-sm text-gray-700 font-bold uppercase tracking-tight">
                                    Membres participants (<span x-text="selected.length"></span>)
                                </span>
                                <button type="button" @click="selected = []" x-show="selected.length > 0"
                                    class="text-xs text-red-600 hover:text-red-800 font-semibold focus:outline-none">
                                    Tout retirer
                                </button>
                            </div>

                            <!-- Selected Tags (All visible with scroll if needed) -->
                            <div class="flex flex-wrap gap-2 max-h-[300px] overflow-y-auto pr-2 custom-scrollbar">
                                <template x-for="id in selected" :key="id">
                                    <div
                                        class="inline-flex items-center px-3 py-1.5 rounded bg-[#5867dd] text-white border border-transparent shadow-sm text-[12px] font-semibold transition-all">
                                        <svg class="w-3 h-3 mr-2 text-white/80" fill="currentColor"
                                            viewBox="0 0 20 20">
                                            <path fill-rule="evenodd"
                                                d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z"
                                                clip-rule="evenodd" />
                                        </svg>
                                        <span x-text="getSelectedLabel(id)"></span>
                                        <button type="button" @click="toggle(id)"
                                            class="flex-shrink-0 ml-2 h-4 w-4 rounded-full inline-flex items-center justify-center text-white/70 hover:bg-white/20 hover:text-white focus:outline-none transition-colors">
                                            <svg class="h-3 w-3" stroke="currentColor" fill="none" viewBox="0 0 8 8">
                                                <path stroke-linecap="round" stroke-width="1.5" d="M1 1l6 6m0-6L1 7" />
                                            </svg>
                                        </button>
                                    </div>
                                </template>
                                <div x-show="selected.length === 0"
                                    class="w-full py-4 text-center text-gray-400 italic text-sm border-2 border-dashed border-gray-200 rounded-lg bg-white/50">
                                    Aucun membre sélectionné pour ce projet.
                                </div>
                            </div>
                        </div>

                        <!-- Modal -->
                        <div x-show="modalOpen" style="display: none;" class="fixed inset-0 z-50 overflow-y-auto"
                            aria-labelledby="modal-title" role="dialog" aria-modal="true">
                            <div
                                class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:p-0">

                                <div x-show="modalOpen" x-transition:enter="ease-out duration-300"
                                    x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100"
                                    x-transition:leave="ease-in duration-200" x-transition:leave-start="opacity-100"
                                    x-transition:leave-end="opacity-0" class="fixed inset-0 transition-opacity"
                                    style="background-color: rgba(0, 0, 0, 0.5);" @click="modalOpen = false"
                                    aria-hidden="true"></div>

                                <div x-show="modalOpen" x-transition:enter="ease-out duration-300"
                                    x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
                                    x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
                                    x-transition:leave="ease-in duration-200"
                                    x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
                                    x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
                                    class="relative inline-block bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:max-w-lg sm:w-full">

                                    <!-- Modal Header -->
                                    <div class="px-4 pt-5 pb-4 sm:p-6 sm:pb-4 border-b border-white/10" style="background-color: #5867dd;">
                                        <div class="sm:flex sm:items-start justify-between">
                                            <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
                                                <h3 class="text-lg leading-6 font-bold text-white"
                                                    id="modal-title">
                                                    Sélectionner les membres
                                                </h3>
                                            </div>
                                            <button @click="modalOpen = false" type="button"
                                                class="rounded-md text-white/70 hover:text-white focus:outline-none">
                                                <span class="sr-only">Fermer</span>
                                                <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24"
                                                    stroke="currentColor">
                                                    <path stroke-linecap="round" stroke-linejoin="round"
                                                        stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                                                </svg>
                                            </button>
                                        </div>
                                    </div>

                                    <!-- Modal Body -->
                                    <div class="px-4 py-4 sm:px-6 bg-gray-50">
                                        <!-- Search -->
                                        <div class="mb-4">
                                            <input type="text" x-model="search"
                                                placeholder="Rechercher par nom, prénom ou matricule..."
                                                class="block w-full px-3 py-2 border border-gray-300 rounded-sm focus:ring-1 focus:ring-blue-600 focus:border-blue-600">
                                        </div>

                                        <!-- List -->
                                        <div
                                            class="bg-white border border-gray-200 rounded-sm max-h-[50vh] overflow-y-auto">
                                            <template x-for="option in filteredOptions" :key="option.id">
                                                <div @click="toggle(option.id)"
                                                    class="px-4 py-3 cursor-pointer hover:bg-gray-50 flex items-center justify-between border-b border-gray-100 last:border-0"
                                                    :class="{'bg-blue-50': isSelected(option.id)}">
                                                    <div class="flex items-center">
                                                        <input type="checkbox" :checked="isSelected(option.id)"
                                                            class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 rounded pointer-events-none">
                                                        <div class="ml-3 text-sm text-gray-700 font-medium">
                                                            <span x-text="option.name"></span>
                                                        </div>
                                                    </div>
                                                    <button type="button"
                                                        class="ml-2 px-3 py-1 text-xs font-bold uppercase tracking-wider rounded-sm focus:outline-none transition-colors shadow-sm"
                                                        :class="isSelected(option.id) ? 'bg-red-50 text-red-600 hover:bg-red-100 border border-red-100' : 'text-white hover:opacity-90 border border-transparent'"
                                                        :style="!isSelected(option.id) ? 'background-color: #5867dd !important;' : ''">
                                                        <span
                                                            x-text="isSelected(option.id) ? 'Retirer' : 'Sélectionner'"></span>
                                                    </button>
                                                </div>
                                            </template>
                                            <div x-show="filteredOptions.length === 0"
                                                class="px-4 py-8 text-center text-gray-500">
                                                Aucun résultat trouvé pour cette recherche.
                                            </div>
                                        </div>
                                    </div>


                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="flex flex-col sm:flex-row items-stretch sm:items-center justify-end gap-3 pt-2">
                    <a href="{{ route('admin.projects.index') }}"
                        class="px-5 py-2 bg-white border border-gray-200 text-gray-700 rounded-sm hover:bg-gray-50 transition-all text-sm font-semibold shadow-sm hover:shadow-md text-center h-[38px] inline-flex items-center">
                        Annuler
                    </a>
                    <button type="submit"
                        class="px-5 py-2 text-white rounded-sm hover:opacity-90 transition-all duration-200 text-sm font-semibold shadow-sm hover:shadow-md h-[38px]"
                        style="background-color: #5867dd !important;">
                        Valider
                    </button>
                </div>
            </form>
        </div>
    </div>


</x-admin-layout>