@extends('layouts.main')

@section('judul')
    <h1 class="page-heading d-flex flex-column justify-content-center text-dark fw-bold fs-3 m-0">Home</h1>
@endsection

@push('css')
@endpush

@section('breadchums')
    <ul class="breadcrumb breadcrumb-separatorless fw-semibold fs-7 my-0">
        <!--begin::Item-->
        <li class="breadcrumb-item text-muted">
            <a href="../../demo38/dist/index.html" class="text-muted text-hover-primary">Home</a>
        </li>
        <!--end::Item-->
        <!--begin::Item-->
        <li class="breadcrumb-item"><span class="bullet bg-gray-400 w-5px h-2px"></span></li>
        <!--end::Item-->
        <!--begin::Item-->
        <li class="breadcrumb-item text-muted">Dashboards</li>
        <!--end::Item-->
    </ul>
@endsection

@section('isi')

    <div id="kt_app_content_container" class="app-container  container-fluid ">

        @if (Auth::user()->hasRole('kemahasiswaan rektorat'))
          <div class="d-flex flex-column flex-column-fluid">
                <div class="notice d-flex bg-light-primary rounded border-primary border border-dashed p-6">
                    <div class="d-flex flex-stack flex-grow-1">
                        <div class="fw-semibold">
                            <div class="fs-6 text-gray-700">
                                Selamat Datang Operator kemahasiswaan rektorat</div>
                        </div>
                    </div>
                </div>
            </div>

        @elseif (Auth::user()->hasRole('admin') || Auth::user()->hasRole('kemahasiswaan fakultas'))
            <div id="kt_app_content_container" class="app-container container-fluid">

                <div class="d-flex flex-stack mb-5 mb-xl-10">
                    <div class="page-title d-flex flex-column justify-content-center flex-wrap me-3">
                        <h1 class="page-heading d-flex text-dark fw-bold fs-3 flex-column justify-content-center my-0">
                            Dasboard Tahun Akademik {{ $tA->th_akademik }} {{ $tA->semester }}
                        </h1>
                        <span class="text-muted fw-semibold fs-7 my-1">
                            Monitor status transaksi harian Anda
                        </span>
                    </div>
                    
                    <div class="d-flex align-items-center gap-2 gap-lg-4">
                         <select style="background-color: #ffffff !important;" 
                        name="thakad" 
                        id="thakad-select" 
                        aria-label="Select Tahun Akademik"  
                        data-placeholder="Tahun Akademik" 
                        class="form-select form-select-light">
                        <option value="">Tahun Akademik</option>
                        {{-- selected ditentukan dari $thAkadPilihan (URL ?thakad=), bukan $taAktif,
                             agar dropdown ikut saat user ganti filter --}}
                        @foreach($taAkademikData as $item)
                            <option value="{{ $item->kode }}"
                                {{ (string)$item->kode == (string)$thAkadPilihan ? 'selected' : '' }}>
                                {{ $item->th_akademik }} {{ $item->semester ?? '' }}
                            </option>
                        @endforeach
                        </select>

                    </div>

                </div>

                {{--  bg-gray-900 shadow-sm --}}
                <div class="row g-5 g-xl-10 mb-5 mb-xl-10">
                    <div class="col-md-6 col-xl-4">
                        <div class="card card-flush h-xl-100 bg-info shadow-sm">
                            <div class="card-header pt-5">
                                <div class="card-title d-flex flex-column">
                                    <span class="fs-2hx fw-bold text-white me-2 lh-1 ls-n2">{{ $totalPengajuan }}</span>
                                    <span class="text-white opacity-75 pt-1 fw-semibold fs-6">Pengajuan SKPI Total Keseluruhan</span>
                                </div>
                            </div>
                            <div class="card-body d-flex align-items-end pt-0">
                                <a href="{{ route('home.detail-total-pengajuan-skpi', ['thakad' => $thAkadPilihan]) }}" class="d-flex align-items-center text-white fw-bold fs-6">
                                    Lihat Detail
                                    <i class="ki-duotone ki-arrow-right fs-5 text-white ms-2">
                                        <span class="path1"></span><span class="path2"></span>
                                    </i>
                                </a>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-6 col-xl-4">
                        <div class="card card-flush h-xl-100 bg-warning shadow-sm">
                            <div class="card-header pt-5">
                                <div class="card-title d-flex flex-column">
                                    <span class="fs-2hx fw-bold text-white me-2 lh-1 ls-n2">{{ $totalBelumDiperiksa }}</span>
                                    <span class="text-white opacity-75 pt-1 fw-semibold fs-6">Pengajuan SKPI Belum Diperiksa</span>
                                </div>
                            </div>
                            <div class="card-body d-flex align-items-end pt-0">
                                <a href="{{ route('home.detail-pengajuan-skpi-belum-diperiksa', ['thakad' => $thAkadPilihan]) }}" class="d-flex align-items-center text-white fw-bold fs-6">
                                    Lihat Detail
                                    <i class="ki-duotone ki-arrow-right fs-5 text-white ms-2">
                                        <span class="path1"></span><span class="path2"></span>
                                    </i>
                                </a>
                            </div>
                        </div>
                    </div>

                    
                    <div class="col-md-6 col-xl-4">
                        <div class="card card-flush h-xl-100 bg-success shadow-sm">
                            <div class="card-header pt-5">
                                <div class="card-title d-flex flex-column">
                                    <span class="fs-2hx fw-bold text-white me-2 lh-1 ls-n2">{{ $totalDisetujui }}</span>
                                    <span class="text-white opacity-75 pt-1 fw-semibold fs-6">Pengajuan SKPI Disetujui</span>
                                </div>
                            </div>
                            <div class="card-body d-flex align-items-end pt-0">
                                <a href="{{ route('home.detail-pengajuan-skpi-disetujui', ['thakad' => $thAkadPilihan]) }}" class="d-flex align-items-center text-white fw-bold fs-6">
                                    Lihat Detail
                                    <i class="ki-duotone ki-arrow-right fs-5 text-white ms-2">
                                        <span class="path1"></span><span class="path2"></span>
                                    </i>
                                </a>
                            </div>
                        </div>
                    </div>
                    
                    <div class="col-md-6 col-xl-4">
                        <div class="card card-flush h-xl-100 bg-danger shadow-sm">
                            <div class="card-header pt-5">
                                <div class="card-title d-flex flex-column">
                                    <span class="fs-2hx fw-bold text-white me-2 lh-1 ls-n2">{{ $totalDitolak }}</span>
                                    <span class="text-white opacity-75 pt-1 fw-semibold fs-6">Pengajuan SKPI Ditolak</span>
                                </div>
                            </div>
                            <div class="card-body d-flex align-items-end pt-0">
                                <a href="{{ route('home.detail-pengajuan-skpi-ditolak', ['thakad' => $thAkadPilihan]) }}" class="d-flex align-items-center text-white fw-bold fs-6">
                                    Lihat Detail
                                    <i class="ki-duotone ki-arrow-right fs-5 text-white ms-2">
                                        <span class="path1"></span><span class="path2"></span>
                                    </i>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>

               

                <!--begin::Col-->
                <div class="row gy-5 g-xl-10">
                    <div class="col-xl-12 mb-5 mb-xl-10">
                        <!--begin::Chart widget 18-->
                        <div class="card card-flush h-xl-100 shadow-sm">
                            <!--begin::Header-->
                            <div class="card-header pt-7">
                                <!--begin::Title-->
                                <h3 class="card-title align-items-start flex-column">
                                    <span class="card-label fw-bold text-gray-800">Statistik Pengajuan SKPI </span>
                                    <span class="text-gray-700 mt-1 fw-semibold fs-6">T.A {{ $tA->th_akademik }} {{ $tA->semester }}</span>
                                </h3>
                                <!--end::Title-->
                                <!--begin::Toolbar-->
                                <div class="card-toolbar">
                                    <!--begin::Daterangepicker(defined in src/js/layout/app.js)-->
                                    {{-- <div data-kt-daterangepicker="true" data-kt-daterangepicker-opens="left" class="btn btn-sm btn-light d-flex align-items-center px-4">
                                        <!--begin::Display range-->
                                        <div class="text-gray-600 fw-bold">Loading date range...</div>
                                        <!--end::Display range-->
                                        <i class="ki-outline ki-calendar-8 fs-1 ms-2 me-0"></i>
                                    </div> --}}
                                    <!--end::Daterangepicker-->
                                </div>
                                <!--end::Toolbar-->
                            </div>
                            <!--end::Header-->
                            <!--begin::Body-->
                            <div class="card-body d-flex align-items-end px-0 pt-3 pb-5">
                                <!--begin::Chart-->
                                <div id="chart_pengajuan_skpi" class="h-325px w-100 min-h-auto ps-4 pe-6"></div>
                                <!--end::Chart-->
                            </div>
                            <!--end: Card Body-->
                        </div>
                        <!--end::Chart widget 18-->
                    </div>
                </div>
                <!--end::Col-->


                <!--begin::Col-->
                <div class="row gy-5 g-xl-10">
                        <div class="col-xl-12 mb-5 mb-xl-10">
                            <!--begin::Chart widget 18-->
                            <div class="card card-flush h-xl-100 shadow-sm">
                                <!--begin::Header-->
                                <div class="card-header pt-7">
                                    <!--begin::Title-->
                                    <h3 class="card-title align-items-start flex-column">
                                        <span class="card-label fw-bold text-gray-800">Statistik Pencatatan Prestasi Mahasiswa </span>
                                        <span class="text-gray-700 mt-1 fw-semibold fs-6">T.A {{ $tA->th_akademik }} {{ $tA->semester }}</span>
                                    </h3>
                                    <!--end::Title-->
                                    <!--begin::Toolbar-->
                                    <div class="card-toolbar">
                                        <!--begin::Daterangepicker(defined in src/js/layout/app.js)-->
                                        {{-- <div data-kt-daterangepicker="true" data-kt-daterangepicker-opens="left" class="btn btn-sm btn-light d-flex align-items-center px-4">
                                            <!--begin::Display range-->
                                            <div class="text-gray-600 fw-bold">Loading date range...</div>
                                            <!--end::Display range-->
                                            <i class="ki-outline ki-calendar-8 fs-1 ms-2 me-0"></i>
                                        </div> --}}
                                        <!--end::Daterangepicker-->
                                    </div>
                                    <!--end::Toolbar-->
                                </div>
                                <!--end::Header-->
                                <!--begin::Body-->
                                <div class="card-body d-flex align-items-end px-0 pt-3 pb-5">
                                    <!--begin::Chart-->
                                    <div id="kt_charts_widget_18_chart_2" class="h-325px w-100 min-h-auto ps-4 pe-6"></div>
                                    <!--end::Chart-->
                                </div>
                                <!--end: Card Body-->
                            </div>
                            <!--end::Chart widget 18-->
                        </div>
                    <!--end::Col-->
                </div>


            </div>
        @else
            <div class="d-flex flex-column flex-column-fluid">
                <div class="notice d-flex bg-light-primary rounded border-primary border border-dashed p-6">
                    <div class="d-flex flex-stack flex-grow-1">
                        <div class="fw-semibold">
                            <div class="fs-6 text-gray-700">
                                Selamat Datang</div>
                        </div>
                    </div>
                </div>
            </div>
        @endif
    </div>
