@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" >
                                <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="M12.02 2C6.21 2 2 6.74 2 12C2 13.68 2.49 15.41 3.35 16.99C3.51 17.25 3.53 17.58 3.42 17.89L2.75 20.13C2.6 20.67 3.06 21.07 3.57 20.91L5.59 20.31C6.14 20.13 6.57 20.36 7.081 20.67C8.541 21.53 10.36 21.97 12 21.97C16.96 21.97 22 18.14 22 11.97C22 6.65 17.7 2 12.02 2Z" fill="currentColor"></path>
                                            <path fill-rule="evenodd" clip-rule="evenodd" d="M11.9807 13.2901C11.2707 13.2801 10.7007 12.7101 10.7007 12.0001C10.7007 11.3001 11.2807 10.7201 11.9807 10.7301C12.6907 10.7301 13.2607 11.3001 13.2607 12.0101C13.2607 12.7101 12.6907 13.2901 11.9807 13.2901ZM7.37033 13.2901C6.67033 13.2901 6.09033 12.7101 6.09033 12.0101C6.09033 11.3001 6.66033 10.7301 7.37033 10.7301C8.08033 10.7301 8.65033 11.3001 8.65033 12.0101C8.65033 12.7101 8.08033 13.2801 7.37033 13.2901ZM15.3105 12.0101C15.3105 12.7101 15.8805 13.2901 16.5905 13.2901C17.3005 13.2901 17.8705 12.7101 17.8705 12.0101C17.8705 11.3001 17.3005 10.7301 16.5905 10.7301C15.8805 10.7301 15.3105 11.3001 15.3105 12.0101Z" fill="currentColor"></path>
                                        </svg>
                                        <div class="progress-detail" style="margin-left: 1rem;">
                                            <p class="mb-2">Komplain<br>Total</p>
                                            <h4  class="counters" id="komplain_total">0</h4>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li class="swiper-slide card card-slide" >
                                <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="M12.9763 3.11361L15.2028 7.58789C15.3668 7.91205 15.6799 8.13717 16.041 8.18719L21.042 8.91556C21.3341 8.95658 21.5992 9.11066 21.7782 9.34578C21.9552 9.5779 22.0312 9.87205 21.9882 10.1612C21.9532 10.4013 21.8402 10.6234 21.6672 10.7935L18.0434 14.3063C17.7783 14.5514 17.6583 14.9146 17.7223 15.2698L18.6145 20.2083C18.7095 20.8046 18.3144 21.3669 17.7223 21.48C17.4783 21.519 17.2282 21.478 17.0082 21.3659L12.5472 19.0417C12.2161 18.8746 11.8251 18.8746 11.494 19.0417L7.03303 21.3659C6.48491 21.657 5.80576 21.4589 5.5007 20.9187C5.38767 20.7036 5.34766 20.4584 5.38467 20.2193L6.27686 15.2798C6.34088 14.9256 6.21985 14.5604 5.95579 14.3153L2.33202 10.8045C1.90092 10.3883 1.88792 9.70296 2.30301 9.27175C2.31201 9.26274 2.32201 9.25274 2.33202 9.24273C2.50405 9.06764 2.7301 8.95658 2.97415 8.92757L7.97523 8.1982C8.33531 8.14717 8.64837 7.92406 8.81341 7.59789L10.9599 3.11361C11.1509 2.72942 11.547 2.4903 11.9771 2.5003H12.1111C12.4842 2.54533 12.8093 2.77644 12.9763 3.11361Z" fill="currentColor"></path>
                                            <path d="M11.992 18.9171C11.7983 18.9231 11.6096 18.9752 11.4399 19.0682L7.00072 21.3871C6.45756 21.6464 5.80756 21.4452 5.50303 20.9258C5.39021 20.7136 5.34927 20.4704 5.38721 20.2322L6.27384 15.3032C6.33375 14.9449 6.21394 14.5806 5.95334 14.3284L2.32794 10.8185C1.8976 10.3971 1.88961 9.70556 2.31096 9.27421C2.31695 9.26821 2.32195 9.2632 2.32794 9.2582C2.49967 9.08806 2.72133 8.97597 2.95996 8.94094L7.96523 8.20433C8.32767 8.1583 8.64219 7.93211 8.80194 7.60384L10.9776 3.06312C11.1843 2.69682 11.5806 2.47864 12 2.50166C11.992 2.7989 11.992 18.715 11.992 18.9171Z" fill="currentColor"></path>
                                        </svg>
                                        <div class="progress-detail" style="margin-left: 1rem;">
                                            <p class="mb-2">Rating<br>Total</p>
                                            <h4  class="counters" id="rating_total">0</h4>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li class="swiper-slide card card-slide" >
                                <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 d="M11.9488 14.54C8.49884 14.54 5.58789 15.1038 5.58789 17.2795C5.58789 19.4562 8.51765 20.0001 11.9488 20.0001C15.3988 20.0001 18.3098 19.4364 18.3098 17.2606C18.3098 15.084 15.38 14.54 11.9488 14.54Z" fill="currentColor"></path>
                                            <path opacity="0.4" d="M11.949 12.467C14.2851 12.467 16.1583 10.5831 16.1583 8.23351C16.1583 5.88306 14.2851 4 11.949 4C9.61293 4 7.73975 5.88306 7.73975 8.23351C7.73975 10.5831 9.61293 12.467 11.949 12.467Z" fill="currentColor"></path>
                                            <path opacity="0.4" d="M21.0881 9.21923C21.6925 6.84176 19.9205 4.70654 17.664 4.70654C17.4187 4.70654 17.1841 4.73356 16.9549 4.77949C16.9244 4.78669 16.8904 4.802 16.8725 4.82902C16.8519 4.86324 16.8671 4.90917 16.8895 4.93889C17.5673 5.89528 17.9568 7.0597 17.9568 8.30967C17.9568 9.50741 17.5996 10.6241 16.9728 11.5508C16.9083 11.6462 16.9656 11.775 17.0793 11.7948C17.2369 11.8227 17.3981 11.8371 17.5629 11.8416C19.2059 11.8849 20.6807 10.8213 21.0881 9.21923Z" fill="currentColor"></path>
                                            <path d="M22.8094 14.817C22.5086 14.1722 21.7824 13.73 20.6783 13.513C20.1572 13.3851 18.747 13.205 17.4352 13.2293C17.4155 13.232 17.4048 13.2455 17.403 13.2545C17.4003 13.2671 17.4057 13.2887 17.4316 13.3022C18.0378 13.6039 20.3811 14.916 20.0865 17.6834C20.074 17.8032 20.1698 17.9068 20.2888 17.8888C20.8655 17.8059 22.3492 17.4853 22.8094 16.4866C23.0637 15.9589 23.0637 15.3456 22.8094 14.817Z" fill="currentColor"></path>
                                            <path opacity="0.4" d="M7.04459 4.77973C6.81626 4.7329 6.58077 4.70679 6.33543 4.70679C4.07901 4.70679 2.30701 6.84201 2.9123 9.21947C3.31882 10.8216 4.79355 11.8851 6.43661 11.8419C6.60136 11.8374 6.76343 11.8221 6.92013 11.7951C7.03384 11.7753 7.09115 11.6465 7.02668 11.551C6.3999 10.6234 6.04263 9.50765 6.04263 8.30991C6.04263 7.05904 6.43303 5.89462 7.11085 4.93913C7.13234 4.90941 7.14845 4.86348 7.12696 4.82926C7.10906 4.80135 7.07593 4.78694 7.04459 4.77973Z" fill="currentColor"></path>
                                            <path d="M3.32156 13.5127C2.21752 13.7297 1.49225 14.1719 1.19139 14.8167C0.936203 15.3453 0.936203 15.9586 1.19139 16.4872C1.65163 17.4851 3.13531 17.8066 3.71195 17.8885C3.83104 17.9065 3.92595 17.8038 3.91342 17.6832C3.61883 14.9167 5.9621 13.6046 6.56918 13.3029C6.59425 13.2885 6.59962 13.2677 6.59694 13.2542C6.59515 13.2452 6.5853 13.2317 6.5656 13.2299C5.25294 13.2047 3.84358 13.3848 3.32156 13.5127Z" fill="currentColor"></path>
                                        </svg>
                                        <div class="progress-detail" style="margin-left: 1rem;">
                                            <p class="mb-2">Total<br>User</p>
                                            <h4  class="counters" id="user_total">0</h4>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li class="swiper-slide card card-slide" >
                                <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.0756 2H19.4616C20.8639 2 22.0001 3.14585 22.0001 4.55996V7.97452C22.0001 9.38864 20.8639 10.5345 19.4616 10.5345H16.0756C14.6734 10.5345 13.5371 9.38864 13.5371 7.97452V4.55996C13.5371 3.14585 14.6734 2 16.0756 2Z" fill="currentColor"></path>
                                            <path fill-rule="evenodd" clip-rule="evenodd" d="M4.53852 2H7.92449C9.32676 2 10.463 3.14585 10.463 4.55996V7.97452C10.463 9.38864 9.32676 10.5345 7.92449 10.5345H4.53852C3.13626 10.5345 2 9.38864 2 7.97452V4.55996C2 3.14585 3.13626 2 4.53852 2ZM4.53852 13.4655H7.92449C9.32676 13.4655 10.463 14.6114 10.463 16.0255V19.44C10.463 20.8532 9.32676 22 7.92449 22H4.53852C3.13626 22 2 20.8532 2 19.44V16.0255C2 14.6114 3.13626 13.4655 4.53852 13.4655ZM19.4615 13.4655H16.0755C14.6732 13.4655 13.537 14.6114 13.537 16.0255V19.44C13.537 20.8532 14.6732 22 16.0755 22H19.4615C20.8637 22 22 20.8532 22 19.44V16.0255C22 14.6114 20.8637 13.4655 19.4615 13.4655Z" fill="currentColor"></path>
                                        </svg>
                                        <div class="progress-detail" style="margin-left: 1rem;">
                                            <p class="mb-2">Total<br>Divisi</p>
                                            <h4  class="counters" id="divisi_total">0</h4>
                                        </div>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <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" >
                                <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.34 1.99976H7.67C4.28 1.99976 2 4.37976 2 7.91976V16.0898C2 19.6198 4.28 21.9998 7.67 21.9998H16.34C19.73 21.9998 22 19.6198 22 16.0898V7.91976C22 4.37976 19.73 1.99976 16.34 1.99976Z" fill="currentColor"></path>
                                            <path d="M15.5734 15.8143C15.4424 15.8143 15.3104 15.7803 15.1894 15.7093L11.2634 13.3673C11.0374 13.2313 10.8984 12.9863 10.8984 12.7223V7.67529C10.8984 7.26129 11.2344 6.92529 11.6484 6.92529C12.0624 6.92529 12.3984 7.26129 12.3984 7.67529V12.2963L15.9584 14.4193C16.3134 14.6323 16.4304 15.0923 16.2184 15.4483C16.0774 15.6833 15.8284 15.8143 15.5734 15.8143Z" fill="currentColor"></path>
                                        </svg>
                                        <div class="progress-detail" style="margin-left: 1rem;">
                                            <p class="mb-2">Komplain<br>Menunggu </p>
                                            <h4  class="counters" id="komplain_menunggu">0</h4>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li class="swiper-slide card card-slide" >
                                <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.34 1.99976H7.67C4.28 1.99976 2 4.37976 2 7.91976V16.0898C2 19.6198 4.28 21.9998 7.67 21.9998H16.34C19.73 21.9998 22 19.6198 22 16.0898V7.91976C22 4.37976 19.73 1.99976 16.34 1.99976Z" fill="currentColor"></path>
                                            <path fill-rule="evenodd" clip-rule="evenodd" d="M7.52124 10.8035C6.86024 10.8035 6.32324 11.3405 6.32324 11.9995C6.32324 12.6595 6.86024 13.1975 7.52124 13.1975C8.18224 13.1975 8.71924 12.6595 8.71924 11.9995C8.71924 11.3405 8.18224 10.8035 7.52124 10.8035ZM12.0002 10.8035C11.3392 10.8035 10.8022 11.3405 10.8022 11.9995C10.8022 12.6595 11.3392 13.1975 12.0002 13.1975C12.6612 13.1975 13.1982 12.6595 13.1982 11.9995C13.1982 11.3405 12.6612 10.8035 12.0002 10.8035ZM15.2817 11.9995C15.2817 11.3405 15.8187 10.8035 16.4797 10.8035C17.1407 10.8035 17.6777 11.3405 17.6777 11.9995C17.6777 12.6595 17.1407 13.1975 16.4797 13.1975C15.8187 13.1975 15.2817 12.6595 15.2817 11.9995Z" fill="currentColor"></path>
                                        </svg>
                                        <div class="progress-detail" style="margin-left: 1rem;">
                                            <p class="mb-2">Komplain<br>Diarahkan</p>
                                            <h4  class="counters" id="komplain_diarahkan">0</h4>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li class="swiper-slide card card-slide" >
                                <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.34 1.99976H7.67C4.28 1.99976 2 4.37976 2 7.91976V16.0898C2 19.6198 4.28 21.9998 7.67 21.9998H16.34C19.73 21.9998 22 19.6198 22 16.0898V7.91976C22 4.37976 19.73 1.99976 16.34 1.99976Z" fill="currentColor"></path>
                                            <path fill-rule="evenodd" clip-rule="evenodd" d="M7.52124 10.8035C6.86024 10.8035 6.32324 11.3405 6.32324 11.9995C6.32324 12.6595 6.86024 13.1975 7.52124 13.1975C8.18224 13.1975 8.71924 12.6595 8.71924 11.9995C8.71924 11.3405 8.18224 10.8035 7.52124 10.8035ZM12.0002 10.8035C11.3392 10.8035 10.8022 11.3405 10.8022 11.9995C10.8022 12.6595 11.3392 13.1975 12.0002 13.1975C12.6612 13.1975 13.1982 12.6595 13.1982 11.9995C13.1982 11.3405 12.6612 10.8035 12.0002 10.8035ZM15.2817 11.9995C15.2817 11.3405 15.8187 10.8035 16.4797 10.8035C17.1407 10.8035 17.6777 11.3405 17.6777 11.9995C17.6777 12.6595 17.1407 13.1975 16.4797 13.1975C15.8187 13.1975 15.2817 12.6595 15.2817 11.9995Z" fill="currentColor"></path>
                                        </svg>
                                        <div class="progress-detail" style="margin-left: 1rem;">
                                            <p class="mb-2">Komplain<br>Diproses</p>
                                            <h4  class="counters" id="komplain_diproses">0</h4>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li class="swiper-slide card card-slide" >
                                <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="M12.0865 22C11.9627 22 11.8388 21.9716 11.7271 21.9137L8.12599 20.0496C7.10415 19.5201 6.30481 18.9259 5.68063 18.2336C4.31449 16.7195 3.5544 14.776 3.54232 12.7599L3.50004 6.12426C3.495 5.35842 3.98931 4.67103 4.72826 4.41215L11.3405 2.10679C11.7331 1.96656 12.1711 1.9646 12.5707 2.09992L19.2081 4.32684C19.9511 4.57493 20.4535 5.25742 20.4575 6.02228L20.4998 12.6628C20.5129 14.676 19.779 16.6274 18.434 18.1581C17.8168 18.8602 17.0245 19.4632 16.0128 20.0025L12.4439 21.9088C12.3331 21.9686 12.2103 21.999 12.0865 22Z" fill="currentColor"></path>
                                            <path d="M11.3194 14.3209C11.1261 14.3219 10.9328 14.2523 10.7838 14.1091L8.86695 12.2656C8.57097 11.9793 8.56795 11.5145 8.86091 11.2262C9.15387 10.9369 9.63207 10.934 9.92906 11.2193L11.3083 12.5451L14.6758 9.22479C14.9698 8.93552 15.448 8.93258 15.744 9.21793C16.041 9.50426 16.044 9.97004 15.751 10.2574L11.8519 14.1022C11.7049 14.2474 11.5127 14.3199 11.3194 14.3209Z" fill="currentColor"></path>
                                        </svg>
                                        <div class="progress-detail" style="margin-left: 1rem;">
                                            <p class="mb-2">Komplain<br>Selesai</p>
                                            <h4  class="counters" id="komplain_selesai">0</h4>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li class="swiper-slide card card-slide" >
                                <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="M12.086 22C11.9622 22 11.8393 21.9716 11.7276 21.9137L8.12627 20.0496C7.10336 19.5201 6.30397 18.9259 5.68076 18.2336C4.31353 16.7195 3.55441 14.776 3.54132 12.7599L3.50004 6.12426C3.495 5.35842 3.98833 4.67103 4.72732 4.41215L11.34 2.10679C11.7336 1.96656 12.1716 1.9646 12.5703 2.09992L19.2081 4.32684C19.9511 4.57493 20.4535 5.25742 20.4575 6.02228L20.4998 12.6628C20.5129 14.676 19.7799 16.6274 18.4349 18.1581C17.8167 18.8602 17.0253 19.4632 16.0135 20.0025L12.4444 21.9088C12.3337 21.9686 12.2098 21.999 12.086 22Z" fill="currentColor"></path>
                                            <path d="M13.0679 11.7249L14.426 10.4021C14.721 10.1148 14.721 9.65001 14.426 9.3627C14.131 9.07539 13.6528 9.07539 13.3578 9.3627L11.9996 10.6845L10.6425 9.3627C10.3475 9.07539 9.86926 9.07539 9.57427 9.3627C9.27928 9.65001 9.27928 10.1148 9.57427 10.4021L10.9324 11.7249L9.57427 13.0478C9.27928 13.3351 9.27928 13.7999 9.57427 14.0872C9.72227 14.2313 9.91557 14.3029 10.1089 14.3029C10.3012 14.3029 10.4945 14.2313 10.6425 14.0872L11.9996 12.7653L13.3578 14.0872C13.5058 14.2313 13.6981 14.3029 13.8914 14.3029C14.0847 14.3029 14.278 14.2313 14.426 14.0872C14.721 13.7999 14.721 13.3351 14.426 13.0478L13.0679 11.7249Z" fill="currentColor"></path>
                                        </svg>
                                        <div class="progress-detail" style="margin-left: 1rem;">
                                            <p class="mb-2">Komplain<br>Ditolak</p>
                                            <h4  class="counters" id="komplain_ditolak">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-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>
        $(document).ready(function() {
            $.ajaxSetup({headers:{'Authorization': "Bearer {{$session_token}}"}});
 

                // komplain total
                $.ajax({
                    url: "/api/complain?count=true",
                    type: "GET",
                    dataType: "json",
                    processData: false,
                    success: function (result) {
                        if(result['success'] == true) {
                            $('#komplain_total').html(result['data']['count']);
                        }
                    }
                });

                // komplain menunggu
                $.ajax({
                    url: "/api/complain?count=true&where={'status':'Menunggu konfirmasi'}",
                    type: "GET",
                    dataType: "json",
                    processData: false,
                    success: function (result) {
                        if(result['success'] == true) {
                            $('#komplain_menunggu').html(result['data']['count']);
                        }
                    }
                });

                // komplain diarahkan
                $.ajax({
                    url: "/api/complain?count=true&where={'status':'Diarahkan ke bidang yg berwenang'}",
                    type: "GET",
                    dataType: "json",
                    processData: false,
                    success: function (result) {
                        if(result['success'] == true) {
                            $('#komplain_diarahkan').html(result['data']['count']);
                        }
                    }
                });

                // komplain diproses
                $.ajax({
                    url: "/api/complain?count=true&where={'status':'Dalam proses'}",
                    type: "GET",
                    dataType: "json",
                    processData: false,
                    success: function (result) {
                        if(result['success'] == true) {
                            $('#komplain_diproses').html(result['data']['count']);
                        }
                    }
                });

                // komplain selesai
                $.ajax({
                    url: "/api/complain?count=true&where={'status':'Komplain selesai'}",
                    type: "GET",
                    dataType: "json",
                    processData: false,
                    success: function (result) {
                        if(result['success'] == true) {
                            $('#komplain_selesai').html(result['data']['count']);
                        }
                    }
                });

                // komplain ditolak
                $.ajax({
                    url: "/api/complain?count=true&where={'status':'Komplain ditolak'}",
                    type: "GET",
                    dataType: "json",
                    processData: false,
                    success: function (result) {
                        if(result['success'] == true) {
                            $('#komplain_ditolak').html(result['data']['count']);
                        }
                    }
                });

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

                // divisi
                $.ajax({
                    url: '/api/complain_category?count=true',
                    type: "GET",
                    dataType: "json",
                    processData: false,
                    success: function (result) {
                        if(result['success'] == true) {
                            $('#divisi_total').html(result['data']['count']);
                        }
                    }
                });

                // rating
                $.ajax({
                    url: '/api/dashboard/rating',
                    type: "GET",
                    dataType: "json",
                    processData: false,
                    success: function (result) {
                        if(result['success'] == true) {
                            $('#rating_total').html(result['data']['csat']);
                        }
                    }
                });
 

            // 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
                            },
                        });
                    }
                }
            });
        });
    </script>
@endsection