@extends('layouts.portal')

@section('header_title', 'Portal Leave Request')

@section('content')
<div class="max-w-4xl space-y-8 pb-12">
    <div class="bg-white rounded-[2.5rem] border border-slate-100 shadow-sm overflow-hidden">
        <div class="p-8 md:p-12">
            <div class="mb-10 flex items-center justify-between">
                <div>
                    <h3 class="text-2xl font-black text-slate-900 mb-2">Absence Request</h3>
                    <p class="text-slate-500 font-medium">Coordinate your time away from the portal canvas.</p>
                </div>
                <div class="text-right">
                    <p class="text-[10px] font-black uppercase tracking-widest text-slate-400 mb-1">Available Portal Balance</p>
                    <p class="text-3xl font-black text-portal-primary">{{ auth()->user()->leave_balance }} Days</p>
                </div>
            </div>

            <form action="{{ route('portal.leaves.store') }}" method="POST" class="space-y-8">
                @csrf
                
                <!-- Leave Type -->
                <div class="space-y-4">
                    <label class="block text-[10px] font-black uppercase tracking-widest text-slate-400">Nature of Absence</label>
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                        @foreach(['annual' => 'Annual Leave', 'sick' => 'Medical Recovery', 'casual' => 'Personal Focus'] as $key => $label)
                        <label class="cursor-pointer group">
                            <input type="radio" name="type" value="{{ $key }}" class="sr-only peer" {{ $key == 'annual' ? 'checked' : '' }}>
                            <div class="p-6 bg-slate-50 border border-slate-100 rounded-[2rem] text-center transition-all peer-checked:bg-white peer-checked:border-portal-primary peer-checked:shadow-lg peer-checked:shadow-portal-primary/10 group-hover:bg-white">
                                <span class="block text-[10px] font-black uppercase tracking-widest text-slate-400 peer-checked:text-portal-primary mb-1">{{ strtoupper($key) }}</span>
                                <span class="text-sm font-bold text-slate-700">{{ $label }}</span>
                            </div>
                        </label>
                        @endforeach
                    </div>
                </div>

                <!-- Duration -->
                <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                    <div class="space-y-3">
                        <label class="block text-[10px] font-black uppercase tracking-widest text-slate-400">Departure (Start Date)</label>
                        <input type="date" name="start_date" required value="{{ date('Y-m-d', strtotime('+7 days')) }}"
                               class="w-full px-6 py-4 bg-slate-50 border border-slate-100 rounded-2xl text-sm font-bold text-slate-900 focus:ring-4 focus:ring-portal-primary/10 transition-all outline-none">
                    </div>
                    <div class="space-y-3">
                        <label class="block text-[10px] font-black uppercase tracking-widest text-slate-400">Reintegration (End Date)</label>
                        <input type="date" name="end_date" required value="{{ date('Y-m-d', strtotime('+8 days')) }}"
                               class="w-full px-6 py-4 bg-slate-50 border border-slate-100 rounded-2xl text-sm font-bold text-slate-900 focus:ring-4 focus:ring-portal-primary/10 transition-all outline-none">
                    </div>
                </div>

                <!-- Reason -->
                <div class="space-y-3">
                    <label class="block text-[10px] font-black uppercase tracking-widest text-slate-400">Qualitative Reason / Narrative</label>
                    <textarea name="reason" rows="4" required placeholder="Provide brief context for your absence to assist in portal resource planning..." 
                              class="w-full px-6 py-4 bg-slate-50 border border-slate-100 rounded-2xl text-sm font-medium text-slate-600 focus:ring-4 focus:ring-portal-primary/10 transition-all outline-none resize-none"></textarea>
                </div>

                <div class="pt-8 border-t border-slate-50 flex items-center justify-between">
                    <div class="flex items-center space-x-2 text-slate-400">
                        <i data-lucide="shield-check" class="w-4 h-4"></i>
                        <p class="text-[10px] font-bold uppercase tracking-widest">Awaiting Portal Leadership Validation.</p>
                    </div>
                    <button type="submit" class="px-10 py-4 bg-portal-primary text-white font-black rounded-2xl hover:bg-portal-primary-dark transition-all shadow-xl shadow-portal-primary/20">
                        Submit Request
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection