{% extends 'basic.html' %}
{% load humanize i18n static %}

{% block title %}
Laporan Diagnosa
{% endblock %}

{% block head %}
<script>
    function openTab(evt, tabName) {
        var i, tabcontent, tablinks;
        tabcontent = document.getElementsByClassName("tabcontent");
        for (i = 0; i < tabcontent.length; i++) {
            tabcontent[i].style.display = "none";
        }
        tablinks = document.getElementsByClassName("tablinks");
        for (i = 0; i < tablinks.length; i++) {
            tablinks[i].className = tablinks[i].className.replace(" active", "");
        }
        document.getElementById(tabName).style.display = "block";
        evt.currentTarget.className += " active";
    }

</script>
{{ block.super }}
<style>
    label {
        display: block;
        text-align: right;
    }

    .tabcontent {
        display: none;
    }

    .tablinks {
        cursor: pointer;
        padding: 10px;
    }

    .scrollX {
        overflow: auto;
    }

    .button-container {
        {% comment %} display: flex; {% endcomment %}
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
    }
    
    .button-container button {
        flex-basis: calc(33.33% - 10px); 
        margin: 2px; 
    }
    
    @media (max-width: 768px) {
        .button-container button {
            flex-basis: calc(50% - 10px);
        }
    }

    .select2-container {
        width: 100%;
    }

    .form-control {
        border-color: #aaa !important;
        border-radius: 5px !important;
    }

    .select2-selection__rendered {
        line-height: 31px !important;
    }
    .select2-container .select2-selection--single {
        height: 35px !important;
    }
    .select2-selection__arrow {
        height: 34px !important;
    }

    .dataTables_paginate {
        text-align: center;
    }

    .dataTables_paginate {
        margin-top: 10px;
    }

    .page-item:not(:first-child) .page-link {
        margin-left: 0px !important;
    }

    .page-link {
        border: none !important;
        padding: 0px !important;
    }

    .paginate_button {
        display: inline-block;
        margin: 2px;
        border: 1px solid #007bff;
        background-color: #fff;
        color: #007bff;
        cursor: pointer;
        border-radius: 3px;
        padding: 0.375rem 0.75rem;
    }

    #item-table-lpo_info {
        margin-top: 5px;
    }

    #item-table-lpo_paginate {
        margin-top: 10px;
    }

    .paginate_button.active, .paginate_button.current {
        background-color: #007bff;
        color: #fff;
        padding: 0.375rem 0.75rem;
    }

    .paginate_button.active:hover, .paginate_button.current:hover {
        background-color: #007bff;
        color: #fff;
        padding: 0.375rem 0.75rem;
    }
    

    .ellipsis {
        display: none;
    }

    #item-table-stokopname_ellipsis {
        display: none;
    }

    #item-table-lpo_previous,
    #item-table-lpo_next {
        margin: 2px;
        border: 1px solid #007bff;
        background-color: #fff;
        color: #007bff;
        cursor: pointer;
        border-radius: 3px;
        background-color: #aaa !important;
        color: #fff !important;
        {% comment %} padding: 5px 10px; {% endcomment %}
    }

    #item-table-lpo_previous a,
    #item-table-lpo_next a {
        background-color: #aaa !important;
        color: #fff !important;
    }

    #item-table-lpo_info {
        position: absolute;
    }

    .paginate_button:hover {
        background-color: transparent;
        color: #007bff;
        text-decoration: none;
    }

    input[type="search"] {
        padding: 0.25rem 0.5rem;
        display: block;
        width: 100%;
        color: #495057;
        background-color: #fff;
        background-clip: padding-box;
        border: 1px solid #ced4da;
        border-radius: 0.25rem;
        transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    }

    input[type="search"]:focus {
        border-color: #007bff; /* Change border color on focus */
        border: none !important;
        outline: none !important;
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); /* Add box shadow on focus */
    }

    #item-table-stokopname_length {
        position: absolute;
    }

    #item-table-lpo_filter {
        float: right;
    }

    #item-detail_length {
        position: absolute;
    }

    #item-detail_filter {
        float: right;
    }
    div#item-table-lpo_length {
        display:contents !important
    }

    select[name="item-table-lpo_length"] {
        background-color: #f1f1f1; /* Background color */
        color: #333; /* Text color */
        border: 1px solid #ccc; /* Border */
        border-radius: 5px; /* Border radius */
        padding: 5px; /* Padding */
        -webkit-appearance: none; /* Remove arrow for Webkit browsers (Safari, Chrome) */
        -moz-appearance: none; /* Remove arrow for Mozilla Firefox */
        appearance: none; 
        font-size: 0.875rem;
    }

    select[name="item-table-lpo_length"]:focus {
        border-color: #007bff; /* Change border color on focus */
        border: none !important;
        outline: none !important;
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); /* Add box shadow on focus */
    }

    select[name="item-detail_length"] {
        background-color: #f1f1f1; /* Background color */
        color: #333; /* Text color */
        border: 1px solid #ccc; /* Border */
        border-radius: 5px; /* Border radius */
        padding: 5px; /* Padding */
        -webkit-appearance: none; /* Remove arrow for Webkit browsers (Safari, Chrome) */
        -moz-appearance: none; /* Remove arrow for Mozilla Firefox */
        appearance: none; 
        font-size: 0.875rem;
    }

    select[name="item-detail_length"]:focus {
        border-color: #007bff; /* Change border color on focus */
        border: none !important;
        outline: none !important;
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); /* Add box shadow on focus */
    }

    .page-link:hover {
        outline: none;
    }

    #chart-container {
        position: relative;
        height: 100vh;
        overflow: hidden;
      }
