@extends('Layouts_admin.index')
@section('content')
<style>
#loading{
    transition: display 1s ease-in-out;
}
.db-preloader {
    background-color: #fff; 
    width: 100%; 
    height: 100%;
    max-height: 450px;
    z-index: 9; 
    place-items: center; 
    /*! margin-top: 2rem; */
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    /* top: 90px; */
}
</style>
<!-- widget -->
<div class="container pt-6" style="width: 100%; z-index: 1;">
    <div class="row">
        <div class="col-lg-12">
            <div class="row">
                <div>
                    <h6 class="fw-semibold block" style="font-size: 1rem;">Total Peserta</h6>
                </div>
            </div>
            <div class="row">
                <div class="col-md-4 col-sm-6">
                    <div class="card bg-white mb-4 shadow-lg" style="overflow: hidden;">
                        <div class="db-preloader preloader text-center d-none loading-jumlahpeserta">
                            <img src="{{ asset('needed/img/loading/loader-2.gif') }}">
                        </div>
                        <span class="position-absolute text-purple opacity-25" style="font-size: 150px;top: -60px;left: 120px;overflow: hidden;filter: grayscale(1);">
                            <i class='bx bx-bar-chart-alt-2'></i>
                        </span>
                        <div class="card-body px-3 py-4">

                            <div class="row">
                                <div class="col-4">
                                    <span class="fs-36 text-secondary ps-2">
                                        <i class="fa-solid fa-user-group"></i>
                                    </span> 
                                </div>
                                <div class="col-8 px-0">
                                    <h4 class="text-muted fs-16 mb-0">Total Peserta</h4>
                                    <div class="d-flex">
                                        <h4 class="fs-26 text-muted mb-0 fw-semibold" id="asemua_peserta">-</h4>
                                        {{-- <h4 class="fs-16 text-light mb-0 ms-8 bg-success py-1 px-1 rounded" style="z-index: 1;"><span><i class="fa-solid fa-arrow-up"></i></span> 4.5%</h4> --}}
                                    </div>
                                </div>
                            </div> 
                        </div>
                    </div>
                </div>
                <div class="col-md-4 col-sm-6">
                    <div class="card bg-light mb-4 shadow-lg" style="overflow: hidden;">
                        <div class="db-preloader preloader text-center d-none loading-jumlahpeserta">
                            <img src="{{ asset('needed/img/loading/loader-2.gif') }}">
                        </div>
                        <span class="position-absolute text-primary opacity-25" style="font-size: 150px;top: -60px;left: 120px;overflow: hidden;filter: grayscale(1);">
                            <i class="fa-solid fa-arrow-up-right-dots"></i>
                        </span>
                        <div class="card-body px-3 py-4">
                            <div class="row">
                                <div class="col-4">
                                    <span class="fs-34 text-secondary ps-2">
                                        <i class="fa-solid fa-user-tie"></i>
                                    </span> 
                                </div>
                                <div class="col-8 px-0">
                                    <h4 class="text-muted text-ash fs-16 mb-0">Peserta Internal</h4>
                                    <div class="d-flex">
                                        <h4 class="fs-26 text-muted mb-0 fw-semibold" id="apeserta_internal">-</h4>
                                        {{-- <h4 class="fs-16 text-light bg-success p-1 rounded mb-0 ms-8" style="z-index: 1;"><span><i class="fa-solid fa-arrow-up"></i></span> 4.5%</h4> --}}
                                    </div>
                                </div>
                            </div> 
                        </div>
                    </div>
                </div>
                <div class="col-md-4 col-sm-6">
                    <div class="card bg-light mb-4 shadow-lg" style="overflow: hidden;">
                        <div class="db-preloader preloader text-center d-none loading-jumlahpeserta">
                            <img src="{{ asset('needed/img/loading/loader-2.gif') }}">
                        </div>
                        <span class="position-absolute text-yellow opacity-25" style="font-size: 150px;top: -60px;left: 120px;overflow: hidden;filter: grayscale(1);">
                            <i class="fa-solid fa-arrow-trend-up"></i>
                        </span>
                        <div class="card-body px-3 py-4">
                            <div class="row">
                                <div class="col-4">
                                    <span class="fs-34 text-secondary ps-2">
                                    <i class="fa-solid fa-user-large"></i>
                                    </span> 
                                </div>
                                <div class="col-8 px-0">
                                    <h4 class="text-ash fs-16 mb-0">Peserta External</h4>
                                    <div class="d-flex">
                                        <h4 class="fs-26 text-muted mb-0 fw-semibold" id="apeserta_external">-</h4>
                                        {{-- <h4 class="fs-16 text-light bg-success rounded p-1 mb-0 ms-8" style="z-index: 1;"><span><i class="fa-solid fa-arrow-up"></i></span> 4.5%</h4> --}}
                                    </div>
                                </div>
                            </div> 
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="row">
                <div>
                    <h6 class="fw-semibold block" style="font-size: 1rem;">Total Peserta Aktif</h6>
                </div>
            </div>
            <div class="row">
                <div class="col-md-4 col-sm-6">
                    <div class="card bg-white mb-4 shadow-lg" style="overflow: hidden;">
                        <div class="db-preloader preloader text-center d-none loading-jumlahpeserta">
                            <img src="{{ asset('needed/img/loading/loader-2.gif') }}">
                        </div>
                        <span class="position-absolute text-purple opacity-25" style="font-size: 150px;top: -60px;left: 120px;overflow: hidden;">
                            <i class='bx bx-bar-chart-alt-2'></i>
                        </span>
                        <div class="card-body px-3 py-4">

                            <div class="row">
                                <div class="col-4">
                                    <span class="fs-36 text-secondary ps-2">
                                        <i class="fa-solid fa-user-group"></i>
                                    </span> 
                                </div>
                                <div class="col-8 px-0">
                                    <h4 class="text-purple fs-16 mb-0">Semua Peserta</h4>
                                    <div class="d-flex">
                                        <h4 class="fs-26 text-purple mb-0 fw-semibold" id="semua_peserta">-</h4>
                                        {{-- <h4 class="fs-16 text-light mb-0 ms-8 bg-success py-1 px-1 rounded" style="z-index: 1;"><span><i class="fa-solid fa-arrow-up"></i></span> 4.5%</h4> --}}
                                    </div>
                                </div>
                            </div> 
                        </div>
                    </div>
                </div>
                <div class="col-md-4 col-sm-6">
                    <div class="card bg-light mb-4 shadow-lg" style="overflow: hidden;">
                        <div class="db-preloader preloader text-center d-none loading-jumlahpeserta">
                            <img src="{{ asset('needed/img/loading/loader-2.gif') }}">
                        </div>
                        <span class="position-absolute text-primary opacity-25" style="font-size: 150px;top: -60px;left: 120px;overflow: hidden;">
                            <i class="fa-solid fa-arrow-up-right-dots"></i>
                        </span>
                        <div class="card-body px-3 py-4">
                            <div class="row">
                                <div class="col-4">
                                    <span class="fs-34 text-secondary ps-2">
                                        <i class="fa-solid fa-user-tie"></i>
                                    </span> 
                                </div>
                                <div class="col-8 px-0">
                                    <h4 class="text-primary text-ash fs-16 mb-0">Peserta Internal</h4>
                                    <div class="d-flex">
                                        <h4 class="fs-26 text-primary mb-0 fw-semibold" id="peserta_internal">-</h4>
                                        {{-- <h4 class="fs-16 text-light bg-success p-1 rounded mb-0 ms-8" style="z-index: 1;"><span><i class="fa-solid fa-arrow-up"></i></span> 4.5%</h4> --}}
                                    </div>
                                </div>
                            </div> 
                        </div>
                    </div>
                </div>
                <div class="col-md-4 col-sm-6">
                    <div class="card bg-light mb-4 shadow-lg" style="overflow: hidden;">
                        <div class="db-preloader preloader text-center d-none loading-jumlahpeserta">
                            <img src="{{ asset('needed/img/loading/loader-2.gif') }}">
                        </div>
                        <span class="position-absolute text-yellow opacity-25" style="font-size: 150px;top: -60px;left: 120px;overflow: hidden;">
                            <i class="fa-solid fa-arrow-trend-up"></i>
                        </span>
                        <div class="card-body px-3 py-4">
                            <div class="row">
                                <div class="col-4">
                                    <span class="fs-34 text-secondary ps-2">
                                    <i class="fa-solid fa-user-large"></i>
                                    </span> 
                                </div>
                                <div class="col-8 px-0">
                                    <h4 class="text-yellow text-ash fs-16 mb-0">Peserta External</h4>
                                    <div class="d-flex">
                                        <h4 class="fs-26 text-yellow mb-0 fw-semibold" id="peserta_external">-</h4>
                                        {{-- <h4 class="fs-16 text-light bg-success rounded p-1 mb-0 ms-8" style="z-index: 1;"><span><i class="fa-solid fa-arrow-up"></i></span> 4.5%</h4> --}}
                                    </div>
                                </div>
                            </div> 
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-12 mb-3 position-relative">
            <div class="d-flex align-items-center" style="position: absolute; right: 12px; column-gap: 10px;">
                <div class="text"><small id="datedata">Loading...</small></div>
                <div class="p-1 bg-light rounded" id="reportrange3" style="cursor: pointer;z-index: 1;border: 1px solid #08ac39; max-width: 60px;"
                    data-toggle="tooltip" title="Saat berwarna abu, maka menampilkan semua tanggal.">
                    <i class='bx bx-calendar'></i>&nbsp;
                    <i class="fa fa-caret-down"></i>
                    <input type="hidden" name="tanggal-start" id="filter-tanggal-start" value="">
                    <input type="hidden" name="tanggal-end" id="filter-tanggal-end" value="">
                </div>
            </div>

            <button class="btn-card fs-14 show active-card" data-bs-toggle="tab" onclick="myFunction()">Peserta</button>
            <button class="btn-card fs-14 show" data-bs-toggle="tab" onclick="myTwo()">Pelatihan</button>
            <button class="btn-card fs-14 show" data-bs-toggle="tab" onclick="myThree()">Status</button>
            <div class="row d-flex">
                <div class="col bg-transparent" id="myDIV" style="position: relative;">
                    <div class="card">
                        <div class="card-header py-1 px-1">
                            <ul class="nav nav-tabs nav-pills">
                                <li class="nav-item"> 
                                    <a class="nav-link active" data-bs-toggle="tab" href="#tab1-1">
                                    <span class="pe-1">
                                        <i class='bx bx-pie-chart-alt-2' ></i>
                                    </span>
                                    </a>
                                </li>
                                <li class="nav-item"> 
                                    <a class="nav-link" data-bs-toggle="tab" href="#tab1-2">
                                    <span class="pe-1">
                                        <i class='bx bx-bar-chart-alt-2' ></i>
                                    </span>
                                    </a> 
                                </li>
                                <li class="nav-item"> 
                                    <a class="nav-link" data-bs-toggle="tab" href="#tab1-3">
                                    <span class="pe-1">
                                    <i class='bx bx-table' ></i>
                                    </span>
                                    </a> 
                                </li>
                            </ul>
                        </div>
                        <div class="card-body py-0" style="height: 450px; overflow-y: auto;">
                            <div class="db-preloader preloader text-center d-none" id="loading-peserta" >
                                <img src="{{ asset('needed/img/loading/loader-2.gif') }}">
                            </div>

                            <!-- /.nav-tabs -->
                            <div class="tab-content">
                                <div class="tab-pane fade show active" id="tab1-1">
                                    <div class="chartbox">
                                        <figure class="highcharts-figure">
                                            <div id="modulStatsDashboard"></div>
                                        </figure>
                                    </div>
                                </div>
                                <!--/.tab-pane -->
                                <div class="tab-pane fade" id="tab1-2">
                                <div class="chartbox">
                                        <figure class="highcharts-figure">
                                            <div id="modulStatsBarDashboard"></div>
                                        </figure>
                                    </div>
                                </div>
                                <!--/.tab-pane -->
                                <div class="tab-pane fade" id="tab1-3">
                                    <div class="row text-end" style="right: 12px; top: 90px; cursor: pointer;">
                                        <div class="col-12">
                                            <div class="dropdown">
                                                <i class="fa-solid fa-bars" data-bs-toggle="dropdown" aria-expanded="false"></i>
                                                <ul class="dropdown-menu">
                                                    <li><a href="#" onclick="exportData2('ExcelDashboardPeserta', 0, null, dttablepeserta)" class="dropdown-item" style="font-weight: normal;">Download Xls</a></li>
                                                    <li><a href="#" onclick="exportData2('PdfDashboardPeserta', 0, null, dttablepeserta)" class="dropdown-item" style="font-weight: normal;">Download Pdf</a></li>
                                                    <li><a href="#" onclick="exportData2('CsvDashboardPeserta', 0, null, dttablepeserta)" class="dropdown-item" style="font-weight: normal;">Download Csv</a></li>
                                                </ul>
                                                </div>
                                        </div>
                                    </div>
                                    <div class="table-responsive">
                                        <table class="table table-bordered" id="table-peserta" width="100%" cellspacing="0">
                                            <thead class="bg-primary">
                                                <tr class="text-white">
                                                    <th class="text-center fw-semibold">No</th>
                                                    <th class="text-center fw-semibold">Status Peserta</th>
                                                    <th class="text-center fw-semibold">Modul Selesai</th>
                                                    <th class="text-center fw-semibold">Modul Belum Selesai</th>
                                                    <th class="text-center fw-semibold">Jumlah Peserta</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                                <!--/.tab-pane -->
                            </div>
                            <!-- /.tab-content -->     
                        </div>
                        
                    </div>
                </div> 
                <div class="col bg-transparent" id="myCard">
                    <div class="card">
                        <div class="card-header py-1 px-1">
                            <ul class="nav nav-tabs nav-pills">
                                <li class="nav-item"> 
                                    <a class="nav-link active" data-bs-toggle="tab" href="#tab2-1">
                                    <span class="pe-1">
                                        <i class='bx bx-pie-chart-alt-2' ></i>
                                    </span>
                                    </a>
                                </li>
                                <li class="nav-item "> 
                                    <a class="nav-link" data-bs-toggle="tab" href="#tab2-2">
                                    <span class="pe-1">
                                        <i class='bx bx-bar-chart-alt-2' ></i>
                                    </span>
                                    </a> 
                                </li>
                                <li class="nav-item"> 
                                    <a class="nav-link" data-bs-toggle="tab" href="#tab2-3">
                                    <span class="pe-1">
                                    <i class='bx bx-table' ></i>
                                    </span>
                                    </a> 
                                </li>
                            </ul>
                        </div>
                        <div class="card-body py-0" style="height: 450px; overflow-y: auto;">
                            <div class="db-preloader preloader text-center d-none" id="loading-course" >
                                <img src="{{ asset('needed/img/loading/loader-2.gif') }}">
                            </div>

                            <!-- /.nav-tabs -->
                            <div class="tab-content">
                                <div class="tab-pane fade show active" id="tab2-1">
                                    <select id="bestModulDashboardLimit" class="form-select form-select-sm ms-auto" style="padding-right: 30px;">
                                        <option value="5">Top 5</option>
                                        <option value="10">Top 10</option>
                                        <option value="20">Top 20</option>
                                        <option value="50">Top 50</option>
                                        <option value="0">All</option>
                                    </select>
                                    <div class="chartbox">
                                        <figure class="highcharts-figure">
                                            <div id="bestModulDashboard"></div>
                                        </figure>
                                    </div>
                                </div>
                                <!--/.tab-pane -->
                                <div class="tab-pane fade" id="tab2-2">
                                    <select id="bestModulBarDashboardLimit" class="form-select form-select-sm ms-auto" style="padding-right: 30px;">
                                        <option value="5">Top 5</option>
                                        <option value="10">Top 10</option>
                                        <option value="20">Top 20</option>
                                        <option value="50">Top 50</option>
                                        <option value="0">All</option>
                                    </select>
                                    <div class="chartbox">
                                        <figure class="highcharts-figure">
                                            <div id="bestModulBarDashboard"></div>
                                        </figure>
                                    </div>
                                </div>
                                <!--/.tab-pane -->
                                <div class="tab-pane fade" id="tab2-3">
                                    
                                    <div class="table-responsive position-relative">
                                        <div class="row text-end" style="position: absolute; right: 0; top: 0; cursor: pointer;">
                                            <div class="col-12">
                                                <div class="dropdown">
                                                    <i class="fa-solid fa-bars" data-bs-toggle="dropdown" aria-expanded="false"></i>
                                                    <ul class="dropdown-menu">
                                                        <li><a href="#" onclick="exportData2('ExcelDashboardCourse', 0, null, dttableCourse)" class="dropdown-item" style="font-weight: normal;">Download Xls</a></li>
                                                        <li><a href="#" onclick="exportData2('PdfDashboardCourse', 0, null, dttableCourse)" class="dropdown-item" style="font-weight: normal;">Download Pdf</a></li>
                                                        <li><a href="#" onclick="exportData2('CsvDashboardCourse', 0, null, dttableCourse)" class="dropdown-item" style="font-weight: normal;">Download Csv</a></li>
                                                    </ul>
                                                    </div>
                                            </div>
                                        </div>
                                        <table class="table table-bordered" id="table-course" width="100%" cellspacing="0">
                                            <thead class="bg-primary">
                                                <tr class="text-white">
                                                    <th class="text-center fw-semibold">No</th>
                                                    <th class="text-center fw-semibold">Modul</th>
                                                    <th class="text-center fw-semibold">Kurang Baik</th>
                                                    <th class="text-center fw-semibold">Terbaik</th>
                                                    <th class="text-center fw-semibold">Jumlah Peserta</th>
                                                </tr>
                                            </thead>
                                            <tbody></tbody>
                                            <tfoot class="bg-primary"></tfoot>
                                        </table>
                                    </div>
                                </div>
                                <!--/.tab-pane -->
                            </div>
                            <!-- /.tab-content -->     
                        </div>
                        
                    </div>
                </div>
                <div class="col bg-transparent" id="myContain">
                    <div class="card">
                        <div class="card-header py-1 px-1">
                            <ul class="nav nav-tabs nav-pills">
                            <li class="nav-item"> 
                                    <a class="nav-link active" data-bs-toggle="tab" href="#tab3-1">
                                    <span class="pe-1">
                                        <i class='bx bx-pie-chart-alt-2' ></i>
                                    </span>
                                    </a>
                                </li>
                                <li class="nav-item"> 
                                    <a class="nav-link" data-bs-toggle="tab" href="#tab3-2">
                                    <span class="pe-1">
                                        <i class='bx bx-bar-chart-alt-2' ></i>
                                    </span>
                                    </a> 
                                </li>
                                <li class="nav-item"> 
                                    <a class="nav-link" data-bs-toggle="tab" href="#tab3-3">
                                    <span class="pe-1">
                                    <i class='bx bx-table' ></i>
                                    </span>
                                    </a> 
                                </li>
                            </ul>
                        </div>
                        <div class="card-body py-0" style="height: 450px; overflow-y: auto;">
                            <div class="db-preloader preloader text-center d-none" id="loading-status" >
                                <img src="{{ asset('needed/img/loading/loader-2.gif') }}">
                            </div>

                            <!-- /.nav-tabs -->
                            <div class="tab-content">
                                <div class="tab-pane fade show active" id="tab3-1">
                                    <select id="pesertaStatsDashboardLimit" class="form-select form-select-sm ms-auto" style="padding-right: 30px;">
                                        <option value="5">Top 5</option>
                                        <option value="10">Top 10</option>
                                        <option value="20">Top 20</option>
                                        <option value="50">Top 50</option>
                                        <option value="0">All</option>
                                    </select>
                                    <div class="chartbox">
                                        <figure class="highcharts-figure">
                                            <div id="pesertaStatsDashboard"></div>
                                        </figure>
                                    </div>
                                </div>
                                <!--/.tab-pane -->
                                <div class="tab-pane fade" id="tab3-2">
                                    <select id="pesertaStatsBarDashboardLimit" class="form-select form-select-sm ms-auto" style="padding-right: 30px;">
                                        <option value="5">Top 5</option>
                                        <option value="10">Top 10</option>
                                        <option value="20">Top 20</option>
                                        <option value="50">Top 50</option>
                                        <option value="0">All</option>
                                    </select>
                                    <div class="chartbox">
                                        <figure class="highcharts-figure">
                                            <div id="pesertaStatsBarDashboard"></div>
                                        </figure>
                                    </div>
                                </div>
                                <!--/.tab-pane -->
                                <div class="tab-pane fade" id="tab3-3">
                                    <div class="table-responsive position-relative">
                                        <div class="row text-end" style="position: absolute; right: 0; top: 0; cursor: pointer;">
                                            <div class="col-12">
                                                <div class="dropdown">
                                                    <i class="fa-solid fa-bars" data-bs-toggle="dropdown" aria-expanded="false"></i>
                                                    <ul class="dropdown-menu">
                                                        <li><a href="#" onclick="exportData2('ExcelDashboardStatus', 0, null, dttableStatus)" class="dropdown-item" style="font-weight: normal;">Download Xls</a></li>
                                                        <li><a href="#" onclick="exportData2('PdfDashboardStatus', 0, null, dttableStatus)" class="dropdown-item" style="font-weight: normal;">Download Pdf</a></li>
                                                        <li><a href="#" onclick="exportData2('CsvDashboardStatus', 0, null, dttableStatus)" class="dropdown-item" style="font-weight: normal;">Download Csv</a></li>
                                                    </ul>
                                                    </div>
                                            </div>
                                        </div>
                                        <table class="table table-bordered" id="table-status" width="100%" cellspacing="0">
                                            <thead class="bg-primary">
                                                <tr class="text-white">
                                                    <th class="text-center fw-semibold">No</th>
                                                    <th class="text-center fw-semibold">Modul</th>
                                                    <th class="text-center fw-semibold">Lulus</th>
                                                    <th class="text-center fw-semibold">Tidak Lulus</th>
                                                    <th class="text-center fw-semibold">Total Peserta</th>
                                                </tr>
                                            </thead>
                                            <tbody></tbody>
                                            <tfoot class="bg-primary"></tfoot>
                                        </table>
                                    </div>
                                </div>
                                <!--/.tab-pane -->
                            </div>
                            <!-- /.tab-content -->     
                        </div>
                        
                    </div>
                </div>       
            </div>
        </div>
        <div class="row mx-auto">
            <div class="col-lg-12 px-0">
                <div class="card">
                    <div class="card-header">
                        <div class="row">
                            <div class="col-lg-12">
                                <div class="btn-group btn-group-sm float-end">
                                    <button type="button" class="btn-card fs-14 me-1 active-card" id="trend-tahun">Tahun</button>
                                    <button type="button" class="btn-card fs-14" id="trend-bulan">Bulan</button>
                                </div>
                            </div>
                        </div>
                    
                    </div>
                    <div class="card-body">
                        <div class="db-preloader preloader text-center d-none" id="loading-trend" >
                            <img src="{{ asset('needed/img/loading/loader-2.gif') }}">
                        </div>

                        <div class="chartbox">
                            <figure class="highcharts-figure">
                                <div id="trendPeserta"></div>
                            </figure>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-12 px-0">
                <div class="card" style="width: 100%; white-space: nowrap;">
                    <div class="card-header py-2">
                        <h4 class="text-center text-primary fs-16 mt-3">Terakhir Masuk</h4>
                    </div>
                    <div class="card-body" style="max-height: 459.984px; overflow-y: auto;">
                        <div class="table-responsive">
                            <table class="table table-bordered" id="table-lastlogin" width="100%" cellspacing="0">
                                <thead class="bg-primary">
                                    <tr class="text-white">
                                        <th class="text-center">User</th>
                                        <th class="text-center">Keterangan</th>
                                    </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="row mx-auto">
            <div class="col-lg-12 px-0" style="position: relative;">
                <h6 class="fw-semibold">Karyawan Tenaga Alih Daya</h6>
                <ul class="list-unstyled float-end p-0" style="position: absolute;top: -10px;right: 0px;z-index: 9999;">
                    <li class="nav-item dropdown p-0">
                        <a href="#" class="dropdown nav-link py-1 px-2 rounded bg-primary"
                            data-bs-toggle="dropdown">
                            <span class="text-light fs-16 fw-normal"><i class="fa-solid fa-download"></i></span>
                        </a>
                        <div class="dropdown-menu dropdown-menu-end py-0 border-0">
                            <a class="dropdown-item fw-normal cursor-pointer">
                                <a onclick="exportData2('ExcelOrganik', 0, null , dttableOrganik)"
                                    class="btn btn-primary border-0 py-2 px-9 fw-normal fs-12">Download
                                    Excel<span class="ms-2"><i class="fa-solid fa-up-long"></i></span></a>
                            </a>
                            <a class="dropdown-item fw-normal cursor-pointer">
                                <a onclick="exportData2('PdfOrganik', 0, null , dttableOrganik)" class="btn btn-primary border-0 py-2 px-10 fw-normal fs-12">Download
                                    PDF<span class="ms-2"><i class="fa-solid fa-plus"></i></span></a>
                            </a>
                            <a class="dropdown-item fw-normal cursor-pointer">
                                <a onclick="exportData2('CsvOrganik', 0, null , dttableOrganik)" class="btn btn-primary border-0 py-2 px-9 fw-normal fs-12">Download
                                    CSV<span class="ms-2"><i class="fa-solid fa-plus"></i></span></a>
                            </a>
                        </div>
                    </li>
                </ul>

                <div class="card">
                    <div class="card-body p-0">
                        <div class="table-responsive" style="overflow-y: auto; height: 490px;">
                            <table class="table table-bordered" id="table-organik" width="100%" cellspacing="0">
                                <thead class="bg-primary sticky-top">
                                    <tr class="text-white">
                                        <th class="text-center">Rank</th>
                                        <th class="text-center">Nama</th>
                                        <th class="text-center">ID</th>
                                        <th class="text-center">Jumlah Modul</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td class="fw-bold text-center">1</td>
                                        <td class="">
                                            <img class="avatar-img rounded-circle me-2" width="40" height="40" src="assets/img/avatars/t1.jpg" alt="User Image">
                                            Abdul
                                        </td>
                                        <td class="text-end">ID</td>
                                        <td class="text-end">12</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
