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

{% block page_title %}{{ 'Edit Alumni' if data else 'Tambah Alumni' }} - Admin Database{% endblock %}

{% block page_header %}
<div class="d-flex align-items-center gap-3">
    <a href="/admin_database/alumni" class="btn btn-sm btn-white border border-light-subtle rounded-circle d-flex align-items-center justify-content-center text-muted" style="width: 32px; height: 32px; transition: all 0.2s;">
        <i class="fas fa-arrow-left"></i>
    </a>
    <div>
        <h5 class="mb-1 fw-bold" style="color: #1f2937; font-size: 1.25rem;">{{ 'Edit Data Alumni' if data else 'Tambah Data Alumni Manual' }}</h5>
        <small class="text-muted" style="font-size: 0.85rem;">Formulir untuk menambah atau mengedit arsip alumni pondok pesantren.</small>
    </div>
</div>
{% endblock %}

{% block content %}
<div class="bg-white p-4 p-md-5 rounded-3 shadow-sm border border-light-subtle">
    <form method="POST" action="" enctype="multipart/form-data">
        
        <!-- BAGIAN 1: IDENTITAS -->
        <div class="d-flex align-items-center mb-4">
            <div class="rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 40px; height: 40px; background-color: rgba(0, 104, 95, 0.1); color: #00685f;">
                <i class="fas fa-user-graduate"></i>
            </div>
            <h6 class="fw-bold mb-0" style="color: #1f2937; font-size: 1.1rem;">I. Identitas Alumni</h6>
        </div>
        
        <div class="row g-4 mb-5 ms-1 ms-md-4">
            <div class="col-md-3">
                <label class="form-label text-muted fw-medium" style="font-size: 0.85rem;">ID Alumni</label>
                <input type="text" class="form-control border-light-subtle rounded-3 bg-light px-3 py-2 custom-input" name="id_alumni" value="{{ data.id_alumni if data else '' }}" placeholder="(Otomatis)" readonly>
                <small class="text-muted" style="font-size: 0.7rem;">Kosongkan saat tambah baru</small>
            </div>
            <div class="col-md-3">
                <label class="form-label text-muted fw-medium" style="font-size: 0.85rem;">ID Santri Lama</label>
                <input type="text" class="form-control border-light-subtle rounded-3 bg-light px-3 py-2 custom-input" name="id_santri_lama" value="{{ data.id_santri_lama if data else '' }}" placeholder="ID saat aktif">
            </div>
            <div class="col-md-6">
                <label class="form-label text-muted fw-medium" style="font-size: 0.85rem;">Nama Lengkap <span class="text-danger">*</span></label>
                <input type="text" class="form-control border-light-subtle rounded-3 bg-light px-3 py-2 custom-input" name="nama_lengkap" value="{{ data.nama_lengkap if data else '' }}" required placeholder="Nama lengkap alumni">
            </div>
            
            <div class="col-md-3">
                <label class="form-label text-muted fw-medium" style="font-size: 0.85rem;">Jenis Kelamin <span class="text-danger">*</span></label>
                <select class="form-select border-light-subtle rounded-3 bg-light px-3 py-2 custom-input" name="jenis_kelamin" required>
                    <option value="">Pilih Kelamin...</option>
                    <option value="Laki-laki" {% if data and data.jenis_kelamin in ['Laki-laki', 'L', 'Putra'] %}selected{% endif %}>Laki-laki</option>
                    <option value="Perempuan" {% if data and data.jenis_kelamin in ['Perempuan', 'P', 'Putri'] %}selected{% endif %}>Perempuan</option>
                </select>
            </div>
            <div class="col-md-3">
                <label class="form-label text-muted fw-medium" style="font-size: 0.85rem;">NIK</label>
                <input type="text" class="form-control border-light-subtle rounded-3 bg-light px-3 py-2 custom-input" name="nik" value="{{ data.nik if data else '' }}" placeholder="16 Digit NIK" maxlength="16" oninput="this.value = this.value.replace(/[^0-9]/g, '').slice(0, 16);">
            </div>
            <div class="col-md-3">
                <label class="form-label text-muted fw-medium" style="font-size: 0.85rem;">NISN</label>
                <input type="text" class="form-control border-light-subtle rounded-3 bg-light px-3 py-2 custom-input" name="nisn" value="{{ data.nisn if data else '' }}">
            </div>
            <div class="col-md-3">
                <label class="form-label text-muted fw-medium" style="font-size: 0.85rem;">NISM</label>
                <input type="text" class="form-control border-light-subtle rounded-3 bg-light px-3 py-2 custom-input" name="nism" value="{{ data.nism if data else '' }}">
            </div>
            
            <div class="col-md-6">
                <label class="form-label text-muted fw-medium" style="font-size: 0.85rem;">Tempat Lahir</label>
                <input type="text" class="form-control border-light-subtle rounded-3 bg-light px-3 py-2 custom-input" name="tempat_lahir" value="{{ data.tempat_lahir if data else '' }}">
            </div>
            <div class="col-md-6">
                <label class="form-label text-muted fw-medium" style="font-size: 0.85rem;">Tanggal Lahir</label>
                <input type="date" class="form-control border-light-subtle rounded-3 bg-light px-3 py-2 custom-input" name="tanggal_lahir" value="{{ data.tanggal_lahir if data else '' }}">
            </div>
        </div>
        
        <hr class="border-light-subtle mb-5">

        <!-- BAGIAN 2: PENDIDIKAN & KELULUSAN -->
        <div class="d-flex align-items-center mb-4">
            <div class="rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 40px; height: 40px; background-color: rgba(20, 184, 166, 0.1); color: #0d9488;">
                <i class="fas fa-history"></i>
            </div>
            <h6 class="fw-bold mb-0" style="color: #1f2937; font-size: 1.1rem;">II. Pendidikan & Kelulusan</h6>
        </div>
        
        <div class="row g-4 mb-5 ms-1 ms-md-4">
            <div class="col-md-4">
                <label class="form-label text-muted fw-medium" style="font-size: 0.85rem;">Jenjang Terakhir</label>
                <select class="form-select border-light-subtle rounded-3 bg-light px-3 py-2 custom-input" name="jenjang_terakhir">
                    <option value="">-- Pilih Jenjang --</option>
                    <option value="SP" {% if data and data.jenjang_terakhir == 'SP' %}selected{% endif %}>SP</option>
                    <option value="MTs" {% if data and data.jenjang_terakhir == 'MTs' %}selected{% endif %}>MTs</option>
                    <option value="MA" {% if data and data.jenjang_terakhir == 'MA' %}selected{% endif %}>MA</option>
                </select>
            </div>
            <div class="col-md-4">
                <label class="form-label text-muted fw-medium" style="font-size: 0.85rem;">Kelas Terakhir</label>
                <input type="text" class="form-control border-light-subtle rounded-3 bg-light px-3 py-2 custom-input" name="kelas_terakhir" value="{{ data.kelas_terakhir if data else '' }}" placeholder="Misal: III MA Putra">
            </div>
            <div class="col-md-4">
                <label class="form-label text-muted fw-medium" style="font-size: 0.85rem;">Tahun Masuk</label>
                <input type="number" class="form-control border-light-subtle rounded-3 bg-light px-3 py-2 custom-input" name="tahun_masuk" value="{{ data.tahun_masuk if data else '' }}" placeholder="Misal: 2021">
            </div>
            
            <div class="col-md-4">
                <label class="form-label text-muted fw-medium" style="font-size: 0.85rem;">Tahun Keluar <span class="text-danger">*</span></label>
                <input type="number" class="form-control border-light-subtle rounded-3 bg-light px-3 py-2 custom-input" name="tahun_keluar" value="{{ data.tahun_keluar if data else '' }}" required placeholder="Misal: 2024">
            </div>
            <div class="col-md-4">
                <label class="form-label text-muted fw-medium" style="font-size: 0.85rem;">Alasan Keluar <span class="text-danger">*</span></label>
                <select class="form-select border-light-subtle rounded-3 bg-light px-3 py-2 custom-input" name="alasan_keluar" required>
                    <option value="">Pilih Alasan...</option>
                    <option value="Lulus" {% if data and data.alasan_keluar == 'Lulus' %}selected{% endif %}>Lulus / Tamat</option>
                    <option value="Boyong / Pindah" {% if data and data.alasan_keluar == 'Boyong / Pindah' %}selected{% endif %}>Boyong / Pindah</option>
                    <option value="Berhenti" {% if data and data.alasan_keluar == 'Berhenti' %}selected{% endif %}>Berhenti / DO</option>
                    <option value="Lainnya" {% if data and data.alasan_keluar == 'Lainnya' %}selected{% endif %}>Lainnya</option>
                </select>
            </div>
            <div class="col-md-4 d-flex align-items-end">
                <div class="form-check form-switch p-0 m-0 w-100 bg-light border border-light-subtle rounded-3 d-flex justify-content-between align-items-center custom-input" style="padding: 0.45rem 1rem !important;">
                    <label class="form-check-label text-muted fw-medium" for="is_mutakhoorijin" style="font-size: 0.85rem;">Termasuk Mutakhoorijin?</label>
                    <input class="form-check-input m-0" type="checkbox" role="switch" id="is_mutakhoorijin" name="is_mutakhoorijin" value="1" {% if data and data.is_mutakhoorijin %}checked{% endif %}>
                </div>
            </div>
        </div>

        <hr class="border-light-subtle mb-5">

        <!-- BAGIAN 3: KONTAK & ALAMAT -->
        <div class="d-flex align-items-center mb-4">
            <div class="rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 40px; height: 40px; background-color: rgba(59, 130, 246, 0.1); color: #3b82f6;">
                <i class="fas fa-home"></i>
            </div>
            <h6 class="fw-bold mb-0" style="color: #1f2937; font-size: 1.1rem;">III. Alamat & Kontak (Orang Tua / Wali)</h6>
        </div>
        
        <div class="row g-4 mb-5 ms-1 ms-md-4">
            <div class="col-md-4">
                <label class="form-label text-muted fw-medium" style="font-size: 0.85rem;">Nama Ayah</label>
                <input type="text" class="form-control border-light-subtle rounded-3 bg-light px-3 py-2 custom-input" name="nama_ayah" value="{{ data.nama_ayah if data else '' }}">
            </div>
            <div class="col-md-4">
                <label class="form-label text-muted fw-medium" style="font-size: 0.85rem;">Nama Ibu</label>
                <input type="text" class="form-control border-light-subtle rounded-3 bg-light px-3 py-2 custom-input" name="nama_ibu" value="{{ data.nama_ibu if data else '' }}">
            </div>
            <div class="col-md-4">
                <label class="form-label text-muted fw-medium" style="font-size: 0.85rem;">Nama Wali</label>
                <input type="text" class="form-control border-light-subtle rounded-3 bg-light px-3 py-2 custom-input" name="nama_wali" value="{{ data.nama_wali if data else '' }}">
            </div>
            
            <div class="col-md-4">
                <label class="form-label text-muted fw-medium" style="font-size: 0.85rem;">Nomor WA (Orang Tua / Alumni)</label>
                <div class="input-group">
                    <span class="input-group-text border-light-subtle bg-light text-muted">+62</span>
                    <input type="text" class="form-control border-light-subtle rounded-end-3 bg-light px-3 py-2 custom-input" name="nomor_wa" value="{{ data.nomor_wa if data else '' }}" oninput="this.value = this.value.replace(/[^0-9]/g, '');">
                </div>
            </div>
            <div class="col-md-4">
                <label class="form-label text-muted fw-medium" style="font-size: 0.85rem;">Nomor KK</label>
                <input type="text" class="form-control border-light-subtle rounded-3 bg-light px-3 py-2 custom-input" name="no_kk" value="{{ data.no_kk if data else '' }}">
            </div>
            <div class="col-12">
                <label class="form-label text-muted fw-medium" style="font-size: 0.85rem;">Alamat Lengkap</label>
                <textarea class="form-control border-light-subtle rounded-3 bg-light px-3 py-2 custom-input" name="alamat" rows="2" placeholder="Dusun, RT/RW, Desa, Kec, Kab/Kota, Provinsi">{{ data.alamat if data else '' }}</textarea>
            </div>
        </div>

        <hr class="border-light-subtle mb-5">
        
        <!-- BAGIAN 4: LAIN-LAIN -->
        <div class="d-flex align-items-center mb-4">
            <div class="rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 40px; height: 40px; background-color: rgba(245, 158, 11, 0.1); color: #f59e0b;">
                <i class="fas fa-file-alt"></i>
            </div>
            <h6 class="fw-bold mb-0" style="color: #1f2937; font-size: 1.1rem;">IV. Informasi Lainnya</h6>
        </div>
        
        <div class="row g-4 mb-4 ms-1 ms-md-4">
            <div class="col-md-6">
                <label class="form-label text-muted fw-medium" style="font-size: 0.85rem;">Keterangan Tambahan</label>
                <textarea class="form-control border-light-subtle rounded-3 bg-light px-3 py-2 custom-input" name="keterangan" rows="3" placeholder="Catatan tambahan bila ada">{{ data.keterangan if data else '' }}</textarea>
            </div>
            <div class="col-md-6">
                <label class="form-label text-muted fw-medium" style="font-size: 0.85rem;">Foto Alumni</label>
                <div class="d-flex gap-3 align-items-start">
                    {% if data and data.foto_url %}
                    <img src="{{ url_for('static', filename='uploads/santri/' ~ data.foto_url.split('/')[-1]) }}" alt="Foto" class="rounded-3 border border-light-subtle object-fit-cover shadow-sm" style="width: 80px; height: 90px; background-color: #f8fafc;">
                    {% else %}
                    <div class="rounded-3 border border-light-subtle d-flex justify-content-center align-items-center text-muted shadow-sm" style="width: 80px; height: 90px; background-color: #f8fafc;">
                        <i class="fas fa-camera" style="font-size: 1.5rem;"></i>
                    </div>
                    {% endif %}
                    <div class="w-100">
                        <input class="form-control border-light-subtle rounded-3 bg-light custom-input mb-1" type="file" name="foto_url" accept="image/*">
                        <small class="text-muted d-block" style="font-size: 0.75rem;">Maksimal ukuran file 2MB (JPG/PNG). {% if data and data.foto_url %}Biarkan kosong jika tidak ingin mengubah foto.{% endif %}</small>
                    </div>
                </div>
            </div>
        </div>
        
        <hr class="border-light-subtle mb-4">
        
        <div class="d-flex justify-content-between align-items-center bg-light p-4 rounded-3 border border-light-subtle">
            <div>
                <p class="text-muted mb-0" style="font-size: 0.85rem;"><i class="fas fa-info-circle me-1"></i> Pastikan data wajib (<span class="text-danger">*</span>) telah terisi.</p>
            </div>
            <div class="d-flex gap-2">
                <a href="/admin_database/alumni" class="btn btn-white border-light-subtle text-muted px-4 btn-hover-border" style="border-radius: 0.5rem;">Batal</a>
                <button type="submit" class="btn btn-primary px-4 d-flex align-items-center gap-2 btn-hover-zoom" style="background-color: #00685f; border-color: #00685f; border-radius: 0.5rem;">
                    <i class="fas fa-save"></i> 
                    <span>{{ 'Simpan Perubahan' if data else 'Simpan Data Alumni' }}</span>
                </button>
            </div>
        </div>
    </form>
</div>

<style>
    .custom-input { transition: all 0.2s ease-in-out; font-size: 0.9rem; }
    .custom-input:focus {
        background-color: #ffffff !important; border-color: #0d9488 !important;
        box-shadow: 0 0 0 0.25rem rgba(13, 148, 136, 0.15) !important;
    }
    .btn-hover-border:hover { background-color: #f8fafc; border-color: #cbd5e1 !important; color: #475569 !important; }
    .btn-hover-zoom:hover {
        transform: translateY(-1px); box-shadow: 0 4px 6px -1px rgba(0, 104, 95, 0.2) !important;
        background-color: #004d46 !important; border-color: #004d46 !important;
    }
</style>


{% endblock %}