<?php

include "../includes/header.php";
include "../includes/navbar.php";


// =====================================================
// DATA LAYANAN PERPUSTAKAAN
// =====================================================

$layanan = [

    "kartu-anggota" => [
        "judul" => "Pendaftaran Kartu Anggota",

        "deskripsi" => "Pendaftaran anggota perpustakaan secara online.",

        "isi" => "

        <div class='pendaftaran-anggota'>

            <p class='mb-4'>
                Silakan klik link berikut untuk melakukan
                pendaftaran anggota perpustakaan:
            </p>

            <div class='link-pendaftaran mb-4'>

                <a
                    href='https://inlislite.ebookbanyuwangi.id/pendaftaran'
                    target='_blank'
                    rel='noopener noreferrer'>

                    https://inlislite.ebookbanyuwangi.id/pendaftaran

                </a>

            </div>

        </div>

        "
    ],


    // =====================================================
    // PEMINJAMAN
    // =====================================================

    "peminjaman" => [

        "judul" => "Alur Peminjaman Buku",

        "deskripsi" => "Informasi mengenai tahapan dan prosedur peminjaman koleksi buku perpustakaan.",

        "isi" => "

        <div style='text-align: center; margin-top: 20px;'>

            <img
                src='/website-dispussip/assets/img/peminjaman.png'
                alt='Alur Peminjaman Buku'
                style='width: 100%; max-width: 1500px; height: auto; display: block; margin: 0 auto;'
            >

        </div>

        "
    ],


    // =====================================================
    // PENGEMBALIAN
    // =====================================================

    "pengembalian" => [

        "judul" => "Alur Pengembalian Buku",

        "deskripsi" => "Informasi mengenai tahapan dan prosedur pengembalian koleksi buku perpustakaan.",

        "isi" => "

        <div style='text-align: center; margin-top: 20px;'>

            <img
                src='/website-dispussip/assets/img/pengembalian.png'
                alt='Alur Pengembalian Buku'
                style='width: 100%; max-width: 1500px; height: auto; display: block; margin: 0 auto;'
            >

        </div>

        "
    ],


    // =====================================================
    // BACA DI TEMPAT
    // =====================================================

    "baca_ditempat" => [

        "judul" => "Layanan Baca di Tempat",

        "deskripsi" => "Layanan bagi masyarakat umum untuk membaca koleksi perpustakaan secara langsung di tempat yang telah disediakan.",

        "isi" => "

        <div style='text-align: center; margin-bottom: 25px;'>

            <img
                src='/website-dispussip/assets/img/tempatbaca.png'
                alt='Layanan Baca di Tempat'
                style='width: 100%; max-width: 1500px; height: auto; display: block; margin: 0 auto;'
            >

        </div>


        <p>
            <strong>Layanan Baca di Tempat</strong> merupakan layanan
            perpustakaan yang diperuntukkan bagi masyarakat umum yang
            berada di Kabupaten Banyuwangi untuk membaca koleksi buku
            secara langsung di ruang baca perpustakaan.
        </p>


        <h5 class='mt-4'>
            Persyaratan
        </h5>


        <p>
            Masyarakat umum yang berada di Kabupaten Banyuwangi.
        </p>


        <h5 class='mt-4'>
            Sistem, Mekanisme dan Prosedur
        </h5>


        <ol>

            <li>
                Pengunjung datang ke perpustakaan dan mengisi daftar hadir
                pengunjung pada komputer yang tersedia berdasarkan jenis
                keanggotaan, yaitu Anggota, Non Anggota, atau Rombongan.
                Proses pengisian daftar hadir berlangsung selama kurang lebih
                1 menit.
            </li>

            <li>
                Pengunjung menitipkan barang atau tas di loker penitipan
                apabila membawa barang atau tas, selama kurang lebih 1 menit.
            </li>

            <li>
                Pengunjung menuju ruang koleksi untuk memilih buku yang
                akan dibaca selama kurang lebih 5 menit.
            </li>

            <li>
                Pengunjung membaca koleksi pada tempat baca yang telah
                disediakan sesuai dengan jadwal buka perpustakaan.
            </li>

            <li>
                Apabila pengunjung akan meninggalkan perpustakaan, buku
                yang telah dibaca diletakkan di meja baca.
            </li>

            <li>
                Pengunjung mengambil kembali barang atau tas yang dititipkan
                di loker apabila membawa barang atau tas.
            </li>

            <li>
                Pengunjung meninggalkan perpustakaan.
            </li>

        </ol>


        <h5 class='mt-4'>
            Jangka Waktu Pelayanan
        </h5>


        <ol>

            <li>
                12 jam.
            </li>

            <li>
                Berdasarkan jam buka layanan perpustakaan.
            </li>

        </ol>


        <h5 class='mt-4'>
            Biaya / Tarif
        </h5>


        <p>
            Tidak dipungut biaya atau <strong>gratis</strong>.
        </p>


        <h5 class='mt-4'>
            Produk Pelayanan
        </h5>


        <p>
            <strong>Baca buku di tempat.</strong>
        </p>


        <div
            style='
                margin-top: 30px;
                padding: 20px;
                text-align: center;
                background: #f5f8fc;
                border-radius: 12px;
            '>

            <strong>
                Motto Pelayanan
            </strong>

            <p
                style='
                    margin-top: 10px;
                    margin-bottom: 0;
                    font-style: italic;
                '>

                &ldquo;Melayani dengan sepenuh hati,
                dengan hati-hati dan tidak sesuka hati.&rdquo;

            </p>

        </div>

        "
    ],


    // =====================================================
    // PERPUSTAKAAN KELILING
    // =====================================================

    "perpustakaan_keliling" => [

        "judul" => "Layanan Mobil Perpustakaan Keliling (MPK)",

        "deskripsi" => "Layanan Mobil Perpustakaan Keliling (MPK) untuk memberikan akses bahan bacaan kepada masyarakat di berbagai lokasi.",

        "isi" => "

        <div style='text-align: center; margin-bottom: 25px;'>

            <img
                src='/website-dispussip/assets/img/perpuskeliling.jpeg'
                alt='Layanan Mobil Perpustakaan Keliling'
                style='
                    width: 100%;
                    max-width: 1500px;
                    height: auto;
                    display: block;
                    margin: 0 auto;
                '
            >

        </div>


        <p>
            <strong>Layanan Mobil Perpustakaan Keliling (MPK)</strong>
            merupakan layanan perpustakaan yang diberikan kepada masyarakat
            melalui mobil perpustakaan keliling untuk menyediakan akses
            bahan bacaan di lokasi yang telah ditentukan.
        </p>


        <h5 class='mt-4'>
            Persyaratan
        </h5>


        <p>
            <strong>Persyaratan lokasi layanan:</strong>
        </p>


        <ol>

            <li>
                Tempat-tempat strategis.
            </li>

            <li>
                Perpustakaan sekolah/desa yang tidak memiliki akses informasi.
            </li>

            <li>
                Daerah terpencil.
            </li>

        </ol>


        <h5 class='mt-4'>
            Sistem, Mekanisme dan Prosedur
        </h5>


        <ol>

            <li>
                Mobil Perpustakaan Keliling (MPK) menuju lokasi yang sudah
                ditentukan dan membuka layanan sesuai jadwal serta menyiapkan
                buku daftar hadir pengunjung.
            </li>

            <li>
                Pengunjung datang ke Mobil Perpustakaan Keliling dan mengisi
                buku kehadiran pengunjung selama 1 menit.
            </li>

            <li>
                Pengunjung memilih koleksi di Mobil Perpustakaan Keliling
                selama 5 menit.
            </li>

            <li>
                Pengunjung membaca koleksi di tempat yang sudah disediakan
                selama jam buka layanan.
            </li>

            <li>
                Pengunjung mengembalikan koleksi yang telah dibaca pada waktu
                jam tutup layanan.
            </li>

            <li>
                Petugas merapikan kembali buku sebelum kembali ke Dinas
                Perpustakaan dan Kearsipan selama 10 menit.
            </li>

        </ol>


        <h5 class='mt-4'>
            Jangka Waktu Pelayanan
        </h5>


        <ol>

            <li>
                240 menit.
            </li>

            <li>
                Berdasarkan jam buka layanan perpustakaan.
            </li>

        </ol>


        <h5 class='mt-4'>
            Biaya / Tarif
        </h5>


        <p>
            Tidak dipungut biaya (<strong>Gratis</strong>).
        </p>


        <h5 class='mt-4'>
            Produk Pelayanan
        </h5>


        <p>
            <strong>Baca Buku di Tempat</strong>
        </p>


        <div
            style='
                margin-top: 30px;
                padding: 20px;
                text-align: center;
                background: #f5f8fc;
                border-radius: 12px;
            '>

            <strong>
                Motto Pelayanan
            </strong>

            <p
                style='
                    margin-top: 10px;
                    margin-bottom: 0;
                    font-style: italic;
                '>

                &ldquo;Melayani dengan sepenuh hati,
                dengan hati-hati dan tidak sesuka hati.&rdquo;

            </p>

        </div>

        "
    ]

];


