@extends('layouts.admin-layout')

@section('title', 'Créer une 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">Créer une catégorie</span>
                        </div>
                    </li>
                </ol>
            </nav>
        </div>

        <div class="max-w-4xl mx-auto">
            <!-- Page Header -->
            <div class="mb-8">
                <h1 class="text-3xl font-bold text-gray-900 flex items-center">
                    <i class="fas fa-plus-circle text-indigo-600 mr-3"></i>
                    Créer une Catégorie
                </h1>
                <p class="mt-2 text-gray-600">Ajoutez une nouvelle catégorie pour organiser vos médias</p>
            </div>

            <div class="bg-white overflow-hidden shadow-xl sm:rounded-xl border border-gray-200">
                <form action="{{ route('admin.categories.store') }}" method="POST" class="p-8">
                    @csrf

                    @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') }}" 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 (optionnel) -->
                    <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') }}"
                            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">
                        <p class="mt-2 text-sm text-gray-500">Le slug sera généré automatiquement à partir du nom si vous le laissez vide</p>
                        @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') }}</textarea>
                        @error('description')
                            <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') }}"
                            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">Utilisez les classes FontAwesome (ex: fas fa-church). 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', '#3b82f6') }}"
                                class="h-12 w-20 rounded-lg border-gray-300 shadow-sm cursor-pointer">
                            <input type="text" id="color-text" value="{{ old('color', '#3b82f6') }}"
                                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>
                        <p class="mt-2 text-sm text-gray-500">Choisissez une couleur pour identifier visuellement cette catégorie</p>
                        @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', 0) }}" 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">
                        <p class="mt-2 text-sm text-gray-500">Les catégories seront affichées dans l'ordre croissant (0, 1, 2...)</p>
                        @error('order')
                            <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Buttons -->
                    <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>
                            Créer la Catégorie
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

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

        colorPicker.addEventListener('input', function() {
            colorText.value = this.value;
        });
    </script>
@endsection