<?php include('techsyn_header.php');
//print_r($_SESSION);
?>
<link rel="stylesheet" href="css/wizard.css">
<script src="js/Chart.min.js"></script>
<style type="text/css">
    .hidden-radio {
        position: absolute;
        top: 11px;
        left: 27px;
        width: 60px;
        height: 60px;
        border-radius: 100%;
        background: #fff;
        opacity: 0;
        cursor: pointer;
    }
</style>
<?php /* if($_SESSION['RoleId']==7){echo "<script>window.location.replace('emp_details.php')</script>";}*/ ?>
<!-- Main Content Container for side bar and body-->
<div class="main-container ace-save-state" id="main-container">
    <script type="text/javascript">
        try {
            ace.settings.loadState('main-container')
        } catch (e) {}
    </script>
    <?php include('techsyn_sidebar.php'); ?>
    <!--breadcrumb-->
    <?php
    ?>
    <div class="main-content">
        <div class="main-content-inner">
            <div class="breadcrumbs ace-save-state" id="breadcrumbs">
                <ul class="breadcrumb">
                    <li><i class="ace-icon fa fa-home home-icon"></i> <a href="#">Home</a>
                    </li>
                    <li class="active">Dashboard</li>
                </ul>
            </div>
            <!-- End of breadcrumb -->
            <div class="page-content">
                <form id="medical_form">
                    <div class="row">

                        <div class="col-sm-9 col-sm-offset-2 wizard-card">

                            <div class="col-sm-4">
                                <div class="choice" data-toggle="wizard-radio" rel="tooltip" title="" data-original-title="Injury">
                                    <input type="radio" name="task" value="pre_employment">
                                    <div class="icon bg-yellow">
                                        <i class="ace-icon fa fa-stethoscope"></i>
                                    </div>
                                    <h6>
                                        <span class="info-box-text">Pending Health Surveillance</span> <span class="info-box-number">
                                            <?php echo getPending_Medical_HealthSurvellianceCount(); ?>/<?= getTodayHealthSurvellianceCount(); ?>
                                            <small>Cases</small>
                                </div>
                            </div>

                            <div class="col-sm-4">
                                <div class="choice" data-toggle="wizard-radio" rel="tooltip" title="" data-original-title="Injury">
                                    <input type="radio" name="task" value="direct_medical_entry">
                                    <div class="icon bg-red">
                                        <i class="ace-icon fa fa-stethoscope"></i>
                                    </div>
                                    <h6>
                                        <span class="info-box-text"> Health Surveillance</span> <span class="info-box-number">
                                            <?php echo getPending_Medical_HealthSurvellianceCount(); ?>/<?= getTodayHealthSurvellianceCount(); ?>
                                            <small>Cases</small>
                                </div>
                            </div>



                            <!-- <div class="col-sm-5">
                                <div class="choice" data-toggle="wizard-radio" rel="tooltip" title="" data-original-title="Injury">
                                    <input type="radio" name="task" value="direct_test_lab">
                                    <div class="icon bg-red">
                                        <i class="ace-icon fa fa-stethoscope"></i>
                                    </div>
                                    <h6>
                                        <span class="info-box-text">DIRECT TEST</span> <span class="info-box-number">
                                            <?php echo getTodayLabSurvellianceCount(); ?>
                                            <small>Cases</small>
                                </div>
                            </div> -->



                        </div>
                    </div>
                </form>


                <div class="row">
                    <div class="col-sm-5" style="padding-top: 30px;margin-left: 10px">
                        <div class="box box-success">
                            <div class="box-header box-header-flat clickable" id="noticeTableHeader">
                                <h5 class="box-title lighter">
                                    <a role="button" data-toggle="collapse" href="#collapse_notice_table" aria-expanded="false" aria-controls="collapseOne">
                                        Notices
                                    </a>
                                </h5>
                            </div>

                            <div id="collapse_notice_table" class="panel-collapse collapse">
                                <div id="notice_table_content" class="table-responsive">
                                    <div id="noticeTableLoadingIcon" style="display: none;">
                                        <img src="assets/images/loading-spinner.gif" alt="Loading..." />
                                    </div>

                                    <table class="table table-bordered table-hover" id="noticeTable">
                                        <thead class="thin-border-bottom">
                                            <tr>
                                                <th><i class="ace-icon fa fa-caret-right blue"></i>Notice Details</th>
                                                <th><i class="ace-icon fa fa-caret-right blue"></i>Issued By</th>
                                                <th><i class="ace-icon fa fa-caret-right blue"></i>Issued To</th>
                                                <th><i class="ace-icon fa fa-caret-right blue"></i>Status</th>
                                            </tr>
                                        </thead>
                                        <tbody>

                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>




                    <div class="col-sm-6" style="padding-top: 30px;margin-left: 1rem;">
                        <div class="box box-success">
                            <div class="box-header box-header-flat clickable" id="medicalTableHeader">
                                <h5 class="box-title lighter">
                                    <a role="button" data-toggle="collapse" href="#collapse_medical_table" aria-expanded="false" aria-controls="collapseOne">
                                        Medical Examination Pending
                                    </a>
                                </h5>
                            </div>

                            <div id="collapse_medical_table" class="panel-collapse collapse">
                                <div id="medical_table_content">
                                    <div id="medicalTableLoadingIcon" style="display: none;">
                                        <img src="assets/images/loading-spinner.gif" alt="Loading..." />
                                    </div>

                                    <table class="table table-bordered table-hover" id="medicalTable">
                                        <thead class="thin-border-bottom">
                                            <tr>
                                                <th><i class="ace-icon fa fa-caret-right blue"></i>Name</th>
                                                <th><i class="ace-icon fa fa-caret-right blue"></i>Medi. Exam. Type</th>
                                                <th><i class="ace-icon fa fa-caret-right blue"></i>Previous Medi. Exam. Date</th>
                                                <th><i class="ace-icon fa fa-caret-right blue"></i>Due Date</th>
                                            </tr>
                                        </thead>
                                        <tbody>

                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>





                </div>


                <div class="row">
                    <div class="col-sm-8" style="padding-top: 30px;">
                        <div class="box  box-success ">
                            <div class="box-header box-header-flat">
                                <h5 class="box-title lighter">
                                    <a id="medicalExamLink" role="button" data-toggle="collapse" href="#collapse_check6" aria-expanded="false" aria-controls="collapseOne">
                                        MEDICAL EXAMINATION
                                    </a>


                                </h5>
                                <hr>
                                <form action="" id="exceldata">
                                    <div class="row">

                                        <div class="col-sm-3">
                                            <label for="">Start Date</label>
                                            <input class="form-control date-picker" style="width:auto" id="startDate" name="startDate" value="<?= date('d-m-Y', strtotime(date("d-m-Y") . ' -1 month')) ?>" type=" text" data-date-format="dd-mm-yyyy" />
                                        </div>
                                        <div class="col-sm-3">
                                            <label for="">End Date</label>
                                            <input class="form-control date-picker" style="width:auto" id="endDate" name="endDate" value="<?= date("d-m-Y") ?>" type=" text" data-date-format="dd-mm-yyyy" />

                                        </div>
                                        <div class="col-sm-2">
                                            <label for="pat_cat">Category</label>
                                            <select name="pat_cat" id="pat_cat" class="form-control">
                                                <option value="" selected disabled>--select--</option>
                                                <?php echo generateOption('patient_category', 'patient_cat_name', 'patient_cat_id', '', '') ?>
                                            </select>
                                        </div>


                                        <div class="col-sm-2">
                                            <button type="button" class="btn btn-success" id="goButton" onclick="getMedicalData();">Go</button>
                                        </div>

                                        <div class="col-sm-2">
                                            <button type="button" data-toggle="tooltip" data-placement="top" title="Download Excel" class="btn btn-primary" id="mybtn" onclick="getExcel();"><i class="fa fa-download" aria-hidden="true"></i></button>
                                        </div>

                                    </div>
                                </form>

                            </div>
                            <div id="collapse_check6" class="panel-collapse collapse" style="height:60vh; position: relative;">
                                <div class="loading-spinner" style="display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.5); z-index: 9999;">
                                    <img src="assets\images\loading-spinner.gif" alt="Loading..." style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);" />
                                </div>
                                <canvas id="medicalExamChart"></canvas>
                            </div>


                        </div>
                    </div>
                </div>
            </div>
            <!-- /.page-content -->
        </div>
    </div>
    <!-- /.main-content -->
