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

{% block page_title %}Data Kamar & Asrama - Admin Database{% endblock %}

{% block page_header %}
<h5 class="mb-1 fw-bold" style="color: #1f2937; font-size: 1.25rem;">Data Kamar & Asrama</h5>
<small class="text-muted" style="font-size: 0.85rem;">Kelola master data asrama dan kapasitas kamar santri.</small>
{% endblock %}

{% block content %}
<!-- CONTROL BAR (Filter & Actions) - Frameless Design -->
<div class="mt-2 mb-4 d-flex flex-column flex-lg-row align-items-lg-center justify-content-between gap-3 bg-transparent">
    <!-- Filters & Tabs (Kiri) -->
    <div class="d-flex flex-wrap align-items-center gap-2">
        
        <!-- Toggle Tabs Asrama / Kamar (Pills) -->
        <div class="nav nav-pills p-1 rounded-1 bg-white border border-light-subtle shadow-sm me-2" role="tablist" style="font-size: 0.85rem;">
            <button class="nav-link active py-2 px-3 fw-medium text-dark rounded-1 d-flex align-items-center gap-2" id="kamar-tab" data-bs-toggle="tab" data-bs-target="#kamar" type="button" role="tab" aria-controls="kamar" aria-selected="true" style="padding-top: 0.4rem; padding-bottom: 0.4rem;">
                <i class="fas fa-door-open text-primary opacity-75"></i> Kamar
            </button>
            <button class="nav-link py-2 px-3 fw-medium text-muted rounded-1 d-flex align-items-center gap-2" id="asrama-tab" data-bs-toggle="tab" data-bs-target="#asrama" type="button" role="tab" aria-controls="asrama" aria-selected="false" style="padding-top: 0.4rem; padding-bottom: 0.4rem;">
                <i class="fas fa-building text-primary opacity-75"></i> Asrama
            </button>
        </div>

        <!-- Search Bar (Hanya Kamar) -->
        <div class="position-relative kamar-control" style="width: 220px;">
            <i class="fas fa-search position-absolute text-muted" style="left: 12px; top: 50%; transform: translateY(-50%); font-size: 0.85rem;"></i>
            <input type="text" id="searchKamar" class="form-control form-control-sm border-light-subtle rounded-1" placeholder="Cari nama kamar..." style="padding-left: 35px; font-size: 0.875rem; padding-top: 0.5rem; padding-bottom: 0.5rem;">
        </div>
        
        <!-- Search Bar (Hanya Asrama) -->
        <div class="position-relative asrama-control d-none" style="width: 220px;">
            <i class="fas fa-search position-absolute text-muted" style="left: 12px; top: 50%; transform: translateY(-50%); font-size: 0.85rem;"></i>
            <input type="text" id="searchAsrama" class="form-control form-control-sm border-light-subtle rounded-1" placeholder="Cari nama asrama..." style="padding-left: 35px; font-size: 0.875rem; padding-top: 0.5rem; padding-bottom: 0.5rem;">
        </div>
        
        <!-- Filters (Hanya Asrama) -->
        <select id="filterGenderAsrama" class="form-select form-select-sm text-muted border-light-subtle rounded-1 asrama-control d-none" style="width: 110px; font-size: 0.875rem; padding-top: 0.5rem; padding-bottom: 0.5rem;">
            <option value="">Semua L/P</option>
            <option value="Putra">Putra</option>
            <option value="Putri">Putri</option>
        </select>
        
        <select id="filterStatusAsrama" class="form-select form-select-sm text-muted border-light-subtle rounded-1 asrama-control d-none" style="width: 120px; font-size: 0.875rem; padding-top: 0.5rem; padding-bottom: 0.5rem;">
            <option value="">Semua Status</option>
            <option value="Aktif">Aktif</option>
            <option value="Nonaktif">Nonaktif</option>
        </select>
        
        <!-- Filters (Hanya Kamar) -->
        <select id="filterAsrama" class="form-select form-select-sm text-muted border-light-subtle rounded-1 kamar-control" style="width: 140px; font-size: 0.875rem; padding-top: 0.5rem; padding-bottom: 0.5rem;">
            <option value="">Semua Asrama</option>
            {% for a in asrama %}
            <option value="{{ a.nama_asrama }}">{{ a.nama_asrama }}</option>
            {% endfor %}
        </select>
        
        <select id="filterGenderKamar" class="form-select form-select-sm text-muted border-light-subtle rounded-1 kamar-control" style="width: 110px; font-size: 0.875rem; padding-top: 0.5rem; padding-bottom: 0.5rem;">
            <option value="">Semua L/P</option>
            <option value="Putra">Putra</option>
            <option value="Putri">Putri</option>
        </select>
    </div>
    
    <!-- Actions (Kanan) -->
    <div class="d-flex flex-wrap align-items-center gap-2">
        <!-- Tombol Tambah Asrama (Hanya Asrama) -->
        <a href="/admin_database/asrama/tambah" id="btnTambahAsrama" class="btn btn-sm text-white shadow-sm rounded-1 d-flex align-items-center gap-2 px-3 py-2 btn-hover-zoom asrama-control d-none" style="background-color: #00685f; font-size: 0.85rem; font-weight: 500;">
            <i class="fas fa-plus"></i> Tambah Asrama
        </a>
        <!-- Tombol Tambah Kamar (Hanya Kamar) -->
        <a href="/admin_database/kamar/tambah" id="btnTambahKamar" class="btn btn-sm text-white shadow-sm rounded-1 d-flex align-items-center gap-2 px-3 py-2 btn-hover-zoom kamar-control" style="background-color: #00685f; font-size: 0.85rem; font-weight: 500;">
            <i class="fas fa-plus"></i> Tambah Kamar
        </a>
    </div>
