@php
    // Ambil parameter
    // Prioritaskan variabel yang dikirim, kemudian request, lalu default
    $program = $program ?? request('program', 'sarjana');
    $kdprodi = $kdprodi ?? request('kdprodi', '');

    // Tentukan nama route untuk redirect
    $routeName = ($program == 'sarjana') ? 'program-sarjana' : 'program-diploma-tiga';

    // Tangani filter dan reset
    if (request()->has('filter')) {
        $url = route($routeName, [
            'program' => $program,
            'kdprodi' => request('filterprogram')
        ]);
        header("Location: " . $url);
        exit();
    } elseif (request()->has('reset')) {
        $url = route($routeName, [
            'program' => $program
        ]);
        header("Location: " . $url);
        exit();
    }

    // Bangun kondisi query
    $kdprodiCondition = $kdprodi ? "KodeProdi = '$kdprodi' and " : "";

    // Ambil label tahun
    $ts2 = date('Y') - 2;
    $ts3 = date('Y') - 3;
    $ts4 = date('Y') - 4;

    $labelts_a = 'TS-2 (' . ($ts2 - 1) . '-' . $ts2 . ')';
    $labelts_b = 'TS-3 (' . ($ts3 - 1) . '-' . $ts3 . ')';
    $labelts_c = 'TS-4 (' . ($ts4 - 1) . '-' . $ts4 . ')';

    // Query data untuk setiap tahun
    // Disesuaikan untuk skema Laravel: tabel 'students' digabung (join) dengan 'job_searches'
    // Nilai2 = Total Lulusan (Jumlah mahasiswa)

    // Untuk logika waktu tunggu:
    // Diploma (D3): <3 bulan, 3-6 bulan, >6 bulan
    // Sarjana (S1): <6 bulan, 6-18 bulan, >18 bulan

    if ($program == 'sarjana') {
        // Logika Sarjana
        // Nilai4: < 6 bulan
        // Nilai5: 6 <= x <= 18 bulan
        // Nilai6: > 18 bulan
        $caseNilai4 = "WHEN js.bulan_sebelum_lulus > 0 OR (js.bulan_setelah_lulus IS NOT NULL AND js.bulan_setelah_lulus < 6) THEN 1";
        $caseNilai5 = "WHEN js.bulan_setelah_lulus >= 6 AND js.bulan_setelah_lulus <= 18 THEN 1";
        $caseNilai6 = "WHEN js.bulan_setelah_lulus > 18 THEN 1";
    } else {
        // Logika Diploma (Default)
        // Nilai4: < 3 bulan
        // Nilai5: 3 <= x <= 6 bulan
        // Nilai6: > 6 bulan
        $caseNilai4 = "WHEN js.bulan_sebelum_lulus > 0 OR (js.bulan_setelah_lulus IS NOT NULL AND js.bulan_setelah_lulus < 3) THEN 1";
        $caseNilai5 = "WHEN js.bulan_setelah_lulus >= 3 AND js.bulan_setelah_lulus <= 6 THEN 1";
        $caseNilai6 = "WHEN js.bulan_setelah_lulus > 6 THEN 1";
    }

    $queryTemplate = "
                                        SELECT 
                                            COUNT(s.id) as Nilai2,
                                            COALESCE(SUM(CASE 
                                                $caseNilai4 
                                                ELSE 0 
                                            END), 0) as Nilai4,
                                            COALESCE(SUM(CASE 
                                                $caseNilai5 
                                                ELSE 0 
                                            END), 0) as Nilai5,
                                            COALESCE(SUM(CASE 
                                                $caseNilai6 
                                                ELSE 0 
                                            END), 0) as Nilai6
                                        FROM students s
                                        LEFT JOIN job_searches js ON s.id = js.student_id
                                        WHERE %s s.tahun_lulus = ?
                                    ";

    $prodiSql = $kdprodi ? "s.kode_prodi = '$kdprodi' AND " : "";

    try {
        $nilaits2 = DB::selectOne(sprintf($queryTemplate, $prodiSql), [$ts2]);
        $nilaits3 = DB::selectOne(sprintf($queryTemplate, $prodiSql), [$ts3]);
        $nilaits4 = DB::selectOne(sprintf($queryTemplate, $prodiSql), [$ts4]);
    } catch (\Exception $e) {
        // Fallback
        $nilaits2 = (object) ['Nilai2' => 0, 'Nilai3' => 0, 'Nilai4' => 0, 'Nilai5' => 0, 'Nilai6' => 0];
        $nilaits3 = (object) ['Nilai2' => 0, 'Nilai3' => 0, 'Nilai4' => 0, 'Nilai5' => 0, 'Nilai6' => 0];
        $nilaits4 = (object) ['Nilai2' => 0, 'Nilai3' => 0, 'Nilai4' => 0, 'Nilai5' => 0, 'Nilai6' => 0];
    }

    // Logika filter program
    if ($program == 'sarjana') {
        $filterprod = "and KodeID not in ('57401','14201','93402')";
        $header_wt1 = "WT < 6 bulan";
        $header_wt2 = "6 <= WT <= 18 bulan";
        $header_wt3 = "WT > 18 bulan";
    } else {
        $filterprod = "and KodeID in ('57401','14201','93402')";
        $header_wt1 = "WT < 3 bulan";
        $header_wt2 = "3 <= WT <= 6 bulan";
        $header_wt3 = "WT > 6 bulan";
    }
