@extends('master')

@push('after-style')
<!-- <link href="{{ asset('assets/css/yearpicker.css') }}" rel="stylesheet" type="text/css" /> -->
<!-- <style>
    .ui-datepicker-calendar {
        display: none;
    }
</style> -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css" />
<link href="{{ asset('assets/libs/swiper/swiper-bundle.min.css') }}" rel="stylesheet" />
<style>
    .fs-small {
        font-size: 8px;
    }

    #teaching-staff td,
    th {
        text-align: left !important;
    }

    #educational-staff td,
    th {
        text-align: left !important;
    }
</style>
@endpush

@section('content')
<!-- start page title -->

<div class="row">
    <div class="col-12">
        <div class="d-flex align-items-lg-center flex-lg-row flex-column">
            <div class="flex-grow-1">
                <h4 class="mb-1">{{ session()->get('title') }}</h4>
            </div>
            <div class="mt-3 mt-lg-0">
                <form action="javascript:void(0);">
                    <div class="row g-3 mb-0 align-items-center">
                        <div class="col-sm-auto">
                            <div class="form-icon">
                                <input id="yearpicker" type="text" class="form-control form-control-icon" value="{{ date('Y') }}">
                                <i class="ri-calendar-2-line"></i>
                            </div>
                        </div>
                        <!--end col-->
                    </div>
                    <!--end row-->
                </form>
            </div>
        </div><!-- end card header -->
    </div>
</div>
<!-- end page title -->

