@extends('Layouts_admin.index')
@section('content')
    <style>
        #loading {
            transition: display 1s ease-in-out;
        }

        .db-preloader {
            background-color: #fff;
            width: 100%;
            height: 100%;
            z-index: 9;
            place-items: center;
            /*! margin-top: 2rem; */
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            top: 90px;
        }
    </style>

    <!-- container-start -->
    <div class="container pt-6" style="width: 100%; z-index: 1;">
        <button class="btn  py-1 mt-px-1 mb-3 d-flex d-lg-none">
            <a class="nav-link fs-15 fw-normal text-ash" data-bs-toggle="collapse" href="#collapseExample" role="button"
                aria-expanded="false" aria-controls="collapseExample">
                Menu<span><i class="fa-solid fa-bars-staggered ms-2"></i></span>
            </a>
        </button>
        <ul class="nav nav-tabs nav-pills d-none d-lg-flex">
            <li class="nav-item mb-0 mb-md-3">
                <a class="nav-link fs-10 fw-normal active" data-bs-toggle="tab" href="#tab1-1">
                    <span class="fs-16 fw-normal">Pelatihan</span>
                </a>
            </li>
            <li class="nav-item mb-0 mb-md-3">
                <a class="nav-link fs-10 fw-normal" data-bs-toggle="tab" href="#tab1-2">
                    <span class="fs-16 fw-normal">Pelatihan Terbaik</span>
                </a>
            </li>
            <li class="nav-item mb-0 mb-md-3">
                <a class="nav-link fs-10 fw-normal" data-bs-toggle="tab" href="#tab1-3">
                    <span class="fs-16 fw-normal">Penyelesaian Pelatihan</span>
                </a>
            </li>
            <li class="nav-item mb-0 mb-md-3">
                <a class="nav-link fs-10 fw-normal" data-bs-toggle="tab" href="#tab1-4">
                    <span class="fs-16 fw-normal">Peserta Terbaik</span>
                </a>
            </li>
        </ul>
        <div class="tab-content mt-0" style="position: relative;">
            <div class="text"><small id="datedata">Loading...</small></div>
            <div class="nav-item dropdown" style="position: absolute; right: 0; top: -57px;">
                <button class="dropdown btn btn-sm btn-primary fs-13 fw-normal" data-bs-toggle="dropdown">
                    Filter <span><i class="fa-solid fa-filter ms-2"></i></span>
                </button>
                <div class="dropdown-menu">
                    <form action="" id="filters-form">
                        <div class="dropdown-item">
                            <div class="form-group mb-0">
                                <select name="course" class="filters form-select form-select-md fs-13 p-2 text-dark"
                                    aria-label="Default select example" style="width: 155px; height: 40px;">
                                    <option value="">Pelatihan</option>
                                    @foreach ($course_filters as $course_filter)
                                        <option value="{{ $course_filter['id'] }}">{{ $course_filter['fullname'] }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="dropdown-item">
                            <div class="form-group mb-0">
                                <select name="client" class="filters form-select form-select-md fs-13 p-2 text-dark"
                                    aria-label="Default select example" style="width: 155px; height: 40px;">
                                    <option value="">Klien</option>
                                    @foreach ($client_filters as $client_filter)
                                        <option value="{{ $client_filter->id_client }}">
                                            {{ $client_filter->title != 'PERORANGAN' ? $client_filter->title . '. ' : '' }}
                                            {{ $client_filter->client }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="dropdown-item">
                            <div class="form-group mb-0">
                                <select name="status" class="filters form-select form-select-md fs-13 p-2 text-dark"
                                    aria-label="Default select example" style="width: 155px; height: 40px;">
                                    <option value="">Status Personil</option>
                                    @foreach ($status_filters as $status_filter)
                                        <option value="{{ $status_filter->id_status }}">{{ $status_filter->status }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="dropdown-item">
                            <div class="form-group mb-0">
                                <select name="job" class="filters form-select form-select-md fs-13 p-2 text-dark"
                                    aria-label="Default select example" style="width: 155px; height: 40px;">
                                    <option value="">Job Pelatihan</option>
                                    @foreach ($job_filters as $job_filter)
                                        <option value="{{ $job_filter->id }}">{{ $job_filter->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="dropdown-item">
                            <select name="reportRange" id="reportrange3"
                                class="filters form-select form-select-md fs-13 p-2 text-dark shadow-none">
                                <option class="mt-1 d-none shadow-none p-0" value="" style="border: 0;"
                                    data-toggle="tooltip" title="Saat berwarna abu, maka menampilkan semua tanggal.">Pilih
                                    Tanggal</option>
                            </select>
                            <input type="hidden" name="tanggal-start" id="filter-tanggal-start" value="">
                            <input type="hidden" name="tanggal-end" id="filter-tanggal-end" value="">
                        </div>
                        <div class="dropdown-item">
                            <div class="form-group mb-0">
                                <button class="btn btn-outline-primary fs-13 w-100" style="height: 40px;">Cari</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <div class="collapse" id="collapseExample">
                <ul class="nav nav-tabs nav-pills d-lg-none mb-4 mb-lg-0">
                    <li class="nav-item mb-0 mb-md-3">
                        <a class="nav-link fs-10 fw-normal active" data-bs-toggle="tab" href="#tab1-1">
                            <span class="fs-16 fw-normal">Pelatihan</span>
                        </a>
                    </li>
                    <li class="nav-item mb-0 mb-md-3">
                        <a class="nav-link fs-10 fw-normal" data-bs-toggle="tab" href="#tab1-2">
                            <span class="fs-16 fw-normal">Pelatihan Terbaik</span>
                        </a>
                    </li>
                    <li class="nav-item mb-0 mb-md-3">
                        <a class="nav-link fs-10 fw-normal" data-bs-toggle="tab" href="#tab1-3">
                            <span class="fs-16 fw-normal">Pelatihan Selesai</span>
                        </a>
                    </li>
                    <li class="nav-item mb-0 mb-md-3">
                        <a class="nav-link fs-10 fw-normal" data-bs-toggle="tab" href="#tab1-4">
                            <span class="fs-16 fw-normal">Best Learner</span>
                        </a>
                    </li>
                </ul>
                <!-- /.nav-tabs -->
            </div>
            <div class="col-lg-12 text-end">
                {{-- <div class="btn p-1 bg-light float-end rounded-end" id="reportrange1" style="cursor: pointer;max-width: 60px;position: absolute;z-index: 1;top: 8px;right: 25px;">
                <i class='bx bx-calendar' ></i>&nbsp;
                <span></span> <i class="fa fa-caret-down"></i>
            </div> --}}
            </div>

            <div class="tab-pane show active fade" id="tab1-1">
                <h6 class="fs-20 fw-semibold mb-0"><span class="text-primary">Statistik</span> Pelatihan</h6>
                <p class="fs-13 text-muted">Laporan Berdasarkan Status Pelatihan Secara General</p>
                <div class="card">
                    <div class="card-header">
                        <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>
                        <!-- /.nav-tabs -->
                    </div>
                    <div class="card-body" style="height: 550px; 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>

                        <div class="tab-content mt-0">
                            <div class="tab-pane fade show active" id="tab2-1">
                                <div class="chartbox">
                                    <figure class="highcharts-figure">
                                        <div id="pesertaStatsDashboard"></div>
                                    </figure>
                                </div>
                            </div>
                            <!--/.tab-pane -->
                            <div class="tab-pane fade" id="tab2-2">
                                <div class="chartbox">
                                    <figure class="highcharts-figure">
                                        <div id="pesertaStatsBarDashboard"></div>
                                    </figure>
                                </div>
                            </div>
                            <!--/.tab-pane -->
                            <div class="tab-pane fade" id="tab2-3">
                                <div class="row text-end" style="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>

                                <div class="table-responsive">
                                    <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>
            <!--/.tab-pane -->
            <div class="tab-pane fade" id="tab1-2">
                <h6 class="fs-20 fw-semibold mb-0"><span class="text-primary">Statistik</span> Pelatihan</h6>
                <p class="fs-13 text-muted">Laporan Pelatihan Secara General</p>
                <div class="card">
                    <div class="card-header">
                        <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>
                        <!-- /.nav-tabs -->
                    </div>
                    <div class="card-body" style="height: 550px; 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>

                        <div class="tab-content mt-0">
                            <div class="tab-pane fade show active" id="tab3-1">
                                <div class="chartbox">
                                    <figure class="highcharts-figure">
                                        <div id="bestModulDashboard"></div>
                                    </figure>
                                </div>
                            </div>
                            <!--/.tab-pane -->
                            <div class="tab-pane fade" id="tab3-2">
                                <div class="chartbox">
                                    <figure class="highcharts-figure">
                                        <div id="bestModulBarDashboard"></div>
                                    </figure>
                                </div>
                            </div>
                            <!--/.tab-pane -->
                            <div class="tab-pane fade" id="tab3-3">
                                <div class="row text-end" style="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>

                                <div class="table-responsive">
                                    <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>
                                        {{-- <tfoot class="bg-primary"></tfoot> --}}
                                    </table>
                                </div>
                            </div>
                            <!--/.tab-pane -->
                        </div>
                        <!-- /.tab-content -->
                    </div>
                </div>
            </div>
            <!--/.tab-pane -->
            <div class="tab-pane fade" id="tab1-3">
                <h6 class="fs-20 fw-semibold mb-0"><span class="text-primary">Statistik</span> Penyelesaian Modul</h6>
                <p class="fs-13 text-muted">Laporan statistik penyelesaian modul peserta secara general</p>
                <div class="card">
                    <div class="card-header">
                        <ul class="nav nav-tabs nav-pills">
                            <li class="nav-item">
                                <a class="nav-link active" data-bs-toggle="tab" href="#tab4-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="#tab4-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="#tab4-3">
                                    <span class="pe-1">
                                        <i class='bx bx-table'></i>
                                    </span>
                                </a>
                            </li>
                        </ul>
                        <!-- /.nav-tabs -->
                    </div>
                    <div class="card-body" style="height: 550px; 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>

                        <div class="tab-content mt-0">
                            <div class="tab-pane fade show active" id="tab4-1">
                                <div class="chartbox">
                                    <figure class="highcharts-figure">
                                        <div id="modulStatsDashboard"></div>
                                    </figure>
                                </div>
                            </div>
                            <!--/.tab-pane -->
                            <div class="tab-pane fade" id="tab4-2">
                                <div class="chartbox">
                                    <figure class="highcharts-figure">
                                        <div id="modulStatsBarDashboard"></div>
                                    </figure>
                                </div>
                            </div>
                            <!--/.tab-pane -->
                            <div class="tab-pane fade" id="tab4-3">
                                <div class="row text-end" style="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>
            <!--/.tab-pane -->
            <div class="tab-pane fade" id="tab1-4">
                <h6 class="fs-20 fw-semibold mb-0"><span class="text-primary">Peserta Terbaik</span></h6>
                <p class="fs-13 text-muted">Peserta terbaik berdasarkan jumlah modul pada saat ini</p>

                <div class="card">
                    <div class="card-header">
                        <ul class="nav nav-tabs nav-pills">
                            <li class="nav-item">
                                <a class="nav-link active" data-bs-toggle="tab" href="#tab5-1">
                                    <span class="pe-1 fs-15">
                                        Internal
                                    </span>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" data-bs-toggle="tab" href="#tab5-2">
                                    <span class="pe-1 fs-15">
                                        External
                                    </span>
                                </a>
                            </li>
                        </ul>
                    </div>
                    <div class="card-body" style="height: 550px; overflow-y: auto;">
                        <div class="db-preloader preloader text-center d-none" id="loading-bestlearner">
                            <img src="{{ asset('needed/img/loading/loader-2.gif') }}">
                        </div>

                        <div class="tab-content mt-0">
                            <div class="tab-pane fade show active" id="tab5-1">
                                <div class="row text-end mb-2" style="cursor: pointer; z-index: 999;">
                                    <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('ExcelBestLearner/Internal', 0, null, dttablebestInternal)"
                                                        class="dropdown-item" style="font-weight: normal;">Download
                                                        Xls</a></li>
                                                <li><a href="#"
                                                        onclick="exportData2('PdfBestLearner/Internal', 0, null, dttablebestInternal)"
                                                        class="dropdown-item" style="font-weight: normal;">Download
                                                        Pdf</a></li>
                                                <li><a href="#"
                                                        onclick="exportData2('CsvBestLearner/Internal', 0, null, dttablebestInternal)"
                                                        class="dropdown-item" style="font-weight: normal;">Download
                                                        Csv</a></li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                <table class="table table-bordered" id="bestLearnerInternal" width="100%" cellspacing="0">
                                    <thead class="bg-primary">
                                        <tr class="text-white">
                                            <th class="text-center">Rank</th>
                                            <th>Nama</th>
                                            <th class="text-center">Status</th>
                                            <th class="text-center">ID</th>
                                            <th class="text-center">Klien</th>
                                            <th class="px-1 text-center">Jumlah Modul</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    </tbody>
                                </table>
                            </div>

                            <div class="tab-pane fade" id="tab5-2">
                                <div class="row text-end mb-2" style="cursor: pointer; z-index: 999;">
                                    <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('ExcelBestLearner/External', 0, null, dttablebestExternal)" class="dropdown-item" style="font-weight: normal;">
                                                        Download Xls
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="#" onclick="exportData2('PdfBestLearner/External', 0, null, dttablebestExternal)" class="dropdown-item" style="font-weight: normal;">
                                                        Download Pdf
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="#" onclick="exportData2('CsvBestLearner/External', 0, null, dttablebestExternal)" class="dropdown-item" style="font-weight: normal;">
                                                        Download Csv
                                                    </a>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                <table class="table table-bordered" id="bestLearnerExternal" width="100%" cellspacing="0">
                                    <thead class="bg-primary">
                                        <tr class="text-white">
                                            <th class="text-center">Rank</th>
                                            <th>Nama</th>
                                            <th class="text-center">Status</th>
                                            <th class="text-center">ID</th>
                                            <th class="text-center">Klien</th>
                                            <th class="px-1 text-center">Jumlah Modul</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    </tbody>
                                </table>
                            </div>
                            <!--/.tab-pane -->
                        </div>
                        <!-- /.tab-content -->
                    </div>
                </div>

            </div>
            <!-- /.tab-content -->
        </div>
        <!--/.tab-pane -->
    </div>
    <!-- /.tab-content -->


    </div>
    <!-- container -->
@endsection
<style>
    .daterangepicker .drp-calendar {
        display: block !important;
        max-width: 270px;
    }

    .daterangepicker.show-calendar .drp-buttons {
        display: block !important;
    }
</style>

@section('script')
    <script>
        var dttableCourse, dttablebestInternal, dttablebestExternal, dttableStatus, dttablepeserta;
        $(document).ready(function() {
            $('#filters-form').submit(function(e) {
                e.preventDefault();

                setBestLearner();
                setStatus();
                setCourse();
                setPeserta();
            });

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

            setBestLearner();
            setStatus();
            setCourse();
            setPeserta();
        });

        function dtBestLearnerInternal(dataseries){
            dttablebestInternal = $('#bestLearnerInternal').DataTable({
                processing: true,
                serverSide: false,
                destroy: true,
                data: dataseries,
                columns: [{
                        data: null,
                        render: function(data, type, row, meta) {
                            return meta.row + 1 + '. ';
                        },
                        class: 'text-center fw-bold'
                    },
                    {
                        data: 'nama',
                        class: 'text-start'
                    },
                    {
                        data: 'status',
                        class: 'text-start'
                    },
                    {
                        data: 'sim_id',
                        render: function(data, type, row, meta) {
                            if (data) {
                                return data;
                            } else {
                                return '-';
                            }
                        },
                        class: 'text-end'
                    },
                    {
                        data: 'title',
                        render: function(data, type, row, meta) {
                            if (data == 'PERORANGAN') {
                                return row.client;
                            } else if (data) {
                                return data + '. ' + row.client;
                            } else {
                                return '-';
                            }
                        },
                        class: 'text-start'
                    },
                    {
                        data: 'jumlah_modul',
                        class: 'text-end'
                    },
                ],
                "language": {
                    "paginate": {
                        "first": "Awal",
                        "previous": "Sebelumnya",
                        "next": "Selanjutnya",
                        "last": "Akhir"
                    },
                    // Customize other text as needed
                    "search": "Pencarian",
                    "lengthMenu": "Tampil <select>" +
                    "<option value='10'>10</option>" +
                    "<option value='25'>25</option>" +
                    "<option value='50'>50</option>" +
                    "<option value='-1'>All</option>" +
                    "</select> Data",
                    "emptyTable": "Tidak ada data yang tersedia dalam tabel",
                    "info": "Tampilan data _START_ sampai _END_ dari _TOTAL_ data",
                    "infoEmpty": "Menampilkan 0 hingga 0 dari 0 entri",
                    "infoFiltered": "(disaring dari total _MAX_ entri)",
                    "zeroRecords": "Tidak ada data yang cocok",
                }
            });
        }

        function dtBestLearnerExternal(dataseries){
            dttablebestExternal = $('#bestLearnerExternal').DataTable({
                processing: true,
                serverSide: false,
                destroy: true,
                data: dataseries,
                columns: [{
                        data: null,
                        render: function(data, type, row, meta) {
                            return meta.row + 1 + '. ';
                        },
                        class: 'text-center fw-bold'
                    },
                    {
                        data: 'nama',
                        class: 'text-start'
                    },
                    {
                        data: 'status',
                        class: 'text-start'
                    },
                    {
                        data: 'sim_id',
                        render: function(data, type, row, meta) {
                            if (data) {
                                return data;
                            } else {
                                return '-';
                            }
                        },
                        class: 'text-end'
                    },
                    {
                        data: 'title',
                        render: function(data, type, row, meta) {
                            if (data == 'PERORANGAN') {
                                return row.client;
                            } else if (data) {
                                return data + '. ' + row.client;
                            } else {
                                return '-';
                            }
                        },
                        class: 'text-start'
                    },
                    {
                        data: 'jumlah_modul',
                        class: 'text-end'
                    },
                ],
                    "language": {
                        "paginate": {
                            "first": "Awal",
                            "previous": "Sebelumnya",
                            "next": "Selanjutnya",
                            "last": "Akhir"
                        },
                        // Customize other text as needed
                        "search": "Pencarian",
                        "lengthMenu": "Tampil <select>" +
                        "<option value='10'>10</option>" +
                        "<option value='25'>25</option>" +
                        "<option value='50'>50</option>" +
                        "<option value='-1'>All</option>" +
                        "</select> Data",
                        "emptyTable": "Tidak ada data yang tersedia dalam tabel",
                        "info": "Tampilan data _START_ sampai _END_ dari _TOTAL_ data",
                        "infoEmpty": "Menampilkan 0 hingga 0 dari 0 entri",
                        "infoFiltered": "(disaring dari total _MAX_ entri)",
                        "zeroRecords": "Tidak ada data yang cocok",
                    }
            });
        }

        // Best learner
        function setBestLearner() {
            $.ajax({
                url: "{{ url('Summary/getDataBestLearner') }}",
                type: 'POST',
                cache: false,
                data: {
                    course: $('[name="course"]').val(),
                    client: $('[name="client"]').val(),
                    status: $('[name="status"]').val(),
                    job: $('[name="job"]').val(),
                    tanggalStart: $('[name="tanggal-start"]').val(),
                    tanggalEnd: $('[name="tanggal-end"]').val(),
                },
                beforeSend: function() {
                    $('#loading-bestlearner').removeClass('d-none');
                },
                complete: function() {
                    $('#loading-bestlearner').addClass('d-none');
                },
                success: function(json) {
                    dtBestLearnerInternal(json.internal)
                    dtBestLearnerExternal(json.external)
                },
                error: function(xhr, ajaxOptions, thrownError) {
                    alert("error bestlearner");
                },
            });
        }

        // Kelulusan Peserta
        function setStatus() {
            var datapie = [];
            var databar = [];
            var datat = [];
            var total_peserta = 0;
            $.ajax({
                url: "{{ url('Dashboard/getStatus') }}",
                type: 'POST',
                cache: false,
                data: {
                    course: $('[name="course"]').val(),
                    client: $('[name="client"]').val(),
                    status: $('[name="status"]').val(),
                    job: $('[name="job"]').val(),
                    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) {
                    // for(var i = 0; i < json.length; i++){
                    //     var item = json[i];
                    //     total_peserta += Number(item.total);

                    //     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),
                    //                 },
                    //             ],
                    //         });
                    //     }
                    // }
                    // datat.push({
                    //     name: 'Total',
                    //     y: total_peserta,
                    // });

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

        // 5 Course Terbanyak
        function setCourse() {
            var datapie = [];
            var databar = [];
            var datatable = [];
            $.ajax({
                url: "{{ url('Dashboard/getCourse') }}",
                type: 'POST',
                cache: false,
                data: {
                    course: $('[name="course"]').val(),
                    client: $('[name="client"]').val(),
                    status: $('[name="status"]').val(),
                    job: $('[name="job"]').val(),
                    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) {
                    hcBestPie(json.categories, json.drilldown);
                    hcBestBar(json.categories, json.drilldown);
                    dtBest(json.data_detail);
                },
                error: function(xhr, ajaxOptions, thrownError) {
                    alert("error course");
                },
            });
        }

        // Penyelesaian Course
        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: {
                    course: $('[name="course"]').val(),
                    client: $('[name="client"]').val(),
                    status: $('[name="status"]').val(),
                    job: $('[name="job"]').val(),
                    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 hcPesertaPie(dataseries, drilldownseries) {
            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: 'Pelatihan',
                    colorByPoint: true,
                    data: dataseries
                }],
                drilldown: {
                    breadcrumbs: {
                        position: {
                            align: 'right'
                        }
                    },
                    series: drilldownseries
                },
            });
        }

        function hcPesertaBar(dataseries, drilldownseries) {
            dataseries.reverse();
            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: {
                    // categories: ['Kelulusan'],
                    // crosshair: true
                    type: 'category'
                },
                yAxis: {
                    min: 0,
                    title: {
                        text: 'Jumlah (Peserta)'
                    },
                    labels: {
                        formatter: function() {
                            return Math.floor(this.value);
                        }
                    },
                    tickInterval: 1
                },
                series: [{
                    name: 'Pelatihan',
                    colorByPoint: true,
                    data: dataseries,
                }],
                drilldown: {
                    breadcrumbs: {
                        position: {
                            align: 'right'
                        }
                    },
                    series: drilldownseries
                }
            });
        }

        function dtPeserta(dataseries) {
            dttableStatus = $('#table-status').DataTable({
                searching: false,
                ordering: false,
                info: false,
                processing: true,
                paging: false,
                destroy: true,
                data: dataseries,
                columns: [{
                        data: null,
                        render: (data, type, row, meta) => meta.row + 1 + '.',
                        class: 'text-center'
                    },
                    {
                        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 hcBestPie(dataseries, drilldownseries) {
            Highcharts.chart('bestModulDashboard', {
                chart: {
                    type: 'pie'
                },
                title: {
                    text: 'Pelatihan',
                    align: 'center'
                },
                credits: {
                    enabled: false
                },
                xAxis: {
                    type: 'category'
                },
                yAxis: {
                    title: ' '
                },
                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: 'Pelatihan',
                    colorByPoint: true,
                    data: dataseries,
                }],
                drilldown: {
                    breadcrumbs: {
                        position: {
                            align: 'right'
                        }
                    },
                    series: drilldownseries
                },
            });
        }

        function hcBestBar(dataseries, drilldownseries) {
            dataseries.reverse();
            Highcharts.chart('bestModulBarDashboard', {
                chart: {
                    type: 'bar'
                },
                title: {
                    text: 'Pelatihan',
                    align: 'center'
                },
                credits: {
                    enabled: false
                },
                xAxis: {
                    // categories: ['Modul'],
                    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: 'Pelatihan',
                    colorByPoint: true,
                    data: dataseries,
                }],
                drilldown: {
                    breadcrumbs: {
                        position: {
                            align: 'right'
                        }
                    },
                    series: drilldownseries
                },
            });
        }

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

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

            function updateTotals() {
                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 hcModulPie(dataseries, drilldownseries) {
            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) {
            dataseries.reverse();
            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: {
                    min: 0,
                    title: ' ',
                    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)) {
                        // $('td', row).addClass('text-primary fw-semibold');
                        $(row).addClass('bg-primary text-white text-end');
                        $(row).find('td:first-child').remove();
                        $('td:eq(0)', row).attr('colspan', 2).removeClass('text-start');
                    }
                }
            });
        }
    </script>
@endsection