<?php

$host = "localhost";
$user = "root";
$pass = "";
$db   = "wisuda";

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

$id = isset($_GET['id']) ? intval($_GET['id']) : 0;

$query = $conn->query("SELECT * FROM tamu WHERE idtamu='$id'");
$data  = $query->fetch_assoc();

?>

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Susunan Acara Wisuda</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{
    background:linear-gradient(135deg,#041C32,#0B2447);
    color:white;
    min-height:100vh;
    padding:20px;
}

.container{
    max-width:1000px;
    margin:auto;
}

.header{
    text-align:center;
    margin-bottom:40px;
}

.header h1{
    color:#FFD700;
    margin-bottom:10px;
}

.nama{
    font-size:28px;
    font-weight:700;
    color:#fff;
}

.jabatan{
    color:#ddd;
    margin-top:8px;
}

.timeline{
    position:relative;
    margin-top:40px;
}

.timeline::before{
    content:'';
    position:absolute;
    left:24px;
    top:0;
    width:4px;
    height:100%;
    background:#FFD700;
}

.item{
    position:relative;
    margin-bottom:25px;
    padding-left:70px;
}

.item::before{
    content:'';
    position:absolute;
    left:16px;
    top:15px;
    width:20px;
    height:20px;
    border-radius:50%;
    background:#FFD700;
}

.card{
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.1);
    backdrop-filter:blur(10px);
    padding:20px;
    border-radius:18px;
}

.jam{
    color:#FFD700;
    font-size:18px;
    font-weight:700;
    margin-bottom:8px;
}

.judul{
    font-size:18px;
    font-weight:600;
    margin-bottom:8px;
}

.deskripsi{
    color:#ddd;
    line-height:1.6;
}

.back-btn{
    display:inline-block;
    margin-top:30px;
    background:#FFD700;
    color:#000;
    text-decoration:none;
    padding:14px 25px;
    border-radius:50px;
    font-weight:600;
}

.back-btn:hover{
    opacity:.9;
}

@media(max-width:768px){

    body{
        padding:15px;
    }

    .nama{
        font-size:22px;
    }

    .timeline::before{
        left:15px;
    }

    .item{
        padding-left:45px;
    }

    .item::before{
        left:7px;
        width:16px;
        height:16px;
    }

    .card{
        padding:15px;
    }

    .jam{
        font-size:16px;
    }

    .judul{
        font-size:16px;
    }

    .deskripsi{
        font-size:14px;
    }

    .back-btn{
        width:100%;
        text-align:center;
    }
}

</style>

</head>
<body>

<div class="container">

    <div class="header">

        <h1>Susunan Acara Wisuda</h1>

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

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

    </div>

    <div class="timeline">

        <div class="item">
            <div class="card">
                <div class="jam">07.00 WIB</div>
                <div class="judul">Registrasi Tamu VIP</div>
                <div class="deskripsi">
                    Registrasi dan penerimaan tamu undangan kehormatan.
                </div>
            </div>
        </div>

        <div class="item">
            <div class="card">
                <div class="jam">07.30 WIB</div>
                <div class="judul">Penyambutan Tamu VIP</div>
                <div class="deskripsi">
                    Penyambutan oleh pimpinan Institut STIAMI.
                </div>
            </div>
        </div>

        <div class="item">
            <div class="card">
                <div class="jam">08.00 WIB</div>
                <div class="judul">Pembukaan Acara</div>
                <div class="deskripsi">
                    Pembukaan resmi dan menyanyikan lagu kebangsaan Indonesia Raya.
                </div>
            </div>
        </div>

        <div class="item">
            <div class="card">
                <div class="jam">08.30 WIB</div>
                <div class="judul">Sambutan Rektor</div>
                <div class="deskripsi">
                    Penyampaian laporan akademik dan sambutan pimpinan perguruan tinggi.
                </div>
            </div>
        </div>

        <div class="item">
            <div class="card">
                <div class="jam">09.00 WIB</div>
                <div class="judul">Prosesi Wisuda</div>
                <div class="deskripsi">
                    Pengukuhan dan pemindahan tali toga para wisudawan.
                </div>
            </div>
        </div>

        <div class="item">
            <div class="card">
                <div class="jam">11.30 WIB</div>
                <div class="judul">Foto Bersama</div>
                <div class="deskripsi">
                    Dokumentasi bersama pimpinan, tamu kehormatan, dan wisudawan.
                </div>
            </div>
        </div>

        <div class="item">
            <div class="card">
                <div class="jam">12.00 WIB</div>
                <div class="judul">Ramah Tamah & Jamuan Makan Siang</div>
                <div class="deskripsi">
                    Jamuan khusus dan silaturahmi bersama tamu VIP.
                </div>
            </div>
        </div>

    </div>

    <a href="undangan.php?id=<?= htmlspecialchars($data['idtamu']); ?>" class="back-btn">
    ← Kembali ke Undangan
</a>

</div>

</body>
</html>