<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-body">
                <!-- <p class="text-muted"></p> -->
                <!-- Nav tabs -->
                <ul class="nav nav-tabs nav-justified nav-border-top nav-border-top-success mb-3" role="tablist">
                    <li class="nav-item">
                        <a class="nav-link active" data-bs-toggle="tab" href="#sdm-tab" role="tab" aria-selected="false">
                            <i class="ri-open-arm-line align-middle me-1"></i> SDM
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" data-bs-toggle="tab" href="#keuangan-tab" role="tab" aria-selected="false">
                            <i class="ri-line-chart-line me-1 align-middle"></i> Keuangan
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" data-bs-toggle="tab" href="#layanan-tab" role="tab" aria-selected="false">
                            <i class="ri-question-answer-line align-middle me-1"></i>Layanan
                        </a>
                    </li>
                </ul>
                <div class="tab-content text-muted">
                    <div class="tab-pane active" id="sdm-tab" role="tabpanel">
                        <div class="row">
                            <div class="col-lg-12">
                                <div class="card">
                                    <div class="card-header">
                                        <h5 class="card-title mb-0">SDM</h5>
                                    </div><!-- end card header -->

                                    <div class="card-body">
                                        <!-- <p class="text-muted">Use below-mentioned class to an element to display the value of components and more with our display utilities.</p> -->
                                        <div class="live-preview">
                                            <div>
                                                <div class="row">
                                                    <div class="col-md-4 col-12">
                                                        <div>
                                                            <h6 class="mb-3 text-muted">Tenaga Kependidikan</h6>
                                                            <div class="table-responsive">
                                                                <table class="table table-bordered" id="educational-staff">
                                                                    <tbody>
                                                                        <tr>
                                                                            <th>PNS</th>
                                                                            <th id="educational-staff-pns">0 Pegawai</th>
                                                                        </tr>
                                                                        <tr>
                                                                            <th>PPPK</th>
                                                                            <th id="educational-staff-pegawai_pppk">0 Pegawai</th>
                                                                        </tr>
                                                                        <tr>
                                                                            <th>Non-PNS</th>
                                                                            <th id="educational-staff-non_pns">0 Pegawai</th>
                                                                        </tr>
                                                                        <tr>
                                                                            <th>Total</th>
                                                                            <th id="educational-staff-total">0 Pegawai</th>
                                                                        </tr>
                                                                    </tbody>
                                                                </table>
                                                            </div>
                                                            <canvas id="educational-staff-chart" class="chartjs-chart" data-colors='["--vz-primary", "--vz-light"]'></canvas>
                                                        </div>
                                                    </div>
                                                    <!-- end col -->

                                                    <div class="col-md-8 col-12">
                                                        <div class="card">
                                                            <div class="card-header align-items-center d-flex">
                                                                <h6 class="mb-3 text-muted card-title mb-0 flex-grow-1">Tenaga Pendidik</h6>
                                                                <div class="input-group flex-shrink-0" style="width: 50%;">
                                                                    <label class="input-group-text" for="inputGroupSelect01">Jenis Data</label>
                                                                    <select class="form-select" id="teaching_staff_field">
                                                                        <option value="professor_pns">Professor PNS</option>
                                                                        <option value="professor_non_pns">Professor Non PNS</option>
                                                                        <option value="lektor_kepala_pns">Lektor Kepala PNS</option>
                                                                        <option value="lektor_kepala_non_pns">Lektor Kepala Non PNS</option>
                                                                        <option value="lektor_pns">Lektor PNS</option>
                                                                        <option value="lektor_non_pns">Lektor Non PNS</option>
                                                                        <option value="asisten_ahli_pns" selected>Asisten Ahli PNS</option>
                                                                        <option value="asisten_ahli_non_pns">Asisten Ahli Non PNS</option>
                                                                        <option value="tenaga_pengajar_pns">Tenaga Pengajar PNS</option>
                                                                        <option value="tenaga_pengajar_non_pns">Tenaga Pengajar Non PNS</option>
                                                                        <option value="terkualifikasi_s3">S3</option>
                                                                        <option value="terkualifikasi_memiliki_sertifikat_kompetensi_profesi">Serkom Profesi</option>
                                                                        <option value="terkualifikasi_pengalaman_sebagai_praktisi">Praktisi</option>
                                                                        <option value="terkualifikasi_berprestasi_internasional">Prestasi Internasional</option>
                                                                        <option value="instruktur_pns">Instruktur PNS</option>
                                                                        <option value="instruktur_non_pns">Instruktur Non PNS</option>
                                                                        <option value="pegawai_pppk">PPPK</option>
                                                                        <option value="nidk_nidn">NIDN/NIDK</option>
                                                                    </select>
                                                                </div>
                                                            </div>
                                                            <div class="card-body">
                                                                <canvas id="teaching-staff-chart" class="chartjs-chart"></canvas>
                                                            </div>
                                                        </div>
                                                    </div><!-- end col -->
                                                </div><!-- end row -->
                                            </div>
                                        </div>
                                    </div><!-- end card-body -->
                                </div><!-- end card -->
                            </div>
                            <!-- end col -->
                        </div>
                    </div>
                    <div class="tab-pane" id="keuangan-tab" role="tabpanel">
                        <div class="row">
                            <div class="col-xl-12">
                                <div class="card crm-widget">
                                    <div class="card-header">
                                        <h5>Keuangan</h5>
                                    </div>
                                    <div class="card-body p-0">
                                        <div class="row g-0">
                                            <div class="col-6">
                                                <div class="card">
                                                    <div class="card-header align-items-center d-flex">
                                                        <h4 class="card-title mb-0 flex-grow-1">Penerimaan</h4>
                                                        <div class="input-group flex-shrink-0" style="width: 50%;">
                                                            <label class="input-group-text" for="inputGroupSelect01">Kode Akun</label>
                                                            <select class="form-select" id="revenue_kd_akun">
                                                                                                                            </select>
                                                        </div>
                                                    </div>
                                                    <div class="card-body">
                                                        <canvas id="revenue-chart" class="chartjs-chart" data-colors='["--vz-primary"]'></canvas>
                                                    </div>
                                                </div>
                                            </div><!-- end col -->
                                            <div class="col-6">
                                                <div class="card">
                                                    <div class="card-header align-items-center d-flex">
                                                        <h4 class="card-title mb-0 flex-grow-1">Pengeluaran</h4>
                                                        <div class="input-group flex-shrink-0" style="width: 50%;">
                                                            <label class="input-group-text" for="inputGroupSelect01">Kode Akun</label>
                                                            <select class="form-select" id="expense_kd_akun">
                                                                                                                            </select>
                                                        </div>
                                                    </div>
                                                    <div class="card-body">
                                                        <canvas id="expense-chart" class="chartjs-chart" data-colors='["--vz-primary"]'></canvas>
                                                    </div>
                                                </div>
                                            </div><!-- end col -->
                                        </div><!-- end row -->
                                    </div><!-- end card body -->
                                </div><!-- end card -->
                            </div><!-- end col -->
                        </div>
                        <div class="row">
                            <div class="col-xl-12">
                                <div class="card crm-widget">
                                    <div class="card-body p-0">
                                        <div class="row g-0">
                                            <div class="col-6">
                                                <div class="card">
                                                    <div class="card-header align-items-center d-flex">
                                                        <h4 class="card-title mb-0 flex-grow-1">Saldo Rekening - Operasional</h4>
                                                        <div class="input-group flex-shrink-0" style="width: 50%;">
                                                            <label class="input-group-text" for="inputGroupSelect01">No. Rekening</label>
                                                            <select class="form-select" id="operational_balance_no_rekening">
                                                                                                                            </select>
                                                        </div>
                                                    </div>
                                                    <div class="card-body">
                                                        <canvas id="operational-balance-chart" class="chartjs-chart" data-colors='["--vz-primary-rgb, 0.2", "--vz-primary", "--vz-info-rgb, 0.2", "--vz-info"]'></canvas>
                                                    </div>
                                                </div>
                                            </div><!-- end col -->
                                            <div class="col-6">
                                                <div class="card">
                                                    <div class="card-header align-items-center d-flex">
                                                        <h4 class="card-title mb-0 flex-grow-1">Saldo Rekening - Pengelolaan Kas</h4>
                                                    </div>
                                                    <div class="card-body">
                                                        <canvas id="lineChart2" class="chartjs-chart" data-colors='["--vz-primary-rgb, 0.2", "--vz-primary", "--vz-info-rgb, 0.2", "--vz-info"]'></canvas>
                                                    </div>
                                                </div>
                                            </div><!-- end col -->
                                            <div class="col-6">
                                                <div class="card">
                                                    <div class="card-header align-items-center d-flex">
                                                        <h4 class="card-title mb-0 flex-grow-1">Saldo Rekening - Dana Kelolaan</h4>
                                                    </div>
                                                    <div class="card-body">
                                                        <canvas id="lineChart3" class="chartjs-chart" data-colors='["--vz-primary-rgb, 0.2", "--vz-primary", "--vz-info-rgb, 0.2", "--vz-info"]'></canvas>
                                                    </div>
                                                </div>
                                            </div><!-- end col -->
                                        </div><!-- end row -->
                                    </div><!-- end card body -->
                                </div><!-- end card -->
                            </div><!-- end col -->
                        </div>
                    </div>
                    <div class="tab-pane" id="layanan-tab" role="tabpanel">
                        <div class="row">
                            <div class="col-lg-12">
                                <div class="card">
                                    <div class="card-header">
                                        <h5>Layanan</h5>
                                    </div>
                                    <div class="card-body">
                                        <div class="swiper cryptoSlider">

                                            <div class="swiper-wrapper">
                                                <div class="swiper-slide">
                                                    <div class="card crm-widget">
                                                        <div class="card-body p-0">
                                                            <div class=" px-3">
                                                                <h5 class="text-muted text-uppercase fs-13">Cluster PTN
                                                                    <!-- <i class="ri-arrow-up-circle-line text-success fs-18 float-end align-middle"></i> -->
                                                                </h5>
                                                                <div class="d-flex align-items-center">
                                                                    <div class="flex-shrink-0">
                                                                        <i class="ri-building-line display-6 text-muted"></i>
                                                                    </div>
                                                                    <div class="flex-grow-1 ms-3">
                                                                        <h5 class="mb-0"><span class="counter-value" data-target="200" id="cluster_ptn"></span></h5>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div><!-- end card body -->
                                                    </div><!-- end card -->
                                                </div><!-- end -->

                                                <div class="swiper-slide">
                                                    <div class="card crm-widget">
                                                        <div class="card-body p-0">
                                                            <div class=" px-3">
                                                                <h5 class="text-muted text-uppercase fs-13">Produk Inovasi
                                                                    <!-- <i class="ri-arrow-up-circle-line text-success fs-18 float-end align-middle"></i> -->
                                                                </h5>
                                                                <div class="d-flex align-items-center">
                                                                    <div class="flex-shrink-0">
                                                                        <i class="ri-lightbulb-line display-6 text-muted"></i>
                                                                    </div>
                                                                    <div class="flex-grow-1 ms-3">
                                                                        <h5 class="mb-0"><span class="counter-value" data-target="200" id="jumlah_produk_inovasi"></span> Produk</h5>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div><!-- end card body -->
                                                    </div><!-- end card -->
                                                </div><!-- end -->

                                                <div class="swiper-slide">
                                                    <div class="card crm-widget">
                                                        <div class="card-body p-0">
                                                            <div class=" px-3">
                                                                <h5 class="text-muted text-uppercase fs-13">Penerima Pengabmas
                                                                    <!-- <i class="ri-arrow-up-circle-line text-success fs-18 float-end align-middle"></i> -->
                                                                </h5>
                                                                <div class="d-flex align-items-center">
                                                                    <div class="flex-shrink-0">
                                                                        <i class="ri-hand-heart-line display-6 text-muted"></i>
                                                                    </div>
                                                                    <div class="flex-grow-1 ms-3">
                                                                        <h5 class="mb-0"><span class="counter-value" data-target="200" id="jumlah_penerima_pengabmas"></span> Penerima</h5>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div><!-- end card body -->
                                                    </div><!-- end card -->
                                                </div><!-- end -->

                                                <div class="swiper-slide">
                                                    <div class="card crm-widget">
                                                        <div class="card-body p-0">
                                                            <div class=" px-3">
                                                                <h5 class="text-muted text-uppercase fs-13">Prodi Kampus Merdeka
                                                                    <!-- <i class="ri-arrow-up-circle-line text-success fs-18 float-end align-middle"></i> -->
                                                                </h5>
                                                                <div class="d-flex align-items-center">
                                                                    <div class="flex-shrink-0">
                                                                        <i class="ri-shirt-line display-6 text-muted"></i>
                                                                    </div>
                                                                    <div class="flex-grow-1 ms-3">
                                                                        <h5 class="mb-0"><span class="counter-value" data-target="200" id="jumlah_prodi_kampus_merdeka"></span> Prodi</h5>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div><!-- end card body -->
                                                    </div><!-- end card -->
                                                </div><!-- end -->

                                                <div class="swiper-slide">
                                                    <div class="card crm-widget">
                                                        <div class="card-body p-0">
                                                            <div class=" px-3">
                                                                <h5 class="text-muted text-uppercase fs-13">Mitra Kerjasama Diklat
                                                                    <!-- <i class="ri-arrow-up-circle-line text-success fs-18 float-end align-middle"></i> -->
                                                                </h5>
                                                                <div class="d-flex align-items-center">
                                                                    <div class="flex-shrink-0">
                                                                        <i class="ri-parent-line display-6 text-muted"></i>
                                                                    </div>
                                                                    <div class="flex-grow-1 ms-3">
                                                                        <h5 class="mb-0"><span class="counter-value" data-target="200" id="mitra_kerjasama_diklat"></span> Mitra</h5>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div><!-- end card body -->
                                                    </div><!-- end card -->
                                                </div><!-- end -->

                                            </div><!-- end swiper wrapper -->
                                        </div><!-- end swiper -->
                                    </div>
                                </div>
                            </div><!-- end col -->
                        </div><!-- end row -->

                        <div class="row">
                            <div class="col-md-3">
                                <div class="card">
                                    <div class="card-header" style="padding-bottom: 0px;">
                                        <h6 class="text-muted">Jumlah Kerjasama</h6>
                                    </div>
                                    <div class="card-body">
                                        <div class="d-flex mb-2">
                                            <div class="flex-grow-1">
                                                <p class="text-truncate text-muted fs-14 mb-0"><i class="mdi mdi-circle align-middle text-primary me-2"></i>Pihak Kerjasama
                                                </p>
                                            </div>
                                            <div class="flex-shrink-0">
                                                <p class="mb-0" id="total-collaboration-jumlah_pihak_ks">24</p>
                                            </div>
                                        </div><!-- end -->
                                        <div class="d-flex mb-2">
                                            <div class="flex-grow-1">
                                                <p class="text-truncate text-muted fs-14 mb-0"><i class="mdi mdi-circle align-middle text-primary me-2"></i>Perjanjian Kerjasama
                                                </p>
                                            </div>
                                            <div class="flex-shrink-0">
                                                <p class="mb-0" id="total-collaboration-jumlah_perjanjian_ks">10</p>
                                            </div>
                                        </div><!-- end -->
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-1"></div>
                            <div class="col-md-3">
                                <div class="card">
                                    <div class="card-header" style="padding-bottom: 0px;">
                                        <h6 class="text-muted">Dosen Berkegiatan Di Luar Kampus</h6>
                                    </div>
                                    <div class="card-body">
                                        <div class="d-flex mb-2">
                                            <div class="flex-grow-1">
                                                <p class="text-truncate text-muted fs-14 mb-0"><i class="mdi mdi-circle align-middle text-primary me-2"></i>Berkegiatan di PT Lain
                                                </p>
                                            </div>
                                            <div class="flex-shrink-0">
                                                <p class="mb-0" id="total-lecturer-outside-campus-berkegiatan_di_pt_lain">5</p>
                                            </div>
                                        </div><!-- end -->
                                        <div class="d-flex mb-2">
                                            <div class="flex-grow-1">
                                                <p class="text-truncate text-muted fs-14 mb-0"><i class="mdi mdi-circle align-middle text-primary me-2"></i>Berkegiatan di QS 100
                                                </p>
                                            </div>
                                            <div class="flex-shrink-0">
                                                <p class="mb-0" id="total-lecturer-outside-campus-berkegiatan_di_qs_100">2</p>
                                            </div>
                                        </div><!-- end -->
                                        <div class="d-flex mb-2">
                                            <div class="flex-grow-1">
                                                <p class="text-truncate text-muted fs-14 mb-0"><i class="mdi mdi-circle align-middle text-primary me-2"></i>Bekerja Sebagai Praktisi
                                                </p>
                                            </div>
                                            <div class="flex-shrink-0">
                                                <p class="mb-0" id="total-lecturer-outside-campus-bekerja_sebagai_praktisi">24</p>
                                            </div>
                                        </div><!-- end -->
                                        <div class="d-flex mb-2">
                                            <div class="flex-grow-1">
                                                <p class="text-truncate text-muted fs-14 mb-0"><i class="mdi mdi-circle align-middle text-primary me-2"></i>Membina Mahasiswa Prestasi
                                                </p>
                                            </div>
                                            <div class="flex-shrink-0">
                                                <p class="mb-0" id="total-lecturer-outside-campus-membina_mahasiswa_prestasi">2</p>
                                            </div>
                                        </div><!-- end -->
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-1"></div>
                            <div class="col-md-3">
                                <div class="card">
                                    <div class="card-header" style="padding-bottom: 0px;">
                                        <h6 class="text-muted">Jumlah Haki</h6>
                                    </div>
                                    <div class="card-body">
                                        <div class="d-flex mb-2">
                                            <div class="flex-grow-1">
                                                <p class="text-truncate text-muted fs-14 mb-0"><i class="mdi mdi-circle align-middle text-primary me-2"></i>Diakui
                                                </p>
                                            </div>
                                            <div class="flex-shrink-0">
                                                <p class="mb-0" id="haki-diakui">5</p>
                                            </div>
                                        </div><!-- end -->
                                        <div class="d-flex mb-2">
                                            <div class="flex-grow-1">
                                                <p class="text-truncate text-muted fs-14 mb-0"><i class="mdi mdi-circle align-middle text-primary me-2"></i>Dalam Proses
                                                </p>
                                            </div>
                                            <div class="flex-shrink-0">
                                                <p class="mb-0" id="haki-dalam_proses">10</p>
                                            </div>
                                        </div><!-- end -->
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-4">
                                <div class="card">
                                    <div class="card-header">
                                        <h6 class="text-muted">Jumlah Unit</h6>
                                    </div>
                                    <div class="card-body">
                                        <div class="table-responsive table-card">
                                            <table class="table table-bordered border-secondary align-middle table-nowrap mb-0">
                                                <thead class="text-muted table-light">
                                                    <tr>
                                                        <th scope="col" class="ctr">Unit</th>
                                                        <th scope="col" class="ctr">Jumlah</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <tr>
                                                        <td>Laboratorium</td>
                                                        <td>5</td>
                                                    </tr>
                                                    <tr>
                                                        <td>Perpustakaan</td>
                                                        <td>7</td>
                                                    </tr>
                                                </tbody><!-- end tbody -->
                                            </table><!-- end table -->
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-4">
                                <div class="card">
                                    <div class="card-header">
                                        <h6 class="text-muted">Prodi Kerjasama Tridharma</h6>
                                    </div>
                                    <div class="card-body">
                                        <div class="table-responsive table-card">
                                            <table class="table table-bordered border-secondary align-middle table-nowrap mb-0">
                                                <thead class="text-muted table-light">
                                                    <tr>
                                                        <th scope="col" class="ctr">Prodi</th>
                                                        <th scope="col" class="ctr">Jumlah Mitra</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <tr>
                                                        <td>Laboratorium</td>
                                                        <td>5</td>
                                                    </tr>
                                                    <tr>
                                                        <td>Perpustakaan</td>
                                                        <td>7</td>
                                                    </tr>
                                                </tbody><!-- end tbody -->
                                            </table><!-- end table -->
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-4">
                                <div class="card">
                                    <div class="card-header">
                                        <h6 class="text-muted">Sumber Dana Beasiswa</h6>
                                    </div>
                                    <div class="card-body">
                                        <div class="table-responsive table-card">
                                            <table class="table table-bordered border-secondary align-middle table-nowrap mb-0">
                                                <thead class="text-muted table-light">
                                                    <tr>
                                                        <th scope="col" class="ctr">Sumber</th>
                                                        <th scope="col" class="ctr">Jumlah</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <tr>
                                                        <td>Laboratorium</td>
                                                        <td>5</td>
                                                    </tr>
                                                    <tr>
                                                        <td>Perpustakaan</td>
                                                        <td>7</td>
                                                    </tr>
                                                </tbody><!-- end tbody -->
                                            </table><!-- end table -->
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-4">
                                <div class="card">
                                    <div class="card-header">
                                        <h6 class="text-muted">Jumlah Mahasiswa Luar Kampus</h6>
                                    </div>
                                    <div class="card-body">
                                        <div class="table-responsive table-card">
                                            <table class="table table-bordered border-secondary align-middle table-nowrap mb-0">
                                                <thead class="text-muted table-light">
                                                    <tr>
                                                        <th scope="col" class="ctr">Jurusan</th>
                                                        <th scope="col" class="ctr">Jumlah</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <tr>
                                                        <td>Laboratorium</td>
                                                        <td>5</td>
                                                    </tr>
                                                    <tr>
                                                        <td>Perpustakaan</td>
                                                        <td>7</td>
                                                    </tr>
                                                </tbody><!-- end tbody -->
                                            </table><!-- end table -->
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-4">
                                <div class="card">
                                    <div class="card-header">
                                        <h6 class="text-muted">Sumber Dana Penelitian</h6>
                                    </div>
                                    <div class="card-body">
                                        <div class="table-responsive table-card">
                                            <table class="table table-bordered border-secondary align-middle table-nowrap mb-0">
                                                <thead class="text-muted table-light">
                                                    <tr>
                                                        <th scope="col" class="ctr">Sumber</th>
                                                        <th scope="col" class="ctr">Jumlah</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <tr>
                                                        <td>Laboratorium</td>
                                                        <td>5</td>
                                                    </tr>
                                                    <tr>
                                                        <td>Perpustakaan</td>
                                                        <td>7</td>
                                                    </tr>
                                                </tbody><!-- end tbody -->
                                            </table><!-- end table -->
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-4">
                                <div class="card">
                                    <div class="card-header">
                                        <h6 class="text-muted">Sumber Dana Pengabdian Masyarakat</h6>
                                    </div>
                                    <div class="card-body">
                                        <div class="table-responsive table-card">
                                            <table class="table table-bordered border-secondary align-middle table-nowrap mb-0">
                                                <thead class="text-muted table-light">
                                                    <tr>
                                                        <th scope="col" class="ctr">Sumber</th>
                                                        <th scope="col" class="ctr">Jumlah</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <tr>
                                                        <td>Laboratorium</td>
                                                        <td>5</td>
                                                    </tr>
                                                    <tr>
                                                        <td>Perpustakaan</td>
                                                        <td>7</td>
                                                    </tr>
                                                </tbody><!-- end tbody -->
                                            </table><!-- end table -->
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-6">
                                <div class="card">
                                    <div class="card-header">
                                        <h6 class="text-muted">Jumlah Peserta Sertifikasi</h6>
                                    </div>
                                    <div class="card-body">
                                        <div class="table-responsive table-card">
                                            <table class="table table-bordered border-secondary align-middle table-nowrap mb-0">
                                                <thead class="text-muted table-light">
                                                    <tr>
                                                        <th scope="col" class="ctr">Jenis Sertifikasi</th>
                                                        <th scope="col" class="ctr">Jumlah Judul Sertifikasi</th>
                                                        <th scope="col" class="ctr">Jumlah</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <tr>
                                                        <td>Laboratorium</td>
                                                        <td>5</td>
                                                        <td>5</td>
                                                    </tr>
                                                    <tr>
                                                        <td>Perpustakaan</td>
                                                        <td>5</td>
                                                        <td>7</td>
                                                    </tr>
                                                </tbody><!-- end tbody -->
                                            </table><!-- end table -->
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="card">
                                    <div class="card-header">
                                        <h6 class="text-muted">Jumlah Peserta Diklat</h6>
                                    </div>
                                    <div class="card-body">
                                        <div class="table-responsive table-card">
                                            <table class="table table-bordered border-secondary align-middle table-nowrap mb-0">
                                                <thead class="text-muted table-light">
                                                    <tr>
                                                        <th scope="col" class="ctr">Jenis Diklat</th>
                                                        <th scope="col" class="ctr">Jumlah Judul Diklat</th>
                                                        <th scope="col" class="ctr">Jumlah</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <tr>
                                                        <td>Laboratorium</td>
                                                        <td>5</td>
                                                        <td>5</td>
                                                    </tr>
                                                    <tr>
                                                        <td>Perpustakaan</td>
                                                        <td>7</td>
                                                        <td>7</td>
                                                    </tr>
                                                </tbody><!-- end tbody -->
                                            </table><!-- end table -->
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-6">
                                <div class="card">
                                    <div class="card-header">
                                        <h6 class="text-muted">Jumlah Mahasiswa</h6>
                                    </div>
                                    <div class="card-body">
                                        <div class="table-responsive table-card">
                                            <table class="table table-bordered border-secondary align-middle table-nowrap mb-0">
                                                <thead class="text-muted table-light">
                                                    <tr>
                                                        <th scope="col" class="ctr">Jurusan</th>
                                                        <th scope="col" class="ctr">Prodi</th>
                                                        <th scope="col" class="ctr">Kategori</th>
                                                        <th scope="col" class="ctr">Jumlah</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <tr>
                                                        <td>Laboratorium</td>
                                                        <td>5</td>
                                                        <td>5</td>
                                                        <td>5</td>
                                                    </tr>
                                                    <tr>
                                                        <td>Perpustakaan</td>
                                                        <td>5</td>
                                                        <td>5</td>
                                                        <td>7</td>
                                                    </tr>
                                                </tbody><!-- end tbody -->
                                            </table><!-- end table -->
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="card">
                                    <div class="card-header">
                                        <h6 class="text-muted">Jumlah Penerima Beasiswa</h6>
                                    </div>
                                    <div class="card-body">
                                        <div class="table-responsive table-card">
                                            <table class="table table-bordered border-secondary align-middle table-nowrap mb-0">
                                                <thead class="text-muted table-light">
                                                    <tr>
                                                        <th scope="col" class="ctr">Jurusan</th>
                                                        <th scope="col" class="ctr">Prodi</th>
                                                        <th scope="col" class="ctr">Program</th>
                                                        <th scope="col" class="ctr">Jumlah</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <tr>
                                                        <td>Laboratorium</td>
                                                        <td>5</td>
                                                        <td>5</td>
                                                        <td>5</td>
                                                    </tr>
                                                    <tr>
                                                        <td>Perpustakaan</td>
                                                        <td>7</td>
                                                        <td>7</td>
                                                        <td>7</td>
                                                    </tr>
                                                </tbody><!-- end tbody -->
                                            </table><!-- end table -->
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-12">
                                <div class="card">
                                    <div class="card-header">
                                        <h6 class="text-muted">Jumlah Publikasi Ilmiah</h6>
                                    </div>
                                    <div class="card-body">
                                        <div class="table-responsive table-card">
                                            <table class="table table-bordered border-secondary align-middle table-nowrap mb-0">
                                                <thead class="text-muted table-light">
                                                    <tr>
                                                        <th scope="col" class="ctr" rowspan="2">Unit</th>
                                                        <th scope="col" class="ctr" colspan="3">Jumlah</th>
                                                        <th scope="col" class="ctr" rowspan="2">Kategori</th>
                                                    </tr>
                                                    <tr>
                                                        <th scope="col" class="ctr">Nasional</th>
                                                        <th scope="col" class="ctr">Internasional</th>
                                                        <th scope="col" class="ctr">Internasional Terindex Global</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <tr>
                                                        <td>Laboratorium</td>
                                                        <td>5</td>
                                                        <td>5</td>
                                                        <td>5</td>
                                                        <td>5</td>
                                                    </tr>
                                                    <tr>
                                                        <td>Perpustakaan</td>
                                                        <td>5</td>
                                                        <td>5</td>
                                                        <td>7</td>
                                                        <td>7</td>
                                                    </tr>
                                                </tbody><!-- end tbody -->
                                            </table><!-- end table -->
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-12">
                                <div class="card">
                                    <div class="card-header">
                                        <h6 class="text-muted">Akreditasi Institusi Prodi</h6>
                                    </div>
                                    <div class="card-body">
                                        <div class="table-responsive table-card">
                                            <table class="table table-bordered border-secondary align-middle table-nowrap mb-0">
                                                <thead class="text-muted table-light">
                                                    <tr>
                                                        <th scope="col" class="ctr">Unit</th>
                                                        <th scope="col" class="ctr">Peringkat</th>
                                                        <th scope="col" class="ctr">Skor</th>
                                                        <th scope="col" class="ctr">Tanggal Mulai</th>
                                                        <th scope="col" class="ctr">Tanggal Akhir</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <tr>
                                                        <td>Laboratorium</td>
                                                        <td>5</td>
                                                        <td>5</td>
                                                        <td>5</td>
                                                        <td>5</td>
                                                    </tr>
                                                    <tr>
                                                        <td>Perpustakaan</td>
                                                        <td>5</td>
                                                        <td>5</td>
                                                        <td>7</td>
                                                        <td>7</td>
                                                    </tr>
                                                </tbody><!-- end tbody -->
                                            </table><!-- end table -->
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-12">
                                <div class="card">
                                    <div class="card-header">
                                        <h6 class="text-muted">Alumni</h6>
                                    </div>
                                    <div class="card-body">
                                        <div class="table-responsive table-card">
                                            <table class="table table-bordered border-secondary align-middle table-nowrap mb-0">
                                                <thead class="text-muted">
                                                    <tr>
                                                        <th rowspan="2" class="ctr">Jurusan</th>
                                                        <th rowspan="2" class="ctr">Prodi</th>
                                                        <th colspan="4" class="ctr">Jumlah</th>
                                                    </tr>
                                                    <tr>
                                                        <th class="ctr">Bekerja</th>
                                                        <th class="ctr">Belum Bekerja</th>
                                                        <th class="ctr">Lanjut Kuliah</th>
                                                        <th class="ctr">Wiraswasta</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <tr>
                                                        <td>Laboratorium</td>
                                                        <td>5</td>
                                                        <td>5</td>
                                                        <td>5</td>
                                                        <td>5</td>
                                                        <td>5</td>
                                                    </tr>
                                                    <tr>
                                                        <td>Perpustakaan</td>
                                                        <td>5</td>
                                                        <td>5</td>
                                                        <td>7</td>
                                                        <td>7</td>
                                                        <td>7</td>
                                                    </tr>
                                                </tbody><!-- end tbody -->
                                            </table><!-- end table -->
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-12">
                                <div class="card">
                                    <div class="card-header">
                                        <h6 class="text-muted">Jumlah Mahasiswa Berprestasi</h6>
                                    </div>
                                    <div class="card-body">
                                        <div class="table-responsive table-card">
                                            <table class="table table-bordered border-secondary align-middle table-nowrap mb-0">
                                                <thead class="text-muted">
                                                    <tr>
                                                        <th class="ctr">Jurusan</th>
                                                        <th class="ctr">Prodi</th>
                                                        <th class="ctr">Kategori</th>
                                                        <th class="ctr">Bidang</th>
                                                        <th class="ctr">Jenis</th>
                                                        <th class="ctr">Jumlah</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <tr>
                                                        <td>Laboratorium</td>
                                                        <td>5</td>
                                                        <td>5</td>
                                                        <td>5</td>
                                                        <td>5</td>
                                                        <td>5</td>
                                                    </tr>
                                                    <tr>
                                                        <td>Perpustakaan</td>
                                                        <td>5</td>
                                                        <td>5</td>
                                                        <td>7</td>
                                                        <td>7</td>
                                                        <td>7</td>
                                                    </tr>
                                                </tbody><!-- end tbody -->
                                            </table><!-- end table -->
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div><!-- end card-body -->
        </div>
    </div>
