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

{% block page_title %}Informasi Biodata{% endblock %}

{% block extra_head %}
<style>
    .page-header {
        background-color: #ffffff;
        padding: 20px 30px;
        border-bottom: 1px solid #e9ecef;
        margin-bottom: 30px;
        margin-top: -20px;
        margin-left: -30px;
        margin-right: -30px;
    }
    .nav-pills .nav-link {
        color: #495057;
        font-weight: 500;
        border-radius: 5px;
        padding: 10px 20px;
        margin-right: 10px;
        background-color: #f8f9fa;
    }
    .nav-pills .nav-link.active {
        background-color: #198754; 
        color: white;
    }
    .info-box {
        background-color: #d1e7dd;
        color: #0f5132;
        padding: 12px 15px;
        border-radius: 5px;
        font-size: 0.9rem;
        margin-bottom: 20px;
    }
</style>
{% endblock %}

{% block content %}
    <!-- ================= HEADER ================= -->
    <div class="page-header">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb mb-1">
                <li class="breadcrumb-item"><a href="/admin_psb" class="text-decoration-none text-success">Dashboard Admin</a></li>
                <li class="breadcrumb-item active" aria-current="page">Detail Santri</li>
            </ol>
        </nav>
        <h2 class="mb-0 fw-bold">Detail Santri <span class="text-secondary fs-4 fw-normal"> | {{ santri['nama_lengkap'] }}</span></h2>
    </div>

    <!-- ================= AREA KONTEN UTAMA ================= -->
    <div class="mb-5">
        
        <form action="/admin_psb/update/{{ santri['id_pendaftaran'] }}" method="POST">
            
            <!-- MENU TAB -->
            <ul class="nav nav-pills mb-4 shadow-sm bg-white p-2 rounded" id="pills-tab" role="tablist">
                <li class="nav-item" role="presentation">
                    <button class="nav-link active" id="pills-biodata-tab" data-bs-toggle="pill" data-bs-target="#pills-biodata" type="button" role="tab">
                        <i class="fas fa-user me-2"></i>DATA SANTRI
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="pills-alamat-tab" data-bs-toggle="pill" data-bs-target="#pills-alamat" type="button" role="tab">
                        <i class="fas fa-map-marker-alt me-2"></i>DATA ALAMAT
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="pills-orangtua-tab" data-bs-toggle="pill" data-bs-target="#pills-orangtua" type="button" role="tab">
                        <i class="fas fa-users me-2"></i>DATA ORANG TUA
                    </button>
                </li>
            </ul>

            <!-- ISI DARI MASING-MASING TAB -->
            <div class="tab-content bg-white p-4 rounded shadow-sm border" id="pills-tabContent">
                
                <div class="info-box">
                    Kolom dengan tanda bintang (<span class="text-danger">*</span>) merupakan kolom yang <strong>wajib diisi</strong>.
                </div>

                <!-- ================= TAB 1: DATA SANTRI ================= -->
                <div class="tab-pane fade show active" id="pills-biodata" role="tabpanel">
                    
                    
                    <div class="row">
                        <!-- Kolom Kiri -->
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label text-muted small fw-bold">NAMA LENGKAP <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" name="nama_lengkap" value="{{ santri['nama_lengkap'] }}" required>
                            </div>
                            <div class="mb-3">
                                <label class="form-label text-muted small fw-bold">NIK <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" name="nik" value="{{ santri['nik'] }}" required 
                                        maxlength="16" 
                                        oninput="this.value = this.value.replace(/[^0-9]/g, '');" 
                                        placeholder="Masukkan 16 digit NIK">
                            </div>
                            <div class="mb-3">
                                <label class="form-label text-muted small fw-bold">NISN</label>
                               <input type="text" class="form-control" name="nisn" value="{{ santri['nisn'] }}" 
                                        maxlength="10" 
                                        oninput="this.value = this.value.replace(/[^0-9]/g, '');" 
                                        placeholder="Masukkan 10 digit NISN">
                            </div>
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label class="form-label text-muted small fw-bold">NIS</label>
                                    <input type="text" class="form-control" name="nis" value="{{ santri['nis'] }}">
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label class="form-label text-muted small fw-bold">NISM</label>
                                    <input type="text" class="form-control" name="nism" value="{{ santri['nism'] }}">
                                </div>
                            </div>
                        </div>

                        <!-- Kolom Kanan -->
                        <div class="col-md-6">
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label class="form-label text-muted small fw-bold">TEMPAT LAHIR</label>
                                    <input type="text" class="form-control" name="tempat_lahir" value="{{ santri['tempat_lahir'] }}">
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label class="form-label text-muted small fw-bold">TANGGAL LAHIR</label>
                                    <input type="date" class="form-control" name="tanggal_lahir" value="{{ santri['tanggal_lahir'] }}">
                                </div>
                            </div>
                            <div class="mb-3">
                                <label class="form-label text-muted small fw-bold">JENIS KELAMIN</label>
                                <select class="form-select" name="jenis_kelamin">
                                    <option value="">Pilih...</option>
                                    <option value="Laki-laki" {% if santri['jenis_kelamin'] == 'Laki-laki' %}selected{% endif %}>Laki-laki</option>
                                    <option value="Perempuan" {% if santri['jenis_kelamin'] == 'Perempuan' %}selected{% endif %}>Perempuan</option>
                                </select>
                            </div>
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label class="form-label text-muted small fw-bold">UNIT TUJUAN</label>
                                    <input type="text" class="form-control" name="unit" value="{{ santri['unit'] }}">
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label class="form-label text-muted small fw-bold">KELAS</label>
                                    <input type="text" class="form-control" name="kelas" value="{{ santri['kelas'] }}">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- ================= TAB 2: DATA ALAMAT ================= -->
                <div class="tab-pane fade" id="pills-alamat" role="tabpanel">
                    <h5 class="mb-4 border-bottom pb-2">Informasi Alamat Tempat Tinggal</h5>
                    
                    <div class="mb-3">
                        <label class="form-label text-muted small fw-bold">ALAMAT LENGKAP (Jalan/Dusun/RT/RW)</label>
                        <textarea class="form-control" name="alamat" rows="3">{{ santri['alamat'] }}</textarea>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label text-muted small fw-bold">STATUS MUKIM</label>
                        <select class="form-select w-25" name="status_mukim">
                            <option value="Mukim" {% if santri['status_mukim'] == 'Mukim' %}selected{% endif %}>Mukim (Berasrama)</option>
                            <option value="Non-Mukim" {% if santri['status_mukim'] == 'Non-Mukim' %}selected{% endif %}>Non-Mukim (Laju)</option>
                        </select>
                    </div>
                </div>

                <!-- ================= TAB 3: DATA ORANG TUA ================= -->
                <div class="tab-pane fade" id="pills-orangtua" role="tabpanel">
                    <h5 class="mb-4 border-bottom pb-2">Informasi Keluarga</h5>
                    
                    <div class="mb-3">
                        <label class="form-label text-muted small fw-bold">NOMOR KARTU KELUARGA (KK) <span class="text-danger">*</span></label>
                        <input type="text" class="form-control w-50" name="nomor_kk" value="{{ santri['nomor_kk'] }}" 
                                maxlength="16" 
                                oninput="this.value = this.value.replace(/[^0-9]/g, '');" 
                                placeholder="Masukkan 16 digit No. KK">
                    </div>

                    <div class="row mt-4">
                        <div class="col-md-6">
                            <div class="p-3 border rounded bg-light">
                                <h6 class="fw-bold mb-3"><i class="fas fa-male text-secondary me-2"></i>Data Ayah</h6>
                                <div class="mb-3">
                                    <label class="form-label text-muted small fw-bold">NAMA AYAH</label>
                                    <input type="text" class="form-control" name="nama_ayah" value="{{ santri['nama_ayah'] }}">
                                </div>
                                <div class="mb-3">
                                    <label class="form-label text-muted small fw-bold">STATUS AYAH</label>
                                    <select class="form-select" name="status_ayah">
                                        <option value="">Pilih...</option>
                                        <option value="Masih Hidup" {% if santri['status_ayah'] == 'Masih Hidup' %}selected{% endif %}>Masih Hidup</option>
                                        <option value="Meninggal" {% if santri['status_ayah'] == 'Meninggal' %}selected{% endif %}>Meninggal</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        
                        <!-- Area Data Ibu (Ditambahkan sebagai pelengkap form profesional) -->
                        <div class="col-md-6">
                            <div class="p-3 border rounded bg-light">
                                <h6 class="fw-bold mb-3"><i class="fas fa-female text-secondary me-2"></i>Data Ibu</h6>
                                <div class="mb-3">
                                    <label class="form-label text-muted small fw-bold">NAMA IBU</label>
                                    <!-- Anggap ada kolom nama_ibu di database -->
                                    <input type="text" class="form-control" name="nama_ibu" value="{{ santri['nama_ibu'] }}">
                                </div>
                                <div class="mb-3">
                                    <label class="form-label text-muted small fw-bold">STATUS IBU</label>
                                    <select class="form-select" name="status_ibu">
                                        <option value="">Pilih...</option>
                                        <option value="Masih Hidup" {% if santri['status_ibu'] == 'Masih Hidup' %}selected{% endif %}>Masih Hidup</option>
                                        <option value="Meninggal" {% if santri['status_ibu'] == 'Meninggal' %}selected{% endif %}>Meninggal</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div> <!-- End Tab Content -->

            <!-- TOMBOL SIMPAN -->
            <div class="d-flex justify-content-between mt-4">
                <a href="/admin_psb" class="btn btn-outline-secondary px-4"><i class="fas fa-arrow-left me-2"></i>Kembali ke Tabel</a>
                <button type="submit" class="btn btn-primary px-5 py-2 fw-bold shadow">
                    <i class="fas fa-save me-2"></i>SIMPAN PERUBAHAN
                </button>
            </div>

        </form>
    </div>
{% endblock %}