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

$id = $_GET['id'];
$data = mysqli_query($conn, "SELECT * FROM jasa WHERE id='$id'");
$d = mysqli_fetch_array($data);

/* ===========================
   🔥 NOMOR WHATSAPP DI SINI
   =========================== */
$no_wa = "6281234567890"; // GANTI DENGAN NOMOR KAMU

/* PESAN OTOMATIS */
$pesan = "Halo, saya ingin konsultasi tentang ".$d['nama_jasa'];
$link_wa = "https://wa.me/".$no_wa."?text=" . urlencode($pesan);
?>

<!DOCTYPE html>
<html>
<head>
    <title>Detail Jasa</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>
        :root {
            --primary: #3F5D50;
            --accent: #F9BF29;
        }

        body {
            background: #f5f5f5;
        }

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

        .content {
            margin-top: 100px;
        }

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

        .price {
            font-size: 24px;
            color: var(--primary);
            font-weight: bold;
        }

        .btn-custom {
            background-color: var(--primary);
            color: white;
            border-radius: 25px;
        }

        .btn-custom:hover {
            background-color: #2f4a40;
        }
        .btn-success {
            border-radius: 25px;
        }
        .btn-success::hover {
            background-color: #2f4a40;
        }

        img {
            border-radius: 15px;
        }
        .detail-img {
            width: 100%;
            max-height: 350px;
            object-fit: cover;
        }
        .detail-box {
            background: white;
            padding: 25px;
            border-radius: 15px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        }
        .detail-img:hover {
            transform: scale(1.03);
            transition: 0.3s;
        }
        .qty-wrapper{
    display: inline-flex;
    align-items: center;
    border: 1px solid #ddd;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
}

.qty-btn{
    width: 40px;
    height: 40px;
    border: none;
    background: #f5f5f5;
    font-size: 18px;
    cursor: pointer;
}

.qty-btn:hover{
    background: #e0e0e0;
}

#qty{
    width: 50px;
    height: 40px;
    text-align: center;
    border: none;
    font-size: 16px;
    color: #c0392b; /* merah seperti di gambar */
    background: white;
}
.qty-wrapper{
    margin-bottom: 15px; /* kasih jarak ke tombol */
}
    </style>
</head>

<body>

<!-- NAVBAR -->
<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="collapse navbar-collapse justify-content-center">
            <ul class="navbar-nav">
                <li class="nav-item"><a class="nav-link" href="index.php">Home</a></li>
                <li class="nav-item"><a class="nav-link active" href="jasa.php">Shop</a></li>
                <li class="nav-item"><a class="nav-link" href="index.php #about">About</a></li>
                <li class="nav-item"><a class="nav-link" href="index.php #services">Services</a></li>
                <li class="nav-item"><a class="nav-link" href="index.php #contact">Contact</a></li>
            </ul>
        </div>

        <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>

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

<div class="row">

    <!-- GAMBAR -->
    <div class="col-md-5">
        <div class="card p-3">
           <img src="assets/img/<?= $d['gambar']; ?>" class="detail-img">
        </div>
    </div>

    <!-- DETAIL -->
    <div class="col-md-5">

        <span class="badge bg-warning mb-2">
            <?= $d['kategori']; ?>
        </span>

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

        <p class="price">
            Rp <?= number_format($d['harga']); ?>
        </p>

        <h5 class="mt-4">Deskripsi</h5>

        <p class="text-muted" style="line-height:1.8;">
            <?= $d['deskripsi']; ?>
        </p>
        <div class="qty-wrapper">
            <button type="button" class="qty-btn minus">-</button>
            <input type="text" id="qty" value="1" readonly>
            <button type="button" class="qty-btn plus">+</button>
        </div>


        <!-- TOMBOL -->
        <button onclick="pesan()" class="btn btn-custom w-100 mb-2">
            Pesan Sekarang
        </button>

        <script>
        function pesan(){
            let qty = document.getElementById("qty").value;
            let id  = "<?= $d['id']; ?>";

            window.location.href = "checkout.php?id_jasa=" + id + "&qty=" + qty;
        }
        </script>

        <a href="<?= $link_wa; ?>" target="_blank"
           class="btn btn-success w-100">
           📱 Konsultasi via WhatsApp
        </a>

    </div>

</div>

</div>

<script>
let qtyInput = document.getElementById("qty");

document.querySelector(".plus").onclick = function(){
    qtyInput.value = parseInt(qtyInput.value) + 1;
}

document.querySelector(".minus").onclick = function(){
    if(qtyInput.value > 1){
        qtyInput.value = parseInt(qtyInput.value) - 1;
    }
}
</script>

</body>
</html>