@extends('admin.layout')

@section('title', 'Detail Surveyor - ' . $surveyor->Nama)

@section('page-title', 'Detail Surveyor: ' . $surveyor->Nama)
@section('page-subtitle', 'Daftar alumni yang disurvey oleh ' . $surveyor->Nama)

@section('content')
    <div class="space-y-6">
        <!-- Back Button & Surveyor Info -->
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
            <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
                <div class="flex items-center gap-4 w-full sm:w-auto">
                    <a href="{{ route('laporan.surveyor.index') }}"
                       class="inline-flex items-center justify-center w-10 h-10 rounded-lg bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors shrink-0">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path>
                        </svg>
                    </a>
                    <div class="min-w-0">
                        <h3 class="text-lg font-bold text-gray-900 dark:text-white truncate">{{ $surveyor->Nama }}</h3>
                        <p class="text-sm text-gray-500 dark:text-gray-400 break-words line-clamp-1 sm:line-clamp-none">
                            {{ $surveyor->Username }} <span class="hidden sm:inline">&middot;</span> <br class="sm:hidden">
                            {{ $surveyor->Email ?? '-' }} <span class="hidden sm:inline">&middot;</span> <br class="sm:hidden">
                            {{ $surveyor->Telp ?? '-' }}
                        </p>
                    </div>
                </div>
                <div class="flex gap-3 w-full sm:w-auto">
                    <div class="bg-blue-50 dark:bg-blue-900/20 rounded-lg px-4 py-2 text-center flex-1 sm:flex-initial">
                        <p class="text-xs text-blue-600 dark:text-blue-400 font-medium whitespace-nowrap">Total Survey</p>
                        <p class="text-xl font-bold text-blue-700 dark:text-blue-300">{{ $totalAlumni }}</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Filter Section -->
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
            <form method="GET" action="{{ route('laporan.surveyor.show', $surveyor->IDUser) }}">
                <div class="flex flex-col lg:flex-row justify-between items-stretch lg:items-end gap-6">
                    <!-- Left: Show Entries & Filters -->
                    <div class="flex flex-col md:flex-row items-stretch md:items-end gap-4 flex-1">
                        <!-- Show Entries -->
                        <div class="flex flex-col gap-1">
                            <label class="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider ml-1">Show</label>
                            <div class="flex items-center gap-2">
                                <select name="batas" onchange="this.form.submit()"
                                    class="form-select border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white block w-20 px-2 py-1.5 text-sm rounded-md 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>
                        </div>

                        <div class="flex flex-col gap-1 flex-1 md:flex-initial relative">
                            <label class="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider ml-1">Tahun Lulus</label>
                            <div class="relative h-[38px]">
                                <select name="tahun_lulus" onchange="this.form.submit()"
                                    onmousedown="if(this.options.length>5){this.size=5;}" onchange="this.size=0;" onblur="this.size=0;"
                                    class="w-full md:w-40 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 duration-200">
                                    <option value="">- Tahun Lulus -</option>
                                    @foreach($tahun_lulus_list as $tahun)
                                        <option value="{{ $tahun }}" {{ request('tahun_lulus') == $tahun ? 'selected' : '' }}>
                                            {{ $tahun }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <div class="flex flex-col gap-1 flex-1 md:flex-initial relative">
                            <label class="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider ml-1">Prodi</label>
                            <div class="relative h-[38px]">
                                <select name="filterprodi" onchange="this.form.submit()"
                                    onmousedown="if(this.options.length>5){this.size=5;}" onchange="this.size=0;" onblur="this.size=0;"
                                    class="w-full md:w-64 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 duration-200">
                                    <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>
                        </div>
                    </div>

                    <!-- Right: Search & Action Buttons -->
                    <div class="flex flex-col md:flex-row items-stretch md:items-end gap-2 shrink-0">
                        <div class="flex flex-col gap-1 flex-1 md:flex-initial">
                            <label class="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider ml-1">Pencarian</label>
                            <input type="text" name="search" value="{{ request('search') }}"
                                placeholder="Cari nama atau NIM..."
                                class="w-full md:w-64 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>
                        <div class="flex gap-2">
                            <button type="submit"
                                class="flex-1 md:flex-initial inline-flex justify-center items-center py-2 px-4 border border-transparent shadow-sm text-sm font-bold 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 transition-colors">
                                <svg class="h-4 w-4 mr-1.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>
                                Filter
                            </button>
                            <a href="{{ route('laporan.surveyor.show', $surveyor->IDUser) }}"
                                class="flex-1 md:flex-initial inline-flex justify-center items-center py-2 px-4 border border-gray-300 shadow-sm text-sm font-bold 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-gray-500 transition-colors">
                                Reset
                            </a>
                        </div>
                    </div>
                </div>
            </form>
        </div>

        <!-- Table -->
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow overflow-hidden">
            <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-center text-xs font-bold text-gray-700 dark:text-gray-300 uppercase tracking-wider">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>
                            <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">AKSI</th>
                        </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-all max-w-[120px]">
                                    {{ $alumni->Email ?? '-' }}
                                </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 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-1 text-center">
                                    <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>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="9" class="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-4">
                        <!-- Card Header: # & NIM -->
                        <div class="flex justify-between items-start">
                            <div class="space-y-1 min-w-0">
                                <div class="text-xs font-bold text-blue-600 dark:text-blue-400">
                                    #{{ $alumnis->firstItem() + $index }} &middot; {{ $alumni->NoMhsw }}
                                </div>
                                <div class="text-sm font-bold text-gray-900 dark:text-white truncate">
                                    {{ $alumni->Nama }}
                                </div>
                                <div class="text-xs text-gray-500 dark:text-gray-400 line-clamp-1">
                                    {{ $alumni->prodi_name }}
                                </div>
                            </div>
                            <div class="shrink-0">
                                <span class="bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 px-2 py-0.5 rounded text-[10px] font-bold">
                                    {{ $alumni->TahunLulus }}
                                </span>
                            </div>
                        </div>

                        <!-- Card Body: Contact & Metadata -->
                        <div class="grid grid-cols-2 gap-y-3 gap-x-4 border-t border-gray-50 dark:border-gray-700/50 pt-3">
                            <div class="space-y-1">
                                <p class="text-[10px] uppercase tracking-wider font-bold text-gray-400">Telepon</p>
                                <p class="text-xs font-medium text-gray-900 dark:text-white">{{ $alumni->Telp ?? '-' }}</p>
                            </div>
                            <div class="space-y-1">
                                <p class="text-[10px] uppercase tracking-wider font-bold text-gray-400">Tgl Input</p>
                                <p class="text-xs font-medium text-gray-900 dark:text-white">
                                    {{ $alumni->TanggalBuat ? \Carbon\Carbon::parse($alumni->TanggalBuat)->format('d/m/Y') : '-' }}
                                </p>
                            </div>
                            <div class="col-span-2 space-y-1">
                                <p class="text-[10px] uppercase tracking-wider font-bold text-gray-400">Email</p>
                                <p class="text-xs font-medium text-gray-900 dark:text-white truncate">{{ $alumni->Email ?? '-' }}</p>
                            </div>
                        </div>

                        <!-- Card Footer: Action -->
                        <div class="pt-2">
                             <a href="{{ route('alumni.show', $alumni->IDValueAlumni) }}"
                                class="w-full inline-flex items-center justify-center px-4 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.5 h-3.5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
                                </svg>
                                Lihat Detail Kuesioner
                            </a>
                        </div>
                    </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 -->
            <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">
                    <div class="text-sm text-gray-700 dark:text-gray-300">
                        Showing {{ $alumnis->firstItem() ?? 0 }} to {{ $alumnis->lastItem() ?? 0 }} of {{ $alumnis->total() }} entries
                    </div>
                    <div>
                        {{ $alumnis->appends(request()->query())->links() }}
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('styles')
    <style>
        /* Dropdown Scroll Styling */
        select[size]:not([size="0"]):not([size="1"]) {
            position: absolute;
            z-index: 50;
            height: auto !important;
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
        }
        
        .dark select[size]:not([size="0"]):not([size="1"]) {
            background-color: #374151 !important; /* gray-700 */
        }
    </style>
@endpush