<?php
define('SECURE_ACCESS', true);
include "koneksi.php";

$sql = "SELECT
AVG((spkp1+spkp2+spkp3+spkp4+spkp5+spkp6+spkp7+spkp8+spkp9)/9) as ipkp,
AVG((spak1+spak2+spak3+spak4+spak5)/5) as ipak,
AVG((skm1+skm2+skm3+skm4+skm5+skm6+skm7+skm8+skm9)/9) as skm
FROM survey";

$q = $conn->query($sql);
$dataSurvey = $q->fetch_assoc();

if(!$dataSurvey){
$dataSurvey = ['ipkp'=>0,'ipak'=>0,'skm'=>0];
}

function bintang($nilai){

$rating = round($nilai);
$html = "";

for($i=1;$i<=5;$i++){
    if($i <= $rating){
        $html .= "⭐";
    }else{
        $html .= "☆";
    }
}

return $html;
}
?>

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Pelayanan KPU Kabupaten Bojonegoro</title>

<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap" rel="stylesheet">

<style>

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Poppins',sans-serif;
}

body{
height:100vh;
background:
linear-gradient(rgba(139,46,46,0.5), rgba(139,46,46,0.5)),
url('adminlte/dist/img/bg.jpg') no-repeat center center/cover;
display:flex;
justify-content:center;
align-items:center;
}

.container{
background:white;
width:95%;
max-width:420px;
padding:40px 30px;
border-radius:20px;
box-shadow:0 20px 40px rgba(0,0,0,0.2);
text-align:center;
}

.logo{
width:90px;
margin-bottom:20px;
}

h1{
font-size:20px;
font-weight:600;
color:#8B2E2E;
margin-bottom:10px;
}

p{
font-size:14px;
color:#666;
margin-bottom:35px;
}

.btn{
display:block;
width:100%;
padding:15px;
margin-bottom:20px;
border-radius:12px;
text-decoration:none;
font-weight:600;
font-size:16px;
transition:0.3s;
}

.btn-bukutamu{
background:#8B2E2E;
color:white;
}

.btn-bukutamu:hover{
background:#6E2222;
}

.btn-survey{
background:#f5f5f5;
color:#8B2E2E;
border:2px solid #8B2E2E;
}

.btn-survey:hover{
background:#8B2E2E;
color:white;
}

/* HASIL SURVEY */

.hasil-survey{
margin-top:25px;
}

.row-survey{
display:flex;
justify-content:space-between;
gap:8px;
}

.box-survey{
flex:1;
background:#f5f5f5;
padding:8px;
border-radius:10px;
text-align:center;
font-size:12px;
}

.bintang{
font-size:14px;
color:gold;
}

/* ukuran khusus HP */
@media (max-width:480px){

.box-survey{
padding:6px;
font-size:11px;
}

.bintang{
font-size:12px;
}

}

.footer{
margin-top:20px;
font-size:12px;
color:#999;
}

</style>

</head>

<body>

<div class="container">

<img src="logo_kpu.png" class="logo">

<h1>Pelayanan KPU Kabupaten Bojonegoro</h1>
<p>Silakan pilih layanan yang ingin Anda akses</p>

<a href="home.php" class="btn btn-bukutamu">
📝 Isi Buku Tamu
</a>

<a href="cek_nik.php" class="btn btn-survey">
📊 Isi Survey Pelayanan
</a>

<div class="hasil-survey">

<h3 style="color:#8B2E2E;margin-bottom:10px;">Hasil Survey</h3>

<div class="row-survey">

<div class="box-survey">
<b>SPKP</b><br>
<span class="bintang"><?= bintang($dataSurvey['ipkp']) ?></span><br>
<?= number_format($dataSurvey['ipkp'],2) ?>
</div>

<div class="box-survey">
<b>SPAK</b><br>
<span class="bintang"><?= bintang($dataSurvey['ipak']) ?></span><br>
<?= number_format($dataSurvey['ipak'],2) ?>
</div>

<div class="box-survey">
<b>SKM</b><br>
<span class="bintang"><?= bintang($dataSurvey['skm']) ?></span><br>
<?= number_format($dataSurvey['skm'],2) ?>
</div>

</div>

</div>

<div class="footer">
© <?php echo date("Y"); ?> SIPENTAS KPU Kabupaten Bojonegoro
</div>

</div>

</body>
</html>
