<?php
include 'config/koneksi.php';

if (!isset($_GET['id_jasa'])) {
    die("ID jasa tidak ditemukan");
}

$id_jasa = $_GET['id_jasa'];
$metode  = $_GET['metode'] ?? 'Transfer';

$q = mysqli_query($conn, "SELECT * FROM jasa WHERE id='$id_jasa'");
$j = mysqli_fetch_assoc($q);

$qty   = $_GET['qty'] ?? 1;
$total = $j['harga'] * $qty;

if (!$j) {
    die("Data tidak ditemukan");
}
?>

<!DOCTYPE html>
<html>
<head>
<title>Pembayaran</title>

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

    <!-- Font -->
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
<style>
body{
    font-family:'Poppins',sans-serif;
    background:#f4f6f9;
}
.box{
    width:400px;
    margin:80px auto;
    background:white;
    padding:30px;
    border-radius:12px;
    text-align:center;
    box-shadow:0 5px 20px rgba(0,0,0,0.1);
}
.timer{
    color:red;
    font-weight:bold;
    margin-top:10px;
}
.btn{
    display:block;
    margin-top:20px;
    background:#1abc9c;
    color:white;
    padding:12px;
    border-radius:8px;
    text-decoration:none;
}

.navbar {
            position: sticky;
            top: 0;
            z-index: 999;
            background: rgba(63,93,80,0.95) !important;
            backdrop-filter: blur(6px);
        }
        .navbar .navbar-brand {
            font-size: 28px;   /* BESARKAN */
            font-weight: 700;  /* BOLD */
            letter-spacing: 1px; /* biar keren */
        }
        .navbar .navbar-brand span {
            color: #F9BF29;
        }
        .nav-link {
            color: white !important;
             position: relative;
        }
        .navbar .nav-link {
            font-size: 25px;   /* BESARIN FONT */
            font-weight: 500;  /* AGAK TEBAL */
            margin: 0 10px;

        }

        .navbar .nav-link::after {
            content: "";
            position: absolute;
            width: 0%;
            height: 2px;
            background: #F9BF29;
            left: 0;
            bottom: -5px;
            transition: 0.3s;
        }

        .navbar .nav-link:hover::after {
            width: 100%;
        }

        .nav-icons a {
            color: white;
            font-size: 25px;
            margin-left: 25px;
            transition: 0.3s;
        }

        .nav-icons a:hover {
            color: #F9BF29;
            transform: scale(1.2);
        }
</style>
</head>

<body>

<nav class="navbar navbar-expand-lg navbar-dark px-5">
    <div class="container-fluid">

        <a class="navbar-brand fw-bold text-white" href="index.php">F3F3.</a>
        <div class="d-flex align-items-center nav-icons">

            <!-- WhatsApp -->
            <a href="https://wa.me/6281234567890" target="_blank">
                <i class="fab fa-whatsapp"></i>
            </a>

            <!-- Cart -->
            <a href="jasa.php">
                <i class="fas fa-shopping-cart"></i>
            </a>

            <!-- User -->
            <a href="#">
                <i class="fas fa-user"></i>
            </a>

        </div>

    </div>
</nav>

<div class="box">

<h2>Pembayaran</h2>
<p>Silakan lakukan pembayaran</p>

<h3><?= $j['nama_jasa']; ?></h3>

<h3>Rp <?= number_format($j['harga']); ?></h3>

<p>Jumlah: <?= $qty ?></p>
<p>Total: Rp <?= number_format($total) ?></p>

<p><b>Metode:</b> <?= $metode; ?></p>

<hr>

<!-- QRIS -->
<?php if($metode == 'QRIS'){ ?>
    <img src="assets/img/qris.png" width="220">
    <p>Scan QR untuk pembayaran</p>
<?php } else { ?>
    <p>
        Transfer ke:<br><br>
        <b>BCA 123456789</b><br>
        a.n F3F3 Interior
    </p>
<?php } ?>

<!-- TIMER -->
<p class="timer">
    Waktu pembayaran: <span id="countdown">60</span> detik
</p>

<p>Menunggu pembayaran...</p>

<a href="proses_bayar.php?id_jasa=<?= $id_jasa ?>&metode=<?= $metode ?>&qty=<?= $qty ?>" class="btn">
 Saya Sudah Bayar
</a>

</div>

<script>
// TIMER 60 DETIK
let waktu = 60;

let timer = setInterval(function(){
    waktu--;
    document.getElementById("countdown").innerHTML = waktu;

    if(waktu <= 0){
        clearInterval(timer);
        alert("Waktu habis! Silakan ulangi pembayaran.");
        window.location.href = "checkout.php?id_jasa=<?= $id_jasa ?>";
    }
}, 1000);
</script>

</body>
</html>