<?php
include('../koneksi.php');
include('templatedetail.php');
include('../partials/sidebar.php');

$data = null;

if (isset($_GET['id'])) {
    $id = $_GET['id'];
    $query = mysqli_query($koneksi, "SELECT * FROM buku WHERE id_buku = '$id'");

    if ($query) {
        $data = mysqli_fetch_array($query);
    }
}

if (!$data) {
    echo "<div class='p-4 sm:ml-64 text-red-600'>Buku tidak ditemukan!</div>";
    exit;
}
?>

<div class="p-5 sm:ml-64">
    <a href="../index.php" class="flex items-center gap-2 px-3 py-1 bg-blue-500 text-white rounded-lg shadow-md hover:bg-blue-600 transition w-25">
        <svg class="w-6 h-6" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14M5 12l4-4m-4 4 4 4" />
        </svg>
        <span class="text-sm font-semibold">Kembali</span>
    </a>

    <h1 class="text-4xl font-bold text-gray-900 mt-2">Detail Buku</h1>
</div>

<div class="p-5 sm:ml-64 flex items-start gap-8">
    <!-- Cover Buku -->
    <div class="w-[250px] h-[330px]">
        <img src="../img/<?php echo htmlspecialchars($data['foto']); ?>"
            alt="Foto Buku"
            class="rounded-lg shadow-md w-full h-full object-cover" />
    </div>

    <div class="flex flex-col gap-2 justify-center">
        <h1 class="text-4xl font-bold text-gray-900">
            <?= htmlspecialchars($data['judul_buku']); ?>
        </h1>
        <h2 class="text-xl text-gray-500 font-semibold">
            <?= htmlspecialchars($data['penulis']); ?>
        </h2>
        <p class="text-md text-gray-600 font-bold">Tahun Terbit: <?= htmlspecialchars($data['tahun_terbit']); ?></p>

        <div class="flex text-gray-400 text-2xl text-yellow-500">
            &#9733; &#9733; &#9733; &#9733; &#9733;
        </div>

        <div class="flex gap-4 mt-5">
            <a data-modal-target="editmodal" data-modal-toggle="editmodal" class="px-4 py-2 border-2 border-orange-500 rounded-lg text-orange-500 hover:bg-orange-500 hover:text-white transition cursor-pointer">
                Edit
            </a>

            <a onclick="confirmDelete(<?= $data['id_buku']; ?>)"
                class="px-4 py-2 border-2 border-red-500 rounded-lg text-red-500 hover:bg-red-500 hover:text-white transition">
                Delete
            </a>
        </div>
    </div>
</div>

<div class="p-5 sm:ml-64 mt-4 text-center">
    <h1 class="text-xl font-bold">Sinopsis</h1>
    <p class="text-gray-600">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor, error doloremque. Magnam iure asperiores nobis excepturi ex similique vitae, explicabo optio commodi dolores ipsam facilis labore quod sint perferendis maiores rem eius odio illo voluptas voluptatibus deleniti, ducimus cum amet. In rerum consequatur, a neque quaerat fuga sed cumque, aspernatur asperiores nisi eos vel molestiae dicta ex unde accusamus, necessitatibus illum magni sit at deserunt provident. Magni itaque molestias mollitia, maxime eligendi magnam quam vero eius explicabo esse! Porro aperiam ad nemo laboriosam ratione consequuntur aliquam alias sit voluptas quas? Quas placeat iure laboriosam! Quibusdam iste expedita reprehenderit numquam provident neque ipsa unde, praesentium cumque accusamus quidem ducimus nam omnis natus aspernatur commodi sed! Provident id, assumenda accusantium perferendis nobis libero illo exercitationem obcaecati autem?</p>
</div>

<script>
    function confirmDelete(id) {
        Swal.fire({
            title: "Apakah Anda yakin?",
            text: "Data yang dihapus tidak bisa dikembalikan!",
            icon: "warning",
            showCancelButton: true,
            confirmButtonColor: "#d33",
            cancelButtonColor: "#3085d6",
            confirmButtonText: "Ya, hapus!",
            cancelButtonText: "Batal"
        }).then((result) => {
            if (result.isConfirmed) {
                window.location.href = "hapus.php?id=" + id;
            }
        });
    }
</script>