</div>
<?php include('techsyn_footer.php'); ?>
<script type="text/javascript">
    //notice
    $(document).ready(function() {
        var noticeTableLoaded = false;

        $('#noticeTableHeader').click(function() {
            toggleNoticeTable();
        });

        function toggleNoticeTable() {
            $('#collapse_notice_table').toggle();
            if ($('#collapse_notice_table').is(':visible') && !noticeTableLoaded) {
                loadNoticeTable();
                noticeTableLoaded = true;
            }
        }

        function loadNoticeTable() {
            $('#noticeTableLoadingIcon').show();

            $.ajax({
                url: 'notice_details_dashboard_card.php',
                type: 'GET',
                dataType: 'json',
                success: function(response) {
                    displayNoticeTable(response);
                    $('#noticeTableLoadingIcon').hide();
                },
                error: function(xhr, status, error) {
                    console.error(error);
                    $('#noticeTableLoadingIcon').hide();
                }
            });
        }

        function displayNoticeTable(response) {
            var data = response.data;
            var tableBody = $('#noticeTable tbody');
            tableBody.empty();

            data.forEach(function(item) {
                var row = '<tr>' +
                    '<td>' + item.notice_details + '</td>' +
                    '<td>' + item.issued_by + '</td>' +
                    '<td>' + item.issued_to + '</td>' +
                    '<td>' + item.status + '</td>' +
                    '</tr>';
                tableBody.append(row);
            });

            var dataTable = $('#noticeTable').DataTable();
            var dataTableContainer = dataTable.table().container();
            $(dataTableContainer).addClass('table-background-white');
        }
    });




    //medical examination 

    $(document).ready(function() {
        var medicalDataLoaded = false;

        function toggleMedicalExam() {
            $('#collapse_check6').toggle();
            if ($('#collapse_check6').is(':visible') && !medicalDataLoaded) {
                getMedicalData();
                medicalDataLoaded = true;
            }

        }

        $("#goButton").on("click", function() {
            getMedicalData();
        });

        $("#medicalExamLink").on("click", function() {
            toggleMedicalExam();
        });

        function getMedicalData() {
            var startDate = $("#startDate").val();
            var endDate = $("#endDate").val();
            var patCat = $("#pat_cat").val();

            $(".loading-spinner").show();

            $.ajax({
                type: 'post',
                url: 'chart_medical_exam_datewise.php',
                data: {
                    startDate: startDate,
                    endDate: endDate,
                    patCat: patCat
                },
                dataType: 'json',
                success: function(response) {
                    console.log("Received medical data:", response);
                    renderMedicalExamChart(response);
                    medicalDataLoaded = true;
                },
                error: function(xhr, status, error) {
                    console.error('Error fetching medical exam data:', error);
                    $(".loading-spinner").hide();
                }
            });
        }

        function renderMedicalExamChart(data) {
            try {
                var ctx = document.getElementById('medicalExamChart').getContext('2d');
                var chartData = data['checkup_data'] || [];
                var xaxis = data['medical_exam_name'] || [];

                if (xaxis.length === 0 || chartData.length === 0) {
                    console.error('Empty data received for medical exam chart.');
                    return;
                }

                if (window.medicalExamChart && window.medicalExamChart instanceof Chart) {
                    window.medicalExamChart.destroy();
                }

                var colors = chartData.map(() => "#" + Math.floor(Math.random() * 16777215).toString(16));

                var dataset = [{
                    label: "count",
                    data: chartData,
                    borderColor: colors,
                    backgroundColor: colors,
                    fill: false,
                }];

                var chartOptions = {
                    legend: {
                        display: false
                    },
                    scales: {
                        xAxes: [{
                            ticks: {
                                beginAtZero: true,
                                precision: 0,
                            }
                        }]
                    }
                };

                var chartData = {
                    labels: xaxis,
                    datasets: dataset
                };

                window.medicalExamChart = new Chart(ctx, {
                    type: 'horizontalBar',
                    data: chartData,
                    options: chartOptions
                });
            } catch (error) {
                console.error('Error rendering medical exam chart:', error);
            } finally {
                $(".loading-spinner").hide();
            }
        }
    });


    // medical examination pending
    $(document).ready(function() {
        var medicalTableLoaded = false;

        $('#medicalTableHeader').click(function() {
            toggleMedicalTable();
        });

        function toggleMedicalTable() {
            $('#collapse_medical_table').toggle();
            if ($('#collapse_medical_table').is(':visible') && !medicalTableLoaded) {
                loadMedicalTable();
                medicalTableLoaded = true;
            }
        }

        function loadMedicalTable() {
            $('#medicalTableLoadingIcon').show();

            $.ajax({
                url: 'due_examination_date_dashboard.php',
                type: 'GET',
                dataType: 'json',
                success: function(response) {
                    displayMedicalTable(response);
                    $('#medicalTableLoadingIcon').hide();
                },
                error: function(xhr, status, error) {
                    console.error(error);
                    $('#medicalTableLoadingIcon').hide();
                }
            });
        }

        function displayMedicalTable(response) {
            var data = response.data;
            var tableBody = $('#medicalTable tbody');
            tableBody.empty();

            data.forEach(function(item) {
                var row = '<tr>' +
                    '<td>' + item.name + '</td>' +
                    '<td>' + item.exam_type + '</td>' +
                    '<td>' + item.prev_exam_date + '</td>' +
                    '<td>' + item.due_date + '</td>' +
                    '</tr>';
                tableBody.append(row);
            });

            var dataTable = $('#medicalTable').DataTable();
            var dataTableContainer = dataTable.table().container();
            $(dataTableContainer).addClass('table-background-white');
        }
    });






    function getInjuryData() {
        var start_date = $("#startDateInjury").val();
        var end_date = $("#endDateInjury").val();

        document.querySelector("#collapse_check7").innerHTML = '<canvas id="chart_monthly_injury"></canvas>';
        $.ajax({
            type: 'post',
            url: 'chart_injury_datewise.php',
            data: {
                start_date: start_date,
                end_date: end_date
            },
            dataType: 'json',
            success: function(Mdata) {
                var ctx = document.getElementById('chart_monthly_injury').getContext('2d');
                var chartData = Mdata['injury_data'];
                var xaxis = Mdata['injury_class_name']


                var colors = [];
                for (var i = 0; i < chartData.length; i++) {
                    colors.push("#" + Math.floor(Math.random() * 16777215).toString(16));
                }
                var dataset = [];
                // for (var i = 0; i < chartData.length; i++) {
                dataset.push({
                    label: "count",
                    data: chartData,
                    borderColor: colors,
                    backgroundColor: colors,
                    fill: false,
                });
                // }

                var data = {
                    labels: xaxis,
                    datasets: dataset
                }
                var myChart = new Chart(ctx, {
                    type: 'horizontalBar',
                    data: data,
                    options: {
                        legend: {
                            display: false
                        },
                        scales: {
                            xAxes: [{
                                ticks: {
                                    beginAtZero: true,
                                    precision: 0,
                                }
                            }]
                        }
                    }
                });


            },
            error: function(date) {

            }
        })
    }

    function getExcel() {

        $("#exceldata").attr('method', 'POST');
        $("#exceldata").attr('target', '_blank');
        $("#exceldata").attr('action', 'medical_examination_excel.php');
        $("#exceldata").submit();
    }

    function getInjuryExcel() {

        $("#excelinjurydata").attr('method', 'POST');
        $("#excelinjurydata").attr('target', '_blank');
        $("#excelinjurydata").attr('action', 'injury_type_excel.php');
        $("#excelinjurydata").submit();
    }


    jQuery(function($) {
        $('.easy-pie-chart.percentage').each(function() {
            var $box = $(this).closest('.infobox');
            var barColor = $(this).data('color') || (!$box.hasClass('infobox-dark') ? $box.css('color') :
                'rgba(255,255,255,0.95)');
            var trackColor = barColor == 'rgba(255,255,255,0.95)' ? 'rgba(255,255,255,0.25)' : '#E2E2E2';
            var size = parseInt($(this).data('size')) || 50;
            $(this).easyPieChart({
                barColor: barColor,
                trackColor: trackColor,
                scaleColor: false,
                lineCap: 'butt',
                lineWidth: parseInt(size / 10),
                animate: ace.vars['old_ie'] ? false : 1000,
                size: size
            });
        })
        $('.sparkline').each(function() {
            var $box = $(this).closest('.infobox');
            var barColor = !$box.hasClass('infobox-dark') ? $box.css('color') : '#FFF';
            $(this).sparkline('html', {
                tagValuesAttribute: 'data-values',
                type: 'bar',
                barColor: barColor,
                chartRangeMin: $(this).data('min') || 0
            });
        });
        //flot chart resize plugin, somehow manipulates default browser resize event to optimize it!
        //but sometimes it brings up errors with normal resize event handlers
        $.resize.throttleWindow = false;
        var placeholder = $('#piechart-placeholder').css({
            'width': '98%',
            'min-height': '300px'
        });

        function drawPieChart(placeholder, data, position) {
            $.plot(placeholder, data, {
                series: {
                    pie: {
                        show: true,
                        tilt: 0.8,
                        highlight: {
                            opacity: 0.25
                        },
                        stroke: {
                            color: '#fff',
                            width: 2
                        },
                        startAngle: 2
                    }
                },
                legend: {
                    show: true,
                    position: position || "ne",
                    labelBoxBorderColor: null,
                    margin: [-30, 15]
                },
                grid: {
                    hoverable: true,
                    clickable: true
                }
            })
        }
        var data = Array();
        $(document).ready(function() {
            //loadChartData(30);
        });

        function loadChartData(days) {
            $.ajax({
                type: "GET",
                url: "select_mostused_item.php?days=" + days,
                cache: false,
                dataType: "json",
                success: function(returnData) {
                    console.log(returnData);
                    data = returnData;
                    // drawPieChart(placeholder, data);
                    /**
                    we saved the drawing function and the data to redraw with different position later when switching to RTL mode dynamically
                    so that's not needed actually.
                    */
                    placeholder.data('chart', data);
                    placeholder.data('draw', drawPieChart);
                },
                error: function(returnData) {
                    console.log('error' + returnData);
                }
            })
        }
        //pie chart tooltip example
        var $tooltip = $("<div class='tooltip top in'><div class='tooltip-inner'></div></div>").hide().appendTo(
            'body');
        var previousPoint = null;
        placeholder.on('plothover', function(event, pos, item) {
            if (item) {
                if (previousPoint != item.seriesIndex) {
                    previousPoint = item.seriesIndex;
                    var tip = item.series['label'] + " : " + item.series['percent'].toFixed(2) + '%';
                    $tooltip.show().children(0).text(tip);
                }
                $tooltip.css({
                    top: pos.pageY + 10,
                    left: pos.pageX + 10
                });
            } else {
                $tooltip.hide();
                previousPoint = null;
            }
        });
        /*  var data = [
        	{ label: "social networks",  data: 38.7, color: "#68BC31"},
        	{ label: "search engines",  data: 24.5, color: "#2091CF"},
        	{ label: "ad campaigns",  data: 8.2, color: "#AF4E96"},
        	{ label: "direct traffic",  data: 18.6, color: "#DA5430"},
        	{ label: "other",  data: 10, color: "#FEE074"}
          ]*/
        /////////////////////////////////////
        $(document).one('ajaxloadstart.page', function(e) {
            $tooltip.remove();
        });
        var d1 = [];
        for (var i = 0; i < Math.PI * 2; i += 0.5) {
            d1.push([i, Math.sin(i)]);
        }
        var d2 = [];
        for (var i = 0; i < Math.PI * 2; i += 0.5) {
            d2.push([i, Math.cos(i)]);
        }
        var d3 = [];
        for (var i = 0; i < Math.PI * 2; i += 0.2) {
            d3.push([i, Math.tan(i)]);
        }
        //Android's default browser somehow is confused when tapping on label which will lead to dragging the task
        //so disable dragging when clicking on label
        var agent = navigator.userAgent.toLowerCase();
        if (ace.vars['touch'] && ace.vars['android']) {
            $('#tasks').on('touchstart', function(e) {
                var li = $(e.target).closest('#tasks li');
                if (li.length == 0) return;
                var label = li.find('label.inline').get(0);
                if (label == e.target || $.contains(label, e.target)) e.stopImmediatePropagation();
            });
        }
    })
    $(".choice").on("click", function() {
        var v = $(this).closest("div").find("input[name='task']").attr("checked", "checked");
        task = $(this).closest("div").find("input[name='task']").val()
        $("#medical_form").attr('method', 'POST');
        if (task == 'pre_employment') {
            $("#medical_form").attr('action', 'pending_medical_examination_list.php');
        }
        if (task == 'opd') {
            $("#medical_form").attr('action', 'add_select_patient.php');
        }
        if (task == 'peme') {
            $("#medical_form").attr('action', 'add_select_patient.php');
        }
        if (task == 'peme_short') {
            $("#medical_form").attr('action', 'add_select_patient.php');
        }
        if (task == 'pohc_half') {
            $("#medical_form").attr('action', 'add_select_patient.php');
        }
        if (task == 'pohc') {
            $("#medical_form").attr('action', 'add_select_patient.php');
        }
        if (task == 'eye_check') {
            $("#medical_form").attr('action', 'add_select_patient.php');
        }
        if (task == 'foodhand_exam') {
            $("#medical_form").attr('action', 'add_select_patient.php');
        }
        if (task == 'covid') {
            $("#medical_form").attr('action', 'add_select_patient.php');
        }
        if (task == 'ffi') {
            $("#medical_form").attr('action', 'add_select_patient.php');
        }
        if (task == 'chs') {
            $("#medical_form").attr('action', 'add_select_canteen.php');
        }
        if (task == 'khs') {
            $("#medical_form").attr('action', 'add_select_kitchen.php');
        }
        if (task == 'dlf') {
            $("#medical_form").attr('action', 'add_select_patient.php');
        }
        if (task == 'mcovid') {
            $("#medical_form").attr('action', 'covid_monitoring.php');
        }
        if (task == 'direct_test_lab') {
            $("#medical_form").attr('action', 'add_select_patient.php');
        }
        if (task == 'direct_medical_entry') {
            $("#medical_form").attr('action', 'add_select_patient.php');
        }
        $("#medical_form").submit();
    });