@endphp


<!DOCTYPE html>
<html lang="id">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Data Waktu Tunggu Kerja Lulusan - Tracer Study UNMUH JEMBER</title>
    <link rel="icon" type="image/webp" href="{{ asset('storage/image/logo_umj.webp') }}">
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap"
        rel="stylesheet">
    <style>
        body {
            font-family: 'Inter', sans-serif;
        }

        /* Custom scrollbar for tables if needed */
        .scrollbar-hide::-webkit-scrollbar {
            display: none;
        }

        .scrollbar-hide {
            -ms-overflow-style: none;
            scrollbar-width: none;
        }

        /* Smooth scrolling */
        html {
            scroll-behavior: smooth;
        }

        /* ===== PERFORMANCE OPTIMIZATIONS - CLEANED UP ===== */

        /* Optimize main content container only when needed */
        main {
            will-change: transform;
        }

        /* Optimize table rendering */
        table {
            contain: layout style;
        }

        /* Optimize table row hover effects */
        tr {
            will-change: background-color;
            contain: layout paint;
        }

        /* Reduce backdrop-blur intensity for better performance */
        .backdrop-blur-sm {
            backdrop-filter: blur(3px) !important;
            -webkit-backdrop-filter: blur(3px) !important;
        }

        /* Optimize transitions */
        .transition-colors {
            transition: background-color 0.15s ease !important;
        }

        /* Optimize hover states */
        label:hover,
        button:hover {
            contain: layout paint;
        }
    </style>
    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
    <style>
        [x-cloak] {
            display: none !important;
        }
    </style>
</head>

