{% 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 %}Tambah Asrama Baru - Admin Database{% endblock %}

{% block page_header %}
<div class="d-flex align-items-center gap-3">
    <a href="/admin_database/kamar" class="btn btn-light border-light-subtle rounded-circle d-flex align-items-center justify-content-center shadow-sm" style="width: 40px; height: 40px;">
        <i class="fas fa-arrow-left text-muted"></i>
    </a>
    <div>
        <h5 class="mb-1 fw-bold" style="color: #1f2937; font-size: 1.25rem;">Tambah Asrama Baru</h5>
        <small class="text-muted" style="font-size: 0.85rem;">Tambahkan asrama baru dan kelompokkan kamar kosong ke dalamnya.</small>
    </div>
</div>
{% endblock %}

{% block content %}
<div class="row g-4 mt-2 mb-4">
    <div class="col-md-5">
        <form action="/admin_database/asrama/simpan" method="POST" id="formTambahAsrama">
            <!-- Informasi Asrama -->
            <div class="bule-card border-0 shadow-sm rounded-3 bg-white h-100 p-4 mb-4">
                <h6 class="fw-bold text-dark mb-3"><i class="fas fa-building text-primary me-2"></i>1. Informasi Asrama</h6>
                
                <div class="mb-3">
                    <label class="form-label text-muted small fw-medium">Nama Asrama <span class="text-danger">*</span></label>
                    <input type="text" name="nama_asrama" class="form-control form-control-sm rounded-2 border-light-subtle shadow-none p-2" placeholder="Contoh: Asrama Putra A" required>
                </div>
                
                <div class="mb-3">
                    <label class="form-label text-muted small fw-medium">Jenis Kelamin <span class="text-danger">*</span></label>
                    <select name="jenis_kelamin" id="selectJenisKelaminAsramaBaru" class="form-select form-select-sm rounded-2 border-light-subtle shadow-none p-2" required>
                        <option value="Putra">Putra</option>
                        <option value="Putri">Putri</option>
                    </select>
                </div>
                
                <div class="mb-3">
                    <label class="form-label text-muted small fw-medium">Status <span class="text-danger">*</span></label>
                    <select name="status" class="form-select form-select-sm rounded-2 border-light-subtle shadow-none p-2" required>
                        <option value="Aktif">Aktif</option>
                        <option value="Nonaktif">Nonaktif</option>
                    </select>
                </div>
            </div>
    </div>
    
    <div class="col-md-7">
            <!-- Daftar Kamar -->
            <div class="bule-card border-0 shadow-sm rounded-3 bg-white h-100 p-4">
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <h6 class="fw-bold text-dark mb-0"><i class="fas fa-door-open text-primary me-2"></i>2. Pilih Kamar Kosong (Tanpa Asrama)</h6>
                    <span class="badge bg-primary rounded-pill px-3 py-2" id="kamarCount">0 Kamar Terpilih</span>
                </div>
                
                <p class="text-muted small mb-3">Centang kamar yang ingin dimasukkan ke asrama baru ini.</p>
                
                <div class="border border-light-subtle rounded-2 p-3 bg-light overflow-auto" style="height: 250px;">
                    <!-- Kamar kosong yang bisa dipilih -->
                    <div class="fw-bold small text-muted mb-2 text-uppercase" style="letter-spacing: 0.05em;">Tersedia (Tanpa Asrama)</div>
                    
                    {% if kamar_kosong %}
                        {% for k in kamar_kosong %}
                        <div class="form-check mb-2 kamar-kosong-item" data-gender="{{ k.jenis_kelamin }}">
                            <input class="form-check-input shadow-sm kamar-checkbox" type="checkbox" name="kamar_ids[]" value="{{ k.id }}" id="kamar_{{ k.id }}">
                            <label class="form-check-label text-muted" for="kamar_{{ k.id }}" style="font-size: 0.875rem;">
                                {{ k.nama_kamar }}
                            </label>
                        </div>
                        {% endfor %}
                        
                        <div id="kamarKosongEmpty" class="text-center text-muted small d-none py-4">
                            <i class="fas fa-info-circle mb-2 d-block"></i>
                            Tidak ada kamar kosong untuk jenis kelamin ini.
                        </div>
                    {% else %}
                        <div class="text-muted small fst-italic text-center py-4">
                            <i class="fas fa-info-circle mb-2 d-block"></i>
                            Semua kamar sudah memiliki asrama. Silakan buat kamar baru terlebih dahulu.
                        </div>
                    {% endif %}
                </div>
            </div>
    </div>
</div>

<div class="d-flex justify-content-end gap-3 mb-5">
    <a href="/admin_database/kamar" class="btn btn-white border-light-subtle text-muted px-4 rounded-2 shadow-sm fw-medium">Batal</a>
    <button type="submit" form="formTambahAsrama" class="btn btn-primary px-4 rounded-2 shadow-sm fw-medium d-flex align-items-center gap-2">
        <i class="fas fa-save"></i> Simpan Asrama
    </button>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const checkboxes = document.querySelectorAll('.kamar-checkbox');
        const countBadge = document.getElementById('kamarCount');
        
        function updateCount() {
            const count = document.querySelectorAll('.kamar-checkbox:checked').length;
            countBadge.textContent = `${count} Kamar Terpilih`;
        }
        
        checkboxes.forEach(cb => {
            cb.addEventListener('change', updateCount);
        });
        
        updateCount();
        
        // 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');
                    }
                }
                
                // Update badge count
                updateCount();
            });
            
            // Trigger on load
            selectJk.dispatchEvent(new Event('change'));
        }
    });
</script>
{% endblock %}