// =====================================================
// CEK DETAIL LAYANAN
// =====================================================

$detail = isset($_GET['layanan'])
    ? $_GET['layanan']
    : null;

?>


<div style="padding-top:120px;">

    <style>
        /* =====================================================
   JUDUL HALAMAN
===================================================== */

        .section-title {
            font-weight: 700;
            color: #1f4e79;
        }

        .layanan-subtitle {
            max-width: 750px;
            margin: 0 auto;
            color: #6c757d;
        }


        /* =====================================================
   DAFTAR LAYANAN
===================================================== */

        .layanan-wrapper {
            max-width: 950px;
            margin: 0 auto;
        }

        .layanan-item {
            background: #ffffff;
            border: 1px solid #eeeeee;
            border-radius: 10px;
            margin-bottom: 12px;
            overflow: hidden;
            transition: all 0.25s ease;
        }

        .layanan-item:hover {
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
            transform: translateY(-2px);
        }

        .layanan-link {
            display: flex;
            align-items: center;
            justify-content: space-between;
            text-decoration: none;
            color: #6c757d;
            padding: 20px 25px;
        }

        .layanan-link:hover {
            color: #1f4e79;
        }

        .layanan-nama {
            font-size: 18px;
            font-weight: 500;
        }

        .layanan-arrow {
            font-size: 24px;
            color: #1f4e79;
        }


        /* =====================================================
   DETAIL LAYANAN
===================================================== */

        .detail-wrapper {
            max-width: 900px;
            margin: 0 auto;
        }

        .detail-card {
            border: none;
            border-radius: 15px;
            overflow: hidden;
        }

        .detail-header {
            background: #07357e;
            color: white;
            padding: 30px;
        }

        .detail-header h2 {
            margin: 0;
            font-weight: 700;
        }

        .detail-body {
            padding: 35px;
            line-height: 1.8;
            color: #555;
        }

        .detail-body h5 {
            color: #1f4e79;
            font-weight: 700;
        }

        .detail-body li {
            margin-bottom: 8px;
        }

        .btn-kembali {
            margin-top: 25px;
        }

        .btn-primary {
            background-color: #07357e !important;
            border-color: #07357e !important;
        }
    </style>


    <div class="container py-5">


        <?php if ($detail && isset($layanan[$detail])) { ?>


            <!-- =================================================
         HALAMAN DETAIL LAYANAN
    ================================================== -->

            <div class="detail-wrapper">

                <div class="card shadow-sm detail-card">


                    <div class="detail-header text-center">

                        <h2>
                            <?= htmlspecialchars($layanan[$detail]['judul']); ?>
                        </h2>

                    </div>


                    <div class="detail-body">

                        <?= $layanan[$detail]['isi']; ?>


                        <a
                            href="layanan-perpustakaan.php"
                            class="btn btn-primary btn-kembali">

                            ← Kembali ke Layanan Perpustakaan

                        </a>

                    </div>

                </div>

            </div>


        <?php } else { ?>


            <!-- =================================================
         HALAMAN DAFTAR LAYANAN
    ================================================== -->

            <div class="text-center mb-5">

                <h1 class="section-title">
                    Layanan Perpustakaan
                </h1>

                <p class="layanan-subtitle">

                    Informasi layanan yang tersedia pada
                    Dinas Perpustakaan dan Kearsipan
                    Kabupaten Banyuwangi.

                </p>

            </div>


            <div class="layanan-wrapper">


                <?php foreach ($layanan as $slug => $data) { ?>


                    <div class="layanan-item">

                        <a
                            href="layanan-perpustakaan.php?layanan=<?= urlencode($slug); ?>"
                            class="layanan-link">


                            <div class="layanan-nama">

                                <?= htmlspecialchars($data['judul']); ?>

                            </div>


                            <div class="layanan-arrow">

                                →

                            </div>


                        </a>

                    </div>


                <?php } ?>


            </div>


        <?php } ?>


    </div>

</div>


<?php

include "../includes/footer.php";

?>