<body class="bg-gray-100 text-slate-800 antialiased" x-data="{ loading: true }"
    x-init="setTimeout(() => loading = false, 800)">

    <!-- Loading Overlay -->
    <div x-show="loading"
        class="fixed inset-0 z-50 flex items-center justify-center bg-gray-100 transition-opacity duration-500">
        <div class="flex flex-col items-center">
            <svg class="animate-spin h-10 w-10 text-blue-600 mb-4" xmlns="http://www.w3.org/2000/svg" fill="none"
                viewBox="0 0 24 24">
                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4">
                </circle>
                <path class="opacity-75" fill="currentColor"
                    d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
                </path>
            </svg>
            <h2 class="text-lg font-bold text-gray-800">Loading...</h2>
        </div>
    </div>

    <div x-show="!loading" x-transition.opacity.duration.500ms x-cloak>

        <!-- Background - Optimized for scroll performance -->
        <div class="absolute md-fixed inset-0 z-0 bg-gray-100" style="transform: translateZ(0);"></div>

        <!-- Include Navbar -->
        @include('partials.navbar')

        <!-- Main Content -->
        <main class="relative z-10 py-4 sm:py-8 lg:py-12 px-2 sm:px-4 lg:px-8">
            <div class="max-w-7xl mx-auto">

                <div class="min-h-screen bg-gradient-to-b from-slate-50 to-white rounded-lg sm:rounded-xl shadow-xl">
                    <!-- Header -->
                    <div class="bg-white border-b border-slate-200 py-4 sm:py-6 rounded-t-lg sm:rounded-t-xl">
                        <div class="container mx-auto px-3 sm:px-4 max-w-6xl">
                            <div class="flex flex-col md:flex-row md:items-center justify-between">
                                <div class="mb-0">
                                    <h1
                                        class="text-base sm:text-lg md:text-xl lg:text-2xl font-bold text-slate-800 leading-tight">
                                        Data Jumlah Lulusan Terlacak yang Bekerja berdasarkan Tingkat/Ukuran Waktu
                                        Tunggu
                                        Kerja/Berwirausaha
                                    </h1>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Main Content -->
                    <div class="container mx-auto px-3 sm:px-4 py-4 sm:py-6 lg:py-8 max-w-6xl">
                        <div class="mb-4 sm:mb-6 lg:mb-8">
                            <!-- Header -->
                            <div
                                class="bg-gradient-to-r from-blue-600 to-indigo-600 text-white rounded-t-lg sm:rounded-t-xl p-4 sm:p-6">
                                <div class="flex items-center">
                                    <div
                                        class="w-10 h-10 sm:w-12 sm:h-12 bg-white/20 rounded-lg sm:rounded-xl flex items-center justify-center mr-3 sm:mr-4 flex-shrink-0">
                                        <svg class="w-5 h-5 sm:w-6 sm:h-6" fill="none" stroke="currentColor"
                                            viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01">
                                            </path>
                                        </svg>
                                    </div>
                                    <div>
                                        <h2 class="text-base sm:text-lg lg:text-xl font-bold leading-tight">
                                            Lulusan Terlacak berdasarkan Waktu Tunggu Kerja Lulusan
                                        </h2>
                                        <p class="text-blue-100 text-xs sm:text-sm mt-1">
                                            Statistik waktu tunggu kerja lulusan Universitas Muhammadiyah Jember
                                        </p>
                                    </div>
                                </div>
                            </div>

                            <!-- Body -->
                            <div
                                class="bg-white rounded-b-lg sm:rounded-b-xl shadow-lg border border-slate-200 border-t-0 p-3 sm:p-4 lg:p-6">
                                <!-- form filter -->
                                <form method="post" class="mb-4 sm:mb-6 lg:mb-8">
                                    @csrf
                                    <!-- program -->
                                    <input type="hidden" name="program" value="{{ $program }}">

                                    <div class="flex flex-col gap-3 sm:gap-4">
                                        <!-- Program Filter -->
                                        <div class="w-full">
                                            <label class="block text-xs sm:text-sm font-medium text-slate-700 mb-2">
                                                Filter program:
                                            </label>
                                            <select name="filterprogram" required
                                                class="w-full px-3 sm:px-4 py-2 sm:py-3 rounded-lg border-2 border-slate-300 shadow-sm focus:border-blue-500 focus:ring-2 focus:ring-blue-200 focus:outline-none text-xs sm:text-sm bg-white">
                                                <option value="">-Semua program-</option>
                                                @php
                                                    try {
                                                        $querypd = DB::select("SELECT * FROM kode_prodi where NA ='N' $filterprod");
                                                    } catch (\Exception $e) {
                                                        $querypd = [];
                                                    }
                                                @endphp
                                                @foreach($querypd as $dpd)
                                                    <option value="{{ $dpd->KodeID }}" {{ $kdprodi == $dpd->KodeID ? 'selected' : '' }}>
                                                        {{ $dpd->KodeID }} - {{ $dpd->Nama }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>

                                        <!-- Buttons Container -->
                                        <div class="flex flex-col sm:flex-row gap-2 sm:gap-3">
                                            <!-- Filter Button -->
                                            <button type="submit" name="filter" id="click"
                                                class="w-full sm:w-auto inline-flex items-center justify-center px-4 sm:px-6 py-2 sm:py-3 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg shadow-sm transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 text-xs sm:text-sm">
                                                <svg class="w-3 h-3 sm:w-4 sm:h-4 mr-2" fill="none"
                                                    stroke="currentColor" viewBox="0 0 24 24"
                                                    xmlns="http://www.w3.org/2000/svg">
                                                    <path stroke-linecap="round" stroke-linejoin="round"
                                                        stroke-width="2"
                                                        d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z">
                                                    </path>
                                                </svg>
                                                Filter
                                            </button>

                                            <!-- Reset Button -->
                                            <button type="submit" name="reset" id="click"
                                                class="w-full sm:w-auto inline-flex items-center justify-center px-4 sm:px-6 py-2 sm:py-3 bg-slate-100 hover:bg-slate-200 text-slate-700 font-medium rounded-lg border border-slate-300 shadow-sm transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-slate-300 text-xs sm:text-sm">
                                                Reset
                                            </button>
                                        </div>
                                    </div>
                                </form>

                                <!-- Data Table -->
                                <div class="overflow-x-auto border border-slate-200 rounded-lg -mx-3 sm:mx-0">
                                    <table class="w-full min-w-[640px] sm:min-w-[800px] table-bordered table-striped">
                                        <!-- Table Header -->
                                        <thead class="bg-slate-50">
                                            <tr class="border-b border-slate-200">
                                                <th rowspan="2"
                                                    class="p-2 sm:p-3 lg:p-4 text-center font-semibold text-slate-700 border-r border-slate-200 text-xs sm:text-sm">
                                                    Tahun Lulus
                                                </th>
                                                <th rowspan="2"
                                                    class="p-2 sm:p-3 lg:p-4 text-center font-semibold text-slate-700 border-r border-slate-200 text-xs sm:text-sm">
                                                    Jumlah Lulusan
                                                </th>
                                                <th rowspan="2"
                                                    class="p-2 sm:p-3 lg:p-4 text-center font-semibold text-slate-700 border-r border-slate-200 text-xs sm:text-sm">
                                                    Jumlah Lulusan yang Terlacak
                                                </th>
                                                <th colspan="3"
                                                    class="p-2 sm:p-3 lg:p-4 text-center font-semibold text-slate-700 text-xs sm:text-sm">
                                                    Jumlah Lulusan Terlacak dengan Waktu Tunggu Kerja Mendapatkan
                                                    Pekerjaan
                                                </th>
                                            </tr>
                                            <tr class="border-b border-slate-200">
                                                <th
                                                    class="p-2 sm:p-3 text-center font-medium text-slate-700 bg-green-50 border-r border-slate-200 text-xs sm:text-sm">
                                                    {{ $header_wt1 }}
                                                </th>
                                                <th
                                                    class="p-2 sm:p-3 text-center font-medium text-slate-700 bg-yellow-50 border-r border-slate-200 text-xs sm:text-sm">
                                                    {{ $header_wt2 }}
                                                </th>
                                                <th
                                                    class="p-2 sm:p-3 text-center font-medium text-slate-700 bg-red-50 text-xs sm:text-sm">
                                                    {{ $header_wt3 }}
                                                </th>
                                            </tr>
                                            <!-- Kode kolom -->
                                            <tr class="bg-slate-100/50 text-xs sm:text-sm" style="color: red">
                                                <td
                                                    class="p-1 sm:p-2 text-center font-medium border-r border-slate-200">
                                                    1</td>
                                                <td
                                                    class="p-1 sm:p-2 text-center font-medium border-r border-slate-200">
                                                    2</td>
                                                <td
                                                    class="p-1 sm:p-2 text-center font-medium border-r border-slate-200">
                                                    3</td>
                                                <td
                                                    class="p-1 sm:p-2 text-center font-medium border-r border-slate-200">
                                                    4</td>
                                                <td
                                                    class="p-1 sm:p-2 text-center font-medium border-r border-slate-200">
                                                    5</td>
                                                <td class="p-1 sm:p-2 text-center font-medium">6</td>
                                            </tr>
                                        </thead>

                                        <!-- Table Body -->
                                        <tbody>
                                            <!-- TS-4 -->
                                            <tr class="border-b border-slate-100 hover:bg-slate-50/50">
                                                <td
                                                    class="p-2 sm:p-3 lg:p-4 text-center font-bold text-slate-800 border-r border-slate-100 text-xs sm:text-sm">
                                                    {{ $labelts_c }}
                                                </td>
                                                <td
                                                    class="p-2 sm:p-3 lg:p-4 text-center text-slate-700 border-r border-slate-100 text-xs sm:text-sm">
                                                    {{ $nilaits4->Nilai2 == 0 ? 0 : $nilaits4->Nilai2 }}
                                                </td>
                                                <td
                                                    class="p-2 sm:p-3 lg:p-4 text-center text-slate-700 border-r border-slate-100 text-xs sm:text-sm">
                                                    {{ ($nilaits4->Nilai4 + $nilaits4->Nilai5 + $nilaits4->Nilai6) == 0 ? 0 : ($nilaits4->Nilai4 + $nilaits4->Nilai5 + $nilaits4->Nilai6) }}
                                                </td>
                                                <td
                                                    class="p-2 sm:p-3 lg:p-4 text-center text-slate-700 bg-green-50/50 border-r border-slate-100 text-xs sm:text-sm">
                                                    {{ $nilaits4->Nilai4 == 0 ? 0 : $nilaits4->Nilai4 }}
                                                </td>
                                                <td
                                                    class="p-2 sm:p-3 lg:p-4 text-center text-slate-700 bg-yellow-50/50 border-r border-slate-100 text-xs sm:text-sm">
                                                    {{ $nilaits4->Nilai5 == 0 ? 0 : $nilaits4->Nilai5 }}
                                                </td>
                                                <td
                                                    class="p-2 sm:p-3 lg:p-4 text-center text-slate-700 bg-red-50/50 text-xs sm:text-sm">
                                                    {{ $nilaits4->Nilai6 == 0 ? 0 : $nilaits4->Nilai6 }}
                                                </td>
                                            </tr>

                                            <!-- TS-3 -->
                                            <tr class="border-b border-slate-100 hover:bg-slate-50/50">
                                                <td
                                                    class="p-2 sm:p-3 lg:p-4 text-center font-bold text-slate-800 border-r border-slate-100 text-xs sm:text-sm">
                                                    {{ $labelts_b }}
                                                </td>
                                                <td
                                                    class="p-2 sm:p-3 lg:p-4 text-center text-slate-700 border-r border-slate-100 text-xs sm:text-sm">
                                                    {{ $nilaits3->Nilai2 == 0 ? 0 : $nilaits3->Nilai2 }}
                                                </td>
                                                <td
                                                    class="p-2 sm:p-3 lg:p-4 text-center text-slate-700 border-r border-slate-100 text-xs sm:text-sm">
                                                    {{ ($nilaits3->Nilai4 + $nilaits3->Nilai5 + $nilaits3->Nilai6) == 0 ? 0 : ($nilaits3->Nilai4 + $nilaits3->Nilai5 + $nilaits3->Nilai6) }}
                                                </td>
                                                <td
                                                    class="p-2 sm:p-3 lg:p-4 text-center text-slate-700 bg-green-50/50 border-r border-slate-100 text-xs sm:text-sm">
                                                    {{ $nilaits3->Nilai4 == 0 ? 0 : $nilaits3->Nilai4 }}
                                                </td>
                                                <td
                                                    class="p-2 sm:p-3 lg:p-4 text-center text-slate-700 bg-yellow-50/50 border-r border-slate-100 text-xs sm:text-sm">
                                                    {{ $nilaits3->Nilai5 == 0 ? 0 : $nilaits3->Nilai5 }}
                                                </td>
                                                <td
                                                    class="p-2 sm:p-3 lg:p-4 text-center text-slate-700 bg-red-50/50 text-xs sm:text-sm">
                                                    {{ $nilaits3->Nilai6 == 0 ? 0 : $nilaits3->Nilai6 }}
                                                </td>
                                            </tr>

                                            <!-- TS-2 -->
                                            <tr class="hover:bg-slate-50/50">
                                                <td
                                                    class="p-2 sm:p-3 lg:p-4 text-center font-bold text-slate-800 border-r border-slate-100 text-xs sm:text-sm">
                                                    {{ $labelts_a }}
                                                </td>
                                                <td
                                                    class="p-2 sm:p-3 lg:p-4 text-center text-slate-700 border-r border-slate-100 text-xs sm:text-sm">
                                                    {{ $nilaits2->Nilai2 == 0 ? 0 : $nilaits2->Nilai2 }}
                                                </td>
                                                <td
                                                    class="p-2 sm:p-3 lg:p-4 text-center text-slate-700 border-r border-slate-100 text-xs sm:text-sm">
                                                    {{ ($nilaits2->Nilai4 + $nilaits2->Nilai5 + $nilaits2->Nilai6) == 0 ? 0 : ($nilaits2->Nilai4 + $nilaits2->Nilai5 + $nilaits2->Nilai6) }}
                                                </td>
                                                <td
                                                    class="p-2 sm:p-3 lg:p-4 text-center text-slate-700 bg-green-50/50 border-r border-slate-100 text-xs sm:text-sm">
                                                    {{ $nilaits2->Nilai4 == 0 ? 0 : $nilaits2->Nilai4 }}
                                                </td>
                                                <td
                                                    class="p-2 sm:p-3 lg:p-4 text-center text-slate-700 bg-yellow-50/50 border-r border-slate-100 text-xs sm:text-sm">
                                                    {{ $nilaits2->Nilai5 == 0 ? 0 : $nilaits2->Nilai5 }}
                                                </td>
                                                <td
                                                    class="p-2 sm:p-3 lg:p-4 text-center text-slate-700 bg-red-50/50 text-xs sm:text-sm">
                                                    {{ $nilaits2->Nilai6 == 0 ? 0 : $nilaits2->Nilai6 }}
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>

        <!-- Include Footer -->
        @include('partials.footer')
    </div>

</body>

</html>