<div class="container-fluid">
    <div class="row justify-content-center">
        <div class="col-md-11">
            <div class="card border-0 shadow-sm" style="border-radius: 15px;">
                <div class="card-header bg-white border-0 pt-4 px-4 d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">Tambah Data Warga</h5>
                    <a href="<?php echo base_url('kartu-keluarga/tambah'); ?>" class="btn btn-sm btn-outline-primary">
                        <i class="bi bi-plus-circle"></i> Buat KK Baru
                    </a>
                </div>
                <div class="card-body px-4 pb-4">
                    <?php echo validation_errors('<div class="alert alert-danger">', '</div>'); ?>
                    
                    <form action="<?php echo base_url('warga/tambah'); ?>" method="post" id="formWarga">
                        
                        <!-- Section: Data KK -->
                        <div class="bg-light p-3 rounded mb-4">
                            <h6 class="text-primary mb-3"><i class="bi bi-house-door"></i> Data Kartu Keluarga</h6>
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label class="form-label">Nomor KK <span class="text-danger">*</span></label>
                                    <div class="input-group">
                                        <input type="text" name="no_kk" id="no_kk" class="form-control" maxlength="16" required placeholder="Cari nomor KK...">
                                        <button class="btn btn-outline-secondary" type="button" onclick="cariKK()">
                                            <i class="bi bi-search"></i> Cari
                                        </button>
                                    </div>
                                    <small class="text-muted">Ketik nomor KK dan klik cari, atau <a href="#" onclick="buatKKBaru()">buat KK baru</a></small>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label class="form-label">Status Hubungan dalam KK <span class="text-danger">*</span></label>
                                    <select name="status_hubungan" class="form-select" required>
                                        <option value="">-- Pilih Status --</option>
                                        <?php foreach($status_hubungan as $key => $value): ?>
                                        <option value="<?php echo $key; ?>"><?php echo $value; ?></option>
                                        <?php endforeach; ?>
                                    </select>
                                </div>
                            </div>
                            
                            <!-- Info KK (muncul setelah dicari) -->
                            <div id="infoKK" class="d-none">
                                <div class="alert alert-info">
                                    <strong>Alamat KK:</strong> <span id="alamatKK">-</span><br>
                                    <strong>Kepala Keluarga:</strong> <span id="kepalaKK">-</span>
                                </div>
                            </div>
                        </div>

                        <!-- Section: Data Pribadi -->
                        <div class="bg-light p-3 rounded mb-4">
                            <h6 class="text-primary mb-3"><i class="bi bi-person"></i> Data Pribadi</h6>
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label class="form-label">NIK <span class="text-danger">*</span></label>
                                    <input type="text" name="nik" class="form-control" maxlength="16" required>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label class="form-label">Nama Lengkap <span class="text-danger">*</span></label>
                                    <input type="text" name="nama_lengkap" class="form-control" required>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label class="form-label">Jenis Kelamin <span class="text-danger">*</span></label>
                                    <select name="jenis_kelamin" class="form-select" required>
                                        <option value="">-- Pilih --</option>
                                        <option value="L">Laki-laki</option>
                                        <option value="P">Perempuan</option>
                                    </select>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label class="form-label">Agama</label>
                                    <select name="agama" class="form-select">
                                        <option value="">-- Pilih --</option>
                                        <option value="Islam">Islam</option>
                                        <option value="Kristen">Kristen</option>
                                        <option value="Katolik">Katolik</option>
                                        <option value="Hindu">Hindu</option>
                                        <option value="Buddha">Buddha</option>
                                        <option value="Konghucu">Konghucu</option>
                                    </select>
                                </div>
                            </div>

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

                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label class="form-label">Status Perkawinan</label>
                                    <select name="status_perkawinan" class="form-select">
                                        <option value="">-- Pilih --</option>
                                        <option value="belum_kawin">Belum Kawin</option>
                                        <option value="kawin">Kawin</option>
                                        <option value="cerai_hidup">Cerai Hidup</option>
                                        <option value="cerai_mati">Cerai Mati</option>
                                    </select>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label class="form-label">Pekerjaan</label>
                                    <input type="text" name="pekerjaan" class="form-control">
                                </div>
                            </div>
                        </div>

                        <!-- Section: Domisili -->
                        <div class="bg-light p-3 rounded mb-4">
                            <h6 class="text-primary mb-3"><i class="bi bi-geo-alt"></i> Status Domisili</h6>
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label class="form-label">Status Domisili <span class="text-danger">*</span></label>
                                    <select name="status_domisili" class="form-select" required id="statusDomisili">
                                        <option value="">-- Pilih Status --</option>
                                        <?php foreach($status_domisili as $key => $value): ?>
                                        <option value="<?php echo $key; ?>"><?php echo $value; ?></option>
                                        <?php endforeach; ?>
                                    </select>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label class="form-label">Keterangan Domisili</label>
                                    <input type="text" name="keterangan_domisili" class="form-control" placeholder="Contoh: Kost di Jl. Mawar No. 5">
                                    <small class="text-muted">Wajib diisi jika status bukan Tetap</small>
                                </div>
                            </div>
                            
                            <div class="mb-3">
                                <label class="form-label">Alamat Lengkap (jika berbeda dengan KK)</label>
                                <textarea name="alamat" class="form-control" rows="2" placeholder="Kosongkan jika sama dengan alamat KK"></textarea>
                            </div>
                        </div>

                        <div class="d-flex justify-content-between">
                            <a href="<?php echo base_url('warga'); ?>" class="btn btn-secondary">
                                <i class="bi bi-arrow-left"></i> Kembali
                            </a>
                            <button type="submit" class="btn btn-primary">
                                <i class="bi bi-save"></i> Simpan Data
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
function cariKK() {
    const noKK = document.getElementById('no_kk').value;
    if(!noKK) {
        alert('Masukkan nomor KK terlebih dahulu');
        return;
    }
    
    // AJAX call untuk mencari KK
    fetch('<?php echo base_url('kartu-keluarga/ajax_cari_kk?q='); ?>' + noKK)
        .then(response => response.json())
        .then(data => {
            if(data && data.length > 0) {
                const kk = data[0];
                document.getElementById('infoKK').classList.remove('d-none');
                document.getElementById('alamatKK').textContent = kk.alamat || '-';
                document.getElementById('kepalaKK').textContent = kk.label.split(' - ')[1] || '-';
            } else {
                alert('KK tidak ditemukan. Silakan buat KK baru terlebih dahulu.');
            }
        });
}

function buatKKBaru() {
    window.location.href = '<?php echo base_url('kartu-keluarga/tambah'); ?>';
}

// Auto search saat ketik (optional)
$(document).ready(function() {
    $('#no_kk').autocomplete({
        source: '<?php echo base_url('kartu-keluarga/ajax_cari_kk'); ?>',
        minLength: 3,
        select: function(event, ui) {
            $('#no_kk').val(ui.item.value);
            $('#infoKK').removeClass('d-none');
            $('#alamatKK').text(ui.item.alamat);
            $('#kepalaKK').text(ui.item.label.split(' - ')[1]);
            return false;
        }
    });
});
</script>