<?php
session_start();
include 'admin/koneksi/koneksi.php';
include 'include/app.php';

$skr = date('Y-m-d');
$pertanyaan = mysql_fetch_assoc(mysql_query("SELECT * from pertanyaan where  status='1' "));
?>
<!Doctype html>
<html lang="en-US">
	<head>
		<!-- ==============================================
		Title and basic Metas
		=============================================== -->
        <meta charset="utf-8">
        <title><?= $app['nama_aplikasi'];?> - <?= $app['nama_perusahaan'];?></title>
		<meta name="description" content="Survey Kepuasan Pelanggan">
		<meta name="author" content="GendhiSoftware">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!-- ==============================================
		Mobile Metas
		=============================================== -->
		<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="HandheldFriendly" content="true">
		<!-- ==============================================
		Fonts and CSS
		=============================================== -->
		<link href="css/font-awesome.min.css" rel="stylesheet" type="text/css">
		<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">
        <link href="css/style.css" rel="stylesheet" type="text/css">
		<style>
		.time{
			height:60px;
			font-size: 30px;
			line-height: 1;
			background:<?php echo $app['jam'];?>;
			color:#fff;
			padding-top: 0;
			position:fixed;
			bottom:0px;
			width:10%; 
		}
		.footer{
			height:40px;
			line-height:0px;
			background:<?php echo $app['footer'];?>;
			color:#fff;
			margin-left:0%;
			position:fixed;
			bottom:0px;
			width:100%; 
		}
		.socialize {
			background: transparent;
			padding: 3px 0 1px 0;
			position:relative ;
			margin: 0 0.5% 0.5% 0.5%;
		width:100%;
		}
		body, html {
		    top:10%;
  height: 100%;
}

.bg {
  /* The image used */
			background: url(admin/images/<?= $app['background'];?>)  no-repeat ;

  /* Full height */
  height: 100%;

  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  
}
	
		@keyframes marquee {
		  from {
			transform: translateX(0);
		  }
		  to {
			transform: translateX(-75%);
		  }
		}

		@keyframes marquee-r {
		  from {
			transform: translateX(-75%);
		  }
		  to {
			transform: translateX(0);
		  }
		}

		.marquee {
		  position: relative;
		  width: 100vw;
		  max-width: 100%;
		  height: 10em;
		  overflow: hidden;
		}

		@media screen and (max-width: 768px) {
		  .marquee {
			height: 6em;
		  }
		}

		.track {
		  position: absolute;
		  white-space: nowrap;
		  will-change: transform;
		  animation: marquee 40s linear infinite;
		}

		
		@media screen and (max-width: 768px) {
		  .marquee-text {
			font-size: 6em;
		  }
		}
		
		
        label > input{ /* Menyembunyikan radio button */
          visibility: hidden; 
          position: absolute; 
        }
        label > input + img{ /* style gambar */
          cursor:pointer;
          border:2px solid transparent;
        }
        label > input:checked + img{ /* (RADIO CHECKED) style gambar */
          border:2px solid yellow;
        }
        textarea {
    
    font-family:"Times New Roman", Times, serif;  
   font-size: 50px;   
   
}
.cb-slideshow,
.cb-slideshow:after { 
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    z-index: 0; 
}
.cb-slideshow:after { 
    content: '';
    background: transparent url(../images/pattern.png) repeat top left; 
}
.cb-slideshow li span { 
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    color: transparent;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: none;
    opacity: 0;
    z-index: 0;
    animation: imageAnimation 36s linear infinite 0s; 
}
.cb-slideshow li:nth-child(1) span { 
    background-image: url(admin/images/<?= $app['background'];?>) 
}
.cb-slideshow li:nth-child(2) span { 
    background-image: url(admin/images/<?= $app['slide1'];?>);
    animation-delay: 6s; 
}
.cb-slideshow li:nth-child(3) span { 
    background-image: url(admin/images/<?= $app['slide2'];?>);
    animation-delay: 12s; 
}
.cb-slideshow li:nth-child(4) span { 
    background-image: url(admin/images/<?= $app['slide3'];?>);
    animation-delay: 18s; 
}


