<?php
require "config.php";

$from = $_GET['from'] ?? '';
$jenis = '';

if(isset($_GET['kode'])){
    $kode = $_GET['kode'];

    $cekSda = $conn->query("
        SELECT id FROM pengajuan
        WHERE kode_tiket='$kode'
    ");

    if($cekSda && $cekSda->num_rows > 0){
        $jenis = 'sda';
    }

    $cekRekomtek = $conn->query("
        SELECT id FROM rekomtek
        WHERE kode_tiket='$kode'
    ");

    if($cekRekomtek && $cekRekomtek->num_rows > 0){
        $jenis = 'rekomtek';
    }
}
/* ===== AMBIL DATA DARI PENGAJUAN ===== */
$data = null;

if(isset($_GET['kode'])){
    $kode = $_GET['kode'];
    $data = $conn->query("SELECT * FROM pengajuan WHERE kode_tiket='$kode'")->fetch_assoc();
}
if (file_exists("visitor.php")) {
    include "visitor.php";
}

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

$todayCount = $conn->query("SELECT COUNT(DISTINCT session_id) t FROM visitors WHERE visit_date='$today'")->fetch_assoc()['t'] ?? 0;
$yesterdayCount = $conn->query("SELECT COUNT(DISTINCT session_id) t FROM visitors WHERE visit_date='$yesterday'")->fetch_assoc()['t'] ?? 0;
$totalVisitor = $conn->query("SELECT COUNT(DISTINCT session_id) t FROM visitors")->fetch_assoc()['t'] ?? 0;

$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>Survei Kepuasan</title>

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

<style>
.scale-box {
    width:30px;
    height:30px;
    border:2px solid #0d6efd;
    border-radius:6px;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
}

.scale-box span {
    display:block;
    width:100%;
    height:100%;
    border-radius:4px;
}
body{background:#f5f7fa;font-family:'Segoe UI',sans-serif;}
.navbar{background:#003b7a;padding:14px 0;}
.navbar .nav-link{color:white!important;font-weight:600;}
.card { border-radius:12px; }

/* FIX FOOTER */
html, body { height:100%; }
.wrapper {
    min-height:100%;
    display:flex;
    flex-direction:column;
}
.content { flex:1; }

/* ===== SKALA ===== */
.scale-row {
    display:grid;
    grid-template-columns: 150px 1fr 150px;
    align-items:center;
}

.scale-center { display:grid; gap:6px; }
.scale-numbers {
    display:grid;
    grid-template-columns: repeat(4,1fr);
    text-align:center;
    font-size:12px;
}
.scale-boxes {
    display:grid;
    grid-template-columns: repeat(4,1fr);
    justify-items:center;
}
.scale-box {
    width:30px;
    height:30px;
    border:2px solid #0d6efd;
    border-radius:6px;
    cursor:pointer;
}
.scale-box input { display:none; }
.scale-box input:checked + span { background:#0d6efd; }

.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;
}
</style>
</head>

<body>

<div class="wrapper">

<!-- 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="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>

<div class="ms-auto">
<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.php">Cek Pengajuan</a></li>
</ul>
</div>
</div>
</nav>

<!-- CONTENT -->
<div class="content">

<div class="container d-flex justify-content-center">
<div class="col-lg-8">

<div class="card shadow p-4 mt-4">

<!-- HEADER -->
<div class="mb-4">
<h3 class="fw-bold text-primary text-center">
Survei Kepuasan Pelayanan Balai Wilayah Sungai Kalimantan IV Samarinda
</h3>

<p class="text-center fw-bold mt-3">
Yth. Bapak/Ibu Pengguna Layanan Balai Wilayah Sungai Kalimantan IV Samarinda
</p>

<p class="text-center">
Dalam rangka meningkatkan kualitas pelayanan publik di lingkungan Balai Wilayah Sungai Kalimantan IV Samarinda, mohon perkenankan Bapak/Ibu meluangkan waktu 3 - 5 menit untuk mengisi Survei Kepuasan Masyarakat terkait Pelayanan Balai Wilayah Sungai Kalimantan IV Samarinda.
</p>

<p class="text-center">
Hasil Survei ini akan menjadi bahan evaluasi Balai Wilayah Sungai Kalimantan IV Samarinda untuk dapat melakukan perbaikan berkelanjutan dalam mewujudkan Reformasi Birokrasi dan Budaya Pelayanan Prima.
</p>

<p>
Penilaian Survei berdasarkan Peraturan MenPANRB No 14 Tahun 2017 dengan skala:
<br>1 = Tidak Sesuai
<br>2 = Kurang Sesuai
<br>3 = Sesuai
<br>4 = Sangat Sesuai
</p>

<p class="text-center">
Atas perhatian dan kesediaan Bapak/Ibu diucapkan terima kasih.
</p>

<p class="text-center fw-bold mt-3">
- Balai Wilayah Sungai Kalimatan IV Samarinda -
</p>
</div>


<form action="proses_survei.php" method="POST">
<input type="hidden" name="kode" value="<?= $_GET['kode'] ?? '' ?>">
<input type="hidden" name="from" value="<?= $_GET['from'] ?? '' ?>">

<div class="mb-3">
<label>Nama Lengkap <span class="text-danger">*</span></label>
<input type="text" name="nama" class="form-control" required
value="<?= $data['nama'] ?? '' ?>">
</div>

<div class="mb-3">
<label>NIK <span class="text-danger">*</span></label>
<input type="text" name="nik" class="form-control" required
value="<?= $data['nik'] ?? '' ?>">
</div>

<div class="mb-3">
<label>Jenis Kelamin <span class="text-danger">*</span></label>
<select name="jenis_kelamin" class="form-control" required>

<option value="" disabled <?= empty($data['jenis_kelamin']) ? 'selected' : '' ?>>
    -- Pilih Jenis Kelamin --
</option>

<option value="Laki-laki" <?= (trim($data['jenis_kelamin'] ?? '') === 'Laki-laki') ? 'selected' : '' ?>>
    Laki-laki
</option>

<option value="Perempuan" <?= (trim($data['jenis_kelamin'] ?? '') === 'Perempuan') ? 'selected' : '' ?>>
    Perempuan
</option>

</select>
</div>

<div class="mb-3">
<label>Pendidikan Terakhir <span class="text-danger">*</span></label>
<?php $pendidikan = strtolower(trim($data['pendidikan'] ?? '')); ?>

<select name="pendidikan" class="form-control" required>

<option value="" disabled <?= empty($pendidikan) ? 'selected' : '' ?>>
    -- Pilih Pendidikan Terakhir --
</option>

<option value="SD/Sederajat" <?= $pendidikan == 'sd/sederajat' ? 'selected' : '' ?>>SD/Sederajat</option>

<option value="SLTP/Sederajat" <?= $pendidikan == 'sltp/sederajat' ? 'selected' : '' ?>>SLTP/Sederajat</option>

<option value="SLTA/Sederajat" <?= $pendidikan == 'slta/sederajat' ? 'selected' : '' ?>>SLTA/Sederajat</option>

<option value="DI/Sederajat" <?= $pendidikan == 'di/sederajat' ? 'selected' : '' ?>>DI/Sederajat</option>

<option value="DII/Sederajat" <?= $pendidikan == 'dii/sederajat' ? 'selected' : '' ?>>DII/Sederajat</option>

<option value="DIII/Sederajat" <?= $pendidikan == 'diii/sederajat' ? 'selected' : '' ?>>DIII/Sederajat</option>

<option value="DIV/Sarjana" <?= $pendidikan == 'div/sarjana' ? 'selected' : '' ?>>DIV/Sarjana</option>

<option value="S2/Magister" <?= $pendidikan == 's2/magister' ? 'selected' : '' ?>>S2/Magister</option>

<option value="S3/Doktor" <?= $pendidikan == 's3/doktor' ? 'selected' : '' ?>>S3/Doktor</option>

</select>
</div>

<div class="mb-3">
<label>No Handphone <span class="text-danger">*</span></label>
<input type="text" name="no_hp" class="form-control" required
value="<?= $data['no_hp'] ?? '' ?>">
</div>

<div class="mb-3">
<label>Email <span class="text-danger">*</span></label>
<input type="email" name="email" class="form-control" required
value="<?= $data['email'] ?? '' ?>">
</div>

<div class="mb-3">
<label>Nama Instansi/Perusahaan<span class="text-danger">*</span></label>
<input type="text" name="instansi" class="form-control"
value="<?= $data['instansi'] ?? '' ?>">
</div>

<div class="mb-3">
<label>Pekerjaan <span class="text-danger">*</span></label>
<select name="pekerjaan" class="form-control" required>

<option value="" disabled <?= empty($data['pekerjaan']) ? 'selected' : '' ?>>
    -- Pilih Pekerjaan --
</option>

<option value="ASN" <?= (trim($data['pekerjaan'] ?? '') === 'ASN') ? 'selected' : '' ?>>ASN</option>

<option value="BUMN" <?= (trim($data['pekerjaan'] ?? '') === 'BUMN') ? 'selected' : '' ?>>BUMN</option>

<option value="BUMD" <?= (trim($data['pekerjaan'] ?? '') === 'BUMD') ? 'selected' : '' ?>>BUMD</option>

<option value="Konsultan" <?= (trim($data['pekerjaan'] ?? '') === 'Konsultan') ? 'selected' : '' ?>>Konsultan</option>

<option value="Kontraktor" <?= (trim($data['pekerjaan'] ?? '') === 'Kontraktor') ? 'selected' : '' ?>>Kontraktor</option>

<option value="Swasta" <?= (trim($data['pekerjaan'] ?? '') === 'Swasta') ? 'selected' : '' ?>>Swasta</option>

<option value="Mahasiswa" <?= (trim($data['pekerjaan'] ?? '') === 'Mahasiswa') ? 'selected' : '' ?>>Mahasiswa</option>

<option value="Lainnya" <?= (trim($data['pekerjaan'] ?? '') === 'Lainnya') ? 'selected' : '' ?>>Lainnya</option>

</select>
</div>

<div class="mb-3">
<label>Kota/Kabupaten <span class="text-danger">*</span></label>
<input type="text" name="kota" class="form-control" required
value="<?= $data['kota'] ?? '' ?>">
</div>

<div class="mb-3">
<label>Alamat <span class="text-danger">*</span></label>
<textarea name="alamat" class="form-control" required><?= $data['alamat'] ?? '' ?></textarea>
</div>

<!-- SEMUA PERTANYAAN 1-10 KAMU TETAP ADA DI SINI (TIDAK DIUBAH) -->
<!-- PERTANYAAN -->

<!-- 1 -->
<div class="mb-4">
<label>1. Bagaimana pendapat Saudara tentang kesesuaian persyaratan pelayanan dengan jenis pelayanannya? <span class="text-danger">*</span></label>
<div class="scale-row">
<div class="label-left">Tidak Sesuai</div>
<div class="scale-center">
<div class="scale-numbers"><span>1</span><span>2</span><span>3</span><span>4</span></div>
<div class="scale-boxes">
<label class="scale-box"><input type="radio" name="p1" value="1" required><span></span></label>
<label class="scale-box"><input type="radio" name="p1" value="2"><span></span></label>
<label class="scale-box"><input type="radio" name="p1" value="3"><span></span></label>
<label class="scale-box"><input type="radio" name="p1" value="4"><span></span></label>
</div>
</div>
<div class="label-right">Sangat Sesuai</div>
</div>
</div>

<!-- (2 - 10 sama persis, sudah disesuaikan redaksi resmi) -->

<div class="mb-4">
<!-- 2 -->
<div class="mb-4">
<label>2. Bagaimana pemahaman Saudara tentang kemudahan prosedur pelayanan di Balai Wilayah Sungai Kalimantan IV Samarinda? <span class="text-danger">*</span></label>
<div class="scale-row">
<div class="label-left">Tidak Mudah</div>
<div class="scale-center">
<div class="scale-numbers"><span>1</span><span>2</span><span>3</span><span>4</span></div>
<div class="scale-boxes">
<label class="scale-box"><input type="radio" name="p2" value="1" required><span></span></label>
<label class="scale-box"><input type="radio" name="p2" value="2"><span></span></label>
<label class="scale-box"><input type="radio" name="p2" value="3"><span></span></label>
<label class="scale-box"><input type="radio" name="p2" value="4"><span></span></label>
</div>
</div>
<div class="label-right">Sangat Mudah</div>
</div>
</div>

<!-- 3 -->
<div class="mb-4">
<label>3. Bagaimana pendapat Saudara tentang kecepatan waktu dalam memberikan pelayanan? <span class="text-danger">*</span></label>
<div class="scale-row">
<div class="label-left">Tidak Cepat</div>
<div class="scale-center">
<div class="scale-numbers"><span>1</span><span>2</span><span>3</span><span>4</span></div>
<div class="scale-boxes">
<label class="scale-box"><input type="radio" name="p3" value="1" required><span></span></label>
<label class="scale-box"><input type="radio" name="p3" value="2"><span></span></label>
<label class="scale-box"><input type="radio" name="p3" value="3"><span></span></label>
<label class="scale-box"><input type="radio" name="p3" value="4"><span></span></label>
</div>
</div>
<div class="label-right">Sangat Cepat</div>
</div>
</div>

<!-- 4 -->
<div class="mb-4">
<label>4. Bagaimana pendapat saudara mengenai kebijakan pelayanan tanpa biaya/tarif yang diberikan oleh BWS Kalimantan IV Samarinda? <span class="text-danger">*</span></label>
<div class="scale-row">
<div class="label-left">Tidak Sesuai</div>
<div class="scale-center">
<div class="scale-numbers"><span>1</span><span>2</span><span>3</span><span>4</span></div>
<div class="scale-boxes">
<label class="scale-box"><input type="radio" name="p4" value="1" required><span></span></label>
<label class="scale-box"><input type="radio" name="p4" value="2"><span></span></label>
<label class="scale-box"><input type="radio" name="p4" value="3"><span></span></label>
<label class="scale-box"><input type="radio" name="p4" value="4"><span></span></label>
</div>
</div>
<div class="label-right">Sangat Sesuai</div>
</div>
</div>

<!-- 5 -->
<div class="mb-4">
<label>5. Bagaimana pendapat Saudara tentang kesesuaian produk pelayanan antara yang tercantum dalam Standar Pelayanan dengan hasil yang diberikan? <span class="text-danger">*</span></label>
<div class="scale-row">
<div class="label-left">Tidak Sesuai</div>
<div class="scale-center">
<div class="scale-numbers"><span>1</span><span>2</span><span>3</span><span>4</span></div>
<div class="scale-boxes">
<label class="scale-box"><input type="radio" name="p5" value="1" required><span></span></label>
<label class="scale-box"><input type="radio" name="p5" value="2"><span></span></label>
<label class="scale-box"><input type="radio" name="p5" value="3"><span></span></label>
<label class="scale-box"><input type="radio" name="p5" value="4"><span></span></label>
</div>
</div>
<div class="label-right">Sangat Sesuai</div>
</div>
</div>

<!-- 6 -->
<div class="mb-4">
<label>6. Bagaimana pendapat Saudara tentang kompetensi/kemampuan petugas dalam pelayanan? <span class="text-danger">*</span></label>
<div class="scale-row">
<div class="label-left">Tidak Kompeten</div>
<div class="scale-center">
<div class="scale-numbers"><span>1</span><span>2</span><span>3</span><span>4</span></div>
<div class="scale-boxes">
<label class="scale-box"><input type="radio" name="p6" value="1" required><span></span></label>
<label class="scale-box"><input type="radio" name="p6" value="2"><span></span></label>
<label class="scale-box"><input type="radio" name="p6" value="3"><span></span></label>
<label class="scale-box"><input type="radio" name="p6" value="4"><span></span></label>
</div>
</div>
<div class="label-right">Sangat Kompeten</div>
</div>
</div>

<!-- 7 -->
<div class="mb-4">
<label>7. Bagaimana pendapat Saudara terkait perilaku Petugas Pelayanan dalam kesopanan dan keramahan? <span class="text-danger">*</span></label>
<div class="scale-row">
<div class="label-left">Tidak Sopan dan Tidak Ramah</div>
<div class="scale-center">
<div class="scale-numbers"><span>1</span><span>2</span><span>3</span><span>4</span></div>
<div class="scale-boxes">
<label class="scale-box"><input type="radio" name="p7" value="1" required><span></span></label>
<label class="scale-box"><input type="radio" name="p7" value="2"><span></span></label>
<label class="scale-box"><input type="radio" name="p7" value="3"><span></span></label>
<label class="scale-box"><input type="radio" name="p7" value="4"><span></span></label>
</div>
</div>
<div class="label-right">Sangat Sopan dan Sangat Ramah</div>
</div>
</div>

<!-- 8 -->
<div class="mb-4">
<label>8. Bagaimana pendapat Saudara tentang kualitas sarana dan prasarana di Balai Wilayah Sungai Kalimantan IV? <span class="text-danger">*</span></label>
<div class="scale-row">
<div class="label-left">Buruk</div>
<div class="scale-center">
<div class="scale-numbers"><span>1</span><span>2</span><span>3</span><span>4</span></div>
<div class="scale-boxes">
<label class="scale-box"><input type="radio" name="p8" value="1" required><span></span></label>
<label class="scale-box"><input type="radio" name="p8" value="2"><span></span></label>
<label class="scale-box"><input type="radio" name="p8" value="3"><span></span></label>
<label class="scale-box"><input type="radio" name="p8" value="4"><span></span></label>
</div>
</div>
<div class="label-right">Sangat Baik</div>
</div>
</div>

<!-- 9 -->
<div class="mb-4">
<label>9. Bagaimana pendapat Saudara tentang penanganan Pengaduan Pengguna Layanan? <span class="text-danger">*</span></label>
<div class="scale-row">
<div class="label-left">Tidak dikelola dengan baik</div>
<div class="scale-center">
<div class="scale-numbers"><span>1</span><span>2</span><span>3</span><span>4</span></div>
<div class="scale-boxes">
<label class="scale-box"><input type="radio" name="p9" value="1" required><span></span></label>
<label class="scale-box"><input type="radio" name="p9" value="2"><span></span></label>
<label class="scale-box"><input type="radio" name="p9" value="3"><span></span></label>
<label class="scale-box"><input type="radio" name="p9" value="4"><span></span></label>
</div>
</div>
<div class="label-right">Sangat Dikelola dengan baik</div>
</div>
</div>

<!-- 10 -->
<div class="mb-4">
<label>10. Bagaimana pendapat Saudara tentang penerapan Anti Penyuapan dan Anti Gratifikasi di Balai Wilayah Sungai Kalimantan IV Samarinda? <span class="text-danger">*</span></label>
<div class="scale-row">
<div class="label-left">Tidak Sesuai</div>
<div class="scale-center">
<div class="scale-numbers"><span>1</span><span>2</span><span>3</span><span>4</span></div>
<div class="scale-boxes">
<label class="scale-box"><input type="radio" name="p10" value="1" required><span></span></label>
<label class="scale-box"><input type="radio" name="p10" value="2"><span></span></label>
<label class="scale-box"><input type="radio" name="p10" value="3"><span></span></label>
<label class="scale-box"><input type="radio" name="p10" value="4"><span></span></label>
</div>
</div>
<div class="label-right">Sangat Sesuai</div>
</div>
</div>

<div class="mb-3">
<label>11. Kritik dan Saran yang membangun <span class="text-danger">*</span></label>
<textarea class="form-control" name="saran"></textarea>
</div>

<button class="btn btn-primary w-100">Kirim</button>

</form>

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

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

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<?php if(isset($_GET['status']) && $_GET['status']=='sukses'){ ?>
<div id="popup">
    <div class="popup-box">
        <h4>Terima kasih 🙏</h4>
        <p>Data survei berhasil dikirim</p>
        <button onclick="tutupPopup()">Tutup</button>
    </div>
</div>

<style>
#popup{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.5);
    display:flex;
    justify-content:center;
    align-items:center;
    z-index:9999;
}

.popup-box{
    background:#fff;
    padding:30px;
    border-radius:12px;
    text-align:center;
    width:300px;
    animation:fadeIn 0.3s ease;
}

.popup-box h4{
    color:#0d6efd;
    margin-bottom:10px;
}

.popup-box button{
    margin-top:15px;
    background:#0d6efd;
    color:white;
    border:none;
    padding:8px 20px;
    border-radius:6px;
    cursor:pointer;
}

@keyframes fadeIn{
    from{opacity:0; transform:scale(0.8);}
    to{opacity:1; transform:scale(1);}
}
</style>

<script>
function tutupPopup(){
    document.getElementById("popup").style.display = "none";

    // hapus parameter ?status biar tidak muncul lagi saat refresh
    window.history.replaceState({}, document.title, window.location.pathname);
}
</script>
<?php } ?>
</body>
</html>