@extends('admin.layout')

@section('title', 'Laporan Alumni')

@section('page-title', 'Laporan Data Alumni')
@section('page-subtitle', 'Daftar Hasil Pengisian Tracer Study')

@section('content')
    <div class="space-y-6">
        @if(session('success'))
            <div class="bg-green-100 border-l-4 border-green-500 text-green-700 p-4 mb-4" role="alert">
                <p class="font-bold">Berhasil</p>
                <p>{{ session('success') }}</p>
            </div>
        @endif
        @if(session('error'))
            <div class="bg-red-100 border-l-4 border-red-500 text-red-700 p-4 mb-4" role="alert">
                <p class="font-bold">Error</p>
                <p>{{ session('error') }}</p>
            </div>
        @endif
        <!-- Filter Section -->
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
            <form method="GET" action="{{ route('alumni.index') }}">
                <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
                    <!-- Date Filter -->
                    <div class="md:col-span-1">
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Dari Tanggal</label>
                        <div class="relative">
                            <input type="text" id="start_date" name="start_date" value="{{ request('start_date') }}" 
                                placeholder="Pilih Tanggal"
                                class="flatpickr w-full px-2 py-1.5 border rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white shadow-sm focus:border-blue-500 focus:ring-blue-500 text-sm transition-all cursor-pointer">
                            <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none text-gray-400">
                                <svg class="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                                </svg>
                            </div>
                        </div>
                    </div>
                    <div class="md:col-span-1">
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Sampai Tanggal</label>
                        <div class="relative">
                            <input type="text" id="end_date" name="end_date" value="{{ request('end_date') }}" 
                                placeholder="Pilih Tanggal"
                                class="flatpickr w-full px-2 py-1.5 border rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white shadow-sm focus:border-blue-500 focus:ring-blue-500 text-sm transition-all cursor-pointer">
                            <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none text-gray-400">
                                <svg class="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                                </svg>
                            </div>
                        </div>
                    </div>
                 <!-- Prodi Filter -->
                    <div class="md:col-span-1">
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Prodi</label>
                        <select name="filterprodi" class="w-full px-2 py-1.5 border rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white shadow-sm focus:border-blue-500 focus:ring-blue-500 text-sm">
                            <option value="">- Semua Prodi -</option>
                            @foreach($prodis as $prodi)
                                 <option value="{{ $prodi->KodeID }}" {{ request('filterprodi') == $prodi->KodeID ? 'selected' : '' }}>
                                    {{ $prodi->KodeID }} - {{ $prodi->Nama }}
                                 </option>
                            @endforeach
                        </select>
                    </div>

                    <!-- Status Filter (Disabled) -->
                   <!--  <div class="md:col-span-1">
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Status Konfirmasi</label>
                         <select name="filterkonfirm" class="w-full px-2 py-1.5 border rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white shadow-sm focus:border-blue-500 focus:ring-blue-500 text-sm">
                            <option value="">- Semua Status -</option>
                            <option value="Y" {{ request('filterkonfirm') == 'Y' ? 'selected' : '' }}>Sudah Dikonfirmasi</option>
                            <option value="N" {{ request('filterkonfirm') == 'N' ? 'selected' : '' }}>Belum Dikonfirmasi</option>
                        </select>
                    </div> -->

                </div> <!-- End Filter Grid -->

                <!-- Controls (Show Entries & Search) -->
                <div class="mt-4 pt-4 border-t border-gray-200 dark:border-gray-700 flex flex-col lg:flex-row justify-between items-start lg:items-end gap-4">

                    <!-- Show Entries -->
                    <div class="flex items-center gap-2">
                        <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Show</span>
                        <select name="batas" onchange="this.form.submit()"
                            class="form-select block w-20 px-2 py-1 border rounded-md text-sm border-gray-300 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-300 focus:border-blue-500 focus:ring-blue-500">
                            <option value="10" {{ request('batas') == 10 ? 'selected' : '' }}>10</option>
                            <option value="25" {{ request('batas') == 25 ? 'selected' : '' }}>25</option>
                            <option value="50" {{ request('batas') == 50 ? 'selected' : '' }}>50</option>
                            <option value="100" {{ request('batas') == 100 ? 'selected' : '' }}>100</option>
                        </select>
                        <span class="text-sm font-medium text-gray-700 dark:text-gray-300">entries</span>
                    </div>

                    <!-- Search & Actions -->
                    <div class="w-full lg:w-auto">
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Pencarian (Nama / NIM)</label>
                        <div class="flex flex-col sm:flex-row gap-2">
                            <input type="text" name="search" value="{{ request('search') }}" placeholder="Cari nama atau NIM..." 
                                class="w-full lg:w-80 px-2 py-1.5 border rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white shadow-sm focus:border-blue-500 focus:ring-blue-500 text-sm">
                            <div class="flex flex-wrap gap-2">
                                <button type="submit" class="flex-1 sm:flex-none inline-flex items-center justify-center py-1.5 px-3 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 whitespace-nowrap">
                                    <svg class="h-4 w-4 mr-1" 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>
                                    Filter
                                </button>
                                <a href="{{ route('alumni.index') }}" class="flex-1 sm:flex-none inline-flex items-center justify-center py-1.5 px-3 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-grey-500 whitespace-nowrap">
                                    Reset
                                </a>

                                <!-- Dropdown for Export -->
                                <div class="relative inline-block text-left flex-1 sm:flex-none" x-data="{ open: false }">
                                    <button type="button" @click="open = !open" class="w-full inline-flex items-center justify-center px-3 py-1.5 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 whitespace-nowrap">
                                        <svg class="h-4 w-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                                        </svg>
                                        Export Excel
                                        <svg class="h-4 w-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                                        </svg>
                                    </button>

                                    <div x-show="open" 
                                        @click.away="open = false" 
                                        x-transition:enter="transition ease-out duration-100" 
                                        x-transition:enter-start="transform opacity-0 scale-95" 
                                        x-transition:enter-end="transform opacity-100 scale-100" 
                                        x-transition:leave="transition ease-in duration-75" 
                                        x-transition:leave-start="transform opacity-100 scale-100" 
                                        x-transition:leave-end="transform opacity-0 scale-95" 
                                        class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white dark:bg-gray-700 ring-1 ring-black ring-opacity-5 z-50 focus:outline-none" 
                                        x-cloak>
                                        <div class="py-1">
                                            <a href="{{ route('alumni.export', request()->query()) }}" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors">
                                                Export Alumni
                                            </a>
                                            <a href="{{ route('alumni.export-univ', request()->query()) }}" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600 border-t border-gray-100 dark:border-gray-600 transition-colors">
                                                Data untuk Universitas
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>


            </form>
        </div>

        <!-- Data View -->
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow overflow-hidden">
            <!-- Desktop Table View -->
            <div class="hidden md:block overflow-x-auto">
                <table class="min-w-full border-collapse border border-gray-300 dark:border-gray-700">
                    <thead class="bg-gray-100 dark:bg-gray-700">
                        <tr>
                            <th class="border border-gray-300 dark:border-gray-600 px-2 py-2 text-left text-xs font-bold text-gray-700 dark:text-gray-300 uppercase tracking-wider">NO</th>
                            <th class="border border-gray-300 dark:border-gray-600 px-2 py-2 text-left text-xs font-bold text-gray-700 dark:text-gray-300 uppercase tracking-wider">NIM</th>
                            <th class="border border-gray-300 dark:border-gray-600 px-2 py-2 text-left text-xs font-bold text-gray-700 dark:text-gray-300 uppercase tracking-wider">NAMA ALUMNI</th>
                            <th class="border border-gray-300 dark:border-gray-600 px-2 py-2 text-left text-xs font-bold text-gray-700 dark:text-gray-300 uppercase tracking-wider text-center">TAHUN LULUS</th>
                            <th class="border border-gray-300 dark:border-gray-600 px-2 py-2 text-left text-xs font-bold text-gray-700 dark:text-gray-300 uppercase tracking-wider">PRODI</th>
                            <th class="border border-gray-300 dark:border-gray-600 px-2 py-2 text-left text-xs font-bold text-gray-700 dark:text-gray-300 uppercase tracking-wider">TELP</th>
                            <th class="border border-gray-300 dark:border-gray-600 px-2 py-2 text-left text-xs font-bold text-gray-700 dark:text-gray-300 uppercase tracking-wider">EMAIL</th>
                            @if(session('admin_user')->IDLevel == 3)
                            <th class="border border-gray-300 dark:border-gray-600 px-2 py-2 text-center text-xs font-bold text-gray-700 dark:text-gray-300 uppercase tracking-wider">NO WA (HUBUNGI)</th>
                            <th class="border border-gray-300 dark:border-gray-600 px-2 py-2 text-center text-xs font-bold text-gray-700 dark:text-gray-300 uppercase tracking-wider">STATUS TRACER</th>
                            @endif
                            <th class="border border-gray-300 dark:border-gray-600 px-2 py-2 text-center text-xs font-bold text-gray-700 dark:text-gray-300 uppercase tracking-wider">TANGGAL INPUT</th>
                            <th class="border border-gray-300 dark:border-gray-600 px-2 py-2 text-center text-xs font-bold text-gray-700 dark:text-gray-300 uppercase tracking-wider">STATUS KONFIRMASI</th>
                            <th class="border border-gray-300 dark:border-gray-600 px-2 py-2 text-center text-xs font-bold text-gray-700 dark:text-gray-300 uppercase tracking-wider">SURVEYOR</th>
                            @if(session('admin_user')->IDLevel != 3)
                            <th class="border border-gray-300 dark:border-gray-600 px-2 py-2 text-center text-xs font-bold text-gray-700 dark:text-gray-300 uppercase tracking-wider">DETAIL</th>
                            @endif
                        </tr>
                    </thead>
                    <tbody class="bg-white dark:bg-gray-800">
                        @forelse($alumnis as $index => $alumni)
                            <tr class="hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors">
                                <td class="border border-gray-300 dark:border-gray-700 px-2 py-2 text-xs text-gray-600 dark:text-gray-400 text-center">
                                    {{ $alumnis->firstItem() + $index }}
                                </td>
                                <td class="border border-gray-300 dark:border-gray-700 px-2 py-2 text-xs text-gray-900 dark:text-white">
                                    {{ $alumni->NoMhsw }}
                                </td>
                                <td class="border border-gray-300 dark:border-gray-700 px-2 py-2 text-xs text-gray-900 dark:text-white break-words max-w-[150px]">
                                    {{ $alumni->Nama }}
                                </td>
                                <td class="border border-gray-300 dark:border-gray-700 px-2 py-2 text-xs text-gray-600 dark:text-gray-400 text-center">
                                    {{ $alumni->TahunLulus }}
                                </td>
                                <td class="border border-gray-300 dark:border-gray-700 px-2 py-2 text-xs text-gray-600 dark:text-gray-400">
                                    {{ $alumni->prodi_name }}
                                </td>
                                <td class="border border-gray-300 dark:border-gray-700 px-2 py-2 text-xs text-gray-600 dark:text-gray-400">
                                    {{ $alumni->Telp ?? '-' }}
                                </td>
                                <td class="border border-gray-300 dark:border-gray-700 px-2 py-2 text-[11px] text-gray-600 dark:text-gray-400 break-words min-w-[150px]">
                                    {{ $alumni->Email ?? '-' }}
                                </td>
                                @if(session('admin_user')->IDLevel == 3)
                                <td class="border border-gray-300 dark:border-gray-700 px-2 py-2 text-xs text-center whitespace-nowrap">
                                    @if($alumni->Telp)
                                        @php
                                            $wa_phone = preg_replace('/[^0-9]/', '', $alumni->Telp);
                                            if (str_starts_with($wa_phone, '0')) {
                                                $wa_phone = '62' . substr($wa_phone, 1);
                                            } elseif (str_starts_with($wa_phone, '8')) {
                                                $wa_phone = '62' . $wa_phone;
                                            }
                                        @endphp
                                        <a href="https://wa.me/{{ $wa_phone }}" target="_blank" 
                                           class="inline-flex items-center px-2 py-1 bg-green-500 text-white rounded text-[10px] font-bold hover:bg-green-600 transition-colors">
                                            <svg class="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 24 24">
                                                <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/>
                                            </svg>
                                            Hubungi
                                        </a>
                                    @else
                                        -
                                    @endif
                                </td>
                                <td class="border border-gray-300 dark:border-gray-700 px-2 py-2 text-xs text-center whitespace-nowrap">
                                    @if($alumni->f8)
                                        <span class="inline-flex px-2 py-0.5 bg-green-100 text-green-800 rounded-full text-[10px] font-bold">Sudah Mengisi</span>
                                    @else
                                        <span class="inline-flex px-2 py-0.5 bg-red-100 text-red-800 rounded-full text-[10px] font-bold">Belum Mengisi</span>
                                    @endif
                                </td>
                                @endif
                                <td class="border border-gray-300 dark:border-gray-700 px-2 py-2 text-xs text-gray-600 dark:text-gray-400 text-center whitespace-nowrap">
                                    {{ $alumni->TanggalBuat ? \Carbon\Carbon::parse($alumni->TanggalBuat)->format('d/m/Y H:i') : '-' }}
                                </td>
                                <td class="border border-gray-300 dark:border-gray-700 px-2 py-2 text-xs text-center whitespace-nowrap">
                                    @if($alumni->StatusKonfirmasi == 'Y')
                                        <span class="inline-flex px-2 py-0.5 bg-green-100 text-green-800 rounded-full text-[10px] font-bold">Dikonfirmasi</span>
                                    @else
                                        <span class="inline-flex px-2 py-0.5 bg-yellow-100 text-yellow-800 rounded-full text-[10px] font-bold">Belum Konf.</span>
                                    @endif
                                </td>
                                <td class="border border-gray-300 dark:border-gray-700 px-2 py-2 text-xs text-gray-600 dark:text-gray-400 text-center">
                                    {{ $alumni->surveyor_name ?? '-' }}
                                </td>
                                @if(session('admin_user')->IDLevel != 3)
                                <td class="border border-gray-300 dark:border-gray-700 px-2 py-1 text-center min-w-[80px]">
                                    <div class="flex flex-col gap-1">
                                        <a href="{{ route('alumni.show', $alumni->IDValueAlumni) }}" 
                                           class="inline-flex items-center justify-center px-2 py-1 text-[10px] font-bold text-white bg-blue-500 rounded hover:bg-blue-600 transition-colors">
                                            Detail
                                        </a>
                                        <a href="{{ route('alumni.edit', $alumni->IDValueAlumni) }}" 
                                           class="inline-flex items-center justify-center px-2 py-1 text-[10px] font-bold text-white bg-gray-500 rounded hover:bg-gray-600 transition-colors">
                                            Edit
                                        </a>
                                        <button type="button" onclick="confirmDelete('delete-form-{{ $alumni->IDValueAlumni }}', '{{ addslashes($alumni->Nama) }}')"
                                           class="inline-flex items-center justify-center px-2 py-1 text-[10px] font-bold text-white bg-red-500 rounded hover:bg-red-600 transition-colors">
                                            Hapus
                                        </button>
                                        <form id="delete-form-{{ $alumni->IDValueAlumni }}" action="{{ route('alumni.destroy', $alumni->IDValueAlumni) }}" method="POST" class="hidden">
                                            @csrf
                                            @method('DELETE')
                                        </form>
                                    </div>
                                </td>
                                @endif
                            </tr>
                        @empty
                            <tr>
                                <td colspan="{{ session('admin_user')->IDLevel == 3 ? 12 : 11 }}" class="border border-gray-300 dark:border-gray-700 px-6 py-10 text-center text-sm text-gray-500 dark:text-gray-400">
                                    <div class="flex flex-col items-center justify-center">
                                        <svg class="w-12 h-12 text-gray-300 mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"></path>
                                        </svg>
                                        <span>Tidak ada data ditemukan</span>
                                    </div>
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            <!-- Mobile Card View -->
            <div class="md:hidden divide-y divide-gray-200 dark:divide-gray-700">
                @forelse($alumnis as $index => $alumni)
                    <div class="p-4 space-y-3">
                        <div class="flex justify-between items-start">
                            <div class="space-y-1">
                                <div class="text-xs font-bold text-blue-600 dark:text-blue-400">#{{ $alumnis->firstItem() + $index }} - {{ $alumni->NoMhsw }}</div>
                                <div class="text-sm font-bold text-gray-900 dark:text-white">{{ $alumni->Nama }}</div>
                                <div class="text-xs text-gray-500 dark:text-gray-400">{{ $alumni->prodi_name }}</div>
                            </div>
                            <div class="text-right">
                                <span class="inline-flex px-2 py-0.5 text-[10px] font-bold rounded-full {{ $alumni->f8 ? 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200' : 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300' }}">
                                    {{ $alumni->f8 ? 'Terkonfirmasi' : 'Belum Konf.' }}
                                </span>
                            </div>
                        </div>

                        <div class="grid grid-cols-2 gap-2 text-xs">
                            <div class="space-y-1">
                                <p class="text-gray-500 dark:text-gray-400">Tahun Lulus</p>
                                <p class="font-medium text-gray-900 dark:text-white">{{ $alumni->TahunLulus }}</p>
                            </div>
                            <div class="space-y-1 text-right">
                                <p class="text-gray-500 dark:text-gray-400">Telp</p>
                                <p class="font-medium text-gray-900 dark:text-white">{{ $alumni->Telp ?? '-' }}</p>
                            </div>
                            <div class="col-span-2 space-y-1">
                                <p class="text-gray-500 dark:text-gray-400">Email</p>
                                <p class="font-medium text-gray-900 dark:text-white truncate">{{ $alumni->Email ?? '-' }}</p>
                            </div>
                            @if(session('admin_user')->IDLevel == 3)
                            <div class="space-y-1">
                                <p class="text-gray-500 dark:text-gray-400">Status Tracer</p>
                                @if($alumni->f8)
                                    <span class="inline-flex px-2 py-0.5 bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300 rounded-full text-[10px] font-bold">Sudah</span>
                                @else
                                    <span class="inline-flex px-2 py-0.5 bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300 rounded-full text-[10px] font-bold">Belum</span>
                                @endif
                            </div>
                            <div class="space-y-1 text-right">
                                <p class="text-gray-500 dark:text-gray-400">WhatsApp</p>
                                @if($alumni->Telp)
                                    @php
                                        $wa_phone_mob = preg_replace('/[^0-9]/', '', $alumni->Telp);
                                        if (str_starts_with($wa_phone_mob, '0')) { $wa_phone_mob = '62' . substr($wa_phone_mob, 1); }
                                        elseif (str_starts_with($wa_phone_mob, '8')) { $wa_phone_mob = '62' . $wa_phone_mob; }
                                    @endphp
                                    <a href="https://wa.me/{{ $wa_phone_mob }}" target="_blank" class="text-green-600 dark:text-green-400 font-bold flex items-center justify-end">
                                        Hubungi
                                        <svg class="w-3 h-3 ml-1" fill="currentColor" viewBox="0 0 24 24"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/></svg>
                                    </a>
                                @else
                                    -
                                @endif
                            </div>
                            @endif
                        </div>

                        @if(session('admin_user')->IDLevel != 3)
                        <div class="pt-2 flex gap-2">
                            <a href="{{ route('alumni.show', $alumni->IDValueAlumni) }}" 
                               class="flex-1 inline-flex items-center justify-center px-3 py-2 text-xs font-bold text-white bg-blue-500 rounded-lg hover:bg-blue-600 transition-colors shadow-sm">
                                <svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                </svg>
                                Detail
                            </a>
                            <a href="{{ route('alumni.edit', $alumni->IDValueAlumni) }}" 
                               class="flex-1 inline-flex items-center justify-center px-3 py-2 text-xs font-bold text-white bg-gray-500 rounded-lg hover:bg-gray-600 transition-colors shadow-sm">
                                <svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
                                </svg>
                                Edit
                            </a>
                            <button type="button" onclick="confirmDelete('delete-form-{{ $alumni->IDValueAlumni }}', '{{ addslashes($alumni->Nama) }}')"
                               class="flex-1 inline-flex items-center justify-center px-3 py-2 text-xs font-bold text-white bg-red-500 rounded-lg hover:bg-red-600 transition-colors shadow-sm">
                                <svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
                                </svg>
                                Hapus
                            </button>
                        </div>
                        @endif
                    </div>
                @empty
                    <div class="p-8 text-center text-sm text-gray-500 dark:text-gray-400">
                        <svg class="w-12 h-12 mx-auto text-gray-300 mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"></path>
                        </svg>
                        <span>Tidak ada data ditemukan</span>
                    </div>
                @endforelse
            </div>

            <!-- Pagination Info and Controls -->
            <div class="px-6 py-4 border-t border-gray-200 dark:border-gray-700">
                <div class="flex flex-col sm:flex-row justify-between items-center gap-4">
                    <!-- Showing X to Y of Z entries -->
                    <div class="text-sm text-gray-700 dark:text-gray-300">
                        Showing {{ $alumnis->firstItem() ?? 0 }} to {{ $alumnis->lastItem() ?? 0 }} of {{ $alumnis->total() }} entries
                    </div>

                    <!-- Pagination Links -->
                    <div>
                        {{ $alumnis->appends(request()->query())->links() }}
                    </div>
                </div>
            </div>
        </div>
    </div>
@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Flatpickr Initialization
            const commonConfig = {
                locale: 'id',
                dateFormat: "Y-m-d",
                altInput: true,
                altFormat: "d F Y",
                allowInput: true,
                disableMobile: "true",
                animate: false,
                altInputClass: "flatpickr w-full px-3 py-1.5 border rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white shadow-sm focus:border-blue-500 focus:ring-blue-500 text-sm transition-all cursor-pointer"
            };

            flatpickr("#start_date", commonConfig);
            flatpickr("#end_date", commonConfig);
        });


    </script>
@endpush

@push('styles')
    <style>
        .flatpickr-innerContainer {
            padding-left: 0 !important;
        }
        
        .flatpickr-calendar {
            width: 315px !important;
        }
        
        .flatpickr-days {
            width: 315px !important;
        }
    </style>
@endpush
@endsection