@extends('layouts.dashboard')

@section('content')
<div
    x-data="{
        catalogs: @js($catalogs),
        categories: @js($categories),
        routes: {
            base: '{{ route('dashboard.catalogs.index', [], false) }}',
            store: '{{ route('dashboard.catalogs.store', [], false) }}',
            update: id => '{{ route('dashboard.catalogs.update', ':id') }}'.replace(':id', id),
            destroy: id => '{{ route('dashboard.catalogs.destroy', ':id') }}'.replace(':id', id),
            reorder: '{{ route('dashboard.catalogs.reorder', [], false) }}'
        },
        csrf: '{{ csrf_token() }}',
        catalogModal: { open: false, mode: 'create', id: null, title: '', catalog_category_id: '', banner: '', bannerPreview: '', pdf: '', errors: {}, loading: false },
        deleteModal: { open: false, id: null, loading: false },
        showRequiredErrors: false,
        groupedCatalogs() {
            let groups = {};
            for (const cat of this.categories) {
                groups[cat.id] = [];
            }
            for (const c of this.catalogs) {
                if (!groups[c.catalog_category_id]) groups[c.catalog_category_id] = [];
                groups[c.catalog_category_id].push(c);
            }
            return groups;
        },
        moveUp(categoryId, index) {
            if (index === 0) return;
            let items = this.groupedCatalogs()[categoryId];
            const moved = items.splice(index, 1)[0];
            items.splice(index - 1, 0, moved);
            this.catalogs = Object.values(this.groupedCatalogs()).flat();
            this.reorder();
        },
        moveDown(categoryId, index) {
            let items = this.groupedCatalogs()[categoryId];
            if (index === items.length - 1) return;
            const moved = items.splice(index, 1)[0];
            items.splice(index + 1, 0, moved);
            this.catalogs = Object.values(this.groupedCatalogs()).flat();
            this.reorder();
        },
        reorder() {
            fetch(this.routes.reorder, {
                method: 'POST',
                headers: { 'X-CSRF-TOKEN': this.csrf, 'Content-Type': 'application/json' },
                body: JSON.stringify({ ids: this.catalogs.map(c => c.id) })
            });
        },
        resetFileInputs() {
            if (this.$refs.banner) this.$refs.banner.value = '';
            if (this.$refs.pdf) this.$refs.pdf.value = '';
        },
        openCreate(categoryId = '') {
            this.catalogModal = { open: true, mode: 'create', id: null, title: '', catalog_category_id: categoryId, banner: '', bannerPreview: '', pdf: '', errors: {}, loading: false };
            this.$nextTick(() => { this.resetFileInputs(); });
        },
        openEdit(catalog) {
            this.catalogModal = { open: true, mode: 'edit', id: catalog.id, title: catalog.title, catalog_category_id: catalog.catalog_category_id, banner: '', bannerPreview: catalog.banner, pdf: '', errors: {}, loading: false };
            this.$nextTick(() => { this.resetFileInputs(); });
        },
        handleBannerChange(e) {
            const file = e.target.files[0];
            if (!file) return;
            this.catalogModal.banner = file;
            const reader = new FileReader();
            reader.onload = ev => this.catalogModal.bannerPreview = ev.target.result;
            reader.readAsDataURL(file);
        },
        clearBanner() {
            this.catalogModal.banner = '';
            this.catalogModal.bannerPreview = '';
            this.resetFileInputs();
        },
        handlePdfChange(e) {
            const file = e.target.files[0];
            if (!file) return;
            this.catalogModal.pdf = file;
        },
        clearPdf() {
            this.catalogModal.pdf = '';
            this.resetFileInputs();
        },
        isFormValid() {
            return this.catalogModal.title.trim() !== '' &&
                this.catalogModal.catalog_category_id !== '';
        },
        async submitCatalog() {
            this.showRequiredErrors = false;
            if (!this.isFormValid()) {
                this.showRequiredErrors = true;
                return;
            }
            this.catalogModal.errors = {};
            this.catalogModal.loading = true;
            let formData = new FormData();
            formData.append('title', this.catalogModal.title);
            formData.append('catalog_category_id', this.catalogModal.catalog_category_id);
            if (this.catalogModal.banner) formData.append('banner', this.catalogModal.banner);
            if (this.catalogModal.pdf) formData.append('pdf', this.catalogModal.pdf);
            let url = this.catalogModal.mode === 'edit'
                ? this.routes.update(this.catalogModal.id)
                : this.routes.store;
            let method = this.catalogModal.mode === 'edit' ? 'POST' : 'POST';
            if (this.catalogModal.mode === 'edit') formData.append('_method', 'PUT');
            try {
                let r = await fetch(url, {
                    method,
                    headers: { 'X-CSRF-TOKEN': this.csrf },
                    body: formData
                });
                if (r.status === 422) {
                    let data = await r.json();
                    this.catalogModal.errors = data.errors || {};
                } else if (r.ok) {
                    let data = await r.json();
                    if (this.catalogModal.mode === 'edit') {
                        let idx = this.catalogs.findIndex(c => c.id === data.id);
                        if (idx !== -1) this.catalogs[idx] = data;
                    } else {
                        this.catalogs.push(data);
                    }
                    this.catalogModal.open = false;
                }
            } finally {
                this.catalogModal.loading = false;
            }
        },
        confirmDelete(id) {
            this.deleteModal = { open: true, id, loading: false };
        },
        async deleteCatalog() {
            if (!this.deleteModal.id) return;
            this.deleteModal.loading = true;
            let url = this.routes.destroy(this.deleteModal.id);
            try {
                let r = await fetch(url, {
                    method: 'DELETE',
                    headers: { 'X-CSRF-TOKEN': this.csrf }
                });
                if (r.ok) {
                    this.catalogs = this.catalogs.filter(c => c.id !== this.deleteModal.id);
                    this.deleteModal.open = false;
                }
            } finally {
                this.deleteModal.loading = false;
            }
        }
    }"