</div>

<div class="tab-content" id="kamarAsramaTabsContent">
    
    <!-- TAB KAMAR -->
    <div class="tab-pane show active" id="kamar" role="tabpanel" tabindex="0">
        <div class="bule-card rounded-2 shadow-sm border-0 overflow-hidden bg-white">
            <div class="table-responsive">
                <table class="table mb-0 align-middle table-hover text-start w-100" id="tabelKamar" style="font-size: 0.875rem;">
                    <thead>
                        <tr class="bg-white border-bottom border-light-subtle">
                            <th class="py-3 px-4 text-uppercase fw-semibold text-muted text-center" style="font-size: 0.7rem; letter-spacing: 0.05em; width: 50px;">NO</th>
                            <th class="py-3 px-3 text-uppercase fw-semibold text-muted text-nowrap" style="font-size: 0.7rem; letter-spacing: 0.05em;">NAMA KAMAR</th>
                            <th class="py-3 px-3 text-uppercase fw-semibold text-muted text-nowrap" style="font-size: 0.7rem; letter-spacing: 0.05em;">ASRAMA</th>
                            <th class="py-3 px-3 text-uppercase fw-semibold text-muted text-center text-nowrap" style="font-size: 0.7rem; letter-spacing: 0.05em;">L/P</th>
                            <th class="py-3 px-3 text-uppercase fw-semibold text-muted text-center text-nowrap" style="font-size: 0.7rem; letter-spacing: 0.05em;">KAPASITAS (TERISI)</th>
                            <th class="py-3 px-3 text-uppercase fw-semibold text-muted text-center text-nowrap" style="font-size: 0.7rem; letter-spacing: 0.05em;">STATUS</th>
                            <th class="py-3 px-4 text-uppercase fw-semibold text-muted text-center text-nowrap" style="font-size: 0.7rem; letter-spacing: 0.05em; width: 100px;">AKSI</th>
                        </tr>
                    </thead>
                    <tbody class="border-top-0">
                            {% for row in kamar %}
                            <tr class="action-row-hover border-bottom border-light-subtle">
                                <td class="text-center text-muted px-4 py-3">{{ loop.index }}</td>
                                <td class="fw-medium text-dark px-3 py-3 name-col">{{ row.nama_kamar }}</td>
                                <td class="text-muted px-3 py-3 asrama-col">{{ row.nama_asrama or '-' }}</td>
                                <td class="text-center px-3 py-3 gender-col">
                                    {% if row.jenis_kelamin == 'Putra' %}
                                        <span class="badge rounded-pill bg-light text-primary border border-primary-subtle px-2 py-1">Putra</span>
                                    {% else %}
                                        <span class="badge rounded-pill bg-light text-danger border border-danger-subtle px-2 py-1">Putri</span>
                                    {% endif %}
                                </td>
                                <td class="text-center px-3 py-3">
                                    <div class="d-flex align-items-center justify-content-center gap-2">
                                        <div class="progress rounded-pill flex-grow-1" style="height: 6px; max-width: 60px; background-color: #e2e8f0;">
                                            {% set persen = 0 %}
                                            {% if row.kapasitas and row.kapasitas > 0 %}
                                                {% set persen = (row.terisi / row.kapasitas * 100) | round %}
                                                {% if persen > 100 %}{% set persen = 100 %}{% endif %}
                                            {% endif %}
                                            
                                            {% set color = 'bg-success' %}
                                            {% if persen >= 90 %}{% set color = 'bg-danger' %}
                                            {% elif persen >= 70 %}{% set color = 'bg-warning' %}{% endif %}
                                            
                                            <div class="progress-bar {{ color }} rounded-pill" role="progressbar" style="width: {{ persen }}%;"></div>
                                        </div>
                                        <span class="fw-medium {{ 'text-danger' if persen >= 100 else 'text-dark' }}">
                                            {{ row.terisi }}/{{ row.kapasitas }}
                                        </span>
                                    </div>
                                    {% if persen >= 100 %}
                                    <div class="mt-1">
                                        <span class="badge rounded-pill bg-danger bg-opacity-10 text-danger border border-danger-subtle px-2 py-0" style="font-size: 0.65rem;"><i class="fas fa-exclamation-triangle me-1"></i>Penuh</span>
                                    </div>
                                    {% endif %}
                                </td>
                                <td class="text-center px-3 py-3 status-col">
                                    {% if row.status == 'Aktif' %}
                                        <span class="badge rounded-pill bg-success bg-opacity-10 text-success border border-success px-2 py-1">Aktif</span>
                                    {% else %}
                                        <span class="badge rounded-pill bg-secondary bg-opacity-10 text-secondary border border-secondary px-2 py-1">Nonaktif</span>
                                    {% endif %}
                                </td>
                                <td class="text-center px-4 py-3">
                                    <div class="d-flex justify-content-center gap-1 action-buttons transition-opacity">
                                        <a href="/admin_database/kamar/penghuni/{{ row.id }}" class="btn btn-sm btn-icon border-0 text-muted hover-text-primary rounded-3" title="Lihat Penghuni">
                                            <i class="fas fa-eye"></i>
                                        </a>
                                        <a href="/admin_database/kamar/edit/{{ row.id }}" class="btn btn-sm btn-icon border-0 text-muted hover-text-warning rounded-3" title="Edit">
                                            <i class="fas fa-edit"></i>
                                        </a>
                                        <form action="/admin_database/kamar/hapus/{{ row.id }}" method="POST" class="d-inline mb-0" onsubmit="return confirm('Apakah Anda yakin ingin menghapus kamar ini? Pastikan tidak ada santri di dalamnya.');">
                                            <button type="submit" class="btn btn-sm btn-icon border-0 text-muted hover-text-danger rounded-3" title="Hapus">
                                                <i class="fas fa-trash-alt"></i>
                                            </button>
                                        </form>
                                    </div>
                                </td>
                            </tr>
                            {% else %}
                            <tr>
                                <td colspan="7" class="text-center py-5 text-muted">
                                    <div class="d-inline-flex align-items-center justify-content-center rounded-circle mb-3" style="width: 64px; height: 64px; background-color: #f1f5f9;">
                                        <i class="fas fa-door-open text-secondary" style="font-size: 1.5rem;"></i>
                                    </div>
                                    <h6 class="fw-medium text-dark">Belum ada data kamar</h6>
                                    <p class="small mb-0">Silakan tambahkan kamar asrama baru.</p>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            
            <div class="bg-white px-4 py-3 border-top border-light-subtle d-flex justify-content-between align-items-center">
                <span class="text-muted" style="font-size: 0.875rem;">Total: <span class="fw-medium text-dark">{{ kamar|length }}</span> kamar</span>
            </div>
        </div>
    </div>

    <!-- TAB ASRAMA -->
    <div class="tab-pane" id="asrama" role="tabpanel" tabindex="0">
        <div class="bule-card rounded-2 shadow-sm border-0 overflow-hidden bg-white">
            <div class="table-responsive">
                <table class="table mb-0 align-middle table-hover text-start w-100" id="tabelAsrama" style="font-size: 0.875rem;">
                    <thead>
                        <tr class="bg-white border-bottom border-light-subtle">
                            <th class="py-3 px-4 text-uppercase fw-semibold text-muted text-center" style="font-size: 0.7rem; letter-spacing: 0.05em; width: 50px;">NO</th>
                            <th class="py-3 px-3 text-uppercase fw-semibold text-muted text-nowrap" style="font-size: 0.7rem; letter-spacing: 0.05em;">NAMA ASRAMA</th>
                            <th class="py-3 px-3 text-uppercase fw-semibold text-muted text-center text-nowrap" style="font-size: 0.7rem; letter-spacing: 0.05em;">L/P</th>
                            <th class="py-3 px-3 text-uppercase fw-semibold text-muted text-center text-nowrap" style="font-size: 0.7rem; letter-spacing: 0.05em;">JML KAMAR</th>
                            <th class="py-3 px-3 text-uppercase fw-semibold text-muted text-center text-nowrap" style="font-size: 0.7rem; letter-spacing: 0.05em;">STATUS</th>
                            <th class="py-3 px-4 text-uppercase fw-semibold text-muted text-center text-nowrap" style="font-size: 0.7rem; letter-spacing: 0.05em; width: 100px;">AKSI</th>
                        </tr>
                    </thead>
                    <tbody class="border-top-0">
                            {% for row in asrama %}
                            <tr class="action-row-hover border-bottom border-light-subtle">
                                <td class="text-center text-muted px-4 py-3">{{ loop.index }}</td>
                                <td class="fw-medium text-dark px-3 py-3">{{ row.nama_asrama }}</td>
                                <td class="text-center px-3 py-3">
                                    {% if row.jenis_kelamin == 'Putra' %}
                                        <span class="badge rounded-pill bg-light text-primary border border-primary-subtle px-2 py-1">Putra</span>
                                    {% else %}
                                        <span class="badge rounded-pill bg-light text-danger border border-danger-subtle px-2 py-1">Putri</span>
                                    {% endif %}
                                </td>
                                <td class="text-center text-muted fw-medium px-3 py-3">{{ row.jml_kamar }} Kamar</td>
                                <td class="text-center px-3 py-3">
                                    {% if row.status == 'Aktif' %}
                                        <span class="badge rounded-pill bg-success bg-opacity-10 text-success border border-success px-2 py-1">Aktif</span>
                                    {% else %}
                                        <span class="badge rounded-pill bg-secondary bg-opacity-10 text-secondary border border-secondary px-2 py-1">Nonaktif</span>
                                    {% endif %}
                                </td>
                                <td class="text-center px-4 py-3">
                                    <div class="d-flex justify-content-center gap-1 action-buttons transition-opacity">
                                        <a href="/admin_database/asrama/edit/{{ row.id }}" class="btn btn-sm btn-icon border-0 text-muted hover-text-warning rounded-3" title="Edit">
                                            <i class="fas fa-edit"></i>
                                        </a>
                                        <form action="/admin_database/asrama/hapus/{{ row.id }}" method="POST" class="d-inline mb-0" onsubmit="return confirm('Apakah Anda yakin ingin menghapus asrama ini?');">
                                            <button type="submit" class="btn btn-sm btn-icon border-0 text-muted hover-text-danger rounded-3" title="Hapus">
                                                <i class="fas fa-trash-alt"></i>
                                            </button>
                                        </form>
                                    </div>
                                </td>
                            </tr>
                            
                            <!-- Modal Edit Asrama Removed -->

                            {% else %}
                            <tr>
                                <td colspan="6" class="text-center py-5 text-muted">
                                    <div class="d-inline-flex align-items-center justify-content-center rounded-circle mb-3" style="width: 64px; height: 64px; background-color: #f1f5f9;">
                                        <i class="fas fa-building text-secondary" style="font-size: 1.5rem;"></i>
                                    </div>
                                    <h6 class="fw-medium text-dark">Belum ada data asrama</h6>
                                    <p class="small mb-0">Silakan tambahkan data asrama baru.</p>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            
            <div class="bg-white px-4 py-3 border-top border-light-subtle d-flex justify-content-between align-items-center">
                <span class="text-muted" style="font-size: 0.875rem;">Total: <span class="fw-medium text-dark">{{ asrama|length }}</span> asrama</span>
            </div>
        </div>
    </div>
