<?php
session_start();

if( !isset($_SESSION["login"])){
    header("Location: ../login/login.php");
}

require '../functions.php';

$villa = query("SELECT * FROM tb_villa WHERE id = 16")[0];

?>


<!doctype html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- my font -->
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
    <link rel="stylesheet" href="detail.css">

    <title>Villahayati.</title>
</head>
<body>
    <!-- nav -->
    <nav class="navbar navbar-expand-lg">
        <div class="container">
            <a class="navbar-brand"><span class="stay">Villa</span>hayati.</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
                <div class="navbar-nav ml-auto">
                    <a class="nav-link" href="../pemesanan/pemesanan.php">Pemesanan</a>
                    <a class="nav-link" href="../testimoni/testimoni.php">Testimoni</a>
                    <a class="nav-link" href="../aboutus/aboutUs.php">About us</a>
                    <a class="nav-link" href="../index.php">Logout</a>
                </div>
            </div>
        </div>
    </nav>
    <!-- end of nav -->
    
    <!-- jumbotron -->
    <div class="jumbotron jumbotron-fluid">
        <div class="container">
            <div class="row">
                <div class="col-md-12 text-center">
                    <h2 class="title"><?= $villa["nama"] ?></h2>
                    <p class="sub"><?= $villa["tempat"] ?></p>
                </div>
            </div>
            <div class="row mt-5">
            <div class="col-md-7">
                <div class="slideshow-container">
                    <img src="../img/<?= $villa["foto"] ?>" alt="" class="jumbo slide active">

                    <img src="../fotovilla/2.jpeg" alt="" class="jumbo slide">
                    <img src="../fotovilla/3.jpeg" alt="" class="jumbo slide">
                    <img src="../fotovilla/4.jpeg" alt="" class="jumbo slide">
                    <img src="../fotovilla/5.jpeg" alt="" class="jumbo slide">

                    <!-- Tambahkan gambar lain jika diperlukan -->
                    <div class="slide-controls">
        <button class="prev-slide"><</button>
        <button class="next-slide">></button>
    </div>
                </div>
            </div>

                <div class="col-md-3">
                    <img src="../img/<?= $villa["foto3"] ?>" alt="" class="mini">
                    <img src="../img/<?= $villa["foto4"] ?>" alt="" class="mini-2">
                </div>
            </div>
        </div>
    </div>
    <!-- end of jumbotron -->

    <!-- about -->
    <section class="about">
        <div class="container">
        <div id="floating-button">
            <a href="../chat2/chat.php">
            <img src="https://img.icons8.com/dotty/1x/chat-message.png" alt="Logo Pesan">
            </a>
        </div>
        <div id="floating-window">
             <div class="header">
             <div id="close-button">&times;</div>
        
    <!-- Isi konten window di sini -->
        </div>
		<div class="content">
			<p>Hubungi Kami</p>
		</div>
	    </div>
            <div class="row">
                <div class="col-md-7">
                    <h4 class="about-title">Tentang Villa</h4>
                    <p class="about-sub"><?= $villa["deskripsi"] ?></p>
                    <h4 class="about-title mt-5">Fasilitas</h4>
                    <div class="row">
                        <div class="col-md-4">
                            <div class="fasilities-card-1 p-1 mt-4">
                                <h5 class="fasilities-sub"><?= $villa["fasilitas_1"] ?></h5>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="fasilities-card-2 p-1 mt-4">
                                <h5 class="fasilities-sub"><?= $villa["fasilitas_2"] ?></h5>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="fasilities-card-3 p-1 mt-4">
                                <h5 class="fasilities-sub"><?= $villa["fasilitas_3"] ?></h5>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="fasilities-card-4 p-1 mt-4">
                                <h5 class="fasilities-sub"><?= $villa["fasilitas_4"] ?></h5>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 offset-md-1">
                    <h4 class="about-title">Harga</h4>
                    <?php
                    $harga = $villa["harga"];
                    $harga_rupiah = "Rp " . number_format($harga, 0, ',', '.');

                    echo '<p class="price-sub"><span class="price mr-1">' . $harga_rupiah . '</span> per malam</p>';
                    ?>
                        <input type="hidden" value="<?= $villa["id"] ?>" name="id" >
                        <a href="../booking/booking.php?id=<?= $villa["id"] ?>" class="button btn btn-primary mt-3">Pesan Sekarang</a>
                        <a href="https://goo.gl/maps/fbtf46XHQrMB9hu99" class="button2 btn btn-secondary mt-3">Cek Maps</a>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- end of about -->

    <!-- footer -->
    <?php include '../footer/footer.php'; ?>
    <!-- end of footer -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $(document).ready(function () {
        var slides = $(".slide");
        var currentSlide = 0;

        function showSlide() {
            slides.removeClass("active");
            slides.eq(currentSlide).addClass("active");
        }

        function nextSlide() {
            currentSlide++;
            if (currentSlide >= slides.length) {
                currentSlide = 0;
            }
            showSlide();
        }

        function prevSlide() {
            currentSlide--;
            if (currentSlide < 0) {
                currentSlide = slides.length - 1;
            }
            showSlide();
        }

        $(".next-slide").click(function () {
            nextSlide();
        });

        $(".prev-slide").click(function () {
            prevSlide();
        });

        setInterval(nextSlide, 3000); // Menggeser gambar setiap 3 detik
    });
</script>
    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
    <!-- <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script> -->

    <!-- Option 2: jQuery, Popper.js, and Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>

    <!-- Load jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<!-- Load jQuery UI -->
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.0/themes/smoothness/jquery-ui.css">

</body>
</html>