@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">
            <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>

                    <!-- 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>

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

@endsection