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

{% block page_header %}
<div class="d-flex justify-content-between align-items-center">
    <h5 class="mb-1 fw-bold" style="color: #1f2937; font-size: 1.25rem;">
        <a href="/admin_database/santri" class="text-decoration-none text-muted me-2"><i class="fas fa-arrow-left"></i></a> Detail Santri
    </h5>
</div>
<small class="text-muted" style="font-size: 0.85rem;">Informasi lengkap biodata dan cetak ID Card (KTS & KTSM).</small>
{% endblock %}

{% block content %}
<div class="container-fluid py-4">
    
    <!-- Bagian Atas: Data Profil Lengkap -->
    <div class="row mb-4">
        <div class="col-md-6 mb-3 mb-md-0">
            <div class="card border-0 shadow-sm rounded-2 overflow-hidden h-100">
                <div class="card-header bg-white border-bottom border-light-subtle py-3">
                    <h6 class="mb-0 fw-semibold text-dark"><i class="fas fa-user-circle me-2 text-primary"></i>Biodata Pribadi</h6>
                </div>
                <div class="card-body p-4">
                    <div class="row">
                        <div class="col-sm-6 mb-3">
                            <p class="text-muted small mb-1">Nama Lengkap</p>
                            <h6 class="text-dark">{{ data.nama_lengkap or '-' }}</h6>
                        </div>
                        <div class="col-sm-6 mb-3">
                            <p class="text-muted small mb-1">ID Santri (NISM)</p>
                            <h6 class="text-dark">{{ data.id_santri or '-' }} / {{ data.nism or '-' }}</h6>
                        </div>
                        <div class="col-sm-6 mb-3">
                            <p class="text-muted small mb-1">NIK / NISN</p>
                            <h6 class="text-dark">{{ data.nik or '-' }} / {{ data.nisn or '-' }}</h6>
                        </div>
                        <div class="col-sm-6 mb-3">
                            <p class="text-muted small mb-1">Jenis Kelamin</p>
                            <h6 class="text-dark">{{ data.jenis_kelamin or '-' }}</h6>
                        </div>
                        <div class="col-sm-12 mb-2">
                            <p class="text-muted small mb-1">Tempat, Tanggal Lahir</p>
                            <h6 class="text-dark">{{ data.tempat_lahir or '-' }}, {{ data.tanggal_lahir|format_tanggal }}</h6>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-md-6">
            <div class="card border-0 shadow-sm rounded-2 overflow-hidden h-100">
                <div class="card-header bg-white border-bottom border-light-subtle py-3">
                    <h6 class="mb-0 fw-semibold text-dark"><i class="fas fa-school me-2 text-primary"></i>Pendidikan & Penempatan</h6>
                </div>
                <div class="card-body p-4">
                    <div class="row">
                        <div class="col-sm-6 mb-3">
                            <p class="text-muted small mb-1">Tingkat Kelas (Madrasah)</p>
                            <h6 class="text-dark">{{ data.tingkat_kelas or '-' }}</h6>
                        </div>
                        <div class="col-sm-6 mb-3">
                            <p class="text-muted small mb-1">Kamar / Asrama</p>
                            <h6 class="text-dark">{{ data.kamar or '-' }}</h6>
                        </div>
                        <div class="col-sm-6 mb-3">
                            <p class="text-muted small mb-1">Status Keaktifan</p>
                            {% if data.status_keaktifan == 'Aktif' %}
                            <span class="badge bg-success bg-opacity-10 text-success border border-success rounded-1">Aktif</span>
                            {% else %}
                            <span class="badge bg-danger bg-opacity-10 text-danger border border-danger rounded-1">{{ data.status_keaktifan or '-' }}</span>
                            {% endif %}
                        </div>
                        <div class="col-sm-6 mb-3">
                            <p class="text-muted small mb-1">Status Mukim</p>
                            <h6 class="text-dark">{{ data.status_mukim or '-' }}</h6>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Bagian Bawah: Preview KTS & KTSM Landscape -->
    <h5 class="fw-bold text-dark mb-3 mt-2"><i class="fas fa-id-card me-2 text-success"></i>Preview ID Card</h5>
    
    <div class="row">
        <!-- Preview KTS (Kartu Tanda Santri) -->
        <div class="col-lg-6 mb-4">
            <div class="card border-0 shadow-sm rounded-2 bg-light p-4 h-100 d-flex flex-column align-items-center justify-content-center">
                <div class="d-flex w-100 justify-content-between align-items-center mb-3">
                    <h6 class="mb-0 fw-bold text-secondary">Kartu Tanda Santri (KTS)</h6>
                    <a href="/admin_database/santri/cetak_kartu_santri/{{ data.no_baris }}" target="_blank" class="btn btn-sm btn-outline-success rounded-1 py-1 px-3"><i class="fas fa-print me-1"></i> Cetak KTS</a>
                </div>
                
                <!-- Desain KTS (Iframe to Real Card) -->
                <div class="d-flex justify-content-center align-items-center bg-transparent border-0" style="width: 100%; height: 250px;">
                    <iframe src="/admin_database/santri/cetak_kartu_santri/{{ data.no_baris }}?embed=1" style="width: 350px; height: 230px; border: none; overflow: hidden; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.1);" scrolling="no"></iframe>
                </div>
            </div>
        </div>

        <!-- Preview KTSM (Kartu Tanda Siswa Madrasah) -->
        <div class="col-lg-6 mb-4">
            <div class="card border-0 shadow-sm rounded-2 bg-light p-4 h-100 d-flex flex-column align-items-center justify-content-center">
                <div class="d-flex w-100 justify-content-between align-items-center mb-3">
                    <h6 class="mb-0 fw-bold text-secondary">Kartu Tanda Siswa Madrasah (KTSM)</h6>
                    <a href="/admin_database/santri/cetak_kartu_madrasah/{{ data.no_baris }}" target="_blank" class="btn btn-sm btn-outline-primary rounded-1 py-1 px-3"><i class="fas fa-print me-1"></i> Cetak KTSM</a>
                </div>
                
                <!-- Desain KTSM (Iframe to Real Card) -->
                <div class="d-flex justify-content-center align-items-center bg-transparent border-0" style="width: 100%; height: 250px;">
                    <iframe src="/admin_database/santri/cetak_kartu_madrasah/{{ data.no_baris }}?embed=1" style="width: 350px; height: 230px; border: none; overflow: hidden; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.1);" scrolling="no"></iframe>
                </div>
            </div>
        </div>
    </div>

