<?php

// Koneksi Database
$host = "localhost";
$user = "root";
$pass = "";
$db   = "wisuda";

$conn = new mysqli($host, $user, $pass, $db);

if ($conn->connect_error) {
    die("Koneksi database gagal: " . $conn->connect_error);
}

// Ambil ID Tamu dari URL
$id = isset($_GET['id']) ? intval($_GET['id']) : 0;

$sql = "SELECT * FROM tamu WHERE idtamu = ?";
$stmt = $conn->prepare($sql);
$stmt->bind_param("i", $id);
$stmt->execute();

$result = $stmt->get_result();

if ($result->num_rows == 0) {
    die("Data tamu tidak ditemukan.");
}

$tamu = $result->fetch_assoc();


$pesan = urlencode(
"Saya ".$tamu['namalengkap'].
" menyatakan akan menghadiri acara Wisuda Institut STIAMI."
);

?>

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

<title>Undangan Wisuda VIP</title>

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

<style>

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

html{
    scroll-behavior:smooth;
}

body{
    min-height:100vh;
    color:#fff;
    overflow-x:hidden;
    position:relative;
}

/* VIDEO */

#bg-video{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    object-fit:cover;
    z-index:-3;
}

.overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.65);
    z-index:-2;
}

#particles-js{
    position:fixed;
    inset:0;
    z-index:-1;
}

/* LAYOUT */

.container{
    min-height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:30px 15px;
}

.card{
    width:100%;
    max-width:1000px;
    background:rgba(255,255,255,.08);
    backdrop-filter:blur(15px);
    border:1px solid rgba(255,255,255,.15);
    border-radius:30px;
    padding:50px;
    text-align:center;
    box-shadow:
        0 10px 40px rgba(0,0,0,.5),
        0 0 30px rgba(255,215,0,.15);
}

/* HEADER */

.logo{
    font-size:70px;
}

.badge{
    display:inline-block;
    margin-top:15px;
    background:#FFD700;
    color:#000;
    font-weight:600;
    padding:8px 20px;
    border-radius:50px;
}

.title{
    margin-top:20px;
    font-size:42px;
}

.subtitle{
    margin-top:10px;
    color:#ddd;
}

/* VIP BOX */

.vip-box{
    margin-top:30px;
    padding:30px;
    border-radius:20px;
    background:rgba(255,255,255,.08);
}

.kepada{
    color:#ddd;
}

.nama{
    margin-top:10px;
    font-size:36px;
    font-weight:700;
    color:#FFD700;
    word-break:break-word;
}

.jabatan{
    margin-top:10px;
    font-size:20px;
}

.alamat{
    margin-top:10px;
    color:#ddd;
}

.divider{
    width:120px;
    height:3px;
    background:#FFD700;
    margin:30px auto;
}

/* COUNTDOWN */

.countdown-box{
    margin-top:40px;
}

#countdown{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:15px;
    margin-top:20px;
}

#countdown div{
    width:90px;
    padding:15px;
    border-radius:15px;
    background:rgba(255,255,255,.1);
}

#countdown span{
    display:block;
    font-size:28px;
    font-weight:bold;
    color:#FFD700;
}

/* DETAIL ACARA */

.info{
    margin-top:30px;
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:20px;
}

.box{
    background:rgba(255,255,255,.08);
    padding:25px;
    border-radius:20px;
}

.box h3{
    color:#FFD700;
    margin-bottom:10px;
}

/* BUTTON */

.button-group{
    margin-top:40px;
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:15px;
}

.btn,
.maps-btn,
.agenda-btn{
    padding:14px 28px;
    border-radius:50px;
    text-decoration:none;
    font-weight:600;
    transition:.3s;
}

.btn{
    background:#FFD700;
    color:#000;
}

.maps-btn{
    background:#0ea5e9;
    color:#fff;
}

.agenda-btn{
    background:#8B5CF6;
    color:#fff;
}

.btn:hover,
.maps-btn:hover,
.agenda-btn:hover{
    transform:translateY(-3px);
}

/* FOOTER */

.footer{
    margin-top:35px;
    color:#ddd;
}

/* MOBILE */

