@extends('layouts.dashboard')

@section('content')
<div
    x-data="{
        settings: @js($settings),
        phones: @js($settings['phones'] ?? []),
        footer_text: @js($settings['footer_text'] ?? ''),
        address: @js($settings['address'] ?? ''),
        email: @js($settings['email'] ?? ''),
        copyright_text: @js($settings['copyright_text'] ?? ''),
        meta_keywords: @js($settings['meta_keywords'] ?? []),
        newTag: '',
        errors: {},
        success: '',
        saving: false,
        socials: @js($socials),
        icons: @js($icons),
        timeline: (@js($settings['timeline'] ?? [])).map(t => ({ year: t.year, title: t.title, existing_image: t.image, image_file: null, preview: t.image ? '{{ asset('storage') }}/' + t.image : null, remove_image:false })),
        timelineModal: { open: false, mode: 'create', index: null, year: '', title: '', image_file: null, preview: null, errors: {} },
        description: {
            title: @js($settings['description']['title'] ?? ''),
            paragraph: @js($settings['description']['paragraph'] ?? ''),
        },
        addTag() {
            const tag = this.newTag.trim();
            if (tag && !this.meta_keywords.includes(tag)) {
                this.meta_keywords.push(tag);
            }
            this.newTag = '';
        },
        removeTag(index) {
            this.meta_keywords.splice(index, 1);
        },
        handleTagKeydown(e) {
            // Add tag on Enter or comma
            if (e.key === 'Enter' || e.key === ',') {
                e.preventDefault();
                this.addTag();
            }
            // Allow backspace to remove last tag when input is empty
            if (e.key === 'Backspace' && !this.newTag && this.meta_keywords.length > 0) {
                this.removeTag(this.meta_keywords.length - 1);
            }
        },
        socialModal: { open: false, mode: 'create', icon: '', url: '', id: null, errors: {}, deleting: false },
        deleteModal: { open: false, id: null, loading: false },
        moveSocial(index, offset) {
            const newIndex = index + offset;
            if (index < 0 || index >= this.socials.length) return;
            if (newIndex < 0 || newIndex >= this.socials.length) return;
            const moved = this.socials.splice(index, 1)[0];
            this.socials.splice(newIndex, 0, moved);
            this.$nextTick(() => {
                const ids = this.socials.map(s => s.id);
                this.reorderSocials(ids);
            });
        },
        reorderSocials(ids) {
            fetch('{{ route('dashboard.settings.socials.reorder') }}', {
                method: 'POST',
                headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}', 'Content-Type': 'application/json' },
                body: JSON.stringify({ ids })
            });
        },
        openSocialModal(mode, social = null) {
            this.socialModal = {
                open: true,
                mode,
                icon: social?.icon || '',
                url: social?.url || '',
                id: social?.id || null,
                errors: {},
                deleting: false
            };
        },
        confirmDelete(id) {
            this.deleteModal = { open: true, id: id, loading: false };
        },
        async deleteSocial() {
            if (this.deleteModal.loading || !this.deleteModal.id) return;
            this.deleteModal.loading = true;
            const url = '{{ route('dashboard.settings.socials.delete', ':id') }}'.replace(':id', this.deleteModal.id);
            try {
                const r = await fetch(url, {
                    method: 'DELETE',
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}',
                        'Accept': 'application/json'
                    }
                });
                if (r.ok) {
                    this.socials = this.socials.filter(s => s.id !== this.deleteModal.id);
                    this.deleteModal.open = false;
                }
            } catch (e) {
                console.error(e);
            } finally {
                this.deleteModal.loading = false;
            }
        },
        saveSocial() {
            this.socialModal.errors = {};
            this.success = '';
            // Frontend required validation
            if (!this.socialModal.icon) {
                this.socialModal.errors._all = (this.socialModal.errors._all || []).concat(['Icône requise.']);
            }
            if (!this.socialModal.url) {
                this.socialModal.errors._all = (this.socialModal.errors._all || []).concat(['URL requise.']);
            }
            if (this.socialModal.errors._all && this.socialModal.errors._all.length) return;
            let url = this.socialModal.mode === 'edit'
                ? '{{ route('dashboard.settings.socials.update', ':id') }}'.replace(':id', this.socialModal.id)
                : '{{ route('dashboard.settings.socials.store') }}';
            let method = this.socialModal.mode === 'edit' ? 'PUT' : 'POST';
            fetch(url, {
                method: 'POST',
                headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}', 'Accept': 'application/json' },
                body: new URLSearchParams({
                    icon: this.socialModal.icon,
                    url: this.socialModal.url,
                    ...(method === 'PUT' ? {_method:'PUT'} : {})
                })
            }).then(async r => {
                this.success = '';
                if (r.status === 422) {
                    let data = await r.json();
                    this.socialModal.errors = {};
                    if (data.message) {
                        this.socialModal.errors._all = [data.message];
                    } else {
                        Object.values(data.errors || {}).forEach(arr => {
                            if (Array.isArray(arr)) {
                                this.socialModal.errors._all = (this.socialModal.errors._all || []).concat(arr);
                            }
                        });
                    }
                } else if (r.ok) {
                    let data = await r.json();
                    if (this.socialModal.mode === 'edit') {
                        let idx = this.socials.findIndex(s => s.id === data.id);
                        if (idx !== -1) this.socials[idx] = data;
                    } else {
                        this.socials.push(data);
                    }
                    this.socialModal.open = false;
                    this.success = 'Sauvegarde réussie.';
                }
            });
        },
        addTimeline() {
            this.timeline.push({year:'', title:'', existing_image:null, image_file:null, preview:null, remove_image:false});
        },
        moveTimeline(i, off) {
            const ni = i + off;
            if (ni < 0 || ni >= this.timeline.length) return;
            const m = this.timeline.splice(i,1)[0];
            this.timeline.splice(ni,0,m);
        },
        removeTimeline(i){
            this.timeline.splice(i,1);
        },
        handleTimelineImageChange(e,i){
            const f = e.target.files[0];
            if(!f) return;
            this.timeline[i].image_file = f;
            this.timeline[i].preview = URL.createObjectURL(f);
            this.timeline[i].remove_image = false;
        },
        clearTimelineImage(i){
            if(this.timeline[i].image_file){
                this.timeline[i].image_file = null;
            }
            if(this.timeline[i].existing_image){
                this.timeline[i].remove_image = true;
            }
            this.timeline[i].preview = null;
        },
        saveSettings() {
            this.errors = {};
            this.success = '';
            this.saving = true;
            const fd = new FormData();
            fd.append('footer_text', this.footer_text || '');
            fd.append('address', this.address || '');
            fd.append('email', this.email || '');
            fd.append('copyright_text', this.copyright_text || '');

            this.phones.filter(p=>p.label && p.number).forEach((p,i)=>{
                fd.append(`phones[${i}][label]`, p.label);
                fd.append(`phones[${i}][number]`, p.number);
            });

            this.meta_keywords.forEach((t,i)=>{
                fd.append(`meta_keywords[${i}]`, t);
            });

            this.timeline.forEach((item,i)=>{
                fd.append(`timeline[${i}][year]`, item.year);
                fd.append(`timeline[${i}][title]`, item.title);
                if(item.image_file){
                    fd.append(`timeline[${i}][image]`, item.image_file);
                } else if(item.existing_image){
                    fd.append(`timeline[${i}][existing_image]`, item.existing_image);
                }
                if(item.remove_image){
                    fd.append(`timeline[${i}][remove_image]`, 1);
                }
            });

            // Add description fields
            fd.append('description[title]', this.description.title || '');
            fd.append('description[paragraph]', this.description.paragraph || '');

            fetch('{{ route('dashboard.settings.update') }}', {
                method:'POST',
                headers:{ 'X-CSRF-TOKEN':'{{ csrf_token() }}' },
                body: fd
            }).then(async r=>{
                this.saving = false;
                if(r.status===422){
                    const d = await r.json();
                    this.errors = {_all:[d.message||'Erreur de validation']};
                } else if(r.ok){
                    this.success = 'Sauvegarde réussie.';
                    // rafraîchir existing_image avec nouveaux chemins (rechargement léger)
                }
            }).catch(()=>{
                this.saving=false;
            });
        },
        openTimelineModal(mode, index = null) {
            if (mode === 'create') {
                this.timelineModal = { open: true, mode, index: null, year: '', title: '', image_file: null, preview: null, errors: {} };
            } else if (mode === 'edit') {
                const item = this.timeline[index];
                this.timelineModal = {
                    open: true,
                    mode,
                    index,
                    year: item.year,
                    title: item.title,
                    image_file: item.image_file,
                    preview: item.preview,
                    errors: {}
                };
            }
        },
        handleTimelineModalImageChange(e){
            const f = e.target.files[0];
            if(!f) return;
            this.timelineModal.image_file = f;
            this.timelineModal.preview = URL.createObjectURL(f);
        },
        clearTimelineModalImage(){
            this.timelineModal.image_file = null;
            this.timelineModal.preview = null;
        },
        saveTimelineModal(){
            this.timelineModal.errors = {};
            if(!this.timelineModal.year) this.timelineModal.errors.year = ['Année requise'];
            if(!this.timelineModal.title) this.timelineModal.errors.title = ['Titre requis'];
            if(Object.keys(this.timelineModal.errors).length) return;
            if(this.timelineModal.mode === 'create'){
                this.timeline.push({
                    year: this.timelineModal.year,
                    title: this.timelineModal.title,
                    image_file: this.timelineModal.image_file,
                    preview: this.timelineModal.preview,
                    existing_image: null,
                    remove_image: false
                });
            } else if(this.timelineModal.mode === 'edit' && this.timelineModal.index !== null){
                const item = this.timeline[this.timelineModal.index];
                item.year = this.timelineModal.year;
                item.title = this.timelineModal.title;
                item.image_file = this.timelineModal.image_file;
                item.preview = this.timelineModal.preview;
            }
            this.timelineModal.open = false;
        },
    }"
    @description-updated="description.paragraph = $event.detail"
    x-init="
        if (phones.length === 0) {
            phones.push({label: '', number: ''});
            phones.push({label: '', number: ''});
        } else if (phones.length === 1) {
            phones.push({label: '', number: ''});
        }
    "
