<html>
    <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        
        <title>
            Servisi javnog zdravlja
        </title>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
        <style>
.navbar {
  overflow: hidden;
  background-color: Blue;
  font-family: Arial, Helvetica, sans-serif;
}

.navbar a {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  cursor: pointer;
  font-size: 16px;  
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.navbar a:hover, .dropdown:hover .dropbtn, .dropbtn:focus {
  background-color: LightBlue;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #ddd;
}

.show {
  display: block;
}
</style>
<?php
function select_pacients_for_year($year)
{
     $conn = mysqli_connect("localhost","tagstudi_aldina","aldina1234567","tagstudi_ehealth");
   if (!mysqli_connect_errno())
   {
       
  $sql = "SELECT count(*) as broj FROM `morbili_new2` where `datum_pruzene_usluga` like '".$year."%'";
  $result= $conn->query($sql);  
  if ($result->num_rows > 0) {
   
    while($row = $result->fetch_assoc()) {
      $rezultat=$row["broj"];
     
    }
    return $rezultat;
  }
   else
      {
          echo "Zero rows!";
      }}
  else
  {
      echo "Failed to connect to MySQL: " . mysqli_connect_error();
      
  }
   
}
?>
        <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load("current", {packages:["corechart"]});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Task', 'Pregled broja pacijenata obolelih od morbila po mesecima za 2018. godinu'],
          ['Januar',     <?php echo select_pacients_for_year('2018-01');?>],
          ['Februar',      <?php echo select_pacients_for_year('2018-02');?>],
          ['Mart',      <?php echo select_pacients_for_year('2018-03');?>],
          ['April',      <?php echo select_pacients_for_year('2018-04');?>],
          ['Maj',      <?php echo select_pacients_for_year('2018-05');?>],
          ['Jun',      <?php echo select_pacients_for_year('2018-06');?>],
          ['Jul',      <?php echo select_pacients_for_year('2018-07');?>],
          ['Avgust',      <?php echo select_pacients_for_year('2018-08');?>],
          ['Septembar',      <?php echo select_pacients_for_year('2018-09');?>],
          ['Oktobar',      <?php echo select_pacients_for_year('2018-10');?>],
          ['Novembar',      <?php echo select_pacients_for_year('2018-11');?>],
          ['Decembar',      <?php echo select_pacients_for_year('2018-12');?>]
        ]);

        var options = {
          title: 'Pregled broja pacijenata obolelih od morbila po godinama po mesecima za 2018. godinu',
          pieHole: 0.0591,
        };

        var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
        chart.draw(data, options);
      }
    </script>
    </head>
    <body>
        <div id="main" align='center' style="width:80%; height:100%; margin-left:10%;margin-right:10%;">
        <div class="navbar">
            <a href="index.html">Početna</a>
               <a href="#news">Pitanja</a>
              <div class="dropdown">
              <button class="dropbtn" onclick="myFunction()">Kontrola epidemija
                <i class="fa fa-caret-down"></i>
              </button>
              <div class="dropdown-content" id="myDropdown">
                <a href="grafik1.html">Grafik 1</a>
                <a href="grafik2.html">Grafik 2</a>
                <a href="grafik3.html">Grafik 3</a>
                <a href="grafik4.html">Grafik 4</a>
              </div>
              
              </div> 
              <a href="#news">Zagađenje vazduha</a>
              <a href="#news">Anketa</a>
              <a href="#news">Prijava</a>
            </div>
            <script>
/* When the user clicks on the button, 
toggle between hiding and showing the dropdown content */
function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

// Close the dropdown if the user clicks outside of it
window.onclick = function(e) {
  if (!e.target.matches('.dropbtn')) {
  var myDropdown = document.getElementById("myDropdown");
    if (myDropdown.classList.contains('show')) {
      myDropdown.classList.remove('show');
    }
  }
}
</script>
        <div id="contents" style="width:100%; height:85%; background-color:white;">
            
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
Success!
            <div id="donutchart" style="width: 100%; height: 300px;"></div>
        </div>
        <div align='center' style="width:100%; height:5%; background-color:LightGrey;">
        | Copyright &copy;<script>document.write(new Date().getFullYear());</script> All rights reserved | 
        </div>
        </div>
    </body>
</html>