</script>
<script>
    $(document).ready(function() {
        // $(".choice").on("click", function () {
        //    var v = $(this).closest("div").find("input[name='task']").attr("checked","checked");
        // if(v.val()=='visitor_opd'){
        // 		$("#reception_form").attr('action', 'visitor_add_select_patient.php');
        // }else{
        //  $("#reception_form").attr('action', 'add_select_patient.php');
        // }
        //    $("#reception_form").attr('method', 'POST');
        //    $("#reception_form").submit();
        // });
        $.ajax({
            type: 'POST',
            url: 'covid_case_weekly_trends.php',
            data: $("#reception_form").serialize(),
            dataType: 'json',
            success: function(data) {
                if (data != null) {
                    var labels = [];
                    var percentage_bmi_total_array = [];
                    var total_emp = 0;
                    var total_emp_sum = 0;
                    var bmi_total_sum = 0;
                    var percentage_bmi_total = 0.0;
                    // @var confirm_case - get the total confirm case
                    // @var quarantine_case - get the total quarantine case
                    // @var discharge - get the total discharge patient 
                    var confirm_case = 0;
                    var quarantine_case = 0;
                    var discharge = 0;
                    if (Object.keys(data).length > 0) {
                        for (var i = 0; i < Object.keys(data).length; i++) {
                            total_emp = parseInt(data[i].week);
                            total_emp_sum = total_emp_sum + total_emp;
                            confirm_case += parseInt(data[i].confirm_case);
                            quarantine_case += parseInt(data[i].quarantine_case);
                            discharge += parseInt(data[i].discharge);
                            var bmi_total = parseInt(data[i].todays_case);
                            bmi_total_sum += bmi_total;
                            var j = 0;
                            labels[i] = 'Week:' + data[i].week;
                            if (total_emp != 0 && total_emp != null) {
                                percentage_bmi_total = (bmi_total / data[i].total_active) * 100;
                                //   if(data[i].confirm_case == ''){
                                // percentage_bmi_total_array.push([0, data[i].quarantine_case, data[i].discharge]);
                                //   } else if(data[i].quarantine_case == ''){
                                // percentage_bmi_total_array.push([data[i].confirm_case, 0, data[i].discharge]);
                                //   }else {
                                //   }
                                percentage_bmi_total_array.push([data[i].confirm_case, data[i]
                                    .quarantine_case, data[i].discharge
                                ]);
                            } else {
                                percentage_bmi_total = "Not Available";
                            }
                        }
                    }
                    var total_percentage = "";
                    if (total_emp_sum == 0) {
                        total_percentage = "Not Available";
                    } else {
                        total_percentage = (bmi_total_sum / total_emp_sum) * 100;
                    }
                    var content1 =
                        "<canvas id=\"chart3\"	style=\"display: block; width: 500px; height: 250px;\" class=\"chartjs-render-monitor\"></canvas>";
                    $("#covid_weekly_report").html(content1);
                    var header = "Covid Case Weekly Trends";
                    percentage_bmi_total_array[Object.keys(data).length] = ['Confirmed Case',
                        'Quarantine Case', 'Discharged'
                    ]
                    // console.log('array length in weekly trends: '+percentage_bmi_total_array[Object.keys(data).length]+'lenth '+Object.keys(data).length);
                    prepareChart('line', percentage_bmi_total_array, labels, header);
                }
            },
            error: function(data) {}
        });
        // $.ajax({
        // 	type:'POST',
        // 	url:'covid_active_vs_new_cases.php',
        // 	data:$("#reception_form").serialize(),
        // 	dataType:'json',
        // 	success:function(data){
        // 		if(data!=null){
        // 			var labels=[];
        // 			var percentage_bmi_total_array = [];
        // 			var total_emp=0;
        // 			var total_emp_sum=0;
        // 			var bmi_total_sum=0;
        // 			var  percentage_bmi_total=0.0;
        // 			if(Object.keys(data).length>0){
        // 				for(var i=0;i<Object.keys(data).length;i++){
        // 					total_emp=parseInt(data[i].date);
        // 					total_emp_sum=total_emp_sum+total_emp;
        // 					var bmi_total= parseInt(data[i].todays_case);
        // 					bmi_total_sum+=bmi_total;
        // 						var j = 0;
        // 						labels[i]=data[i].date;
        // 						if(total_emp!=0 && total_emp!=null){
        // 							percentage_bmi_total_array.push([data[i].total_case, data[i].todays_case]);
        // 						}else{
        // 							percentage_bmi_total="Not Available";		
        // 						}
        // 				}
        // 			}	
        // 			console.log('total array; before label: '+percentage_bmi_total_array+" length is "+percentage_bmi_total_array.length);
        // 			var total_percentage="";
        // 			if(total_emp_sum==0){
        // 				total_percentage="Not Available";
        // 			}else{
        // 			total_percentage=(bmi_total_sum/total_emp_sum)*100;
        // 			}
        // 			var content1="<canvas id=\"chart3\"	style=\"display: block; width: 500px; height: 250px;\" class=\"chartjs-render-monitor\"></canvas>";
        // 			$("#covid_daily_report").html(content1);
        // 			var header="Covid Active Vs New Cases";
        // 			// console.log('line chart array data: '+percentage_bmi_total_array);
        // 			percentage_bmi_total_array.push(['Total Case', 'New Case']);
        // 			prepareChart('line',percentage_bmi_total_array,labels,header);
        // 		}
        // 	} ,
        // 	error:function(data){
        // 	}
        // });
    });