</div>

<script>
function bukaModalMutakhoorijin(noBaris, namaLengkap) {
    document.getElementById('namaSantriMutakhoorijin').textContent = namaLengkap;
    document.getElementById('formMutakhoorijin').action = '/admin_database/santri/tandai_mutakhoorijin/' + noBaris;
    new bootstrap.Modal(document.getElementById('modalMutakhoorijin')).show();
}
</script>

<!-- Modal Tandai Mutakhoorijin -->
<div class="modal fade" id="modalMutakhoorijin" tabindex="-1" aria-labelledby="modalMutakhoorijinLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-0 shadow" style="border-radius: 1rem;">
            <div class="modal-header border-bottom-0 pb-0">
                <h5 class="modal-title fw-bold" id="modalMutakhoorijinLabel"><i class="fas fa-award text-info me-2"></i>Tandai Mutakhoorijin</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="formMutakhoorijin" method="POST" action="">
                <div class="modal-body">
                    <p class="text-muted mb-4" style="font-size: 0.9rem;">
                        Anda akan menandai santri <strong id="namaSantriMutakhoorijin" class="text-dark"></strong> sebagai <strong>Mutakhoorijin</strong> (Lulus Aliyah). Data biodata santri ini tidak akan dihapus.
                    </p>
                    
                    <div class="mb-3">
                        <label class="form-label text-muted fw-medium" style="font-size: 0.85rem;">Tahun Lulus <span class="text-danger">*</span></label>
                        <input type="text" class="form-control border-light-subtle rounded-3 bg-light" name="tahun_lulus" required placeholder="Contoh: 1448/1449 H">
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label text-muted fw-medium" style="font-size: 0.85rem;">Tanggal Lulus</label>
                        <input type="date" class="form-control border-light-subtle rounded-3 bg-light" name="tanggal_lulus">
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label text-muted fw-medium" style="font-size: 0.85rem;">Keterangan / Catatan</label>
                        <textarea class="form-control border-light-subtle rounded-3 bg-light" name="keterangan" rows="2" placeholder="Opsional..."></textarea>
                    </div>
                </div>
                <div class="modal-footer border-top-0 pt-0">
                    <button type="button" class="btn btn-light px-4 border-light-subtle" data-bs-dismiss="modal" style="border-radius: 0.5rem;">Batal</button>
                    <button type="submit" class="btn btn-info text-white px-4 shadow-sm" style="border-radius: 0.5rem;">Simpan Mutakhoorijin</button>
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock %}