<?php
header('Content-Type: text/html; charset=UTF-8');
include("db_connect.php");
	
$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 = 20 order by eventdate desc limit 10");
$incidents1 = mysqli_query($db,"select * from balo_incidents order by date desc");


?>
<!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>Civic Space</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" />


  <style type="text/css">

.streamline{
 padding-left: 2%;
}
.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: 7px;">
      </div>
    </div>
    <section class="content">
      <div class="container-fluid">
        <div class="row">
          <div class="col-lg-12 col-md-12">
            <!-- Uncomment me for production -->
            <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">
              Monitoring Civic Space Trends 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 Civic Space related Incidents</option>
                    <option value="hea">Freedom of Expression</option>
                    <option value="irr">Freedom of Association</option>
                    <option value="pre">Freedom of Assembly</option>
                    <option value="lock">Solidarity and Diversity</option>
                    <option value="qua">Dialogue and Consultation</option>
                    <!-- <option value="covid">Covid19</option> -->
                    <option value="rel">Personal Safety and Well Being</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="https://www.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="https://www.nepalmonitor.org/reports" 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>Nepal - Civic Space Updates</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" >
                  <div class="legend-internal">
                    <span><span style="background-color: #e71d26"></span>Closed</span>
                    <span><span style="background-color: #f6ab17"></span>Obstructed</span>
                    <span><span style="background-color: #009d5c"></span>Open</span>
                    <span><span style="background-color: #acaf3d"></span>Narrowed</span>
                    <span><span style="background-color: #e46c16"></span>Repressed</span>
                  </div>
                </div>
              </div>
              <div class="col-lg-2" id="mapRight" class="mapRight">
              </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 id="civicMonthText">Civic Space Related Incidents By Month</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>
        </div>
      </section>

      <section class="nonPrint">
        <div class="container-fluid">
          <div class="row">
            <div class="col-lg-9">
              <div class="col-lg-2">
               
              </div>
                  <div class=" card">
                    <div class="card-header nonPrint">
                      <h3 class="card-title"><strong>Balochistan - Civic Space Updates </strong></h3>
                    </div>


                       <div class="row">
                        <div class="card-body col-lg-8" style="padding: 0 !important;">
                          <div style="z-index:9;position:absolute;margin-left:6%">
                            <div class="form-group">
                             
                              <select  class="selectpicker" id="bol-dist-select" data-live-search="true" data-style="select-border"
                                title="Select District"   data-allow-clear="true"
                                onchange="changeBolDistrict(this);">
                                <em></em>
                                <option value=1> Awaran </option>
                                <option value=2> Barkhan </option>
                                <option value=3> Bolan </option>
                                <option value=4> Chagai </option>
                                <option value=5> Dera Bugti </option>
                                <option value=6> Gwadar </option>
                                <option value=7> Jaffarabad </option>
                                <option value=8> Jhal Magsi </option>
                                <option value=9> Kalat </option>
                                <option value=10> Kech </option>
                                <option value=11> Kharan </option>
                                <option value=12> Khuzdar </option>
                                <option value=13> Killa Abdullah </option>
                                <option value=14> Killa Saifullah </option>
                                <option value=15> Kohlui </option>
                                <option value=16> Lasbela </option>
                                <option value=17> Loralai </option>
                                <option value=18> Mastung </option>
                                <option value=19> Musakhel </option>
                                <option value=20> Nasirabad </option>
                                <option value=21> Panjgur </option>
                                <option value=22> Pishin </option>
                                <option value=23> Quetta </option>
                                <option value=24> Sibi </option>
                                <option value=25> Zhob </option>
                                <option value=26> Ziarat </option>
                                
                              </select>
                            </div>
                          </div>
                          <div id='bolMap' class="bol-map"> </div>
                          <div id="bol-legend" class="legend" >
                        </div>
                        
                        </div>

                        <div class="col-lg-4">
                        <div class="card-body" style="padding: 0 !important;height:600px;overflow-y:scroll;">
                               <div class="streamline" style='margin-top:5px;'>
                    <?php  while($a = mysqli_fetch_array($incidents1))
                                            {   ?>
                    <div class="sl-item sl-primary">
                      <div class="sl-content">
                        <span class="title useIt"> <a style="color: black;" href="<?php echo $a['link'];?>" target="_blank"><?php echo $a['title'];?></a><small class="text-muted" style="color:808080;"> <?php echo date("d-m-Y", strtotime($a['date']));?></small></span>
                        <!-- <p useIt>Ward member assaulted over relief distribution</p> -->

                      </div>
                    </div>
                  <?php } ?>
                  </div>
                 </div>
                 </div>
                </div>



          </div>
        </div>
        <div class="col-lg-3">
          <div class=" card card-success">
                    <div class="card-header nonPrint">
                      <h3 class="card-title"><strong>Videos</strong></h3>
                    </div>

                       <div class="card-body" style="height: 600px;overflow-y:scroll;">
                       <div class="row">
                       <iframe width="560" height="315" src="https://www.youtube.com/embed/9bA_d1rC3dM" title="YouTube video player" frameborder="0" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                       <br>
                      <iframe width="560" height="315" src="https://www.youtube.com/embed/FIJSXIcRVFY" title="YouTube video player" frameborder="0" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>


                </div>
              </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" style="height:285px;">
      <p align="justify" style="font-size:16px;">
       Civic-Space monitoring in Nepal Dashboard is an online and open platform to share and demonstrate any violent and non-violent incidents amid COVID-19 in Nepal. It provides trends of violent and nonviolent public contestation intending to present their impact on civic spaces in Nepal. This dashboard incorporates but is not limited to incidents surrounding shrinking civic space including the situation of freedom of speech, assembly, association, safety, and well-being of HRDs and journalists as well as demonstrates the civic space dimensions, trends, and rating in Nepal. It is a system designed to alert concerned stakeholders and organizations to human rights violations and security incidents happening amid COVID-19. This also includes various reports and analysis.
      </p>

           </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>

  <!-- 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>

<script src="js/main.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>

  <!-- BOL map JS-->
  <script src="js/balmap.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: 27.6789,
        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)
    }

     var bolschMap = new mapboxgl.Map({
            container: 'bolMap',
            style: 'mapbox://styles/mapbox/light-v10',
            glyphs: "mapbox://fonts/mapbox/{fontstack}/{range}.pbf",
            center: {
                lat: 30.602122,
                lng: 70.001581
            },
            zoom: 4.70,
            minZoom: 3,
        });
        bolschMap.addControl(new mapboxgl.NavigationControl(), 'top-left');


         bolschMap.on('load', function () {
           loadBalMap();
         })
    // 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>

