 <?php
    // print_r($mom_mdro);
    // die();
    $colorPalette = ['#ffba28', '#39a1f4', '#fe6bb0', '#9fcb3d', '#638022', '62468d', '#6f42c1', '#1ab3a3'];
    $colorIndex = 0;
    // For HAI graphs START
    foreach ($phlebitis as $p) {
        if (isset($dataArrayPhlebitis[$p['ward_depart']]['data'])) {
            array_push($dataArrayPhlebitis[$p['ward_depart']]['data'], intval($p['count_phlebitis']));
        } else {
            $dataArrayPhlebitis[$p['ward_depart']] = array(
                "label" => $p['ward_depart'],
                "backgroundColor" => $colorPalette[$colorIndex],
                "borderColor" => $colorPalette[$colorIndex],
                "data" => array()
            );
            $colorIndex++;
        }
    }

    $colorIndex = 0;
    foreach ($clabsi as $c) {
        if (isset($dataArrayClabsi[$c['ward_depart']]['data'])) {
            array_push($dataArrayClabsi[$c['ward_depart']]['data'], intval($c['count_phlebitis']));
        } else {
            $dataArrayClabsi[$c['ward_depart']] = array(
                "label" => $c['ward_depart'],
                "backgroundColor" => $colorPalette[$colorIndex],
                "borderColor" => $colorPalette[$colorIndex],
                "data" => array()
            );
            $colorIndex++;
        }
    }

    $colorIndex = 0;
    foreach ($cauti as $c) {
        if (isset($dataArrayCauti[$c['ward_depart']]['data'])) {
            array_push($dataArrayCauti[$c['ward_depart']]['data'], intval($c['count_phlebitis']));
        } else {
            $dataArrayCauti[$c['ward_depart']] = array(
                "label" => $c['ward_depart'],
                "backgroundColor" => $colorPalette[$colorIndex],
                "borderColor" => $colorPalette[$colorIndex],
                "data" => array()
            );
            $colorIndex++;
        }
    }

    $colorIndex = 0;
    foreach ($hap as $h) {
        if (isset($dataArrayHap[$h['ward_depart']]['data'])) {
            array_push($dataArrayHap[$h['ward_depart']]['data'], intval($h['count_phlebitis']));
        } else {
            $dataArrayHap[$h['ward_depart']] = array(
                "label" => $h['ward_depart'],
                "backgroundColor" => $colorPalette[$colorIndex],
                "borderColor" => $colorPalette[$colorIndex],
                "data" => array()
            );
            $colorIndex++;
        }
    }

    $colorIndex = 0;
    foreach ($vap as $v) {
        if (isset($dataArrayVap[$v['ward_depart']]['data'])) {
            array_push($dataArrayVap[$v['ward_depart']]['data'], intval($v['count_phlebitis']));
        } else {
            $dataArrayVap[$v['ward_depart']] = array(
                "label" => $v['ward_depart'],
                "backgroundColor" => $colorPalette[$colorIndex],
                "borderColor" => $colorPalette[$colorIndex],
                "data" => array()
            );
            $colorIndex++;
        }
    }

    $colorIndex = 0;
    foreach ($ssi as $s) {
        if (isset($dataArraySsi[$s['ward_depart']]['data'])) {
            array_push($dataArraySsi[$s['ward_depart']]['data'], intval($s['count_phlebitis']));
        } else {
            $dataArraySsi[$s['ward_depart']] = array(
                "label" => $s['ward_depart'],
                "backgroundColor" => $colorPalette[$colorIndex],
                "borderColor" => $colorPalette[$colorIndex],
                "data" => array()
            );
            $colorIndex++;
        }
    }
    // For HAI graphs END

    // HAI---MDR_CHART

    foreach ($mom_mdro as $entry) {
        $mom_mdro_data[] = (int)$entry['mdro_count'];
    }

  
    foreach ($mom_hai as $entry) {
        $mom_hai_data[] = (int)$entry['hai_count'];
    }
    // print_r($mom_hai_data); die();

    ?>
 <style>
     .news {
         width: 160px;
     }

     .dot {
         height: 6px;
         width: 6px;
         margin-left: 5px !important;
         margin-top: 2px !important;
         background-color: rgb(207, 23, 23);
         border-radius: 50%;
         display: inline-block
     }
 </style>
 <main id="js-page-content" role="main" class="page-content">
     <ol class="breadcrumb page-breadcrumb">
         <li class="breadcrumb-item"><a href="javascript:void(0);">IC Portal</a></li>

         <li class="breadcrumb-item active">Infection Dashboard</li>
         <li class="position-absolute pos-top pos-right d-none d-sm-block"><span class="js-get-date"></span></li>
     </ol>

     <div class="subheader">
         <h1 class="subheader-title">
             <i class='subheader-icon fal fa-chart-area'></i> Infection <span class='fw-300'>Dashboard</span>
         </h1>
         <!-- <div class="subheader-block d-lg-flex align-items-center">
             <span class="sparklines hidden-lg-down" sparkType="bar" sparkBarColor="#886ab5" sparkHeight="32px" sparkBarWidth="5px" values="3,4,3,6,7,3,3,6,2,6,4"></span>
         </div> -->
         <!-- <div class="subheader-block d-lg-flex align-items-center border-faded border-right-0 border-top-0 border-bottom-0 ml-3 pl-3">
             <span class="sparklines hidden-lg-down" sparkType="bar" sparkBarColor="#fe6bb0" sparkHeight="32px" sparkBarWidth="5px" values="1,4,3,6,5,3,9,6,5,9,7"></span>
         </div> -->
     </div>
     <!-- <div class="container mt-5"> -->
     <div class="row mb-4">
         <div class="col-md-12">
             <div class="d-flex justify-content-between align-items-center breaking-news bg-white">
                 <div class="d-flex flex-row flex-grow-1 flex-fill justify-content-center bg-danger py-4 text-white font-weight-bold px-2 news"><span class="d-flex align-items-center">Announcement</span></div>
                 <marquee class="news-scroll" behavior="scroll" direction="left" onmouseover="this.stop();" onmouseout="this.start();">
                     <a href="#">World Antimicrobial Awareness Week (WAAW) 18-24 Nov.</a>
                     <span class="dot"></span>
                     <a href="#">SIDH and RC Hand hygine Day celebrated on 28th October.</a>
                     <span class="dot"></span>
                     <a href="#">Here comes another announcement.</a>
                 </marquee>
             </div>
         </div>
     </div>
     <!-- </div> -->
     <div class="row">
         <div class="col-sm-6 col-xl-3">
             <div class="p-3 bg-primary-300 rounded overflow-hidden position-relative text-white mb-g">
                 <div class="">
                     <h3 class="display-4 d-block l-h-n m-0 fw-500">
                         <?php echo $counts['patient_count'] ?>
                         <small class="m-0 l-h-n">Number of patients </small>
                     </h3>
                 </div>
                 <i class="fal fa-user position-absolute pos-right pos-bottom opacity-15 mb-n1 mr-n1" style="font-size:6rem"></i>
             </div>
         </div>
         <div class="col-sm-6 col-xl-3">
             <div class="p-3 bg-warning-400 rounded overflow-hidden position-relative text-white mb-g">
                 <div class="">
                     <h3 class="display-4 d-block l-h-n m-0 fw-500">
                         <?php echo $counts['mdr_count'] ?>
                         <small class="m-0 l-h-n">Number of MDR </small>
                     </h3>
                 </div>
                 <i class="fal fa-gem position-absolute pos-right pos-bottom opacity-15  mb-n1 mr-n4" style="font-size: 6rem;"></i>
             </div>
         </div>
         <div class="col-sm-6 col-xl-3">
             <div class="p-3 bg-success-200 rounded overflow-hidden position-relative text-white mb-g">
                 <div class="">
                     <h3 class="display-4 d-block l-h-n m-0 fw-500">
                         <?php echo $counts['hai_count'] ?>
                         <small class="m-0 l-h-n">Number of HAI </small>
                     </h3>
                 </div>
                 <i class="fal fa-lightbulb position-absolute pos-right pos-bottom opacity-15 mb-n5 mr-n6" style="font-size: 8rem;"></i>
             </div>
         </div>
         <div class="col-sm-6 col-xl-3">
             <div class="p-3 bg-info-200 rounded overflow-hidden position-relative text-white mb-g">
                 <div class="">
                     <h3 class="display-4 d-block l-h-n m-0 fw-500">
                         3 (in 2021)
                         <small class="m-0 l-h-n">Needle stick injury incidence </small>
                     </h3>
                 </div>
                 <i class="fal fa-globe position-absolute pos-right pos-bottom opacity-15 mb-n1 mr-n4" style="font-size: 6rem;"></i>
             </div>
         </div>
     </div>
     <div class="row">
         <div class="col-sm-6 ">
             <div id="panel-4" class="panel">
                 <div class="panel-hdr">
                     <h2>
                         Phlebitis
                     </h2>
                 </div>
                 <div class="panel-container show">
                     <div class="panel-content">
                         <div id="phlebitisBarChart">
                             <canvas style="width:100%; height:300px;"></canvas>
                         </div>
                     </div>
                 </div>
             </div>
         </div>
         <div class="col-sm-6 ">
             <div id="panel-4" class="panel">
                 <div class="panel-hdr">
                     <h2>
                         CLABSI
                     </h2>
                 </div>
                 <div class="panel-container show">
                     <div class="panel-content">
                         <div id="clabsiBarChart">
                             <canvas style="width:100%; height:300px;"></canvas>
                         </div>
                     </div>
                 </div>
             </div>
         </div>
     </div>
     <div class="row">
         <div class="col-sm-6 ">
             <div id="panel-4" class="panel">
                 <div class="panel-hdr">
                     <h2>
                         CAUTI
                     </h2>
                 </div>
                 <div class="panel-container show">
                     <div class="panel-content">
                         <div id="cautiBarChart">
                             <canvas style="width:100%; height:300px;"></canvas>
                         </div>
                     </div>
                 </div>
             </div>
         </div>
         <div class="col-sm-6 ">
             <div id="panel-4" class="panel">
                 <div class="panel-hdr">
                     <h2>
                         HAP
                     </h2>
                 </div>
                 <div class="panel-container show">
                     <div class="panel-content">
                         <div id="hapBarChart">
                             <canvas style="width:100%; height:300px;"></canvas>
                         </div>
                     </div>
                 </div>
             </div>
         </div>
     </div>
     <div class="row">
         <div class="col-sm-6 ">
             <div id="panel-4" class="panel">
                 <div class="panel-hdr">
                     <h2>
                         VAP
                     </h2>
                 </div>
                 <div class="panel-container show">
                     <div class="panel-content">
                         <div id="vapBarChart">
                             <canvas style="width:100%; height:300px;"></canvas>
                         </div>
                     </div>
                 </div>
             </div>
         </div>
         <div class="col-sm-6 ">
             <div id="panel-4" class="panel">
                 <div class="panel-hdr">
                     <h2>
                         SSI
                     </h2>
                 </div>
                 <div class="panel-container show">
                     <div class="panel-content">
                         <div id="ssiBarChart">
                             <canvas style="width:100%; height:300px;"></canvas>
                         </div>
                     </div>
                 </div>
             </div>
         </div>
     </div>
     <div class="row">
         <div class="col-sm-6 ">
             <div id="panel-4" class="panel">
                 <div class="panel-hdr">
                     <h2>
                         MDRO
                     </h2>
                 </div>
                 <div class="panel-container show">
                     <div class="panel-content">
                         <div>
                             <canvas id="mdro_pieChart" width="100%" height="60px;"></canvas>
                         </div>
                     </div>
                 </div>
             </div>
         </div>
         <div class="col-sm-6 ">
             <div id="panel-6" class="panel">
                 <div class="panel-hdr">
                     <h2>Total No Of Patients </h2>
                 </div>
                 <div class="panel-container show">
                     <div class="panel-content p-0 mb-g">

                     </div>
                     <div class="panel-content">
                         <div class="row  mb-g">
                             <div class="col-md-6 d-flex align-items-center">
                                 <div id="pieChart" class="ct-chart" style="width:100%; height:250px;"></div>
                             </div>
                             <div class="col-md-6 col-lg-5 mr-lg-auto">
                                 <div class="d-flex mt-2 mb-1 fs-xs text-primary">
                                     Total
                                 </div>
                                 <div class="progress progress-xs mb-3">
                                     <div class="progress-bar" role="progressbar" style="width: 70%;" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"></div>
                                 </div>
                                 <div class="d-flex mt-2 mb-1 fs-xs text-danger">
                                     Transmission Based Precautions
                                 </div>
                                 <div class="progress progress-xs mb-3">
                                     <div class="progress-bar bg-danger-500" role="progressbar" style="width: 15%;" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
                                 </div>

                             </div>
                         </div>
                     </div>
                 </div>
             </div>
         </div>
     </div>
     <!-- News -->
     <!-- <div class="row">
         <div class="col-md-12">
             <div id="panel-4" class="panel">
                 <div class="panel-hdr">
                     <h2>
                         News
                     </h2>
                 </div>
                 <div class="panel-container show">
                     <div class="panel-content">
                         <div id="carouselExampleInterval" class="carousel slide" data-ride="carousel">
                             <div class="carousel-inner">
                                 <div class="carousel-item active" data-interval="10000">
                                     <img class="d-block w-100" src="about:blank" data-src="holder.js/1700x400?auto=yes&bg=ffd274&fg=333333&text=SIDH and RC Hand Hygiene Day celebrated on 28th October " alt="First slide">
                                 </div>
                                 <div class="carousel-item" data-interval="2000">
                                     <img class="d-block w-100" src="about:blank" data-src="holder.js/1700x400?auto=yes&bg=ffca5b&fg=000000&text=World Antimicrobial Awareness Week (WAAW) 18-24 November" alt="Second slide">
                                 </div>
                             </div>
                             <a class="carousel-control-prev" href="#carouselExampleInterval" role="button" data-slide="prev">
                                 <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                                 <span class="sr-only">Previous</span>
                             </a>
                             <a class="carousel-control-next" href="#carouselExampleInterval" role="button" data-slide="next">
                                 <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                 <span class="sr-only">Next</span>
                             </a>
                         </div>
                     </div>
                 </div>
             </div>
         </div>
     </div> -->

     <!-- Hostpital acquired -->
     <div class="row">
         <div class="col-lg-12">
             <div id="panel-1" class="panel">
                 <div class="panel-hdr">
                     <h2>
                         Hospital Acquired Infections
                     </h2>
                 </div>
                 <div class="panel-container show">
                     <div id="hai-mdr-chart">
                         <canvas style="width:100%; height:300px;"></canvas>
                     </div>

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


     </div>


     <div class="row">
         <!-- <div class="col-md-6">
                                <div class="card mb-g border shadow-0">
                                    <div class="card-header bg-white">
                                        <div class="row no-gutters align-items-center">
                                            <div class="col">
                                                <span class="h6 font-weight-bold text-uppercase">Staff Disease Status</span>
                                            </div>
                                            <div class="col d-flex">
                                               
                                            </div>
                                        </div>
                                    </div>
                                    <div class="card-header bg-white p-0">
                                        <div class="row no-gutters row-grid align-items-stretch">
                                            <div class="col-12 col-md">
                                                <div class="text-uppercase text-muted py-2 px-3">Title</div>
                                            </div>
                                            <div class="col-sm-12 col-md-5 col-xl-1 hidden-md-down">
                                                <div class="text-uppercase text-muted py-2 px-3">Status</div>
                                            </div>
                                            <div class="col-sm-6 col-md-3 hidden-md-down">
                                                <div class="text-uppercase text-muted py-2 px-3">Last posts</div>
                                            </div> 
                                        </div>
                                    </div>
                                    <div class="card-body p-0">
                                        <div class="row no-gutters row-grid">
                                         
                                            <div class="col-12">
                                                <div class="row no-gutters row-grid align-items-stretch">
                                                    <div class="col-md">
                                                        <div class="p-3">
                                                            <div class="d-flex">
                                                                <span class="icon-stack display-4 mr-3 flex-shrink-0">
                                                                    <i class="base base-2 icon-stack-3x opacity-100 color-info-800"></i>
                                                                    <i class="base base-3 icon-stack-2x opacity-100 color-info-500"></i>
                                                                    <i class="fal fa-user-md icon-stack-1x opacity-100 color-white"></i>
                                                                </span>
                                                                <div class="d-inline-flex flex-column">
                                                                    <a href="javascript:void(0)" class="fs-lg fw-500 d-block">
                                                                        Vaccinated
                                                                    </a>
                                                                    <div class="d-block text-muted fs-sm">
                                                                        
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-12 col-md-5 col-xl-1 hidden-md-down">
                                                        <div class="p-3 p-md-3">
                                                            <span class="d-block text-muted">72 <i>Cases</i></span>
                                                        </div>
                                                    </div>
                                                   
                                                </div>
                                            </div>
                                           
                                            <div class="col-12">
                                                <div class="row no-gutters row-grid align-items-stretch">
                                                    <div class="col-md">
                                                        <div class="p-3">
                                                            <div class="d-flex">
                                                                <span class="icon-stack display-4 mr-3 flex-shrink-0">
                                                                    <i class="base base-7 icon-stack-3x opacity-100 color-success-800"></i>
                                                                    <i class="base base-4 icon-stack-2x opacity-100 color-success-600"></i>
                                                                    <i class="fal fa-medkit icon-stack-1x opacity-100 color-white"></i>
                                                                </span>
                                                                <div class="d-inline-flex flex-column">
                                                                    <a href="javascript:void(0)" class="fs-lg fw-500 d-block">
                                                                        Unvaccinated
                                                                    </a>
                                                                    <div class="d-block text-muted fs-sm">
                                                                       
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-12 col-md-5 col-xl-1 hidden-md-down">
                                                        <div class="p-3 p-md-3">
                                                            <span class="d-block text-muted">99 <i>Cases</i></span>
                                                        </div>
                                                    </div>
                                                 
                                                </div>
                                            </div>
                                          
                                            <div class="col-12">
                                                <div class="row no-gutters row-grid align-items-stretch">
                                                    <div class="col-md">
                                                        <div class="p-3">
                                                            <div class="d-flex">
                                                                <span class="icon-stack display-4 mr-3 flex-shrink-0">
                                                                    <i class="base base-15 icon-stack-3x opacity-100 color-success-800"></i>
                                                                    <i class="base base-10 icon-stack-2x opacity-100 color-success-600"></i>
                                                                    <i class="fal fa-dollar-sign icon-stack-1x opacity-100 color-white"></i>
                                                                </span>
                                                                <div class="d-inline-flex flex-column">
                                                                    <a href="javascript:void(0)" class="fs-lg fw-500 d-block">
                                                                        Unknown.
                                                                    </a>
                                                                    <div class="d-block text-muted fs-sm">
                                                                       
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-12 col-md-5 col-xl-1 hidden-md-down">
                                                        <div class="p-3 p-md-3">
                                                            <span class="d-block text-muted">88 <i>Cases</i></span>
                                                        </div>
                                                    </div>
                                                   
                                                </div>
                                            </div>
                                       
                                        </div>
                                    </div>
                                </div> 
                            </div> -->
         <div class="col-md-12">
             <div class="card mb-g border shadow-0">
                 <div class="card-header bg-white">
                     <div class="row no-gutters align-items-center">
                         <div class="col">
                             <span class="h6 font-weight-bold text-uppercase">For HCW </span>
                         </div>
                         <div class="col d-flex">

                         </div>
                     </div>
                 </div>
                 <div class="card-header bg-white p-0">
                     <div class="row no-gutters row-grid align-items-stretch">
                         <div class="col-12 col-md">
                             <div class="text-uppercase text-muted py-2 px-3">Title</div>
                         </div>
                         <div class="col-sm-12 col-md-5 col-xl-1 hidden-md-down">
                             <div class="text-uppercase text-muted py-2 px-3">Status</div>
                         </div>

                     </div>
                 </div>
                 <div class="card-body p-0">
                     <div class="row no-gutters row-grid">
                         <!-- thread -->
                         <div class="col-12">
                             <div class="row no-gutters row-grid align-items-stretch">
                                 <div class="col-md">
                                     <div class="p-3">
                                         <div class="d-flex">
                                             <span class="icon-stack display-4 mr-3 flex-shrink-0">
                                                 <i class="base base-2 icon-stack-3x opacity-100 color-info-800"></i>
                                                 <i class="base base-3 icon-stack-2x opacity-100 color-info-500"></i>
                                                 <i class="fal fa-crutches icon-stack-1x opacity-100 color-white"></i>
                                             </span>
                                             <div class="d-inline-flex flex-column">
                                                 <a href="javascript:void(0)" class="fs-lg fw-500 d-block">
                                                     COVID vaccine
                                                 </a>
                                                 <div class="d-block text-muted fs-sm">

                                                 </div>
                                             </div>
                                         </div>
                                     </div>
                                 </div>
                                 <div class="col-12 col-md-5 col-xl-1 hidden-md-down">
                                     <div class="p-3 p-md-3">
                                         <span class="d-block text-muted">250+ <i>Cases</i></span>
                                     </div>
                                 </div>

                             </div>
                         </div>
                         <!-- thread -end -->
                         <!-- thread -->
                         <div class="col-12">
                             <div class="row no-gutters row-grid align-items-stretch">
                                 <div class="col-md">
                                     <div class="p-3">
                                         <div class="d-flex">
                                             <span class="icon-stack display-4 mr-3 flex-shrink-0">
                                                 <i class="base base-7 icon-stack-3x opacity-100 color-success-800"></i>
                                                 <i class="base base-4 icon-stack-2x opacity-100 color-success-600"></i>
                                                 <i class="fal fa-medkit icon-stack-1x opacity-100 color-white"></i>
                                             </span>
                                             <div class="d-inline-flex flex-column">
                                                 <a href="javascript:void(0)" class="fs-lg fw-500 d-block">
                                                     Hep B vaccine
                                                 </a>
                                                 <div class="d-block text-muted fs-sm">

                                                 </div>
                                             </div>
                                         </div>
                                     </div>
                                 </div>
                                 <div class="col-12 col-md-5 col-xl-1 hidden-md-down">
                                     <div class="p-3 p-md-3">
                                         <span class="d-block text-muted">250 <i>Cases</i></span>
                                     </div>
                                 </div>

                             </div>
                         </div>
                         <!-- thread -end -->
                         <!-- thread -->
                         <div class="col-12">
                             <div class="row no-gutters row-grid align-items-stretch">
                                 <div class="col-md">
                                     <div class="p-3">
                                         <div class="d-flex">
                                             <span class="icon-stack display-4 mr-3 flex-shrink-0">
                                                 <i class="base base-7 icon-stack-3x opacity-100 color-success-800"></i>
                                                 <i class="base base-4 icon-stack-2x opacity-100 color-success-600"></i>
                                                 <i class="fal fa-syringe icon-stack-1x opacity-100 color-white"></i>


                                             </span>
                                             <div class="d-inline-flex flex-column">
                                                 <a href="javascript:void(0)" class="fs-lg fw-500 d-block">
                                                     Measle/ chicken pox vaccine
                                                 </a>
                                                 <div class="d-block text-muted fs-sm">

                                                 </div>
                                             </div>
                                         </div>
                                     </div>
                                 </div>
                                 <div class="col-12 col-md-5 col-xl-1 hidden-md-down">
                                     <div class="p-3 p-md-3">
                                         <span class="d-block text-muted"> <i>unknown</i></span>
                                     </div>
                                 </div>

                             </div>
                         </div>
                         <!-- thread -end -->
                     </div>
                 </div>
             </div>
         </div>
     </div>

     <div class="row">

     </div>



 </main>

 <script>
     var phlebitisBarChart = function() {
         var phlebitisData = <?php echo json_encode($dataArrayPhlebitis) ?>;
         //  console.log(phlebitisData);
         var phlebitisBarChart = {
             labels: ['Jan', 'Feb', 'March', 'April', 'May', 'June', 'July', 'August', 'Sept', 'Oct', 'Nov', 'Dec'],
             datasets: Object.keys(phlebitisData).map(key => {
                 const wardData = phlebitisData[key];
                 return {
                     label: key,
                     backgroundColor: wardData.backgroundColor,
                     borderColor: wardData.backgroundColor,
                     borderWidth: 1,
                     data: Object.values(wardData.data)
                 };
             })
         };

         console.log(phlebitisBarChart);
         var config = {
             type: 'bar',
             data: phlebitisBarChart,
             options: {
                 responsive: true,
                 legend: {
                     position: 'top',
                 },
                 title: {
                     display: false,
                     text: 'Horizontal Bar Chart'
                 },
                 scales: {
                     xAxes: [{
                         display: true,
                         scaleLabel: {
                             display: false,
                             labelString: 'Profit margin (approx)'
                         },
                         gridLines: {
                             display: true,
                             color: "#f2f2f2"
                         },
                         ticks: {
                             beginAtZero: true,
                             fontSize: 11
                         }
                     }],
                     yAxes: [{
                         display: true,
                         scaleLabel: {
                             display: false,
                             labelString: 'Quarterly forecast'
                         },
                         gridLines: {
                             display: true,
                             color: "#f2f2f2"
                         },
                         ticks: {
                             beginAtZero: true,
                             fontSize: 11
                         }
                     }]
                 }
             }
         }
         new Chart($("#phlebitisBarChart > canvas").get(0).getContext("2d"), config);
     }

     var clabsiBarChart = function() {
         var clabsiData = <?php echo json_encode($dataArrayClabsi) ?>;
         //  console.log(clabsiData);
         var clabsiBarChart = {
             labels: ['Jan', 'Feb', 'March', 'April', 'May', 'June', 'July', 'August', 'Sept', 'Oct', 'Nov', 'Dec'],
             datasets: Object.keys(clabsiData).map(key => {
                 const wardData = clabsiData[key];
                 return {
                     label: key,
                     backgroundColor: wardData.backgroundColor,
                     borderColor: wardData.backgroundColor,
                     borderWidth: 1,
                     data: Object.values(wardData.data)
                 };
             })
         };

         var config = {
             type: 'bar',
             data: clabsiBarChart,
             options: {
                 responsive: true,
                 legend: {
                     position: 'top',
                 },
                 title: {
                     display: false,
                     text: 'Horizontal Bar Chart'
                 },
                 scales: {
                     xAxes: [{
                         display: true,
                         scaleLabel: {
                             display: false,
                             labelString: 'Profit margin (approx)'
                         },
                         gridLines: {
                             display: true,
                             color: "#f2f2f2"
                         },
                         ticks: {
                             beginAtZero: true,
                             fontSize: 11
                         }
                     }],
                     yAxes: [{
                         display: true,
                         scaleLabel: {
                             display: false,
                             labelString: 'Quarterly forecast'
                         },
                         gridLines: {
                             display: true,
                             color: "#f2f2f2"
                         },
                         ticks: {
                             beginAtZero: true,
                             fontSize: 11
                         }
                     }]
                 }
             }
         }
         new Chart($("#clabsiBarChart > canvas").get(0).getContext("2d"), config);
     }

     var cautiBarChart = function() {
         var cautiData = <?php echo json_encode($dataArrayCauti) ?>;
         //  console.log(cautiData);
         var cautiBarChart = {
             labels: ['Jan', 'Feb', 'March', 'April', 'May', 'June', 'July', 'August', 'Sept', 'Oct', 'Nov', 'Dec'],
             datasets: Object.keys(cautiData).map(key => {
                 const wardData = cautiData[key];
                 return {
                     label: key,
                     backgroundColor: wardData.backgroundColor,
                     borderColor: wardData.backgroundColor,
                     borderWidth: 1,
                     data: Object.values(wardData.data)
                 };
             })
         };

         var config = {
             type: 'bar',
             data: cautiBarChart,
             options: {
                 responsive: true,
                 legend: {
                     position: 'top',
                 },
                 title: {
                     display: false,
                     text: 'Horizontal Bar Chart'
                 },
                 scales: {
                     xAxes: [{
                         display: true,
                         scaleLabel: {
                             display: false,
                             labelString: 'Profit margin (approx)'
                         },
                         gridLines: {
                             display: true,
                             color: "#f2f2f2"
                         },
                         ticks: {
                             beginAtZero: true,
                             fontSize: 11
                         }
                     }],
                     yAxes: [{
                         display: true,
                         scaleLabel: {
                             display: false,
                             labelString: 'Quarterly forecast'
                         },
                         gridLines: {
                             display: true,
                             color: "#f2f2f2"
                         },
                         ticks: {
                             beginAtZero: true,
                             fontSize: 11
                         }
                     }]
                 }
             }
         }
         new Chart($("#cautiBarChart > canvas").get(0).getContext("2d"), config);
     }

     var hapBarChart = function() {
         var hapData = <?php echo json_encode($dataArrayHap) ?>;
         //  console.log(hapData);
         var hapBarChart = {
             labels: ['Jan', 'Feb', 'March', 'April', 'May', 'June', 'July', 'August', 'Sept', 'Oct', 'Nov', 'Dec'],
             datasets: Object.keys(hapData).map(key => {
                 const wardData = hapData[key];
                 return {
                     label: key,
                     backgroundColor: wardData.backgroundColor,
                     borderColor: wardData.backgroundColor,
                     borderWidth: 1,
                     data: Object.values(wardData.data)
                 };
             })
         };

         var config = {
             type: 'bar',
             data: hapBarChart,
             options: {
                 responsive: true,
                 legend: {
                     position: 'top',
                 },
                 title: {
                     display: false,
                     text: 'Horizontal Bar Chart'
                 },
                 scales: {
                     xAxes: [{
                         display: true,
                         scaleLabel: {
                             display: false,
                             labelString: 'Profit margin (approx)'
                         },
                         gridLines: {
                             display: true,
                             color: "#f2f2f2"
                         },
                         ticks: {
                             beginAtZero: true,
                             fontSize: 11
                         }
                     }],
                     yAxes: [{
                         display: true,
                         scaleLabel: {
                             display: false,
                             labelString: 'Quarterly forecast'
                         },
                         gridLines: {
                             display: true,
                             color: "#f2f2f2"
                         },
                         ticks: {
                             beginAtZero: true,
                             fontSize: 11
                         }
                     }]
                 }
             }
         }
         new Chart($("#hapBarChart > canvas").get(0).getContext("2d"), config);
     }

     var vapBarChart = function() {
         var vapData = <?php echo json_encode($dataArrayVap) ?>;
         //  console.log(vapData);
         var vapBarChart = {
             labels: ['Jan', 'Feb', 'March', 'April', 'May', 'June', 'July', 'August', 'Sept', 'Oct', 'Nov', 'Dec'],
             datasets: Object.keys(vapData).map(key => {
                 const wardData = vapData[key];
                 return {
                     label: key,
                     backgroundColor: wardData.backgroundColor,
                     borderColor: wardData.backgroundColor,
                     borderWidth: 1,
                     data: Object.values(wardData.data)
                 };
             })
         };

         var config = {
             type: 'bar',
             data: vapBarChart,
             options: {
                 responsive: true,
                 legend: {
                     position: 'top',
                 },
                 title: {
                     display: false,
                     text: 'Horizontal Bar Chart'
                 },
                 scales: {
                     xAxes: [{
                         display: true,
                         scaleLabel: {
                             display: false,
                             labelString: 'Profit margin (approx)'
                         },
                         gridLines: {
                             display: true,
                             color: "#f2f2f2"
                         },
                         ticks: {
                             beginAtZero: true,
                             fontSize: 11
                         }
                     }],
                     yAxes: [{
                         display: true,
                         scaleLabel: {
                             display: false,
                             labelString: 'Quarterly forecast'
                         },
                         gridLines: {
                             display: true,
                             color: "#f2f2f2"
                         },
                         ticks: {
                             beginAtZero: true,
                             fontSize: 11
                         }
                     }]
                 }
             }
         }
         new Chart($("#vapBarChart > canvas").get(0).getContext("2d"), config);
     }

     var ssiBarChart = function() {
         var ssiData = <?php echo json_encode($dataArraySsi) ?>;
         //  console.log(ssiData);
         var ssiBarChart = {
             labels: ['Jan', 'Feb', 'March', 'April', 'May', 'June', 'July', 'August', 'Sept', 'Oct', 'Nov', 'Dec'],
             datasets: Object.keys(ssiData).map(key => {
                 const wardData = ssiData[key];
                 return {
                     label: key,
                     backgroundColor: wardData.backgroundColor,
                     borderColor: wardData.backgroundColor,
                     borderWidth: 1,
                     data: Object.values(wardData.data)
                 };
             })
         };

         var config = {
             type: 'bar',
             data: ssiBarChart,
             options: {
                 responsive: true,
                 legend: {
                     position: 'top',
                 },
                 title: {
                     display: false,
                     text: 'Horizontal Bar Chart'
                 },
                 scales: {
                     xAxes: [{
                         display: true,
                         scaleLabel: {
                             display: false,
                             labelString: 'Profit margin (approx)'
                         },
                         gridLines: {
                             display: true,
                             color: "#f2f2f2"
                         },
                         ticks: {
                             beginAtZero: true,
                             fontSize: 11
                         }
                     }],
                     yAxes: [{
                         display: true,
                         scaleLabel: {
                             display: false,
                             labelString: 'Quarterly forecast'
                         },
                         gridLines: {
                             display: true,
                             color: "#f2f2f2"
                         },
                         ticks: {
                             beginAtZero: true,
                             fontSize: 11
                         }
                     }]
                 }
             }
         }
         new Chart($("#ssiBarChart > canvas").get(0).getContext("2d"), config);
     }

     //  MDRO PIE CHART START
     var mdroData = <?php echo json_encode($mdro); ?>;

     var labels = mdroData.map(item => item.ward_depart);
     var counts = mdroData.map(item => item.mdro_count);

     var data = {
         labels: labels,
         datasets: [{
             data: counts,
             backgroundColor: <?php echo json_encode($colorPalette) ?>
         }]
     };
     var ctx = document.getElementById('mdro_pieChart').getContext('2d');

     // Create the pie chart
     var mdro_pieChart = new Chart(ctx, {
         type: 'pie',
         data: data
     });

     //  MDRO PIE CHART END

     $(document).ready(function() {
         phlebitisBarChart();
         clabsiBarChart();
         cautiBarChart();
         hapBarChart();
         vapBarChart();
         ssiBarChart();
     });
 </script>

 <!-- //  ------------------- -->

 <script>
     var pieChart = function() {
         var data = {
             series: [5, 5]
         };

         var sum = function(a, b) {
             return a + b
         };

         new Chartist.Pie('#pieChart', data, {
             labelInterpolationFnc: function(value) {
                 return Math.round(value / data.series.reduce(sum) * 100) + '%';
             }
         });
     }


     //  HAI - MDR chart

     var barlineCombine = function() {
         var barlineCombineData = {
             labels: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "Noveber", "December"],
             datasets: [{
                     type: 'line',
                     label: 'HAI Rate',
                     borderColor: color.danger._300,
                     pointBackgroundColor: color.danger._500,
                     pointBorderColor: color.danger._500,
                     pointBorderWidth: 1,
                     borderWidth: 2,
                     pointRadius: 4,
                     pointHoverRadius: 5,
                     fill: false,
                     data: <?php echo json_encode($mom_hai_data) ?>,
                 },
                 {
                     type: 'bar',
                     label: 'MDR Rate',
                     backgroundColor: color.primary._300,
                     borderColor: color.primary._500,
                     data: <?php echo json_encode($mom_mdro_data) ?>,
                     borderWidth: 1
                 },
             ]

         };
         console.log(<?php echo json_encode($mom_mdro_data) ?>)
         var config = {
             type: 'bar',
             data: barlineCombineData,
             options: {
                 responsive: true,
                 legend: {
                     position: 'top',
                 },
                 title: {
                     display: true,
                     text: 'Chart.js Bar Chart'
                 },
                 scales: {
                     xAxes: [{
                         display: true,
                         scaleLabel: {
                             display: false,
                             labelString: '6 months forecast'
                         },
                         gridLines: {
                             display: true,
                             color: "#f2f2f2"
                         },
                         ticks: {
                             beginAtZero: true,
                             fontSize: 11
                         }
                     }],
                     yAxes: [{
                         display: true,
                         scaleLabel: {
                             display: false,
                             labelString: 'Profit margin (approx)'
                         },
                         gridLines: {
                             display: true,
                             color: "#f2f2f2"
                         },
                         ticks: {
                             beginAtZero: true,
                             fontSize: 11
                         }
                     }]
                 }
             }
         }
         new Chart($("#hai-mdr-chart > canvas").get(0).getContext("2d"), config);
     }

     $(document).ready(function() {

         pieChart();
         barlineCombine();
     });
 </script>