@extends('admin.layouts.app')

@section('content')
    <script src="https://cdn.jsdelivr.net/npm/chart.js@3.0.0/dist/chart.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0"></script>

    <div class="conatiner-fluid content-inner mt-n5 py-0" style="margin-top: 100px !important;">
        <div class="row">
            <div class="col-md-12 col-lg-12">
                <div class="row row-cols-1">
                    <div class="overflow-hidden d-slider1 ">
                        <ul class="p-0 m-0 mb-2 swiper-wrapper list-inline">
                            <li class="swiper-slide card card-slide" data-aos="fade-up" data-aos-delay="700">
                                <div class="card-body">
                                    <div class="progress-widget">
                                        <svg class="icon-60" width="60" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <path opacity="0.4" d="M16.8843 5.11485H13.9413C13.2081 5.11969 12.512 4.79355 12.0474 4.22751L11.0782 2.88762C10.6214 2.31661 9.9253 1.98894 9.19321 2.00028H7.11261C3.37819 2.00028 2.00001 4.19201 2.00001 7.91884V11.9474C1.99536 12.3904 21.9956 12.3898 21.9969 11.9474V10.7761C22.0147 7.04924 20.6721 5.11485 16.8843 5.11485Z" fill="currentColor"></path>
                                            <path fill-rule="evenodd" clip-rule="evenodd" d="M20.8321 6.54353C21.1521 6.91761 21.3993 7.34793 21.5612 7.81243C21.8798 8.76711 22.0273 9.77037 21.9969 10.7761V16.0292C21.9956 16.4717 21.963 16.9135 21.8991 17.3513C21.7775 18.1241 21.5057 18.8656 21.0989 19.5342C20.9119 19.8571 20.6849 20.1553 20.4231 20.4215C19.2383 21.5089 17.665 22.0749 16.0574 21.9921H7.93061C6.32049 22.0743 4.74462 21.5086 3.55601 20.4215C3.2974 20.1547 3.07337 19.8566 2.88915 19.5342C2.48475 18.8661 2.21869 18.1238 2.1067 17.3513C2.03549 16.9142 1.99981 16.4721 2 16.0292V10.7761C1.99983 10.3374 2.02357 9.89902 2.07113 9.46288C2.08113 9.38636 2.09614 9.31109 2.11098 9.23659C2.13573 9.11241 2.16005 8.99038 2.16005 8.86836C2.25031 8.34204 2.41496 7.83116 2.64908 7.35101C3.34261 5.86916 4.76525 5.11492 7.09481 5.11492H16.8754C18.1802 5.01401 19.4753 5.4068 20.5032 6.21522C20.6215 6.3156 20.7316 6.4254 20.8321 6.54353ZM6.97033 15.5412H17.0355H17.0533C17.2741 15.5507 17.4896 15.4717 17.6517 15.3217C17.8137 15.1716 17.9088 14.963 17.9157 14.7425C17.9282 14.5487 17.8644 14.3577 17.7379 14.2101C17.5924 14.0118 17.3618 13.8935 17.1155 13.8907H6.97033C6.51365 13.8907 6.14343 14.2602 6.14343 14.7159C6.14343 15.1717 6.51365 15.5412 6.97033 15.5412Z" fill="currentColor"></path>
                                        </svg>
                                        <div class="progress-detail" style="margin-left: 1rem;">
                                            <p class="mb-2">Total Division</p>
                                            <h4 class="counter" id="counter_division">0</h4>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li class="swiper-slide card card-slide" data-aos="fade-up" data-aos-delay="800">
                                <div class="card-body">
                                    <div class="progress-widget">
                                        <svg class="icon-60" width="60" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <path opacity="0.4" d="M2 11.0786C2.05 13.4166 2.19 17.4156 2.21 17.8566C2.281 18.7996 2.642 19.7526 3.204 20.4246C3.986 21.3676 4.949 21.7886 6.292 21.7886C8.148 21.7986 10.194 21.7986 12.181 21.7986C14.176 21.7986 16.112 21.7986 17.747 21.7886C19.071 21.7886 20.064 21.3566 20.836 20.4246C21.398 19.7526 21.759 18.7896 21.81 17.8566C21.83 17.4856 21.93 13.1446 21.99 11.0786H2Z" fill="currentColor"></path>
                                            <path d="M11.2451 15.3843V16.6783C11.2451 17.0923 11.5811 17.4283 11.9951 17.4283C12.4091 17.4283 12.7451 17.0923 12.7451 16.6783V15.3843C12.7451 14.9703 12.4091 14.6343 11.9951 14.6343C11.5811 14.6343 11.2451 14.9703 11.2451 15.3843Z" fill="currentColor"></path>
                                            <path fill-rule="evenodd" clip-rule="evenodd" d="M10.211 14.5565C10.111 14.9195 9.762 15.1515 9.384 15.1015C6.833 14.7455 4.395 13.8405 2.337 12.4815C2.126 12.3435 2 12.1075 2 11.8555V8.38949C2 6.28949 3.712 4.58149 5.817 4.58149H7.784C7.972 3.12949 9.202 2.00049 10.704 2.00049H13.286C14.787 2.00049 16.018 3.12949 16.206 4.58149H18.183C20.282 4.58149 21.99 6.28949 21.99 8.38949V11.8555C21.99 12.1075 21.863 12.3425 21.654 12.4815C19.592 13.8465 17.144 14.7555 14.576 15.1105C14.541 15.1155 14.507 15.1175 14.473 15.1175C14.134 15.1175 13.831 14.8885 13.746 14.5525C13.544 13.7565 12.821 13.1995 11.99 13.1995C11.148 13.1995 10.433 13.7445 10.211 14.5565ZM13.286 3.50049H10.704C10.031 3.50049 9.469 3.96049 9.301 4.58149H14.688C14.52 3.96049 13.958 3.50049 13.286 3.50049Z" fill="currentColor"></path>
                                        </svg>
                                        <div class="progress-detail" style="margin-left: 1rem;">
                                            <p class="mb-2">Total Role</p>
                                            <h4 class="counter" id="counter_role">0</h4>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li class="swiper-slide card card-slide" data-aos="fade-up" data-aos-delay="900">
                                <div class="card-body">
                                    <div class="progress-widget">
                                        <svg class="icon-60" width="60" viewBox="0 0 24 24" fill="none"
                                            xmlns="http://www.w3.org/2000/svg">
                                            <path opacity="0.4"
                                                d="M16.8843 5.11485H13.9413C13.2081 5.11969 12.512 4.79355 12.0474 4.22751L11.0782 2.88762C10.6214 2.31661 9.9253 1.98894 9.19321 2.00028H7.11261C3.37819 2.00028 2.00001 4.19201 2.00001 7.91884V11.9474C1.99536 12.3904 21.9956 12.3898 21.9969 11.9474V10.7761C22.0147 7.04924 20.6721 5.11485 16.8843 5.11485Z"
                                                fill="currentColor"></path>
                                            <path fill-rule="evenodd" clip-rule="evenodd"
                                                d="M20.8321 6.54353C21.1521 6.91761 21.3993 7.34793 21.5612 7.81243C21.8798 8.76711 22.0273 9.77037 21.9969 10.7761V16.0292C21.9956 16.4717 21.963 16.9135 21.8991 17.3513C21.7775 18.1241 21.5057 18.8656 21.0989 19.5342C20.9119 19.8571 20.6849 20.1553 20.4231 20.4215C19.2383 21.5089 17.665 22.0749 16.0574 21.9921H7.93061C6.32049 22.0743 4.74462 21.5086 3.55601 20.4215C3.2974 20.1547 3.07337 19.8566 2.88915 19.5342C2.48475 18.8661 2.21869 18.1238 2.1067 17.3513C2.03549 16.9142 1.99981 16.4721 2 16.0292V10.7761C1.99983 10.3374 2.02357 9.89902 2.07113 9.46288C2.08113 9.38636 2.09614 9.31109 2.11098 9.23659C2.13573 9.11241 2.16005 8.99038 2.16005 8.86836C2.25031 8.34204 2.41496 7.83116 2.64908 7.35101C3.34261 5.86916 4.76525 5.11492 7.09481 5.11492H16.8754C18.1802 5.01401 19.4753 5.4068 20.5032 6.21522C20.6215 6.3156 20.7316 6.4254 20.8321 6.54353ZM6.97033 15.5412H17.0355H17.0533C17.2741 15.5507 17.4896 15.4717 17.6517 15.3217C17.8137 15.1716 17.9088 14.963 17.9157 14.7425C17.9282 14.5487 17.8644 14.3577 17.7379 14.2101C17.5924 14.0118 17.3618 13.8935 17.1155 13.8907H6.97033C6.51365 13.8907 6.14343 14.2602 6.14343 14.7159C6.14343 15.1717 6.51365 15.5412 6.97033 15.5412Z"
                                                fill="currentColor"></path>
                                        </svg>
                                        <div class="progress-detail" style="margin-left: 1rem;">
                                            <p class="mb-2">Total User</p>
                                            <h4 class="counter" id="counter_user">0</h4>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            {{-- <li class="swiper-slide card card-slide" data-aos="fade-up" data-aos-delay="1000">
                                <div class="card-body">
                                    <div class="progress-widget">
                                        <svg class="icon-60" width="60" viewBox="0 0 24 24" fill="none"
                                            xmlns="http://www.w3.org/2000/svg">
                                            <path opacity="0.4"
                                                d="M21.25 13.4764C20.429 13.4764 19.761 12.8145 19.761 12.001C19.761 11.1865 20.429 10.5246 21.25 10.5246C21.449 10.5246 21.64 10.4463 21.78 10.3076C21.921 10.1679 22 9.97864 22 9.78146L21.999 7.10415C21.999 4.84102 20.14 3 17.856 3H6.144C3.86 3 2.001 4.84102 2.001 7.10415L2 9.86766C2 10.0648 2.079 10.2541 2.22 10.3938C2.36 10.5325 2.551 10.6108 2.75 10.6108C3.599 10.6108 4.239 11.2083 4.239 12.001C4.239 12.8145 3.571 13.4764 2.75 13.4764C2.336 13.4764 2 13.8093 2 14.2195V16.8949C2 19.158 3.858 21 6.143 21H17.857C20.142 21 22 19.158 22 16.8949V14.2195C22 13.8093 21.664 13.4764 21.25 13.4764Z"
                                                fill="currentColor"></path>
                                            <path
                                                d="M15.4303 11.5887L14.2513 12.7367L14.5303 14.3597C14.5783 14.6407 14.4653 14.9177 14.2343 15.0837C14.0053 15.2517 13.7063 15.2727 13.4543 15.1387L11.9993 14.3737L10.5413 15.1397C10.4333 15.1967 10.3153 15.2267 10.1983 15.2267C10.0453 15.2267 9.89434 15.1787 9.76434 15.0847C9.53434 14.9177 9.42134 14.6407 9.46934 14.3597L9.74734 12.7367L8.56834 11.5887C8.36434 11.3907 8.29334 11.0997 8.38134 10.8287C8.47034 10.5587 8.70034 10.3667 8.98134 10.3267L10.6073 10.0897L11.3363 8.61268C11.4633 8.35868 11.7173 8.20068 11.9993 8.20068H12.0013C12.2843 8.20168 12.5383 8.35968 12.6633 8.61368L13.3923 10.0897L15.0213 10.3277C15.2993 10.3667 15.5293 10.5587 15.6173 10.8287C15.7063 11.0997 15.6353 11.3907 15.4303 11.5887Z"
                                                fill="currentColor"></path>
                                        </svg>
                                        <div class="progress-detail" style="margin-left: 1rem;">
                                            <p class="mb-2">Total Pages</p>
                                            <h4 class="counter" id="counter_page">0</h4>
                                        </div>
                                    </div>
                                </div>
                            </li> --}}
                        </ul>
                        <div class="swiper-button swiper-button-next"></div>
                        <div class="swiper-button swiper-button-prev"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">

        
        <div class="col-md-12 col-lg-6">
                <div class="row">
                    <div class="col-md-12">
                        <div class="card" data-aos="fade-up" data-aos-delay="0">
                            <div class="flex-wrap card-header d-flex justify-content-between align-items-center">
                                <div class="header-title">
                                    <h4 class="card-title">Jumlah Pegawai Masuk & Tidak (Hari Ini)</h4>
                                </div>
                            </div>
                            <div class="card-body" style="height: 350px">
                                <canvas id="chart-attendance-checkin"></canvas>
                            </div>
                        </div>
                    </div>
                </div>
        </div>


        @if ($session_data['user_level_id'] == 1)
        <div class="col-md-12 col-lg-6">
                <div class="row">
                    <div class="col-md-12">
                        <div class="card" data-aos="fade-up" data-aos-delay="0">
                            <div class="flex-wrap card-header d-flex justify-content-between align-items-center">
                                <div class="header-title">
                                    <h4 class="card-title">Jenis Keterlambatan Pegawai (Hari Ini)</h4>
                                </div>
                            </div>
                            <div class="card-body" style="height: 350px">
                                <canvas id="chart-attendance-notes"></canvas>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            @endif

            @if ($session_data['user_level_id'] == 1)
            <div class="col-md-12 col-lg-6">
                <div class="row">
                    <div class="col-md-12">
                        <div class="card" data-aos="fade-up" data-aos-delay="0">
                            <div class="flex-wrap card-header d-flex justify-content-between align-items-center">
                                <div class="header-title">
                                    <h4 class="card-title">Jenis Kehadiran Pegawai (Hari Ini)</h4>
                                </div>
                            </div>
                            <div class="card-body" style="height: 350px">
                                <canvas id="chart-attendance-category"></canvas>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            @endif
            @if ($session_data['user_level_id'] == 1)
            <div class="col-md-12 col-lg-12">
                <div class="row">
                    <div class="col-md-12">
                        <div class="card" data-aos="fade-up" data-aos-delay="0">
                            <div class="flex-wrap card-header d-flex justify-content-between align-items-center">
                                <div class="header-title">
                                    <h4 class="card-title">Status Kehadiran Harian (Bulan Ini)</h4>
                                </div>
                            </div>
                            <div class="card-body" style="height: 400px">
                                <canvas id="chart-attendance-daily"></canvas>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            @endif

            <div class="col-md-12 col-lg-8">
                <div class="row">
                    <div class="col-md-12">
                        <div class="card" data-aos="fade-up" data-aos-delay="800">
                            <div class="flex-wrap card-header d-flex justify-content-between align-items-center">
                                <div class="header-title">
                                    <h4 class="card-title">Daily Access (Last 30 Days)</h4>
                                </div>
                            </div>
                            <div class="card-body" style="height: 350px">
                                <canvas id="chart-daily-access"></canvas>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-12 col-lg-4">
                <div class="row">
                    <div class="col-md-12">
                        <div class="card" data-aos="fade-up" data-aos-delay="800">
                            <div class="flex-wrap card-header d-flex justify-content-between align-items-center">
                                <div class="header-title">
                                    <h4 class="card-title">Top Device</h4>
                                </div>
                            </div>
                            <div class="card-body" style="height: 350px">
                                <canvas id="chart-top-device"></canvas>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12 col-lg-8">
                <div class="row">
                    <div class="col-md-12">
                        <div class="card" data-aos="fade-up" data-aos-delay="800">
                            <div class="flex-wrap card-header d-flex justify-content-between align-items-center">
                                <div class="header-title">
                                    <h4 class="card-title">Monthly Access (Last 12 Month)</h4>
                                </div>
                            </div>
                            <div class="card-body" style="height: 350px">
                                <canvas id="chart-monthly-access"></canvas>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-12 col-lg-4">
                <div class="row">
                    <div class="col-md-12">
                        <div class="card" data-aos="fade-up" data-aos-delay="800">
                            <div class="flex-wrap card-header d-flex justify-content-between align-items-center">
                                <div class="header-title">
                                    <h4 class="card-title">Top Operating System</h4>
                                </div>
                            </div>
                            <div class="card-body" style="height: 350px">
                                <canvas id="chart-top-os"></canvas>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12 col-lg-12">
                <div class="row">
                    <div class="col-md-12">
                        <div class="card" data-aos="fade-up" data-aos-delay="800">
                            <div class="flex-wrap card-header d-flex justify-content-between align-items-center">
                                <div class="header-title">
                                    <h4 class="card-title">Top Page</h4>
                                </div>
                            </div>
                            <div class="card-body" style="height: 500px">
                                <canvas id="chart-top-page"></canvas>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12 col-lg-6">
                <div class="row">
                    <div class="col-md-12">
                        <div class="card" data-aos="fade-up" data-aos-delay="800">
                            <div class="flex-wrap card-header d-flex justify-content-between align-items-center">
                                <div class="header-title">
                                    <h4 class="card-title">Top Country</h4>
                                </div>
                            </div>
                            <div class="card-body" style="height: 400px">
                                <canvas id="chart-top-country"></canvas>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-12 col-lg-6">
                <div class="row">
                    <div class="col-md-12">
                        <div class="card" data-aos="fade-up" data-aos-delay="800">
                            <div class="flex-wrap card-header d-flex justify-content-between align-items-center">
                                <div class="header-title">
                                    <h4 class="card-title">Top City</h4>
                                </div>
                            </div>
                            <div class="card-body" style="height: 400px">
                                <canvas id="chart-top-city"></canvas>
                            </div>
                        </div>
                    </div>
                </div>
            </div>


        </div>
    </div>

    <script>
        $.ajaxSetup({headers:{'Authorization': "Bearer {{$session_token}}"}});

        // division
        $.ajax({
            url: '/api/division?count=true',
            type: "GET",
            dataType: "json",
            processData: false,
            success: function (result) {
                if(result['success'] == true) {
                    $('#counter_division').html(result['data']['count']);
                }
            }
        });
        // role
        $.ajax({
            url: '/api/role?count=true',
            type: "GET",
            dataType: "json",
            processData: false,
            success: function (result) {
                if(result['success'] == true) {
                    $('#counter_role').html(result['data']['count']);
                }
            }
        });
        // user
        $.ajax({
            url: '/api/user?count=true',
            type: "GET",
            dataType: "json",
            processData: false,
            success: function (result) {
                if(result['success'] == true) {
                    $('#counter_user').html(result['data']['count']);
                }
            }
        });
        // page
        // $.ajax({
        //     url: '/api/page?count=true',
        //     type: "GET",
        //     dataType: "json",
        //     processData: false,
        //     success: function (result) {
        //         if(result['success'] == true) {
        //             $('#counter_page').html(result['data']['count']);
        //         }
        //     }
        // });


        // access daily
        $.ajax({
            url: '/api/dashboard/access-daily',
            type: "GET",
            dataType: "json",
            processData: false,
            success: function (result) {
                if(result['success'] == true) {
                    // prepare data
                    var label = [];
                    var data = [];
                    result['data'].forEach(element => {
                        label.push(element['dates_indo']);
                        data.push(Number(element['count']));
                    });

                    // chart
                    new Chart('chart-daily-access', {
                        type: 'line',
                        data: {
                            labels: label,
                            datasets: [{
                                fill: false,
                                lineTension: 0,
                                backgroundColor: "rgba(7,65,115,1.0)",
                                borderColor: "rgba(7,65,115,0.1)",
                                data: data,
                                label: 'Total Count'
                            }]
                        },
                        options: {
                            plugins: {
                                legend: {
                                    display: false,
                                },
                            },
                            responsive: true,
                            maintainAspectRatio: false
                        },
                    });
                }
            }
        });

        // access monthly
        $.ajax({
            url: '/api/dashboard/access-monthly',
            type: "GET",
            dataType: "json",
            processData: false,
            success: function (result) {
                if(result['success'] == true) {
                    // prepare data
                    var label = [];
                    var data = [];
                    result['data'].forEach(element => {
                        label.push(element['months_indo']);
                        data.push(Number(element['count']));
                    });

                    // chart
                    new Chart('chart-monthly-access', {
                        type: 'bar',
                        data: {
                            labels: label,
                            datasets: [{
                                fill: false,
                                lineTension: 0,
                                backgroundColor: "rgba(22,121,171,1.0)",
                                borderColor: "rgba(22,121,171,0.1)",
                                data: data,
                                label: 'Total Count'
                            }]
                        },
                        options: {
                            plugins: {
                                legend: {
                                    display: false,
                                },
                            },
                            responsive: true,
                            maintainAspectRatio: false
                        },
                    });
                }
            }
        });

        // top device
        $.ajax({
            url: '/api/dashboard/top-device',
            type: "GET",
            dataType: "json",
            processData: false,
            success: function (result) {
                if(result['success'] == true) {
                    // prepare data
                    var label = [];
                    var data = [];
                    result['data'].forEach(element => {
                        label.push(element['device']);
                        data.push(Number(element['total']));
                    });

                    // chart
                    new Chart('chart-top-device', {
                        type: 'doughnut',
                        data: {
                            labels: label,
                            datasets: [{
                                data: data,
                                label: 'Total Count',
                                backgroundColor: [
                                    'rgb(243,206,123)',
                                    'rgb(19,170,185)',
                                    'rgb(240,130,95)'
                                ],
                                datalabels: {
                                    anchor: 'center',
                                    backgroundColor: null,
                                    borderWidth: 0
                                }
                            }]
                        },
                        options: {
                            plugins: {
                                legend: {
                                    display: true,
                                    position: 'bottom'
                                },
                            },
                            responsive: true,
                            maintainAspectRatio: false
                        },
                    });
                }
            }
        });

        // top os
        $.ajax({
            url: '/api/dashboard/top-os',
            type: "GET",
            dataType: "json",
            processData: false,
            success: function (result) {
                if(result['success'] == true) {
                    // prepare data
                    var label = [];
                    var data = [];
                    result['data'].forEach(element => {
                        label.push(element['os']);
                        data.push(Number(element['total']));
                    });

                    // chart
                    new Chart('chart-top-os', {
                        type: 'pie',
                        data: {
                            labels: label,
                            datasets: [{
                                data: data,
                                label: 'Total Count',
                                backgroundColor: [
                                    'rgb(255,152,0)',
                                    'rgb(44,120,101)',
                                    'rgb(87,85,254)',
                                    'rgb(210,0,98)',
                                ],
                            }]
                        },
                        options: {
                            plugins: {
                                legend: {
                                    display: true,
                                    position: 'bottom'
                                },
                            },
                            responsive: true,
                            maintainAspectRatio: false
                        },
                    });
                }
            }
        });

        // top page
        $.ajax({
            url: '/api/dashboard/top-page',
            type: "GET",
            dataType: "json",
            processData: false,
            success: function (result) {
                if(result['success'] == true) {
                    // prepare data
                    var label = [];
                    var data = [];
                    result['data'].forEach(element => {
                        label.push(element['path']);
                        data.push(Number(element['total']));
                    });

                    // chart
                    new Chart('chart-top-page', {
                        type: 'bar',
                        data: {
                            labels: label,
                            datasets: [{
                                data: data,
                                label: 'Total Count',
                                backgroundColor: 'rgb(215,75,118)'
                            }]
                        },
                        options: {
                            // indexAxis: 'y',
                            plugins: {
                                legend: {
                                    display: false,
                                    position: 'bottom'
                                },
                            },
                            responsive: true,
                            maintainAspectRatio: false
                        },
                    });
                }
            }
        });

        // top country
        $.ajax({
            url: '/api/dashboard/top-country',
            type: "GET",
            dataType: "json",
            processData: false,
            success: function (result) {
                if(result['success'] == true) {
                    // prepare data
                    var label = [];
                    var data = [];
                    result['data'].forEach(element => {
                        label.push(element['country_name']);
                        data.push(Number(element['total']));
                    });

                    // chart
                    new Chart('chart-top-country', {
                        type: 'bar',
                        data: {
                            labels: label,
                            datasets: [{
                                data: data,
                                label: 'Total Count',
                                backgroundColor: 'rgb(197,255,149)'
                            }]
                        },
                        options: {
                            indexAxis: 'y',
                            plugins: {
                                legend: {
                                    display: false,
                                    position: 'bottom'
                                },
                            },
                            responsive: true,
                            maintainAspectRatio: false
                        },
                    });
                }
            }
        });

        // top city
        $.ajax({
            url: '/api/dashboard/top-city',
            type: "GET",
            dataType: "json",
            processData: false,
            success: function (result) {
                if(result['success'] == true) {
                    // prepare data
                    var label = [];
                    var data = [];
                    result['data'].forEach(element => {
                        label.push(element['city_name']);
                        data.push(Number(element['total']));
                    });

                    // chart
                    new Chart('chart-top-city', {
                        type: 'bar',
                        data: {
                            labels: label,
                            datasets: [{
                                data: data,
                                label: 'Total Count',
                                backgroundColor: 'rgb(255,250,183)'
                            }]
                        },
                        options: {
                            indexAxis: 'y',
                            plugins: {
                                legend: {
                                    display: false,
                                    position: 'bottom'
                                },
                            },
                            responsive: true,
                            maintainAspectRatio: false
                        },
                    });
                }
            }
        });

         // attendance-checkin
         $.ajax({
            url: '/api/dashboard/attendance-checkin',
            type: "GET",
            dataType: "json",
            processData: false,
            success: function (result) {
                if(result['success'] == true) {
                    // prepare data
                    var label = [];
                    var data = [];
                    result['data'].forEach(element => {
                        label.push(element['category']);
                        data.push(Number(element['count']));
                    });

                    // chart
                    new Chart('chart-attendance-checkin', {
                        type: 'pie',
                        data: {
                            labels: label,
                            datasets: [{
                                data: data,
                                label: 'Total Count',
                                backgroundColor: [
                                    'rgb(151,190,90)',
                                    'rgb(255,162,127)',
                                    'rgb(255,0,0)',
                                ],
                            }]
                        },
                        plugins: [ChartDataLabels],
                        options: {
                            plugins: {
                                legend: {
                                    display: true,
                                    position: 'bottom'
                                },
                                datalabels: {
                                    display: true,
                                    formatter: (val, ctx) => {
                                    const label = ctx.chart.data.labels[ctx.dataIndex];

                                    let sum = 0;
                                    let dataArr = ctx.chart.data.datasets[0].data;
                                    dataArr.map(data => {
                                        sum += data;
                                    });
                                    let percentage = (val*100 / sum).toFixed(2)+"%";

                                    return `${label.toUpperCase()}\n${val} (${percentage})`;
                                    },
                                    color: '#fff',
                                    // backgroundColor: '#404040',
                                },
                            },
                            responsive: true,
                            maintainAspectRatio: false
                        },
                    });
                }
            }
        });

         // attendance notes
         $.ajax({
            url: '/api/dashboard/attendance-notes',
            type: "GET",
            dataType: "json",
            processData: false,
            success: function (result) {
                if(result['success'] == true) {
                    // prepare data
                    var label = [];
                    var data = [];
                    result['data'].forEach(element => {
                        label.push(element['notes']);
                        data.push(Number(element['count']));
                    });

                    // chart
                    new Chart('chart-attendance-notes', {
                        type: 'pie',
                        data: {
                            labels: label,
                            datasets: [{
                                data: data,
                                label: 'Total Count',
                                backgroundColor: [
                                    'rgb(151,190,90)',
                                    'rgb(255,0,0)',
                                ],
                            }]
                        },
                        plugins: [ChartDataLabels],
                        options: {
                            plugins: {
                                legend: {
                                    display: true,
                                    position: 'bottom'
                                },
                                datalabels: {
                                    display: true,
                                    formatter: (val, ctx) => {
                                    const label = ctx.chart.data.labels[ctx.dataIndex];

                                    let sum = 0;
                                    let dataArr = ctx.chart.data.datasets[0].data;
                                    dataArr.map(data => {
                                        sum += data;
                                    });
                                    let percentage = (val*100 / sum).toFixed(2)+"%";

                                    return `${label.toUpperCase()}\n${val} (${percentage})`;
                                    },
                                    color: '#fff',
                                    // backgroundColor: '#404040',
                                },
                            },
                            responsive: true,
                            maintainAspectRatio: false
                        },
                    });
                }
            }
        });


         // attendance category
         $.ajax({
            url: '/api/dashboard/attendance-category',
            type: "GET",
            dataType: "json",
            processData: false,
            success: function (result) {
                if(result['success'] == true) {
                    // prepare data
                    var label = [];
                    var data = [];
                    result['data'].forEach(element => {
                        label.push(element['category']);
                        data.push(Number(element['count']));
                    });

                    // chart
                    new Chart('chart-attendance-category', {
                        type: 'pie',
                        data: {
                            labels: label,
                            datasets: [{
                                data: data,
                                label: 'Total Count',
                                backgroundColor: [
                                    'rgb(151,190,90)',
                                    'rgb(42,98,154)',
                                    'rgb(255,162,127)',
                                    'rgb(255,0,0)',
                                ],
                            }]
                        },
                        plugins: [ChartDataLabels],
                        options: {
                            plugins: {
                                legend: {
                                    display: true,
                                    position: 'bottom'
                                },
                                datalabels: {
                                    display: true,
                                    formatter: (val, ctx) => {
                                    const label = ctx.chart.data.labels[ctx.dataIndex];

                                    let sum = 0;
                                    let dataArr = ctx.chart.data.datasets[0].data;
                                    dataArr.map(data => {
                                        sum += data;
                                    });
                                    let percentage = (val*100 / sum).toFixed(2)+"%";

                                    return `${label.toUpperCase()}\n${val} (${percentage})`;
                                    },
                                    color: '#fff',
                                    // backgroundColor: '#404040',
                                },
                            },
                            responsive: true,
                            maintainAspectRatio: false
                        },
                    });
                }
            }
        });


                // attendance daily
                $.ajax({
            url: '/api/dashboard/attendance-daily',
            type: "GET",
            dataType: "json",
            processData: false,
            success: function (result) {
                if(result['success'] == true) {
                    // prepare data
                    var label = [];
                    var data = [];
                    var color = [];
                    result['data'].forEach(element => {
                        label.push(element['dates']);
                        data.push(Number(element['count']));
                        color.push('rgb(188,90,148)');
                    });

                    // chart
                    new Chart('chart-attendance-daily', {
                        type: 'bar',
                        data: {
                            labels: label,
                            datasets: [{
                                data: data,
                                label: 'Total Count',
                                backgroundColor: color,
                            }]
                        },
                        plugins: [ChartDataLabels],
                        options: {
                            plugins: {
                                legend: {
                                    display: false,
                                    position: 'bottom'
                                },
                                datalabels: {
                                    display: true,
                                    formatter: (val, ctx) => {
                                    const label = ctx.chart.data.labels[ctx.dataIndex];

                                    let sum = 0;
                                    let dataArr = ctx.chart.data.datasets[0].data;
                                    dataArr.map(data => {
                                        sum += data;
                                    });
                                    let percentage = (val*100 / sum).toFixed(2)+"%";

                                    return `${label.toUpperCase()}\n${val} (${percentage})`;
                                    },
                                    color: '#fff',
                                    // backgroundColor: '#404040',
                                },
                            },
                            responsive: true,
                            maintainAspectRatio: false
                        },
                    });
                }
            }
        });

    </script>
@endsection