<?php

error_reporting(E_ALL);
ini_set('display_errors', 1);
require "config.php";

if (file_exists("visitor.php")) {
    include "visitor.php";

}
/* MENUNGGU */
$jml_masuk = $conn->query("
SELECT COUNT(*) j
FROM pengajuan
WHERE status='Menunggu'
")->fetch_assoc()['j'] ?? 0;

/* DITERIMA */
$jml_diterima = $conn->query("
SELECT COUNT(*) j
FROM pengajuan
WHERE status='Diterima'
")->fetch_assoc()['j'] ?? 0;

/* DITOLAK */
$jml_ditolak = $conn->query("
SELECT COUNT(*) j
FROM pengajuan
WHERE status='Ditolak'
")->fetch_assoc()['j'] ?? 0;

/* SELESAI */
$jml_selesai = $conn->query("
SELECT COUNT(*) j
FROM pengajuan
WHERE no_surat IS NOT NULL
")->fetch_assoc()['j'] ?? 0;

/* ===== STATISTIK PENGAJUAN ===== */

$total = $conn->query("
SELECT COUNT(*) j 
FROM pengajuan
")->fetch_assoc()['j'] ?? 0;

/* MENUNGGU */
$proses = $conn->query("
SELECT COUNT(*) j 
FROM pengajuan
WHERE status='Menunggu'
")->fetch_assoc()['j'] ?? 0;

/* DITERIMA */
$selesai = $conn->query("
SELECT COUNT(*) j 
FROM pengajuan
WHERE status='Diterima'
")->fetch_assoc()['j'] ?? 0;

/* DITOLAK */
$ditolak = $conn->query("
SELECT COUNT(*) j 
FROM pengajuan
WHERE status='Ditolak'
")->fetch_assoc()['j'] ?? 0;

/* ===== STATISTIK PENGUNJUNG ===== */

$today = date('Y-m-d');
$yesterday = date('Y-m-d', strtotime('-1 day'));

/* HARI INI */
$todayCount = $conn->query("
SELECT COUNT(DISTINCT session_id) t 
FROM visitors 
WHERE DATE(created_at) = CURDATE()
")->fetch_assoc()['t'] ?? 0;

/* KEMARIN */
$yesterdayCount = $conn->query("
SELECT COUNT(DISTINCT session_id) t 
FROM visitors 
WHERE DATE(created_at) = DATE_SUB(CURDATE(), INTERVAL 1 DAY)
")->fetch_assoc()['t'] ?? 0;

/* TOTAL */
$totalVisitor = $conn->query("
SELECT COUNT(DISTINCT session_id) t 
FROM visitors
")->fetch_assoc()['t'] ?? 0;

/* ONLINE */
$online = $conn->query("
SELECT COUNT(DISTINCT session_id) t 
FROM visitors 
WHERE created_at >= NOW() - INTERVAL 5 MINUTE
")->fetch_assoc()['t'] ?? 0;
?>

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

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- TAMBAHKAN INI -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">

<style>
html{scroll-behavior:smooth;}
body{font-family:'Segoe UI',sans-serif;background:#f6f8fb;}

.navbar{background:#003b7a;padding:14px 0;}
.navbar .nav-link{color:white!important;font-weight:600;}

.hero{
    position:relative;
    height:90vh;
    display:flex;
    align-items:center;
    justify-content:center;
    color:white;
    overflow:hidden;
}

.hero::before{
    content:'';
    position:absolute;
    inset:0;
    background:url('/petesa/assets/laman_page.jpeg') center 10% / cover no-repeat;
    filter:blur(1px);
    transform:scale(1.05);
    z-index:0;
}

.hero::after{
    content:'';
    position:absolute;
    inset:0;
    background:rgba(0,45,90,0.6);
    z-index:1;
}

.hero-box{
    position: relative;
    z-index: 2;

    background: linear-gradient(
        to right,
        rgba(0,59,122,0.5),
        rgba(72,169,221,0.5)
    );

    padding: 40px 60px;
    border-radius: 20px;
    backdrop-filter: blur(6px);

    margin-top: 100px;
}
.hero-img{
    height:150px;
    object-fit:contain;
    filter: drop-shadow(0 5px 10px rgba(0,0,0,0.5));
}
@media(max-width:768px){
    .hero-box .d-flex{
        flex-direction:column;
        text-align:center;
    }

    .hero-img{
        margin-bottom:15px;
        height:90px;
    }
}
.hero h1{
    font-size:65px;
    font-weight:900; /* lebih tebal */
    letter-spacing:2px;

    /* efek timbul */
    text-shadow: 
        0 4px 10px rgba(0,0,0,0.5),
        0 0 20px rgba(255,255,255,0.2);
}

.hero p{
    font-size:20px;
    font-weight:500;

    text-shadow: 
        0 2px 6px rgba(0,0,0,0.5);
}


.hero h1{font-size:65px;font-weight:800;}

.section-title{font-weight:800;color:#003b7a;}

.card-service{
border:none;
border-radius:18px;
box-shadow:0 8px 18px rgba(0,0,0,.08);
transition:.3s;
}
.card-service:hover{transform:translateY(-7px);}

.stat-box{
background:white;
border-radius:15px;
padding:30px;
text-align:center;
box-shadow:0 5px 15px rgba(0,0,0,.08);
}
.hero-line{
    width:80px;
    height:4px;
    background:#ffc107;
    margin:15px auto;
    border-radius:10px;
}
.hero-box{
    position: relative;
    z-index: 2;
}
.counter{
font-size:38px;
font-weight:bold;
color:#003b7a;
}

/* ===== FOOTER BARU ===== */
.footer-bws {
    background: linear-gradient(135deg, #003b7a, #1b4f72);
    color: #fff;
}
.footer-bws .row{
    margin-left:0;
    margin-right:0;
}
.footer-title{
    font-weight:800;
    border-left:4px solid #00c6ff;
    padding-left:12px;
    font-size: clamp(16px, 1.5vw, 18px);
}

.footer-bws{
    width:100%;
    margin:0;
}

.footer-bws .container-fluid{
    padding-left:40px;
    padding-right:40px;
}

.footer-bws .row{
    margin-left:0 !important;
    margin-right:0 !important;
}
.sosmed {
    display: flex;
    gap: 15px;
    margin-top: 10px;
}

.sosmed a {
    color: white;
    font-size: 22px;
    text-decoration: none;
    transition: 0.3s;
}

.sosmed a:hover {
    transform: scale(1.2);
    color: #00c6ff;
}

.visitor-box {
    background: rgba(255,255,255,0.1);
    padding: 10px;
    border-radius: 8px;
    font-size: 13px;
}
/* ===== TOMBOL PERMOHONAN ===== */
.btn-permohonan {
    background: linear-gradient(45deg, #ffc107, #ffdd57); /* kuning */
    color: #003b7a; /* teks biru */
    font-weight: bold;
    font-size: 18px;
    border: none;
    padding: 14px 32px;
    border-radius: 50px;
    box-shadow: 0 0 10px rgba(255,193,7,0.6);
    transition: 0.3s;
    text-decoration: none;
    display: inline-block;
}

/* HOVER (KEBALIK) */
.btn-permohonan:hover {
    background: #003b7a; /* biru tua */
    color: #ffc107; /* kuning */
    box-shadow: 0 0 20px rgba(0,59,122,0.8);
    transform: scale(1.05);
    text-decoration: none;
}

.logo-besar{
max-width:100%;
    height:50px;
    object-fit:contain;
}
@media(max-width:576px){
    .logo-besar{
        height:40px;
    }
}
.logo-kecil{
height:60px;
width:auto;
object-fit:contain;
}

/* CARD WEBSITE BALAI */
.card-balai{
    background:#ffffff;
    border-radius:12px;
    padding:20px;
    transition:0.3s;
    box-shadow:0 3px 8px rgba(0,0,0,0.1);
    height:100%;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
}

/* tombol */
.btn-selengkapnya{
display:inline-block;
margin-top:15px;
background:#f2b400;
color:white; /* tulisan awal putih */
padding:8px 20px;
border-radius:25px;
font-weight:600;
text-decoration:none;
transition:0.3s;
}
.bg-biru-gradien .section-title,
.layanan .section-title{
    color:white !important;
    text-shadow: 0 2px 8px rgba(0,0,0,0.4);
    letter-spacing:1px;
}
.layanan {
    padding: 60px 0;
    background: linear-gradient(to right, #003b7a, #48a9dd);
    color: white;
}

.card-layanan {
    background: #fff;
    color: #333;
    padding: 25px;
    border-radius: 15px;
    margin: 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}


.card-layanan a{
    display:inline-block;
    margin-top:15px;
    background:#f2b400;
    color:white;
    padding:8px 20px;
    border-radius:25px;
    font-weight:600;
    text-decoration:none;
    transition:0.3s;
}

/* HOVER SAMA PERSIS */
.card-layanan a:hover{
    background:#002058;
    color:white;
    transform:scale(1.05);
}

.bg-biru-gradien{
    background: linear-gradient(to right, #003b7a, #48a9dd);
    color:white;
}

.bg-biru-gradien .section-title{
    color:white;
}

.bg-biru-gradien p{
    color:white;
}
.bg-biru-gradien .stat-box{
    background:white;
    border-radius:15px;
    padding:30px;
    text-align:center;
    box-shadow:0 8px 20px rgba(0,0,0,0.15);

}
.icon-layanan{
    height:70px;
    object-fit:contain;
}
.bg-biru-gradien .stat-box p{
    color:#333;
    margin-bottom:0;
    font-weight:500;
}
.stat-box i {
    transition: 0.3s;
}

.stat-box:hover i {
    transform: scale(1.3) rotate(10deg);
}
/* saat diarahkan mouse / klik */
.btn-selengkapnya:hover{
background:#002058; /* biru tua */
color:white; /* tulisan jadi putih */
}
.layanan-modern{
    padding:90px 0;
    background:linear-gradient(to right, #003b7a, #48a9dd);
    color:#fff;
}
.layanan-modern .section-title{
    color:#fff !important;
    text-shadow:0 2px 8px rgba(0,0,0,.35);
}
.container-layanan{
    position:relative;
    width:620px;
    height:620px;
    margin:auto;
}

.card-layanan-modern{
    position:absolute;
    width:300px;
    height:300px;
    background:#fff;
    border:5px solid #003b7a;
    border-radius:30px;
    padding:24px;
    padding-top:50px;
    text-align:center;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    transition:.3s;
}

.card-layanan-modern:hover{
    transform:scale(1.03);
}

.card1{top:0;left:0;}
.card2{top:0;right:0;}
.card3{bottom:0;left:0;}
.card4{bottom:0;right:0;}

.card1{
    clip-path:path("M30 0 H300 V190 A110 110 0 0 0 190 300 H0 V30 A30 30 0 0 1 30 0");
}
.card2{
    clip-path:path("M0 0 H270 A30 30 0 0 1 300 30 V300 H110 A110 110 0 0 0 0 190 Z");
}
.card3{
    clip-path:path("M0 0 H190 A110 110 0 0 0 300 110 V300 H30 A30 30 0 0 1 0 270 Z");
}
.card4{
    clip-path:path("M110 0 H300 V270 A30 30 0 0 1 270 300 H0 V110 A110 110 0 0 0 110 0");
}

.card-layanan-modern img{
    height:55px;
    margin-bottom:15px;
}

.card-layanan-modern h5,
.card-layanan-modern h6{
    font-size:18px;
    font-weight:700;
    color:#003b7a;
    margin-bottom:14px;
    line-height:1.4;
}

.card-layanan-modern a{
    display:inline-block;
    background:#f2b400;
    color:#fff;
    padding:8px 18px;
    border-radius:25px;
    text-decoration:none;
    font-weight:600;
    transition:.3s;
}

.card-layanan-modern a:hover{
    background:#002058;
    color:#fff;
}

.center-logo{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:200px;
    height:200px;
    background:#fff;
    border:6px solid #f2b400;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    box-shadow:0 8px 20px rgba(0,0,0,.2);
    z-index:10;
}

.center-logo img{
    width:85px;
}
.card-layanan-modern .dropdown .btn{
    background:#f2b400;
    color:#fff;
    border:none;
    padding:8px 18px;
    border-radius:25px;
    font-weight:600;
}
.cek-menu{
    margin-top:18px;
    display:flex;
    flex-direction:column;
    gap:16px;
    width:100%;
    max-width:180px;
}
.card-layanan-modern .dropdown .btn:hover{
    background:#002058;
    color:#fff;
}
</style>

</head>

<body>

<!-- NAVBAR -->
<nav class="navbar navbar-expand-lg">
<div class="container">

<a class="navbar-brand text-white fw-bold d-flex align-items-center" href="#">
<img src="/petesa/assets/bws1.png" style="height:60px; margin-right:10px;">
<div style="font-size:14px;">
Balai Wilayah Sungai Kalimantan IV Samarinda<br>
Kementerian Pekerjaan Umum
</div>
</a>

<button class="navbar-toggler bg-light" data-bs-toggle="collapse" data-bs-target="#nav">☰</button>

<div class="collapse navbar-collapse" id="nav">
<ul class="navbar-nav ms-auto">

<li class="nav-item">
<a class="nav-link" href="/petesa/index">Beranda</a>
</li>



<li class="nav-item">
<a class="nav-link" href="/petesa/cek">Cek Pengajuan</a>
</li>

<li class="nav-item">
<a class="nav-link" href="/petesa/survei">Survei Kepuasan</a>
</li>
  
<li class="nav-item">
<a class="nav-link" href="#stat">Statistik</a>
</li>

<li class="nav-item">
<a class="nav-link" href="/petesa/login">Login</a>
</li>

</ul>
</div>


</div>
</nav>

<!-- HERO -->
<section class="hero">
<div class="hero-box">

    <div class="d-flex align-items-center gap-4">
        <div>
        <!-- GAMBAR KIRI -->
            <img src="/petesa/assets/logopetesa.png" class="hero-img me-2">
        </div>
       
        <!-- TEXT (TETAP PUNYA KAMU) -->
        <div>
            <img src="/petesa/assets/PETESA.png" class="hero-img me-2">
        </div>

    </div>

</div>
</section>
<section class="layanan">
    <h2 class="text-center section-title mb-4">LAYANAN PETESA</h2>
    <div class="row">
    <div class="col-md-4">
        <div class="card-layanan text-center">
             <img src="/petesa/assets/5.png" class="icon-layanan mb-3">
        <h5>Permohonan Layanan SDA</h5>
        <a href="form_sda">Selengkapnya →</a>
</div>
    </div>

    <div class="col-md-4">
        <div class="card-layanan text-center">
             <img src="/petesa/assets/3.png" class="icon-layanan mb-3">
            <h5>Permohonan Data Hidrologi</h5>
            <a href="form_sda">Selengkapnya →</a>
        </div>
    </div>

    <div class="col-md-4">
        <div class="card-layanan text-center">
             <img src="/petesa/assets/2.png" class="icon-layanan mb-3">
            <h5>Pengumpulan Laporan Triwulan Pemegang Izin SDA</h5>
            <a href="form_rekomtek">Selengkapnya →</a>
        </div>
    </div>

    <div class="col-md-4">
    <div class="card-layanan text-center">
        <img src="/petesa/assets/layer4.png" class="icon-layanan mb-3">
        <h5>Cek Permohonan Layanan SDA</h5>
        <a href="cek?jenis=sda">Selengkapnya →</a>
        </div>
    </div>

    <div class="col-md-4">
        <div class="card-layanan text-center">
             <img src="/petesa/assets/layer5.png" class="icon-layanan mb-3">
            <h5>Cek Permohonan Data Hidrologi</h5>
            <a href="pengaduan">Selengkapnya →</a>
        </div>
    </div>

    <div class="col-md-4">
        <div class="card-layanan text-center">
             <img src="/petesa/assets/layer6.png" class="icon-layanan mb-3">
            <h5>Cek Pengumpulan Laporan Triwulan </h5>
            <a href="cek?jenis=rekomtek">Selengkapnya →</a>
        </div>
    </div>

</div>
</section>
<!-- STATISTIK -->
<section id="stat" class="py-5 bg-biru-gradien">
<div class="container">
<h2 class="text-center section-title mb-4">Statistik Data Permohonan</h2>

<div class="row g-4">
<div class="col">
    <div class="stat-box">
        <i class="fas fa-folder-open fa-2x mb-2 text-primary"></i>
        <div class="counter" data-target="<?= $total ?>">0</div>
        <p>Total</p>
    </div>
</div>

<div class="col">
    <div class="stat-box">
        <i class="fas fa-spinner fa-2x mb-2 text-warning"></i>
        <div class="counter" data-target="<?= $jml_masuk ?>">0</div>
        <p>Diproses</p>
    </div>
</div>

<div class="col">
    <div class="stat-box">
        <i class="fas fa-check-circle fa-2x mb-2 text-success"></i>
        <div class="counter" data-target="<?= $jml_diterima ?>">0</div>
        <p>Diterima</p>
    </div>
</div>

<div class="col">
    <div class="stat-box">
        <i class="fas fa-times-circle fa-2x mb-2 text-danger"></i>
        <div class="counter" data-target="<?= $jml_ditolak ?>">0</div>
        <p>Ditolak</p>
    </div>
</div>

<div class="col">
    <div class="stat-box">
        <i class="fas fa-flag-checkered fa-2x mb-2 text-info"></i>
        <div class="counter" data-target="<?= $jml_selesai ?>">0</div>
        <p>Selesai</p>
    </div>
</div>

</div>
</section>
<div class="container-fluid bg-biru-gradien pt-4 pb-4">
<div class="container">

    <div class="row">
        <div class="col-lg-12 text-center mb-3">
            <h2 class="text-center section-title mb-4">Informasi Seputar Website Balai</h2>
        </div>
    </div>

   <div class="row justify-content-center text-center">

    <div class="col-6 col-md-4 col-lg-3 mb-4">
        <div class="card-balai">
            <img src="/petesa/assets/SIH3.png" class="logo-besar mb-3">
            <a href="http://sih3wsmahakam.id" target="_blank" class="btn-selengkapnya">
                Selengkapnya →
            </a>
        </div>
    </div>

    <div class="col-6 col-md-4 col-lg-3 mb-4">
        <div class="card-balai">
            <img src="/petesa/assets/EWS.png" class="logo-besar mb-3">
            <a href="https://ewsdassanggai.com" target="_blank" class="btn-selengkapnya">
                Selengkapnya →
            </a>
        </div>
    </div>

    <div class="col-6 col-md-4 col-lg-3 mb-4">
        <div class="card-balai">
            <img src="/petesa/assets/hidrologi.id.png" class="logo-besar mb-3">
            <a href="https://beta.hidrologi.id" target="_blank" class="btn-selengkapnya">
                Selengkapnya →
            </a>
        </div>
    </div>
  </div>
    </div>
</div>
<!-- FOOTER FINAL -->
<footer class="footer-bws">
<div class="container-fluid py-5">
<div class="row text-white">

    <!-- PROFIL (LEBIH LEBAR) -->
    <div class="col-md-4">
        <h6 class="footer-title">Profil</h6>
        <p class="small mt-2">
            Balai Wilayah Sungai Kalimantan IV Samarinda<br>
            Jl. MT Haryono No. 36, Kota Samarinda,<br>
            Kalimantan Timur - Indonesia - 75123
            </p>
    </div>

    <!-- KONTAK -->
    <div class="col-md-3">
        <h6 class="footer-title">Kontak</h6>
        <p class="small mt-2">
            📞 (0541) 2088390<br>
            ✉️ bws.kalimantan.iv.samarinda@pu.go.id
        </p>
    </div>

    <!-- SOSIAL MEDIA -->
    <div class="col-md-2">
        <h6 class="footer-title">Sosial Media</h6>
        <div class="sosmed">
    <a href="https://www.facebook.com/profile.php?id=100078698323903" target="_blank" rel="noopener noreferrer">
    <i class="fab fa-facebook"></i>
    </a>
             <!-- Instagram -->
    <a href="https://www.instagram.com/pu_sda_kalimantan4" target="_blank" rel="noopener noreferrer">
        <i class="fab fa-instagram"></i>
    </a>

    <!-- YouTube -->
    <a href="https://www.youtube.com/@pusdakalimantan4samarinda" target="_blank" rel="noopener noreferrer">
        <i class="fab fa-youtube"></i>
    </a>

    <!-- X -->
    <a href="https://x.com/pu_sda_bwsk4/" target="_blank" rel="noopener noreferrer">
        <i class="fab fa-x-twitter"></i>
    </a>

    <!-- TikTok -->
    <a href="https://www.tiktok.com/@pu_sda_kalimantan5" target="_blank" rel="noopener noreferrer">
        <i class="fab fa-tiktok"></i>
    </a>
        </div>
    </div>

    <!-- STATISTIK -->
    <div class="col-md-3">
        <h6 class="footer-title">Statistik Pengunjung</h6>
        <div class="visitor-box mt-2">
            <div>Hari ini : <strong><?= $todayCount ?></strong></div>
            <div>Kemarin : <?= $yesterdayCount ?></div>
            <div>Total : <?= $totalVisitor ?></div>
            <div>Online : <span id="online"><?= $online ?></span></div>
        </div>
    </div>

</div>
<hr>

<div class="text-center small">
Hak Cipta ©2024 Balai Wilayah Sungai Kalimantan IV Samarinda Direktorat Jenderal Sumber Daya Air Kementerian Pekerjaan Umum Republik Indonesia,. All Rights Reserved
</div>

</div>
</footer>

<script>
setInterval(() => {
    fetch('/petesa/online')
        .then(res => res.text())
        .then(data => {
            document.getElementById('online').innerText = data.trim();
        });
}, 5000);
</script>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<script>
document.querySelectorAll('a').forEach(link => {
    link.addEventListener('click', function(e) {
        e.stopPropagation();
    });
});
</script>
<script>
const counters = document.querySelectorAll('.counter');

counters.forEach(counter => {
    counter.innerText = '0';

    const updateCounter = () => {
        const target = +counter.getAttribute('data-target');
        const current = +counter.innerText;

        const increment = target / 100;

        if (current < target) {
            counter.innerText = Math.ceil(current + increment);
            setTimeout(updateCounter, 80);
        } else {
            counter.innerText = target;
        }
    };

    updateCounter();
});
</script>
</body>
</html>