>
    <div class="mb-6 flex justify-between items-center">
        <h1 class="text-2xl">
            <i class="bi bi-journal-richtext mr-2"></i>
            Catalogues
        </h1>
        <button type="button" 
                class="px-4 cursor-pointer py-2 rounded-md bg-gray-900 text-white hover:bg-black transition-colors"
                x-on:click="openCreate()">
            <i class="bi bi-plus-circle mr-2"></i>
            Ajouter un catalogue
        </button>
    </div>
    <div>
        <template x-for="category in categories" :key="category.id">
            <div class="bg-white rounded-lg p-6 border border-gray-200 mb-6">
                <div class="flex items-center justify-between mb-6">
                    <div class="font-bold text-lg" x-text="category.name"></div>
                </div>
                <ul class="space-y-3" x-show="groupedCatalogs()[category.id].length > 0" x-cloak>
                    <template x-for="(catalog, index) in groupedCatalogs()[category.id]" :key="catalog.id">
                        <li class="border border-gray-200 rounded-md ps-4 pe-8 py-2 flex items-center justify-between" :data-id="catalog.id">
                            <div class="flex items-center gap-5 min-w-0">
                                <div class="flex flex-col gap-1">
                                    <button type="button"
                                        class="text-gray-500 hover:text-gray-700 p-2 cursor-pointer text-lg rounded disabled:opacity-40"
                                        :disabled="index === 0"
                                        x-on:click="moveUp(category.id, index)"
                                        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="index === groupedCatalogs()[category.id].length - 1"
                                        x-on:click="moveDown(category.id, index)"
                                        aria-label="Descendre"
                                        title="Descendre">
                                        <i class="bi bi-chevron-down"></i>
                                    </button>
                                </div>
                                <div class="w-20 h-15 bg-gray-100 rounded overflow-hidden flex items-center justify-center flex-shrink-0">
                                    <img :src="catalog.banner" alt="Aperçu" class="object-cover w-full h-full">
                                </div>
                                <div class="min-w-0 flex-1">
                                    <div class="font-medium break-words" x-text="catalog.title"></div>
                                    <a class="inline-block mt-1 px-2 py-1 bg-zinc-950 text-white rounded text-xs hover:bg-black transition-colors"
                                       :href="catalog.pdf" target="_blank">
                                        Voir le PDF
                                    </a>
                                </div>
                            </div>
                            <div class="flex items-center gap-2 flex-shrink-0">
                                <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="openEdit(catalog)" 
                                        aria-label="Modifier"
                                        title="Modifier le catalogue">
                                    <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(catalog.id)" 
                                        aria-label="Supprimer"
                                        title="Supprimer le catalogue">
                                    <i class="bi bi-trash"></i>
                                </button>
                            </div>
                        </li>
                    </template>
                </ul>
                <template x-if="groupedCatalogs()[category.id].length === 0">
                    <div class="text-gray-400 text-sm px-4 py-2">Aucun catalogue pour cette catégorie.</div>
                </template>
            </div>
        </template>
    </div>
    <div x-show="catalogModal.open" x-cloak x-trap.noscroll="catalogModal.open" @keydown.escape.window="catalogModal.open = false"
        class="fixed inset-0 z-50 flex items-center justify-center px-4">
        <div class="absolute inset-0 bg-black/40" x-on:click="catalogModal.open = false"></div>
        <div class="relative w-full max-w-lg bg-white rounded-lg p-6 shadow-lg max-h-[90vh] overflow-y-auto">
            <h2 class="text-xl flex justify-between font-bold mb-4">
                <span x-text="catalogModal.mode === 'create' ? 'Nouveau catalogue' : 'Modifier le catalogue'"></span>
                <button class="text-gray-900 hover:text-black cursor-pointer" 
                        x-on:click="catalogModal.open = false" aria-label="Fermer">
                    <i class="bi bi-x-lg"></i>
                </button>
            </h2>
            <form x-on:submit.prevent="submitCatalog" class="space-y-4" enctype="multipart/form-data" novalidate>
                <div>
                    <label class="block text-sm mb-2">Image bannière <span class="text-red-500">*</span></label>
                    <div class="p-6 text-center cursor-pointer border-2 rounded-lg transition-ease duration-300 hover:border-red-500 hover:bg-red-50 border-dashed border-gray-300"
                        x-on:click.stop="$refs.banner.click()">
                        <template x-if="!catalogModal.bannerPreview">
                            <div>
                                <div class="text-4xl text-gray-400 mb-2">📁</div>
                                <p class="text-sm text-gray-600 mb-2">Glissez votre image ici ou <span class="text-brand">parcourez</span></p>
                                <p class="text-xs text-gray-500">Images acceptées (max 5 MB)</p>
                            </div>
                        </template>
                        <template x-if="catalogModal.bannerPreview">
                            <div>
                                <img :src="catalogModal.bannerPreview" alt="Aperçu" class="max-w-full max-h-48 mx-auto rounded">
                                <div class="flex gap-2 justify-center mt-2">
                                    <button type="button" class="px-3 py-1 w-full transition-ease duration-300 hover:bg-black hover:text-white cursor-pointer rounded border text-sm" x-on:click.stop="$refs.banner.click()">Changer</button>
                                    <button type="button" class="px-3 py-1 w-full cursor-pointer rounded border border-red-600 hover:text-white transition-ease duration-300 hover:bg-red-600 text-red-600 text-sm" x-on:click="clearBanner()">Supprimer</button>
                                </div>
                            </div>
                        </template>
                    </div>
                    <input type="file" x-ref="banner" class="hidden" accept="image/*" x-on:change="handleBannerChange">
                    <template x-if="catalogModal.errors.banner">
                        <div class="text-xs text-red-600 mt-1" x-text="catalogModal.errors.banner[0]"></div>
                    </template>
                </div>
                <div>
                    <label class="block text-sm mb-2">Titre <span class="text-red-500">*</span></label>
                    <input type="text" x-model="catalogModal.title" placeholder="Titre du catalogue" class="px-3 py-2 w-full rounded-md border border-gray-300 focus:border-gray-900 outline-0" required>
                    <template x-if="catalogModal.errors.title">
                        <div class="text-xs text-red-600 mt-1" x-text="catalogModal.errors.title[0]"></div>
                    </template>
                    <template x-if="showRequiredErrors && catalogModal.title.trim() === ''">
                        <div class="text-xs text-red-600 mt-1">Ce champ est obligatoire.</div>
                    </template>
                </div>
                <div>
                    <label class="block text-sm mb-2">Catégorie <span class="text-red-500">*</span></label>
                    <select x-model="catalogModal.catalog_category_id" class="px-3 py-2 w-full rounded-md border border-gray-300 focus:border-gray-900 outline-0" required>
                        <option value="">Sélectionner une catégorie</option>
                        <template x-for="category in categories" :key="category.id">
                            <option :value="category.id" x-text="category.name"></option>
                        </template>
                    </select>
                    <template x-if="catalogModal.errors.catalog_category_id">
                        <div class="text-xs text-red-600 mt-1" x-text="catalogModal.errors.catalog_category_id[0]"></div>
                    </template>
                    <template x-if="showRequiredErrors && catalogModal.catalog_category_id === ''">
                        <div class="text-xs text-red-600 mt-1">Veuillez sélectionner une catégorie.</div>
                    </template>
                </div>
                <div>
                    <label class="block text-sm mb-2">PDF <span class="text-red-500">*</span></label>
                    <input type="file" x-ref="pdf" accept="application/pdf" x-on:change="handlePdfChange" class="px-3 py-2 w-full rounded-md border border-gray-300 focus:border-gray-900 outline-0">
                    <template x-if="catalogModal.errors.pdf">
                        <div class="text-xs text-red-600 mt-1" x-text="catalogModal.errors.pdf[0]"></div>
                    </template>
                </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="catalogModal.open = false" x-bind:disabled="catalogModal.loading">Annuler</button>
                    <button type="submit"
                        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-bind:disabled="catalogModal.loading">
                        <span>Enregistrer</span>
                        <span x-show="catalogModal.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>
            </form>
        </div>
    </div>
    <div x-show="deleteModal.open" x-cloak x-trap.noscroll="deleteModal.open" @keydown.escape.window="deleteModal.open = false"
        class="fixed inset-0 z-60 flex items-center justify-center px-4">
        <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 w-full max-w-lg bg-white rounded-lg p-6 shadow-lg">
            <h2 class="text-xl flex justify-between font-bold mb-4">
                <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-sm text-gray-600 mt-2">Voulez-vous vraiment supprimer ce catalogue ? Cette action est irréversible.</p>
            <div class="mt-4 flex justify-end gap-3">
                <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 class="px-3 py-2 cursor-pointer hover:bg-red-800 transition-ease duration-300 rounded bg-red-600 text-white flex items-center gap-2" x-on:click="deleteCatalog()" 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>
</div>
@endsection