<div>
    <!-- Header & Breadcrumb -->
    <div class="mb-6 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
        <div>
            <!-- Breadcrumb -->
            <nav class="flex text-xs text-slate-400 mb-1" aria-label="Breadcrumb">
                <ol class="inline-flex items-center space-x-1 md:space-x-2">
                    <li class="inline-flex items-center">
                        <a href="{{ route('dashboard') }}" class="text-slate-400 hover:text-white">Home</a>
                    </li>
                    <li>
                        <div class="flex items-center">
                            <svg class="w-4 h-4 text-slate-600" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
                            <span class="ml-1 text-slate-300 font-medium">Pengajuan Izin & Sakit</span>
                        </div>
                    </li>
                </ol>
            </nav>
            <h1 class="text-2xl font-bold text-white tracking-tight">Approval Workflow Surat Izin / Sakit</h1>
        </div>

        <!-- Action Button -->
        @can('create', App\Models\LeaveApplication::class)
        <div>
            <button wire:click="create" 
                class="px-4 py-2.5 rounded-xl bg-sky-600 hover:bg-sky-500 text-white font-semibold text-xs shadow-lg shadow-sky-600/20 transition-all flex items-center gap-2">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path></svg>
                <span>Ajukan Surat Izin / Sakit</span>
            </button>
        </div>
        @endcan
    </div>

    <!-- Filter & Search Bar -->
    <div class="bg-slate-900 border border-slate-800 rounded-2xl p-4 mb-6 flex flex-col md:flex-row items-center justify-between gap-4">
        <div class="w-full md:w-1/3 relative">
            <input wire:model.live.debounce.300ms="search" type="text" 
                class="w-full pl-10 pr-4 py-2 rounded-xl bg-slate-950 border border-slate-800 text-white text-xs placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-sky-500" 
                placeholder="Cari nama personil atau NIP/NIS...">
            <svg class="w-4 h-4 text-slate-500 absolute left-3 top-2.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
        </div>

        <div class="w-full md:w-auto flex items-center gap-3">
            <select wire:model.live="statusFilter" class="px-3 py-2 rounded-xl bg-slate-950 border border-slate-800 text-white text-xs focus:outline-none focus:ring-2 focus:ring-sky-500">
                <option value="">Semua Status Approval</option>
                <option value="pending">Perlu Persetujuan (Pending)</option>
                <option value="approved">Disetujui (Approved)</option>
                <option value="rejected">Ditolak (Rejected)</option>
            </select>

            <select wire:model.live="typeFilter" class="px-3 py-2 rounded-xl bg-slate-950 border border-slate-800 text-white text-xs focus:outline-none focus:ring-2 focus:ring-sky-500">
                <option value="">Semua Jenis</option>
                <option value="izin">Izin Resmi</option>
                <option value="sakit">Sakit</option>
            </select>
        </div>
    </div>

    <!-- Loading State -->
    <div wire:loading class="w-full mb-4 p-3 rounded-xl bg-sky-950/40 border border-sky-800/40 text-sky-400 text-xs flex items-center justify-center gap-2">
        <svg class="animate-spin h-4 w-4 text-sky-400" 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>
        <span>Memuat data pengajuan izin...</span>
    </div>

    <!-- Table -->
    <div class="bg-slate-900 border border-slate-800 rounded-2xl overflow-hidden shadow-sm mb-6">
        <div class="overflow-x-auto">
            <table class="w-full text-left text-xs">
                <thead class="bg-slate-950/80 text-slate-400 uppercase tracking-wider font-semibold border-b border-slate-800">
                    <tr>
                        <th class="px-6 py-4">Personil</th>
                        <th class="px-6 py-4">Jenis Pengajuan</th>
                        <th class="px-6 py-4">Rentang Tanggal</th>
                        <th class="px-6 py-4">Alasan</th>
                        <th class="px-6 py-4">Surat Bukti</th>
                        <th class="px-6 py-4">Status Approval</th>
                        <th class="px-6 py-4 text-right">Aksi Detail</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-800/60 text-slate-300">
                    @forelse($applications as $app)
                        <tr class="hover:bg-slate-800/40 transition-colors">
                            <td class="px-6 py-4 font-semibold text-white">
                                <p>{{ $app->user?->name ?? 'User #' . $app->user_id }}</p>
                                <p class="text-[10px] text-slate-400 font-mono">{{ $app->user?->nip_nis ?? '-' }}</p>
                            </td>
                            <td class="px-6 py-4">
                                <span class="px-2.5 py-1 rounded-full text-[10px] font-bold uppercase tracking-wider {{ $app->type == 'sakit' ? 'bg-indigo-500/10 text-indigo-400 border border-indigo-500/20' : 'bg-sky-500/10 text-sky-400 border border-sky-500/20' }}">
                                    {{ strtoupper($app->type) }}
                                </span>
                            </td>
                            <td class="px-6 py-4 font-mono text-slate-300">
                                {{ $app->start_date->format('d/m/Y') }} - {{ $app->end_date->format('d/m/Y') }}
                            </td>
                            <td class="px-6 py-4 max-w-xs truncate text-slate-400">
                                {{ $app->reason }}
                            </td>
                            <td class="px-6 py-4">
                                @if($app->attachment_path)
                                    <a href="{{ asset('storage/' . $app->attachment_path) }}" target="_blank" class="text-sky-400 hover:underline font-semibold flex items-center gap-1">
                                        <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13"></path></svg>
                                        <span>Lihat Lampiran</span>
                                    </a>
                                @else
                                    <span class="text-slate-500 text-[10px]">Tanpa File</span>
                                @endif
                            </td>
                            <td class="px-6 py-4">
                                @if($app->status == 'approved')
                                    <span class="px-2.5 py-1 rounded-full text-[10px] font-bold uppercase tracking-wider bg-emerald-500/10 text-emerald-400 border border-emerald-500/20">Disetujui</span>
                                @elseif($app->status == 'rejected')
                                    <span class="px-2.5 py-1 rounded-full text-[10px] font-bold uppercase tracking-wider bg-rose-500/10 text-rose-400 border border-rose-500/20">Ditolak</span>
                                @else
                                    <span class="px-2.5 py-1 rounded-full text-[10px] font-bold uppercase tracking-wider bg-amber-500/10 text-amber-400 border border-amber-500/20">Pending</span>
                                @endif
                            </td>
                            <td class="px-6 py-4 text-right">
                                <button wire:click="openApprovalModal({{ $app->id }})" 
                                    class="px-3 py-1.5 rounded-xl bg-slate-800 hover:bg-slate-700 text-sky-400 font-semibold text-xs border border-slate-700/50 transition-colors">
                                    Detail & Approval
                                </button>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="7" class="px-6 py-8 text-center text-slate-500">
                                Belum ada pengajuan izin atau sakit.
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        <div class="p-4 border-t border-slate-800">
            {{ $applications->links() }}
        </div>
    </div>

    <!-- Modal Form Submit Pengajuan -->
    @if($showCreateModal)
    <div class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/70 backdrop-blur-sm">
        <div class="bg-slate-900 border border-slate-800 rounded-2xl max-w-md w-full p-6 shadow-2xl">
            <h3 class="text-lg font-bold text-white mb-4">Pengajuan Izin / Sakit Baru</h3>
            <form wire:submit="save" class="space-y-4">
                @if(auth()->user()->isSuperAdmin() || auth()->user()->isAdminTU())
                <div>
                    <label class="block text-xs font-semibold text-slate-300 uppercase mb-1">Pilih Personil</label>
                    <select wire:model="target_user_id" class="w-full px-3 py-2 rounded-xl bg-slate-950 border border-slate-800 text-white text-xs">
                        @foreach($users as $u)
                            <option value="{{ $u->id }}">{{ $u->name }} ({{ $u->nip_nis ?? $u->role?->label }})</option>
                        @endforeach
                    </select>
                </div>
                @endif

                <div>
                    <label class="block text-xs font-semibold text-slate-300 uppercase mb-1">Jenis Pengajuan</label>
                    <select wire:model="type" class="w-full px-3 py-2 rounded-xl bg-slate-950 border border-slate-800 text-white text-xs">
                        <option value="izin">Izin Resmi / Dinas</option>
                        <option value="sakit">Sakit</option>
                    </select>
                </div>

                <div class="grid grid-cols-2 gap-3">
                    <div>
                        <label class="block text-xs font-semibold text-slate-300 uppercase mb-1">Tanggal Mulai</label>
                        <input wire:model="start_date" type="date" class="w-full px-3 py-2 rounded-xl bg-slate-950 border border-slate-800 text-white text-xs font-mono">
                        @error('start_date') <p class="text-xs text-rose-400 mt-1">{{ $message }}</p> @enderror
                    </div>
                    <div>
                        <label class="block text-xs font-semibold text-slate-300 uppercase mb-1">Tanggal Selesai</label>
                        <input wire:model="end_date" type="date" class="w-full px-3 py-2 rounded-xl bg-slate-950 border border-slate-800 text-white text-xs font-mono">
                        @error('end_date') <p class="text-xs text-rose-400 mt-1">{{ $message }}</p> @enderror
                    </div>
                </div>

                <div>
                    <label class="block text-xs font-semibold text-slate-300 uppercase mb-1">Alasan Pengajuan</label>
                    <textarea wire:model="reason" rows="3" class="w-full px-3 py-2 rounded-xl bg-slate-950 border border-slate-800 text-white text-xs" placeholder="Jelaskan alasan izin / sakit..."></textarea>
                    @error('reason') <p class="text-xs text-rose-400 mt-1">{{ $message }}</p> @enderror
                </div>

                <div>
                    <label class="block text-xs font-semibold text-slate-300 uppercase mb-1">Lampirkan Surat Bukti (.jpg/.pdf)</label>
                    <input wire:model="attachment" type="file" class="w-full text-xs text-slate-400 file:mr-3 file:py-2 file:px-4 file:rounded-xl file:border-0 file:text-xs file:font-semibold file:bg-slate-800 file:text-sky-400 hover:file:bg-slate-700">
                    @error('attachment') <p class="text-xs text-rose-400 mt-1">{{ $message }}</p> @enderror
                </div>

                <div class="flex items-center justify-end gap-3 pt-4 border-t border-slate-800">
                    <button type="button" wire:click="closeModal" class="px-4 py-2 rounded-xl bg-slate-800 text-slate-300 text-xs font-semibold hover:bg-slate-700">Batal</button>
                    <button type="submit" class="px-4 py-2 rounded-xl bg-sky-600 text-white text-xs font-semibold hover:bg-sky-500 shadow-lg shadow-sky-600/20">Kirim Pengajuan</button>
                </div>
            </form>
        </div>
    </div>
    @endif

    <!-- Modal Detail & Approval/Rejection -->
    @if($showApprovalModal && $selectedLeave)
    <div class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/70 backdrop-blur-sm">
        <div class="bg-slate-900 border border-slate-800 rounded-2xl max-w-lg w-full p-6 shadow-2xl">
            <h3 class="text-base font-bold text-white mb-4 pb-2 border-b border-slate-800">
                Detail & Approval Pengajuan #{{ $selectedLeave->id }}
            </h3>

            <div class="space-y-3 text-xs text-slate-300 mb-6 bg-slate-950 p-4 rounded-xl border border-slate-800">
                <div class="flex justify-between">
                    <span class="text-slate-400">Pengaju:</span>
                    <span class="font-bold text-white">{{ $selectedLeave->user?->name }} ({{ $selectedLeave->user?->nip_nis ?? '-' }})</span>
                </div>
                <div class="flex justify-between">
                    <span class="text-slate-400">Jenis & Rentang:</span>
                    <span class="font-mono text-sky-400">{{ strtoupper($selectedLeave->type) }} ({{ $selectedLeave->start_date->format('d/m/Y') }} - {{ $selectedLeave->end_date->format('d/m/Y') }})</span>
                </div>
                <div>
                    <span class="text-slate-400 block mb-1">Alasan Pengajuan:</span>
                    <p class="text-white italic bg-slate-900 p-2.5 rounded-lg border border-slate-800">{{ $selectedLeave->reason }}</p>
                </div>
                @if($selectedLeave->attachment_path)
                <div>
                    <span class="text-slate-400 block mb-1">Surat Bukti:</span>
                    <a href="{{ asset('storage/' . $selectedLeave->attachment_path) }}" target="_blank" class="text-sky-400 underline font-semibold flex items-center gap-1">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13"></path></svg>
                        Buka Surat Lampiran Fisik
                    </a>
                </div>
                @endif
            </div>

            <!-- Catatan Approval / Reason Form -->
            @can('approve', $selectedLeave)
            @if($selectedLeave->status == 'pending')
            <div class="space-y-4 mb-6">
                <div>
                    <label class="block text-xs font-semibold text-slate-300 uppercase mb-1">Catatan Persetujuan (Opsional)</label>
                    <input wire:model="approval_notes" type="text" class="w-full px-3 py-2 rounded-xl bg-slate-950 border border-slate-800 text-white text-xs" placeholder="Misal: Disetujui sesuai surat tugas">
                </div>

                <div>
                    <label class="block text-xs font-semibold text-slate-300 uppercase mb-1">Alasan Penolakan (Jika Menolak)</label>
                    <input wire:model="rejection_reason" type="text" class="w-full px-3 py-2 rounded-xl bg-slate-950 border border-slate-800 text-white text-xs" placeholder="Alasan jika pengajuan ditolak...">
                    @error('rejection_reason') <p class="text-xs text-rose-400 mt-1">{{ $message }}</p> @enderror
                </div>
            </div>
            @endif
            @endcan

            <!-- Actions Buttons -->
            <div class="flex items-center justify-end gap-3 pt-4 border-t border-slate-800">
                <button type="button" wire:click="closeModal" class="px-4 py-2 rounded-xl bg-slate-800 text-slate-300 text-xs font-semibold hover:bg-slate-700">Tutup</button>
                
                @can('approve', $selectedLeave)
                @if($selectedLeave->status == 'pending')
                <button type="button" wire:click="reject" class="px-4 py-2 rounded-xl bg-rose-600 text-white text-xs font-semibold hover:bg-rose-500 shadow-lg shadow-rose-600/20">Tolak</button>
                <button type="button" wire:click="approve" class="px-4 py-2 rounded-xl bg-emerald-600 text-white text-xs font-semibold hover:bg-emerald-500 shadow-lg shadow-emerald-600/20">Setujui Pengajuan</button>
                @endif
                @endcan
            </div>
        </div>
    </div>
    @endif
</div>
