@extends('layouts.app')
@section('title', 'Pengajuan Izin Siswa')
@section('content')
<div x-data="{ showRejectModal: false, rejectId: null }">
    <div class="flex items-center justify-between mb-6">
        <div>
            <h1 class="text-2xl font-semibold text-gray-900 dark:text-white">Pengajuan Izin Siswa</h1>
            <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">Kelola persetujuan izin siswa.</p>
        </div>
    </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 $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </x-alert>
    @endif

    @if(($summary['pending'] ?? 0) > 0)
        <x-alert type="warning" :dismissible="false">Terdapat <strong>{{ $summary['pending'] }}</strong> pengajuan izin siswa yang menunggu persetujuan.</x-alert>
    @endif

    <x-filter-bar>
        <x-slot:fields>
            <div>
                <label class="block mb-1 text-xs font-medium text-gray-700 dark:text-gray-300">Status</label>
                <select name="status" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                    <option value="">Semua</option>
                    <option value="pending" {{ $filters['status'] === 'pending' ? 'selected' : '' }}>Pending</option>
                    <option value="approved" {{ $filters['status'] === 'approved' ? 'selected' : '' }}>Disetujui</option>
                    <option value="rejected" {{ $filters['status'] === 'rejected' ? 'selected' : '' }}>Ditolak</option>
                    <option value="canceled" {{ $filters['status'] === 'canceled' ? 'selected' : '' }}>Dibatalkan</option>
                </select>
            </div>
            <div>
                <label class="block mb-1 text-xs font-medium text-gray-700 dark:text-gray-300">Jenis</label>
                <select name="type" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                    <option value="">Semua</option>
                    <option value="permission" {{ $filters['type'] === 'permission' ? 'selected' : '' }}>Izin</option>
                    <option value="sick" {{ $filters['type'] === 'sick' ? 'selected' : '' }}>Sakit</option>
                </select>
            </div>
            <div>
                <label class="block mb-1 text-xs font-medium text-gray-700 dark:text-gray-300">Kelas</label>
                <select name="classroom_id" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                    <option value="">Semua Kelas</option>
                    @foreach($classrooms as $classroom)
                        <option value="{{ $classroom->id }}" {{ (string) $filters['classroom_id'] === (string) $classroom->id ? 'selected' : '' }}>{{ $classroom->name }}</option>
                    @endforeach
                </select>
            </div>
            <div>
                <label class="block mb-1 text-xs font-medium text-gray-700 dark:text-gray-300">Bulan</label>
                <input type="month" name="month" value="{{ $filters['month'] }}" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
            </div>
        </x-slot:fields>
    </x-filter-bar>

    <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">Siswa</th>
                <th class="px-4 py-3">Kelas</th>
                <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</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 = $leave->type === 'sick' ? 'Sakit' : 'Izin';
                    @endphp
                    <tr class="hover:bg-gray-50 dark:hover:bg-gray-700">
                        <td class="px-4 py-3 text-sm font-medium text-gray-900 dark:text-white">{{ $leave->student->full_name ?? '-' }}</td>
                        <td class="px-4 py-3 text-sm text-gray-600 dark:text-gray-400">{{ $leave->student->classroom->name ?? '-' }}</td>
                        <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-[150px] truncate">{{ $leave->reason }}</td>
                        <td class="px-4 py-3">
                            @if($leave->attachment)
                                <a href="{{ route('admin.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-[150px] truncate">{{ $leave->reviewer_notes ?: '-' }}</td>
                        <td class="px-4 py-3 text-right">
                            @if($statusValue === 'pending')
                                <div class="flex items-center justify-end gap-2">
                                    <form action="{{ route('admin.student-leaves.approve', $leave) }}" method="POST" class="inline">
                                        @csrf
                                        @method('PATCH')
                                        <button type="submit" class="text-xs font-medium text-green-600 hover:underline dark:text-green-400">Setujui</button>
                                    </form>
                                    <button @click="rejectId = {{ $leave->id }}; showRejectModal = true" class="text-xs font-medium text-red-600 hover:underline dark:text-red-400">Tolak</button>
                                </div>
                            @elseif($statusValue === 'approved')
                                <form action="{{ route('admin.student-leaves.cancel-approval', $leave) }}" method="POST" class="inline">
                                    @csrf
                                    @method('PATCH')
                                    <button type="submit" class="text-xs font-medium text-amber-600 hover:underline dark:text-amber-400">Batalkan Setuju</button>
                                </form>
                            @else
                                <span class="text-xs text-gray-400">-</span>
                            @endif
                        </td>
                    </tr>
                @empty
                    <tr><td colspan="10" class="px-4 py-8 text-center text-gray-400">Tidak ada data pengajuan izin siswa.</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="'showRejectModal'" title="Tolak Pengajuan" size="sm">
        <form id="admin-student-reject-form" :action="'{{ url('admin/student-leaves') }}/' + rejectId + '/reject'" method="POST" class="space-y-4">
            @csrf
            @method('PATCH')
            <div>
                <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Catatan Penolakan</label>
                <textarea name="reviewer_notes" rows="3" required minlength="10" 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 penolakan yang spesifik..."></textarea>
            </div>
            <x-slot:footer>
                <button type="button" @click="showRejectModal = 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="admin-student-reject-form" class="px-5 py-2.5 text-sm font-medium text-white bg-red-700 rounded-lg hover:bg-red-800">Tolak</button>
            </x-slot:footer>
        </form>
    </x-modal>
</div>
@endsection