<?= $this->extend('layout/admin') ?>
<?= $this->section('content') ?>

<style>
    /* ================== GLOBAL FORM STYLE ================== */
    .form-label,
    label {
        font-weight: 600;
        font-size: 0.85rem;
        color: #495057;
    }

    .form-control,
    .form-select {
        border-radius: 10px;
        padding: 10px 12px;
    }

    .form-control:focus,
    .form-select:focus {
        box-shadow: 0 0 0 0.15rem rgba(13, 110, 253, .15);
        border-color: #0d6efd;
    }

    /* ================== SECTION BOX ================== */
    .tab-pane>.row {
        background: #f9fafb;
        padding: 20px;
        border-radius: 14px;
        margin-bottom: 20px;
    }

    /* ================== CARD ================== */
    .card {
        border-radius: 18px;
    }

    .card-header {
        padding-bottom: 0;
    }

    /* ================== PROGRESS ================== */
    .progress {
        background: #e9ecef;
        border-radius: 10px;
    }

    .progress-bar {
        border-radius: 10px;
        transition: width .4s ease;
    }

    /* ================== NAV TABS ================== */
    .nav-tabs {
        padding-left: 8px;
    }

    .nav-tabs .nav-link {
        font-weight: 600;
        font-size: 0.9rem;
    }

    .nav-tabs .nav-link.completed {
        background: #e8f5e9 !important;
        color: #2e7d32 !important;
    }

    /* ================== FOOTER ================== */
    .card-footer {
        padding: 16px 20px;
        background: #fff;
        border-top: 1px solid #f0f0f0;
    }

    .nav-tabs {
        border-bottom: 2px solid #e9ecef;
    }

    .nav-tabs .nav-link {
        color: #495057;
        background: #f1f3f5;
        border: none;
        margin-right: 6px;
        padding: 10px 18px;
        border-radius: 10px 10px 0 0;
        transition: all .2s ease;
        pointer-events: none;
        opacity: .6;
    }

    .nav-tabs .nav-link:hover {
        background: #e7f1ff;
        color: #0d6efd;
    }

    .nav-tabs .nav-link.active {
        background: #0d6efd;
        color: #fff;
        pointer-events: auto;
        opacity: 1;
        box-shadow: 0 -3px 10px rgba(13, 110, 253, .25);
    }

    .nav-tabs .nav-link.completed {
        pointer-events: auto;
        opacity: 1;
        background: #e9f7ef;
        color: #198754;
    }

    .nav-tabs .nav-link.completed i::after {
        content: " ✔";
        font-weight: bold;
    }

    /* ================== SECTION HEADER ================== */
    .section-title {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 18px;
        padding-bottom: 10px;
        border-bottom: 1px solid #e9ecef;
    }

    .section-title i {
        font-size: 1.2rem;
        color: #0d6efd;
    }

    .section-title h6 {
        margin: 0;
        font-weight: 700;
        font-size: 0.95rem;
        color: #212529;
        text-transform: uppercase;
        letter-spacing: .5px;
    }
</style>

<!-- HEADER -->
<div class="mb-4">
    <h4 class="text-primary fw-bold mb-1">
        <i class="fas fa-users me-2"></i> Data Jamaah Masjid
    </h4>
    <small class="text-muted">
        Sistem Pendataan Jamaah Masjid Al Aqso
    </small>
</div>

<!-- PROGRESS -->
<div class="mb-4">
    <div class="d-flex justify-content-between mb-1">
        <small id="stepText" class="fw-semibold text-primary"></small>
        <small id="stepPercent" class="text-muted"></small>
    </div>
    <div class="progress" style="height:8px">
        <div id="stepProgress" class="progress-bar bg-primary"></div>
    </div>
</div>