</div>

<!-- Modal Tambah Asrama Removed -->

<style>
    /* Styling mengikuti standar desain frameless kelas.html */
    .bule-card { background-color: #ffffff; }
    .btn-white { background-color: #ffffff; }
    .btn-hover-border:hover { color: #00685f !important; border-color: #00685f !important; background-color: #f8fafc; }
    .btn-hover-zoom { transition: transform 0.2s ease, box-shadow 0.2s ease; }
    .btn-hover-zoom:hover { transform: translateY(-2px); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important; }
    
    .action-row-hover:hover .action-buttons { opacity: 1 !important; }
    .transition-opacity { transition: opacity 0.2s ease-in-out; }
    .btn-icon { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
    .hover-text-warning:hover { color: #f59e0b !important; background-color: rgba(245, 158, 11, 0.1) !important; }
    .hover-text-danger:hover { color: #ef4444 !important; background-color: rgba(239, 68, 68, 0.1) !important; }
    .action-row-hover:hover { background-color: #f8fafc !important; }
    
    .nav-pills .nav-link { color: #6c757d; border-radius: 4px; transition: all 0.2s; }
    .nav-pills .nav-link:hover { background-color: #f8fafc; color: #1f2937; }
    .nav-pills .nav-link.active { background-color: #f1f5f9; color: #1f2937 !important; font-weight: 600 !important; box-shadow: 0 1px 2px rgba(0,0,0,0.05); }
    
    .custom-input:focus, .form-control:focus, .form-select:focus {
        background-color: #ffffff !important;
        border-color: #00685f;
        box-shadow: 0 0 0 2px rgba(0, 104, 95, 0.25) !important;
        outline: none;
    }
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const searchKamar = document.getElementById('searchKamar');
    const filterAsrama = document.getElementById('filterAsrama');
    const filterGender = document.getElementById('filterGenderKamar');
    const tableKamar = document.getElementById('tabelKamar');
    
    if(tableKamar) {
        const rowsKamar = tableKamar.querySelectorAll('tbody tr');

        function filterTableKamar() {
            const query = searchKamar ? searchKamar.value.toLowerCase() : '';
            const asramaVal = filterAsrama ? filterAsrama.value.toLowerCase() : '';
            const genderVal = filterGender ? filterGender.value.toLowerCase() : '';

            rowsKamar.forEach(row => {
                if(row.children.length === 1) return; // Skip empty message
                
                const name = row.querySelector('.name-col').textContent.toLowerCase();
                const asrama = row.querySelector('.asrama-col').textContent.toLowerCase();
                const gender = row.querySelector('.gender-col').textContent.toLowerCase();
                
                const matchQuery = name.includes(query);
                const matchAsrama = (asramaVal === '') || asrama.includes(asramaVal);
                const matchGender = (genderVal === '') || gender.includes(genderVal);
                
                if (matchQuery && matchAsrama && matchGender) {
                    row.style.display = '';
                } else {
                    row.style.display = 'none';
                }
            });
        }

        if(searchKamar) searchKamar.addEventListener('input', filterTableKamar);
        if(filterAsrama) filterAsrama.addEventListener('change', filterTableKamar);
        if(filterGender) filterGender.addEventListener('change', filterTableKamar);
    }
    
    // Filter Asrama
    const searchAsrama = document.getElementById('searchAsrama');
    const filterGenderAsrama = document.getElementById('filterGenderAsrama');
    const filterStatusAsrama = document.getElementById('filterStatusAsrama');
    const tableAsrama = document.getElementById('tabelAsrama');
    
    if(tableAsrama) {
        const rowsAsrama = tableAsrama.querySelectorAll('tbody tr');
        
        function filterTableAsrama() {
            const query = searchAsrama ? searchAsrama.value.toLowerCase() : '';
            const genderVal = filterGenderAsrama ? filterGenderAsrama.value.toLowerCase() : '';
            const statusVal = filterStatusAsrama ? filterStatusAsrama.value.toLowerCase() : '';
            
            rowsAsrama.forEach(row => {
                if(row.children.length === 1) return; // Skip empty message
                
                const name = row.querySelector('td:nth-child(2)').textContent.toLowerCase(); // Nama asrama column
                const gender = row.querySelector('td:nth-child(3)').textContent.toLowerCase(); // L/P column
                const status = row.querySelector('td:nth-child(5)').textContent.toLowerCase(); // Status column
                
                const matchQuery = name.includes(query);
                const matchGender = (genderVal === '') || gender.includes(genderVal);
                const matchStatus = (statusVal === '') || status.includes(statusVal);
                
                if (matchQuery && matchGender && matchStatus) {
                    row.style.display = '';
                } else {
                    row.style.display = 'none';
                }
            });
        }
        
        if(searchAsrama) searchAsrama.addEventListener('input', filterTableAsrama);
        if(filterGenderAsrama) filterGenderAsrama.addEventListener('change', filterTableAsrama);
        if(filterStatusAsrama) filterStatusAsrama.addEventListener('change', filterTableAsrama);
    }
    
    // Dynamic Control Bar Visibility
    const kamarControls = document.querySelectorAll('.kamar-control');
    const asramaControls = document.querySelectorAll('.asrama-control');
    
    const kamarTab = document.getElementById('kamar-tab');
    const asramaTab = document.getElementById('asrama-tab');
    
    function updateControls() {
        if(asramaTab.classList.contains('active')) {
            // Asrama active: hide kamar controls, show asrama controls
            kamarControls.forEach(el => el.classList.add('d-none'));
            asramaControls.forEach(el => el.classList.remove('d-none'));
        } else {
            // Kamar active: show kamar controls, hide asrama controls
            kamarControls.forEach(el => el.classList.remove('d-none'));
            asramaControls.forEach(el => el.classList.add('d-none'));
        }
    }
    
    // Run on tab switch
    kamarTab.addEventListener('shown.bs.tab', updateControls);
    asramaTab.addEventListener('shown.bs.tab', updateControls);
    
    // Run once on load to ensure correct state
    setTimeout(updateControls, 100);
    // Filter Kamar Kosong di Form Tambah Asrama
    const selectJk = document.getElementById('selectJenisKelaminAsramaBaru');
    if (selectJk) {
        selectJk.addEventListener('change', function() {
            const selectedJk = this.value;
            const items = document.querySelectorAll('.kamar-kosong-item');
            const emptyMsg = document.getElementById('kamarKosongEmpty');
            let visibleCount = 0;
            
            items.forEach(item => {
                // uncheck when hiding
                if (item.dataset.gender !== selectedJk) {
                    item.style.display = 'none';
                    item.querySelector('input').checked = false;
                } else {
                    item.style.display = 'block';
                    visibleCount++;
                }
            });
            
            if (emptyMsg) {
                if (visibleCount === 0 && items.length > 0) {
                    emptyMsg.classList.remove('d-none');
                } else {
                    emptyMsg.classList.add('d-none');
                }
            }
        });
        
        // Trigger on load
        selectJk.dispatchEvent(new Event('change'));
    }
});
</script>
{% endblock %}