{% extends 'admin_master/base_admin_master.html' if session.get('role') == 'admin_master' else 'admin_database/base_admin_database.html' %}
{% set active_page = 'kitab' %}

{% block page_title %}Kelola Kitab Wirid - Admin Database{% endblock %}

{% block page_header %}
<h5 class="mb-1 fw-bold" style="color: #1f2937; font-size: 1.25rem;">Data Kitab & Wirid</h5>
<small class="text-muted" style="font-size: 0.85rem;">Kelola seluruh buku wirid yang dapat dibaca oleh santri/wali.</small>
{% endblock %}

{% block content %}

    
<!-- CONTROL BAR (Filter & Actions) -->
<div class="mt-4 mb-4 d-flex flex-nowrap align-items-center gap-2 bg-transparent">
    <!-- Filters -->
    <div class="position-relative flex-shrink-0" style="width: 250px;">
        <i class="fas fa-search position-absolute text-muted" style="left: 10px; top: 50%; transform: translateY(-50%); font-size: 0.8rem;"></i>
        <input type="text" id="searchInput" class="form-control form-control-sm border-light-subtle rounded-1 w-100" placeholder="Cari kitab..." style="padding-left: 30px; font-size: 0.85rem;" onkeyup="filterTable()">
    </div>
    
    <div class="ms-auto d-flex gap-2">
        <button class="btn btn-primary btn-sm rounded-1 shadow-sm px-3 d-flex align-items-center gap-2 fw-medium" data-bs-toggle="modal" data-bs-target="#tambahKitabModal" style="font-size: 0.85rem;">
            <i class="fas fa-plus"></i> Tambah Kitab Baru
        </button>
    </div>
</div>


    <!-- Menampilkan pesan flash -->
    {% with messages = get_flashed_messages(with_categories=true) %}
        {% if messages %}
            {% for category, message in messages %}
                <div class="alert alert-{{ category }} alert-dismissible fade show" role="alert">
                    {{ message }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            {% endfor %}
        {% endif %}
    {% endwith %}

    <div class="row">
        {% for kitab in kitab_list %}
        <div class="col-md-4 mb-4">
            <div class="card shadow h-100 border-left-primary">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">
                                Urutan: {{ kitab.urutan }}
                            </div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ kitab.judul }}</div>
                            <p class="mt-2 text-muted small">{{ kitab.deskripsi or 'Tidak ada deskripsi' }}</p>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-book fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
                <div class="card-footer d-flex justify-content-between bg-white">
                    <form method="POST" action="/admin_database/kitab/hapus/{{ kitab.id }}" onsubmit="return confirm('Yakin ingin menghapus kitab ini?');">
                        <button type="submit" class="btn btn-sm btn-danger w-100"><i class="fas fa-trash"></i> Hapus Kitab</button>
                    </form>
                </div>
            </div>
        </div>
        {% else %}
<tr class="action-row-hover border-bottom border-light-subtle">
    <td colspan="6" class="text-center py-5 border-0">
        <div class="d-flex flex-column align-items-center justify-content-center text-muted">
            <i class="fas fa-book-open mb-3" style="font-size: 3rem; color: #cbd5e1;"></i>
            <h6 class="fw-medium mb-1">Belum ada data Kitab Wirid</h6>
            <small>Data kitab atau wirid yang ditambahkan akan muncul di sini.</small>
        </div>
    </td>
</tr>
{% endfor %}
    </div>
</div>

<!-- Modal Tambah Kitab -->
<div class="modal fade" id="tambahKitabModal" tabindex="-1" aria-labelledby="tambahKitabModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="tambahKitabModalLabel">Tambah Kitab Wirid Baru</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form action="/admin_database/kitab" method="POST" enctype="multipart/form-data">
                <div class="modal-body">
                    
                <div class="mb-3">
                    <label for="file_pdf" class="form-label fw-semibold">File Kitab (PDF)</label>
                    <input type="file" class="form-control" id="file_pdf" name="file_pdf" accept=".pdf">
                    <small class="text-muted">Unggah file PDF buku wirid/kitab.</small>
                </div>
                <div class="mb-3">

                        <label for="judul" class="form-label">Judul Kitab / Wirid</label>
                        <input type="text" class="form-control" id="judul" name="judul" required>
                    </div>
                    <div class="mb-3">
                        <label for="deskripsi" class="form-label">Deskripsi Singkat (Opsional)</label>
                        <textarea class="form-control" id="deskripsi" name="deskripsi" rows="3"></textarea>
                    </div>
                    <div class="mb-3">
                        <label for="urutan" class="form-label">Urutan Tampil</label>
                        <input type="number" class="form-control" id="urutan" name="urutan" value="1" required>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-primary">Simpan</button>
                </div>
            </form>
        </div>
    </div>


{% endblock %}