<?php
header('Content-Type: text/html; charset=ISO-8859-1');
include("db_connect.php");
$pol = mysqli_query($db,"select * from important_contacts where sector='police'"); 

$psy = mysqli_query($db,"select * from important_contacts where sector='psychology'"); 
$hum = mysqli_query($db,"select * from important_contacts where sector='human'"); 

$leg = mysqli_query($db,"select * from important_contacts where sector='legal'"); 
$hos = mysqli_query($db,"select * from important_contacts where sector='hospital'"); 

$analysis = mysqli_query($db,"SELECT * FROM `analysis` WHERE id in (select analysis_id from analysis_tags where tag_id = 19)");
$resources = mysqli_query($db,"SELECT * FROM `resources` 
");
$incidents = mysqli_query($db,"select r.id,r.title,r.eventdate from reports r join reports_tags rt on rt.report_id = r.id where approve_status = 'approved' and rt.tag_id = 19 order by eventdate desc limit 10");

?>
<!DOCTYPE html>
<html lang="en">

<head>
  <!-- Meta -->
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="keywords" content="SITE KEYWORDS HERE" />
  <meta name="description" content="" />
  <meta name="copyright" content="" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <!-- Title -->
  <title>Covid-19</title>
  <!-- Favicon -->
  <link rel="icon" type="image/png" />
  <!-- Web Font -->
  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900" rel="stylesheet" media="all"/>
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
    integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous" media="all">

  <!-- Font Awesome CSS -->
  <!-- Font Awesome Icons -->
  <link rel="stylesheet" href="fontawesome-free/css/all.min.css" media="all">
  <link rel="stylesheet" type="text/css" href="css/bootstrap-datepicker.css" media="all" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.css" media="all"/>

  <link rel="stylesheet" href="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/themes/css/cartodb.css" media="all" />
  <!-- Google Font: Source Sans Pro -->
  <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet" />
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Vollkorn" />
  <link href='https://api.mapbox.com/mapbox-gl-js/v1.8.1/mapbox-gl.css' rel='stylesheet' media="all"/>
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css" />

  <link rel="stylesheet" href="css/style.css" />
  <link rel="stylesheet" href="css/loader.css" />
  <link rel="stylesheet" href="css/bootstrap-select.css" />
   <link rel="stylesheet" href="css/normalize.min.css">


  <style type="text/css">
    .useIt {
      font-family: Vollkorn;
      font-style: normal;
      font-variant: normal;
      font-weight: 400;
    }


    h1 {
      font-family: Vollkorn;
      font-size: 24px;
      font-style: normal;
      font-variant: normal;
      font-weight: 700;
      line-height: 26.4px;
    }

    h3 {
      font-family: Vollkorn;
      font-size: 14px;
      font-style: normal;
      font-variant: normal;
      font-weight: 700;
      line-height: 15.4px;
    }

    p {
      font-family: Vollkorn;
      font-size: 14px;
      font-style: normal;
      font-variant: normal;
      font-weight: 400;
      line-height: 20px;
    }

    blockquote {
      font-family: Vollkorn;
      font-size: 21px;
      font-style: normal;
      font-variant: normal;
      font-weight: 400;
      line-height: 30px;
    }

    pre {
      font-family: Vollkorn;
      font-size: 13px;
      font-style: normal;
      font-variant: normal;
      font-weight: 400;
      line-height: 18.5714px;
    }

    .card-header {
      background-color: #417DC1;
      color: white;
    }

   img {vertical-align: middle;}

/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  margin-right:56px;
  margin-left:41px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.text1 {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}


 .dot:hover {
  background-color: #717171;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

a{
  color: blue;
 }

 .standardHeight{
  height:338px;
}

 .myButton {
    margin-top: 18px;
    margin-left: -25px;
    width: 105px;
    color: white;
    background-color: #a9c8ec;
}



.card-content::-webkit-scrollbar-track
{
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
  background-color: #F5F5F5;
}

.card-content::-webkit-scrollbar
{
  width: 10px;
  background-color: #F5F5F5;
}

.card-content::-webkit-scrollbar-thumb
{
  background-color: #a9c8ec;
}

  </style>

</head>

<body>
  <div class="row">
    <div class="container-fluid">
      <?php include("header.php");?>
    </div>
  </div>
  <div class="content-wrapper">
    <!-- content-header -->
    <div class="content-header">
      <div class="container-fluid" style="margin-top: 20px;">
       
      </div>
    </div>
    <section class="content">
      <div class="container-fluid">
        <div class="row">
          <div class="col-lg-12 col-md-12">
            <div class="loader loader-default is-active" id="loader"></div> 
            <div class="row nonPrint">
              <div class="col-lg-3">
            <h1 class="text-dark text-center website-title">
              Violence Monitoring amid COVID-19 
            </h1>
          </div>
              <div class="col-lg-2">
                <div class="form-group">
                  <div class="header-select"> Province</div>
                  <select  class="selectpicker" id="province-select" data-live-search="true" data-style="select-border"
                    title="Select Province"   data-allow-clear="true"
                    onchange="changeProvince(this);">
                    <option value=1>Province 1</option>
                    <option value=2>Province 2</option>
                    <option value=3>Bagmati</option>
                    <option value=4>Gandaki</option>
                     <option value=5>Province 5</option>
                    <option value=6>Karnali</option>
                    <option value=7>Sudurpashchim</option>
                  </select>

                </div>
              </div>
              <div class="col-lg-2">
                <div class="form-group">
                  <div class="header-select"> District</div>
                  <select class="selectpicker" id="district-select" data-live-search="true" data-style="select-border"
                    title="Select District" data-max-options="1" data-allow-clear="true"
                    onchange="changeDistrict(this);">
                  </select>
                </div>
              </div>

              <div class="col-lg-2">
                <div class="form-group">
                  <div class="header-select"> Data Filter</div>
                  <select class="selectpicker" id="data-select" data-style="select-border" onchange="changeData(this);">
                    <option value="all">All Covid-19 related Incidents</option>
                    <option value="lock">LockDown Enforcement</option>
                    <option value="qua">Quarantine Management</option>
                    <!-- <option value="covid">Covid19</option> -->
                    <option value="rel">Covid-19 Relief Distribution</option>
                    <option value="irr">Irregularities in Commodity Market</option>
                     <option value="pre">Prejudice and Descrimination</option>
                    <option value="hea">Healthcare Management</option>
                  </select>
                </div>
              </div>
              <div class="col-lg-2">
                <div class="form-group">
                  <div class="header-select"> Date picker</div>
                  <input type="text" name="daterange" value="" class="btn btn-lg btn-block select-border"
                    id="date-range" />
                </div>
              </div>

              <div class="col-lg-1">
                <a href="#" class="btn myButton useIt" onclick="printIt()">Download</a>
              </div>


            </div>
          </div>

          <div class="col-lg-3 nonPrint">         

            <div class="card" style="height:635px;">
                <div class="card-header">
                  <h4 class="card-title useIt"><strong>REPORTED INCIDENTS</strong></h4>
                </div>
                <div class="card-content" style="overflow-y:scroll;">
                  <div class="streamline">
                    <?php  while($a = mysqli_fetch_array($incidents))
                                            {   ?> 
                    <div class="sl-item sl-primary">
                      <div class="sl-content">
                        <span class="title useIt"> <a style="color: black;" href="http://nepalmonitor.org/reports/view/<?php echo $a['id'];?>" target="_blank"><?php echo $a['title'];?></a><small class="text-muted" style="color:808080;"> <?php echo date("d-m-Y", strtotime($a['eventdate']));?></small></span>
                        <!-- <p useIt>Ward member assaulted over relief distribution</p> -->
                        
                      </div>
                    </div>
                  <?php } ?>                  
                 
                  </div>
                </div>
                <div class="card-footer text-center ">
                  <a href="http://nepalmonitor.org" target="_blank" class="uppercase text-dark">View All Incident</a>
                </div>
              </div></div>
          <div class="col-lg-9">
              <div class=" card">
              <div class="card-header nonPrint">
                <h3 class="card-title">
                  <strong>Violent and Other Incidents Surrounding
COVID-19 in Nepal</strong></h3>

              </div>


              <div class="card-body" style="padding: 0 !important;">
               <div class="row">
                <div class="col-lg-10" id="printMap">
                <div id='map'></div>
           
                <div id="state-legend" class="legend" >
                  
                  <span><span style="background-color: #c7dfdd"></span>0</span>
                  <span><span style="background-color: #78a5a2"></span>10</span>
                  <span><span style="background-color: #679895"></span>30</span>
                  <span><span style="background-color: #508a87"></span>50</span>
                  <span><span style="background-color: #41837f"></span>100</span>
                  <span><span style="background-color: #317b76"></span>200</span>
                  <span><span style="background-color: #10524d"></span>300</span>
                  <span><span style="background-color: #0a3d39"></span>1K</span>
                  Highest  Incident
                </div>
              </div>
              <div class="col-lg-2" id="mapRight" style="background-color: #a9c8ec;margin-left:-15px;">
              
              </div>
            </div>
            </div>
              </div>
              
            </div>
          </div>
         
        </div>
    </section>
     <section class="line-chartdata nonPrint">
        <div class="container-fluid">
          <div class="row">
           <div class="col-lg-6" id='suicideData'>
         
            </div>

               <div class="col-lg-6 " id = 'barChartData'> 


            </div>

  
          </div>
        </div>

      </section>
     <section class="services and contact nonPrint">
        <div class="container-fluid">
          <div class="row">
            <div class="col-lg-6">
          <div class="card card-success">
                  <div class="card-header">
                    <h3 class="card-title text-center useIt"><strong>Incidents of GBV</strong></h3>
                  </div>
                  <div class="card-body" >
                    <div class="chart">
                                      <canvas id="lineChart" style="
                        min-height: 299px;
                        height: 250px;
                        max-height: 250px;
                        width: 100%;
                      " class="chartjs-render-monitor"
                                        ></canvas>
                    </div>
                  </div>
                   
                </div> 
              </div>
                <div class="col-lg-6" id="provinceChartHere">
                 
                </div>
            <div class="col-lg-4">
              <!-- Sscope of monitoring -->
              <div class="card card-success">
                <div class="card-header">
                  <h3 class="card-title" style="font-size: 16px;">
                    <strong>Scope of Monitoring</strong>
                  </h3>
                </div>
                <div class="card-body" style="height:366px;">
                  <div class="content-about">
                    <i>Note: This dashboard displays incidents reported across Nepal
                      amid COVID-19. Incidents largely based on the following
                      categories are monitored.</i>
                  </div>
                  <br />
                  <div class="content-about">
                    <ul id="myUL">
                      <li><span class="caret">Direct Physical Violence</span>
                      </li>
                      <li><span class="caret">Governance</span>
                        <ul class="nested">
                          <li>Relief Distribution
                          <li>Migrant workers</li>
                          <li>Corruption/black marketing</li>
                          <li>Health Service</li>
                        </ul>
                      </li>
                      <li><span class="caret">GBV</span>
                      </li>
                      <li><span class="caret">Stigma and Discrimination</span>
                      </li>
                      <li><span class="caret">Control of information</span>
                      </li>
                      <li><span class="caret">Confidentiality Disclose</span>
                      </li>
                    </ul>
                    <br />
                    <p>*Incident in the context of this system means any Direct
                      Physical Violence and Non-Violent Contestations. </p>
                  </div>
                  <div class="row" style="margin-left:60px;">
               
             
            </div>
                </div>
                
              </div>
            </div>
              <div class="col-lg-4" >
                <!-- DONUT CHART -->
                <div class="card card-success">
                  <div class="card-header">
                    <h3 class="card-title" style="font-size: 16px;">
                    <strong> User Survey Response</strong>
                    </h3>
                  </div>
                  <div class="card-body useIt" style="height:366px;">
                    Are you satisfied with Government's effort against Covid-19?
                    <canvas id="donutChart" style=" padding-top:20px;
                                      min-height: 265px;
                                      height: 265px;
                                      max-height: 265px;
                                      max-width: 100%;
                                      
                      "></canvas>
                  </div>
                  <!-- /.card-body -->
                
                  <!-- /.card -->
                </div> 
                   <div class="col-lg-4">
                
              </div>    
            </div>
                 <div class="col-lg-4">
                <!-- DONUT CHART -->
             
              
                <div class="card card-success">
                  <div class="card-header">
                    <h3 class="card-title" style="font-size: 16px;">
                      <strong>Services and Contacts</strong>
                    </h3>
                  </div>
                  <div class="card-body" style="height:366px;">
              
                  
            <li class="list-group-item useIt">
              <i class="fa fa-lock mr-4 pr-3"></i><a href="#" data-toggle="modal" data-target="#policeModal"> Nepal Police</a>
            </li>
            <li class="list-group-item useIt">
              <i class="fas fa-h-square mr-5"></i><a href="#" data-toggle="modal" data-target="#hospitalModal">Hospitals</a>
            </li>
            <li class="list-group-item useIt">
              <i class="fas fa-medkit mr-5"></i><a href="#" data-toggle="modal" data-target="#psychologyModal" style="margin-left:-36px;">Psychological Support</a>
            </li>
            <li class="list-group-item useIt" >
              <i class="fas fa-female mr-5"></i><a href="#" data-toggle="modal" data-target="#humanModal" style="margin-left:-36px;">Human Rights Organizations</a>
            </li>
            <li class="list-group-item useIt">
             <i class="fas fa-gavel mr-5"></i><a href="#" data-toggle="modal" data-target="#legalModal">Legal Support</a>
            </li>
       
           
                  </div>
                  
                </div>     
            
               
            </div>
          </div>
        </div>
      </section>
  </div>

   <div class="modal fade" id="aboutModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">About this Dashboard</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body useIt">
      <p align="justify">
       COVID-19 Dashboard is an online and open platform to share and demonstrate any violent and latent incidents amid COVID-19 in Nepal. This dashboard incorporates but not limited to incidents surrounding GBV, suicide cases, enforcing lockdown, quarantine implementation, relief distribution, irregularities in the commodity market, access to health service, prejudice & discrimination. It is a system designed to alert local organizations and concerned stakeholders to human rights violations and security incidents happening amid COVID-19. This also includes various reports, analysis and service providers’ information.
      </p>
 
           </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        
      </div>
    </div>
  </div>
</div>
    <div class="modal fade" id="policeModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Nepal Police</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
      <?php while($p = mysqli_fetch_array($pol))
                            { ?>
                        <ul class="nepal_police_contact">
                          <li><strong><?php echo $p['name'];?></strong></li> 
                          <li><i class="fas fa-map-marker-alt"></i> <?php echo $p['address'];?></li> 
                          <li><i class="fas fa-phone-square-alt"></i> <?php echo $p['phone'];?></li>
                          <li><i class="fas fa-globe"></i> <a target="_blank" href="<?php echo $p['website'];?>"><?php echo $p['website'];?></a></li>
                          <li><i class="fas fa-envelope"></i> <?php echo $p['email'];?></li>

                        </ul>

                <?php } echo "<hr>"; ?>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="psychologyModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Psychological Aid</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
      <?php while($p = mysqli_fetch_array($psy))
                            { ?>
                        <ul class="nepal_police_contact">
                          <li><strong><?php echo $p['name'];?></strong></li> 
                          <li><i class="fas fa-map-marker-alt"></i> <?php echo $p['address'];?></li> 
                          <li><i class="fas fa-phone-square-alt"></i> <?php echo $p['phone'];?></li>
                          <li><i class="fas fa-globe"></i> <a target="_blank" href="<?php echo $p['website'];?>"><?php echo $p['website'];?></a></li>
                          <li><i class="fas fa-envelope"></i> <?php echo $p['email'];?></li>

                        </ul>

                <?php } echo "<hr>"; ?>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="humanModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Human Rights Organizations</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
      <?php while($p = mysqli_fetch_array($hum))
                            { ?>
                        <ul class="nepal_police_contact">
                          <li><strong><?php echo $p['name'];?></strong></li> 
                          <li><i class="fas fa-map-marker-alt"></i> <?php echo $p['address'];?></li> 
                          <li><i class="fas fa-phone-square-alt"></i> <?php echo $p['phone'];?></li>
                          <li><i class="fas fa-globe"></i> <a target="_blank" href="<?php echo $p['website'];?>"><?php echo $p['website'];?></a></li>
                          <li><i class="fas fa-envelope"></i> <?php echo $p['email'];?></li>

                        </ul>

                <?php } echo "<hr>"; ?>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="legalModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Legal Aid</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
      <?php while($p = mysqli_fetch_array($leg))
                            { ?>
                        <ul class="nepal_police_contact">
                          <li><strong><?php echo $p['name'];?></strong></li> 
                          <li><i class="fas fa-map-marker-alt"></i> <?php echo $p['address'];?></li> 
                          <li><i class="fas fa-phone-square-alt"></i> <?php echo $p['phone'];?></li>
                          <li><i class="fas fa-globe"></i> <a target="_blank" href="<?php echo $p['website'];?>"><?php echo $p['website'];?></a></li>
                          <li><i class="fas fa-envelope"></i> <?php echo $p['email'];?></li>

                        </ul>

                <?php } echo "<hr>"; ?>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="hospitalModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Hospitals</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
      <?php while($p = mysqli_fetch_array($hos))
                            { ?>
                        <ul class="nepal_police_contact">
                          <li><strong><?php echo $p['name'];?></strong></li> 
                          <li><i class="fas fa-map-marker-alt"></i> <?php echo $p['address'];?></li> 
                          <li><i class="fas fa-phone-square-alt"></i> <?php echo $p['phone'];?></li>
                          <li><i class="fas fa-globe"></i> <a target="_blank" href="<?php echo $p['website'];?>"><?php echo $p['website'];?></a></li>
                          <li><i class="fas fa-envelope"></i> <?php echo $p['email'];?></li>

                        </ul>

                <?php } echo "<hr>"; ?>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        
      </div>
    </div>
  </div>
</div>

  <!-- Jquery JS-->
  <script src="js/jquery.min.js"></script>
  <script src="js/jquery-migrate.min.js"></script>
  <!-- Popper JS-->
  <script src="js/popper.min.js"></script>
  <!-- Bootstrap JS-->
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
    integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous">
  </script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
    integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous">
  </script>
<script src="js/main.js"></script>
  <!-- Province map JS-->
  <script src="js/province.js"></script>
  <script src="js/province-select.js"></script>

  <!-- District map JS-->
  <script src="js/districts.js"></script>
  <script src="js/district-select.js"></script>

  <!-- Handle data change-->
  <script src="js/data-select.js"></script>
  <script src="js/data-select-change.js"></script>
  <script src="js/data-load.js"></script>

  <!-- Handle date picker change-->
  <script src="js/date-picker-select.js"></script>

  <!-- Toaster to show messages -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>

  <!-- chartjs -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>

  <script src='https://api.mapbox.com/mapbox-gl-js/v1.8.1/mapbox-gl.js'></script>
  <!-- Bootstrap select JS-->
  <script src="js/bootstrap-select.js"></script>

  <!-- Date range picker -->
  <script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
 <!-- <script src="js/jQuery.print.js"></script> -->
  <script>
    var cache = {
      prov1Geo: {},
      prov2Geo: {},
      prov3Geo: {},
      prov4Geo: {},
      prov5Geo: {},
      prov6Geo: {},
      prov7Geo: {}
    }
    var nepalGeo
    $(function () {
      $('input[name="daterange"]').daterangepicker({
        opens: 'left',
        startDate: '2020-02-01',
        ranges: {
          'Today': [moment(), moment()],
          'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
          'Last 7 Days': [moment().subtract(6, 'days'), moment()],
          'Last 30 Days': [moment().subtract(29, 'days'), moment()],
          'This Month': [moment().startOf('month'), moment().endOf('month')],
          'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf(
            'month')]
        },
        endDate: moment().format("YYYY-MM-DD"),
        showDropdowns: true,
        locale: {
          format: 'YYYY-MM-DD'
        }
      }, function (start, end, label) {
        var startDate = start.format('YYYY-MM-DD');
        var endDate = end.format('YYYY-MM-DD');
        // console.log("A new date selection was made: " + start.format('YYYY-MM-DD') + ' to ' + end.format(
        //   'YYYY-MM-DD'));
        changeDatePicker(startDate, endDate)
      });
    });

    function convertToObject(array, key) {
      return array.reduce((result, currentValue) => {
        result[currentValue[key]] = currentValue;
        return result;
      }, {});
    }

    function isEmptyObject(obj) {
      for (var key in obj) {
        if (obj.hasOwnProperty(key))
          return false;
      }
      return true;
    }

    mapboxgl.accessToken =
      'pk.eyJ1IjoiaGFycnkxMjM0OTgiLCJhIjoiY2s4OXh1c3BqMGFsZzNvbXA3YmYyaGFhYSJ9.wmVMiMxlSqpzJPsj-UXr3Q';
    var hoveredStateId = null;

    var map = new mapboxgl.Map({
      container: 'map',
      style: 'mapbox://styles/mapbox/light-v10',
      glyphs: "mapbox://fonts/mapbox/{fontstack}/{range}.pbf",
      center: {
        lat: 28.3949,
        lng: 84.1240
      },
      zoom: 6,
      minZoom: 6,
      preserveDrawingBuffer: true // required for the map's canvas to be exported to a PNG
    });
    map.addControl(new mapboxgl.NavigationControl(), 'top-left');
    map.loadImage('https://maps.gstatic.com/mapfiles/api-3/images/spotlight-poi2.png',function(error, image) {
      if (error) throw error;
      map.addImage('marker', image);
    })
    $('#district-select').prop('disabled', true);

    const roundOff = (value, point = 2) => {
      if (value === 0) {
        return 0
      }
      var num = parseFloat(value)
      return num.toFixed(point)
    }


    // provURL



  </script>
  <script>
