<?php include "con.php"; ?>
<!doctype html>
<html lang="en">
  	<head>
        <script type="text/javascript">
        function load()
        {
        setTimeout("window.open(self.location, '_self');", 52475);
        }
        </script>
	    <!-- Required meta tags -->
	    <meta charset="utf-8">
	    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

	    <!-- Bootstrap CSS -->
	    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
	    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
	    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.css">
	    <link rel="stylesheet" href="css/dev.css">


	    <title>Pemerintah Kalurahan Pleret</title>
  	</head>
  	<body onload="load()" >
    	
    	<div id="wrapper">

    		<div id="wrapper-left">
    			<div class="row ">
    				<div class="col-md-6">
    					<h1 class="m-0">Aktifitas Pamong Kalurahan Pleret</h1>
    				</div>
    				<div class="col-md-5">
                      


                    <div class="col-12 mb-5">
                        <div class="card box-shadow border-0 radius">
                            <div style="text-align:center;padding:1em 0;"> <iframe scrolling="no" overflow:hidden; src="https://www.zeitverschiebung.net/clock-widget-iframe-v2?language=en&size=medium&timezone=Asia%2FJakarta" width="100%" height="100" frameborder="0" seamless></iframe> </div>
                        </div>
                    </div>
               
    				</div>
    			</div>
    			<div class="row mb-4">
    				<div class="col-md-12 mb-3 d-flex justify-content-between">
    					
                        <h5>JAM KERJA PUKUL 07:30 - 15:30 WIB</h5>
                     
    				</div>
    				<div class="col-md-12">
                        <div class="row d-none-child" id="kelas">



                             <?php
                            $sql = "SELECT * FROM v_status";
                            $result = $conn->query($sql);

                            if ($result->num_rows > 0) {
                              // output data of each row
                              while($row = $result->fetch_assoc()) {
                                    if($row['jumlah']==0){
                                         $bg='bg-primary';
                                         $status='Belum Hadir';
                                    } else if($row['jumlah'] % 2 ==0){
                                        $bg='bg-danger';
                                            if($row['pulang'] < '14:30:00'){
                                                $status= 'Sedang diluar Kantor';
                                            } else {
                                                $status= 'Pulang Pukul <strong>'.$row['pulang'].'</strong>';
                                            }
                                    } else {
                                        $bg='bg-success';
                                        $status='Di Kantor';
                                    }
                                ?>

                            

                                    <div class="col-md-6 mb-4 row-item <?=$bg?> ">
                                <div class="card box-shadow border-0 radius " style=" height: 250px;">
                                    <div class="card-body pl-0 pt-0 pb-0">
                                        <div class="d-flex bd-highlight">
                                            <div class="bd-highlight pr-2 img-users" >
                                                 <?php 

                                                if($row['gambar']!='-'){ ?>
                                                     <img src="<?=$row['gambar']?>" class="rounded float-left radius" alt="..." height="190px">
                                                <?php } else { ?>
                                                <img src="<?=$row['foto']?>" class="rounded float-left radius" alt="..." height="190px">
                                                <?php } ?>
                                                 <span class="status <?=$bg?>"></span>
                                                 <span><font color="white"><strong><br/>Scan:  <?=$row['masuk']?></strong></font></span>
                                            </div>
                                            

                                            
                                            
                                            <div class="ml-auto p-2 bd-highlight">
                                                <div class="text-right">
                                                    <i class="material-icons md-24 text-warning align-middle mb-1 mr-2"></i>
                                                    <strong class="d-block"><?=$row['nama']?></strong>
                                                    <span class="text-muted"><?=str_replace("Kalurahan", "",str_replace("Honorer", "", $row['jabatan']))?></span>
                                                    <span class="text-muted" >
                                                        <table width="100%" border="0">
                                                            <tr>
                                                                <td width="30%">
                                                                    &nbsp;
                                                                </td>
                                                                <td>
                                                                    <?php if($row['status']!='-'){ ?>
                                                     <br/><b>[<?=$row['jam']?>]</b> sedang <strong>"<?=$row['status']?>"</strong>
                                                     <?php } ?>  
                                                                </td>
                                                            </tr>
                                                        </table>
                                                        
                                                    </span>
                                                </div>
                                                <div class="text-right">
                                                    <span class="<?=$bg?>">
                                                    <strong><font color="white">&nbsp;&nbsp;<?=$status?>&nbsp;&nbsp;</font></strong>
                                                    </span>
                                                </div>
                                            </div>
                                                
                                            <?php 

                                            if($row['gambar']!='-'){ ?>
                                            <!--<div class="ml-auto p-2 bd-highlight">
                                            <div class="bd-highlight pr-2">
                                                <img src="<?=$row['gambar']?>" class="rounded float-left radius" alt="..." height="90px">
                                            </div>
                                        </div>-->
                                            <?php } ?>

                                        </div>
                                        
                                    </div>
                                </div>
                            </div>



                            <?php

                                }
                            } else {
                              //echo "0 results";
                            }
                           
                            ?>

                            
                           
                           
                         
                    
                        </div>            
                    </div>
    			</div>
                <!--
    			<div class="row">
    				<div class="col-md-5">
    					<h5>Hari ini</h5>
    					<div class="card box-shadow border-0 radius mt-4">
    					  	<div class="card-body">
    					  		<canvas id="myChart-doughnut" height="200"></canvas>
    					  	</div>
    					</div>
    				</div>
    				<div class="col-md-7">
    					<h5>Minggu ini</h5>
    					<div class="card box-shadow border-0 radius mt-4">
    					  	<div class="card-body">
    					  		<canvas id="myChart-bar" height="135"></canvas>
    					  	</div>
    					</div>
    				</div>
    			</div>
            -->
    		</div>

    		<div id="wrapper-right">
    			<!--
                <div class="row mb-4">
    				<div class="col-12 mb-3">
    					<div class="card box-shadow border-0 radius">
    						<div style="text-align:center;padding:1em 0;"> <iframe overflow:hidden; src="https://www.zeitverschiebung.net/clock-widget-iframe-v2?language=en&size=medium&timezone=Asia%2FJakarta" width="100%" height="140" frameborder="0" seamless></iframe> </div>
    					</div>
    				</div>
    			</div>
            -->
    			<div class="row mb-4">
    				<div class="col-12 mb-4">
    					<div class="d-flex justify-content-between align-items-center">
    						<div class="w-100 d-flex bd-highlight mb-3">
    						  	<div class="p-2 bd-highlight">
    						  		<h5 class="m-0">Agenda</h5>
    						  	</div>
    						  	<div class="p-2 bd-highlight align-self-center">
    						  		<span class="badge bg-white d-block"></span>
    						  	</div>
    						  	<div class="ml-auto p-2 bd-highlight">
    						  		<!--<a href="#">
    						  			<span class="text-muted">Lihat semua</span>
    						  			<i class="material-icons mb-18 align-middle text-muted">chevron_right</i>
    						  		</a>-->
    						  	</div>
    						</div>
    					</div>
    				</div>
    				<div class="col-12">
    					<ul type="none" class="m-0 p-0 d-none-list" id="agenda">
                            
                            <?php
                            $sql = "SELECT * FROM v_agenda";
                            $result = $conn->query($sql);

                            if ($result->num_rows > 0) {
                              // output data of each row
                              while($row = $result->fetch_assoc()) {
                                ?>

                            <li class="justify-content-between mb-2 ">
                                <div class="w-100 d-flex bd-highlight">
                                    <div class="p-2 bd-highlight">
                                        
                                            <img width="100" src="<?=$row["foto"]?>">
                                        
                                    </div>
                                    <div class="p-2 bd-highlight">
                                        <strong class="d-block"><?=$row["lokasi"]?></strong>
                                        <span class="text-muted"><?=$row["isi_singkat"]?></span>
                                    </div>
                                    <div class="ml-auto p-2 bd-highlight">
                                        <span class="text-muted pt-2"><?=$row["hari"]?></span>
                                        <span class="text-muted pt-2"><?=$row["jam"]?></span>
                                    </div>
                                </div>
                            </li>
                            <?php

                                }
                            } else {
                              //echo "0 results";
                            }
                            $conn->close();
                            ?>
    					</ul>
    				</div>
    			</div>
                <!--
    			<div class="row mb-4">
    				<div class="col-12 mb-4">
    					<div class="d-flex justify-content-between align-items-center">
	    					<h5 class="m-0">Status</h5>
	    					<a href="#">
	    						<span class="text-muted">Lihat semua</span>
	    						<i class="material-icons mb-18 align-middle text-muted">chevron_right</i>
	    					</a>
    					</div>
    				</div>
    				<div class="col-12 mb-3">
    					<div class="row d-none-child" id="guru">
                            <div class="col-3 mb-3">
                                <div class="img-users">
                                    <img src="img/user-1.png">
                                    <span class="status bg-primary"></span>
                                </div>
                            </div>
                            <div class="col-3 mb-3">
                                <div class="img-users">
                                    <img src="img/user-2.png">
                                    <span class="status bg-primary"></span>
                                </div>
                            </div>
                            <div class="col-3 mb-3">
                                <div class="img-users">
                                    <img src="img/user-3.png">
                                    <span class="status bg-primary"></span>
                                </div>
                            </div>
                            <div class="col-3 mb-3">
                                <div class="img-users">
                                    <img src="img/user-4.png">
                                    <span class="status bg-danger"></span>
                                </div>
                            </div>
                            <div class="col-3 mb-3">
                                <div class="img-users">
                                    <img src="img/user-5.png">
                                    <span class="status bg-primary"></span>
                                </div>
                            </div>
                            <div class="col-3 mb-3">
                                <div class="img-users">
                                    <img src="img/user-1.png">
                                    <span class="status bg-primary"></span>
                                </div>
                            </div>
                            <div class="col-3 mb-3">
                                <div class="img-users">
                                    <img src="img/user-2.png">
                                    <span class="status bg-primary"></span>
                                </div>
                            </div>
                            <div class="col-3 mb-3">
                                <div class="img-users">
                                    <img src="img/user-3.png">
                                    <span class="status bg-primary"></span>
                                </div>
                            </div>
                            <div class="col-3 mb-3">
                                <div class="img-users">
                                    <img src="img/user-4.png">
                                    <span class="status bg-danger"></span>
                                </div>
                            </div>
                            <div class="col-3 mb-3">
                                <div class="img-users">
                                    <img src="img/user-5.png">
                                    <span class="status bg-primary"></span>
                                </div>
                            </div>
    						<div class="col-3 mb-3">
    							<div class="img-users">
    								<img src="img/user-1.png">
    								<span class="status bg-primary"></span>
    							</div>
    						</div>
    						<div class="col-3 mb-3">
    							<div class="img-users">
    								<img src="img/user-2.png">
    								<span class="status bg-primary"></span>
    							</div>
    						</div>
    						<div class="col-3 mb-3">
    							<div class="img-users">
    								<img src="img/user-3.png">
    								<span class="status bg-primary"></span>
    							</div>
    						</div>
    						<div class="col-3 mb-3">
    							<div class="img-users">
    								<img src="img/user-4.png">
    								<span class="status bg-danger"></span>
    							</div>
    						</div>
    						<div class="col-3 mb-3">
    							<div class="img-users">
    								<img src="img/user-5.png">
    								<span class="status bg-primary"></span>
    							</div>
    						</div>
    						
    					</div>
    				</div>
    			</div>
            -->
    		</div>

    	</div>

	    <!-- Optional JavaScript -->
	    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
	    <!-- <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> -->
	    <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
	    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  		<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
        <script src="js/chart.js"></script>
        <script src="js/app.js"></script>
        <script>

            /*
            *
            * Function showElement untuk menampilkan elemen data 
            * dengan limit dan interval waktu.
            *
            * struktur = showElemen($target, $limit, $interval)
            *
            * $target = target dari elemen container-nya + elemen child
            * contoh => '#kelas > div'
            *
            * $limit = Panjang elemen child yang ditampilkan setiap interval
            *
            * $interval = Atur interval (1000 = 1 menit)
            */

            showElement('#kelas > div', 4, 7500);
            showElement('#agenda > li', 2, 15000);
          //  showElement('#guru > div', 8, 10000);
        </script>
  	</body>
</html>