<div>
    {{-- Success Flash --}}
    @if(session()->has('success'))
        <div class="mb-4 p-4 rounded-2xl border border-green-200 bg-green-50">
            <div class="flex items-center gap-3">
                <svg class="w-5 h-5 text-[#059669] shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                </svg>
                <p class="text-sm font-medium text-[#059669]">{{ session('success') }}</p>
            </div>
        </div>
    @endif

    {{-- Back Button --}}
    <div class="mb-4">
        <a href="{{ route('parent.attendance') }}" wire:navigate
           class="inline-flex items-center gap-1.5 text-sm text-[#64748B] hover:text-[#2563EB] transition-colors min-h-[44px]">
            <svg class="w-4 h-4 rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
            </svg>
            {{ __('الحضور') }}
        </a>
    </div>

    {{-- Title --}}
    <h1 class="text-xl font-bold text-[#0F172A] mb-6">{{ __('تقديم عذر') }}</h1>

    <form wire:submit="submit" class="space-y-5">
        {{-- Child Selector --}}
        <div>
            <label for="child_id" class="block text-sm font-medium text-[#0F172A] mb-2">{{ __('الابن/الابنة') }}</label>
            <select
                wire:model.live="child_id"
                id="child_id"
                class="w-full rounded-xl border border-gray-200 bg-white px-4 py-3 text-sm text-[#0F172A] focus:border-[#2563EB] focus:ring-2 focus:ring-[#2563EB]/20 outline-none min-h-[44px]"
            >
                <option value="">{{ __('اختر الابن/الابنة') }}</option>
                @foreach($children ?? [] as $child)
                    <option value="{{ $child['id'] ?? '' }}">{{ $child['name'] ?? '' }}</option>
                @endforeach
            </select>
            @error('child_id')
                <p class="text-xs text-[#DC2626] mt-1">{{ $message }}</p>
            @enderror
        </div>

        {{-- Session Selector --}}
        <div>
            <label for="session_id" class="block text-sm font-medium text-[#0F172A] mb-2">{{ __('الحصة') }}</label>
            <select
                wire:model="session_id"
                id="session_id"
                class="w-full rounded-xl border border-gray-200 bg-white px-4 py-3 text-sm text-[#0F172A] focus:border-[#2563EB] focus:ring-2 focus:ring-[#2563EB]/20 outline-none min-h-[44px]"
                {{ empty($sessions) ? 'disabled' : '' }}
            >
                <option value="">{{ __('اختر الحصة') }}</option>
                @foreach($sessions ?? [] as $session)
                    <option value="{{ $session['id'] ?? '' }}">
                        {{ $session['label'] ?? '' }}
                    </option>
                @endforeach
            </select>
            @error('session_id')
                <p class="text-xs text-[#DC2626] mt-1">{{ $message }}</p>
            @enderror
            @if(empty($sessions) && $child_id)
                <p class="text-xs text-[#64748B] mt-1">{{ __('لا توجد حصص متاحة لهذا الابن') }}</p>
            @endif
        </div>

        {{-- Excuse Type --}}
        <div>
            <label class="block text-sm font-medium text-[#0F172A] mb-3">{{ __('نوع العذر') }}</label>
            @php
                $excuseTypes = [
                    'medical' => 'مرضي',
                    'family' => 'عائلي',
                    'travel' => 'سفر',
                    'academic' => 'دراسي',
                    'other' => 'آخر',
                ];
            @endphp
            <div class="grid grid-cols-2 sm:grid-cols-3 gap-2">
                @foreach($excuseTypes as $key => $label)
                    <label class="relative cursor-pointer">
                        <input
                            type="radio"
                            wire:model="excuse_type"
                            value="{{ $key }}"
                            class="peer sr-only"
                        >
                        <div class="flex items-center justify-center px-4 py-3 rounded-xl border border-gray-200 text-sm text-[#64748B] min-h-[44px]
                            peer-checked:border-[#2563EB] peer-checked:bg-[#2563EB]/5 peer-checked:text-[#2563EB] peer-checked:font-medium
                            hover:border-gray-300 transition-all">
                            {{ __($label) }}
                        </div>
                    </label>
                @endforeach
            </div>
            @error('excuse_type')
                <p class="text-xs text-[#DC2626] mt-1">{{ $message }}</p>
            @enderror
        </div>

        {{-- Description --}}
        <div>
            <label for="description" class="block text-sm font-medium text-[#0F172A] mb-2">{{ __('الوصف') }}</label>
            <textarea
                wire:model="description"
                id="description"
                rows="4"
                class="w-full rounded-xl border border-gray-200 bg-white px-4 py-3 text-sm text-[#0F172A] focus:border-[#2563EB] focus:ring-2 focus:ring-[#2563EB]/20 outline-none resize-none"
                placeholder="{{ __('اكتب تفاصيل العذر هنا...') }}"
            ></textarea>
            @error('description')
                <p class="text-xs text-[#DC2626] mt-1">{{ $message }}</p>
            @enderror
        </div>

        {{-- File Attachment --}}
        <div>
            <label for="attachment" class="block text-sm font-medium text-[#0F172A] mb-2">{{ __('مرفق (شهادة طبية أو مستند)') }}</label>
            <div class="relative">
                <input
                    type="file"
                    wire:model="attachment"
                    id="attachment"
                    class="w-full rounded-xl border border-gray-200 bg-white px-4 py-3 text-sm text-[#64748B] file:me-3 file:py-1 file:px-3 file:rounded-lg file:border-0 file:bg-[#2563EB]/10 file:text-[#2563EB] file:text-xs file:font-medium file:cursor-pointer focus:border-[#2563EB] focus:ring-2 focus:ring-[#2563EB]/20 outline-none min-h-[44px]"
                    accept=".pdf,.jpg,.jpeg,.png"
                >
                <div wire:loading wire:target="attachment" class="absolute end-3 top-1/2 -translate-y-1/2">
                    <svg class="animate-spin w-4 h-4 text-[#2563EB]" fill="none" viewBox="0 0 24 24">
                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                    </svg>
                </div>
            </div>
            @error('attachment')
                <p class="text-xs text-[#DC2626] mt-1">{{ $message }}</p>
            @enderror
            <p class="text-[10px] text-[#64748B] mt-1">{{ __('الملفات المقبولة: PDF, JPG, PNG (حد أقصى 5 ميجابايت)') }}</p>
        </div>

        {{-- Submit Button --}}
        <div class="pt-2">
            <button
                type="submit"
                wire:loading.attr="disabled"
                wire:target="submit"
                class="w-full bg-[#2563EB] text-white font-medium py-3.5 px-6 rounded-2xl hover:bg-blue-700 transition-colors min-h-[44px] disabled:opacity-50"
            >
                <span wire:loading.remove wire:target="submit">{{ __('إرسال العذر') }}</span>
                <span wire:loading wire:target="submit">{{ __('جارٍ الإرسال...') }}</span>
            </button>
        </div>
    </form>
</div>
