<x-admin-layout>
    <x-slot name="header">
        <!-- Hid header content -->
    </x-slot>

    <!-- Main Outer Container matches index -->
    <div class="p-0 font-sans bg-slate-50 min-h-screen">
        
        <div class="bg-white border-none shadow-none md:rounded-none p-4 md:p-6 relative min-h-screen">
            <!-- Header Section (Inside Card) -->
            <div class="mb-6 flex items-center justify-between">
                <h5 class="text-[14px] font-bold text-gray-700 uppercase tracking-wide">
                    Nouvel Exercice
                </h5>
                <a href="{{ route('admin.settings.index') }}"
                    class="px-4 py-2 text-gray-600 hover:text-gray-900 transition-all text-sm font-bold flex items-center">
                    <svg class="h-4 w-4 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
                    </svg>
                    Retour
                </a>
            </div>

            <form action="{{ route('admin.management-years.store') }}" method="POST" class="space-y-8">
                @csrf

                <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                    <!-- Année -->
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-2">Année Fiscale <span class="text-red-600 font-bold">*</span></label>
                        <input type="number" name="year" value="{{ old('year', date('Y')) }}" min="2000" max="2099" required
                            class="block w-full px-3 py-2 border border-gray-300 rounded-sm focus:ring-1 focus:ring-blue-600 focus:border-blue-600 transition-all h-[38px] text-[13px] font-semibold text-gray-700">
                        @error('year')
                            <p class="text-rose-600 text-[11px] font-bold uppercase tracking-wider mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Statut -->
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-2">Statut Initial <span class="text-red-600 font-bold">*</span></label>
                        <select name="status" required
                            class="block w-full px-3 py-2 border border-gray-300 rounded-sm focus:ring-1 focus:ring-blue-600 focus:border-blue-600 transition-all h-[38px] bg-white text-[13px] font-semibold text-gray-700 cursor-pointer">
                            <option value="inactif" {{ old('status') == 'inactif' ? 'selected' : '' }}>INACTIF - (En attente)</option>
                            <option value="actif" {{ old('status') == 'actif' ? 'selected' : '' }}>ACTIF - (Exercice en cours)</option>
                            <option value="cloture" {{ old('status') == 'cloture' ? 'selected' : '' }}>CLÔTURÉ - (Archivé)</option>
                        </select>
                        @error('status')
                            <p class="text-rose-600 text-[11px] font-bold uppercase tracking-wider mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Date Début -->
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-2">Date de début <span class="text-red-600 font-bold">*</span></label>
                        <input type="date" name="start_date" value="{{ old('start_date') }}" required
                            class="block w-full px-3 py-2 border border-gray-300 rounded-sm focus:ring-1 focus:ring-blue-600 focus:border-blue-600 transition-all h-[38px] text-[13px] font-semibold text-gray-700">
                        @error('start_date')
                            <p class="text-rose-600 text-[11px] font-bold uppercase tracking-wider mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Date Fin -->
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-2">Date de fin <span class="text-red-600 font-bold">*</span></label>
                        <input type="date" name="end_date" value="{{ old('end_date') }}" required
                            class="block w-full px-3 py-2 border border-gray-300 rounded-sm focus:ring-1 focus:ring-blue-600 focus:border-blue-600 transition-all h-[38px] text-[13px] font-semibold text-gray-700">
                        @error('end_date')
                            <p class="text-rose-600 text-[11px] font-bold uppercase tracking-wider mt-1">{{ $message }}</p>
                        @enderror
                    </div>
                </div>

                <div class="flex flex-col sm:flex-row items-stretch sm:items-center justify-end gap-3 pt-6 border-t border-slate-100 mt-8">
                    <a href="{{ route('admin.settings.index') }}"
                        class="px-5 py-2 bg-white border border-gray-200 text-gray-700 rounded-sm hover:bg-gray-50 transition-all text-sm font-semibold shadow-sm hover:shadow-md text-center h-[38px] inline-flex items-center">
                        Annuler
                    </a>
                    <button type="submit"
                        class="px-5 py-2 text-white rounded-sm hover:opacity-90 transition-all duration-200 text-sm font-semibold shadow-sm hover:shadow-md h-[38px]"
                        style="background-color: #5867dd !important;">
                        Valider
                    </button>
                </div>
            </form>
        </div>
    </div>
</x-admin-layout>