>
    <div x-show="success" class="mb-4 px-4 py-2 rounded bg-green-100 text-green-800 text-sm" x-text="success" x-cloak></div>
    <template x-if="errors._all">
        <div class="mb-4 px-4 py-2 rounded bg-red-100 text-red-800 text-sm">
            <template x-for="err in errors._all" :key="err">
                <div x-text="err"></div>
            </template>
        </div>
    </template>
    
    <div class="flex items-center justify-between mb-6">
        <h1 class="text-2xl">
            <i class="bi bi-gear mr-2"></i>
            Paramètres
        </h1>
        
        <button type="button"
            class="px-4 py-2 cursor-pointer rounded-md bg-gray-900 text-white hover:bg-black transition-colors flex items-center gap-2"
            x-bind:disabled="saving"
            x-on:click="saveSettings">
            <i class="bi bi-check-circle"></i>
            <span>Sauvegarder</span>
            <span x-show="saving" class="inline-block">
                <svg class="animate-spin h-4 w-4 text-white" viewBox="0 0 24 24" fill="none">
                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/>
                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"/>
                </svg>
            </span>
        </button>
    </div>
    
    <div class="grid md:grid-cols-2 grid-cols-1 gap-8">
        <div>
            <div class="bg-white rounded-lg p-6 border border-gray-200">
                <h2 class="font-semibold mb-4">Numéros de téléphone</h2>
                <div class="space-y-4">
                    <template x-for="(phone, i) in phones" :key="i">
                        <div class="grid grid-cols-2 gap-3">
                            <div>
                                <label class="block mb-2">Nom</label>
                                <input type="text" x-model="phones[i].label"
                                    placeholder="......"
                                    class="px-3 py-2 w-full rounded-md border border-gray-300 focus:border-gray-900 outline-0">
                                <template x-if="errors['phones.'+i+'.label']">
                                    <div class="text-xs text-red-600 mt-1" x-text="errors['phones.'+i+'.label'][0]"></div>
                                </template>
                            </div>
                            <div>
                                <label class="block mb-2">Numéro</label>
                                <input type="text" x-model="phones[i].number"
                                    placeholder="......"
                                    class="px-3 py-2 w-full rounded-md border border-gray-300 focus:border-gray-900 outline-0">
                                <template x-if="errors['phones.'+i+'.number']">
                                    <div class="text-xs text-red-600 mt-1" x-text="errors['phones.'+i+'.number'][0]"></div>
                                </template>
                            </div>
                        </div>
                    </template>
                </div>
            </div>
            
            <div class="bg-white rounded-lg p-6 border border-gray-200 mt-8">
                <div class="flex items-center justify-between mb-4">
                    <h2 class="font-semibold">Réseaux sociaux</h2>
                    <button type="button"
                        class="px-3 py-1 text-sm cursor-pointer rounded-md bg-gray-900 text-white hover:bg-black transition-colors"
                        x-on:click="openSocialModal('create')">
                        <i class="bi bi-plus-circle mr-2"></i>
                        Ajouter un réseau
                    </button>
                </div>
                <template x-if="socials.length === 0">
                    <div class="text-center py-8 text-gray-500">
                        <div class="text-4xl mb-4">🔗</div>
                        <p>Aucun réseau social pour le moment.</p>
                        <p class="text-sm mt-1">Cliquez sur "Ajouter un réseau" pour commencer.</p>
                    </div>
                </template>
                <ul class="space-y-3" x-show="socials.length > 0" x-cloak>
                    <template x-for="(social, idx) in socials" :key="social.id">
                        <li class="border border-gray-200 rounded-md ps-4 pe-8 py-2 flex items-center justify-between">
                            <div class="flex items-center gap-5 min-w-0">
                                    <div class="flex gap-1">
                                        <button
                                            type="button"
                                            class="text-gray-500 hover:text-gray-700 p-2 cursor-pointer text-lg rounded disabled:opacity-40"
                                            :disabled="idx === 0"
                                            x-on:click="moveSocial(idx, -1)"
                                            aria-label="Monter"
                                            title="Monter">
                                            <i class="bi bi-chevron-up"></i>
                                        </button>
                                        <button
                                            type="button"
                                            class="text-gray-500 hover:text-gray-700 p-1 cursor-pointer text-lg rounded disabled:opacity-40"
                                            :disabled="idx === socials.length - 1"
                                            x-on:click="moveSocial(idx, 1)"
                                            aria-label="Descendre"
                                            title="Descendre">
                                            <i class="bi bi-chevron-down"></i>
                                        </button>
                                    </div>
                                <div class="flex items-center gap-4">
                                    <span class="w-10 h-10 rounded-full bg-gray-100 inline-flex items-center justify-center">
                                        <i :class="'bi bi-' + social.icon" class="text-2xl"></i>
                                    </span>
                                    <span class="font-semibold" x-text="social.icon"></span>
                                    <a :href="social.url" target="_blank" class="text-brand hover:underline ms-2">Lien</a>
                                </div>
                            </div>
                            <div class="flex items-center gap-2">
                                <button type="button"
                                    class="px-2 py-1 cursor-pointer rounded border hover:bg-black hover:text-white transition-ease duration-300 text-sm"
                                    x-on:click="openSocialModal('edit', social)">
                                    <i class="bi bi-pen"></i>
                                </button>
                                <button type="button"
                                    class="px-2 py-1 cursor-pointer rounded border border-red-300 text-red-600 hover:bg-red-600 hover:text-white transition-ease duration-300 text-sm"
                                    x-on:click="confirmDelete(social.id)">
                                    <i class="bi bi-trash"></i>
                                </button>
                            </div>
                        </li>
                    </template>
                </ul>
            </div>
        </div>

        <div class="bg-white rounded-lg p-6 border border-gray-200">
            <h2 class="font-semibold mb-4">Paramètres du footer</h2>
            <div class="space-y-4">
                <div>
                    <label class="block mb-2">Description du footer</label>
                    <textarea x-model="footer_text" rows="4"
                        placeholder="......"
                        class="px-3 py-2 w-full rounded-md border border-gray-300 focus:border-gray-900 outline-0 resize-none"></textarea>
                    <template x-if="errors.footer_text">
                        <div class="text-xs text-red-600 mt-1" x-text="errors.footer_text[0]"></div>
                    </template>
                </div>
                <div>
                    <label class="block mb-2">Mots clés Meta</label>
                    <div class="relative">
                        <div class="border border-gray-300 rounded-md p-2 bg-white min-h-[42px] flex flex-wrap gap-2 focus-within:border-gray-900">
                            <template x-for="(tag, index) in meta_keywords" :key="index">
                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-sm font-medium bg-gray-100 text-gray-800 border border-gray-300">
                                    <span x-text="tag"></span>
                                    <button type="button" @click="removeTag(index)" class="ml-1 inline-flex items-center justify-center w-4 h-4 text-gray-500 hover:text-gray-700 focus:outline-none">
                                        <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                                            <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
                                        </svg>
                                    </button>
                                </span>
                            </template>
                            <input
                                x-model="newTag"
                                @keydown="handleTagKeydown"
                                @blur="addTag"
                                class="border-none outline-none focus:ring-0 py-1 px-0 bg-transparent flex-grow min-w-[100px]"
                                placeholder="Ajouter des mots clés..."
                                type="text"
                            >
                        </div>
                        <template x-if="errors.meta_keywords">
                            <div class="text-xs text-red-600 mt-1" x-text="errors.meta_keywords[0]"></div>
                        </template>
                        <div class="text-xs text-gray-500 mt-1">
                            Appuyez sur Entrée ou virgule pour ajouter un mot clé. Ces mots clés seront utilisés dans les meta tags de votre site.
                        </div>
                    </div>
                </div>
                <div>
                    <label class="block mb-2">Adresse</label>
                    <input type="text" x-model="address"
                        placeholder="......"
                        class="px-3 py-2 w-full rounded-md border border-gray-300 focus:border-gray-900 outline-0">
                    <template x-if="errors.address">
                        <div class="text-xs text-red-600 mt-1" x-text="errors.address[0]"></div>
                    </template>
                </div>
                <div>
                    <label class="block mb-2">Email</label>
                    <input type="email" x-model="email"
                        placeholder="......"
                        class="px-3 py-2 w-full rounded-md border border-gray-300 focus:border-gray-900 outline-0">
                    <template x-if="errors.email">
                        <div class="text-xs text-red-600 mt-1" x-text="errors.email[0]"></div>
                    </template>
                </div>
                <div>
                    <label class="block mb-2">Texte copyright <span class="text-gray-500">(Utilisez <code class="text-purple-500">{year}</code> pour écrire l'année actuelle)</span></label>
                    <input type="text" x-model="copyright_text"
                        placeholder="......"
                        class="px-3 py-2 w-full rounded-md border border-gray-300 focus:border-gray-900 outline-0">
                    <template x-if="errors.copyright_text">
                        <div class="text-xs text-red-600 mt-1" x-text="errors.copyright_text[0]"></div>
                    </template>
                </div>
            </div>
        </div>
    </div>

    <!-- Card: Section Qui sommes-nous ? -->
    <div class="bg-white rounded-lg p-6 border border-gray-200 mt-6">
        <h3 class="text-lg font-semibold mb-4">Section "Qui sommes-nous ?"</h3>
        <div class="space-y-4">
            <div>
                <label class="block text-sm font-medium mb-2">Titre de la section</label>
                <input type="text" x-model="description.title" placeholder="......"
                    class="w-full px-3 py-2 border border-gray-300 rounded-md focus:border-gray-900 outline-0">
            </div>
            <div
                x-data="{
                    html: '',
                    exec(cmd, val = null) {
                        document.execCommand(cmd, false, val);
                        this.update();
                    },
                    update() {
                        this.html = $refs.editor.innerHTML;
                        $dispatch('description-updated', this.html);
                    },
                    setContent(value) {
                        this.html = value || '';
                        if ($refs.editor) $refs.editor.innerHTML = this.html;
                    }
                }"
                x-init="setContent($el.dataset.initial || '')"
                :data-initial="description.paragraph"
                class="w-full"
            >
                <label class="block text-sm font-medium mb-2">Paragraphe</label>
                <div class="flex items-center gap-2 mb-2 border-gray-300 border rounded-md p-2">
                    <button type="button" @click="exec('bold')" class="h-7 w-7 flex justify-center items-center cursor-pointer rounded hover:bg-gray-200">
                        <i class="bi bi-type-bold"></i>
                    </button>
                    <button type="button" @click="exec('italic')" class="h-7 w-7 flex justify-center items-center cursor-pointer rounded hover:bg-gray-200">
                        <i class="bi bi-type-italic"></i>
                    </button>
                    <button type="button" @click="exec('underline')" class="h-7 w-7 flex justify-center items-center cursor-pointer rounded hover:bg-gray-200">
                        <i class="bi bi-type-underline"></i>
                    </button>
                    <button type="button" @click="let url=prompt('Lien :'); if(url){exec('createLink', url)}" class="h-7 w-7 flex justify-center items-center cursor-pointer rounded hover:bg-gray-200">
                        <i class="bi bi-link-45deg"></i>
                    </button>
                    <button type="button" @click="exec('removeFormat')" class="h-7 w-7 flex justify-center items-center cursor-pointer rounded hover:bg-gray-200">
                        <i class="bi bi-x-lg"></i>
                    </button>
                </div>
                <div x-ref="editor"
                    contenteditable="true"
                    @input="update()"
                    class="w-full px-3 py-2 border border-gray-300 rounded-md focus:border-gray-900 outline-0 min-h-[120px]">
                </div>
                <textarea x-model="html" class="hidden"></textarea>
            </div>
        </div>
    </div>

    <!-- Carte Parcours temporel (réintégrée) -->
    <div class="bg-white rounded-lg p-6 border border-gray-200 mt-6">
        <div class="flex items-center justify-between mb-3">
            <h2 class="font-semibold text-base">Parcours temporel</h2>
            <button type="button"
                class="px-3 py-1 text-sm cursor-pointer rounded-md bg-gray-900 text-white hover:bg-black transition-colors"
                @click="openTimelineModal('create')">
                <i class="bi bi-plus-circle mr-1"></i>
                Ajouter
            </button>
        </div>

        <template x-if="timeline.length === 0">
            <div class="text-sm text-gray-500 py-4 text-center border border-dashed rounded-md">
                Aucun élément. Cliquez sur Ajouter.
            </div>
        </template>

        <ul class="space-y-2" x-show="timeline.length" x-cloak>
            <template x-for="(item,i) in timeline" :key="i">
                <li class="border rounded-lg bg-gray-50 border-black/15">
                    <div @click="openTimelineModal('edit', i)"
                        class="flex items-center justify-between cursor-pointer px-3 py-2 hover:bg-gray-100 transition">
                        <div class="flex items-center gap-3 min-w-0">
                            <strong class="text-sm tracking-wide" x-text="item.year || 'Année ?'"></strong>
                            <span class="text-sm text-gray-700 truncate max-w-[200px]" x-text="item.title || 'Titre...'"></span>
                        </div>
                        <div class="flex items-center gap-1 text-sm">
                            <button type="button" class="p-1 text-gray-600 hover:text-black disabled:opacity-30"
                                :disabled="i===0" @click.stop="moveTimeline(i,-1)" title="Monter">
                                <i class="bi bi-chevron-up"></i>
                            </button>
                            <button type="button" class="p-1 text-gray-600 hover:text-black disabled:opacity-30"
                                :disabled="i===timeline.length-1" @click.stop="moveTimeline(i,1)" title="Descendre">
                                <i class="bi bi-chevron-down"></i>
                            </button>
                            <button type="button" class="p-1 text-red-600 hover:text-red-700"
                                @click.stop="removeTimeline(i)" title="Supprimer">
                                <i class="bi bi-trash"></i>
                            </button>
                        </div>
                    </div>
                </li>
            </template>
        </ul>
    </div>

    <div x-show="socialModal.open" class="fixed inset-0 z-50 flex items-center justify-center px-4"
        x-trap.noscroll="socialModal.open"
        @keydown.escape.window="socialModal.open = false"
        x-cloak>
        <div class="absolute inset-0 bg-black/40" 
            x-on:click="socialModal.open = false"
            x-bind:class="{ 'pointer-events-none': socialModal.deleting }"></div>

        <div class="relative bg-white rounded-lg p-6 w-full max-w-md shadow-lg">
            <h2 class="text-lg font-semibold mb-4 flex justify-between items-center">
                <span x-text="socialModal.mode === 'edit' ? 'Modifier le réseau' : 'Ajouter un réseau'"></span>
                <button class="text-gray-900 hover:text-black cursor-pointer"
                        x-on:click="socialModal.open = false" aria-label="Fermer"
                        x-bind:disabled="socialModal.deleting">
                    <i class="bi bi-x-lg"></i>
                </button>
            </h2>
            <template x-if="socialModal.errors._all">
                <div class="mb-4 px-4 py-2 rounded bg-red-100 text-red-800 text-sm">
                    <template x-for="err in socialModal.errors._all" :key="err">
                        <div x-text="err"></div>
                    </template>
                </div>
            </template>
            <div class="space-y-4">
                <div>
                    <label class="block mb-2">Icône <span class="text-red-500">*</span></label>
                    <select x-model="socialModal.icon"
                        required
                        class="px-3 py-2 w-full rounded-md border border-gray-300 focus:border-gray-900 outline-0">
                        <option value="">Choisir...</option>
                        <template x-for="icon in icons" :key="icon">
                            <option :value="icon" x-text="icon"></option>
                        </template>
                    </select>
                </div>
                <div>
                    <label class="block mb-2">URL <span class="text-red-500">*</span></label>
                    <input type="url" x-model="socialModal.url"
                        required
                        placeholder="......"
                        class="px-3 py-2 w-full rounded-md border border-gray-300 focus:border-gray-900 outline-0">
                </div>
            </div>
            <div class="flex justify-end gap-3 mt-6">
                <button type="button"
                    class="cursor-pointer px-3 py-2 hover:bg-gray-300 transition-ease duration-300 rounded-md border border-gray-300"
                    x-on:click="socialModal.open = false"
                    x-bind:disabled="socialModal.deleting">
                    Annuler
                </button>
                <button type="button"
                    class="cursor-pointer px-3 py-2 bg-gray-900 hover:bg-black text-white transition-ease duration-300 rounded-md border border-gray-300 flex items-center gap-2"
                    x-on:click="saveSocial"
                    x-bind:disabled="socialModal.deleting">
                    <span>Enregistrer</span>
                </button>
            </div>
        </div>
    </div>

    <div x-show="deleteModal.open" class="fixed inset-0 z-50 flex items-center justify-center px-4" 
        x-trap.noscroll="deleteModal.open"
        @keydown.escape.window="deleteModal.open = false"
        x-cloak>
        <div class="absolute inset-0 bg-black/40"
            x-on:click="deleteModal.open = false"
            x-bind:class="{ 'pointer-events-none': deleteModal.loading }"></div>

        <div class="relative bg-white rounded-lg p-6 w-full  max-w-lg shadow-lg">
            <h2 class="text-lg font-semibold mb-2 flex justify-between items-center">
                <span>Confirmer la suppression</span>
                <button class="text-gray-900 hover:text-black cursor-pointer"
                        x-on:click="deleteModal.open = false" aria-label="Fermer"
                        x-bind:disabled="deleteModal.loading">
                    <i class="bi bi-x-lg"></i>
                </button>
            </h2>
            <p class="text-gray-600 mb-6">Êtes-vous sûr de vouloir supprimer ce réseau social ? Cette action est irréversible.</p>
            <div class="flex justify-end gap-3">
                <button type="button"
                    class="cursor-pointer px-3 py-2 hover:bg-gray-300 transition-ease duration-300 rounded-md border border-gray-300"
                    x-on:click="deleteModal.open = false"
                    x-bind:disabled="deleteModal.loading">
                    Annuler
                </button>
                <button type="button"
                    class="cursor-pointer px-3 py-2 bg-red-600 hover:bg-red-700 text-white transition-ease duration-300 rounded-md flex items-center gap-2"
                    x-on:click="deleteSocial()"
                    x-bind:disabled="deleteModal.loading">
                    <span>Supprimer</span>
                    <span x-show="deleteModal.loading" class="inline-block">
                        <svg class="animate-spin h-4 w-4 text-white" viewBox="0 0 24 24" fill="none">
                            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/>
                            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"/>
                        </svg>
                    </span>
                </button>
            </div>
        </div>
    </div>

    <!-- Modal réutilisé pour timeline -->
    <div x-show="timelineModal.open" class="fixed inset-0 z-50 flex items-center justify-center px-4"
        x-trap.noscroll="timelineModal.open"
        @keydown.escape.window="timelineModal.open = false"
        x-cloak>
        <div class="absolute inset-0 bg-black/40"
            x-on:click="timelineModal.open = false"></div>
        <div class="relative bg-white rounded-lg p-6 w-full max-w-md shadow-lg">
            <h2 class="text-lg font-semibold mb-4 flex justify-between items-center">
                <span x-text="timelineModal.mode === 'edit' ? 'Modifier un élément du parcours' : 'Ajouter au parcours'"></span>
                <button class="text-gray-900 hover:text-black cursor-pointer"
                        x-on:click="timelineModal.open = false" aria-label="Fermer">
                    <i class="bi bi-x-lg"></i>
                </button>
            </h2>
            <template x-if="timelineModal.errors.year">
                <div class="text-xs text-red-600 mb-2" x-text="timelineModal.errors.year[0]"></div>
            </template>
            <template x-if="timelineModal.errors.title">
                <div class="text-xs text-red-600 mb-2" x-text="timelineModal.errors.title[0]"></div>
            </template>
            <div class="space-y-4">
                <div>
                    <label class="block mb-2">Année <span class="text-red-500">*</span></label>
                    <input type="text" x-model="timelineModal.year"
                        class="px-3 py-2 w-full rounded-md border border-gray-300 focus:border-gray-900 outline-0"
                        placeholder="Ex: 1982">
                </div>
                <div>
                    <label class="block mb-2">Titre <span class="text-red-500">*</span></label>
                    <input type="text" x-model="timelineModal.title"
                        class="px-3 py-2 w-full rounded-md border border-gray-300 focus:border-gray-900 outline-0"
                        placeholder="Titre...">
                </div>
                <div class="flex items-center gap-2 text-sm">
                    <template x-if="timelineModal.preview">
                        <div class="relative w-24 h-20">
                            <img :src="timelineModal.preview" class="w-full h-full object-cover rounded-md border border-black/15" alt="">
                            <button type="button"
                                class="absolute inset-0 bg-black/50 opacity-0 hover:opacity-100 text-white text-xs flex items-center justify-center transition"
                                @click="clearTimelineModalImage()">
                                Retirer
                            </button>
                        </div>
                    </template>
                    <template x-if="!timelineModal.preview">
                        <div class="w-24 h-20 flex items-center justify-center border border-dashed rounded-md text-gray-400 text-sm">
                            Aucune image
                        </div>
                    </template>
                    <input type="file" accept='image/*'
                        class="text-sm text-gray-500 file:mr-2 file:px-2 file:py-1 file:rounded-md file:border-0 file:bg-gray-900 file:text-white hover:file:bg-black cursor-pointer"
                        @change="handleTimelineModalImageChange($event)">
                </div>
            </div>
            <div class="flex justify-end gap-3 mt-6">
                <button type="button"
                    class="cursor-pointer px-3 py-2 hover:bg-gray-300 transition-ease duration-300 rounded-md border border-gray-300"
                    x-on:click="timelineModal.open = false">
                    Annuler
                </button>
                <button type="button"
                    class="cursor-pointer px-3 py-2 bg-gray-900 hover:bg-black text-white transition-ease duration-300 rounded-md border border-gray-300 flex items-center gap-2"
                    x-on:click="saveTimelineModal">
                    <span>Enregistrer</span>
                </button>
            </div>
        </div>
    </div>
</div>
@endsection