{% extends "basic.html" %}
{% load humanize i18n %}
{% block title %}Dashboard{% endblock %}
{% block content %}
{% language 'id' %}
<main class="h-100">
    {% include "header.html" %}
    <!-- main page content -->
    <div class="main-container container">

        <style>
            #leaderboard {
                width: 100%;
                position: relative;
            }

            .table-leaderboard {
                width: 100%;
                border-collapse: collapse;
                table-layout: fixed;
                color: #141a39;
                cursor: default;
            }

            .table-leaderboard tr {
                transition: all 0.2s ease-in-out;
                border-radius: 0.2rem;
            }

            .table-leaderboard tr:not(:first-child):hover {
            
            }

            .table-leaderboard tr:nth-child(odd) {
                background-color: #f9f9f9;
            }
            .table-leaderboard td {
                /* height: 5rem; */
                font-family: "Rubik", sans-serif;
                font-size: 0.9rem;
                padding: 0.5rem 1rem;
                position: relative;
            }

            .table-leaderboard .fixed-row {
                position: sticky;
                top: 0;
                background-color: #e0e0e0; /* Background color for the fixed row */
                z-index: 2; /* Ensure the fixed row stays on top of other rows */
                font-weight: bold;
            }

            .number {
                width: 2.5rem !important;
                font-size: 0.8rem;
                font-weight: bold;
                text-align: center;
                padding: 0px !important;
            }

            .name {
                text-align: left;
                font-size: 1.2rem;
            }

            .points {
                font-weight: bold;
                font-size: 1.3rem;
                display: flex;
                justify-content: flex-end;
                align-items: center;
            }

            .points:first-child {
                width: 10rem;
            }

            .gold-medal {
                height: 3rem;
                margin-left: 1.5rem;
            }

        </style>
        {% for x in messages %}
        <div class="row mb-4 mt-4" id="message-notif" style="padding-left: 15px;padding-right: 15px;">
            <button id="messages" class="btn btn-success col-lg-12 text-light">{{ x }}</button>
        </div>
        {% endfor %}

        <!-- welcome user -->
        <div class="row mb-4">
            <div class="col-md-4" style="display: flex;">
                <div class="col-auto">
                    <a href="{% url 'profil' %}">
                        <div class="avatar avatar-50">
                            <img alt="" src="{{ info_dasar_faskes.logo.url }}">
                        </div>
                    </a>
                </div>
                <div class="col align-self-center ps-0">
                    <a href="{% url 'profil' %}">
                        <h4 class="text-color-theme"><span class="fw-normal">Hi</span>, {{ request.user.first_name }}</h4>
                        {% for x in request.user.groups.all %}
                            <p class="text-muted">{{ x }}</p>
                        {% endfor %}
                    </a>
                </div>
            </div>
            {% for x in request.user.groups.all %}
            {% if x|striptags == "SUPERADMIN" or x|striptags == "DOKTER" %}
            <div class="col-md-8" style="display: flex;justify-content: end;align-self: end;">
                        <button class="btn btn-success btn-sm text-light filter_date_range" id="reportrange" style="margin-right: 10px;"><span class="bi bi-calendar-week"></span></button>
                         <span></span> <i class="fa fa-caret-down"></i>
                        <select class="custom-select filter_date" placeholder="TODAY" name="filter_date" id="filter_date">
                            <option value="today">TODAY</option>
                            <option value="week">WEEK</option>
                            <option value="currentmonth">CURRENT MONTH</option>
                            <option value="lastmonth">LAST MONTH</option>
                        </select>
                    </div>
                {% endif %}
            {% endfor %}
        </div>

        <!-- swiper credit cards -->
        <div class="row">
            <div class="container">
                <div class="row">
                    {% for x in request.user.groups.all %}
                        {% if x|striptags == "SUPERADMIN" or request.user.username != "dr_reki" and x|striptags == "DOKTER" %}
                            {% with col_num=3 %}
                                <div class="col-md-{{ col_num }} col-lg-{{ col_num }}">
                                    <div class="card card-summary l-bg-cherry">
                                        <div class="card-statistic-3 p-4" style="cursor: pointer;" onclick="goToReport()">
                                            <div class="card-icon card-icon-large"><i class="bi bi-currency-dollar"></i></div>
                                            <div class="mb-4">
                                                <h5 class="card-title mb-0" id="title-pendapatan">Omset bulan ini</h5>
                                            </div>
                                            <div class="row align-items-center mb-2 d-flex">
                                                <div class="col-12" style="display: flex;">
                                                    <h2>Rp &nbsp;</h2>
                                                    <h3 class="d-flex align-items-center mb-0" id="estimasi_pendapatan">
                                                        0
                                                    </h3>
                                                </div>
                                                <!-- <div class="col-4 text-right">
                                                    <span>12.5% <i class="fa fa-arrow-up"></i></span>
                                                </div> -->
                                            </div>
                                            <div class="progress mt-1 " data-height="8" style="height: 8px;">
                                                <div class="progress-bar l-bg-cyan" role="progressbar" data-width="25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 25%;"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-{{ col_num }} col-lg-{{ col_num }}">
                                    <div class="card card-summary l-bg-blue-dark">
                                        <div class="card-statistic-3 p-4" style="cursor: pointer;" onclick="goToPemeriksaan()">
                                            <div class="card-icon card-icon-large"><i class="bi bi-people"></i></div>
                                            <div class="mb-4">
                                                <h5 class="card-title mb-0">Kunjungan Pasien</h5>
                                            </div>
                                            <div class="row align-items-center mb-2 d-flex">
                                                <div class="col-8 d-flex">
                                                    <div class="col-5">
                                                        <h2 class="d-flex align-items-center mb-0" id="total_progress">
                                                            0
                                                        </h2>
                                                    </div>
                                                    <h2>/</h2>
                                                    <div class="col-7">
                                                        <h2 class="d-flex align-items-center justify-content-center mb-0" id="total_pasien">
                                                            0
                                                        </h2>
                                                    </div>
                                                </div>
                                                <div class="col-4 text-right">
                                                    <!-- <span>9.23% <i class="fa fa-arrow-up"></i></span> -->
                                                </div>
                                            </div>
                                            <div class="progress mt-1 " data-height="8" style="height: 8px;">
                                                <div class="progress-bar l-bg-green" role="progressbar" data-width="25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 25%;"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-{{ col_num }} col-lg-{{ col_num }}">
                                    <div class="card card-summary l-bg-green-dark">
                                        <div class="card-statistic-3 p-4" style="cursor: pointer;" onclick="goToFarmasi()">
                                            <div class="card-icon card-icon-large"><i class="bi bi-person-badge"></i></div>
                                            <div class="mb-4">
                                                <h5 class="card-title mb-0">Tindakan Farmasi</h5>
                                            </div>
                                            <div class="row align-items-center mb-2 d-flex">
                                                <div class="col-8 d-flex">
                                                    <div class="col-5">
                                                        <h2 class="d-flex align-items-center mb-0" id="total_progress_farmasi">
                                                            0
                                                        </h2>
                                                    </div>
                                                    <h2>/</h2>
                                                    <div class="col-7">
                                                        <h2 class="d-flex align-items-center justify-content-center mb-0" id="total_pasien_farmasi">
                                                            0
                                                        </h2>
                                                    </div>
                                                </div>
                                                <div class="col-4 text-right">
                                                    <!-- <span>10% <i class="fa fa-arrow-up"></i></span> -->
                                                </div>
                                            </div>
                                            <div class="progress mt-1 " data-height="8" style="height: 8px;">
                                                <div class="progress-bar l-bg-orange" role="progressbar" data-width="25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 25%;"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-{{ col_num }} col-lg-{{ col_num }}">
                                    <div class="card card-summary l-bg-orange-dark">
                                        <div class="card-statistic-3 p-4" style="cursor: pointer;" onclick="goToStok()">
                                            <div class="card-icon card-icon-large"><i class="bi bi-capsule"></i></div>
                                            <div class="mb-4">
                                                <h5 class="card-title mb-0">Stok Obat</h5>
                                            </div>
                                            <div class="row align-items-center mb-2 d-flex">
                                                <div class="col-8">
                                                    <h2 class="d-flex align-items-center mb-0" id="stok">
                                                        0
                                                    </h2>
                                                </div>
                                                <div class="col-4 text-right">
                                                    <!-- <span>2.5% <i class="fa fa-arrow-up"></i></span> -->
                                                </div>
                                            </div>
                                            <div class="progress mt-1 " data-height="8" style="height: 8px;">
                                                <div class="progress-bar l-bg-cyan" role="progressbar" data-width="25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 25%;"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            {% endwith %}
                        {% else %}
                            {% with col_num=4 %}
                                <div class="col-md-{{ col_num }} col-lg-{{ col_num }}">
                                    <div class="card card-summary l-bg-blue-dark">
                                        <div class="card-statistic-3 p-4" style="cursor: pointer;" onclick="goToPemeriksaan()">
                                            <div class="card-icon card-icon-large"><i class="bi bi-people"></i></div>
                                            <div class="mb-4">
                                                <h5 class="card-title mb-0">Pasien Hari ini</h5>
                                            </div>
                                            <div class="row align-items-center mb-2 d-flex">
                                                <div class="col-8 d-flex">
                                                    <div class="col-5">
                                                        <h2 class="d-flex align-items-center mb-0" id="total_progress">
                                                            0
                                                        </h2>
                                                    </div>
                                                    <h2>/</h2>
                                                    <div class="col-7">
                                                        <h2 class="d-flex align-items-center justify-content-center mb-0" id="total_pasien">
                                                           0
                                                        </h2>
                                                    </div>
                                                </div>
                                                <div class="col-4 text-right">
                                                    <!-- <span>9.23% <i class="fa fa-arrow-up"></i></span> -->
                                                </div>
                                            </div>
                                            <div class="progress mt-1 " data-height="8" style="height: 8px;">
                                                <div class="progress-bar l-bg-green" role="progressbar" data-width="25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 25%;"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-{{ col_num }} col-lg-{{ col_num }}">
                                    <div class="card l-bg-green-dark">
                                        <div class="card-statistic-3 p-4" style="cursor: pointer;" onclick="goToFarmasi()">
                                            <div class="card-icon card-icon-large"><i class="bi bi-person-badge"></i></div>
                                            <div class="mb-4">
                                                <h5 class="card-title mb-0">Tindakan Farmasi</h5>
                                            </div>
                                            <div class="row align-items-center mb-2 d-flex">
                                                <div class="col-8 d-flex">
                                                    <div class="col-5">
                                                        <h2 class="d-flex align-items-center mb-0" id="total_progress_farmasi">
                                                            0
                                                        </h2>
                                                    </div>
                                                    <h2>/</h2>
                                                    <div class="col-7">
                                                        <h2 class="d-flex align-items-center justify-content-center mb-0" id="total_pasien_farmasi">
                                                            0
                                                        </h2>
                                                    </div>
                                                </div>
                                                <div class="col-4 text-right">
                                                    <!-- <span>10% <i class="fa fa-arrow-up"></i></span> -->
                                                </div>
                                            </div>
                                            <div class="progress mt-1 " data-height="8" style="height: 8px;">
                                                <div class="progress-bar l-bg-orange" role="progressbar" data-width="25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 25%;"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-{{ col_num }} col-lg-{{ col_num }}">
                                    <div class="card card-summary l-bg-orange-dark">
                                        <div class="card-statistic-3 p-4" style="cursor: pointer;" onclick="goToStok()">
                                            <div class="card-icon card-icon-large"><i class="bi bi-capsule"></i></div>
                                            <div class="mb-4">
                                                <h5 class="card-title mb-0">Stok Obat</h5>
                                            </div>
                                            <div class="row align-items-center mb-2 d-flex">
                                                <div class="col-8">
                                                    <h2 class="d-flex align-items-center mb-0" id="stok">
                                                        0
                                                    </h2>
                                                </div>
                                                <div class="col-4 text-right">
                                                    <!-- <span>2.5% <i class="fa fa-arrow-up"></i></span> -->
                                                </div>
                                            </div>
                                            <div class="progress mt-1 " data-height="8" style="height: 8px;">
                                                <div class="progress-bar l-bg-cyan" role="progressbar" data-width="25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 25%;"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            {% endwith %}
                        {% endif %}
                    {% endfor %}
                    <input type="hidden" id="filter_type" value="">
                    <div class="col-xl-4 col-lg-4">
                        <div class="card l-bg-light-dark">
                            <div class="card-statistic-3 p-4" style="cursor: pointer;">
                                <div id="patientChart" style="width: 100%; height: 300px;"></div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-4 col-lg-4">
                        <div class="card l-bg-light-dark">
                            <div class="card-statistic-3 p-4" style="cursor: pointer;">
                                <div id="patientBarChart" style="width: 100%; height: 300px;"></div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-4 col-lg-4">
                        <div class="card l-bg-light-dark">
                            <button class="btn btn-success btn-light" onclick="downloadExcelLeaderboards()" style="background-color: transparent !important;position: absolute;right: 0;top:0;"><i class="bi bi-file-earmark-excel"></i></button>
                            <div class="card-statistic-3 p-4" style="cursor: pointer;">
                                <div id="leaderboard" style="width: 100%; height: 300px;" class="text-center" >
                                    <div style="display: flex;justify-content: center;">
                                        <b style="color: #464646;">TOP Leaderboard</b>
                                    </div>
                                    <div class="mt-2" style="overflow-y: scroll;overflow-x: hidden; height: 90%;">
                                        <table class="table-leaderboard">
                                            <!-- <tr class="fixed-row">
                                                <td class="number">1</td>
                                                <td class="name">Lee Taeyong</td>
                                                <td class="points">
                                                258.244 <img class="gold-medal" src="/media/public/gold-medal.png" alt="gold medal"/>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td class="number">2</td>
                                                <td class="name">Mark Lee</td>
                                                <td class="points">258.242</td>
                                            </tr> -->
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <!-- money request received -->

    </div>

    <style>
    .card {
        background-color: #fff;
        border-radius: 10px;
        border: none;
        position: relative;
        margin-bottom: 30px;
        box-shadow: 0 0.46875rem 2.1875rem rgba(90,97,105,0.1), 0 0.9375rem 1.40625rem rgba(90,97,105,0.1), 0 0.25rem 0.53125rem rgba(90,97,105,0.12), 0 0.125rem 0.1875rem rgba(90,97,105,0.1);
    }
    .l-bg-cherry {
        background: linear-gradient(to right, #493240, #f09) !important;
        color: #fff;
    }

    .l-bg-blue-dark {
        background: linear-gradient(to right, #373b44, #4286f4) !important;
        color: #fff;
    }

    .l-bg-light-dark {
        background: linear-gradient(to right, #cbdafc, #fcfdff) !important;
        color: #fff;
    }

    .l-bg-green-dark {
        background: linear-gradient(to right, #0a504a, #38ef7d) !important;
        color: #fff;
    }

    .l-bg-orange-dark {
        background: linear-gradient(to right, #a86008, #ffba56) !important;
        color: #fff;
    }

    .card .card-statistic-3 .card-icon-large .bi, .card .card-statistic-3 .card-icon-large .far, .card .card-statistic-3 .card-icon-large .fab, .card .card-statistic-3 .card-icon-large .fal {
        font-size: 110px;
    }

    .card .card-statistic-3 .card-icon {
        text-align: center;
        line-height: 50px;
        margin-left: 15px;
        color: #000;
        position: absolute;
        right: 5px;
        top: 20px;
        opacity: 0.1;
    }

    .card-summary:hover {
        background: linear-gradient(to right, #373b44, #c5d0e2) !important;
        color: #fff;
    }

    .l-bg-cyan {
        background: linear-gradient(135deg, #289cf5, #84c0ec) !important;
        color: #fff;
    }

    .l-bg-green {
        background: linear-gradient(135deg, #23bdb8 0%, #43e794 100%) !important;
        color: #fff;
    }

    .l-bg-orange {
        background: linear-gradient(to right, #f9900e, #ffba56) !important;
        color: #fff;
    }

    .l-bg-cyan {
        background: linear-gradient(135deg, #289cf5, #84c0ec) !important;
        color: #fff;
    }
    </style>
    <script src="//code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.1.2/dist/echarts.min.js"></script>
    <script>
        $(document).ready(function(){
            getPasienDaily()
            getStok()
            getPasienFarmasiDaily()
            getPendapatan()
            // chart
            chartSummary()
            chartPasienStatus()
            chartTopleaderboard()

            $('.daterangepicker .drp-buttons .btn').on('click', function() {
                $('#filter_type').val('range')
                start = $('#reportrange').data('daterangepicker').startDate.format('YYYY-MM-DD');
                end = $('#reportrange').data('daterangepicker').endDate.format('YYYY-MM-DD');
                chartTopleaderboard('range', start, end)
                getPasienDaily('range', start, end)
                getPasienFarmasiDaily('range', start, end)
                getPendapatan('range', start, end)
                chartPasienStatus('range', start, end)
                chartSummary('range', start, end)
            })

        });
    </script>
    <script>
        function getPasienDaily(date, start_date, end_date){
            // Make an AJAX request to load content into the modal
            $.ajax({
                url: `/pemeriksaan/get_pasien_daily/?date=${date}&start_date=${start_date}&end_date=${end_date}`,  // URL for your Django view
                success: function(data) {
                    $('#total_pasien').html(data.total)
                    $('#total_progress').html(data.total_progress)
                },
            });
        }
        function getPasienFarmasiDaily(date, start_date, end_date){
            // Make an AJAX request to load content into the modal
            $.ajax({
                url: `/pemeriksaan/get_farmasi_daily/?date=${date}&start_date=${start_date}&end_date=${end_date}`,  // URL for your Django view
                success: function(data) {
                    $('#total_pasien_farmasi').html(data.total)
                    $('#total_progress_farmasi').html(data.total_progress)
                },
            });
        }
        function getStok(date){
            // Make an AJAX request to load content into the modal
            $.ajax({
                url: '/pemeriksaan/get_stok_obat/?date='+date,  // URL for your Django view
                success: function(data) {
                    let stok = formatSalary(data.total_stok);
                    $('#stok').html(stok)
                },
            });
        }
        function getPendapatan(date, start_date, end_date){
            // Make an AJAX request to load content into the modal
            $.ajax({
                url: `/pemeriksaan/get_chart_pendapatan/?date=${date}&start_date=${start_date}&end_date=${end_date}`,  // URL for your Django view
                success: function(data) {
                    let salary = formatSalary(data);
                    $('#estimasi_pendapatan').html(salary)
                    switch (date) {
                        case 'today':
                            $('#title-pendapatan').html("Omset hari ini");
                        break;
                        case 'week':
                            $('#title-pendapatan').html("Omset minggu ini");
                        break;
                        case 'currentmonth':
                            $('#title-pendapatan').html("Omset bulan ini");
                        break;
                        case 'lastmonth':
                            $('#title-pendapatan').html("Omset bulan kemarin");
                        break;
                    
                        default:
                            $('#title-pendapatan').html("Omset bulan ini");
                            break;
                    }
                },
            });
        }
        function updateCounter(attr, targetCount, jump) {
            $(`${attr}`).html(targetCount); 
            // currentCount += jump;

            // if (currentCount <= targetCount) {
            //     $(`${attr}`).html(currentCount);
            // } else {
            //     $(`${attr}`).html(targetCount); 
            //     // clearInterval(counterInterval);
            // }
        }
        
        function goToReport(){
            window.location.href = '/pemeriksaan/laporan_pasien';
        }
        function goToPemeriksaan(){
            window.location.href = '/pemeriksaan/daftarpasien';
        }
        function goToFarmasi(){
            window.location.href = '/pemeriksaan/daftarfarmasi';
        }
        function goToStok(){
            window.location.href = '/pemeriksaan/inventory';
        }
        function formatSalary(value) {
            if (typeof value !== 'number') {
                return 'Invalid salary';
            }

            if (value >= 1000) {
                const formattedValue = value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");;
                return formattedValue
            }

            return value.toString();
        }
        function chartSummary(date, start, end){
            $.ajax({
                url: `/pemeriksaan/get_chart_daily/?filter_date=${date}&start_date=${start}&end_date=${end}`,  // URL for your Django view
                success: function(data) {
                    const chart = echarts.init(document.getElementById('patientChart'));

                    // Set chart options
                    const options = {
                        title: {
                            text: 'Patient Summary Report',
                            x: 'center'
                        },
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'cross'
                            },
                            formatter: function (params) {
                                const date = params[0].name;
                                const totalPatients = params[0].value;
                                return date + '<br/><b>Total Patients: ' + totalPatients + '</b>';
                            }
                        },
                        xAxis: {
                            type: 'category',
                            data: data.date,
                            axisLabel: {
                                formatter: '{value}'
                            }
                        },
                        yAxis: {
                            type: 'value',
                        },
                        series: [
                            {
                                name: 'Total Patient',
                                type: 'line',
                                data: data.total
                            }
                        ]
                    };

                    // Set the options to the chart
                    chart.setOption(options);
                },
            });
        }
        function chartTopleaderboard(date, start, end){
            $.ajax({
                url: `/pemeriksaan/get_leaderboards?date=${date}&start_date=${start}&end_date=${end}`,  // URL for your Django view
                success: function(data) {
                    var html = '';
                    row_num = 1
                    $.each(data, function(index, key){
                        total_layanan = (key.count_layanan / 1_000_000).toFixed(3) + 'K';
                        first_row = `<tr class="fixed-row" title="${key.count_kunjungan} Total kunjungan">
                            <td class="number">${index+1}</td>
                            <td class="name">${key.nama_pasien}</td>
                            <td class="points">
                            ${total_layanan} <img class="gold-medal" src="/media/public/gold-medal.png" alt="gold medal"/>
                            </td>
                        </tr>`;
                        row = `<tr title="${key.count_kunjungan} Total kunjungan">
                            <td class="number">${index+1}</td>
                            <td class="name">${key.nama_pasien}</td>
                            <td class="points">${total_layanan}</td>
                        </tr>`;
                        if(index == 0){
                            html += first_row
                        } else {
                            html += row
                        }

                        $('.table-leaderboard').html(html)
                    })
                },
            });
        }
        function downloadExcelLeaderboards() {
            filter_type = $('#filter_type').val()
            start = $('#reportrange').data('daterangepicker').startDate.format('YYYY-MM-DD');
            end = $('#reportrange').data('daterangepicker').endDate.format('YYYY-MM-DD');
            var downloadUrl = `/pemeriksaan/get_leaderboards?date=${filter_type}&start_date=${start}&end_date=${end}&export=excel`;

            // Create a hidden anchor element
            var downloadLink = document.createElement('a');
            downloadLink.style.display = 'none';
            document.body.appendChild(downloadLink);

            // Set the anchor's href to the download URL
            downloadLink.href = downloadUrl;

            // Trigger a click event on the anchor to initiate the download
            downloadLink.click();

            // Clean up the anchor element
            document.body.removeChild(downloadLink);
        }
    </script>
      <script>
        function chartPasienStatus(date, start_date, end_date){
            $.ajax({
                url: `/pemeriksaan/get_pasien_status/?filter_date=${date}&start_date=${start}&end_date=${end}`,  // URL for your Django view
                success: function(data) {
                    const newPasienData = data.pasien_baru.total; // Replace with actual data
                    const oldPasienData = data.pasien_lama.total; // Replace with actual data
            
                    // Months for x-axis
                    const months = data.pasien_baru.month;
            
                    // Create the bar chart
                    const barChart = echarts.init(document.getElementById('patientBarChart'));
            
                    // Set chart options
                    const barOptions = {
                        title: {
                            text: 'Patient Status',
                            x: 'left'
                        },
                        legend: {
                            data: ['BARU', 'LAMA'],
                            x: 'right'
                        },
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'shadow'
                            }
                        },
                        xAxis: {
                            type: 'category',
                            data: months
                        },
                        yAxis: {
                            type: 'value',
                            name: 'Total'
                        },
                        series: [
                            {
                                name: 'BARU',
                                type: 'bar',
                                data: newPasienData
                            },
                            {
                                name: 'LAMA',
                                type: 'bar',
                                data: oldPasienData
                            }
                        ]
                    };
            
                    // Set the options to the bar chart
                    barChart.setOption(barOptions);     
                },
            });
        }
      </script>
    <!-- main page content ends -->
    {% include "footer.html" %}
</main>
<script>
$(".custom-select").each(function() {
  var classes = $(this).attr("class"),
      id      = $(this).attr("id"),
      name    = $(this).attr("name");
  var template =  '<div class="' + classes + '">';
      template += '<span class="custom-select-trigger">' + $(this).attr("placeholder") + '</span>';
      template += '<div class="custom-options">';
      $(this).find("option").each(function() {
        template += '<span class="custom-option ' + $(this).attr("class") + '" data-value="' + $(this).attr("value") + '">' + $(this).html() + '</span>';
      });
  template += '</div></div>';
  
  $(this).wrap('<div class="custom-select-wrapper"></div>');
  $(this).hide();
  $(this).after(template);
});
$(".custom-option:first-of-type").hover(function() {
  $(this).parents(".custom-options").addClass("option-hover");
}, function() {
  $(this).parents(".custom-options").removeClass("option-hover");
});
$(".custom-select-trigger").on("click", function() {
  $('html').one('click',function() {
    $(".custom-select").removeClass("opened");
  });
  $(this).parents(".custom-select").toggleClass("opened");
  event.stopPropagation();
});
$(".custom-option").on("click", function() {
  $(this).parents(".custom-select-wrapper").find("select").val($(this).data("value"));
  $(this).parents(".custom-options").find(".custom-option").removeClass("selection");
  $(this).addClass("selection");
  $(this).parents(".custom-select").removeClass("opened");
  $(this).parents(".custom-select").find(".custom-select-trigger").text($(this).text());
  var value = $(this).data("value");
  $('#filter_type').val(value)
  getPasienDaily(value)
  getStok(value)
  getPasienFarmasiDaily(value)
  getPendapatan(value)
  chartTopleaderboard(value)
  chartSummary(value)
  chartPasienStatus(value)
});

$('#messages').on("click", function(){
    $('#message-notif').remove();
})
</script>
{% endlanguage %}
{% endblock %}