<?php include('techsyn_header.php');
?>


<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;
    }


    .header {
        /* text-align: center; */
        font-weight: 600;
        margin-bottom: 20px;
        padding-top: 1rem;
        padding-left: 3rem;
        color: #448ab3;
    }

    .header-title {
        font-size: 18px;
        margin-bottom: 5px;
    }

    .header-subtitle {
        font-size: 16px;
        margin-bottom: 20px;
    }

    .box-report {
        box-shadow: 10px 14px 8px rgba(0, 0, 0, 0.25);
    }


    .container {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
    }

    .spirometry-table,
    .abnormal-table,
    #ppbs-table,
    #audio-table,
    #bpTable {
        border-collapse: collapse;
        text-align: center;

    }

    .spirometry-table th,
    .spirometry-table td,
    .abnormal-table th,
    .abnormal-table td {
        border: 1px solid black;
        padding: 10px;
    }

    .spirometry-table th,
    .abnormal-table th,
    th {
        background-color: #d3d3d3;
    }

    .spirometry-header,
    .abnormal-header {
        background-color: #8b8b8b;
        font-weight: bold;
        text-align: center;
    }

    .mild,
    #ppbs-mild-label,
    #audio-mild-label {
        background-color: #ffd700;
    }

    .moderate,
    #ppbs-moderate-label,
    #audio-moderate-label {
        background-color: #b0c4de;
    }

    .severe,
    #ppbs-severe-label,
    #audio-severe-label {
        background-color: #ff6347;
        color: white;
    }

    .normal,
    #ppbs-normal-label,
    #audio-normal-label {
        background-color: #98fb98;
    }

    .total {
        background-color: #b0c4de;
        font-weight: bold;
    }

    .restrictive,
    .obstructive {

        font-weight: bold;
    }
</style>