</div>
<!-- widgetend -->

<style>
    #table-course_wrapper .dataTables_length, 
    #table-status_wrapper .dataTables_length {
        float: right;
        margin-bottom: 10px;
        margin-right: 30px;
    }
    #table-course_wrapper select,
    #table-status_wrapper select {
        padding-right: 30px;
    }
    #table-course_wrapper .dataTables_length label,
    #table-status_wrapper .dataTables_length label {
        font-size: 0;
    }
    #table-organik.dataTable,
    #table-nonorganik.dataTable {
        margin-top: 0px !important;
    }
</style>                
@endsection

@section('script')
<script>
    var dttablepeserta, dttableCourse, dttableStatus, dttableOrganik;
    $(document).ready(function(){
        function reloadTablesAndSetData() {
            dttablelastlogin.ajax.reload();
            dttableOrganik.ajax.reload();
            // dttablenonorganik.ajax.reload();
            setJumlahPeserta();
            setPeserta();
            setCourse();
            setStatus();
            
            if($('#trend-tahun').hasClass('active-card')){
                setTrenTahun();
            } else {
                setTrenBulan();
            }
        }

        $('[data-bs-toggle="tab"]').on('click', function (e) {
            $($.fn.dataTable.tables(true)).DataTable().columns.adjust();
        });

        $('#reportrange3').on('apply.daterangepicker', function(ev, picker) {
            reloadTablesAndSetData();
        });
        $('#reportrange3').on('cancel.daterangepicker', function(ev, picker) {
            reloadTablesAndSetData();
        });


        var dttablelastlogin = $('#table-lastlogin').DataTable({
            searching: false,
            paging: false,
            info: false,
            ordering: false,
            processing: true,
            ajax: {
                url: "{{ url('Dashboard/getLastLogin') }}",
                type: 'POST',
                data: function(d){
                    d.tanggalStart = $('[name="tanggal-start"]').val();
                    d.tanggalEnd = $('[name="tanggal-end"]').val();
                }
            },
            columns: [
                { data: 'fullname', class: 'text-center' },
                { data: 'lastaccess', class: 'text-center' },
            ]
        });

        dttableOrganik = $('#table-organik').DataTable({
            searching: false,
            paging: false,
            info: false,
            ordering: false,
            processing: true,
            ajax: {
                url: "{{ url('Dashboard/getKaryawan') }}",
                type: 'POST',
                data: function(d){
                    d.tanggalStart = $('[name="tanggal-start"]').val();
                    d.tanggalEnd = $('[name="tanggal-end"]').val();
                },
                dataSrc: 'organik',
            },
            columns: [
                { 
                    data: null,
                    render: function(data,type,row,meta){
                        return `<div style="line-height: 40px;">${meta.row + 1 + '.'}</div>`;
                    },
                    class: 'fw-bold text-center'
                },
                { 
                    data: 'nama', 
                    render: function(data,type,row,meta){
                        return `<img class="avatar-img rounded-circle me-2" width="40" height="40" src="${row.profileimageurl ?? 'assets/img/avatars/t1.jpg'}" alt="User Image" />` + data
                    },
                },
                { 
                    data: 'sim_id', 
                    render: function(data){
                        return `<div style="line-height: 40px;">${data}</div>`
                    },
                    class: 'text-end'
                },
                { 
                    data: 'jumlah_modul',
                    render: function(data){
                        return `<div style="line-height: 40px;">${data}</div>`
                    },
                    class: 'text-end' 
                },
            ]
        });

        // Switching between trend peserta charts
        $('#trend-tahun').click(function(){
            $(this).addClass('active-card');
            $('#trend-bulan').removeClass('active-card');
            setTrenTahun();
        });
        $('#trend-bulan').click(function(){
            $(this).addClass('active-card');
            $('#trend-tahun').removeClass('active-card');
            setTrenBulan();
        });

        setJumlahPeserta();
        setPeserta();
        setCourse();
        setStatus();
        setTrenTahun();
    });

    function setJumlahPeserta(){
        $.ajax({
            url: "{{ url('Dashboard/getJumlahPeserta') }}",
            type: 'POST',
            cache: false,
            data: {
                tanggalStart: $('[name="tanggal-start"]').val(),
                tanggalEnd: $('[name="tanggal-end"]').val(),
            },
            beforeSend: function(){
                $('.loading-jumlahpeserta').removeClass('d-none');
            },
            complete: function(){
                $('.loading-jumlahpeserta').addClass('d-none');
            },
            success: function(json){
                $('#semua_peserta').html(json.semua_peserta);
                $('#peserta_internal').html(json.peserta_internal);
                $('#peserta_external').html(json.peserta_external);
                
                $('#asemua_peserta').html(json.asemua_peserta);
                $('#apeserta_internal').html(json.apeserta_internal);
                $('#apeserta_external').html(json.apeserta_external);
            },
            error: function(xhr, ajaxOptions, thrownError) {
                alert("error jumlah peserta");
            },
        });
    }

    function setPeserta(){
        var datapie = [];
        var databar = [];
        var datat = [{i: 0}];
        var total_modul_belum_selesai = 0;
        var total_modul_selesai = 0;
        var total_peserta = 0;
        $.ajax({
            url: "{{ url('Dashboard/getPeserta') }}",
            type: 'POST',
            cache: false,
            data: {
                tanggalStart: $('[name="tanggal-start"]').val(),
                tanggalEnd: $('[name="tanggal-end"]').val(),
            },
            beforeSend: function(){
                $('#loading-peserta').removeClass('d-none');
            },
            complete: function(){
                $('#loading-peserta').addClass('d-none');
            },
            success: function(json){
                for(const key in json.drilldown){
                    var item = json.drilldown[key];
                    datapie.push({
                        name: item.name,
                        id: item.id,
                        data: item.drilldown,
                    });
                }
                for(const key in json.data_detail){
                    var item = json.data_detail[key];
                    total_modul_selesai += item.modul_selesai;
                    total_modul_belum_selesai += item.modul_belum_selesai;
                    total_peserta += item.jumlah_peserta;
                }
                json.data_detail.push({
                    status_peserta: 'Total',
                    modul_selesai: total_modul_selesai,
                    modul_belum_selesai: total_modul_belum_selesai,
                    jumlah_peserta: total_peserta,
                });

                hcModulPie(json.categories, json.drilldown);
                hcModulBar(json.categories, json.drilldown);
                dtModul(json.data_detail);
            },
            error: function(xhr, ajaxOptions, thrownError) {
                alert("error peserta");
            },
        });
    }

    function setCourse(){
        var datapie = [];
        var databar = [];
        var datatable = [];
        var total_notpass = 0;
        var total_pass = 0;
        var total_peserta = 0;
        $.ajax({
            url: "{{ url('Dashboard/getCourse') }}",
            type: 'POST',
            cache: false,
            data: {
                tanggalStart: $('[name="tanggal-start"]').val(),
                tanggalEnd: $('[name="tanggal-end"]').val(),
            },
            beforeSend: function(){
                $('#loading-course').removeClass('d-none');
            },
            complete: function(){
                $('#loading-course').addClass('d-none');
            },
            success: function(json){
                // for(const key in json.data_detail){
                //     var item = json.data_detail[key];
                //     total_pass += item.pass;
                //     total_notpass += item.notpass;
                //     total_peserta += item.total;
                // }
                // json.data_detail.push({
                //     name: 'Total',
                //     pass: total_pass,
                //     notpass: total_notpass,
                //     total: total_peserta,
                // });
                
                hcBestPie(json.categories, json.drilldown);
                hcBestBar(json.categories, json.drilldown);
                dtBest(json.data_detail);
            },
            error: function(xhr, ajaxOptions, thrownError) {
                alert("error course");
            },
        });
    }

    function setStatus(){
        var datapie = [];
        var databar = [];
        var datat = [];
        $.ajax({
            url: "{{ url('Dashboard/getStatus') }}",
            type: 'POST',
            cache: false,
            data: {
                tanggalStart: $('[name="tanggal-start"]').val(),
                tanggalEnd: $('[name="tanggal-end"]').val(),
            },
            beforeSend: function(){
                $('#loading-status').removeClass('d-none');
            },
            complete: function(){
                $('#loading-status').addClass('d-none');
            },
            success: function(json){
                /* dtPeserta(json);
                return;
                for(var i = 0; i < json.length; i++){
                    var item = json[i];
                    datat.push({
                        name: item.fullname,
                        y: Number(item.total),
                    });
                    if(Number(item.total) > 0){
                        datapie.push({
                            name: item.fullname,
                            y: Number(item.total),
                        });
                        databar.push({
                            name: item.fullname,
                            colorByPoint: false,
                            data: [
                                {
                                    name: item.fullname,
                                    y: Number(item.total),
                                },
                            ],
                        });
                    }
                } */

                hcPesertaPie(json.categories, json.drilldown);
                hcPesertaBar(json.categories, json.drilldown);
                dtPeserta(json.data_detail);
            },
            error: function(xhr, ajaxOptions, thrownError) {
                alert("error status");
            },
        });
    }

    function setTrenTahun(){
        var data = [];
        $.ajax({
            url: "{{ url('Dashboard/getTrenTahunPeserta') }}",
            type: 'POST',
            cache: false,
            data: {
                tanggalStart: $('[name="tanggal-start"]').val(),
                tanggalEnd: $('[name="tanggal-end"]').val(),
            },
            beforeSend: function(){
                $('#loading-trend').removeClass('d-none');
            },
            complete: function(){
                $('#loading-trend').addClass('d-none');
            },
            success: function(json){
                var internalVal = [];
                var externalVal = [];
                var semuaVal = [];
                var tahun = [];

                for(const key in json){
                    var item = json[key];
                    internalVal.push(parseInt(item.internal));
                    externalVal.push(parseInt(item.external));
                    semuaVal.push(parseInt(item.semua));
                    
                    tahun.push(key);
                }

                data.push({
                    name: 'Peserta Internal',
                    data: internalVal,
                });
                data.push({
                    name: 'Peserta External',
                    data: externalVal,
                });
                data.push({
                    name: 'Seluruh Peserta',
                    data: semuaVal,
                });

                hcTrenTahun(tahun, data);
            },
            error: function(xhr, ajaxOptions, thrownError) {
                alert("error tren tahun");
            },
        });
    }
    
    function setTrenBulan(){
        var data = [];
        $.ajax({
            url: "{{ url('Dashboard/getTrenBulanPeserta') }}",
            type: 'POST',
            cache: false,
            data: {
                tanggalStart: $('[name="tanggal-start"]').val(),
                tanggalEnd: $('[name="tanggal-end"]').val(),
            },
            beforeSend: function(){
                $('#loading-trend').removeClass('d-none');
            },
            complete: function(){
                $('#loading-trend').addClass('d-none');
            },
            success: function(json){
                var internalVal = [];
                var externalVal = [];
                var semuaVal = [];
                var tahun = [];

                for(const key in json){
                    var item = json[key];
                    internalVal.push(parseInt(item.internal));
                    externalVal.push(parseInt(item.external));
                    semuaVal.push(parseInt(item.semua));
                    
                    tahun.push(key);
                }

                data.push({
                    name: 'Peserta Internal',
                    data: internalVal,
                });
                data.push({
                    name: 'Peserta External',
                    data: externalVal,
                });
                data.push({
                    name: 'Seluruh Peserta',
                    data: semuaVal,
                });

                hcTrenBulan(tahun, data);
            },
            error: function(xhr, ajaxOptions, thrownError) {
                alert("error tren bulan");
            },
        });
    }

    // Create the chart
    function hcModulPie(dataseries, drilldownseries){
        dataseries.reverse();
        Highcharts.chart('modulStatsDashboard', {
            chart: {
                type: 'pie'
            },
            title: {
                text: 'Statistik Penyelesaian Pelatihan',
                align: 'center'
            },
            credits: {
                enabled: false
            },
            subtitle: {
                align: 'center',
                text: 'Klik Bagian Untuk Melihat Informasi Yang Lebih Detail'
            },
            accessibility: {
                announceNewData: {
                    enabled: true
                }
            },
            exporting: {
                buttons: {
                    contextButton: {
                        menuItems: [
                        'viewFullscreen',
                        'printChart',
                        'downloadPNG',
                        'downloadJPEG',
                        'downloadPDF',
                        'downloadSVG'
                        ]
                    }
                }
            },
            xAxis: {
                type: 'category'
            },
            yAxis: {
                title: ' '
            },
            labels: {
                pointFormat: '<span style="color: red; font-weight: bold;">' + this.value + '</span>'
            },
            legend: {
                enabled: true
            },
            tooltip: {
                pointFormat: '{series.name}: <b>{point.y} Peserta</b>'
            },
            accessibility: {
                point: {
                    valueSuffix: '%'
                }
            },
            exporting: {
                buttons: {
                    contextButton: {
                        menuItems: [
                        'viewFullscreen',
                        'printChart',
                        'downloadPNG',
                        'downloadJPEG',
                        'downloadPDF',
                        'downloadSVG'
                        ]
                    }
                }
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: true,
                        format: '{point.percentage:.1f} %',
                        distance: -50,
                    },
                    showInLegend: true
                }
            },

            series: [{
                name: 'Penyelesaian Pelatihan',
                colorByPoint: true,
                data: dataseries
            }],
            drilldown: {
                breadcrumbs: {
                    position: {
                        align: 'right'
                    }
                },
                series: drilldownseries
            }
        });
    }

    function hcModulBar(dataseries, drilldownseries){
        Highcharts.chart('modulStatsBarDashboard', {
            chart: {
                type: 'bar'
            },
            title: {
                text: 'Statistik Penyelesaian Pelatihan',
                align: 'center'
            },
            credits: {
                enabled: false
            },
            subtitle: {
                align: 'center',
                text: 'Klik Bagian Untuk Melihat Informasi Yang Lebih Detail'
            },
            accessibility: {
                announceNewData: {
                    enabled: true
                }
            },
            exporting: {
                buttons: {
                    contextButton: {
                        menuItems: [
                        'viewFullscreen',
                        'printChart',
                        'downloadPNG',
                        'downloadJPEG',
                        'downloadPDF',
                        'downloadSVG'
                        ]
                    }
                }
            },
            xAxis: {
                type: 'category'
            },
            yAxis: {
                title: {
                    text: ''
                },
                labels: {
                    formatter: function() {
                        return Math.floor(this.value);
                    }
                },
                tickInterval: 1
            },
            // labels: {
            //     pointFormat: '<span style="color: red; font-weight: bold;">' + this.value + '</span>'
            // },
            legend: {
                enabled: true
            },
            tooltip: {
                headerFormat: '',
                pointFormat: '{series.name}: <b>{point.y} peserta</b>'
            },
            accessibility: {
                point: {
                    valueSuffix: '%'
                }
            },
            plotOptions: {
                bar: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: false
                    },
                    showInLegend: true
                }
            },

            series: [{
                name: 'Penyelesaian Pelatihan',
                colorByPoint: true,
                data: dataseries
            }],
            drilldown: {
                breadcrumbs: {
                    position: {
                        align: 'right'
                    }
                },
                series: drilldownseries
            }
        });
    }

    function dtModul(dataseries){
        dttablepeserta = $('#table-peserta').DataTable({
            searching: false,
            paging: false,
            info: false,
            ordering: false,
            processing: true,
            destroy: true,
            data: dataseries,
            columns: [
                {
                    data: null,
                    render: function(data, type, row, meta){
                        return meta.row + 1 + '.';
                    },
                    class: 'text-center'
                },
                { 
                    data: 'status_peserta', 
                    class: 'text-start'
                },
                { 
                    data: 'modul_selesai', 
                    class: 'text-end'
                },
                { 
                    data: 'modul_belum_selesai', 
                    class: 'text-end'
                },
                { 
                    data: 'jumlah_peserta', 
                    class: 'text-end'
                },
            ],
            createdRow: function (row, data, dataIndex) {
                // Check if it's the last row
                if (dataIndex === (dataseries.length - 1)) {
                    $(row).addClass('bg-primary text-white text-end');
                    $(row).find('td:first-child').remove();
                    $('td:eq(0)', row).attr('colspan', 2).removeClass('text-start');
                }
            }
        });
    }

    function hcBestPie(dataseries, drilldownseries) {
      var initialDataSeries = dataseries.slice(0, 5);

      var chart = Highcharts.chart('bestModulDashboard', {
        chart: {
          type: 'pie'
        },
        title: {
          text: '5 Pelatihan Terbaik',
          align: 'center'
        },
        credits: {
          enabled: false
        },
        xAxis: {
          type: 'category'
        },
        yAxis: {
          title: ' '
        },
        tooltip: {
          pointFormat: '{series.name}: <b>{point.y} Peserta</b>'
        },
        exporting: {
          buttons: {
            contextButton: {
              menuItems: [
                'viewFullscreen',
                'printChart',
                'downloadPNG',
                'downloadJPEG',
                'downloadPDF',
                'downloadSVG'
              ]
            }
          }
        },
        plotOptions: {
          pie: {
            allowPointSelect: true,
            cursor: 'pointer',
            dataLabels: {
              enabled: true,
              format: '{point.percentage:.1f} %',
              distance: -50,
            },
            showInLegend: true
          }
        },
        series: [{
          name: '5 Pelatihan Terbaik',
          colorByPoint: true,
          data: initialDataSeries,
        }],
        drilldown: {
          breadcrumbs: {
            position: {
              align: 'right'
            }
          },
          series: drilldownseries
        },
      });

      document.getElementById('bestModulDashboardLimit').addEventListener('change', function() {
        var limit = parseInt(this.value);
        if(limit == 0){
            limit = dataseries.length
        }
        chart.series[0].setData(dataseries.slice(0, limit));
      });
    }

    function hcBestBar(dataseries, drilldownseries){
        var initialDataSeries = dataseries.slice(0, 5);
        initialDataSeries.reverse();
        var chart = Highcharts.chart('bestModulBarDashboard', {
            chart: {
                type: 'bar'
            },
            title: {
                text: '5 Pelatihan Terbaik',
                align: 'center'
            },
            credits: {
                enabled: false
            },
            xAxis: {
                // categories: ['1', '2', '3', '4', '5'],
                type: 'category',
                // crosshair: true
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'Jumlah (Peserta)'
                },
                labels: {
                    formatter: function() {
                        return Math.floor(this.value);
                    }
                },
                tickInterval: 1
            },
            exporting: {
                buttons: {
                    contextButton: {
                        menuItems: [
                        'viewFullscreen',
                        'printChart',
                        'downloadPNG',
                        'downloadJPEG',
                        'downloadPDF',
                        'downloadSVG'
                        ]
                    }
                }
            },
            tooltip: {
                headerFormat: '',
                pointFormat: '{series.name}: {point.y} peserta',
            },
            series: [{
                name: '5 Pelatihan Terbaik',
                colorByPoint: true,
                data: initialDataSeries,
            }],
            drilldown: {
                breadcrumbs: {
                    position: {
                        align: 'right'
                    }
                },
                series: drilldownseries
            },
        });
        document.getElementById('bestModulBarDashboardLimit').addEventListener('change', function() {
            var limit = parseInt(this.value);
            if(limit == 0){
                limit = dataseries.length
            }
            var slicedDataSeries = dataseries.slice(0, limit);
            slicedDataSeries.reverse();
            chart.series[0].setData(slicedDataSeries);
        });
    }

    function dtBest(dataseries){
        dttableCourse = $('#table-course').DataTable({
            dom: 'lfrti',
            lengthMenu: [ 
                [5, 10, 20, 50, -1], 
                ['Top 5', 'Top 10', 'Top 20', 'Top 50', 'All'] 
            ],
            pageLength: 5,
            // scrollY: 400,
            // scrollCollapse: true,
            searching: false,
            info: false,
            ordering: false,
            processing: true,
            destroy: true,
            data: dataseries,
            columns: [
                { 
                    data: null,
                    render: function(data, type, row, meta){
                        return meta.row + 1 + '.';
                    }
                },
                { data: 'name', class: 'text-start' },
                { data: 'notpass', class: 'text-end' },
                { data: 'pass', class: 'text-end' },
                { data: 'total', class: 'text-end' }
            ],
            initComplete: function () {
                updateTotals()
            }
        });

        dttableCourse.on('draw', function () {
            updateTotals();
        });

        function updateTotals() {
            var index;
            var notPassTotal = 0;
            var passTotal = 0;
            var totalTotal = 0;

            // Remove footer rows if exist
            $('#table-course .footer-row')?.remove()

            $('#table-course tbody tr').each(function () {
                notPassTotal += parseInt($(this).find('td:eq(2)').text(), 10);
                passTotal += parseInt($(this).find('td:eq(3)').text(), 10);
                totalTotal += parseInt($(this).find('td:eq(4)').text(), 10);
            });
            // var index = $('#table-course tbody tr').length + 1; // Get the total number of rows and add 1

            var footerRowHtml = '<tr class="bg-primary text-white footer-row">' +
                // '<th class="text-center fw-semibold">No</th>' +
                '<th colspan="2" class="text-end fw-semibold pe-4">Total</th>' +
                '<th class="text-end fw-semibold pe-4">' + notPassTotal + '</th>' +
                '<th class="text-end fw-semibold pe-4">' + passTotal + '</th>' +
                '<th class="text-end fw-semibold pe-4">' + totalTotal + '</th>' +
                '</tr>';

            if($('#table-course tbody tr').length > 1){
                $('#table-course tbody').append(footerRowHtml);
            }
        }
    }

    function hcPesertaPie(dataseries, drilldownseries){
        var initialDataSeries = dataseries.slice(0, 5);

        var chart = Highcharts.chart('pesertaStatsDashboard', {
            chart: {
                type: 'pie'
            },
            credits: {
                enabled: false
            },
            title: {
                text: 'Kelulusan',
                align: 'center'
            },  

            legend: {
                enabled: true
            },
            tooltip: {
                pointFormat: '{series.name}: <b>{point.y} Peserta</b>'
            },
            accessibility: {
                point: {
                    valueSuffix: '%'
                }
            },
            exporting: {
                buttons: {
                    contextButton: {
                        menuItems: [
                        'viewFullscreen',
                        'printChart',
                        'downloadPNG',
                        'downloadJPEG',
                        'downloadPDF',
                        'downloadSVG'
                        ]
                    }
                }
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: true,
                        format: '{point.percentage:.1f} %',
                        distance: -50,
                    },
                    showInLegend: true
                }
            },
            series: [{
                name: 'Kelulusan Peserta',
                colorByPoint: true,
                data: initialDataSeries
            }],
            drilldown: {
                breadcrumbs: {
                    position: {
                        align: 'right'
                    }
                },
                series: drilldownseries
            },
        });

        document.getElementById('pesertaStatsDashboardLimit').addEventListener('change', function() {
            var limit = parseInt(this.value);
            if(limit == 0){
                limit = dataseries.length
            }
            chart.series[0].setData(dataseries.slice(0, limit));
        });
    }

    function hcPesertaBar(dataseries, drilldownseries){
        var initialDataSeries = dataseries.slice(0, 5);
        initialDataSeries.reverse();

        var chart = Highcharts.chart('pesertaStatsBarDashboard', {
            chart: {
                type: 'bar'
            },
            credits: {
                enabled: false
            },
            title: {
                text: 'Kelulusan',
                align: 'center'
            },

            accessibility: {
                announceNewData: {
                    enabled: true
                },
                point: {
                    valueSuffix: '%'
                }
            },
            exporting: {
                buttons: {
                    contextButton: {
                        menuItems: [
                        'viewFullscreen',
                        'printChart',
                        'downloadPNG',
                        'downloadJPEG',
                        'downloadPDF',
                        'downloadSVG'
                        ]
                    }
                }
            },
            legend: {
                enabled: true
            },
            tooltip: {
                headerFormat: '',
                // headerFormat: '<span style="font-size:10px">Modul Terbaik</span><table>',
                pointFormat: '{series.name}: {point.y} peserta',
                // footerFormat: '</table>',
                // shared: true,
                // useHTML: true
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: false
                    },
                    showInLegend: true
                }
            },
            xAxis: {
                type: 'category',
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'Jumlah (Peserta)'
                },
                labels: {
                    formatter: function() {
                        return Math.floor(this.value);
                    }
                },
                tickInterval: 1
            },

            series: [{
                name: 'Kelulusan Peserta',
                colorByPoint: true,
                data: initialDataSeries,
            }],
            drilldown: {
                breadcrumbs: {
                    position: {
                        align: 'right'
                    }
                },
                series: drilldownseries
            }
        });
        document.getElementById('pesertaStatsBarDashboardLimit').addEventListener('change', function() {
            var limit = parseInt(this.value);
            if(limit == 0){
                limit = dataseries.length
            }
            var slicedDataSeries = dataseries.slice(0, limit);
            slicedDataSeries.reverse();
            chart.series[0].setData(slicedDataSeries);
        });
    }

    function dtPeserta(dataseries){
        dttableStatus = $('#table-status').DataTable({
            dom: 'lfrti',
            lengthMenu: [ 
                [5, 10, 20, 50, -1], 
                ['Top 5', 'Top 10', 'Top 20', 'Top 50', 'All'] 
            ],
            pageLength: 5,
            searching: false,
            info: false,
            ordering: false,
            processing: true,
            destroy: true,
            data: dataseries,
            columns: [
                { data: null, render: (data, type, row, meta) => meta.row + 1 + '.' },
                { data: 'name', class: 'text-start' },
                { data: 'pass', class: 'text-end' },
                { data: 'notpass', class: 'text-end' },
                { data: 'total', class: 'text-end' },
            ],
            initComplete: function () {
                updateTotals();
            }
        });

        dttableStatus.on('draw', function () {
            updateTotals();
        });
        
        function updateTotals() {
            var notPassTotal = 0;
            var passTotal = 0;
            var totalTotal = 0;

            // Remove footer rows if exist
            $('#table-status .footer-row')?.remove()

            $('#table-status tbody tr').each(function () {
                notPassTotal += parseInt($(this).find('td:eq(2)').text(), 10);
                passTotal += parseInt($(this).find('td:eq(3)').text(), 10);
                totalTotal += parseInt($(this).find('td:eq(4)').text(), 10);
            });
            // var index = $('#table-status tbody tr').length + 1; // Get the total number of rows and add 1

            var footerRowHtml = '<tr class="bg-primary text-white footer-row">' +
                // '<th class="text-center fw-semibold">No</th>' +
                '<th colspan="2" class="text-end fw-semibold pe-4">Total</th>' +
                '<th class="text-end fw-semibold pe-4">' + notPassTotal + '</th>' +
                '<th class="text-end fw-semibold pe-4">' + passTotal + '</th>' +
                '<th class="text-end fw-semibold pe-4">' + totalTotal + '</th>' +
                '</tr>';

            if($('#table-status tbody tr').length > 1){
                $('#table-status tbody').append(footerRowHtml);
            }
        }
    }

    function hcTrenTahun(categories, dataseries){
        Highcharts.chart('trendPeserta', {
            chart: {
                type: 'spline',
                scrollablePlotArea: {
                    minWidth: 600,
                    scrollPositionX: 1
                }
            },
            title: {
                text: 'Tren Peserta',
                align: 'center'
            },
            credits: {
                enabled: false
            },
            yAxis: {
                title: {
                    text: 'Peserta (orang)'
                },
                minorGridLineWidth: 0,
                gridLineWidth: 0,
                alternateGridColor: null,
                
            },
            tooltip: {
                valueSuffix: ' orang'
            },
            xAxis: {
                categories: categories
                // [
                    // '2018', '2019', '2020', '2021', '2022', '2023' 
                // ]
            },
            plotOptions: {
                spline: {
                    lineWidth: 4,
                    states: {
                        hover: {
                            lineWidth: 5
                        }
                    },
                    marker: {
                        enabled: true
                    }
                }
            },
            series: dataseries,
            navigation: {
                menuItemStyle: {
                    fontSize: '10px'
                }
            }
        });
    }

    function hcTrenBulan(categories, dataseries){
        Highcharts.chart('trendPeserta', {
            chart: {
                type: 'spline',
                scrollablePlotArea: {
                    minWidth: 600,
                    scrollPositionX: 1
                }
            },
            title: {
                text: 'Tren Peserta',
                align: 'center'
            },
            xAxis: {
                type: 'datetime',
                labels: {
                    overflow: 'justify'
                }
            },
            credits: {
                enabled: false
            },
            yAxis: {
                title: {
                    text: 'Peserta (orang)'
                },
                minorGridLineWidth: 0,
                gridLineWidth: 0,
                alternateGridColor: null,
            },
            tooltip: {
                valueSuffix: ' orang'
            },
            xAxis: {
                categories: categories
            },
            plotOptions: {
                spline: {
                    lineWidth: 4,
                    states: {
                        hover: {
                            lineWidth: 5
                        }
                    },
                    marker: {
                        enabled: true
                    }
                }
            },
            series: dataseries,
            navigation: {
                menuItemStyle: {
                    fontSize: '10px'
                }
            }
        });
    }
</script>
    
@endsection