</style>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<link href="https://unpkg.com/gijgo@1.9.14/css/gijgo.min.css" rel="stylesheet" type="text/css" />
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dragscroll/0.0.8/dragscroll.min.js" integrity="sha512-/ncZdOhQm5pgj5KHy720Ck7XF5RzYK6rtUsLNnGcitXrKT3wUYzTrPlOSG7SdL2kDzkuLEOFvrQRyllcZkeAlg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dragscroll/0.0.8/dragscroll.js" integrity="sha512-av9OFV3TfDf07Bx0qGVXV+9oNYMjIpzb/QO/LvVFWr2sgMutARKm998SDdRbYiGQtm/8yl4Ob94eHEWRUTI4tQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script src="https://unpkg.com/gijgo@1.9.14/js/gijgo.min.js" type="text/javascript"></script>
<!-- Add FontAwesome CDN link -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha384-rHyoN1iiz4BywXFF6z9vxCpIH1a5zXYjRTm86aK5r5Pm5Pd1PfFqW1uSjJlWtJf6" crossorigin="anonymous">
<script src="https://fastly.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
{% endblock %}

{% block content %}
{% language 'id' %}
<main class="h-100">

    {% include "header.html" %}
    <!-- main page content -->
    <div class="main-container container">
        <!--card pelayanan-->
        <div class="row mb-2">
            {% for x in messages %}
            <button class="btn btn-primary col-lg-12">{{ x }}</button>
            {% endfor %}
        </div>

        <script>
            // Display the first tab by default
            document.getElementsByClassName("tablinks")[0].click();

        </script>
          
        <div class="row">
            <nav style="--bs-breadcrumb-divider: url(&#34;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='currentColor'/%3E%3C/svg%3E&#34;);" aria-label="breadcrumb">
                <ol class="breadcrumb" style="background-color: transparent;display: flex;justify-content: flex-end;">
                  <li class="breadcrumb-item"><a href="/">Dashboard</a></li>
                  <li class="breadcrumb-item"><a href="/">Pemeriksaan</a></li>
                  <li class="breadcrumb-item active" aria-current="page">Jasa Medis</li>
                </ol>
            </nav>
            <!-- {% for item in total_diagnosa_this_month %}
            <div class="col-4">
                <div class="card card-sm">
                    <div class="card-body">
                        <div class="card-title"> Diagnosa Paling Populer Bulan ini</div>
                            <p class="card-text" style="font-weight: bold; font-size:xx-large">{{ item.icd10__kode }} - {{ item.total }}x</p>
                        <div style="font-size:x-large">Digunakan</div>
                    </div>
                </div>
            </div>
            {% endfor %}          
          
            {% for item in total_diagnosa_last_month %}
            <div class="col-4">
                <div class="card card-sm" >
                    <div class="card-body">
                        <div class="card-title">Diagnosa Paling Populer Bulan lalu</div>
                            <p class="card-text" style="font-weight: bold; font-size:xx-large">{{ item.icd10__kode }} - {{ item.total }}x</p>
                        <div style="font-size:x-large">Digunakan</div>
                    </div>
                </div>
            </div>
            {% endfor %}

            {% for item in total_diagnosa_all_time %}
            <div class="col-4">
                <div class="card card-sm" >
                    <div class="card-body">
                        <div class="card-title">Total diagnosa</div>
                            <p class="card-text" style="font-weight: bold; font-size:xx-large">{{ total_diagnosa_all_time.total }}</p>
                        <div style="font-size:x-large"> Diagnosa Yang Terdaftar</div>
                    </div>
                </div>
            </div>
            {% endfor %} -->

            <div class="col-sm-8">
                <div class="card l-bg-light-dark">
                    <div class="card-statistic-3 p-4" style="cursor: pointer;">
                        <div id="patientBarChart" style="width: 100%; height: 200px;"></div>
                    </div>
                </div>
            </div>

            <div class="col-sm-4">
                <button class="btn btn-success btn-sm text-light filter_date_range" id="layananrange" style="width: 400px;height: 50px;">
                    <span class="bi bi-calendar-week"></span>
                    <span id="daterange-text">Filter Tanggal</span>
                </button>
                <div class="card l-bg-light-dark" style="margin-top: 42px;">
                    <div class="card-statistic-3 p-4">
                        <div class="card-title">Total diagnosa</div>
                            <p class="card-text" style="font-weight: bold; font-size:xx-large;" id="total_diagnosa">0</p>
                        <div style="font-size:x-large"> Diagnosa Yang Terdaftar</div>
                    </div>
                </div>
            </div>

         </div>
        <div class=" mb-3 mt-4">
            <div class="col" style="padding: 0px;">
                <div class="card">
                    <div class="card-body">
                        <div style="display: flex; justify-content: space-between;">
                            <div style="display:flex">
                                <span >Laporan Diagnosa</span>
                            </div>
                            <!-- <button type="button" class="btn btn-success text-light" onclick="export_laporan_obat()">export</button> -->
                        </div>
                        <p style="border-bottom: 1px solid grey;" class="mt-2 mb-3 h5"></p>
                        <div class="row gy-3" id="table-laporan">
                            <table width="100%" style="width:100% !important; cursor: pointer;" id="item-table" class="table dataTable table-striped table-bordered">
                                <thead>
                                    <tr>
                                        <th>ID</th>
                                        <th>Kode</th>
                                        <th>Nama Diagnosa</th>
                                        <th>Bulan</th>
                                        <th>Tahun</th>
                                    </tr>
                                </thead>
                            </table>
                        </div>                         
                    </div>
                </div>
            </div>
        </div>
    </div>
    {% include "footer.html" %}
</main>
<script>
    $(".custom-select").each(function() {
      let currentDate = new Date();
      let currentMonth = currentDate.getMonth() + 1; // 7
      var month_name = ["JANUARI","FEBRUARI","MARET","APRIL","MEI","JUNI","JULI","AGUSTUS","SEPTEMBER","OKTOBER","NOVEMBER","DESEMBER"]
      var classes = $(this).attr("class"),
          id      = $(this).attr("id"),
          name    = $(this).attr("name");
      var template =  '<div class="' + classes + '">';
          template += '<span class="custom-select-trigger">' + month_name[currentDate.getMonth()] + '</span>';
          template += '<div class="custom-options" style="overflow-y: scroll; height: 200px;" >';
          $(this).find("option").each(function() { //looping
            if($(this).attr("value") == currentMonth){
                def_class = "selection"
            } else {
                def_class = $(this).attr("class")
            }
            template += '<span class="custom-option ' + def_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");
      chartDiagnosa(value) //manggil fungsi
    });
</script>
<script>
    $(document).ready(function() {
        $('#layananrange').daterangepicker({
            opens: 'left',
            autoUpdateInput: false,
            startDate: start,
            endDate: end,
        });
        // Initialize DataTable
        $('#item-table-lpo').DataTable({
            aaSorting: [],
            order: []
        })
        let currentDate = new Date();

        // Get the month (returns a number from 0 to 11)
        let currentMonth = currentDate.getMonth() +1;
        chartDiagnosa(currentMonth)

        $('.daterangepicker .drp-buttons .applyBtn').on('click', function() {
            console.log("Masuk")
            start = $('#layananrange').data('daterangepicker').startDate.format('YYYY-MM-DD');
            end = $('#layananrange').data('daterangepicker').endDate.format('YYYY-MM-DD');
            chartDiagnosa('range', start, end);
        });
    });

    function downloadExcelFile(kode,kuantitas,nama_barang,tanggal_pembayaran,) {
        var downloadUrl = `/penjualan/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);
    }
    
    function export_laporan_obat(){
        var kode = $('#kode').val()
        console.log(kode)
        var kuantitas = $('#kuantitas').val()
        var nama_barang = $('#nama_barang').val()
        var tanggal_pembayaran = $('#tanggal_pembayaran').val()
        var nama_kasir = $('#nama_kasir').val()
        downloadExcelFile(kode,kuantitas,nama_barang,tanggal_pembayaran,nama_kasir)

    }
</script>
<script>
    function chartDiagnosa(filter_date, start_date, end_date){ //Fungsi ini menerima 1 argument
        $.ajax({
            url: `/pemeriksaan/chart_diagnosa/?filter_date=${filter_date}&start_date=${start_date}&end_date=${end_date}`,  // URL untuk view Django Anda
            success: function(data) {
                getTableDiagnosa(data.table_diagnosa)
                $('#total_diagnosa').text(data.total)
                // DIBAWAH INI HANYA UNTUK CHART
                const diagnosa_this_month = data.get_diagnosa_list; // Ambil data total_diagnosa_this_month dari respons
                // Data untuk sumbu x (kode ICD-10)
                const name = diagnosa_this_month.map(item => item.icd10__kode);
                // Data untuk sumbu y (total)
                const total = diagnosa_this_month.map(item => item.total);
                // Inisialisasi grafik bar (ECharts)
                const barChart = echarts.init(document.getElementById('patientBarChart'));
        
                // Opsi grafik bar
                const barOptions = {
                    title: {
                        text: 'Total Diagnosa Bulan Ini',
                        x: 'center'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    xAxis: {
                        type: 'category',
                        data: name
                    },
                    yAxis: {
                        type: 'value',
                        name: 'Total'
                    },
                    series: [
                        {
                            name: 'Total Diagnosa',
                            type: 'bar',
                            data: total
                        }
                    ]
                };
        
                // Set opsi grafik ke grafik bar
                barChart.setOption(barOptions);     
            },
        });
    }

    function getTableDiagnosa(data){
        $('#table-laporan').empty();
        var html = `<table width="100%" style="width:100% !important; cursor: pointer;" id="item-table" class="table dataTable table-striped table-bordered">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Kode</th>
                    <th>Nama Diagnosa</th>
                    <th>Bulan</th>
                    <th>Tahun</th>
                </tr>
            </thead>
        </table>`;
        $('#table-laporan').html(html)
        $('#item-table').DataTable({
            "responsive":true,
            "scrollX": true,
            "data": data, 
            "language": {
                "search": "", // Remove the search label
                "searchPlaceholder": "Search..." // Set the placeholder text
            },
            "columns": [
                {
                "data": null,
                "render": function (data, type, row, meta) {
                    // Use the 'meta.row' to get the row index and add 1 to start counting from 1
                    return meta.row + 1;
                }
                },
                { "data": "kode_icd10" },
                { "data": "diagnosa", "width" : "30%",},
                {
                    "data": "created_at",
                    "width" : "20%",
                    "render": function(data, type, row) {
                        let date = new Date(data);
                        let month = date.getMonth() + 1;
                        let monthNames = [
                            "Januari", "Februari", "Maret", "April", "Mei", "Juni", 
                            "Juli", "Agustus", "September", "Oktober", "November", "Desember"
                        ];
                        return monthNames[date.getMonth()];
                    }
                },
                {
                    "data": "created_at",
                    "width" : "20%",
                    "render": function(data, type, row) {
                        let date = new Date(data);
                        let year = date.getFullYear();
                        return year
                    }
                },
            ],
        });
    }
</script>


{% endlanguage %}
{% endblock %}