<?php if ($_SESSION['RoleId'] == 7) {
    echo "<script>window.location.replace('emp_details.php')</script>";
} ?>
<script src="js/Chart.min.js"></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');

    $total_item = NearExpryItemsCount();
    $total_item_amb = NearExpryItemsCountForAmbulance();
    ?>



    <!--breadcrumb-->

    <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="content">
                <!-- Start new dashboard view -->
                <div class="container-fluid">

                    <form id="doctor_form">
                        <div class="row" style="margin-top: 10px;">



                            <div class="col-12 col-sm-6 col-md-3">
                                <div class="info-box choice" data-toggle="wizard-radio" rel="tooltip" title="OPDs"
                                    data-original-title="OPDs">
                                    <span class="info-box-icon bg-aqua "><input type="radio" name="task"
                                            class="hidden-radio" value="opd"><i class="fa fa-user-md"></i></span>
                                    <!-- <div class="icon bg-aqua">
                                    <i class="ace-icon fa fa-user-md"></i>
                                </div> -->
                                    <div class="info-box-content"><br>
                                        <span class="info-box-text">Pending OPD</span>
                                        <span class="info-box-number">
                                            <?php echo getTodayOpdPendingCosultationCount() ?>
                                            <?php //echo getTodayOpdCount()   
                                            ?><small>
                                                Cases </small>
                                        </span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-12 col-sm-6 col-md-3">
                                <div class="info-box choice" data-toggle="wizard-radio" rel="tooltip" title="OPDs"
                                    data-original-title="OPDs">
                                    <span class="info-box-icon bg-aqua "><input type="radio" name="task"
                                            class="hidden-radio" value="opd-total"><i class="fa fa-user-md"></i></span>
                                    <!-- <div class="icon bg-aqua">
                                    <i class="ace-icon fa fa-user-md"></i>
                                </div> -->
                                    <div class="info-box-content"><br>
                                        <span class="info-box-text">Total OPD</span>
                                        <span class="info-box-number">
                                            <?php //echo getTodayOpdPendingCosultationCount()   
                                            ?>
                                            <?php echo getTodayOpdCount() ?><small>
                                                Cases </small>
                                        </span>
                                    </div>
                                </div>
                            </div>

                            <div class="col-12 col-sm-6 col-md-3">
                                <div class="info-box choice" data-toggle="wizard-radio" rel="tooltip" title=""
                                    data-original-title="Injury">
                                    <span class="info-box-icon bg-red "><input type="radio" name="task"
                                            class="hidden-radio" value="injury"><i class="fa fa-heartbeat"></i></span>
                                    <!-- <div class="icon bg-red">
                                    <span class="bg-red"><i class="ace-icon fa fa-heartbeat"></i></span>
                                </div> -->
                                    <div class="info-box-content"><br>
                                        <span class="info-box-text">Pending Injury - Accident On Duty</span>
                                        <span class="info-box-number">
                                            <?php echo getTodayInjuryPendingCosultationCount(); ?>
                                            <?php //echo getTodayInjuryCount();   
                                            ?>
                                            <small> Cases</small>
                                        </span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-12 col-sm-6 col-md-3">
                                <div class="info-box choice" data-toggle="wizard-radio" rel="tooltip" title=""
                                    data-original-title="Injury">
                                    <span class="info-box-icon bg-red "><input type="radio" name="task"
                                            class="hidden-radio" value="injury-total"><i class="fa fa-heartbeat"></i></span>
                                    <!-- <div class="icon bg-red">
                                    <span class="bg-red"><i class="ace-icon fa fa-heartbeat"></i></span>
                                </div> -->
                                    <div class="info-box-content"><br>
                                        <span class="info-box-text">Total Injury - Accident On Duty</span>
                                        <span class="info-box-number">
                                            <?php //echo getTodayInjuryPendingCosultationCount();   
                                            ?>
                                            <?php echo getTodayInjuryCount(); ?>
                                            <small> Cases</small>
                                        </span>
                                    </div>
                                </div>
                            </div>

                            <!-- /.row -->

                            <!-- <div class="col-12 col-sm-6 col-md-3">
                                <div class="info-box mb-3 choice">
                                    <span class="info-box-icon bg-aqua ">
                                        <input type="radio" name="task" class="hidden-radio" value="ffi">
                                        <i class="fa fa-cutlery"></i>
                                    </span>

                                    <div class="info-box-content">
                                        <br> <span class="info-box-text"> Food Handler </span> <span class="info-box-number">
                                            <?php //echo getPending_infection();   
                                            ?>/
                                            <?php //echo getTodayapproval('ffi');   
                                            ?>
                                            <small>Cases</small>
                                        </span>
                                    </div>

                                    
                                </div>
                                
                            </div> -->
                            <!-- <div class="col-12 col-sm-6 col-md-3">
                                <div class="info-box mb-3 choice">
                                    <span class="info-box-icon bg-aqua ">
                                        <input type="radio" name="task" class="hidden-radio" value="chs">
                                        <i class="fa fa-cutlery"></i>
                                    </span>

                                    <div class="info-box-content">
                                        <br> <span class="info-box-text"> Canteen Hygiene </span> <span class="info-box-number">
                                            <?php //echo getPending_canteen();   
                                            ?>/
                                            <?php //echo getTodayapproval('chs');   
                                            ?>
                                            <small>Cases</small>
                                        </span>
                                    </div>

                                    
                                </div>
                            
                            </div>
                            <div class="col-12 col-sm-6 col-md-3">
                                <div class="info-box mb-3 choice">
                                    <span class="info-box-icon bg-yellow">
                                        <input type="radio" name="task" class="hidden-radio" value="khs">
                                        <i class="fa fa-cutlery"></i>
                                    </span>

                                    <div class="info-box-content">
                                        <br> <span class="info-box-text"> Kitchen Hygiene </span> <span class="info-box-number">
                                            <?php //echo getPending_kitchen();   
                                            ?>/
                                            <?php //echo getTodayapproval('khs');   
                                            ?>
                                            <small>Cases</small>
                                        </span>
                                    </div>

                                   
                                </div>
                                
                            </div> -->

                            <div class="col-12 col-sm-6 col-md-3">
                                <div class="info-box choice" data-toggle="wizard-radio" rel="tooltip" title=""
                                    data-original-title="This is good if you travel alone.">
                                    <span class="info-box-icon bg-green "><input type="radio" name="task"
                                            class="hidden-radio" value="sickness"><i class="fa fa-bed"></i></span>
                                    <!-- <div class="icon bg-green">
                                    <i class="ace-icon fa fa-bed"></i>
                                </div> -->
                                    <div class="info-box-content"><br>
                                        <span class="info-box-text">Fitness</span>
                                        <span class="info-box-number">
                                            <?php echo getTodaySicknessCountByMedical(); ?>/
                                            <?php echo getTodaySicknessCount(); ?>
                                            <small>Cases</small>
                                        </span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-12 col-sm-6 col-md-3">
                                <div class="info-box mb-3 choice" onclick="location.href=register_user_list.php">
                                    <span class="info-box-icon bg-aqua "><input type="radio" name="task"
                                            class="hidden-radio" value="pme"
                                            onclick="location.href=register_user_list.php"><i
                                            class="fa fa-stethoscope"></i></span>

                                    <div class="info-box-content">
                                        <br> <span class="info-box-text"> Health Surveillance </span> <span
                                            class="info-box-number">
                                            <?= getPending_doctor_HealthSurvellianceCount(); ?>/
                                            <?= getTodayHealthSurvellianceCount();
                                            +getHealthSurvellianceCount(); ?>
                                            <small>Cases</small>
                                        </span>
                                    </div>
                                    <!-- /.info-box-content -->
                                </div>
                                <!-- /.info-box -->
                            </div>

                            <div class="col-12 col-sm-6 col-md-3">
                                <div class="info-box mb-3 choice">
                                    <span class="info-box-icon bg-red">
                                        <input type="radio" name="task" class="hidden-radio" value="indent">
                                        <i class="fa fa-shopping-cart"></i>
                                    </span>

                                    <div class="info-box-content">
                                        <br> <span class="info-box-text"> Indent </span> <span class="info-box-number">
                                            <?php echo getPending_indent(); ?>/
                                            <?php echo getTodayapproval_indent(); ?>
                                            <small>Items</small>
                                        </span>
                                    </div>

                                    <!-- /.info-box-content -->
                                </div>
                                <!-- /.info-box -->
                            </div>
                            <div class="col-12 col-sm-6 col-md-3">
                                <div class="info-box mb-3 choice">
                                    <span class="info-box-icon bg-yellow">
                                        <input type="radio" name="task" class="hidden-radio" value="appointment">
                                        <i class="	fa fa-calendar-o"></i>
                                    </span>

                                    <div class="info-box-content">
                                        <br> <span class="info-box-text"> Appointments </span> <span
                                            class="info-box-number">
                                            <?php echo getTodayappointment_details_pending_Count(); ?>/
                                            <?php echo getTodayappointment_detailsCount(); ?>
                                            <small>Appointments</small>
                                        </span>
                                    </div>



                                    <!-- /.info-box-content -->
                                </div>
                                <!-- /.info-box -->
                            </div>

                            <div class="col-12 col-sm-6 col-md-3">
                                <div class="info-box choice" data-toggle="wizard-radio" rel="tooltip" title="OPDs" data-original-title="OPDs">
                                    <!-- <input type="radio" name="task" value="visitor_opd"> -->
                                    <span class="info-box-icon bg-green "><input type="radio" name="task" class="hidden-radio" value="p"><i class="ace-icon fa fa-plus-square"></i></span>

                                    <div class="info-box-content"><br>
                                        <span class="info-box-text">Pending Purchase Items</span>
                                        <span class="info-box-number">
                                            <?php echo  PendingPurchaseItems() ?>
                                            <small>Items</small>
                                        </span>
                                    </div>
                                    <!-- /.info-box-content -->
                                </div>
                                <!-- /.info-box -->
                            </div>
                            <!-- /.col -->
                            <div class="col-12 col-sm-6 col-md-3">
                                <div class="info-box choice mb-3">
                                    <span class="info-box-icon bg-green "><input type="radio" name="task" class="hidden-radio" value="itemStock"><i class="ace-icon fa fa-plus-square"></i></span>

                                    <div class="info-box-content"><br>
                                        <span class="info-box-text">Items Stock</span>
                                        <span class="info-box-number"><?php echo getTotalStockCount() ?>
                                            <small>Items</small>
                                        </span>
                                    </div>
                                    <!-- /.info-box-content -->
                                </div>
                                <!-- /.info-box -->
                            </div>
                            <!-- /.col -->

                            <!-- /.col -->
                            <div class="col-12 col-sm-6 col-md-3">
                                <div class="info-box choice mb-3">
                                    <span class="info-box-icon bg-green "><input type="radio" name="task" class="hidden-radio" value="ambItemStock"><i class="ace-icon fa fa-plus-square"></i></span>

                                    <div class="info-box-content"><br>
                                        <span class="info-box-text">Ambulance Item Stock</span>
                                        <span class="info-box-number"><?php echo getTotalStockCountAmbulance() ?>
                                            <small>Items</small>
                                        </span>
                                    </div>
                                    <!-- /.info-box-content -->
                                </div>
                                <!-- /.info-box -->
                            </div>
                            <!-- /.col -->

                            <!-- fix for small devices only -->
                            <!-- <div class="clearfix hidden-md-up"></div> -->

                            <div class="col-12 col-sm-6 col-md-3">
                                <div class="info-box choice mb-3">
                                    <span class="info-box-icon bg-green "><input type="radio" name="task" class="hidden-radio" value="Code"><i class="ace-icon fa  fa-opencart"></i></span>

                                    <div class="info-box-content"><br>
                                        <span class="info-box-text">Items Inward In Stock</span> <span class="info-box-number"><?php echo getTodayProcurementCount() ?>
                                            <small>Items</small></span>
                                        </span>
                                    </div>
                                    <!-- /.info-box-content -->
                                </div>
                                <!-- /.info-box -->
                            </div>
                            <div class="col-12 col-sm-6 col-md-3">
                                <div class="info-box mb-3 choice">
                                    <span class="info-box-icon bg-red"><input type="radio" name="task" class="hidden-radio" value="stock"><i class="fa fa-clock-o"></i></span>

                                    <div class="info-box-content"><br>
                                        <span class="info-box-text">Issued Items From Stock</span>
                                        <span class="info-box-number"><?php echo getTodayIssueCount() ?>
                                            <small>Items</small></span>
                                    </div>
                                    <!-- /.info-box-content -->
                                </div>
                                <!-- /.info-box -->
                            </div>


                            <div class="col-12 col-sm-6 col-md-3">
                                <div class="info-box mb-3 choice">
                                    <span class="info-box-icon bg-red"><input type="radio" name="task" class="hidden-radio" value="exp"><i class="fa fa-clock-o"></i></span>

                                    <div class="info-box-content"><br>
                                        <span class="info-box-text">Near Expiring Medicine</span>
                                        <span class="info-box-number"><?php echo $total_item ?>
                                            <small>Items</small></span>
                                    </div>
                                    <!-- /.info-box-content -->
                                </div>
                                <!-- /.info-box -->
                            </div>
                            <div class="col-12 col-sm-6 col-md-3">
                                <div class="info-box mb-3 choice">
                                    <span class="info-box-icon bg-red"><input type="radio" name="task" class="hidden-radio" value="ambExp"><i class="fa fa-clock-o"></i></span>

                                    <div class="info-box-content"><br>
                                        <span class="info-box-text">Ambulance Near Expiring Medicine</span>
                                        <span class="info-box-number"><?php echo $total_item_amb ?>
                                            <small>Items</small></span>
                                    </div>
                                    <!-- /.info-box-content -->
                                </div>
                                <!-- /.info-box -->
                            </div>


                            <div class="col-12 col-sm-6 col-md-3">
                                <div class="info-box mb-3 choice">
                                    <span class="info-box-icon bg-red"><input type="radio" name="task" class="hidden-radio" value="expiry"><i class="fa fa-clock-o"></i></span>

                                    <div class="info-box-content"><br>
                                        <span class="info-box-text">Expiry Items</span>
                                        <span class="info-box-number"><?php echo getExpiredMedCount() ?>
                                            <small>Items</small></span>
                                    </div>
                                    <!-- /.info-box-content -->
                                </div>
                                <!-- /.info-box -->
                            </div>
                            <!-- /.col -->
                            <div class="col-12 col-sm-6 col-md-3">
                                <div class="info-box mb-3 choice">
                                    <span class="info-box-icon bg-red"><input type="radio" name="task" class="hidden-radio" value="ambExpiry"><i class="fa fa-clock-o"></i></span>

                                    <div class="info-box-content"><br>
                                        <span class="info-box-text">Ambulance Expiry Items</span>
                                        <span class="info-box-number"><?php echo getExpiredMedCount() ?>
                                            <small>Items</small></span>
                                    </div>
                                    <!-- /.info-box-content -->
                                </div>
                                <!-- /.info-box -->
                            </div>


                            <div class="col-12 col-sm-6 col-md-3">
                                <div class="info-box mb-3 choice">
                                    <span class="info-box-icon bg-red"><input type="radio" name="task" class="hidden-radio" value="indent"><i class="fa fa-shopping-cart"></i></span>

                                    <div class="info-box-content"><br>
                                        <span class="info-box-text">Indents</span>
                                        <span class="info-box-number"><?php echo getIndentCount() ?>
                                            <small>Items</small></span>
                                    </div>
                                    <!-- /.info-box-content -->
                                </div>
                                <!-- /.info-box -->
                            </div>

                            <div class="col-12 col-sm-6 col-md-3">
                                <div class="info-box mb-3 choice">
                                    <span class="info-box-icon bg-red"><input type="radio" name="task"
                                            class="hidden-radio" value="shift"><i class="fa fa-clock-o"></i></span>

                                    <div class="info-box-content"><br>
                                        <span class="info-box-text">Staff Handover Notes</span>
                                        <span class="info-box-number"> <small>Current Shift :
                                                <?php echo getCurrentShift() ?></small></span>
                                    </div>
                                    <!-- /.info-box-content -->
                                </div>
                                <!-- /.info-box -->
                            </div>
                            <div class="col-12 col-sm-6 col-md-3">
                                <div class="info-box mb-3 choice">
                                    <span class="info-box-icon bg-red"><input type="radio" name="task"
                                            class="hidden-radio" value="mockdrill"><i class="fa fa-clock-o"></i></span>

                                    <div class="info-box-content"><br>
                                        <span class="info-box-text">Mockdrill</span>
                                        <span class="info-box-number"> <small>Count : <?php echo getMockDrillCount() ?></small></span>
                                    </div>
                                    <!-- /.info-box-content -->
                                </div>
                                <!-- /.info-box -->
                            </div>
                            <!-- <div class="col-12 col-sm-6 col-md-3">
                                <div class="info-box mb-3 choice">
                                    <span class="info-box-icon bg-red">
                                        <input type="radio" name="task" class="hidden-radio" value="checklist">
                                        <i class="fa fa-shopping-cart"></i>
                                    </span>

                                    <div class="info-box-content">
                                        <br> <span class="info-box-text">Checklist </span> <span class="info-box-number">
                                            <?php //echo getPending_inventory_checklist_status();   
                                            ?>/
                                            <?php //echo getTodayapproval_inventory_checklist_status();   
                                            ?>
                                            <small>Cases</small>
                                        </span>
                                    </div>

                                  
                                </div>
                                
                            </div> -->

                            <!-- <div class="col-12 col-sm-6 col-md-3" style="margin-left: -10px">
                                <div class="info-box mb-3 choice">
                                    <span class="info-box-icon bg-green ">
                                        <input type="radio" name="task" class="hidden-radio" value="dlf">
                                        <i class="fa fa-car"></i>
                                    </span>

                                    <div class="info-box-content">
                                        <br> <span class="info-box-text"> DLME
                                        </span> <span class="info-box-number">
                                            <?php //echo getPending_dlf();   
                                            ?>/
                                            <?php //echo getTodayapproval('dlf');   
                                            ?>
                                            <small>Cases</small>
                                        </span>
                                    </div>

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



                </div>
                <!-- Charts start here  -->

                <div class="row">
                    <!-- OSI Weekly Report Card -->
                    <div class="col-md-6">
                        <div class="card">
                            <div class="card-body">
                                <div>
                                    <h3 id="chartHeader" style="cursor: pointer; text-align: center;">OSI Weekly Report
                                    </h3>
                                    <div id="osiLoadingIcon" style="display: none;">
                                        <img src="assets\images\loading-spinner.gif" alt="Loading..." />
                                    </div>
                                    <canvas id="appointmentChart" style="display: none;"></canvas>
                                </div>
                            </div>
                        </div>
                    </div>


                    <!-- Injury Weekly Report Card -->
                    <div class="col-md-6">
                        <div class="card">
                            <div class="card-body">
                                <div>
                                    <h3 id="injuryReportHeader" style="cursor: pointer;text-align: center;">Injury
                                        Weekly Report</h3>
                                    <div id="injuryLoadingIcon" style="display: none;">
                                        <img src="assets\images\loading-spinner.gif" alt="Loading..." />
                                    </div>
                                    <canvas id="injuryClassChart" style="display: none;"></canvas>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <br>

                <?php include('health_index_charts.php'); ?>

                <br>
                <div class="row">

                    <div class="col-sm-11 wizard-card" style="margin: 20px 17px 0px 13px; padding:20px 0 20px 25px;">
                        <div class="box  box-success ">
                            <div class="box-header box-header-flat">
                                <h5 class="box-title lighter">
                                    <a role="button" data-toggle="collapse" href="#collapse_check" aria-expanded="false"
                                        aria-controls="collapseOne" id="ali">
                                        Next One Calibration - ( Total :<?php
                                                                        $c  = $_SESSION['current_ohcttype'];
                                                                        $sql_reorder_items = "SELECT item_id,b.item_name, qty from calibration_item_tbl a left join tbl_items b on b.item_id=a.cat_id where a.next_cali BETWEEN now() and NOW() + INTERVAL 30 day order by b.item_name ";

                                                                        error_log('query: 262626262 ' . $sql_reorder_items);
                                                                        $results_reorder_items = mysqli_query($conn, $sql_reorder_items);
                                                                        // $total = mysqli_fetch_assoc($results_reorder_items);
                                                                        $total = mysqli_num_rows($results_reorder_items);
                                                                        echo $total; ?> Pending : <?php
                                                                                                    $c  = $_SESSION['current_ohcttype'];
                                                                                                    $sql_reorder_pending = "SELECT a.status from calibration_item_tbl a left join tbl_items b on b.item_id=a.cat_id";
                                                                                                    error_log('query: 2611 ' . $sql_reorder_pending);
                                                                                                    $results_reorder_pending = mysqli_query($conn, $sql_reorder_pending);
                                                                                                    // $total = mysqli_fetch_assoc($results_reorder_pending);
                                                                                                    $approved = 0;
                                                                                                    $pending = 0;
                                                                                                    while ($countFetch = mysqli_fetch_assoc($results_reorder_pending)) {
                                                                                                        if ($countFetch['status'] == 'P') {
                                                                                                            $pending += 1;
                                                                                                        } else {
                                                                                                            $approved += 1;
                                                                                                        }
                                                                                                    }
                                                                                                    //    echo $pendingtotal = mysqli_num_rows($results_reorder_pending);
                                                                                                    echo $approved . " / " . $pending;
                                                                                                    ?>)
                                    </a>

                                </h5>


                            </div>
                            <div id="collapse_check" class="panel-collapse collapse">
                                <div id="collapse_check">
                                    <table width="100%" class="table table-bordered table-hover">
                                        <thead class="thin-border-bottom">
                                            <tr>
                                                <th style="background-color:white; color:black"><i
                                                        class="ace-icon fa fa-caret-right blue"></i>Item</th>

                                                <th style="background-color:white; color:black"><i
                                                        class="ace-icon fa fa-caret-right blue"></i>Available
                                                    Qty</th>
                                                <th style="background-color:white; color:black"><i
                                                        class="ace-icon fa fa-caret-right blue"></i>Min. Qty
                                                </th>
                                                <th style="background-color:white; color:black"><i
                                                        class="ace-icon fa fa-caret-right blue"></i>Next Calibration
                                                    Date
                                                </th>


                                            </tr>
                                        </thead>

                                        <tbody id="loaddata">

                                        </tbody>
                                    </table>
                                    <!-- /.box-main -->
                                </div>



                                <script>
                                    $(document).ready(function() {

                                        var limit = 5;
                                        if (limit == 5) {
                                            $("#load").attr('value', 'Show Data');
                                        }
                                    });
                                </script>
                                <center>
                                    <input name="load" id="load" class="form-control btn btn-primary" style="width: 90%;" type="submit"
                                        value="Load More" onClick="loadmore()">
                                </center>
                                <script>
                                    var limit = 0;
                                    var starting = 0;
                                    // var limit = 5;
                                    // // $("#load").inner('Loading.....');
                                    // const myTimeout = setTimeout(loadmore, 2000);
                                    function loadmore() {
                                        // limit = 0;
                                        // var starting = 0;
                                        $("#load").attr('value', 'Loading.....');
                                        // starting= 0;

                                        limit += 10;
                                        starting = limit - 10;
                                        console.log(starting);
                                        console.log("starting " + starting);
                                        $.ajax({
                                            url: 'callibration_list_table.php',
                                            data: {
                                                limit: limit,
                                                start: starting
                                            },
                                            success: function(data) {
                                                if (data == 0) {
                                                    console.log("btn");
                                                    $("#load").attr('value', 'Data Over');
                                                } else {
                                                    var d = JSON.parse(data);
                                                    var html = '';

                                                    jQuery.each(d, function(index, item) {
                                                        console.log(item.item_id);
                                                        var status = "";
                                                        if (item.status == 'P') {
                                                            status = "PENDING";
                                                        } else {
                                                            status = "APPROVED";
                                                        }
                                                        html += '<tr><td style="color:#FF4233">' + item
                                                            .item_name +
                                                            '</td><td style="color:#FF4233">' +
                                                            item.stock_qty +
                                                            '</td><td style="color:#FF4233">' + item
                                                            .reorder_dispensary_level + '</td>' +
                                                            '</td><tr>';
                                                    });
                                                    $("#loaddata").append(html);
                                                }
                                            }
                                        });
                                        // $("#load").inner('LOAD MORE');
                                        $("#load").attr('value', 'LOAD MORE');

                                    }
                                </script>
                                <!-- /.box-body -->
                            </div>
                        </div>
                    </div>


                </div>



                <div class="box-report" style="background-color: white;margin-top: 2rem;">
                    <div class="header" id="analysisHeader" style="cursor: pointer;">
                        <div class="header-subtitle">Abnormal Spirometry reports Analysis
                        </div>
                    </div>

                    <div id="contentContainer" class="container" style="display:none;">
                        <div id="annualLoadingIcon" style="display: none;">
                            <img src="assets/images/loading-spinner.gif" alt="Loading..." />
                        </div>
                        <!-- Spirometry Severity Classification Table -->
                        <table class="spirometry-table">
                            <tr>
                                <th colspan="3" class="spirometry-header">Spirometry Severity Classification</th>
                            </tr>
                            <tr>
                                <th>Classification</th>
                                <th>FVC<br>(Restrictive)</th>
                                <th>FEV1/FVC<br>(Obstructive)</th>
                            </tr>
                            <tr>
                                <td class="mild">Mild</td>
                                <td class="restrictive">70-80</td>
                                <td class="obstructive">70-80</td>
                            </tr>
                            <tr>
                                <td class="moderate">Moderate</td>
                                <td class="restrictive">65-70</td>
                                <td class="obstructive">65-70</td>
                            </tr>
                            <tr>
                                <td class="severe">Severe</td>
                                <td class="restrictive">&lt;65</td>
                                <td class="obstructive">&lt;65</td>
                            </tr>
                        </table>

                        <!-- Abnormal Spirometry Reports Table -->
                        <table class="abnormal-table">
                            <tr>
                                <th colspan="5" class="abnormal-header">Abnormal Spirometry Reports</th>
                            </tr>
                            <tr>
                                <th>Classification</th>
                                <th>Restrictive</th>
                                <th>Obstructive</th>
                                <th>Total Abnormal</th>
                                <th>Grand Total</th>
                            </tr>
                            <tr>
                                <td class="mild">Mild</td>
                                <td id="fvc-mild">0</td>
                                <td id="fev1-mild">0</td>
                                <td id="total-mild">0</td>
                                <td rowspan="3" id="grand-total">0</td>
                            </tr>
                            <tr>
                                <td class="moderate">Moderate</td>
                                <td id="fvc-moderate">0</td>
                                <td id="fev1-moderate">0</td>
                                <td id="total-moderate">0</td>
                            </tr>
                            <tr>
                                <td class="severe">Severe</td>
                                <td id="fvc-severe">0</td>
                                <td id="fev1-severe">0</td>
                                <td id="total-severe">0</td>
                            </tr>
                            <tr>
                                <td class="normal">Normal</td>
                                <td colspan="4" id="total-normal">0</td>
                            </tr>
                            <tr>
                                <td class="total">Total</td>
                                <td colspan="4" class="total" id="total-count">0</td>
                            </tr>
                        </table>
                    </div>

                    <!-- Abnormal Spirometry Graphs -->
                    <div id="graphContainer" style="display:none;">
                        <div style="display: flex; justify-content: space-around; margin-top: 2rem;">
                            <div style="width: 500px; height: 250px;">
                                <canvas id="abnormalSpirometryChart"></canvas>
                            </div>
                            <div style="width: 500px; height: 250px;">
                                <canvas id="departmentChart" width="400" height="200"></canvas>
                            </div>
                        </div>
                        <div style="width: 500px; height: 250px; margin: 3rem 4rem;">
                            <canvas id="departmentAbnormalityChart"></canvas>
                        </div>
                    </div>
                </div>

                <!-- Abnormal Audiometry -->
                <div class="box-report" style="background-color: white;margin-top: 2rem;">
                    <div class="header" id="abnormalHeader" style="cursor: pointer;">
                        <div class="header-subtitle">Abnormal Audiometry</div>
                    </div>
                    <div id="abnormalContainer" class="container" style="display: none;">
                        <div id="abnormalLoadingIcon" style="display: none;">
                            <img src="assets/images/loading-spinner.gif" alt="Loading..." />
                        </div>
                        <div class="container">
                            <table id="audio-table">
                                <tr>
                                    <th>Severity Classification</th>
                                    <th>Numbers</th>
                                    <th>Total Abnormal</th>
                                </tr>
                                <tr>
                                    <td class="audio-severity" id="audio-mild-label">Mild</td>
                                    <td class="audio-numbers" id="audio-mild-count">0</td>
                                    <td rowspan="3" class="audio-total-abnormal" id="audio-total-abnormal">0</td>
                                </tr>
                                <tr>
                                    <td class="audio-severity" id="audio-moderate-label">Moderate</td>
                                    <td class="audio-numbers" id="audio-moderate-count">0</td>
                                </tr>
                                <tr>
                                    <td class="audio-severity" id="audio-severe-label">Severe</td>
                                    <td class="audio-numbers" id="audio-severe-count">0</td>
                                </tr>
                                <tr>
                                    <td class="audio-normal-label" id="audio-normal-label">Normal</td>
                                    <td colspan="2" class="audio-normal-count" id="audio-normal-count">0</td>
                                </tr>
                                <tr>
                                    <td class="audio-grand-total-label" id="audio-grand-total-label">Grand Total</td>
                                    <td colspan="2" class="audio-grand-total" id="audio-grand-total">0</td>
                                </tr>
                            </table>
                        </div>
                    </div>
                    <div id="abnormalgraphContainer" style="display:none;">
                        <div style="display: flex; justify-content: space-around; margin-top: 2rem;">
                            <div style=" width: 400px; height: 250px;">
                                <canvas id="audio-severity-chart"></canvas>
                            </div>
                            <div style="width: 500px; height: 250px;">
                                <canvas id="audiodepartmentChart" width="400" height="200"></canvas>
                            </div>
                        </div>
                        <div style="width: 500px; height: 250px;margin: 1rem;">
                            <canvas id="departmentaudioAbnormalityChart" width="400" height="200"></canvas>
                        </div>
                    </div>
                </div>


                <!-- 
                Abnormal Blood Sugar Level report -->
                <div class=" box-report" style="background-color: white;">
                    <div class="header" id="ppbs-header" style="cursor: pointer;">
                        <div class="header-subtitle">Abnormal Blood Sugar Level report</div>
                    </div>
                    <div id="ppbs-content" style="display: none; ">
                        <div id="ppbsLoadingIcon" style="display: none;">
                            <img src="assets/images/loading-spinner.gif" alt="Loading..." />
                        </div>
                        <div class="container">
                            <table id="ppbs-table">
                                <tr>
                                    <th>Severity Classification</th>
                                    <th>Numbers</th>
                                    <th>Total Abnormal</th>
                                </tr>
                                <tr>
                                    <td class="ppbs-severity" id="ppbs-mild-label">Mild (200mgdl - 250mgdl)</td>
                                    <td class="ppbs-numbers" id="ppbs-mild-count">0</td>
                                    <td rowspan="3" class="ppbs-total-abnormal" id="ppbs-total-abnormal">0</td>
                                </tr>
                                <tr>
                                    <td class="ppbs-severity" id="ppbs-moderate-label">Moderate (251mgdl - 300mgdl)</td>
                                    <td class="ppbs-numbers" id="ppbs-moderate-count">0</td>
                                </tr>
                                <tr>
                                    <td class="ppbs-severity" id="ppbs-severe-label">Severe (&gt;300mgdl)</td>
                                    <td class="ppbs-numbers" id="ppbs-severe-count">0</td>
                                </tr>
                                <tr>
                                    <td class="ppbs-normal-label" id="ppbs-normal-label">Normal</td>
                                    <td colspan="2" class="ppbs-normal-count" id="ppbs-normal-count">0</td>
                                </tr>
                                <tr>
                                    <td class="ppbs-grand-total-label" id="ppbs-grand-total-label">Grand Total</td>
                                    <td colspan="2" class="ppbs-grand-total" id="ppbs-grand-total">0</td>
                                </tr>
                            </table>
                        </div>
                        <div style="display: block; width: 500px; height: 250px; margin: 3rem 4rem;">
                            <canvas id="abnormalbloodsugarlevel" style="display: none;"></canvas>
                        </div>
                    </div>
                </div>


                <!-- Abnormal Blood pressure report -->
                <div class="box-report" style="background-color: white;  ">
                    <div class="header" id="bp-header" style="cursor: pointer;">
                        <div class="header-subtitle">Abnormal Blood Pressure report
                        </div>
                    </div>
                    <div id="bp-content" style="display: none; margin-top: 2rem;">
                        <div id="bpLoadingIcon" style="display: none;">
                            <img src="assets/images/loading-spinner.gif" alt="Loading..." />
                        </div>
                        <div style="display: flex; ">

                            <div class="container">
                                <table id="bpTable">
                                    <tr>
                                        <th>Blood Pressure Classification</th>
                                        <th>SBP <br> mmHg</th>
                                        <th>DBP <br> mmHg</th>
                                    </tr>
                                    <tr>
                                        <td class="bp-normal">Normal</td>
                                        <td>&lt;120</td>
                                        <td>and &lt;80</td>
                                    </tr>
                                    <tr>
                                        <td class="mild">Prehypertension</td>
                                        <td>120–139</td>
                                        <td>or 80–89</td>
                                    </tr>
                                    <tr>
                                        <td class="moderate">Stage 1 Hypertension</td>
                                        <td>140–159</td>
                                        <td>or 90–99</td>
                                    </tr>
                                    <tr>
                                        <td class="severe">Stage 2 Hypertension</td>
                                        <td>&gt;160</td>
                                        <td>or &gt;100</td>
                                    </tr>
                                </table>
                            </div>

                            <div class="container">
                                <table cellpadding="10" cellspacing="0" style="border-collapse: collapse; text-align: center; width: 60%;" id="bpTable">
                                    <tr>
                                        <td colspan="4" style="background-color: #00BFFF; font-weight: bold;">Abnormal Blood Pressure Levels</td>
                                    </tr>
                                    <tr>
                                        <td style="font-weight: bold;">Classification</td>
                                        <td style="font-weight: bold;">Numbers</td>
                                        <td style="font-weight: bold;">Total</td>
                                    </tr>
                                    <tr>
                                        <td>Prehypertension</td>
                                        <td id="prehypertension" style="background-color: yellow;">0</td>
                                        <td id="prehypertension-total" rowspan="3">0</td>
                                    </tr>
                                    <tr>
                                        <td>Hypertension - 1st stage</td>
                                        <td id="stage1" style="background-color: orange;">0</td>
                                    </tr>
                                    <tr>
                                        <td>Hypertension - 2nd stage</td>
                                        <td id="stage2" style="background-color: red;">0</td>
                                    </tr>
                                    <tr>
                                        <td>Normal</td>
                                        <td id="bpnormal" colspan="2" style="background-color: lightgreen;">0</td>
                                    </tr>
                                    <tr>
                                        <td style="font-weight: bold;">Grand Total</td>
                                        <td colspan="2" id="bp-grand-total">0</td>
                                    </tr>
                                </table>
                            </div>


                        </div>

                        <div style=" display: block; width: 500px; height: 250px;margin: 3rem 4rem;">
                            <canvas id="abnormalbloodpressurelevel"></canvas>
                        </div>

                    </div>
                </div>


                <!-- Abnormal Body Mass Index -->
                <div class="box-report" style="background-color: white;">

                    <div class="header" id="bmi-header" style="cursor: pointer;">
                        <div class="header-subtitle">Abnormal Body Mass Index Report
                        </div>
                    </div>
                    <div id="bmi-content" style="display: none; margin-top: 2rem;">
                        <div id="bmiLoadingIcon" style="display: none;">
                            <img src="assets/images/loading-spinner.gif" alt="Loading..." />
                        </div>
                        <div style="display: flex; margin-top: 2rem;">
                            <div class="container">
                                <table cellpadding="10" cellspacing="0" style="border-collapse: collapse; text-align: center; width: 30%;" id="bmiTable">
                                    <tr>
                                        <td colspan="4" style="background-color: #00BFFF; font-weight: bold;">Abnormal Body Mass</td>
                                    </tr>
                                    <tr>
                                        <td style="font-weight: bold;">Classification</td>
                                        <td style="font-weight: bold;">Numbers</td>
                                        <td style="font-weight: bold;">Total</td>
                                    </tr>
                                    <tr>
                                        <td>Underweight (Below 18.5)
                                        </td>
                                        <td id="underweight" style="background-color: yellow;">0</td>
                                        <td id="underweight-total" rowspan="3">0</td>
                                    </tr>
                                    <tr>
                                        <td>Overweight (25.0 - 29.9)
                                        </td>
                                        <td id="overweight" style="background-color: orange;">0</td>
                                    </tr>
                                    <tr>
                                        <td>Obese ( 30.0 and Above)
                                        </td>
                                        <td id="obese" style="background-color: red;">0</td>
                                    </tr>
                                    <tr>
                                        <td>Normal (18.5 – 24.9)
                                        </td>
                                        <td id="bminormal" colspan="2" style="background-color: lightgreen;">0</td>
                                    </tr>
                                    <tr>
                                        <td style="font-weight: bold;">Grand Total</td>
                                        <td colspan="2" id="bmi-grand-total">0</td>
                                    </tr>
                                </table>
                            </div>

                            <div style=" display: block; width: 500px; height: 250px;margin: 3rem 4rem;">
                                <canvas id="abnormalbmilevel"></canvas>
                            </div>
                        </div>

                        <!-- Abnormal Haemoglobin levels -->

                        <div class="header">
                            <div class="header-subtitle">Abnormal Haemoglobin levels
                            </div>
                        </div>

                        <div style="display: flex; margin-top: 2rem;">

                            <div style="margin-left: 7rem;">
                                <table cellpadding="10" cellspacing="0" style="border-collapse: collapse; text-align: center" id="bmiTable">
                                    <tr>
                                        <td colspan="4" style="background-color: #00BFFF; font-weight: bold;">Abnormal Hemoglobin levels/Anemia
                                        </td>
                                    </tr>
                                    <tr>
                                        <td style="font-weight: bold;">Classification</td>
                                        <td style="font-weight: bold;">Numbers</td>
                                        <td style="font-weight: bold;">Total</td>
                                    </tr>
                                    <tr>
                                        <td>Mild (10-10.10 g/dl)
                                        </td>
                                        <td id="hbg-mild" style="background-color: yellow;">0</td>
                                        <td id="hbg-mild-total" rowspan="3">0</td>
                                    </tr>
                                    <tr>
                                        <td>Moderate (8-9.9g/dl)
                                        </td>
                                        <td id="hbg-moderate" style="background-color: orange;">0</td>
                                    </tr>
                                    <tr>
                                        <td>Severe (8g/dl and above) </td>
                                        <td id="hbg-severe" style="background-color: red;">0</td>
                                    </tr>
                                    <tr>
                                        <td>Normal (>11g/dl)
                                        </td>
                                        <td id="hbg-normal" colspan="2" style="background-color: lightgreen;">0</td>
                                    </tr>
                                    <tr>
                                        <td style="font-weight: bold;">Grand Total</td>
                                        <td colspan="2" id="hbg-grand-total">0</td>
                                    </tr>
                                </table>
                            </div>
                            <div style=" display: block; width: 500px; height: 250px;margin: 3rem 4rem;">
                                <canvas id="abnormalhbglevel"></canvas>
                            </div>
                        </div>
                    </div>
                </div>


            </div>
            <!-- End new dashboard view -->

        </div> <!-- /.content -->
    </div> <!-- /.main-content-inner -->
