<?php
define("BASEPATH", dirname(__FILE__));
session_start();
if(!isset($_SESSION['siswa'])) {
   header('location:./index.php');
}

?>
<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>E - Voting</title>
      <link rel="icon" href="images/OSIS.png">
      <link rel="stylesheet" href="./assets/css/bootstrap.min.css"/>
      <link rel="stylesheet" href="./assets/css/animate.css"/>
      <style media="screen">
         body::before {
		  content: "";		
		  display: block;
		  position: absolute;
		  z-index: -1;
		  width: 100%;
		  height: 100%;
		  top: 0;
		  left: 0;
		  background: aqua;
		  background: -webkit-linear-gradient(top, aqua, grey);
		  background: -o-linear-gradient(top, aqua, grey);
		  background: -moz-linear-gradient(top, aqua, grey);
		  background: linear-gradient(top, aqua, grey);
		  opacity: 0.9; 
		 }
		 body{
		  width: 100%;  
		  min-height: 100vh;
		  display: -webkit-box;
		  display: -webkit-flex;
		  display: -moz-box;
		  display: -ms-flexbox;
		  display: flex;
		  flex-wrap: wrap;
		  justify-content: center;
		  align-items: center;
		  padding: 15px;
		  background-repeat: no-repeat;
		  background-size: cover;
		  background-position: center;
		  
		  position: relative;
		  z-index: 1;
		}
		  .hr {
			  max-width: 420px;
			  margin: 12px auto 32px;
		  }
.kandidat-row {
  display: flex;
  flex-wrap: wrap;
}
.kandidat-item {
  margin-bottom: 24px;
}
.kandidat-card {
  width: 100%;
  min-height: 100%;
  margin: 0 auto;
  text-align: center;
  padding: 14px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.22);
  display: flex;
  flex-direction: column;
}
.card-img {
  width: 100%;
  height: 300px;
  object-fit: cover;
}
.candidate-name {
  font-size: 20px;
  color: white;
  margin: 12px 0 8px;
  text-shadow: 1px 2px 1px black;
  min-height: 58px;
  line-height: 1.3;
}
.candidate-role {
  color: white;
  margin: 0 0 12px;
  min-height: 20px;
}

.title {
  color: grey;
  font-size: 18px;
}

.btn-lihat {
  border-color: aqua;
  outline: 0;
  display: inline-block;
  padding: 8px;
  background-color: transparent;
  color: white;
  text-align: center;
  cursor: pointer;
  width: 100%;
  font-size: 18px;
  border-radius: 5px;
  margin-top: auto;
}

a {
  text-decoration: none;
  font-size: 22px;
  color: black;
}

img {
	border-radius: 5px;
}

.btn-lihat:hover {
		  background: aqua;
		  background: -webkit-linear-gradient(top, aqua, grey);
		  background: -o-linear-gradient(top, aqua, grey);
		  background: -moz-linear-gradient(top, aqua, grey);
		  background: linear-gradient(top, aqua, grey);
		  opacity: 0.9; 
}
.top-actions {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 8px;
}
.btn-logout {
  border: 1px solid #ffffff;
  color: white;
  padding: 8px 14px;
  border-radius: 5px;
  font-size: 14px;
  text-decoration: none;
  background: rgba(0, 0, 0, 0.25);
}
.btn-logout:hover {
  color: white;
  text-decoration: none;
  background: rgba(0, 0, 0, 0.4);
}

      </style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
   </head>
   <body style="background-image: url('images/kepsek.jpeg'); background-size: 1500px 700px;">
      <div class="container" >
         <div class="top-actions">
            <a href="./logout.php" class="btn-logout">Logout Pemilih</a>
         </div>
         <center>
         <?php
         require('./include/connection.php');

         $thn     = date('Y');
         $dpn     = date('Y') + 1;
         $periode = $thn.'/'.$dpn;
		 $no = 1;
         $sql = $con->prepare("SELECT * FROM t_kandidat WHERE periode = ?") or die($con->error);
         $sql->bind_param('s', $periode);
         $sql->execute();
         $sql->store_result();
         if ($sql->num_rows() > 0) {
            $numb = $sql->num_rows();
            echo '<div class="text-center " style="margin-top:0px;">
                     <h2 style="color: white;margin-top:-0px; text-shadow: 2px 2px 2px black;">Daftar Calon Ketua Osis Periode '.$periode.'</h2>
                  <hr class="hr" / style="margin-bottom: 50px;">
                  </div>	
				  
				  ';

            echo '<div class="row kandidat-row">';

               for ($i = 1; $i <= $numb; $i++) {
                  $sql->bind_result($id, $nama, $foto, $visi, $misi, $suara, $periode, $program, $no_k);
                  $sql->fetch();
         ?>
                  <div class="col-sm-6 col-md-4 kandidat-item">
                    <section class="wow fadeInDown" data-wow-delay="<?php echo $i; ?>s">
                      <div class="athumbnail"> 
						<div class="kandidat-card">
						  <img src="./assets/img/kandidat/<?php echo $foto; ?>" alt="<?php echo $nama; ?>" class="card-img">
						  <p class="candidate-name"><?php echo strtoupper($nama); ?></p>
						  <h6 class="candidate-role">KANDIDAT KETUA OSIS</h6>
						  <a href="./detail.php?id=<?php echo $id; ?>"><button class="btn-lihat">LIHAT</button></a>
						</div>

                     </section>
                  </div>

         <?php
               }

            echo '</div>';

         } else {

            echo '<div class="callout warning">
                     <h2>Belum Ada Calon Ketua</h2>
                  </div>';
         }

         ?>
      </div>
      </center>
      <script type="text/javascript" src="./assets/js/jquery.js"></script>
      <script type="text/javascript" src="./assets/js/wow.js"></script>
      <script type="text/javascript">
         wow = new WOW(
            {
               animateClass: 'animated',
               offset:100,
               callback:function(box) {
                  console.log("WOW: animating <" + box.tagName.toLowerCase() + ">")
               }
            }
         );
         wow.init();
      </script>
   </body>
</html>