</script>
<script>
    function prepareChart(chartType, chartData, labels, header) {
        try {
            var color = Chart.helpers.color;
            Chart.defaults.global.pointHitDetectionRadius = 1;
            var customTooltips = function(tooltip) {
                // Tooltip Element
                var tooltipEl = document.getElementById('chartjs-tooltip');
                if (!tooltipEl) {
                    tooltipEl = document.createElement('div');
                    tooltipEl.id = 'chartjs-tooltip';
                    tooltipEl.innerHTML = '<table></table>';
                    this._chart.canvas.parentNode.appendChild(tooltipEl);
                }
                // Hide if no tooltip
                if (tooltip.opacity === 0) {
                    tooltipEl.style.opacity = 0;
                    return;
                }
                // Set caret Position
                tooltipEl.classList.remove('above', 'below', 'no-transform');
                if (tooltip.yAlign) {
                    tooltipEl.classList.add(tooltip.yAlign);
                } else {
                    tooltipEl.classList.add('no-transform');
                }

                function getBody(bodyItem) {
                    return bodyItem.lines;
                }
                // Set Text
                if (tooltip.body) {
                    var titleLines = tooltip.title || [];
                    var bodyLines = tooltip.body.map(getBody);
                    var innerHtml = '<thead>';
                    titleLines.forEach(function(title) {
                        innerHtml += '<tr><th>' + title + '</th></tr>';
                    });
                    innerHtml += '</thead><tbody>';
                    bodyLines.forEach(function(body, i) {
                        var colors = tooltip.labelColors[i];
                        var style = 'background:' + colors.backgroundColor;
                        style += '; border-color:' + colors.borderColor;
                        style += '; border-width: 2px';
                        var span = '<span class="chartjs-tooltip-key" style="' + style + '"></span>';
                        innerHtml += '<tr><td>' + span + body + '</td></tr>';
                    });
                    innerHtml += '</tbody>';
                    var tableRoot = tooltipEl.querySelector('table');
                    tableRoot.innerHTML = innerHtml;
                }
                var positionY = this._chart.canvas.offsetTop;
                var positionX = this._chart.canvas.offsetLeft;
                // Display, position, and set styles for font
                tooltipEl.style.opacity = 1;
                tooltipEl.style.left = positionX + tooltip.caretX + 'px';
                tooltipEl.style.top = positionY + tooltip.caretY + 'px';
                tooltipEl.style.fontFamily = tooltip._bodyFontFamily;
                tooltipEl.style.fontSize = tooltip.bodyFontSize + 'px';
                tooltipEl.style.fontStyle = tooltip._bodyFontStyle;
                tooltipEl.style.padding = tooltip.yPadding + 'px ' + tooltip.xPadding + 'px';
            };
            if (chartType == 'bar') {
                var data = chartData;
                var barChartData = {
                    labels: labels,
                    datasets: [{
                        label: header,
                        backgroundColor: window.chartColors.green,
                        borderColor: window.chartColors.white,
                        borderWidth: 1,
                        data: chartData,
                        hoverOffset: 4
                    }]
                };
            } else if (chartType == 'doughnut') {
                var data = chartData;
                var barChartData = {
                    labels: labels,
                    datasets: [{
                        label: header,
                        backgroundColor: [
                            'rgb(255, 99, 132)',
                            'rgb(54, 162, 235)',
                            'rgb(255, 205, 86)',
                            '#003f5c',
                            '58508d',
                            '#2f4b7c',
                            '#665191',
                            '#a05195',
                            '#d45087',
                            '#f95d6a',
                            '#ff7c43',
                            '#ffa600',
                        ],
                        borderColor: window.chartColors.white,
                        borderWidth: 1,
                        data: chartData,
                        hoverOffset: 4
                    }]
                };
            } else if (chartType == 'line') {
                var data = chartData;
                //console.log('chart data: ' + chartData[0]);
                // get the dataset label names count 
                var dataset_labels_count = chartData[(chartData.length) - 1].length;
                var lc_data = [];
                var lc_label = [];
                var j = 0;
                for (var i = 0; i < chartData.length; i++) {
                    for (var j = 0; j < dataset_labels_count; j++) {
                        lc_label[j] = chartData[i][j];
                    }
                }
                // for (var i = 0; i < dataset_labels_count; i++) {
                // 	for(var j = 0; j < chartData.length; j++){
                // 		console.log("chart Data: "+chartData[j][i]);
                // 		lc_data[i][j] = chartData[j][i];
                // 	}	
                // }
                for (var i = 0; i < data.length - 1; i++) {
                    for (var j = 0; j < i; j++) {
                        const tmp = data[i][j];
                        data[i][j] = data[j][i];
                        data[j][i] = tmp;
                    }
                }
                //console.log('labels: ' + lc_label);
                //console.log('data: ' + data[1]);
                const background_color = [
                    'rgb(255, 99, 132)',
                    'rgb(54, 162, 235)',
                    'rgb(255, 205, 86)',
                    '#003f5c',
                    '58508d',
                    '#2f4b7c',
                    '#665191',
                    '#a05195',
                    '#d45087',
                    '#f95d6a',
                    '#ff7c43',
                    '#ffa600',
                ];
                var datasets_array = []
                for (var j = 0; j < dataset_labels_count; j++) {
                    datasets_array.push({
                        label: lc_label[j],
                        data: data[j],
                        borderColor: background_color[j]
                    });
                }
                var barChartData = {
                    labels: labels,
                    datasets: datasets_array
                };
            }
            if (chartType == 'line') {
                var ctx1 = document.getElementById("chart3").getContext("2d");
                chart = new Chart(ctx1, {
                    type: chartType,
                    data: barChartData,
                    options: {
                        title: {
                            display: true,
                            text: header,
                        },
                        tooltip: {
                            callbacks: {
                                label: function(context) {
                                    var label = context.dataset.label || '';
                                    if (label) {
                                        label += ': ';
                                    }
                                    if (context.parsed.y !== null) {
                                        label += new Intl.NumberFormat('en-US', {
                                            style: 'percent',
                                            currency: 'USD'
                                        }).format(context.parsed.y);
                                    }
                                    return label;
                                }
                            },
                            enabled: true,
                            mode: 'index',
                            position: 'nearest',
                            custom: customTooltips
                        },
                        legend: {
                            display: true,
                            position: 'bottom',
                        },
                        scales: {
                            yAxes: [{
                                ticks: {
                                    precision: 0,
                                    // Include a dollar sign in the ticks
                                    callback: function(value, index, values) {
                                        return value + '';
                                    }
                                }
                            }]
                        }
                    }
                });
            } else {
                var ctx1 = document.getElementById("chart3").getContext("2d");
                chart = new Chart(ctx1, {
                    type: chartType,
                    data: barChartData,
                    options: {
                        title: {
                            display: true,
                            text: header,
                        },
                        tooltip: {
                            callbacks: {
                                label: function(context) {
                                    var label = context.dataset.label || '';
                                    if (label) {
                                        label += ': ';
                                    }
                                    if (context.parsed.y !== null) {
                                        label += new Intl.NumberFormat('en-US', {
                                            style: 'percent',
                                            currency: 'USD'
                                        }).format(context.parsed.y);
                                    }
                                    return label;
                                }
                            },
                            enabled: true,
                            mode: 'index',
                            position: 'nearest',
                            custom: customTooltips
                        },
                        legend: {
                            display: true,
                            position: 'bottom',
                        },
                        scales: {
                            yAxes: [{
                                ticks: {
                                    precision: 0,
                                    // Include a dollar sign in the ticks
                                    callback: function(value, index, values) {
                                        return value + '%';
                                    }
                                }
                            }]
                        }
                    }
                });
            }
        } catch (e) {
            console.log(e);
        }
        // chart.destroy();
    }
</script>