<?php
error_reporting(0);
include("db_connect.php");
$analysis = mysqli_query($db,"SELECT * FROM `analysis` WHERE id in (select analysis_id from analysis_tags where tag_id = 20)");
$resources = mysqli_query($db,"SELECT * FROM `resources` 
");
?>
<!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://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> -->
  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900" rel="stylesheet" />
  <!-- 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">

  <!-- Font Awesome CSS -->
  <!-- Font Awesome Icons -->
  <link rel="stylesheet" href="fontawesome-free/css/all.min.css">
<!--   <link rel="stylesheet" type="text/css" href="css/bootstrap-datepicker.css" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.css" />
 -->
  <link rel="stylesheet" href="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/themes/css/cartodb.css" />
  <!-- 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' />
  <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" /> -->
  <!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> -->

<!--  -->

  <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:62px;
  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;
}

.active{
    background-color: rgb(225, 231, 240);
}

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



.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="container">
  <div class="content-wrapper">
    <!-- content-header -->
    <div class="content-header">
      <div class="container-fluid" style="margin-top: 20px;">
       
      </div>
    </div>

   <h1 class="text-dark text-center website-title">
              Reports
            </h1>
 <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true" onclick="analysis()">Situation Briefs and Analysis</a>
  </li>
 <!--  <li class="nav-item">
    <a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false" onclick="resources()">Other Resources</a>
  </li> -->

</ul>
<div class="tab-content" id="pills-tabContent">
  <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">
    <div class="row">
       <div class="col-lg-3"></div>
       <div class="col-lg-6">
        <div class="card card-success">
                  <div class="card-header">
                    <h3 class="card-title text-center useIt"><strong>Analysis Reports</strong></h3>
                  </div>
                  <div class="card-body">
                        <div class="tab-content" id="nav-tabContent">
                            <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
                                
   <?php 
   $i = 1;
   while($a = mysqli_fetch_array($analysis))
                                            {  
 $cont = mysqli_query($db,"select count(*) as count from views_count where analysis_id = $a[id]");
  //$cou = mysqli_query($db,"select count(id) as count from views_count where resource_id=$a['id']");
  $count1 = mysqli_fetch_array($cont);
                                             ?>                         

<div class="mySlides">
 <!--  <div class="numbertext"><?php echo $i." / ".$t;?></div> -->
  <img src="../uploads/images/analysis/<?php echo $a['image'];?>" style="margin-top:20px; width: 385px; height: 250px; margin-left:57px;">
  <div class="text1"><a class="btn btn-success" target="_blank"  onclick="countViews(<?php echo $a['id'];?>,'analysis')"
                                                        href="../uploads/images/analysis/media/<?php echo $a['media']; ?>"
                                                         title="<?php echo $count1[count],' Views';?>"><i class="fa fa-eye"></i> View</a></div>
</div>



<a class="prev" onclick="plusSlides(-1)">&#10094;</a>
<a class="next" onclick="plusSlides(1)">&#10095;</a>
<?php $i += 1;} ?>

<br>

<div style="text-align:center">
 <?php while($a = mysqli_fetch_array($analysis))
                                            { ?>
  <span class="dot" onclick="currentSlide(<?php echo $i;?>)"></span> 
 <?php 


} ?>
</div>
                            </div>
                        <!--     <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">
                                 

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


  </div>
  <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">
    <div class="row">
    <div class="col-lg-3"></div>
    <div class="col-lg-6">
                <!-- DONUT CHART -->
                <div class="card card-success">
                  <div class="card-header">
                    <h3 class="card-title" style="font-size: 16px;">
                    <strong> Other Resources </strong>
                    </h3>
                  </div>
                  <div class="card-body useIt">
                    <?php while($res = mysqli_fetch_array($resources))
                                            { ?>
                            <li class="list-group-item useIt">
                                <div class="row">
              <div class="col-lg-1"><i class="fa fa-file mr-4 pr-3"></i></div>
              <div class="col-lg-11">
                  <a title="<?php echo $res[file];?>" href="<?php echo $res['file'];?>" target="_blank"> <?php echo $res['name'];?></a>
              </div>
              </div>
            </li>
            <?php } ?>
                  </div>
                  <!-- /.card-body -->
                
                  <!-- /.card -->
                </div> 
                </div>
                <div class="col-lg-3"></div> 
              </div>



  </div>
  
</div>     
 </div>
    </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/main.js"></script> -->
<!--  -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
    integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script>

   function analysis(){
      //alert("hello");
      var element = document.getElementById("pills-home-tab");
      element.classList.add("active");
       var element1 = document.getElementById("pills-home");
      element1.classList.add("active");
      element1.classList.add("show");
      element1.classList.add("in");

      var element = document.getElementById("pills-profile-tab");
      element.classList.remove("active");
      var element1 = document.getElementById("pills-profile");
      element1.classList.remove("active");
      element1.classList.remove("show");
      element1.classList.remove("in");
   }

    function resources(){
      //alert("hello");
      var element = document.getElementById("pills-profile-tab");
      element.classList.add("active");

      var element1 = document.getElementById("pills-profile");
      element1.classList.add("active");
      element1.classList.add("show");
      element1.classList.add("in");

      var element = document.getElementById("pills-home-tab");
       element.classList.remove("active");
       var element1 = document.getElementById("pills-home");
      element1.classList.remove("active");
      element1.classList.remove("show");
      element1.classList.remove("in");
   }
 


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



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>