<div class="card shadow-sm border-0">
    <div class="card-header bg-white border-0">

        <!-- TAB HEADER -->
        <ul class="nav nav-tabs">
            <li class="nav-item">
                <a class="nav-link active" data-bs-toggle="tab" href="#identitas">
                    <i class="fas fa-id-card me-1"></i> Identitas
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-bs-toggle="tab" href="#alamat">
                    <i class="fas fa-map-marker-alt me-1"></i> Kontak & Alamat
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-bs-toggle="tab" href="#keanggotaan">
                    <i class="fas fa-mosque me-1"></i> Keanggotaan
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-bs-toggle="tab" href="#sosial">
                    <i class="fas fa-briefcase me-1"></i> Sosial & Ekonomi
                </a>
            </li>
        </ul>
    </div>

    <form method="post" action="<?= site_url('jamaah/store') ?>" enctype="multipart/form-data">
        <div class="card-body">
            <div class="tab-content">

                <!-- IDENTITAS -->                 
                <div class="tab-pane fade show active" id="identitas">
                    <div class="row">
                        <div class="col-md-3 mb-3">
                            <label>No Jamaah</label>
                            <input name="no_jamaah" class="form-control">
                        </div>

                        <div class="col-md-3 mb-3">
                            <label>NIK</label>
                            <input name="nik" class="form-control">
                        </div>

                        <div class="col-md-6 mb-3">
                            <label>Nama Lengkap *</label>
                            <input name="nama_lengkap" class="form-control" required>
                        </div>

                        <div class="col-md-3 mb-3">
                            <label>Jenis Kelamin</label>
                            <select name="jenis_kelamin" class="form-select">
                                <option value="">- Pilih -</option>
                                <option>Laki-laki</option>
                                <option>Perempuan</option>
                            </select>
                        </div>

                        <div class="col-md-3 mb-3">
                            <label>Tempat Lahir</label>
                            <input name="tempat_lahir" class="form-control">
                        </div>

                        <div class="col-md-3 mb-3">
                            <label>Tanggal Lahir</label>
                            <input type="date" name="tanggal_lahir" class="form-control">
                        </div>

                        <div class="col-md-3 mb-3">
                            <label>Status Pernikahan</label>
                            <select name="status_pernikahan" class="form-select">
                                <option>Belum Kawin</option>
                                <option>Kawin</option>
                                <option>Duda</option>
                                <option>Janda</option>
                            </select>
                        </div>
                    </div>

                    <div class="text-end">
                        <button type="button" class="btn btn-primary btn-next">
                            Selanjutnya <i class="fas fa-arrow-right ms-1"></i>
                        </button>
                    </div>
                </div>

                <!-- ALAMAT -->
                <div class="tab-pane fade" id="alamat">
                    <div class="row">
                        <div class="col-md-4 mb-3">
                            <label>No HP / WhatsApp</label>
                            <input name="no_hp" class="form-control">
                        </div>

                        <div class="col-md-4 mb-3">
                            <label>Email</label>
                            <input name="email" type="email" class="form-control">
                        </div>

                        <div class="col-md-12 mb-3">
                            <label>Alamat Lengkap</label>
                            <textarea name="alamat" class="form-control" rows="3"></textarea>
                        </div>

                        <div class="col-md-2 mb-3">
                            <label>RT</label>
                            <input name="rt" class="form-control">
                        </div>

                        <div class="col-md-2 mb-3">
                            <label>RW</label>
                            <input name="rw" class="form-control">
                        </div>

                        <div class="col-md-4 mb-3">
                            <label>Kelurahan</label>
                            <input name="kelurahan" class="form-control">
                        </div>

                        <div class="col-md-4 mb-3">
                            <label>Kecamatan</label>
                            <input name="kecamatan" class="form-control">
                        </div>

                        <div class="col-md-4 mb-3">
                            <label>Kota / Kabupaten</label>
                            <input name="kota" class="form-control">
                        </div>

                        <div class="col-md-4 mb-3">
                            <label>Provinsi</label>
                            <input name="provinsi" class="form-control">
                        </div>
                    </div>

                    <div class="d-flex justify-content-between mt-4">
                        <button type="button" class="btn btn-light btn-prev px-4">
                            <i class="fas fa-arrow-left me-1"></i> Kembali
                        </button>

                        <button type="button" class="btn btn-primary px-4 btn-next">
                            Selanjutnya <i class="fas fa-arrow-right ms-1"></i>
                        </button>
                    </div>
                </div>

                <!-- KEANGGOTAAN -->
                <div class="tab-pane fade" id="keanggotaan">
                    <div class="row">
                        <div class="col-md-4 mb-3">
                            <label>Status Jamaah</label>
                            <select name="status_jamaah" class="form-select">
                                <option>Aktif</option>
                                <option>Non Aktif</option>
                            </select>
                        </div>

                        <div class="col-md-4 mb-3">
                            <label>Kategori Jamaah</label>
                            <select name="kategori_jamaah" class="form-select">
                                <option>Warga Sekitar</option>
                                <option>Donatur</option>
                                <option>Musafir</option>
                                <option>Pengurus</option>
                            </select>
                        </div>

                        <div class="col-md-4 mb-3">
                            <label>Kelompok / Majelis</label>
                            <input name="kelompok" class="form-control" placeholder="Majelis Taklim / Remaja / DKM">
                        </div>

                        <div class="col-md-4 mb-3">
                            <label>Keaktifan</label>
                            <select name="keaktifan" class="form-select">
                                <option>Aktif</option>
                                <option>Jarang</option>
                                <option>Tidak Aktif</option>
                            </select>
                        </div>

                        <div class="col-md-4 mb-3">
                            <label>Tanggal Bergabung</label>
                            <input type="date" name="tgl_bergabung" class="form-control">
                        </div>
                    </div>

                    <div class="d-flex justify-content-between">
                        <button type="button" class="btn btn-outline-secondary btn-prev">
                            <i class="fas fa-arrow-left me-1"></i> Kembali
                        </button>
                        <button type="button" class="btn btn-primary btn-next">
                            Selanjutnya <i class="fas fa-arrow-right ms-1"></i>
                        </button>
                    </div>
                </div>

                <!-- SOSIAL -->
                <div class="tab-pane fade" id="sosial">
                    <div class="row">
                        <div class="col-md-4 mb-3">
                            <label>Pekerjaan</label>
                            <input name="pekerjaan" class="form-control">
                        </div>

                        <div class="col-md-4 mb-3">
                            <label>Pendidikan</label>
                            <select name="pendidikan" class="form-select">
                                <option>SD</option>
                                <option>SMP</option>
                                <option>SMA</option>
                                <option>D3</option>
                                <option>S1</option>
                                <option>S2</option>
                            </select>
                        </div>

                        <div class="col-md-4 mb-3">
                            <label>Penghasilan / Bulan</label>
                            <select name="penghasilan" class="form-select">
                                <option>&lt; 1 Juta</option>
                                <option>1 - 3 Juta</option>
                                <option>3 - 5 Juta</option>
                                <option>&gt; 5 Juta</option>
                            </select>
                        </div>

                        <div class="col-md-6 mb-3">
                            <label>Foto Jamaah</label>
                            <input type="file" name="photo" class="form-control">
                        </div>

                        <div class="col-md-6 mb-3">
                            <label>Catatan</label>
                            <textarea name="catatan" class="form-control" rows="3"></textarea>
                        </div>
                    </div>
                </div>

                <div class="card-footer text-end bg-white border-0">
                    <button class="btn btn-success">
                        <i class="fas fa-save me-1"></i> Simpan Data
                    </button>
                </div>
    </form>
