@extends('layouts.layanan')

@section('content')
<!-- Memastikan font premium dan ikon Bootstrap ter-load -->
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">

<style>
    /* 1. Menghilangkan Scrollbar di Samping Kanan Browser */
    html, body {
        scrollbar-width: none; 
        -ms-overflow-style: none; 
    }
    ::-webkit-scrollbar {
        display: none; 
    }

    /* Core Variable Colors */
    :root {
        --pustaka-blue: #004d91;
        --pustaka-dark: #002d5a;
        --slate-50: #f8fafc;
        --slate-100: #f1f5f9;
        --slate-200: #e2e8f0;
        --slate-600: #475569;
        --slate-700: #334155;
        --slate-900: #0f172a;
    }

    body {
        background-color: #f8fafc !important;
        font-family: 'Plus Jakarta Sans', sans-serif;
        color: var(--slate-900);
    }

    .hero-title-custom {
        color: var(--pustaka-blue);
        font-weight: 800;
        letter-spacing: -1px;
    }

    /* Premium Sections Box */
    .service-section-card {
        background: #ffffff;
        padding: 40px;
        margin-bottom: 30px;
        border-radius: 16px;
        border: 1px solid var(--slate-200);
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.03);
    }

    .section-subtitle-premium {
        color: var(--pustaka-blue);
        font-weight: 700;
        font-size: 1.25rem;
        letter-spacing: -0.3px;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    /* Table Customizations */
    .table-premium {
        border-collapse: separate;
        border-spacing: 0;
    }
    .table-premium thead th {
        background-color: var(--slate-100) !important;
        color: var(--slate-700);
        font-weight: 700;
        text-transform: uppercase;
        font-size: 0.75rem;
        letter-spacing: 0.5px;
        padding: 15px 20px;
        border-bottom: 2px solid var(--slate-200);
    }
    .table-premium tbody td {
        padding: 18px 20px;
        color: var(--slate-700);
        border-bottom: 1px solid var(--slate-100);
    }

    /* Modern Procedure Steps (Timeline Grid) */
    .step-badge {
        width: 32px;
        height: 32px;
        background: var(--pustaka-blue);
        color: white;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        font-size: 0.85rem;
    }

    /* Contact Block Custom */
    .contact-badge-info {
        background: var(--slate-50);
        border: 1px solid var(--slate-200);
        border-radius: 12px;
        padding: 24px;
    }
    .contact-link-item {
        display: flex;
        align-items: center;
        gap: 12px;
        color: var(--slate-700);
        margin-bottom: 14px;
        font-size: 0.9rem;
    }
    .contact-link-item i {
        color: var(--pustaka-blue);
        font-size: 1.1rem;
    }

    .icon-box-premium {
        width: 35px;
        height: 35px;
        background: rgba(0, 77, 145, 0.08);
        color: var(--pustaka-blue);
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Alert Box Clean Accent */
    .alert-premium-note {
        background: rgba(220, 53, 69, 0.03);
        border-left: 4px solid #dc3545;
        color: var(--slate-700);
        border-radius: 0 12px 12px 0;
    }

    /* Main Action Button UI */
    .btn-return-premium {
        background: transparent;
        color: var(--slate-600);
        border: 1px solid var(--slate-300);
        border-radius: 8px;
        font-size: 0.85rem;
        padding: 10px 20px;
        transition: all 0.2s;
    }
    .btn-return-premium:hover {
        background: var(--slate-100);
        color: var(--slate-900);
    }
</style>

<div class="container py-5" data-aos="fade-up">
    
    {{-- Header Section --}}
    <div class="text-center mb-5">
        <span class="badge px-3 py-2 mb-2 text-uppercase fw-800 tracking-wider" style="background: rgba(0, 77, 145, 0.08); color: var(--pustaka-blue); font-size: 0.7rem;">
            Layanan Sirkulasi Pustaka
        </span>
        <h2 class="hero-title-custom display-6 mb-3">Layanan Sirkulasi (Peminjaman)</h2>
        <p class="text-muted mx-auto fs-6" style="max-width: 800px; line-height: 1.7;">
            Layanan Sirkulasi Perpustakaan Khusus Bakorwil III Malang membantu pegawai dan pimpinan menemukan serta mengakses koleksi buku secara akurat, terkini, dan relevan guna mendukung perumusan kebijakan, penelitian, dan pengambilan keputusan.
        </p>
        <div style="width: 50px; height: 3px; background: var(--pustaka-blue);" class="mx-auto mt-4 rounded-pill"></div>
    </div>

    {{-- I. Tujuan Layanan --}}
    <section class="service-section-card">
        <h4 class="section-subtitle-premium mb-3">
            <i class="bi bi-bullseye"></i> I. Tujuan Layanan
        </h4>
        <p class="lh-lg text-muted mb-0" style="font-size: 0.95rem;">
            Layanan Sirkulasi berfungsi untuk mendukung pelaksanaan tugas dan fungsi pegawai Bakorwil III Malang dengan memberikan kemudahan akses terhadap koleksi fisik yang relevan dengan bidang pemerintahan, koordinasi wilayah, serta pembangunan daerah.
        </p>
    </section>

    {{-- UPDATE URUTAN: II. Alur Mandiri --}}
    <section class="service-section-card">
        <h4 class="section-subtitle-premium mb-4">
            <i class="bi bi-qr-code-scan"></i> II. Alur Peminjaman Mandiri (Self-Service)
        </h4>
        <p class="text-muted small mb-4">
            Silakan ikuti instruksi peminjaman mandiri pada mesin anjungan (*kiosk*) sesuai dengan tahapan baku berikut:
        </p>
        
        <div class="row g-3">
            <div class="col-md-3">
                <div class="p-4 border rounded-3 bg-light text-center h-100">
                    <div class="icon-box-premium mx-auto mb-3" style="width: 48px; height: 48px;">
                        <i class="bi bi-barcode-scan fs-4"></i>
                    </div>
                    <h6 class="fw-bold text-dark mb-2" style="font-size: 0.9rem;">1. Scan Barcode Buku</h6>
                    <p class="text-muted small mb-0" style="font-size: 0.8rem; line-height: 1.5;">Pindai stiker kode barcode logistik yang tertera pada buku terlebih dahulu pada sensor alat pemindai.</p>
                </div>
            </div>
            <div class="col-md-3">
                <div class="p-4 border rounded-3 bg-light text-center h-100">
                    <div class="icon-box-premium mx-auto mb-3" style="width: 48px; height: 48px;">
                        <i class="bi bi-person-vcard fs-4"></i>
                    </div>
                    <h6 class="fw-bold text-dark mb-2" style="font-size: 0.9rem;">2. Scan Kartu Anggota</h6>
                    <p class="text-muted small mb-0" style="font-size: 0.8rem; line-height: 1.5;">Pindai kode barcode pada Kartu Tanda Anggota perpustakaan atau KTP Anda untuk memvalidasi akun peminjam.</p>
                </div>
            </div>
            <div class="col-md-3">
                <div class="p-4 border rounded-3 bg-light text-center h-100">
                    <div class="icon-box-premium mx-auto mb-3" style="width: 48px; height: 48px;">
                        <i class="bi bi-check-circle-fill fs-4 text-success"></i>
                    </div>
                    <h6 class="fw-bold text-dark mb-2" style="font-size: 0.9rem;">3. Transaksi Selesai</h6>
                    <p class="text-muted small mb-0" style="font-size: 0.8rem; line-height: 1.5;">Sistem mengonfirmasi peminjaman. serta mencatat hasil transaksi di website  peminjaman Anda.</p>
                </div>
            </div>
            <div class="col-md-3">
                <div class="p-4 border rounded-3 text-center h-100" style="border-color: var(--pustaka-blue) !important; background: rgba(0, 77, 145, 0.02);">
                    <div class="icon-box-premium mx-auto mb-3" style="width: 48px; height: 48px; background: var(--pustaka-blue); color: white;">
                        <i class="bi bi-person-workspace fs-4"></i>
                    </div>
                    <h6 class="fw-bold text-dark mb-2" style="font-size: 0.9rem;">4. Lapor Admin & Validasi</h6>
                    <p class="text-muted small mb-0" style="font-size: 0.8rem; line-height: 1.5;">Ketika membawa buku keluar, wajib melapor ke meja Admin dengan menyertakan Surat Pengantar cetak sebagai verifikasi akhir.</p>
                </div>
            </div>
        </div>
    </section>

    {{-- III. Ketentuan Peminjaman --}}
    <section class="service-section-card">
        <h4 class="section-subtitle-premium mb-3">
            <i class="bi bi-card-checklist"></i> III. Ketentuan Peminjaman Khusus Pegawai
        </h4>
        <p class="text-muted mb-4 small">Setiap transaksi peminjaman buku wajib menyertakan identifikasi resmi sesuai dengan regulasi pengelolaan pustaka yang berlaku.</p>

        <div class="table-responsive rounded-3 border mb-3">
            <table class="table table-premium align-middle mb-0">
                <thead>
                    <tr>
                        <th>Kategori Pegawai</th>
                        <th>Syarat Utama</th>
                        <th class="text-center">Jumlah Maksimal Pinjam</th>
                        <th class="text-center">Masa Pinjam Maksimal</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td><span class="fw-bold text-dark">Pegawai (PNS/PPPK) Bakorwil III</span></td>
                        <td>Kartu Tanda Pegawai atau Kartu Anggota Perpustakaan</td>
                        <td class="text-center fw-semibold text-primary-custom">7 Eksemplar</td>
                        <td class="text-center">7 Hari Kerja</td>
                    </tr>
                    <tr>
                        <td><span class="fw-bold text-dark">Pegawai Magang / Kontrak</span></td>
                        <td>Surat Keterangan Atasan & Kartu Anggota Sementara</td>
                        <td class="text-center fw-semibold text-primary-custom">3 Eksemplar</td>
                        <td class="text-center">7 Hari Kerja</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </section>

    {{-- V. Pengembalian dan Perpanjangan --}}
    <section class="service-section-card">
        <h4 class="section-subtitle-premium mb-4">
            <i class="bi bi-arrow-repeat"></i> V. Pengembalian dan Perpanjangan
        </h4>
        
        <div class="row g-4">
            <div class="col-md-6">
                <div class="p-3 border rounded-3 h-100" style="background: var(--slate-50);">
                    <h5 class="fw-bold text-dark mb-3" style="font-size: 1rem;"><i class="bi bi-box-arrow-in-down text-primary me-2"></i>A. Sistem Pengembalian</h5>
                    <ul class="text-muted small ps-3 mb-0" style="line-height: 1.7;">
                        <li>Koleksi buku wajib dikembalikan tepat waktu sebelum atau pas pada tanggal jatuh tempo.</li>
                        <li>Kompensasi toleransi diberikan selama 1 hari kerja berikutnya jika tanggal jatuh tempo bertepatan dengan hari libur nasional atau kedinasan.</li>
                    </ul>
                </div>
            </div>
            
            <div class="col-md-6">
                <div class="p-3 border rounded-3 h-100" style="background: var(--slate-50);">
                    <h5 class="fw-bold text-dark mb-3" style="font-size: 1rem;"><i class="bi bi-arrow-clockwise text-primary me-2"></i>B. Aturan Perpanjangan</h5>
                    <ul class="text-muted small ps-3 mb-0" style="line-height: 1.7;">
                        <li><strong>Batas Maksimal:</strong> Perpanjangan hanya diizinkan sebanyak 1 kali per koleksi buku.</li>
                        <li><strong>Syarat Mutlak:</strong> Buku belum berstatus terlambat dan tidak sedang dalam daftar antrean pesanan oleh pegawai lain.</li>
                        <li><strong>Metode Pemrosesan:</strong> Dapat diajukan langsung di meja sirkulasi, sistem OPAC mandiri, atau melalui konfirmasi email internal.</li>
                    </ul>
                </div>
            </div>
        </div>
    </section>

    {{-- VI. Koleksi Non-Sirkulasi --}}
    <section class="service-section-card">
        <h4 class="section-subtitle-premium mb-3">
            <i class="bi bi-journal-x"></i> VI. Koleksi Non-Sirkulasi (Hanya Baca di Tempat)
        </h4>
        <p class="text-muted small mb-4">Daftar koleksi di bawah ini tidak diizinkan untuk dibawa keluar perpustakaan demi menjaga otentisitas dan ketersediaan referensi darurat:</p>

        <div class="table-responsive rounded-3 border">
            <table class="table table-premium align-middle mb-0">
                <thead>
                    <tr>
                        <th width="35%">Jenis Koleksi</th>
                        <th>Contoh Materi Referensi</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td><span class="fw-bold text-dark">Koleksi Referensi Murni</span></td>
                        <td>Kamus Sektoral, Ensiklopedia Pemerintahan, Buku Tahunan Data, Direktori Lembaga.</td>
                    </tr>
                    <tr>
                        <td><span class="fw-bold text-dark">Koleksi Khusus & Arsip Langka</span></td>
                        <td>Laporan Tahunan Pemprov Jatim, Dokumen Peraturan Daerah Lama, naskah kebijakan historis.</td>
                    </tr>
                    <tr>
                        <td><span class="fw-bold text-dark">Terbitan Berkala Terbaru</span></td>
                        <td>Jurnal Ilmiah terakreditasi dan Majalah Kedinasan edisi bulan berjalan.</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </section>

    {{-- VII. Sanksi --}}
    <section class="service-section-card">
        <h4 class="section-subtitle-premium mb-3">
            <i class="bi bi-exclamation-triangle"></i> VII. Sanksi dan Kewajiban Pegawai
        </h4>
        <div class="alert alert-premium-note p-3 mb-0">
            <ul class="small mb-0 text-dark ps-3" style="line-height: 1.7;">
                <li><strong>Keterlambatan Akut:</strong> Penerbitan surat pemberitahuan resmi yang ditembuskan kepada atasan langsung serta penangguhan hak akses peminjaman sementara waktu.</li>
                <li><strong>Kerusakan atau Kehilangan:</strong> Anggota wajib mengganti dengan buku yang memiliki judul, penulis, dan edisi eksemplar yang sama, atau menyepakati nilai ganti rugi setara.</li>
            </ul>
        </div>
    </section>

    {{-- VIII. Jam Layanan & Kontak --}}
    <div class="row g-4 mb-4">
        <div class="col-lg-5">
            <div class="service-section-card h-100">
                <h4 class="section-subtitle-premium mb-4">
                    <i class="bi bi-clock-history"></i> VIII. Jam Operasional Sirkulasi
                </h4>
                <div class="table-responsive rounded-3 border">
                    <table class="table table-premium text-center align-middle mb-0">
                        <thead>
                            <tr>
                                <th>Hari Kerja</th>
                                <th>Jam Layanan</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td><span class="fw-bold text-dark">Senin - Kamis</span></td>
                                <td class="fw-bold text-primary-custom">08.00 - 16.00 WIB</td>
                            </tr>
                            <tr>
                                <td><span class="fw-bold text-dark">Jumat</span></td>
                                <td class="fw-bold text-primary-custom">08.00 - 11.30 WIB</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="mt-3 p-3 bg-light rounded-3 border">
                    <span class="small text-muted d-block fw-bold mb-1">LOKASI UTAMA:</span>
                    <span class="small text-dark fw-semibold"><i class="bi bi-geo-fill text-primary me-1"></i> Ruang Perpustakaan Utama, Gedung Bakorwil III Malang</span>
                </div>
            </div>
        </div>

        <div class="col-lg-7">
            <div class="service-section-card h-100">
                <h4 class="section-subtitle-premium mb-4">
                    <i class="bi bi-envelope-card"></i> Hubungi Hub Pustakawan
                </h4>
                <div class="contact-badge-info">
                    <div class="row">
                        <div class="col-sm-6">
                            <div class="contact-link-item">
                                <div class="icon-box-premium"><i class="bi bi-whatsapp"></i></div>
                                <div>
                                    <div class="text-muted" style="font-size:0.7rem; font-weight:700; text-transform:uppercase;">Telepon / WA</div>
                                    <span class="fw-bold text-dark">0851-3479-1603</span>
                                </div>
                            </div>
                            <div class="contact-link-item">
                                <div class="icon-box-premium"><i class="bi bi-envelope-at"></i></div>
                                <div>
                                    <div class="text-muted" style="font-size:0.7rem; font-weight:700; text-transform:uppercase;">E-Mail</div>
                                    <span class="fw-bold text-dark" style="font-size:0.85rem;">arsiptubakorwil@gmail.com</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-6">
                            <div class="contact-link-item">
                                <div class="icon-box-premium"><i class="bi bi-browser-chrome"></i></div>
                                <div>
                                    <div class="text-muted" style="font-size:0.7rem; font-weight:700; text-transform:uppercase;">Situs Web</div>
                                    <a href="https://bakorwilmalang.jatimprov.go.id" target="_blank" class="fw-bold text-primary-custom text-decoration-none" style="font-size:0.85rem;">bakorwilmalang.jatimprov.go.id</a>
                                </div>
                            </div>
                            <div class="contact-link-item">
                                <div class="icon-box-premium"><i class="bi bi-geo-alt"></i></div>
                                <div>
                                    <div class="text-muted" style="font-size:0.7rem; font-weight:700; text-transform:uppercase;">Alamat Kantor</div>
                                    <span class="fw-bold text-dark" style="font-size:0.85rem;">Jl. Simpang Ijen No. 2, Kota Malang</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Back Action --}}
    <div class="text-center mt-5">
        <a href="{{ route('user.layanan') }}" class="btn btn-return-premium fw-semibold">
            <i class="bi bi-arrow-left me-2"></i> Kembali ke Menu Layanan
        </a>
    </div>
</div>

<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script>
    AOS.init({
        duration: 800,
        once: true,
        offset: 30
    });
</script>
@endsection

