@extends('layouts.app')
@section('title', 'Pengajuan Izin')
@section('content')
<div x-data="{ showModal: false, cancelId: null, showCancelConfirm: false }">
    <div class="flex items-center justify-between mb-6">
        <div>
            <h1 class="text-2xl font-semibold text-gray-900 dark:text-white">Pengajuan Izin</h1>
            <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">Ajukan izin sakit atau izin personal.</p>
        </div>
        <button @click="showModal = true"
            class="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-white bg-primary-700 rounded-lg hover:bg-primary-800">
            Ajukan Izin Baru
        </button>
    </div>

    @if(session('success'))<x-alert type="success">{{ session('success') }}</x-alert>@endif
    @if(session('error'))<x-alert type="danger">{{ session('error') }}</x-alert>@endif
    @if($errors->any())
    <x-alert type="danger">
        <ul class="list-disc list-inside text-sm">@foreach($errors->all() as $e)<li>{{ $e }}</li>@endforeach</ul>
    </x-alert>
    @endif

    <div class="bg-white border border-gray-200 rounded-lg shadow-sm dark:bg-gray-800 dark:border-gray-700">
        <x-data-table>
            <x-slot:heading>
                <th class="px-4 py-3">Jenis</th>
                <th class="px-4 py-3">Tanggal</th>
                <th class="px-4 py-3">Durasi</th>
                <th class="px-4 py-3">Alasan</th>
                <th class="px-4 py-3">Lampiran</th>
                <th class="px-4 py-3">Status</th>
                <th class="px-4 py-3">Catatan Reviewer</th>
                <th class="px-4 py-3 text-right">Aksi</th>
            </x-slot:heading>
            <x-slot:body>
                @forelse($leaves as $leave)
                    @php
                        $statusValue = $leave->status instanceof \App\Enums\LeaveRequestStatus ? $leave->status->value : (string) $leave->status;
                        $statusLabel = $leave->status instanceof \App\Enums\LeaveRequestStatus ? $leave->status->label() : ucfirst($statusValue);
                        $statusColor = match($statusValue) {
                            'pending' => 'yellow',
                            'approved' => 'green',
                            'rejected' => 'red',
                            'canceled' => 'gray',
                            default => 'gray',
                        };

                        $typeLabel = match($leave->type) {
                            'permission' => 'Izin',
                            'sick' => 'Sakit',
                            default => ucfirst((string) $leave->type),
                        };
                    @endphp
                    <tr class="hover:bg-gray-50 dark:hover:bg-gray-700">
                        <td class="px-4 py-3"><x-badge color="blue">{{ $typeLabel }}</x-badge></td>
                        <td class="px-4 py-3 text-sm text-gray-600 dark:text-gray-400">
                            {{ $leave->start_date?->format('d M Y') }}
                            <span class="text-gray-400">s/d</span>
                            {{ $leave->end_date?->format('d M Y') }}
                        </td>
                        <td class="px-4 py-3 text-sm text-gray-600 dark:text-gray-400">{{ $leave->start_date?->diffInDays($leave->end_date) + 1 }} hari</td>
                        <td class="px-4 py-3 text-xs text-gray-600 dark:text-gray-400 max-w-[180px] truncate">{{ $leave->reason }}</td>
                        <td class="px-4 py-3">
                            @if($leave->attachment)
                                <a href="{{ route('student.leaves.download', $leave) }}" class="text-xs text-primary-600 hover:underline dark:text-primary-400">Unduh</a>
                            @else
                                <span class="text-xs text-gray-400">-</span>
                            @endif
                        </td>
                        <td class="px-4 py-3"><x-badge :color="$statusColor">{{ $statusLabel }}</x-badge></td>
                        <td class="px-4 py-3 text-xs text-gray-600 dark:text-gray-400 max-w-[180px] truncate">{{ $leave->reviewer_notes ?: '-' }}</td>
                        <td class="px-4 py-3 text-right">
                            @if($statusValue === 'pending')
                                <button @click="cancelId = {{ $leave->id }}; showCancelConfirm = true"
                                    class="text-xs font-medium text-red-600 hover:underline dark:text-red-400">Batalkan</button>
                            @else
                                <span class="text-xs text-gray-400">-</span>
                            @endif
                        </td>
                    </tr>
                @empty
                    <tr><td colspan="8" class="px-4 py-8 text-center text-gray-400">Belum ada pengajuan izin.</td></tr>
                @endforelse
            </x-slot:body>
            @if($leaves->hasPages())
                <x-slot:pagination>{{ $leaves->withQueryString()->links() }}</x-slot:pagination>
            @endif
        </x-data-table>
    </div>

    <x-modal :show="'showModal'" title="Ajukan Izin Baru" size="md">
        <form id="student-leave-submit-form" action="{{ route('student.leaves.store') }}" method="POST" enctype="multipart/form-data" class="space-y-4">
            @csrf
            <div>
                <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Jenis Izin</label>
                <select name="type" required class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                    <option value="permission">Izin</option>
                    <option value="sick">Sakit</option>
                </select>
            </div>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Dari Tanggal</label>
                    <input type="date" name="start_date" required min="{{ today()->format('Y-m-d') }}"
                        class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                </div>
                <div>
                    <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Sampai Tanggal</label>
                    <input type="date" name="end_date" required min="{{ today()->format('Y-m-d') }}"
                        class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                </div>
            </div>
            <div>
                <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Alasan</label>
                <textarea name="reason" rows="3" required class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:text-white" placeholder="Tuliskan alasan izin..."></textarea>
            </div>
            <div>
                <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Lampiran (opsional)</label>
                <input type="file" name="attachment" accept=".pdf,.jpg,.jpeg,.png"
                    class="block w-full text-sm text-gray-900 border border-gray-300 rounded-lg cursor-pointer bg-gray-50 dark:text-gray-400 dark:bg-gray-700 dark:border-gray-600">
                <p class="text-xs text-gray-400 mt-1">PDF/JPG/PNG, maks 2MB</p>
            </div>
            <x-slot:footer>
                <button type="button" @click="showModal = false" class="px-5 py-2.5 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600">Batal</button>
                <button type="submit" form="student-leave-submit-form" class="px-5 py-2.5 text-sm font-medium text-white bg-primary-700 rounded-lg hover:bg-primary-800">Kirim Pengajuan</button>
            </x-slot:footer>
        </form>
    </x-modal>

    <x-modal :show="'showCancelConfirm'" title="Batalkan Pengajuan" size="sm">
        <form id="student-leave-cancel-form" :action="'{{ url('student/leaves') }}/' + cancelId + '/cancel'" method="POST" class="space-y-4">
            @csrf
            @method('PATCH')
            <p class="text-sm text-gray-600 dark:text-gray-400">Pengajuan pending akan dibatalkan. Lanjutkan?</p>
            <x-slot:footer>
                <button type="button" @click="showCancelConfirm = false" class="px-5 py-2.5 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600">Tidak</button>
                <button type="submit" form="student-leave-cancel-form" class="px-5 py-2.5 text-sm font-medium text-white bg-red-700 rounded-lg hover:bg-red-800">Ya, Batalkan</button>
            </x-slot:footer>
        </form>
    </x-modal>
</div>
@endsection