var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
  showSlides(slideIndex += n);
}

function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("dot");
  if (n > slides.length) {slideIndex = 1}    
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";  
  }
  for (i = 0; i < dots.length; i++) {
      dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";  
  dots[slideIndex-1].className += " active";
}

//others

var slideIndex1 = 1;
showSlides1(slideIndex1);

function plusSlides1(x) {
  showSlides1(slideIndex1 += x);
}

function currentSlide1(x) {
  showSlides1(slideIndex1 = x);
}

function showSlides1(x) {
  var j;
  var slides1 = document.getElementsByClassName("mySlides1");
  var dots1 = document.getElementsByClassName("dot1");
  if (n > slides1.length) {slideIndex1 = 1}    
  if (n < 1) {slideIndex1 = slides1.length}
  for (j = 0; j < slides1.length; j++) {
      slides1[i].style.display = "none";  
  }
  for (j = 0; j < dots.length; j++) {
      dots1[i].className = dots1[i].className.replace(" active", "");
  }
  slides1[slideIndex1-1].style.display = "block";  
  dots1[slideIndex1-1].className += " active";
}
$(document).ready(function () {
  //alert(1);
})

function countViews(id,type){

$.ajax({
    url: 'viewcount.php?id='+id+'&type='+type,
    type: 'get',
    data: "{}",
    async: false,

    dataType: 'json',
    contentType: "application/json; charset=utf-8",
    success: function(response) {
      var result = response;
      caseArray = result;    
    },

    error: function(xmlHttpRequest, textStatus, errorThrown) {
       //alert(errorThrown);
       //alert(textStatus);

    }
  });

}
</script>

</body>

</html>