</div>

@endsection

@push('after-script')
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
<script type="text/javascript" src="{{ asset('assets/libs/flatpickr/flatpickr.min.js') }}"></script>
<script src="{{ asset('assets/libs/chart.js/chart.umd.js') }}"></script>
<script src="{{ asset('assets/libs/swiper/swiper-bundle.min.js') }}"></script>
<script>
    var educationalStaffChart = null;
    var teachingStaffChart = null;
    var revenueChart = null;
    var expenseChart = null;
    var operationalBalanceChart = null;

    $(document).ready(function() {
        new DataTable('.border-secondary');
        console.log($('#yearpicker').val());

        console.log(getChartColorsArray('lineChart2'));

        $("#yearpicker").change(function() {
            console.log("The text has been changed.");
            console.log($('#yearpicker').val());
            // updateEducationalStaffChart();
            // getData();
            generateAllChart();
        });

        $("#teaching_staff_field").change(function() {
            // getData();
            updateTeachingStaffChart();
        });

        $("#revenue_kd_akun").change(function() {
            // getData();
            updateRevenueChart();
        });

        $("#expense_kd_akun").change(function() {
            // getData();
            updateExpenseChart();
        });

        $("#operational_balance_no_rekening").change(function() {
            // getData();
            updateOperationalBalanceChart();
        });

        // getData();
        generateAllChart();
        // updateEducationalStaffChart();
    });

    function getRandomNumber() {
        return Math.floor(Math.random() * 101);
    }

    function generateAllChart() {
        updateEducationalStaffChart();
        updateTeachingStaffChart();
        updateRevenueChart();
        updateExpenseChart();
        updateOperationalBalanceChart();
    }

    function updateEducationalStaffChart() {
        if (educationalStaffChart) {
            // console.log("sudah ada");
            educationalStaffChart.destroy();
        }

        const ctx = document.getElementById('educational-staff-chart').getContext('2d');

        $.ajax({
            url: "{{ url('/admin/dashboard/get-educational-staff') }}",
            type: "POST",
            data: {
                "year": $("#yearpicker").val(),
                // "teaching_staff_field": $("#teaching_staff_field").val(),
                "_token": "{{ csrf_token() }}"
            },
            dataType: "JSON",
            success: function(data) {
                // console.log('hai lagi');
                // console.log(data.educational_staff);
                // updateEducationalStaffChart(data.educational_staff);
                // updateTeachingStaffChart(data.teaching_staff);

                // $('#btnSave').html(update_text); // Set Title to Bootstrap modal title
                // $('#modal_form').modal('show'); // show bootstrap modal when complete loaded
                // $('#modal-title').text('Edit Data'); // Set title to Bootstrap modal title
                if (data.length > 0) {
                    $('#educational-staff-pns').text(data[0] + ' Pegawai');
                    $('#educational-staff-pegawai_pppk').text(data[1] + ' Pegawai');
                    $('#educational-staff-non_pns').text(data[2] + ' Pegawai');
                    $('#educational-staff-total').text((parseInt(data[0]) + parseInt(data[1]) + parseInt(data[2])) + ' Pegawai');

                    educationalStaffChart = new Chart(ctx, {
                        type: 'pie',
                        data: {
                            labels: [
                                "PNS",
                                "PPPK",
                                "Non-PNS"
                            ],
                            datasets: [{
                                data: data,
                                backgroundColor: ["#05668d", "#028090", "#00a896"],
                                hoverBackgroundColor: ["#05668d", "#028090", "#00a896"],
                                hoverBorderColor: "#fff"
                            }]
                        },
                        options: {
                            plugins: {
                                legend: {
                                    labels: {
                                        font: {
                                            family: 'Poppins',
                                        }
                                    }
                                },
                            }
                        }
                    });
                } else {
                    $('#educational-staff-pns').text(0 + ' Pegawai');
                    $('#educational-staff-pegawai_pppk').text(0 + ' Pegawai');
                    $('#educational-staff-non_pns').text(0 + ' Pegawai');
                    $('#educational-staff-total').text(0 + ' Pegawai');
                    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
                    ctx.font = '20px Poppins';
                    ctx.textAlign = 'center';
                    ctx.fillText('No data available', ctx.canvas.width / 2, ctx.canvas.height / 2);
                }
            },
            error: function(jqXHR, textStatus, errorThrown) {
                // alert('Error get data from ajax');
                console.log(jqXHR);
                console.log(textStatus);
                console.log(errorThrown);
                // swal.fire("Error!", textStatus, "error");
            }
        });

    }

    function updateTeachingStaffChart() {
        // Cek apakah grafik sudah ada, jika iya, destroy
        if (teachingStaffChart) {
            teachingStaffChart.destroy();
        }

        // Ambil elemen canvas
        const canvas = document.getElementById('teaching-staff-chart');
        const ctx = canvas.getContext('2d');

        // Ajax untuk mengambil data
        $.ajax({
            url: "{{ url('/admin/dashboard/get-teaching-staff') }}",
            type: "POST",
            data: {
                "year": $("#yearpicker").val(),
                "field": $("#teaching_staff_field").val(),
                "_token": "{{ csrf_token() }}"
            },
            dataType: "JSON",
            success: function(data) {
                console.log(data);
                // Cek jika data tidak kosong
                if (data.prodi.length > 0) {
                    // Buat grafik
                    teachingStaffChart = new Chart(ctx, {
                        type: 'bar',
                        data: {
                            labels: data.prodi,
                            datasets: [{
                                label: "Jumlah Pegawai",
                                backgroundColor: "#007BFF",
                                borderColor: "#007BFF",
                                borderWidth: 1,
                                hoverBackgroundColor: "#007BFF",
                                hoverBorderColor: "#007BFF",
                                data: data.jumlah
                            }]
                        },
                        options: {
                            x: {
                                ticks: {
                                    font: {
                                        family: 'Poppins',
                                    },
                                },
                            },
                            y: {
                                ticks: {
                                    font: {
                                        family: 'Poppins',
                                    },
                                },
                            },
                            plugins: {
                                legend: {
                                    labels: {
                                        font: {
                                            family: 'Poppins',
                                        }
                                    }
                                },
                            }
                        }
                    });
                } else {
                    // Jika data kosong, tampilkan pesan "No data available"
                    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
                    ctx.font = '20px Poppins';
                    ctx.textAlign = 'center';
                    ctx.fillText('No data available', ctx.canvas.width / 2, ctx.canvas.height / 2);
                }
            },
            error: function(jqXHR, textStatus, errorThrown) {
                console.error('Error:', textStatus);
                console.error('Error thrown:', errorThrown);
            }
        });
    }

    function updateRevenueChart() {
        // Cek apakah grafik sudah ada, jika iya, destroy
        if (revenueChart) {
            revenueChart.destroy();
        }

        // Ambil elemen canvas
        const canvas = document.getElementById('revenue-chart');
        const ctx = canvas.getContext('2d');

        // Ajax untuk mengambil data
        $.ajax({
            url: "{{ url('/admin/dashboard/get-revenue') }}",
            type: "POST",
            data: {
                "year": $("#yearpicker").val(),
                "kd_akun": $("#revenue_kd_akun").val(),
                "_token": "{{ csrf_token() }}"
            },
            dataType: "JSON",
            success: function(data) {
                console.log(data);
                // Cek jika data tidak kosong
                if (data.bulan.length > 0) {
                    // Buat grafik
                    revenueChart = new Chart(ctx, {
                        type: 'bar',
                        data: {
                            labels: data.bulan,
                            datasets: [{
                                label: "Jumlah Penerimaan",
                                backgroundColor: "#007BFF",
                                borderColor: "#007BFF",
                                borderWidth: 1,
                                hoverBackgroundColor: "#007BFF",
                                hoverBorderColor: "#007BFF",
                                data: data.jumlah
                            }]
                        },
                        options: {
                            x: {
                                ticks: {
                                    font: {
                                        family: 'Poppins',
                                    },
                                },
                            },
                            y: {
                                ticks: {
                                    font: {
                                        family: 'Poppins',
                                    },
                                },
                            },
                            plugins: {
                                legend: {
                                    labels: {
                                        font: {
                                            family: 'Poppins',
                                        }
                                    }
                                },
                            }
                        }
                    });
                } else {
                    // Jika data kosong, tampilkan pesan "No data available"
                    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
                    ctx.font = '20px Poppins';
                    ctx.textAlign = 'center';
                    ctx.fillText('No data available', ctx.canvas.width / 2, ctx.canvas.height / 2);
                }
            },
            error: function(jqXHR, textStatus, errorThrown) {
                console.error('Error:', textStatus);
                console.error('Error thrown:', errorThrown);
            }
        });
    }

    function updateExpenseChart() {
        // Cek apakah grafik sudah ada, jika iya, destroy
        if (expenseChart) {
            expenseChart.destroy();
        }

        // Ambil elemen canvas
        const canvas = document.getElementById('expense-chart');
        const ctx = canvas.getContext('2d');

        // Ajax untuk mengambil data
        $.ajax({
            url: "{{ url('/admin/dashboard/get-expense') }}",
            type: "POST",
            data: {
                "year": $("#yearpicker").val(),
                "kd_akun": $("#expense_kd_akun").val(),
                "_token": "{{ csrf_token() }}"
            },
            dataType: "JSON",
            success: function(data) {
                console.log(data);
                // Cek jika data tidak kosong
                if (data.bulan.length > 0) {
                    // Buat grafik
                    expenseChart = new Chart(ctx, {
                        type: 'bar',
                        data: {
                            labels: data.bulan,
                            datasets: [{
                                label: "Jumlah Pengeluaran",
                                backgroundColor: "#007BFF",
                                borderColor: "#007BFF",
                                borderWidth: 1,
                                hoverBackgroundColor: "#007BFF",
                                hoverBorderColor: "#007BFF",
                                data: data.jumlah
                            }]
                        },
                        options: {
                            x: {
                                ticks: {
                                    font: {
                                        family: 'Poppins',
                                    },
                                },
                            },
                            y: {
                                ticks: {
                                    font: {
                                        family: 'Poppins',
                                    },
                                },
                            },
                            plugins: {
                                legend: {
                                    labels: {
                                        font: {
                                            family: 'Poppins',
                                        }
                                    }
                                },
                            }
                        }
                    });
                } else {
                    // Jika data kosong, tampilkan pesan "No data available"
                    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
                    ctx.font = '20px Poppins';
                    ctx.textAlign = 'center';
                    ctx.fillText('No data available', ctx.canvas.width / 2, ctx.canvas.height / 2);
                }
            },
            error: function(jqXHR, textStatus, errorThrown) {
                console.error('Error:', textStatus);
                console.error('Error thrown:', errorThrown);
            }
        });
    }

    function updateOperationalBalanceChart() {
        // Cek apakah grafik sudah ada, jika iya, destroy
        if (operationalBalanceChart) {
            operationalBalanceChart.destroy();
        }

        // Ambil elemen canvas
        const canvas = document.getElementById('operational-balance-chart');
        const ctx = canvas.getContext('2d');

        // Ajax untuk mengambil data
        $.ajax({
            url: "{{ url('/admin/dashboard/get-operational-balance') }}",
            type: "POST",
            data: {
                "year": $("#yearpicker").val(),
                "no_rekening": $("#operational_balance_no_rekening").val(),
                "_token": "{{ csrf_token() }}"
            },
            dataType: "JSON",
            success: function(data) {
                console.log(data);
                // Cek jika data tidak kosong
                if (data.bulan.length > 0) {
                    // Buat grafik
                    operationalBalanceChart = new Chart(ctx, {
                        type: 'line',
                        data: {
                            labels: data.bulan,
                            datasets: [{
                                label: "Jumlah Saldo Rekening - Operasional",
                                fill: true,
                                lineTension: 0.5,
                                backgroundColor: "#d2ecf9",
                                borderColor: "#25a0e2",
                                borderCapStyle: 'butt',
                                borderDash: [],
                                borderDashOffset: 0.0,
                                borderJoinStyle: 'miter',
                                pointBorderColor: "#25a0e2",
                                pointBackgroundColor: "#fff",
                                pointBorderWidth: 1,
                                pointHoverRadius: 5,
                                pointHoverBackgroundColor: "#25a0e2",
                                pointHoverBorderColor: "#fff",
                                pointHoverBorderWidth: 2,
                                pointRadius: 1,
                                pointHitRadius: 10,
                                data: data.jumlah
                            }]
                        },
                        options: {
                            x: {
                                ticks: {
                                    font: {
                                        family: 'Poppins',
                                    },
                                },
                            },
                            y: {
                                ticks: {
                                    font: {
                                        family: 'Poppins',
                                    },
                                },
                            },
                            plugins: {
                                legend: {
                                    labels: {
                                        font: {
                                            family: 'Poppins',
                                        }
                                    }
                                },
                            }
                        }
                    });
                } else {
                    // Jika data kosong, tampilkan pesan "No data available"
                    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
                    ctx.font = '20px Poppins';
                    ctx.textAlign = 'center';
                    ctx.fillText('No data available', ctx.canvas.width / 2, ctx.canvas.height / 2);
                }
            },
            error: function(jqXHR, textStatus, errorThrown) {
                console.error('Error:', textStatus);
                console.error('Error thrown:', errorThrown);
            }
        });
    }

    $('#yearpicker').datepicker({
        autoclose: true,
        minViewMode: 2,
        format: 'yyyy',
    });

    function getChartColorsArray(chartId) {
        if (document.getElementById(chartId) !== null) {
            var colors = document.getElementById(chartId).getAttribute("data-colors");
            colors = JSON.parse(colors);
            return colors.map(function(value) {
                var newValue = value.replace(" ", "");
                if (newValue.indexOf(",") === -1) {
                    var color = getComputedStyle(document.documentElement).getPropertyValue(newValue);
                    if (color) return color;
                    else return newValue;;
                } else {
                    var val = value.split(',');
                    if (val.length == 2) {
                        var rgbaColor = getComputedStyle(document.documentElement).getPropertyValue(val[0]);
                        rgbaColor = "rgba(" + rgbaColor + "," + val[1] + ")";
                        return rgbaColor;
                    } else {
                        return newValue;
                    }
                }
            });
        }
    }

    Chart.defaults.borderColor = "rgba(133, 141, 152, 0.1)";
    Chart.defaults.color = "#858d98";

    var isbarchart = document.getElementById('bar');
    barChartColor = getChartColorsArray('bar');
    if (barChartColor) {
        isbarchart.setAttribute("width", isbarchart.parentElement.offsetWidth);
        var barChart = new Chart(isbarchart, {
            type: 'bar',
            data: {
                labels: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
                datasets: [{
                    label: "Sales Analytics",
                    backgroundColor: barChartColor[0],
                    borderColor: barChartColor[0],
                    borderWidth: 1,
                    hoverBackgroundColor: barChartColor[1],
                    hoverBorderColor: barChartColor[1],
                    data: [65, 59, 81, 45, 56, 80, 50, 20, 100, 200, 300, 20, 33]
                }]
            },
            options: {
                x: {
                    ticks: {
                        font: {
                            family: 'Poppins',
                        },
                    },
                },
                y: {
                    ticks: {
                        font: {
                            family: 'Poppins',
                        },
                    },
                },
                plugins: {
                    legend: {
                        labels: {
                            font: {
                                family: 'Poppins',
                            }
                        }
                    },
                }
            }
        });
    }

    var isbarchart2 = document.getElementById('bar2');
    barChartColor = getChartColorsArray('bar');
    if (barChartColor) {
        isbarchart2.setAttribute("width", isbarchart2.parentElement.offsetWidth);
        var barChart = new Chart(isbarchart2, {
            type: 'bar',
            data: {
                labels: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
                datasets: [{
                    label: "Sales Analytics",
                    backgroundColor: barChartColor[0],
                    borderColor: barChartColor[0],
                    borderWidth: 1,
                    hoverBackgroundColor: barChartColor[1],
                    hoverBorderColor: barChartColor[1],
                    data: [65, 59, 81, 45, 56, 80, 50, 20, 100, 200, 300, 20, 33]
                }]
            },
            options: {
                x: {
                    ticks: {
                        font: {
                            family: 'Poppins',
                        },
                    },
                },
                y: {
                    ticks: {
                        font: {
                            family: 'Poppins',
                        },
                    },
                },
                plugins: {
                    legend: {
                        labels: {
                            font: {
                                family: 'Poppins',
                            }
                        }
                    },
                }
            }
        });
    }

    var islinechart1 = document.getElementById('lineChart1');
    lineChartColor = getChartColorsArray('lineChart1');
    if (lineChartColor) {
        islinechart1.setAttribute("width", islinechart1.parentElement.offsetWidth);

        var lineChart = new Chart(islinechart1, {
            type: 'line',
            data: {
                labels: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October"],
                datasets: [{
                    label: "Saldo",
                    fill: true,
                    lineTension: 0.5,
                    backgroundColor: lineChartColor[0],
                    borderColor: lineChartColor[1],
                    borderCapStyle: 'butt',
                    borderDash: [],
                    borderDashOffset: 0.0,
                    borderJoinStyle: 'miter',
                    pointBorderColor: lineChartColor[1],
                    pointBackgroundColor: "#fff",
                    pointBorderWidth: 1,
                    pointHoverRadius: 5,
                    pointHoverBackgroundColor: lineChartColor[1],
                    pointHoverBorderColor: "#fff",
                    pointHoverBorderWidth: 2,
                    pointRadius: 1,
                    pointHitRadius: 10,
                    data: [65, 59, 80, 81, 56, 55, 40, 55, 30, 80]
                }]
            },
            options: {
                x: {
                    ticks: {
                        font: {
                            family: 'Poppins',
                        },
                    },
                },
                y: {
                    ticks: {
                        font: {
                            family: 'Poppins',
                        },
                    },
                },
                plugins: {
                    legend: {
                        labels: {
                            // This more specific font property overrides the global property
                            font: {
                                family: 'Poppins',
                            }
                        }
                    },
                },
            },

        });
    }

    var islinechart2 = document.getElementById('lineChart2');
    lineChartColor = getChartColorsArray('lineChart2');
    if (lineChartColor) {
        islinechart2.setAttribute("width", islinechart2.parentElement.offsetWidth);

        var lineChart = new Chart(islinechart2, {
            type: 'line',
            data: {
                labels: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October"],
                datasets: [{
                    label: "Saldo",
                    fill: true,
                    lineTension: 0.5,
                    backgroundColor: lineChartColor[0],
                    borderColor: lineChartColor[1],
                    borderCapStyle: 'butt',
                    borderDash: [],
                    borderDashOffset: 0.0,
                    borderJoinStyle: 'miter',
                    pointBorderColor: lineChartColor[1],
                    pointBackgroundColor: "#fff",
                    pointBorderWidth: 1,
                    pointHoverRadius: 5,
                    pointHoverBackgroundColor: lineChartColor[1],
                    pointHoverBorderColor: "#fff",
                    pointHoverBorderWidth: 2,
                    pointRadius: 1,
                    pointHitRadius: 10,
                    data: [65, 59, 80, 81, 56, 55, 40, 55, 30, 80]
                }]
            },
            options: {
                x: {
                    ticks: {
                        font: {
                            family: 'Poppins',
                        },
                    },
                },
                y: {
                    ticks: {
                        font: {
                            family: 'Poppins',
                        },
                    },
                },
                plugins: {
                    legend: {
                        labels: {
                            // This more specific font property overrides the global property
                            font: {
                                family: 'Poppins',
                            }
                        }
                    },
                },
            },

        });
    }

    var islinechart3 = document.getElementById('lineChart3');
    lineChartColor = getChartColorsArray('lineChart3');
    if (lineChartColor) {
        islinechart3.setAttribute("width", islinechart3.parentElement.offsetWidth);

        var lineChart = new Chart(islinechart3, {
            type: 'line',
            data: {
                labels: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October"],
                datasets: [{
                    label: "Saldo",
                    fill: true,
                    lineTension: 0.5,
                    backgroundColor: lineChartColor[0],
                    borderColor: lineChartColor[1],
                    borderCapStyle: 'butt',
                    borderDash: [],
                    borderDashOffset: 0.0,
                    borderJoinStyle: 'miter',
                    pointBorderColor: lineChartColor[1],
                    pointBackgroundColor: "#fff",
                    pointBorderWidth: 1,
                    pointHoverRadius: 5,
                    pointHoverBackgroundColor: lineChartColor[1],
                    pointHoverBorderColor: "#fff",
                    pointHoverBorderWidth: 2,
                    pointRadius: 1,
                    pointHitRadius: 10,
                    data: [65, 59, 80, 81, 56, 55, 40, 55, 30, 80]
                }]
            },
            options: {
                x: {
                    ticks: {
                        font: {
                            family: 'Poppins',
                        },
                    },
                },
                y: {
                    ticks: {
                        font: {
                            family: 'Poppins',
                        },
                    },
                },
                plugins: {
                    legend: {
                        labels: {
                            // This more specific font property overrides the global property
                            font: {
                                family: 'Poppins',
                            }
                        }
                    },
                },
            },

        });
    }

    var swiper = new Swiper(".cryptoSlider", {
        slidesPerView: 1,
        loop: false,
        spaceBetween: 24,
        navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
        },
        autoplay: {
            delay: 2500,
            disableOnInteraction: false,
        },
        breakpoints: {
            640: {
                slidesPerView: 2,
            },
            768: {
                slidesPerView: 2.5,
            },
            1024: {
                slidesPerView: 3,
            },
            1200: {
                slidesPerView: 5,
            },
        },
    });

    // var ispiechart = document.getElementById('educational-staff-chart');


    // var teachingStaffChartElement = document.getElementById('teaching-staff-chart');
    // teachingStaffChartElement.setAttribute("width", teachingStaffChartElement.parentElement.offsetWidth);
    // var teachingStaffChart = new Chart(teachingStaffChartElement, {
    //     type: 'bar',
    //     data: {
    //         labels: ["D3 Farmasi",
    //             "D3 Gizi",
    //             "D3 Kebidanan",
    //             "D3 Kebidanan Tapanuli Utara",
    //             "D3 Kebidanan P. Siantar",
    //             "D3 Kebidanan P. Sidempuan",
    //             "D3 Keperawatan",
    //             "D3 Keperawatan Dairi",
    //             "D3 Keperawatan Tapanuli Tengah",
    //             "D3 Keparawatan Gunungsitoli",
    //             "D3 Kesehatan Gigi",
    //             "D3 Sanitasi",
    //             "D3 Teknologi Laboratorium Medis",
    //             "D4 Gizi dan Dietetika",
    //             "D4 Kebidanan",
    //             "D4 Keperawatan",
    //             "D4 Sanitasi Lingkungan",
    //             "Pendidikan Profesi Bidan",
    //             "Pendidikan Profesi Ners"
    //         ],
    //         datasets: [{
    //             label: "Jumlah Pegawai",
    //             backgroundColor: "#007BFF",
    //             borderColor: "#007BFF",
    //             borderWidth: 1,
    //             hoverBackgroundColor: "#007BFF",
    //             hoverBorderColor: "#007BFF",
    //             data: [65, 59, 81, 45, 56, 80, 50, 20, 100, 200, 300, 20, 33, 20, 100, 200, 300, 20, 33]
    //         }]
    //     },
    //     options: {
    //         x: {
    //             ticks: {
    //                 font: {
    //                     family: 'Poppins',
    //                 },
    //             },
    //         },
    //         y: {
    //             ticks: {
    //                 font: {
    //                     family: 'Poppins',
    //                 },
    //             },
    //         },
    //         plugins: {
    //             legend: {
    //                 labels: {
    //                     font: {
    //                         family: 'Poppins',
    //                     }
    //                 }
    //             },
    //         }
    //     }
    // });
</script>

@endpush