@extends('admin.layout')

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

@section('page-title', 'Laporan Data Surveyor')
@section('page-subtitle', 'Ringkasan Kinerja Surveyor 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

        <!-- Summary Cards -->
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
            <!-- Total Surveyor -->
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-5">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Total Surveyor</p>
                        <p class="mt-1 text-2xl font-bold text-gray-900 dark:text-white">{{ number_format($totalSurveyors) }}</p>
                    </div>
                    <div class="bg-blue-100 dark:bg-blue-900/30 p-3 rounded-full">
                        <svg class="w-6 h-6 text-blue-600 dark:text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path>
                        </svg>
                    </div>
                </div>
            </div>

            <!-- Total Data Disurvey -->
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-5">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Total Data Disurvey</p>
                        <p class="mt-1 text-2xl font-bold text-gray-900 dark:text-white">{{ number_format($totalSurveyed) }}</p>
                    </div>
                    <div class="bg-green-100 dark:bg-green-900/30 p-3 rounded-full">
                        <svg class="w-6 h-6 text-green-600 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 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>
                    </div>
                </div>
            </div>

            <!-- Total Dikonfirmasi -->
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-5">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Total Dikonfirmasi</p>
                        <p class="mt-1 text-2xl font-bold text-gray-900 dark:text-white">{{ number_format($totalConfirmed) }}</p>
                    </div>
                    <div class="bg-purple-100 dark:bg-purple-900/30 p-3 rounded-full">
                        <svg class="w-6 h-6 text-purple-600 dark:text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                        </svg>
                    </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.index') }}">
                <div class="grid grid-cols-1 md:grid-cols-4 gap-4 items-end">
                    <!-- Tahun Lulus Filter -->
                    <div class="md:col-span-1 relative h-[62px]">
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Pilih Tahun Lulus</label>
                        <select name="tahun_lulus"
                            onmousedown="if(this.options.length>5){this.size=5;}" onchange="this.size=0;" onblur="this.size=0;"
                            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 transition-all duration-200">
                            <option value="">- Semua Tahun -</option>
                            @foreach($tahun_lulus_list as $tahun)
                                <option value="{{ $tahun }}" {{ request('tahun_lulus') == $tahun ? 'selected' : '' }}>
                                    {{ $tahun }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <!-- Prodi Filter -->
                    <div class="md:col-span-1 relative h-[62px]">
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Prodi</label>
                        <select name="filterprodi"
                            onmousedown="if(this.options.length>5){this.size=5;}" onchange="this.size=0;" onblur="this.size=0;"
                            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 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>

                    <!-- Tampilkan Data & Reset Buttons -->
                    <div class="md:col-span-2 flex flex-col sm:flex-row gap-2">
                        <button type="submit"
                            class="inline-flex justify-center flex-1 py-1.5 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">
                            Tampilkan Data
                        </button>
                        <a href="{{ route('laporan.surveyor.index') }}"
                            class="inline-flex justify-center flex-1 py-1.5 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-grey-500 transition-colors">
                            Reset
                        </a>
                    </div>
                </div> <!-- End Filter Grid -->

                <!-- Controls Section Border (The Underline) -->
                <div class="mt-4 pt-4 border-t border-gray-200 dark:border-gray-700">
                    @if($view_type == 'students')
                        <!-- Surveyor Action Row (Visible after filter) -->
                        <div class="flex flex-col md:flex-row justify-between items-stretch md:items-end gap-4">
                            <!-- Surveyor Selection Dropdown -->
                            <div class="flex-1">
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Nama Surveyor</label>
                                <select name="id_surveyor" 
                                    class="w-full md: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">
                                    <option value="">- Pilih Surveyor -</option>
                                    @foreach($surveyors as $surveyor)
                                        <option value="{{ $surveyor->IDUser }}" {{ request('id_surveyor') == $surveyor->IDUser ? 'selected' : '' }}>
                                            {{ $surveyor->Nama }} ({{ $surveyor->Username }})
                                        </option>
                                    @endforeach
                                </select>
                            </div>

                            <!-- Submit & Reset Buttons -->
                            <div class="flex flex-row gap-2">
                                <button type="submit"
                                    class="flex-1 md:flex-initial inline-flex justify-center py-1.5 px-6 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">
                                    Submit
                                </button>
                                <a href="{{ route('laporan.surveyor.index', ['tahun_lulus' => request('tahun_lulus'), 'filterprodi' => request('filterprodi')]) }}"
                                    class="flex-1 md:flex-initial inline-flex justify-center py-1.5 px-6 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>
                    @else
                        <!-- Controls Placeholder (Hidden but kept space) -->
                        <div class="flex flex-col md:flex-row justify-between items-end gap-4 invisible">
                            <div class="flex items-center gap-2">
                                <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Show</span>
                                <div class="w-20 h-8"></div>
                                <span class="text-sm font-medium text-gray-700 dark:text-gray-300">entries</span>
                            </div>
                            <div class="w-full md:w-auto">
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Pencarian (Nama / Username)</label>
                                <div class="flex flex-wrap gap-2">
                                    <div class="w-full md:w-80 h-9 border rounded-md"></div>
                                    <div class="w-20 h-9 rounded-md"></div>
                                    <div class="w-20 h-9 rounded-md"></div>
                                    <div class="w-28 h-9 rounded-md"></div>
                                </div>
                            </div>
                        </div>
                    @endif
                </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">
                        @if($view_type == 'summary')
                            <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">NAMA SURVEYOR</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">USERNAME</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-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-center text-xs font-bold text-gray-700 dark:text-gray-300 uppercase tracking-wider">TOTAL SURVEY</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">TERAKHIR SURVEY</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>
                        @else
                            <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 text-center">TELEPON</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">
                                    <label class="inline-flex items-center gap-1.5 cursor-pointer whitespace-nowrap">
                                        <input type="checkbox" id="checkAll" class="rounded border-gray-400 text-blue-600 focus:ring-blue-500 h-3.5 w-3.5 cursor-pointer">
                                        <span>PILIH SEMUA</span>
                                    </label>
                                </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">SURVEYOR</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>
                        @endif
                    </thead>
                    <tbody class="bg-white dark:bg-gray-800">
                        @if($view_type == 'summary')
                            @forelse($results as $index => $surveyor)
                                @php
                                    $totalAlumni = $alumniCounts[$surveyor->IDUser] ?? 0;
                                    $totalConfirmedSurveyor = $confirmedCounts[$surveyor->IDUser] ?? 0;
                                    $latestDate = $latestDates[$surveyor->IDUser] ?? null;
                                @endphp
                                <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">
                                        {{ $results->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 font-medium">
                                        {{ $surveyor->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">
                                        {{ $surveyor->Username }}
                                    </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-[150px]">
                                        {{ $surveyor->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">
                                        {{ $surveyor->Telp ?? '-' }}
                                    </td>
                                    <td class="border border-gray-300 dark:border-gray-700 px-2 py-2 text-xs text-center">
                                        <span class="inline-flex px-2 py-0.5 bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300 rounded-full text-[10px] font-bold">
                                            {{ $totalAlumni }}
                                        </span>
                                    </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">
                                        {{ $latestDate ? \Carbon\Carbon::parse($latestDate)->format('d/m/Y H:i') : '-' }}
                                    </td>
                                    <td class="border border-gray-300 dark:border-gray-700 px-2 py-1 text-center min-w-[80px]">
                                        <a href="{{ route('laporan.surveyor.show', $surveyor->IDUser) }}"
                                           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">
                                            <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="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>
                                            Detail
                                        </a>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="8" 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
                        @else
                            @forelse($results 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">
                                        {{ $results->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->nim }}
                                    </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->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 text-center">
                                        {{ $alumni->tahun_lulus }}
                                    </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 text-center">
                                        {{ $alumni->Telp ?? '-' }}
                                    </td>
                                    <td class="border border-gray-300 dark:border-gray-700 px-2 py-2 text-center">
                                        <input type="checkbox" class="alumni-checkbox rounded border-gray-300 text-blue-600 focus:ring-blue-500 h-4 w-4 cursor-pointer" value="{{ $alumni->IDValueAlumni }}" data-row-id="{{ $alumni->IDValueAlumni }}">
                                    </td>
                                    <td class="border border-gray-300 dark:border-gray-700 px-2 py-2 text-xs text-center text-gray-600 dark:text-gray-400" id="surveyor-cell-{{ $alumni->IDValueAlumni }}">
                                        {{ $alumni->surveyor_name }}
                                    </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 mahasiswa ditemukan</span>
                                        </div>
                                    </td>
                                </tr>
                            @endforelse
                        @endif
                    </tbody>
                </table>
            </div>

            <!-- Mobile Card View -->
            <div class="md:hidden divide-y divide-gray-200 dark:divide-gray-700">
                @if($view_type == 'summary')
                    @forelse($results as $index => $surveyor)
                        @php
                            $totalAlumni = $alumniCounts[$surveyor->IDUser] ?? 0;
                            $totalConfirmedSurveyor = $confirmedCounts[$surveyor->IDUser] ?? 0;
                            $latestDate = $latestDates[$surveyor->IDUser] ?? null;
                        @endphp
                        <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">
                                        #{{ $results->firstItem() + $index }}</div>
                                    <div class="text-sm font-bold text-gray-900 dark:text-white">{{ $surveyor->Nama }}</div>
                                    <div class="text-xs text-gray-500 dark:text-gray-400">{{ $surveyor->Username }}</div>
                                </div>
                                <div class="text-right space-y-1">
                                    <span class="inline-flex px-2 py-0.5 bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300 rounded-full text-[10px] font-bold">
                                        {{ $totalAlumni }} Survey
                                    </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">Email</p>
                                    <p class="font-medium text-gray-900 dark:text-white truncate">{{ $surveyor->Email ?? '-' }}</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">{{ $surveyor->Telp ?? '-' }}</p>
                                </div>
                                <div class="col-span-2 space-y-1">
                                    <p class="text-gray-500 dark:text-gray-400">Terakhir Survey</p>
                                    <p class="font-medium text-gray-900 dark:text-white">
                                        {{ $latestDate ? \Carbon\Carbon::parse($latestDate)->format('d/m/Y H:i') : '-' }}
                                    </p>
                                </div>
                            </div>

                            <div class="pt-2 flex gap-2">
                                <a href="{{ route('laporan.surveyor.show', $surveyor->IDUser) }}"
                                   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="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 Alumni
                                </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
                @else
                    @forelse($results as $index => $alumni)
                        <div class="p-4 space-y-3">
                            <div class="flex justify-between items-start">
                                <div class="flex items-start gap-2">
                                    <input type="checkbox" class="alumni-checkbox rounded border-gray-300 text-blue-600 focus:ring-blue-500 h-4 w-4 cursor-pointer mt-1" value="{{ $alumni->IDValueAlumni }}" data-row-id="{{ $alumni->IDValueAlumni }}">
                                    <div class="space-y-1">
                                        <div class="text-xs font-bold text-blue-600 dark:text-blue-400">
                                            #{{ $results->firstItem() + $index }} - {{ $alumni->nim }}</div>
                                        <div class="text-sm font-bold text-gray-900 dark:text-white">{{ $alumni->name }}</div>
                                        <div class="text-xs text-gray-500 dark:text-gray-400">{{ $alumni->prodi_name }}</div>
                                    </div>
                                </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->tahun_lulus }}</p>
                                </div>
                                <div class="space-y-1 text-right">
                                    <p class="text-gray-500 dark:text-gray-400">Telepon</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">Surveyor</p>
                                    <p class="font-medium text-gray-900 dark:text-white" id="surveyor-cell-mobile-{{ $alumni->IDValueAlumni }}">{{ $alumni->surveyor_name }}</p>
                                </div>
                            </div>
                            <div class="pt-2">
                                <a href="{{ route('alumni.show', $alumni->IDValueAlumni) }}"
                                   class="w-full 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">
                                    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 mahasiswa ditemukan</span>
                        </div>
                    @endforelse
                @endif
            </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 {{ $results->firstItem() ?? 0 }} to {{ $results->lastItem() ?? 0 }} of
                        {{ $results->total() }} entries
                    </div>

                    <!-- Pagination Links -->
                    <div>
                        {{ $results->appends(request()->query())->links() }}
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@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-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"
        };
        flatpickr("#start_date", commonConfig);
        flatpickr("#end_date", commonConfig);

        // Checkbox: Select All
        const checkAll = document.getElementById('checkAll');
        if (checkAll) {
            checkAll.addEventListener('change', function() {
                document.querySelectorAll('.alumni-checkbox').forEach(cb => {
                    cb.checked = checkAll.checked;
                });
            });
        }

        // Sync individual checkboxes with checkAll
        document.querySelectorAll('.alumni-checkbox').forEach(cb => {
            cb.addEventListener('change', function() {
                if (checkAll) {
                    const allBoxes = document.querySelectorAll('.alumni-checkbox');
                    checkAll.checked = [...allBoxes].every(c => c.checked);
                }
            });
        });

        // Intercept form Submit: if checkboxes are checked → assign surveyor via AJAX then reload
        const form = document.querySelector('form[action*="surveyor"]');
        const submitBtn = form ? form.querySelector('button[type="submit"]') : null;

        if (form && submitBtn) {
            form.addEventListener('submit', function(e) {
                const checkedBoxes = document.querySelectorAll('.alumni-checkbox:checked');
                if (checkedBoxes.length === 0) return; // No checkboxes → normal form submit (filter)

                e.preventDefault(); // Block normal submit

                const surveyorSelect = form.querySelector('select[name="id_surveyor"]');
                const surveyorId = surveyorSelect ? surveyorSelect.value : '';
                const alumniIds = [...checkedBoxes].map(cb => cb.value);

                // Disable submit button
                submitBtn.disabled = true;
                submitBtn.textContent = 'Menyimpan...';

                fetch('{{ route("laporan.surveyor.assign-surveyor") }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}',
                        'Accept': 'application/json'
                    },
                    body: JSON.stringify({
                        alumni_ids: alumniIds,
                        surveyor_id: surveyorId || null
                    })
                })
                .then(res => res.json())
                .then(data => {
                    if (data.success) {
                        // Reload page with same filters to stay on students view
                        window.location.reload();
                    } else {
                        showToast('Gagal memperbarui data.', 'error');
                        submitBtn.disabled = false;
                        submitBtn.textContent = 'Submit';
                    }
                })
                .catch(() => {
                    showToast('Terjadi kesalahan koneksi.', 'error');
                    submitBtn.disabled = false;
                    submitBtn.textContent = 'Submit';
                });
            });
        }

        function showToast(message, type) {
            const toast = document.createElement('div');
            toast.className = 'fixed top-4 right-4 z-[9999] px-5 py-3 rounded-lg shadow-lg text-sm font-medium text-white transition-all duration-300 ' + (type === 'success' ? 'bg-green-600' : 'bg-red-600');
            toast.textContent = message;
            document.body.appendChild(toast);
            setTimeout(() => { toast.style.opacity = '0'; setTimeout(() => toast.remove(), 300); }, 3000);
        }
    });
</script>
@endpush
@push('styles')
    <style>
        .flatpickr-innerContainer {
            padding-left: 0 !important;
        }

        .flatpickr-calendar {
            width: 315px !important;
        }

        .flatpickr-days {
            width: 315px !important;
        }

        /* 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