@keyframes imageAnimation { 
    0% { opacity: 0; animation-timing-function: ease-in; }
    8% { opacity: 1; animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
 </style>
		<!-- ==============================================
		JS
		=============================================== -->
		<script src="js/jquery-1.10.2.min.js"></script>
        <script src="js/modernizr.custom.97074.js"></script>
		
		<!--[if lt IE 9]>
			<script src="js/selectivizr.js"></script>
            <script src="js/respond.min.js"></script>
        <![endif]-->

        <!-- ==============================================
		Favicons
		=============================================== -->
       
        <link rel="shortcut icon" href="admin/images/<?= $app['logo'];?>">
		
    </head>
    <?php if ($app['slideshow']==1){ ?>
    <ul class="cb-slideshow">
      <li><span>Image 01</span></li>
      <li><span>Image 02</span></li>
      <li><span>Image 03</span></li>
      <li><span>Image 04</span></li>
      
    </ul>
    <?php ;} ?>
    <body>
		<div class="wrapper <?php if ($app['slideshow']!=1){ echo 'bg';} ?> ">
		    				
			<section class="section home">
			    <?php 
				if(!isset($_GET['kategori']) && $app['kategori']==1){
				?>

			
				<div class="center-box">
					<div class="row">
					<div class="socialize">
					<table  width="95%" align="center">
						<tr>
							<td width="20%" align="center"><a href="index"><img src="admin/images/<?= $app['logo'];?>" width="80px" alt="Image"> </a></td>
							<td align="center"><font style="color:<?= $app['text_header'];?>;font-size:30px;font-weight:bold;padding:0px"><?= $app['nama_perusahaan']?></font><br/>
							<font style="color:<?= $app['text_header'];?>;font-size:15px;font-weight:bold;padding:0px"><?= $app['alamat']?></font><br/>
							<font style="color:<?= $app['text_header'];?>;font-size:15px;font-weight:bold;padding:0px"><?= $app['telepon']?></font</td>
							<td width="20%" align="center"><font style="color:<?= $app['text_header'];?>;font-size:30px;font-weight:bold;padding:0px" id="clock"></font><br/>
							<font  align="center" style="color:<?= $app['text_header'];?>;font-size:15px;padding-top:0px"><?php $tanggal = date('d M Y');
								$day = date('D', strtotime($tanggal));
								$dayList = array(
									'Sun' => 'Minggu',
									'Mon' => 'Senin',
									'Tue' => 'Selasa',
									'Wed' => 'Rabu',
									'Thu' => 'Kamis',
									'Fri' => 'Jumat',
									'Sat' => 'Sabtu'
								);
						echo $dayList[$day].", ".$tanggal;?></font></td>
						</tr>
					</table>
					</div>
				</div>
				<br/>
				<p align="center" style="color:white;font-size:30px;">Pilih Layanan</p><br/>
				<br/>
					<table width="95%" align="center" >
						
						<?php $i = 0;
						$s_kategori = mysql_query("SELECT * from jenis_kelamin");
						while ($kategori = mysql_fetch_array($s_kategori)){ ?>
						<?php if($i%4 == 0) echo "<tr>"; ?>
						<td align="center" width="33%">
						
						<section style="height: 160px; width: 240px; background-color: <?= $kategori['warna']?>; border-radius: 30px;display:block;"><br/>
						<a class="ascensorLink tile-nav" role="button" href="index.php?kategori=<?= $kategori['kd_jenis']?>" >
						<!--img src="admin/images/<?= $app['logo'];?>" width="120px" alt="Image"--><br/>
							<font style="color:<?= $app['text_isi'];?>;font-size:20px;"><?= $kategori['jenis_kelamin'];?></font>
							
						</a>
						</section>
						</td>
					<?php if($i%4 == 3) echo "</tr>";
						$i ++; ?>
							
						<?php ;} ?>
						
					</table><br/>
				
					
				</div>	
				<?php ;} else { ?>
				<?php 
				if(!isset($_GET['kategori']) && $app['kategori']==1){
				$nm_kat = mysql_fetch_assoc(mysql_query("SELECT * from jenis_kelamin where kd_jenis='$_GET[kategori]'"));
				} else {
				  
				}
				
					
					$pertanyaan = mysql_fetch_assoc(mysql_query("SELECT * from pertanyaan where  status='1'"));
				?>
				
				<div class="row">
				    
					<div class="socialize">
					<table  width="95%" align="center">
						<tr>
							<td width="20%" align="center"><a href="index.php"><img src="admin/images/<?= $app['logo'];?>" width="80px" alt="Image"> </a></td>
							<td align="center"><font style="color:<?= $app['text_header'];?>;font-size:30px;font-weight:bold;padding:0px"><?= $app['nama_perusahaan']?></font><br/>
							<font style="color:<?= $app['text_header'];?>;font-size:15px;font-weight:bold;padding:0px"><?= $app['alamat']?></font><br/>
							<font style="color:<?= $app['text_header'];?>;font-size:15px;font-weight:bold;padding:0px"><?= $app['telepon']?></font</td>
							<td width="20%" align="center"><font style="color:<?= $app['text_header'];?>;font-size:30px;font-weight:bold;padding:0px" id="clock"></font><br/>
							<font  align="center" style="color:<?= $app['text_header'];?>;font-size:15px;padding-top:0px"><?php $tanggal = date('d M Y');
								$day = date('D', strtotime($tanggal));
								$dayList = array(
									'Sun' => 'Minggu',
									'Mon' => 'Senin',
									'Tue' => 'Selasa',
									'Wed' => 'Rabu',
									'Thu' => 'Kamis',
									'Fri' => 'Jumat',
									'Sat' => 'Sabtu'
								);
						echo $dayList[$day].", ".$tanggal;?></font></td>
						</tr>
					</table>
					</div>
				</div>
			
					
					<div class="row">
					<div class="socialize">
				<?php	if(!isset($_GET['kategori']) && $app['kategori']==1){?>
				<h4 align="center" style="color:<?= $app['text_isi'];?>;"><?= $nm_kat['jenis_kelamin']?></h4>
				<?php ;} ?><br/><br/>
				<p align="center" style="color:<?= $app['text_isi'];?>;font-size:20px;"><?= $pertanyaan['pertanyaan']?></p>
			
			<?php if($app['saran']=='1'){?>
				<form action="include/submit?kategori=<?= $_GET['kategori'];?>&action=saran" method="post">
					<table width="85%" align="center">
						<tr>
						    <?php if($app['sp']=='1'){ ?>
						    <td align="center">
                            <div style="height: 180px; width: 200px; background-color:green ; border-radius: 30px;">
							<label>
                                        
										<input type="hidden" name="id_pertanyaan" value="<?= $pertanyaan['id'];?>"/>
                                         <input type="radio"  name="survey" value="SP" id="emoji" required>
                                         <img  src="images/puas.png" width="140px">
                                     </label><br/>
							
								<font style="color:<?= $app['text_isi'];?>;font-size:20px">SANGAT PUAS</font>
						
							</div>
							</td>
							<?php ;} ?>
							<?php if($app['p']=='1'){ ?>
							<td align="center">
                            <div style="height: 180px; width: 200px; background-color: blue; border-radius: 30px;">

							<label>
                                        
										<input type="hidden" name="id_pertanyaan" value="<?= $pertanyaan['id'];?>"/>
                                         <input type="radio"  name="survey" value="P" id="emoji" required>
                                         <img  src="images/puas2.png" width="140px">
                                     </label><br/>
							
								<font style="color:<?= $app['text_isi'];?>;font-size:20px">PUAS</font>
							</label>	
							</div>
							</td>
							<?php ;} ?>
							<?php if($app['c']=='1'){ ?>
							<td align="center">
                            <div style="height: 180px; width: 200px; background-color: orange; border-radius: 30px;">
							<label>
                                        
										<input type="hidden" name="id_pertanyaan" value="<?= $pertanyaan['id'];?>"/>
                                         <input type="radio"  name="survey" value="C" id="emoji" required>
                                         <img  src="images/kurangpuas.png" width="140px">
                                     </label><br/>
							
								<font style="color:<?= $app['text_isi'];?>;font-size:20px">CUKUP</font>
						
							</td>
							<?php ;} ?>
							<?php if($app['k']=='1'){ ?>
							<td align="center">
                            <div style="height: 180px; width: 200px; background-color: grey; border-radius: 30px;">
							<label>
                                        
										<input type="hidden" name="id_pertanyaan" value="<?= $pertanyaan['id'];?>"/>
                                         <input type="radio"  name="survey" value="K" id="emoji" required>
                                         <img  src="images/cukup.png" width="140px">
                                     </label><br/>
							
								<font style="color:<?= $app['text_isi'];?>;font-size:20px">KURANG</font>
						
							</td>
							<?php ;} ?>
							<?php if($app['tp']=='1'){ ?>
							<td align="center">
                            <div style="height: 180px; width: 200px; background-color: red; border-radius: 30px;">

							<label>
                                        
										<input type="hidden" name="id_pertanyaan" value="<?= $pertanyaan['id'];?>"/>
                                         <input type="radio"  name="survey" value="TP" id="emoji" required>
                                         <img  src="images/kurang.png" width="140px">
                                     </label><br/>
							
								<font style="color:<?= $app['text_isi'];?>;font-size:20px">TIDAK PUAS</font>
						
							</div>
							</td>
							<?php ;} ?>
						</tr>
					
						<tr>
							<td colspan="5" align="center">	<p align="center" style="color:<?= $app['text_isi'];?>;font-size:20px;">Saran Anda Untuk Kami :</p> <textarea name="saran" class="form-control" style="font-size: 20px;   " width="80%" rows="3"></textarea><br/>
								<br/>
							<input class="btn btn-lg btn-danger" type="submit" style="font-size=40px" value="Submit"></input></td>
							</tr>
						
					</table><br/>
							</form>
					<?php ;} else  if($app['saran']=='0') { ?> 
					<br/><br/><br/>
					    <table width="85%" align="center">
						<tr>
						    <?php if($app['sp']=='1'){ ?>
						    <td align="center">
						        <a href ="include/submit?kategori=<?= $_GET['kategori'];?>&id_pertanyaan=<?= $pertanyaan['id'];?>&survey=SP&action=tanpasaran">
                            <div style="height: 180px; width: 200px; background-color:green ; border-radius: 30px;">
						
                                        
									
                                         
                                         <img  src="images/puas.png" width="140px">
                                    <br/>
							
								<font style="color:<?= $app['text_isi'];?>;font-size:20px">SANGAT PUAS</font>
						
							</div>
							</a>
							</td>
							<?php ;} ?>
							<?php if($app['p']=='1'){ ?>
							<td align="center">
							    <a href ="include/submit?kategori=<?= $_GET['kategori'];?>&id_pertanyaan=<?= $pertanyaan['id'];?>&survey=P&action=tanpasaran">
                            <div style="height: 180px; width: 200px; background-color: blue; border-radius: 30px;">

							
                                        
									
                                         <img  src="images/puas2.png" width="140px">
                                     <br/>
							
								<font style="color:<?= $app['text_isi'];?>;font-size:20px">PUAS</font>
							</label>	
							</div>
							</a>
							</td>
							<?php ;} ?>
							<?php if($app['c']=='1'){ ?>
							<td align="center">
							     <a href ="include/submit?kategori=<?= $_GET['kategori'];?>&id_pertanyaan=<?= $pertanyaan['id'];?>&survey=C&action=tanpasaran">
                            <div style="height: 180px; width: 200px; background-color: orange; border-radius: 30px;">
							<label>
                                        
										
                                         <img  src="images/kurangpuas.png" width="140px">
                                     <br/>
							
								<font style="color:<?= $app['text_isi'];?>;font-size:20px">CUKUP</font>
    						</div>
							</a>
							
							</td>
							<?php ;} ?>
							<?php if($app['k']=='1'){ ?>
							<td align="center">
							     <a href ="include/submit?kategori=<?= $_GET['kategori'];?>&id_pertanyaan=<?= $pertanyaan['id'];?>&survey=K&action=tanpasaran">
                            <div style="height: 180px; width: 200px; background-color: grey; border-radius: 30px;">
							<label>
                                        
										
                                         <img  src="images/cukup.png" width="140px">
                                     <br/>
							
								<font style="color:<?= $app['text_isi'];?>;font-size:20px">KURANG</font>
    						</div>
							</a>
							
							</td>
							<?php ;} ?>
							<?php if($app['tp']=='1'){ ?>
							<td align="center">
							     <a href ="include/submit?kategori=<?= $_GET['kategori'];?>&id_pertanyaan=<?= $pertanyaan['id'];?>&survey=TP&action=tanpasaran">
                            <div style="height: 180px; width: 200px; background-color: red; border-radius: 30px;">

						
                                        
										
                                         <img  src="images/kurang.png" width="140px">
                                     <br/>
							
								<font style="color:<?= $app['text_isi'];?>;font-size:20px">TIDAK PUAS</font>
						
							</div>
							</a>
							</td>
							<?php ;} ?>
						
						</tr>
					
					
						
					</table>
			        <?php ;} ?> 



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



				
					
						
						
						
						
						
						<script type="text/javascript">
							var detik = <?php echo date('s'); ?>;
							var menit = <?php echo date('i'); ?>;
							var jam   = <?php echo date('H'); ?>;
						 
							function clock()
							{
							if (detik!=0 && detik%60==0) {
								menit++;
								detik=0;
							}
							second = detik;
							 
							if (menit!=0 && menit%60==0) {
								jam++;
								menit=0;
							}
							minute = menit;
							 
							if (jam!=0 && jam%24==0) {
								jam=0;
							}
							hour = jam;
							 
							if (detik<10){
								second='0'+detik;
							}
							if (menit<10){
								minute='0'+menit;
							}
							 
							if (jam<10){
								hour='0'+jam;
							}
							waktu = hour+':'+minute+':'+second;
							 
							document.getElementById("clock").innerHTML = waktu;
							detik++;
						}
					 
						setInterval(clock,1000);
						</script>
				</div>
			</div>
		</div>
			
			
			<div class="footer">
			<div class="marquee">
			  <div class="track">
				<div class="marquee-text">
					<table width="100%">
						<tr>
						<?php $s_feed=mysql_query("SELECT * FROM feed where status='1' ");
							while ($d_feed = mysql_fetch_array($s_feed)){
						?>
						
						<td> |  </td><td width="10%"><h4 style="color:<?= $app['footer'];?>">  </h4></td><td> <h4 style="color:<?= $app['text_footer'];?>"> <?= $d_feed['feed'];?></h4></td><td width="10%"><h4 style="color:<?= $app['footer'];?>"> <h4></td>
						<?php
							;}
						?>
						</tr>
					</table>
				</div>
			  </div>
			</div>
			
			</div>
		</div> <!-- /wrapper -->
		</section> <!-- /home -->
		<!-- ==============================================
		JS
		=============================================== -->
		<script src="js/jquery.ascensor.js"></script>
        <script src="js/bootstrap.min.js"></script>
		<script src="js/jquery.mixitup.min.js"></script>
		<script src="js/jquery.hoverdir.js"></script>
		<script src="js/jquery.placeholder.min.js"></script>
		<script src="js/bootstrap-notify/bootstrap-notify.min.js"></script>
		<?php
		if (isset($_GET['sukses'])) : ?>
		<script type="text/javascript">
		$(document).ready(function(){
				$.notify({
					icon: 'font-icon font-icon-lock',
					title: '<strong>Berhasil.</strong>',
					message: '<?=base64_decode($_GET['sukses']);?>'
				},{
					type: 'success',
					placement: {
						align: "center"
					}
				});
				
		});
		</script>
		<?php endif;?>
        
 </body>
</html>