</div>

<script>
    document.addEventListener('DOMContentLoaded', () => {

        const tabs = document.querySelectorAll('.nav-tabs .nav-link');
        const stepText = document.getElementById('stepText');
        const stepPercent = document.getElementById('stepPercent');
        const stepProgress = document.getElementById('stepProgress');

        const labels = ['Identitas', 'Kontak & Alamat', 'Keanggotaan', 'Sosial'];

        function activeIndex() {
            return [...tabs].findIndex(t => t.classList.contains('active'));
        }

        function updateStep(i) {
            let pct = Math.round(((i + 1) / tabs.length) * 100);
            stepText.innerText = `Step ${i + 1} dari ${tabs.length} • ${labels[i]}`;
            stepPercent.innerText = pct + '%';
            stepProgress.style.width = pct + '%';

            tabs.forEach((t, idx) => {
                t.classList.toggle('completed', idx < i);
            });
        }

        function showTab(i) {
            if (!tabs[i]) return;
            new bootstrap.Tab(tabs[i]).show();
            updateStep(i);
            window.scrollTo({ top: 0, behavior: 'smooth' });
        }

        document.querySelectorAll('.btn-next').forEach(b => {
            b.onclick = () => showTab(activeIndex() + 1);
        });
        document.querySelectorAll('.btn-prev').forEach(b => {
            b.onclick = () => showTab(activeIndex() - 1);
        });

        updateStep(0);
    });
</script>

<?= $this->endSection() ?>