@endsection

@push('js-vendor')
@endpush

@push('js-page')
<script>
    $(document).ready(function () 
    {
        // Redirect ke home dengan filter thakad saat dropdown diganti.
        // Cukup kirim thakad — semester sudah ter-encode di kode (20241=Gasal, 20242=Genap).
        // Jika placeholder dipilih (value kosong), redirect ke home tanpa parameter.
        $('#thakad-select').on('change', function() {
            var selectedOption = $(this).find('option:selected');
            var thakad = selectedOption.val();
            if (!thakad) {
                window.location.href = '{{ route("home") }}';
                return;
            }
            window.location.href = '{{ route("home") }}' + '?thakad=' + encodeURIComponent(thakad);
        });
    });
  </script>

 
<script>
    var KTChartsWidgetPengajuanSkpi = (function () {
        var e = { self: null, rendered: !1 },
            t = function (e) {
                // PERUBAHAN 1: Targetkan ID elemen yang kedua
                var t = document.getElementById("chart_pengajuan_skpi");
                
                if (t) {
                    var a = parseInt(KTUtil.css(t, "height")),
                        l = KTUtil.getCssVariableValue("--bs-gray-900"),
                        r = KTUtil.getCssVariableValue("--bs-border-dashed-color"),
                        o = {
                            colors: [
                                    "#009ef7", // Total
                                    "#ffc700", // Belum
                                    "#50cd89", // Setuju
                                    "#f1416c"  // Tolak
                                ],
                            series: [
                                {
                                    name: "Jumlah Mahasiswa",
                                    data: [
                                        {{ $totalPengajuan ?? 0 }}, 
                                        {{ $totalBelumDiperiksa ?? 0 }}, 
                                        {{ $totalDisetujui ?? 0 }}, 
                                        {{ $totalDitolak ?? 0 }}
                                    ],
                                },
                            ],
                            chart: {
                                fontFamily: "inherit",
                                type: "bar",
                                height: a,
                                toolbar: { show: !1 },
                            },
                            plotOptions: {
                                bar: {
                                    horizontal: !1,
                                    columnWidth: ["30%"],
                                    borderRadius: 5,
                                    dataLabels: { position: "top" },
                                    startingShape: "flat",
                                    distributed: true, // <--- TAMBAHKAN INI AGAR WARNA BERBEDA TIAP BATANG
                                    horizontal: false  // atau true, sesuai kebutuhan
                                },
                            },
                            legend: { show: !1 },
                            dataLabels: {
                                enabled: !0,
                                offsetY: -28,
                                style: { fontSize: "13px", colors: [l] },
                                formatter: function (e) {
                                    return e; // Format angka di atas batang
                                },
                            },
                            stroke: { show: !0, width: 2, colors: ["transparent"] },
                            xaxis: {
                                // PERUBAHAN 3: Masukkan Label (Bulan/Kategori) di sini
                                categories: [
                                    "Total Pengajuan",
                                    "Belum di Periksa",
                                    "Disetujui",
                                    "Ditolak"
                                ],
                                axisBorder: { show: !1 },
                                axisTicks: { show: !1 },
                                labels: {
                                    style: {
                                        colors: KTUtil.getCssVariableValue("--bs-gray-500"),
                                        fontSize: "13px",
                                    },
                                },
                                crosshairs: {
                                    fill: {
                                        gradient: { opacityFrom: 0, opacityTo: 0 },
                                    },
                                },
                            },
                            yaxis: {

                                max: function (max) {
                                        return Math.ceil(max) + 5;
                                    },
                                // menghindari pecahan di skala
                                decimalsInFloat: 0,
                                forceNiceScale: true,
                                labels: {
                                    style: {
                                        colors: KTUtil.getCssVariableValue("--bs-gray-500"),
                                        fontSize: "13px",
                                    },
                                    formatter: function (val) {
                                        //return e + "";
                                        return Number(val).toFixed(0);
                                    },
                                },
                            },
                            fill: { opacity: 1 },
                            states: {

                                normal: { filter: { type: "none", value: 0 } },
                                hover: { filter: { type: "none", value: 0 } },
                                active: {
                                    allowMultipleDataPointsSelection: !1,
                                    filter: { type: "none", value: 0 },
                                },

                            },
                            tooltip: {
                                style: { fontSize: "12px" },
                                y: {
                                    formatter: function (e) {
                                        return +e + " mahasiswa";
                                    },
                                },
                            },
                            // PERUBAHAN 4: Warna Grafik (Opsional, agar beda dengan grafik pertama)
                            colors: [
                                // KTUtil.getCssVariableValue("--bs-primary"),
                                // KTUtil.getCssVariableValue("--bs-primary-light"),
                                "#009ef7", // Total (Biru)
                                "#ffc700", // Belum (Kuning)
                                "#50cd89", // Setuju (Hijau)
                                "#f1416c"  // Tolak (Merah)
                            ],
                            grid: {
                                borderColor: r,
                                strokeDashArray: 4,
                                yaxis: { lines: { show: !0 } },
                            },
                        };
                    
                    // Render Chart
                    (e.self = new ApexCharts(t, o)),
                        setTimeout(function () {
                            e.self.render(), (e.rendered = !0);
                        }, 200);
                }
            };

        return {
            init: function () {
                t(e),
                    // Re-render saat mode dark/light berubah
                    KTThemeMode.on("kt.thememode.change", function () {
                        e.rendered && e.self.destroy(), t(e);
                    });
            },
        };
    })();

    // PERUBAHAN 5: Jalankan fungsi init saat halaman selesai dimuat
    KTUtil.onDOMContentLoaded(function () {
        KTChartsWidgetPengajuanSkpi.init();
    });



    // Kita ganti nama variabelnya agar tidak bentrok dengan widget asli
    @if (Auth::user()->hasRole('admin') || Auth::user()->hasRole('kemahasiswaan fakultas'))
        var chartFakultasCategories = @json($chartKegiatanMhsBerprestasiCategories);
        var chartFakultasData = @json($chartDataKegiatanMhsBerprestasi);
    @endif

    // var KTChartsWidgetPencatatan = (function () {
    //     var e = { self: null, rendered: !1 },
    //         t = function (e) {
    //             // PERUBAHAN 1: Targetkan ID elemen yang kedua
    //             var t = document.getElementById("kt_charts_widget_18_chart_2");
                
    //             if (t) {
    //                 var a = parseInt(KTUtil.css(t, "height")),
    //                     l = KTUtil.getCssVariableValue("--bs-gray-900"),
    //                     r = KTUtil.getCssVariableValue("--bs-border-dashed-color"),
    //                     o = {
    //                          colors: [
    //                             "#009ef7", "#ffc700", "#50cd89", "#f1416c", 
    //                             "#7239ea", "#43ced7", "#fa727d", "#181c32"
    //                         ],
    //                         series: [
    //                             {
    //                                 name: "Jumlah Record",
    //                                 // PERUBAHAN 2: Masukkan data Statistik Pencatatan dari Laravel di sini
                                
    //                                 // data: [30, 40, 45, 50, 49, 60, 70, 91, 20, 30, 40], 
    //                                 data: typeof chartFakultasData !== 'undefined' ? chartFakultasData : [], 

    //                             },
    //                         ],
    //                         chart: {
    //                             fontFamily: "inherit",
    //                             type: "bar",
    //                             height: a,
    //                             toolbar: { show: !1 },
    //                         },
    //                         plotOptions: {
    //                             bar: {
    //                                 horizontal: !1,
    //                                 columnWidth: ["28%"],
    //                                 borderRadius: 5,
    //                                 dataLabels: { position: "top" },
    //                                 startingShape: "flat",
    //                             },
    //                         },
    //                         legend: { show: !1 },
    //                         dataLabels: {
    //                             enabled: !0,
    //                             offsetY: -28,
    //                             style: { fontSize: "13px", colors: [l] },
    //                             formatter: function (e) {
    //                                 return e; // Format angka di atas batang
    //                             },
    //                         },
    //                         stroke: { show: !0, width: 2, colors: ["transparent"] },
    //                         xaxis: {
    //                             // PERUBAHAN 3: Masukkan Label (Bulan/Kategori) di sini
    //                             // categories: [
    //                             //     "Ekonomi dan Bisnis", "Teknik", "Hukum", "Farmasi", "Komunikasi", "Psikologi", "Pariwisata",
    //                             // ],
    //                             categories: typeof chartFakultasCategories !== 'undefined' ? chartFakultasCategories : [],

    //                             axisBorder: { show: !1 },
    //                             axisTicks: { show: !1 },
    //                             labels: {
    //                                 style: {
    //                                     colors: KTUtil.getCssVariableValue("--bs-gray-500"),
    //                                     fontSize: "13px",
    //                                 },
    //                             },
    //                             crosshairs: {
    //                                 fill: {
    //                                     gradient: { opacityFrom: 0, opacityTo: 0 },
    //                                 },
    //                             },
    //                         },
    //                         yaxis: {
    //                             labels: {
    //                                 style: {
    //                                     colors: KTUtil.getCssVariableValue("--bs-gray-500"),
    //                                     fontSize: "13px",
    //                                 },
    //                                 formatter: function (e) {
    //                                     return e + "";
    //                                 },
    //                             },
    //                         },
    //                         fill: { opacity: 1 },
    //                         states: {
    //                             normal: { filter: { type: "none", value: 0 } },
    //                             hover: { filter: { type: "none", value: 0 } },
    //                             active: {
    //                                 allowMultipleDataPointsSelection: !1,
    //                                 filter: { type: "none", value: 0 },
    //                             },
    //                         },
    //                         tooltip: {
    //                             style: { fontSize: "12px" },
    //                             y: {
    //                                 formatter: function (e) {
    //                                     return +e + "";
    //                                 },
    //                             },
    //                         },
    //                         // PERUBAHAN 4: Warna Grafik (Opsional, agar beda dengan grafik pertama)
    //                         colors: [
    //                             // KTUtil.getCssVariableValue("--bs-warning"), // Ubah jadi warna kuning/warning
    //                             // KTUtil.getCssVariableValue("--bs-warning-light"),
    //                              "#009ef7", "#ffc700", "#50cd89", "#f1416c", 
    //                             "#7239ea", "#43ced7", "#fa727d", "#181c32"
                                
    //                         ],
    //                         grid: {
    //                             borderColor: r,
    //                             strokeDashArray: 4,
    //                             yaxis: { lines: { show: !0 } },
    //                         },
    //                     };
                    
    //                 // Render Chart
    //                 (e.self = new ApexCharts(t, o)),
    //                     setTimeout(function () {
    //                         e.self.render(), (e.rendered = !0);
    //                     }, 200);
    //             }
    //         };

    //     return {
    //         init: function () {
    //             t(e),
    //                 // Re-render saat mode dark/light berubah
    //                 KTThemeMode.on("kt.thememode.change", function () {
    //                     e.rendered && e.self.destroy(), t(e);
    //                 });
    //         },
    //     };
    // })();

    var KTChartsWidgetPencatatan = (function () {
        var e = { self: null, rendered: !1 },
            t = function (e) {
                var t = document.getElementById("kt_charts_widget_18_chart_2");
                
                if (t) {
                    // 1. Ambil Data dari Blade
                    var dataKategori = typeof chartFakultasCategories !== 'undefined' ? chartFakultasCategories : [];
                    var dataNilai    = typeof chartFakultasData !== 'undefined' ? chartFakultasData : [];
                    var nilaiTertinggi = dataNilai.length > 0 ? Math.max(...dataNilai) : 0;
                    var batasAtas = nilaiTertinggi + 5; 
                    

                    // 2. MEMBUAT LOGIKA WARNA DINAMIS
                    // Tentukan warna khusus untuk fakultas tertentu di sini
                    var colorMapping = {
                        "HUKUM": "#f1416c",    // Merah (Sesuai Request Anda)
                        "TEKNIK": "#009ef7",   // Biru
                        "EKONOMI": "#ffc700",  // Kuning
                        "FARMASI": "#50cd89", // Hijau
                        "PSIKOLOGI": "#50cd89", // Hijau
                        "KOMUNIKASI": "#50cd89", // Hijau
                        "PARIWISATA": "#50cd89", // Hijau
                    };

                    // Default warna jika nama fakultas tidak ada di daftar colorMapping
                    var defaultColor = "#7239ea"; // Ungu

                    // Generate array warna sesuai urutan kategori yang keluar dari DB
                    var dynamicColors = dataKategori.map(function(namaFakultas) {
                        // Ubah ke huruf besar (UpperCase) agar tidak error sensitif huruf (Hukum vs HUKUM)
                        var key = namaFakultas.toString().toUpperCase().trim();
                        
                        // Jika ada di mapping ambil warnanya, jika tidak pakai default
                        return colorMapping[key] ? colorMapping[key] : defaultColor;
                    });

                    var a = parseInt(KTUtil.css(t, "height")),
                        l = KTUtil.getCssVariableValue("--bs-gray-900"),
                        r = KTUtil.getCssVariableValue("--bs-border-dashed-color"),
                        o = {
                            series: [{
                                name: "Jumlah Kegiatan",
                                data: dataNilai // Masukkan Data
                            }],
                            chart: {
                                fontFamily: "inherit",
                                type: "bar",
                                height: a,
                                toolbar: { show: !1 },
                                events: {
                                    dataPointSelection: function(event, chartContext, config) {
                                        // 1. Ambil Index data yang diklik
                                        var dataIndex = config.dataPointIndex;
                                        // 2. Ambil Nama Fakultas berdasarkan Index dari array Kategori
                                        // config.w.config.xaxis.categories berisi array ["HUKUM", "TEKNIK", dst]
                                        var selectedFakultas = config.w.config.xaxis.categories[dataIndex];
                                        var baseUrl = "{{ route('home.detail-kegiatan-mahasiswa-berprestasi') }}"; // Pastikan route ini ada
                                        var targetUrl = baseUrl + "?fakultas=" + encodeURIComponent(selectedFakultas);
                                        
                                        // Lakukan Redirect
                                        window.location.href = targetUrl;
                                    }
                                }
                            },


                            plotOptions: {
                                bar: {
                                    horizontal: !1,
                                    columnWidth: ["30%"],
                                    borderRadius: 5,
                                    distributed: true, // <--- WAJIB TRUE AGAR BEDA WARNA TIAP BATANG
                                    dataLabels: {
                                        position: "top" // KUNCI 1: Anchor di bagian atas batang
                                    },
                                },
                            },
                            // 3. Masukkan Array Warna yang sudah kita generate di atas
                            colors: dynamicColors, 
                            
                            legend: { show: false }, // Legend disembunyikan karena warna sudah custom
                            dataLabels: {
                                // enabled: true,
                                enabled: !0,
                                offsetY: -20,
                                style: { fontSize: "12px", colors: [l] },
                                formatter: function (e) { return e; },
                            },
                            stroke: { show: !0, width: 2, colors: ["transparent"] },
                            xaxis: {
                                categories: dataKategori, // Masukkan Kategori
                                axisBorder: { show: !1 },
                                axisTicks: { show: !1 },
                                labels: {
                                    style: {
                                        colors: KTUtil.getCssVariableValue("--bs-gray-500"),
                                        fontSize: "11px",
                                    },
                                    rotate: -45,
                                },
                            },
                            yaxis: {
                                max: batasAtas, // <--- KUNCI UTAMA: Set batas atas manual
                
                                // Tambahan: tickAmount agar garis grid tidak terlalu rapat jika angkanya kecil
                                tickAmount: 5, 
                                labels: {
                                    style: {
                                        colors: KTUtil.getCssVariableValue("--bs-gray-500"),
                                        fontSize: "13px",
                                    },
                                    formatter: function (e) { return parseInt(e); },
                                },
                            },
                            fill: { opacity: 1 },
                            grid: {
                                padding: {
                                    top: 40, // Memberi ruang kosong di atas grafik agar angka tidak kepotong
                                },
                                borderColor: r,
                                strokeDashArray: 4,
                                yaxis: { lines: { show: !0 } },
                            },
                        };
                    
                    (e.self = new ApexCharts(t, o)),
                        setTimeout(function () {
                            e.self.render(), (e.rendered = !0);
                        }, 200);
                }
            };

        return {
            init: function () {
                t(e),
                    KTThemeMode.on("kt.thememode.change", function () {
                        e.rendered && e.self.destroy(), t(e);
                    });
            },
        };
    })();

    // PERUBAHAN 5: Jalankan fungsi init saat halaman selesai dimuat
    KTUtil.onDOMContentLoaded(function () {
        KTChartsWidgetPencatatan.init();
    });
</script>

@endpush