</div> <!-- /.main-content -->
</div> <!-- /.main-container ace-save-state -->

<?php include('techsyn_footer.php'); ?>

<script>
    $(document).ready(function() {

        $(" .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()

            // alert(task);

            $("#doctor_form").attr('method', 'POST');
            if (task == 'opd') {

                $("#doctor_form").attr('action', 'pending_patient_list.php');

            } else if (task == 'opd-total') {

                $("#doctor_form").attr('action', 'opd_list.php');

            } else if (task == 'direct-opd') {
                $("#doctor_form").attr('action', 'add_select_patient.php');
            } else if (task == 'injury') {

                $("#doctor_form").attr('action', 'pending_injury_list.php');

            } else if (task == 'injury-total') {

                $("#doctor_form").attr('action', 'aod_list.php');

            } else if (task == 'visitor_opd') {

                $("#doctor_form").attr('action', 'visitor_details.php');

            } else if (task == 'pme') {

                $("#doctor_form").attr('action', 'medical_examination_list.php');

            } else if (task == 'sickness') {

                $("#doctor_form").attr('action', 'pending_fitness_list.php');

            } else if (task == 'ffi') {

                $("#doctor_form").attr('action', 'pending_infection_list.php');

            } else if (task == 'chs') {

                $("#doctor_form").attr('action', 'pending_chs_list.php');

            } else if (task == 'khs') {

                $("#doctor_form").attr('action', 'pending_chs_list.php');

            } else if (task == 'indent') {

                $("#doctor_form").attr('action', 'approval_indent.php');

            } else if (v.val() == 'appointment') {
                $("#doctor_form").attr('action', 'patient_appointment.php');

            } else if (task == "checklist") {

                $("#doctor_form").attr('action', 'pending_checklist.php');

            } else if (task == 'dlf') {

                $("#doctor_form").attr('action', 'pending_dlf_list.php');

            } else if (task == 'Code') {
                $("#doctor_form").attr('action', 'procurement_list.php');
            } else if (task == 'stock') {
                $("#doctor_form").attr('action', 'item_issue_list.php');
            } else if (task == 'direct') {
                $("#doctor_form").attr('action', 'direct_medicine_issue.php');
            } else if (task == 'expiry') {
                $("#doctor_form").attr('action', 'expiry_list.php');
            } else if (task == 'ambExpiry') {
                $("#doctor_form").attr('action', 'mis_expiry_list.php');
            } else if (task == 'indent') {
                $("#doctor_form").attr('action', 'indent_form.php');
            } else if (task == 'exp') {
                $("#doctor_form").attr('action', 'pending_expiry_list.php');
            } else if (task == 'ambExp') {
                $("#doctor_form").attr('action', 'pending_mis_expiry_list.php');
            } else if (task == 'itemStock') {
                $("#doctor_form").attr('action', 'stock_list.php');
            } else if (task == 'ambItemStock') {
                $("#doctor_form").attr('action', 'ambulance_stock.php');
            } else if (task == 'shift') {
                $("#doctor_form").attr('action', 'communication_details.php');
            } else if (task == 'mockdrill') {
                $("#doctor_form").attr('action', 'mockdrill.php');
            }



            $("#doctor_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) {}
        // });

    });

    //OSI weekly graph 


    function setupAppointmentChart(chartId) {
        var chartLoaded = false;
        var chartElement = document.getElementById(chartId);
        var header = document.getElementById("chartHeader");

        header.addEventListener("click", function() {
            chartElement.style.display = chartElement.style.display === 'none' ? 'block' : 'none';

            if (!chartLoaded && chartElement.style.display === 'block') {
                showLoadingIcon(true, 'osiLoadingIcon');

                $.ajax({
                    url: 'fetch_appointment_data.php',
                    type: 'GET',
                    dataType: 'json',
                    success: function(data) {
                        WeeklyOSIChart(chartId, data);
                        chartLoaded = true;
                        showLoadingIcon(false, 'osiLoadingIcon');
                    },
                    error: function(error) {
                        console.error('Error:', error);
                        showLoadingIcon(false, 'osiLoadingIcon');
                    }
                });
            }
        });
    }

    function showLoadingIcon(show, loadingIconId) {
        document.getElementById(loadingIconId).style.display = show ? 'block' : 'none';
    }

    function WeeklyOSIChart(chartId, data) {
        var dates = data.dates;
        var opdCases = data.opd_cases;
        var injuryCases = data.injury_cases;
        var sicknessCases = data.sickness_cases;

        console.log("dates:", dates);
        console.log("opdCases:", opdCases);
        console.log("injuryCases:", injuryCases);
        console.log("sicknessCases:", sicknessCases);
        var datasets = [{
                label: 'OPD Cases',
                data: opdCases,
                borderColor: 'blue',
                fill: false
            },
            {
                label: 'Injury Cases',
                data: injuryCases,
                borderColor: 'red',
                fill: false
            },
            {
                label: 'Sickness Cases',
                data: sicknessCases,
                borderColor: 'green',
                fill: false
            }
        ];

        var config = {
            type: 'line',
            data: {
                labels: dates,
                datasets: datasets
            },
            options: {
                responsive: true,
                // title: {
                //     display: true,
                //     text: 'OSI Weekly Report'
                // },
                legend: {
                    position: 'bottom'
                },
                scales: {
                    xAxes: [{
                        ticks: {
                            autoSkip: false,
                            maxRotation: 90,
                            minRotation: 30
                        }
                    }],
                    yAxes: [{
                        ticks: {
                            beginAtZero: true,
                            callback: function(value) {
                                if (value % 1 === 0) {
                                    return value;
                                }
                            }
                        }
                    }]
                }
            }

        };

        var ctx = document.getElementById(chartId).getContext('2d');
        new Chart(ctx, config);
    }

    setupAppointmentChart('appointmentChart');


    //Injury weekly graph 

    document.addEventListener('DOMContentLoaded', function() {
        var chartLoaded = false;

        document.getElementById('injuryReportHeader').addEventListener('click', function() {
            var chartElement = document.getElementById('injuryClassChart');
            chartElement.style.display = chartElement.style.display === 'none' ? 'block' : 'none';

            if (!chartLoaded && chartElement.style.display === 'block') {
                loadInjuryClassChart();
                chartLoaded = true;
            }
        });
    });

    function loadInjuryClassChart() {
        showLoadingIcon(true, 'injuryLoadingIcon');

        $.ajax({
            url: 'fetch_injury_class_data.php',
            type: 'GET',
            dataType: 'json',
            success: function(data) {
                console.log(data);
                createInjuryClassChart('injuryClassChart', data);
                showLoadingIcon(false, 'injuryLoadingIcon');
            },
            error: function(error) {
                console.error('Error:', error);
                showLoadingIcon(false, 'injuryLoadingIcon');
            }
        });
    }


    function createInjuryClassChart(chartId, graphData) {
        var ctx = document.getElementById(chartId).getContext('2d');
        var datasets = [];
        var usedColors = [];

        graphData.labels.forEach(function(label, index) {
            var key = Object.keys(graphData.data)[index];
            var data = graphData.data[key];
            var color = getRandomColor(usedColors);

            usedColors.push(color);

            datasets.push({
                label: label,
                data: data,
                borderColor: color,
                fill: false
            });
        });

        new Chart(ctx, {
            type: 'line',
            data: {
                labels: graphData.dates,
                datasets: datasets
            },
            options: {
                responsive: true,
                // title: {
                //     display: true,
                //     text: 'Injury Weekly Report'
                // },
                legend: {
                    position: 'bottom'
                },
                scales: {
                    xAxes: [{
                        ticks: {
                            autoSkip: false,
                            maxRotation: 90,
                            minRotation: 30
                        }
                    }],
                    yAxes: [{
                        ticks: {
                            beginAtZero: true,
                            callback: function(value) {
                                if (value % 1 === 0) {
                                    return value;
                                }
                            }
                        }
                    }]
                }
            }
        });
    }

    function getRandomColor(usedColors) {
        var letters = '0123456789ABCDEF';
        var color;
        var isUnique = false;

        while (!isUnique) {
            color = '#';
            for (var i = 0; i < 6; i++) {
                color += letters[Math.floor(Math.random() * 16)];
            }
            if (!usedColors.includes(color)) {
                isUnique = true;
            }
        }

        return color;
    }







    function getMedicalDate() {
        var start_date = $("#startDate").val();
        var end_date = $("#endDate").val();
        var pat_cat = $("#pat_cat").val();

        document.querySelector("#collapse_check6").innerHTML = '<canvas id="medicalExamChart"></canvas>';
        $.ajax({
            type: 'post',
            url: 'chart_medical_exam_datewise.php',
            data: {
                start_date: start_date,
                end_date: end_date,
                pat_cat: pat_cat
            },
            dataType: 'json',
            success: function(Mdata) {

                var ctx = document.getElementById('medicalExamChart').getContext('2d');
                var chartData = Mdata['checkup_data'];
                var xaxis = Mdata['medical_exam_name']

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

                const 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 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 getDatesBetween(startDate, endDate) {
        const currentDate = new Date(startDate.getTime());
        const dates = [];
        while (currentDate <= endDate) {

            let d = new Date(currentDate);
            let day = d.getDate();
            let month = d.getMonth() + 1;
            month = ("0" + month).slice(-2);
            let year = d.getFullYear();
            day = ("0" + day).slice(-2);
            dates.push(year + "-" + month + "-" + day);
            currentDate.setDate(currentDate.getDate() + 1);
        }
        return dates;
    }

    function gettrainingData() {
        training_date();
        var training_id = $("#training_id").val();

        var startDatetraining = $("#trainingDate1").val();
        var startDatetraining = startDatetraining.split("-").reverse().join("-");
        var date1 = new Date(startDatetraining);


        var endDatetraining = $("#trainingDate2").val();
        var endDatetraining = endDatetraining.split("-").reverse().join("-");
        var date2 = new Date(endDatetraining);


        let allDates = getDatesBetween(date1, date2);

        // alert(allDates);
        document.querySelector("#collapse_training").innerHTML = '<canvas id="chart_monthly_training"></canvas>';
        $.ajax({
            type: 'post',
            url: 'chart_training_datewise.php',
            data: {
                allDates: allDates,
                training_id: training_id,
            },
            dataType: 'json',
            success: function(Mdata) {
                var ctx = document.getElementById('chart_monthly_training').getContext('2d');
                var chartData = Mdata['count'];
                var xaxis = Mdata['date']


                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 gettrainingExcel() {

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


    function getInjuryExcel() {

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

    function printDashboard() {
        html2canvas(document.getElementById("dashboard"), {
            onrendered: function(canvas) {
                var img = canvas.toDataURL(); //image data of canvas
                // var doc = new jsPDF('p','pt','a2');
                var doc = new jsPDF('l', 'mm', [300, 350]);
                doc.addImage(img, 10, 10);
                doc.save('graph.pdf');
            }
        });
    }
</script>

<script>
    function prepareChart(chartType, chartData, labels, header) {

        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 + '%';
                                }
                            }
                        }]
                    }
                }
            });
        }
        // chart.destroy();
    }

    function training_date() {
        var training = $('#training_id').val();
        $.ajax({
            url: 'select_assign_training.php',
            data: {
                training: training
            },
            type: 'POST',
            dataType: 'json',
            success: function(data) {





                $("#trainingDate1").val(data.from_date);
                document.getElementById("trainingDate1").setAttribute("max", data.to_date);
                document.getElementById("trainingDate1").setAttribute("min", data.from_date);

                $("#trainingDate2").val(data.to_date);
                document.getElementById("trainingDate2").setAttribute("max", data.to_date);
                document.getElementById("trainingDate2").setAttribute("min", data.from_date);
            },
            error: function(data) {
                BootstrapDialog.alert('Error Populating Reports Details');
                return;
            }
        });


    }

    // window.onload = gettrainingData();
</script>
<!-- <script src="jspdf.min.js"></script> -->
<!-- <script src="html2canvas.min.js"></script> -->

<script>
    $(document).ready(function() {
        let isContentVisible = false;
        let spirometryChart = null;
        let departmentChart = null;
        let departmentAbnormalityChart = null;

        $('#analysisHeader').on('click', function() {
            if (isContentVisible) {
                $('#contentContainer, #graphContainer').slideUp();
                isContentVisible = false;
            } else {
                $('#annualLoadingIcon').show();
                $('#contentContainer, #graphContainer').slideDown();

                // AJAX call to fetch data
                $.ajax({
                    url: 'rule_equation_graph.php',
                    method: 'GET',
                    dataType: 'json',
                    success: function(response) {
                        $('#annualLoadingIcon').hide();
                        console.log('res:', response);
                        updateTable(response);

                        // Create or update Spirometry chart
                        if (spirometryChart) {
                            spirometryChart.destroy();
                        }
                        createSpirometryChart(response);

                        // Create or update Department chart
                        if (departmentChart) {
                            departmentChart.destroy();
                        }
                        createDepartmentChart(response);

                        // Create or update Department Abnormality chart
                        if (departmentAbnormalityChart) {
                            departmentAbnormalityChart.destroy();
                        }
                        createDepartmentAbnormalityChart(response);
                    },
                    error: function(xhr, status, error) {
                        $('#annualLoadingIcon').hide();
                        console.error('AJAX Error: ' + status + error);
                    }
                });

                isContentVisible = true;
            }
        });

        function createSpirometryChart(data) {
            const fvcData = data.FVC.abnormality_counts;
            const fev1Data = data.FEV1.abnormality_counts;

            const spirometryData = {
                labels: ['Mild', 'Moderate', 'Severe'],
                datasets: [{
                        label: 'FVC (Restrictive)',
                        data: [fvcData['Mild'], fvcData['Moderate'], fvcData['Severe']],
                        backgroundColor: '#01b4c6',
                        borderColor: '#01b4c6',
                        borderWidth: 1
                    },
                    {
                        label: 'FEV1 (Obstructive)',
                        data: [fev1Data['Mild'], fev1Data['Moderate'], fev1Data['Severe']],
                        backgroundColor: '#c4acf3',
                        borderColor: '#c4acf3',
                        borderWidth: 1
                    }
                ]
            };

            const spirometryConfig = {
                type: 'bar',
                data: spirometryData,
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        y: {
                            beginAtZero: true,
                            stacked: true,
                            ticks: {
                                stepSize: 1
                            }
                        },
                        x: {
                            stacked: true
                        }
                    },
                    plugins: {
                        legend: {
                            display: true,
                            position: 'bottom'
                        },
                        title: {
                            display: true,
                            text: 'ABNORMAL SPIROMETRY'
                        }
                    }
                }
            };

            const spirometryCtx = document.getElementById('abnormalSpirometryChart').getContext('2d');
            spirometryChart = new Chart(spirometryCtx, spirometryConfig);
        }

        function createDepartmentChart(data) {
            const departmentWiseCounts = data.department_wise_counts;
            const departments = Object.keys(departmentWiseCounts);
            const mildCounts = departments.map(dept => departmentWiseCounts[dept].Mild);
            const moderateCounts = departments.map(dept => departmentWiseCounts[dept].Moderate);
            const severeCounts = departments.map(dept => departmentWiseCounts[dept].Severe);

            const departmentData = {
                labels: departments,
                datasets: [{
                        label: 'Mild',
                        data: mildCounts,
                        backgroundColor: '#fed700',
                        borderColor: '#fed700',
                        borderWidth: 1
                    },
                    {
                        label: 'Moderate',
                        data: moderateCounts,
                        backgroundColor: 'rgba(54, 162, 235, 0.6)',
                        borderColor: 'rgba(54, 162, 235, 0.6)',
                        borderWidth: 1
                    },
                    {
                        label: 'Severe',
                        data: severeCounts,
                        backgroundColor: '#fe6347',
                        borderColor: '#fe6347',
                        borderWidth: 1
                    }
                ]
            };

            const departmentConfig = {
                type: 'bar',
                data: departmentData,
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        x: {
                            beginAtZero: true,
                            stacked: true
                        },
                        y: {
                            beginAtZero: true,
                            stacked: true,
                            ticks: {
                                stepSize: 1
                            }
                        }
                    },
                    plugins: {
                        legend: {
                            display: true,
                            position: 'bottom'
                        },
                        title: {
                            display: true,
                            text: 'DEPARTMENT WISE SEVERITY DISTRIBUTION'
                        }
                    }
                }
            };

            const departmentCtx = document.getElementById('departmentChart').getContext('2d');
            departmentChart = new Chart(departmentCtx, departmentConfig);
        }

        function createDepartmentAbnormalityChart(data) {
            const departmentCounts = data.department_wise_counts;
            const labels = Object.keys(departmentCounts);
            const abnormalData = [];
            const normalData = [];

            labels.forEach(department => {
                const abnormalityTotal = departmentCounts[department].Mild +
                    departmentCounts[department].Moderate +
                    departmentCounts[department].Severe;
                abnormalData.push(abnormalityTotal);
                normalData.push(departmentCounts[department].Normal);
            });

            const chartData = {
                labels: labels,
                datasets: [{
                        label: 'Abnormal',
                        data: abnormalData,
                        backgroundColor: '#fed700',
                        borderColor: '#fed700',
                        borderWidth: 1
                    },
                    {
                        label: 'Normal',
                        data: normalData,
                        backgroundColor: '#01b4c6',
                        borderColor: '#01b4c6',
                        borderWidth: 1
                    }
                ]
            };

            const departmentAbnormalityConfig = {
                type: 'bar',
                data: chartData,
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        y: {
                            beginAtZero: true,
                            stacked: true,
                            ticks: {
                                stepSize: 1
                            }
                        },
                        x: {
                            stacked: true
                        }
                    },
                    plugins: {
                        legend: {
                            display: true,
                            position: 'bottom'
                        },
                        title: {
                            display: true,
                            text: 'DEPARTMENT WISE ABNORMALITY vs NORMAL'
                        }
                    }
                }
            };

            const departmentAbnormalityCtx = document.getElementById('departmentAbnormalityChart').getContext('2d');
            departmentAbnormalityChart = new Chart(departmentAbnormalityCtx, departmentAbnormalityConfig);
        }

        function updateTable(data) {
            let fvcData = data.FVC.abnormality_counts;
            $("#fvc-mild").text(fvcData.Mild || 0);
            $("#fvc-moderate").text(fvcData.Moderate || 0);
            $("#fvc-severe").text(fvcData.Severe || 0);

            let fev1Data = data.FEV1.abnormality_counts;
            $("#fev1-mild").text(fev1Data.Mild || 0);
            $("#fev1-moderate").text(fev1Data.Moderate || 0);
            $("#fev1-severe").text(fev1Data.Severe || 0);

            let totalMild = (fvcData.Mild || 0) + (fev1Data.Mild || 0);
            let totalModerate = (fvcData.Moderate || 0) + (fev1Data.Moderate || 0);
            let totalSevere = (fvcData.Severe || 0) + (fev1Data.Severe || 0);

            $("#total-mild").text(totalMild);
            $("#total-moderate").text(totalModerate);
            $("#total-severe").text(totalSevere);

            let totalAbnormal = totalMild + totalModerate + totalSevere;
            let totalNormal = fvcData.Normal + fev1Data.Normal;
            $("#total-normal").text(totalNormal);

            let grandTotal = totalMild + totalModerate + totalSevere;
            let Total = grandTotal + totalNormal;
            $("#grand-total").text(grandTotal);
            $("#total-count").text(Total);
        }
    });

    //abnormal audiometry
    $(document).ready(function() {
        let isAbnormalContentVisible = false;
        let audiospirometryChart = null;
        let audiodepartmentChart = null;
        let audiodepartmentAbnormalityChart = null;

        $('#abnormalHeader').on('click', function() {
            if (isAbnormalContentVisible) {
                $('#abnormalContainer, #abnormalgraphContainer').slideUp();
                isAbnormalContentVisible = false;
            } else {
                $('#abnormalLoadingIcon').show();
                $('#abnormalContainer, #abnormalgraphContainer').slideDown();
                $.ajax({
                    url: 'abnormality_count.php',
                    type: 'GET',
                    dataType: 'json',
                    success: function(response) {
                        console.log(response)
                        $('#abnormalLoadingIcon').hide();
                        let overalldata = response['OverallCounts'];
                        updateAudioTable(overalldata);

                        // Destroy old chart instances if they exist
                        if (audiospirometryChart) audiospirometryChart.destroy();
                        if (audiodepartmentChart) audiodepartmentChart.destroy();
                        if (audiodepartmentAbnormalityChart) audiodepartmentAbnormalityChart.destroy();

                        // Create new charts
                        audiospirometryChart = createAudioSeverityChart(overalldata);
                        audiodepartmentChart = createAudioDepartmentChart(response);
                        audiodepartmentAbnormalityChart = createDepartmentAudioAbnormalityChart(response);
                    },
                    error: function(xhr, status, error) {
                        $('#abnormalLoadingIcon').hide();
                        console.error('AJAX Error:', status, error);
                    }
                });
                isAbnormalContentVisible = true;
            }
        });

        function updateAudioTable(data) {
            $('#audio-mild-count').text(data['Mild Hearing Loss'] || 0);
            $('#audio-moderate-count').text(data['Moderate Hearing Loss'] || 0);
            $('#audio-severe-count').text(data['Severe Hearing Loss'] || 0);
            $('#audio-normal-count').text(data['Normal'] || 0);

            let totalAbnormal = (data['Mild Hearing Loss'] || 0) +
                (data['Moderate Hearing Loss'] || 0) +
                (data['Severe Hearing Loss'] || 0);
            $('#audio-total-abnormal').text(totalAbnormal);

            let grandTotal = totalAbnormal + (data['Normal'] || 0);
            $('#audio-grand-total').text(grandTotal);
        }

        function createAudioSeverityChart(data) {
            let ctx = document.getElementById('audio-severity-chart').getContext('2d');
            return new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: ['Mild', 'Moderate', 'Severe'],
                    datasets: [{
                        label: 'Severity Classification',
                        data: [
                            data['Mild Hearing Loss'] || 0,
                            data['Moderate Hearing Loss'] || 0,
                            data['Severe Hearing Loss'] || 0
                        ],
                        backgroundColor: ['#fed700', 'rgba(54, 162, 235, 0.6)', '#fe6347'],
                        borderColor: ['#fed700', 'rgba(54, 162, 235, 0.6)', '#fe6347'],
                        borderWidth: 1
                    }]
                },
                options: {
                    scales: {
                        y: {
                            beginAtZero: true,
                            ticks: {
                                stepSize: 1
                            }
                        }
                    },
                    plugins: {
                        legend: {
                            display: true,
                            position: 'bottom'
                        },
                        title: {
                            display: true,
                            text: 'SEVERITY CLASSIFICATION'
                        }
                    }
                }
            });
        }

        function createAudioDepartmentChart(data) {
            const departmentWiseCounts = data.DepartmentWiseCounts;
            const departments = Object.keys(departmentWiseCounts);
            const mildCounts = departments.map(dept => departmentWiseCounts[dept]['Mild Hearing Loss'] || 0);
            const moderateCounts = departments.map(dept => departmentWiseCounts[dept]['Moderate Hearing Loss'] || 0);
            const severeCounts = departments.map(dept => departmentWiseCounts[dept]['Severe Hearing Loss'] || 0);

            let ctx = document.getElementById('audiodepartmentChart').getContext('2d');
            return new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: departments,
                    datasets: [{
                        label: 'Mild Hearing Loss',
                        data: mildCounts,
                        backgroundColor: '#fed700',
                        borderColor: '#fed700',
                        borderWidth: 1
                    }, {
                        label: 'Moderate Hearing Loss',
                        data: moderateCounts,
                        backgroundColor: 'rgba(54, 162, 235, 0.6)',
                        borderColor: 'rgba(54, 162, 235, 0.6)',
                        borderWidth: 1
                    }, {
                        label: 'Severe Hearing Loss',
                        data: severeCounts,
                        backgroundColor: '#fe6347',
                        borderColor: '#fe6347',
                        borderWidth: 1
                    }]
                },
                options: {
                    scales: {
                        x: {
                            beginAtZero: true,
                            stacked: true
                        },
                        y: {
                            beginAtZero: true,
                            stacked: true,
                            ticks: {
                                stepSize: 1
                            }
                        }
                    },
                    plugins: {
                        legend: {
                            display: true,
                            position: 'bottom'
                        },
                        title: {
                            display: true,
                            text: 'DEPARTMENT WISE AUDIO SEVERITY'
                        }
                    }
                }
            });
        }

        function createDepartmentAudioAbnormalityChart(data) {
            const departmentCounts = data.DepartmentWiseCounts;
            const labels = Object.keys(departmentCounts);
            const abnormalData = [];
            const normalData = [];

            labels.forEach(department => {
                const abnormalityTotal = departmentCounts[department]['Mild Hearing Loss'] +
                    departmentCounts[department]['Moderate Hearing Loss'] +
                    departmentCounts[department]['Severe Hearing Loss'];
                abnormalData.push(abnormalityTotal);
                normalData.push(departmentCounts[department]['Normal']);
            });

            let ctx = document.getElementById('departmentaudioAbnormalityChart').getContext('2d');

            const chartData = {
                labels: labels,
                datasets: [{
                        label: 'Abnormal',
                        data: abnormalData,
                        backgroundColor: '#fed700',
                        borderColor: '#fed700',
                        borderWidth: 1
                    },
                    {
                        label: 'Normal',
                        data: normalData,
                        backgroundColor: '#01b4c6',
                        borderColor: '#01b4c6',
                        borderWidth: 1
                    }
                ]
            };

            return new Chart(ctx, {
                type: 'bar',
                data: chartData,
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        y: {
                            beginAtZero: true,
                            stacked: true,
                            ticks: {
                                stepSize: 1
                            }
                        },
                        x: {
                            stacked: true
                        }
                    },
                    plugins: {
                        legend: {
                            display: true,
                            position: 'bottom'
                        },
                        title: {
                            display: true,
                            text: 'DEPARTMENT WISE ABNORMALITY vs NORMAL'
                        }
                    }
                }
            });
        }


    });





    //ppbs report 
    $(document).ready(function() {
        let chartLoaded = false;
        const chartElement = document.getElementById('abnormalbloodsugarlevel');
        const header = document.getElementById('ppbs-header');
        const loadingIconId = 'ppbsLoadingIcon';

        header.addEventListener('click', function() {
            // Toggle content visibility
            $("#ppbs-content").toggle();

            // Only make the AJAX request if the content is visible and the chart is not loaded
            if ($("#ppbs-content").is(":visible") && !chartLoaded) {
                showLoadingIcon(true, loadingIconId);
                $("#abnormalbloodsugarlevel").show(); // Show the canvas

                $.ajax({
                    url: 'ppbs_rule_equation.php',
                    type: 'GET',
                    dataType: 'json',
                    success: function(response) {
                        const ppbsData = response.PPBS.abnormality_counts;
                        updatePPBSTable(ppbsData);

                        const spirometryConfig = {
                            type: 'bar',
                            data: {
                                labels: ['Abnormality Levels'], // X-axis labels
                                datasets: [{
                                        label: 'Mild',
                                        data: [ppbsData['Mild']],
                                        backgroundColor: '#fed700',
                                        borderColor: '#fed700',
                                        borderWidth: 1
                                    },
                                    {
                                        label: 'Moderate',
                                        data: [ppbsData['Moderate']],
                                        backgroundColor: 'rgba(54, 162, 235, 0.6)',
                                        borderColor: 'rgba(54, 162, 235, 0.6)',
                                        borderWidth: 1
                                    },
                                    {
                                        label: 'Severe',
                                        data: [ppbsData['Severe']],
                                        backgroundColor: '#fe6347',
                                        borderColor: '#fe6347',
                                        borderWidth: 1
                                    }
                                ]
                            },
                            options: {
                                scales: {
                                    y: {
                                        beginAtZero: true,
                                        ticks: {
                                            stepSize: 1
                                        }
                                    }
                                },
                                plugins: {
                                    legend: {
                                        display: true,
                                        position: 'bottom'
                                    },
                                    title: {
                                        display: true,
                                        text: 'SEVERITY CLASSIFICATION'
                                    }
                                }
                            }
                        };

                        const spirometryCtx = chartElement.getContext('2d');
                        new Chart(spirometryCtx, spirometryConfig); // Create the chart

                        chartLoaded = true;
                        showLoadingIcon(false, loadingIconId); // Hide the loading icon
                    },
                    error: function(xhr, status, error) {
                        console.error("Error fetching data: ", status, error);
                        showLoadingIcon(false, loadingIconId); // Hide the loading icon
                    }
                });
            }
        });

        function showLoadingIcon(show, loadingIconId) {
            document.getElementById(loadingIconId).style.display = show ? 'block' : 'none';
        }

        function updatePPBSTable(data) {

            $('#ppbs-mild-count').text(data['Mild']);
            $('#ppbs-moderate-count').text(data['Moderate']);
            $('#ppbs-severe-count').text(data['Severe']);
            $('#ppbs-normal-count').text(data['Normal']);


            const totalAbnormal = data['Mild'] + data['Moderate'] + data['Severe'];
            $('#ppbs-total-abnormal').text(totalAbnormal);


            const grandTotal = totalAbnormal + data['Normal'];
            $('#ppbs-grand-total').text(grandTotal);
        }
    });


    //blood pressure 
    $(document).ready(function() {
        let bpchartLoaded = false;
        const bpchartElement = document.getElementById('abnormalbloodpressurelevel');
        const bpheader = document.getElementById('bp-header');
        const bploadingIconId = 'bpLoadingIcon';

        bpheader.addEventListener('click', function() {
            $("#bp-content").toggle();
            if ($("#bp-content").is(":visible") && !bpchartLoaded) {

                showLoadingIcon(true, bploadingIconId);
                $("#abnormalbloodpressurelevel").show();

                $.ajax({
                    url: 'bp_rule_equation.php',
                    type: 'GET',
                    dataType: 'json',
                    success: function(data) {
                        console.log("bp", data);

                        updateBPTable(data);

                        const sbpData = data.SBP.abnormality_counts;
                        const dbpData = data.DBP.abnormality_counts;


                        const spirometryBpConfig = {
                            type: 'bar',
                            data: {
                                labels: ['Abnormality Levels'],
                                datasets: [{
                                        label: 'Prehypertension',
                                        data: [sbpData['PREHYPERTENSION'] + dbpData['PREHYPERTENSION']],
                                        backgroundColor: '#fed700',
                                        borderColor: '#fed700',
                                        borderWidth: 1
                                    },
                                    {
                                        label: 'Hypertension - 1st Stage',
                                        data: [sbpData['STAGE1 HYPERTENSION'] + dbpData['STAGE1 HYPERTENSION']],
                                        backgroundColor: 'rgba(54, 162, 235, 0.6)',
                                        borderColor: 'rgba(54, 162, 235, 0.6)',
                                        borderWidth: 1
                                    },
                                    {
                                        label: 'Hypertension - 2nd Stage',
                                        data: [sbpData['STAGE2 HYPERTENSION'] + dbpData['STAGE2 HYPERTENSION']],
                                        backgroundColor: '#fe6347',
                                        borderColor: '#fe6347',
                                        borderWidth: 1
                                    }
                                ]
                            },
                            options: {
                                scales: {

                                    y: {
                                        beginAtZero: true,
                                        ticks: {
                                            stepSize: 1
                                        }
                                    }
                                },
                                plugins: {
                                    legend: {
                                        display: true,
                                        position: 'bottom',
                                    },
                                    title: {
                                        display: true,
                                        text: 'Abnormal Blood Pressure Levels',
                                    }
                                },
                            }
                        };

                        const spirometryBpCtx = document.getElementById('abnormalbloodpressurelevel').getContext('2d');
                        new Chart(spirometryBpCtx, spirometryBpConfig);
                        bpchartLoaded = true;
                        showLoadingIcon(false, bploadingIconId);

                    },
                    error: function(xhr, status, error) {
                        console.error("Error fetching data: ", status, error);
                        showLoadingIcon(false, bploadingIconId);
                    }
                });
            }

        });

        function showLoadingIcon(show, loadingIconId) {
            document.getElementById(loadingIconId).style.display = show ? 'block' : 'none';
        }

        function updateBPTable(data) {

            const prehypertensionTotal = data.SBP.abnormality_counts["PREHYPERTENSION"] + data.DBP.abnormality_counts["PREHYPERTENSION"];
            const stage1Total = data.SBP.abnormality_counts["STAGE1 HYPERTENSION"] + data.DBP.abnormality_counts["STAGE1 HYPERTENSION"];
            const stage2Total = data.SBP.abnormality_counts["STAGE2 HYPERTENSION"] + data.DBP.abnormality_counts["STAGE2 HYPERTENSION"];
            const normalTotal = data.SBP.abnormality_counts["NORMAL"] + data.DBP.abnormality_counts["NORMAL"];
            const grandTotal = prehypertensionTotal + stage1Total + stage2Total + normalTotal;

            $('#prehypertension').text(prehypertensionTotal);
            $('#stage1').text(stage1Total);
            $('#stage2').text(stage2Total);
            $('#bpnormal').text(normalTotal);

            $('#prehypertension-total').text(prehypertensionTotal + stage1Total + stage2Total);
            $('#bp-grand-total').text(grandTotal);
        }
    });



    //Abnormal Body Mass Index and Abnormal Haemoglobin levels 
    $(document).ready(function() {
        let bmichartLoaded = false;
        const bmiChartElement = document.getElementById('abnormalbmilevel');
        const hbgChartElement = document.getElementById('abnormalhbglevel');
        const bmiHeader = document.getElementById('bmi-header');
        const bmiLoadingIconId = 'bmiLoadingIcon';
        bmiHeader.addEventListener('click', function() {
            $("#bmi-content").toggle();
            if ($("#bmi-content").is(":visible") && !bmichartLoaded) {
                showLoadingIcon(true, bmiLoadingIconId);
                $("#abnormalbmilevel, #abnormalhbglevel").show();

                $.ajax({
                    url: 'bp_rule_equation.php',
                    type: 'GET',
                    dataType: 'json',
                    success: function(data) {
                        console.log("bp", data);

                        updateBMITable(data);
                        updateHBGTable(data);

                        const bmiData = data.BMI.abnormality_counts;
                        const hbgData = data.HBG.abnormality_counts;

                        const spirometryBmiConfig = {
                            type: 'pie',
                            data: {
                                labels: ['Underweight', 'Overweight', 'Obese'],
                                datasets: [{
                                    label: 'Abnormality Levels',
                                    data: [bmiData['UNDERWEIGHT'], bmiData['OVERWEIGHT'], bmiData['OBESE']],
                                    backgroundColor: ['#ffff00', '#faa700', '#fe6347'],
                                    borderColor: ['#ffff00', '#faa700', '#fe6347'],
                                    borderWidth: 1
                                }]
                            },
                            options: {
                                plugins: {
                                    legend: {
                                        display: true,
                                        position: 'bottom',
                                    },
                                    title: {
                                        display: true,
                                        text: 'Abnormal Body Mass',
                                    }
                                },
                            }
                        };

                        const spirometryBmiCtx = bmiChartElement.getContext('2d');
                        new Chart(spirometryBmiCtx, spirometryBmiConfig);

                        const spirometryHbgConfig = {
                            type: 'bar',
                            data: {
                                labels: ['Abnormality Levels'],
                                datasets: [{
                                        label: 'Mild',
                                        data: [hbgData['Mild']],
                                        backgroundColor: '#ffff00',
                                        borderColor: '#ffff00',
                                        borderWidth: 1
                                    },
                                    {
                                        label: 'Moderate',
                                        data: [hbgData['Moderate']],
                                        backgroundColor: '#faa700',
                                        borderColor: '#faa700',
                                        borderWidth: 1
                                    },
                                    {
                                        label: 'Severe',
                                        data: [hbgData['Severe']],
                                        backgroundColor: '#fe6347',
                                        borderColor: '#fe6347',
                                        borderWidth: 1
                                    }
                                ]
                            },
                            options: {
                                scales: {
                                    y: {
                                        beginAtZero: true,
                                        ticks: {
                                            stepSize: 1
                                        }
                                    }
                                },
                                plugins: {
                                    legend: {
                                        display: true,
                                        position: 'bottom',
                                    },
                                    title: {
                                        display: true,
                                        text: 'Anemia',
                                    }
                                },
                            }
                        };

                        const spirometryHbgCtx = hbgChartElement.getContext('2d');
                        new Chart(spirometryHbgCtx, spirometryHbgConfig);

                        bmichartLoaded = true;
                        showLoadingIcon(false, bmiLoadingIconId);
                    },
                    error: function(xhr, status, error) {
                        console.error("Error fetching data: ", status, error);
                        showLoadingIcon(false, bmiLoadingIconId);
                    }
                });
            }
        });

        function showLoadingIcon(show, loadingIconId) {
            document.getElementById(loadingIconId).style.display = show ? 'block' : 'none';
        }

        function updateBMITable(data) {
            const underweight = data.BMI.abnormality_counts["UNDERWEIGHT"];
            const overweight = data.BMI.abnormality_counts["OVERWEIGHT"];
            const obese = data.BMI.abnormality_counts["OBESE"];
            const normal = data.BMI.abnormality_counts["NORMAL"];

            const grandTotal = underweight + overweight + obese + normal;

            $('#underweight').text(underweight);
            $('#overweight').text(overweight);
            $('#obese').text(obese);
            $('#bminormal').text(normal);

            $('#underweight-total').text(underweight + overweight + obese);
            $('#bmi-grand-total').text(grandTotal);
        }

        function updateHBGTable(data) {
            const hbgMild = data.HBG.abnormality_counts["Mild"];
            const hbgModerate = data.HBG.abnormality_counts["Moderate"];
            const hbgSevere = data.HBG.abnormality_counts["Severe"];
            const hbgNormal = data.HBG.abnormality_counts["NORMAL"];

            const grandTotal = hbgMild + hbgModerate + hbgSevere + hbgNormal;

            $('#hbg-mild').text(hbgMild);
            $('#hbg-moderate').text(hbgModerate);
            $('#hbg-severe').text(hbgSevere);
            $('#hbg-normal').text(hbgNormal);

            $('#hbg-mild-total').text(hbgMild + hbgModerate + hbgSevere);
            $('#hbg-grand-total').text(grandTotal);
        }
    });
</script>