{% 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 %}Edit Asrama - 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;">Edit Asrama: {{ asrama.nama_asrama }}</h5>
        <small class="text-muted" style="font-size: 0.85rem;">Edit nama, status, dan kelola kamar di dalam asrama ini.</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/edit/{{ asrama.id }}" method="POST" id="formEditAsrama">
            <!-- 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-info-circle 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" value="{{ asrama.nama_asrama }}" required>
                </div>
                
                <div class="mb-3">
                    <label class="form-label text-muted small fw-medium">Jenis Kelamin Asrama <span class="text-danger">*</span></label>
                    <!-- Read-only to prevent gender mismatch with already assigned rooms, can use readonly input and hidden field -->
                    <input type="text" class="form-control form-control-sm rounded-2 border-light-subtle shadow-none p-2 bg-light text-muted" value="{{ asrama.jenis_kelamin }}" disabled>
                    <input type="hidden" name="jenis_kelamin" value="{{ asrama.jenis_kelamin }}">
                    <small class="text-muted mt-1 d-block" style="font-size: 0.75rem;"><i class="fas fa-info-circle me-1"></i>Jenis kelamin asrama tidak dapat diubah setelah dibuat.</small>
                </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" {% if asrama.status == 'Aktif' %}selected{% endif %}>Aktif</option>
                        <option value="Nonaktif" {% if asrama.status == 'Nonaktif' %}selected{% endif %}>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. Kelola Kamar di Asrama Ini</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 ini. Hapus centang untuk mengeluarkan kamar dari asrama.</p>
                
                <div class="border border-light-subtle rounded-2 p-3 bg-light overflow-auto" style="height: 250px;">
                    <!-- Kamar yang sudah terpilih -->
                    {% if kamar_terpilih %}
                        <div class="fw-bold small text-muted mb-2 text-uppercase" style="letter-spacing: 0.05em;">Sedang di Asrama Ini</div>
                        {% for k in kamar_terpilih %}
                        <div class="form-check mb-2">
                            <input class="form-check-input shadow-sm kamar-checkbox" type="checkbox" name="kamar_ids[]" value="{{ k.id }}" id="kamar_{{ k.id }}" checked>
                            <label class="form-check-label fw-medium text-dark" for="kamar_{{ k.id }}" style="font-size: 0.875rem;">
                                {{ k.nama_kamar }}
                            </label>
                        </div>
                        {% endfor %}
                        <hr class="border-light-subtle my-3">
                    {% endif %}
                    
                    <!-- 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">
                            <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 %}
                    {% else %}
                        <div class="text-muted small fst-italic">
                            <i class="fas fa-info-circle me-1"></i> Tidak ada kamar kosong berjenis kelamin {{ asrama.jenis_kelamin }}.
                        </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="formEditAsrama" 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 Perubahan
    </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();
    });
</script>
{% endblock %}