<?php
require "config.php";
if (file_exists("visitor.php")) {
    include "visitor.php";
}

/* ===== PROSES FORM ===== */
if(isset($_POST['kirim'])){

    $nama   = $conn->real_escape_string($_POST['nama']);
    $hp     = $conn->real_escape_string($_POST['no_hp']);
    $email  = $conn->real_escape_string($_POST['email']);
    $judul  = $conn->real_escape_string($_POST['judul']);
    $isi    = $conn->real_escape_string($_POST['isi']);

    /* ===== AUTO KODE ===== */
    $kode = "PGD-" . date("Y") . rand(1000,9999);

    /* ===== INSERT ===== */
    $conn->query("
        INSERT INTO pengaduan SET
        kode_tiket='$kode',
        nama='$nama',
        no_hp='$hp',
        email='$email',
        judul='$judul',
        isi='$isi'
    ");

    $success_kode = $kode;
}

/* ===== STATISTIK ===== */
$today = date('Y-m-d');
$todayCount = $conn->query("SELECT COUNT(*) t FROM visitors WHERE visit_date='$today'")->fetch_assoc()['t'] ?? 0;
$totalVisitor = $conn->query("SELECT COUNT(*) t FROM visitors")->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>Pengaduan PETESA</title>

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

<style>
body{background:#f6f8fb;font-family:'Segoe UI';}

.navbar{background:#003b7a;}
.navbar .nav-link{color:white!important;}

.card{
border-radius:15px;
box-shadow:0 5px 15px rgba(0,0,0,0.1);
}

.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;
}

/* POPUP */
.popup-overlay{
position:fixed;
top:0;left:0;
width:100%;height:100%;
background:rgba(0,0,0,0.6);
display:none;
justify-content:center;
align-items:center;
}

.popup-box{
background:white;
padding:30px;
border-radius:10px;
text-align:center;
}
.note {
    color: red;
    font-size: 18px;
    font-weight: bold;
}
.kode-box {
    margin: 15px 0;
    display: flex;
    justify-content: center;
    gap: 10px;
}

.kode-box span {
    font-size: 24px;
    font-weight: bold;
}
</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="index.php">
    <img src="uploads/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="index.php">Beranda</a>
</li>


<li class="nav-item">
<a class="nav-link" href="cek_pengaduan.php">Cek Pengaduan</a>
</li>

</ul>
</div>
</div>
</nav>

<!-- FORM -->
<div class="container mt-5">
<div class="card">
<div class="card-header bg-primary text-white">
<h5>Form Pengaduan</h5>
</div>

<div class="card-body">
<form method="POST" class="needs-validation" novalidate>

<div class="row">

<div class="col-md-6 mb-3">
<label>Nama *</label>
<input type="text" name="nama" class="form-control" required>
</div>

<div class="col-md-6 mb-3">
<label>No HP *</label>
<input type="text" name="no_hp" class="form-control" required>
</div>

<div class="col-md-6 mb-3">
<label>Email *</label>
<input type="email" name="email" class="form-control" required>
</div>

<div class="col-md-6 mb-3">
<label>Judul Pengaduan *</label>
<input type="text" name="judul" class="form-control" required>
</div>

<div class="col-md-12 mb-3">
<label>Isi Pengaduan *</label>
<textarea name="isi" class="form-control" rows="4" required></textarea>
</div>

</div>

<button name="kirim" class="btn btn-success w-100">
Kirim Pengaduan
</button>

</form>
</div>
</div>
</div>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
<!-- FOOTER -->
<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>

<!-- POPUP -->
<div id="popupSukses" class="popup-overlay">
    <div class="popup-box">
        <h4>Pengaduan Berhasil</h4>
        <p>Kode Tiket Anda:</p>

        <div class="kode-box">
            <span id="kodeTiket"></span>
            <button onclick="copyKode()">Copy</button>
        </div>

        <p class="note">
            Simpan Kode Tiket Untuk Cek Status Pengajuan
        </p>

        <button class="btn btn-primary" onclick="tutupPopup()">OK</button>
    </div>
</div>


<script>
function tampil(kode){
    document.getElementById("kodeTiket").innerText = kode;
    document.getElementById("popupSukses").style.display = "flex";
}

function copyKode(){
    let kode = document.getElementById("kodeTiket").innerText;
    navigator.clipboard.writeText(kode);
    alert("Kode berhasil disalin!");
}

function tutupPopup(){
    window.location = "cek_pengaduan.php";
}

/* VALIDASI */
(() => {
const forms = document.querySelectorAll('.needs-validation');
forms.forEach(form => {
form.addEventListener('submit', e => {
if (!form.checkValidity()) {
e.preventDefault();
alert('Lengkapi data wajib!');
}
});
});
})();
</script>

<?php if(isset($success_kode)): ?>
<script>
window.onload = function(){
    tampil("<?= $success_kode ?>");
}
</script>
<?php endif; ?>

</body>
</html>