@extends('layouts.admin-layout')

@section('title', 'Modifier la Catégorie')

@section('content')
    <div class="p-6">
        <!-- Breadcrumb -->
        <div class="mb-6">
            <nav class="flex" aria-label="Breadcrumb">
                <ol class="inline-flex items-center space-x-1 md:space-x-3">
                    <li class="inline-flex items-center">
                        <a href="{{ route('admin.categories.index') }}" class="text-gray-700 hover:text-indigo-600 inline-flex items-center">
                            <i class="fas fa-folder mr-2"></i>
                            Catégories
                        </a>
                    </li>
                    <li aria-current="page">
                        <div class="flex items-center">
                            <i class="fas fa-chevron-right text-gray-400 mx-2"></i>
                            <span class="text-gray-500">Modifier</span>
                        </div>
                    </li>
                </ol>
            </nav>
        </div>

        <div class="max-w-4xl mx-auto">
            <div class="mb-8">
                <h1 class="text-3xl font-bold text-gray-900 flex items-center">
                    <i class="fas fa-edit text-indigo-600 mr-3"></i>
                    Modifier la Catégorie
                </h1>
                <p class="mt-2 text-gray-600">Modifier les informations de : <strong>{{ $category->name }}</strong></p>
            </div>

            <div class="bg-white overflow-hidden shadow-xl sm:rounded-xl border border-gray-200">
                <form action="{{ route('admin.categories.update', $category) }}" method="POST" enctype="multipart/form-data" class="p-8">
                    @csrf
                    @method('PUT')

                    @if ($errors->any())
                        <div class="mb-6 bg-red-50 border-l-4 border-red-500 p-4 rounded-r-lg">
                            <div class="flex">
                                <i class="fas fa-exclamation-circle text-red-500 mt-1 mr-3"></i>
                                <div>
                                    <h3 class="text-red-800 font-semibold mb-2">Erreurs de validation</h3>
                                    <ul class="list-disc list-inside text-red-700 text-sm">
                                        @foreach ($errors->all() as $error)
                                            <li>{{ $error }}</li>
                                        @endforeach
                                    </ul>
                                </div>
                            </div>
                        </div>
                    @endif

                    <!-- Nom -->
                    <div class="mb-6">
                        <label for="name" class="flex items-center text-sm font-bold text-gray-800 mb-3 bg-indigo-50 px-4 py-2 rounded-lg border-l-4 border-indigo-500">
                            <i class="fas fa-tag text-indigo-600 mr-2"></i>
                            <span>Nom de la Catégorie <span class="text-red-500">*</span></span>
                        </label>
                        <input type="text" name="name" id="name" value="{{ old('name', $category->name) }}" required
                            class="w-full rounded-lg border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500 text-base"
                            placeholder="Ex: Cultes du Dimanche, Enseignements, Témoignages...">
                        @error('name')
                            <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Slug -->
                    <div class="mb-6">
                        <label for="slug" class="flex items-center text-sm font-bold text-gray-800 mb-3 bg-gray-50 px-4 py-2 rounded-lg border-l-4 border-gray-400">
                            <i class="fas fa-link text-gray-600 mr-2"></i>
                            <span>Slug (optionnel — généré automatiquement si vide)</span>
                        </label>
                        <input type="text" name="slug" id="slug" value="{{ old('slug', $category->slug) }}"
                            class="w-full rounded-lg border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500 text-base"
                            placeholder="Ex: cultes-dimanche">
                        @error('slug')
                            <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Description -->
                    <div class="mb-6">
                        <label for="description" class="flex items-center text-sm font-bold text-gray-800 mb-3 bg-purple-50 px-4 py-2 rounded-lg border-l-4 border-purple-500">
                            <i class="fas fa-align-left text-purple-600 mr-2"></i>
                            <span>Description (optionnel)</span>
                        </label>
                        <textarea name="description" id="description" rows="3"
                            class="w-full rounded-lg border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500 text-base"
                            placeholder="Description de la catégorie...">{{ old('description', $category->description) }}</textarea>
                        @error('description')
                            <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Image de couverture -->
                    <div class="mb-6">
                        <label class="flex items-center text-sm font-bold text-gray-800 mb-3 bg-teal-50 px-4 py-2 rounded-lg border-l-4 border-teal-500">
                            <i class="fas fa-image text-teal-600 mr-2"></i>
                            <span>Image de couverture (optionnel)</span>
                        </label>

                        @if($category->image)
                            <!-- Image actuelle -->
                            <div id="current-image" class="mb-4 flex items-start gap-4 p-4 bg-gray-50 rounded-xl border border-gray-200">
                                <img src="{{ asset($category->image) }}" alt="{{ $category->name }}"
                                     class="w-32 h-24 object-cover rounded-lg shadow border border-gray-200 flex-shrink-0">
                                <div class="flex-1 min-w-0">
                                    <p class="text-sm font-semibold text-gray-700 mb-2">Image actuelle</p>
                                    <label class="inline-flex items-center gap-2 cursor-pointer select-none">
                                        <input type="checkbox" name="remove_image" id="remove_image" value="1"
                                               class="w-4 h-4 text-red-600 border-gray-300 rounded focus:ring-red-500">
                                        <span class="text-sm text-red-600 font-medium">Supprimer cette image</span>
                                    </label>
                                </div>
                            </div>
                        @endif

                        <!-- Prévisualisation nouvelle image -->
                        <div id="preview-container" class="hidden mb-3">
                            <img id="image-preview" src="#" alt="Prévisualisation"
                                 class="max-h-48 rounded-lg object-contain shadow border border-gray-200">
                            <p id="image-filename" class="mt-1 text-sm text-teal-600"></p>
                        </div>

                        <input type="file" name="image" id="image"
                               accept="image/jpeg,image/jpg,image/png,image/webp,image/gif"
                               class="block w-full text-sm text-gray-700 border border-gray-300 rounded-lg cursor-pointer bg-gray-50 focus:outline-none focus:border-teal-500 file:mr-4 file:py-2 file:px-4 file:rounded-l-lg file:border-0 file:text-sm file:font-semibold file:bg-teal-600 file:text-white hover:file:bg-teal-700">
                        <p class="mt-2 text-xs text-gray-500">
                            {{ $category->image ? 'Choisir un fichier remplacera l\'image actuelle.' : 'JPG, PNG, WEBP ou GIF — max 2 Mo' }}
                        </p>
                        @error('image')
                            <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Icône -->
                    <div class="mb-6">
                        <label for="icon" class="flex items-center text-sm font-bold text-gray-800 mb-3 bg-amber-50 px-4 py-2 rounded-lg border-l-4 border-amber-500">
                            <i class="fas fa-icons text-amber-600 mr-2"></i>
                            <span>Icône FontAwesome (optionnel)</span>
                        </label>
                        <input type="text" name="icon" id="icon" value="{{ old('icon', $category->icon) }}"
                            class="w-full rounded-lg border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500 text-base"
                            placeholder="Ex: fas fa-church, fas fa-bible, fas fa-pray">
                        <p class="mt-2 text-sm text-gray-500">Voir <a href="https://fontawesome.com/icons" target="_blank" class="text-indigo-600 hover:underline">fontawesome.com</a></p>
                        @error('icon')
                            <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Couleur -->
                    <div class="mb-6">
                        <label for="color" class="flex items-center text-sm font-bold text-gray-800 mb-3 bg-pink-50 px-4 py-2 rounded-lg border-l-4 border-pink-500">
                            <i class="fas fa-palette text-pink-600 mr-2"></i>
                            <span>Couleur (optionnel)</span>
                        </label>
                        <div class="flex items-center gap-4">
                            <input type="color" name="color" id="color" value="{{ old('color', $category->color) }}"
                                class="h-12 w-20 rounded-lg border-gray-300 shadow-sm cursor-pointer">
                            <input type="text" id="color-text" value="{{ old('color', $category->color) }}"
                                class="flex-1 rounded-lg border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500 text-base"
                                placeholder="#3b82f6" readonly>
                        </div>
                        @error('color')
                            <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Ordre -->
                    <div class="mb-6">
                        <label for="order" class="flex items-center text-sm font-bold text-gray-800 mb-3 bg-blue-50 px-4 py-2 rounded-lg border-l-4 border-blue-500">
                            <i class="fas fa-sort-numeric-down text-blue-600 mr-2"></i>
                            <span>Ordre d'affichage (optionnel)</span>
                        </label>
                        <input type="number" name="order" id="order" value="{{ old('order', $category->order) }}" min="0"
                            class="w-full rounded-lg border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500 text-base"
                            placeholder="0">
                        @error('order')
                            <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Boutons -->
                    <div class="flex items-center justify-between pt-6 border-t">
                        <a href="{{ route('admin.categories.index') }}" class="bg-gray-100 hover:bg-gray-200 text-gray-700 font-bold py-3 px-6 rounded-lg transition inline-flex items-center">
                            <i class="fas fa-arrow-left mr-2"></i>
                            Retour
                        </a>
                        <button type="submit" class="bg-gradient-to-r from-indigo-600 to-indigo-700 hover:from-indigo-700 hover:to-indigo-800 text-white font-bold py-3 px-8 rounded-lg shadow-lg hover:shadow-xl transition inline-flex items-center">
                            <i class="fas fa-save mr-2"></i>
                            Mettre à Jour
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <script>
        // Sync color picker
        const colorPicker = document.getElementById('color');
        const colorText   = document.getElementById('color-text');
        colorPicker.addEventListener('input', () => colorText.value = colorPicker.value);

        // Prévisualisation + désactiver "supprimer" si un nouveau fichier est sélectionné
        document.getElementById('image').addEventListener('change', function () {
            const file = this.files[0];
            if (!file) return;

            // Si "supprimer" était coché, on le décoche
            const removeCheckbox = document.getElementById('remove_image');
            if (removeCheckbox) removeCheckbox.checked = false;

            const reader = new FileReader();
            reader.onload = function (e) {
                document.getElementById('image-preview').src = e.target.result;
                document.getElementById('image-filename').textContent = file.name + ' (' + (file.size / 1024).toFixed(1) + ' Ko)';
                document.getElementById('preview-container').classList.remove('hidden');
            };
            reader.readAsDataURL(file);
        });
    </script>
@endsection