@media(max-width:768px){

    .card{
        padding:25px 20px;
    }

    .logo{
        font-size:50px;
    }

    .title{
        font-size:28px;
        line-height:1.3;
    }

    .subtitle{
        font-size:14px;
    }

    .nama{
        font-size:24px;
    }

    .jabatan{
        font-size:16px;
    }

    .alamat{
        font-size:14px;
    }

    .button-group{
        flex-direction:column;
    }

    .btn,
    .maps-btn,
    .agenda-btn{
        width:100%;
    }

    #countdown{
        gap:8px;
    }

    #countdown div{
        width:70px;
        padding:10px;
    }

    #countdown span{
        font-size:20px;
    }
}

@media(max-width:480px){

    .title{
        font-size:22px;
    }

    .nama{
        font-size:20px;
    }

    #countdown div{
        width:60px;
    }

    #countdown span{
        font-size:18px;
    }
}


</style>
</head>
<body>
<video autoplay muted loop playsinline id="bg-video">
    <source src="assets/video/kampus.mp4" type="video/mp4">
</video>

<div class="overlay"></div>

<div id="particles-js"></div>

<div class="container">

    <div class="card">

        <div class="logo">🎓</div>

        <div class="badge">TAMU VIP</div>

        <h1 class="title">Wisuda Institut STIAMI 2026</h1>

        <p class="subtitle">
            Dengan hormat mengundang Bapak/Ibu untuk menghadiri Wisuda Institut STIAMI.
        </p>

        <div class="divider"></div>

        <div class="vip-box">

            <div class="kepada">Kepada Yth.</div>

            <div class="nama">
                <?= htmlspecialchars($tamu['namalengkap']); ?>
            </div>

            <div class="jabatan">
                <?= htmlspecialchars($tamu['jabatan']); ?>
            </div>

            <div class="alamat">
                <?= htmlspecialchars($tamu['alamat']); ?>
            </div>

        </div>

        <div class="countdown-box">
            <h2>Menuju Hari Wisuda</h2>

            <div id="countdown">

                <div>
                    <span id="days">00</span>
                    <small>Hari</small>
                </div>

                <div>
                    <span id="hours">00</span>
                    <small>Jam</small>
                </div>

                <div>
                    <span id="minutes">00</span>
                    <small>Menit</small>
                </div>

                <div>
                    <span id="seconds">00</span>
                    <small>Detik</small>
                </div>

            </div>
        </div>

        <div class="info">

            <div class="box">
                <h3>📅 Tanggal</h3>
                <p>02 Juli 2026</p>
            </div>

            <div class="box">
                <h3>⏰ Waktu</h3>
                <p>07.00 WIB</p>
            </div>

            <div class="box">
                <h3>📍 Lokasi</h3>
                <p>Balai Samudera Kelapa Gading</p>
            </div>

        </div>

        <div class="button-group">

            <a href="susunan_acara.php?id=<?= $tamu['idtamu']; ?>" class="agenda-btn">
                📋 Susunan Acara
            </a>

            <a href="https://maps.app.goo.gl/1YhQuXYsN8GbwvoL7"
               target="_blank"
               class="maps-btn">
               📍 Google Maps
            </a>

            <a href="https://wa.me/6281324946875?text=<?=$pesan;?>"
               target="_blank"
               class="btn">
               ✅ Konfirmasi Kehadiran
            </a>

        </div>

        <div class="footer">
            Nomor Undangan :
            <strong>
                VIP-<?= str_pad($tamu['idtamu'],4,'0',STR_PAD_LEFT); ?>
            </strong>
        </div>

    </div>

</div>

<script>

const targetDate = new Date("July 02, 2026 07:00:00").getTime();

setInterval(() => {

    const now = new Date().getTime();
    const distance = targetDate - now;

    document.getElementById("days").innerHTML =
        Math.floor(distance / (1000 * 60 * 60 * 24));

    document.getElementById("hours").innerHTML =
        Math.floor((distance % (1000*60*60*24))/(1000*60*60));

    document.getElementById("minutes").innerHTML =
        Math.floor((distance % (1000*60*60))/(1000*60));

    document.getElementById("seconds").innerHTML =
        Math.floor((distance % (1000*60))/1000);

},1000);

</script>

<div id="particles-js"></div>

<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>

<script>

particlesJS("particles-js", {
  particles: {
    number: {
      value: 70
    },
    color: {
      value: "#FFD700"
    },
    shape: {
      type: "circle"
    },
    opacity: {
      value: 0.4
    },
    size: {
      value: 3
    },
    move: {
      speed: 1
    }
  }
});

</script>
<audio autoplay loop>
    <source src="assets/audio/graduation.mp3" type="audio/mp3">
</audio>
</body>
</html>