<style>
/* ===== DAFTAR KK — theme matching ===== */
.btn:focus, .form-control:focus, .form-select:focus { box-shadow: none; }
.form-control:focus, .form-select:focus { border-color: #20c997; box-shadow: 0 0 0 3px rgba(32,201,151,.12); }
.form-control, .form-select { border-radius: 8px; border: 1.5px solid #e5e7eb; font-size: .88rem; padding: 9px 12px; }
.form-label { font-size: .8rem; font-weight: 700; color: #374151; margin-bottom: 4px; }

/* ===== STAT CARD ===== */
.kk-stat-card {
    border-radius: 10px; border: none;
    box-shadow: 0 1px 4px rgba(0,0,0,.08);
    background: linear-gradient(135deg, #1abc9c 0%, #16a085 100%);
}
.kk-stat-card .card-body {
    padding: 14px 16px;
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.kk-stat-icon {
    width: 40px; height: 40px; border-radius: 8px;
    background: rgba(255,255,255,.22);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.kk-stat-icon i { font-size: 1.2rem; color: #fff; }

/* ===== HEADER BTNS ===== */
.kk-header-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.kk-header-btns .btn { font-size: .82rem; padding: 7px 14px; border-radius: 8px; font-weight: 600; white-space: nowrap; }

/* ===== SECTION CARD ===== */
.section-card {
    border-radius: 14px; border: 1.5px solid #e5e7eb;
    box-shadow: 0 1px 5px rgba(0,0,0,.06);
    overflow: hidden; background: #fff; margin-bottom: 16px;
}
.section-card-header {
    padding: 12px 20px; display: flex; align-items: center; justify-content: space-between;
    border-bottom: 1px solid #f1f3f5; background: #fff;
}
.section-card-header .title {
    font-size: .85rem; font-weight: 700; color: #374151;
    display: flex; align-items: center; gap: 6px;
}
.section-card-header .title i { color: #20c997; }

/* ===== TABLE ===== */
.kk-table th {
    font-size: .72rem; text-transform: uppercase; letter-spacing: .04em;
    color: #6b7280; font-weight: 700; padding: 10px 14px;
    background: #f8fffe; border-bottom: 1.5px solid #e5e7eb; white-space: nowrap;
}
.kk-table td { padding: 10px 14px; vertical-align: middle; font-size: .84rem; border-bottom: 1px solid #f3f4f6; }
.kk-table tbody tr:last-child td { border-bottom: none; }
.kk-table tbody tr:hover { background: #f8fffe; }

/* ===== AVATAR ===== */
.kk-avatar {
    width: 32px; height: 32px; border-radius: 8px;
    background: linear-gradient(135deg, #1abc9c, #16a085);
    color: #fff; font-size: .78rem; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}

/* ===== ACTION BUTTONS ===== */
.btn-act { font-size:.78rem; padding:5px 9px; border-radius:7px; font-weight:600; white-space:nowrap; display:inline-flex; align-items:center; gap:3px; }
.btn-act-view   { background:#dbeafe; border:1px solid #93c5fd; color:#1e40af; }
.btn-act-view:hover { background:#bfdbfe; color:#1e3a8a; }
.btn-act-add    { background:#dcfce7; border:1px solid #6ee7b7; color:#065f46; }
.btn-act-add:hover { background:#bbf7d0; color:#064e3b; }
.btn-act-edit   { background:#fef3c7; border:1px solid #fde68a; color:#92400e; }
.btn-act-edit:hover { background:#fde68a; color:#78350f; }
.btn-act-delete { background:#fee2e2; border:1px solid #fecaca; color:#991b1b; }
.btn-act-delete:hover { background:#fecaca; color:#7f1d1d; }

/* ===== ALERTS ===== */
.flash-success { border-radius:10px; font-size:.83rem; border:1.5px solid #6ee7b7; background:#f0fdf4; color:#065f46; padding:10px 14px; margin-bottom:12px; display:flex; align-items:center; gap:8px; }
.flash-error   { border-radius:10px; font-size:.83rem; border:1.5px solid #fecaca; background:#fee2e2; color:#991b1b; padding:10px 14px; margin-bottom:12px; display:flex; align-items:center; gap:8px; }

/* ===== IMPORT RESULT ===== */
.import-result {
    border-radius:10px; font-size:.83rem; padding:12px 16px; margin-bottom:12px;
    border-left: 4px solid #20c997; background:#f0fdf4; border:1.5px solid #6ee7b7;
}

/* ===== MODAL ===== */
.modal-content { border-radius:14px; border:none; box-shadow:0 8px 32px rgba(0,0,0,.12); }
.modal-header  { padding:15px 20px; border-bottom:1px solid #f1f3f5; }
.modal-body    { padding:20px; }
.modal-footer  { padding:13px 20px; border-top:1px solid #f1f3f5; }

/* ===== DESKTOP TABLE / MOBILE CARD ===== */
.desktop-table  { display: block; }
.mobile-kk-list { display: none; }

/* ===== MOBILE ===== */
@media (max-width: 767.98px) {
    .container-fluid { padding-left:12px !important; padding-right:12px !important; }
    .kk-page-header { flex-direction:column !important; align-items:flex-start !important; gap:10px; }
    .kk-header-btns { display:grid; grid-template-columns:1fr 1fr; width:100%; }
    .kk-header-btns .btn { justify-content:center; }

    .desktop-table  { display: none !important; }
    .mobile-kk-list { display: flex !important; flex-direction:column; gap:8px; padding:10px; }
}
</style>

<div class="container-fluid px-2 px-md-3 py-3">

    <!-- Header -->
    <div class="d-flex justify-content-between align-items-center mb-3 kk-page-header">
        <div>
            <h5 class="mb-0 fw-bold text-dark">
                <i class="bi bi-house-door me-2" style="color:#20c997;"></i>Data Kartu Keluarga
            </h5>
            <small class="text-muted">Daftar KK beserta kepala keluarga</small>
        </div>
        <?php if(in_array($this->session->userdata('role'), ['admin','rt','ketua_rt','sekretaris'])): ?>
        <div class="kk-header-btns">
            <button type="button" class="btn btn-outline-success d-flex align-items-center gap-1"
                data-bs-toggle="modal" data-bs-target="#modalUploadExcel">
                <i class="bi bi-file-earmark-excel"></i> Upload Excel
            </button>
            <a href="<?php echo base_url('kartu-keluarga/tambah'); ?>"
               class="btn d-flex align-items-center gap-1"
               style="background:#20c997; color:#fff; border-color:#20c997;">
                <i class="bi bi-plus-circle"></i> Tambah KK
            </a>
        </div>
        <?php endif; ?>
    </div>

    <!-- Stat Card -->
    <div class="row g-2 mb-3">
        <div class="col-6 col-md-3">
            <div class="card kk-stat-card">
                <div class="card-body">
                    <div>
                        <div style="font-size:.74rem; font-weight:600; opacity:.88; color:#fff; margin-bottom:2px;">Total KK</div>
                        <div style="font-size:1.35rem; font-weight:800; color:#fff; line-height:1.1;"><?php echo count($kk); ?></div>
                    </div>
                    <div class="kk-stat-icon"><i class="bi bi-house-door-fill"></i></div>
                </div>
            </div>
        </div>
    </div>

    <!-- Flash Messages -->
    <?php if($this->session->flashdata('success')): ?>
    <div class="flash-success alert-dismissible">
        <i class="bi bi-check-circle-fill" style="color:#1abc9c;"></i>
        <span><?php echo $this->session->flashdata('success'); ?></span>
        <button type="button" class="btn-close ms-auto" data-bs-dismiss="alert" style="font-size:.75rem;"></button>
    </div>
    <?php endif; ?>
    <?php if($this->session->flashdata('error')): ?>
    <div class="flash-error alert-dismissible">
        <i class="bi bi-exclamation-circle-fill"></i>
        <span><?php echo $this->session->flashdata('error'); ?></span>
        <button type="button" class="btn-close ms-auto" data-bs-dismiss="alert" style="font-size:.75rem;"></button>
    </div>
    <?php endif; ?>

    <!-- Import Result -->
    <?php if($this->session->flashdata('import_result')):
        $res = $this->session->flashdata('import_result'); ?>
    <div class="import-result alert-dismissible" style="border-left:4px solid <?php echo $res['berhasil']>0?'#1abc9c':'#f59e0b'; ?>; border:1.5px solid <?php echo $res['berhasil']>0?'#6ee7b7':'#fde68a'; ?>; background:<?php echo $res['berhasil']>0?'#f0fdf4':'#fffbeb'; ?>; margin-bottom:12px; border-radius:10px; padding:12px 16px;">
        <div class="fw-bold mb-1" style="font-size:.83rem; color:<?php echo $res['berhasil']>0?'#065f46':'#92400e'; ?>;">
            <i class="bi bi-file-earmark-excel me-1"></i>Hasil Import Excel
        </div>
        <div style="font-size:.82rem;">✅ Berhasil: <strong><?php echo $res['berhasil']; ?> data</strong></div>
        <?php if($res['dilewati']>0): ?>
        <div style="font-size:.82rem;">⚠️ Dilewati (duplikat): <strong><?php echo $res['dilewati']; ?> data</strong></div>
        <?php endif; ?>
        <?php if(!empty($res['errors'])): ?>
        <div style="font-size:.8rem;" class="mt-1">❌ Gagal (<?php echo count($res['errors']); ?> baris):
            <ul class="mb-0 mt-1 ps-3">
                <?php foreach(array_slice($res['errors'],0,5) as $err): ?>
                <li><?php echo htmlspecialchars($err); ?></li>
                <?php endforeach; ?>
                <?php if(count($res['errors'])>5): ?><li>...dan <?php echo count($res['errors'])-5; ?> error lainnya</li><?php endif; ?>
            </ul>
        </div>
        <?php endif; ?>
    </div>
    <?php endif; ?>

    <!-- DATA TABLE SECTION -->
    <div class="section-card">
        <div class="section-card-header">
            <div class="title"><i class="bi bi-list-ul"></i>Daftar Kartu Keluarga</div>
            <span style="font-size:.75rem; color:#9ca3af; font-weight:600;"><?php echo count($kk); ?> KK terdaftar</span>
        </div>

        <?php if(!empty($kk)): $no=1; ?>

        <!-- Desktop Table -->
        <div class="desktop-table table-responsive">
            <table class="table kk-table mb-0">
                <thead><tr>
                    <th style="width:44px;">No</th>
                    <th>No. KK</th>
                    <th>Kepala Keluarga</th>
                    <th>Alamat</th>
                    <th class="text-center">Anggota</th>
                    <th class="text-center">Aksi</th>
                </tr></thead>
                <tbody>
                <?php foreach($kk as $k): ?>
                <tr>
                    <td><?php echo $no++; ?></td>
                    <td>
                        <a href="<?php echo base_url('kartu-keluarga/detail/'.$k->id); ?>"
                           class="text-decoration-none fw-bold" style="color:#1abc9c; font-family:monospace; font-size:.83rem;">
                            <?php echo $k->no_kk; ?>
                        </a>
                    </td>
                    <td>
                        <?php if($k->nama_kepala_keluarga): ?>
                        <div class="d-flex align-items-center gap-2">
                            <div class="kk-avatar"><?php echo strtoupper(substr($k->nama_kepala_keluarga,0,1)); ?></div>
                            <div>
                                <div class="fw-semibold" style="font-size:.84rem;"><?php echo $k->nama_kepala_keluarga; ?></div>
                                <span style="font-size:.7rem; background:#dcfce7; color:#166534; border:1px solid #bbf7d0; border-radius:999px; padding:1px 7px; font-weight:600;">Kepala KK</span>
                            </div>
                        </div>
                        <?php else: ?>
                        <span class="text-muted fst-italic" style="font-size:.83rem;">Belum ditetapkan</span>
                        <?php endif; ?>
                    </td>
                    <td style="max-width:200px;">
                        <span style="font-size:.83rem;"><?php echo $k->alamat; ?></span>
                        <?php if($k->rt || $k->rw): ?>
                        <br><small class="text-muted">RT <?php echo $k->rt; ?>/RW <?php echo $k->rw; ?></small>
                        <?php endif; ?>
                    </td>
                    <td class="text-center">
                        <a href="<?php echo base_url('kartu-keluarga/detail/'.$k->id); ?>"
                           class="text-decoration-none" style="font-size:.78rem; color:#1abc9c; font-weight:600;">
                            <i class="bi bi-people me-1"></i>Lihat Anggota
                        </a>
                    </td>
                    <td class="text-center">
                        <div class="d-flex gap-1 justify-content-center">
                            <a href="<?php echo base_url('kartu-keluarga/detail/'.$k->id); ?>" class="btn-act btn-act-view btn" title="Detail">
                                <i class="bi bi-eye"></i>
                            </a>
                            <?php if(in_array($this->session->userdata('role'), ['admin','rt','ketua_rt','sekretaris'])): ?>
                            <button class="btn-act btn-act-add btn" title="Tambah Anggota"
                                onclick="bukaModalAnggota(<?php echo $k->id; ?>,'<?php echo $k->no_kk; ?>','<?php echo addslashes($k->alamat); ?>')">
                                <i class="bi bi-person-plus"></i>
                            </button>
                            <a href="<?php echo base_url('kartu-keluarga/edit/'.$k->id); ?>" class="btn-act btn-act-edit btn" title="Edit KK">
                                <i class="bi bi-pencil"></i>
                            </a>
                            <a href="<?php echo base_url('kartu-keluarga/hapus/'.$k->id); ?>"
                               class="btn-act btn-act-delete btn" title="Hapus KK"
                               onclick="return confirm('Yakin hapus KK <?php echo $k->no_kk; ?>? Semua anggota akan dilepas.')">
                                <i class="bi bi-trash"></i>
                            </a>
                            <?php endif; ?>
                        </div>
                    </td>
                </tr>
                <?php endforeach; ?>
                </tbody>
            </table>
        </div>

        <!-- Mobile Card List -->
        <div class="mobile-kk-list">
            <?php foreach($kk as $k): ?>
            <div style="border-radius:11px; border:1.5px solid #f1f3f5; border-left:4px solid #1abc9c; background:#fff; padding:12px 14px;">
                <div class="d-flex justify-content-between align-items-start mb-1">
                    <div class="d-flex align-items-center gap-2">
                        <div class="kk-avatar" style="border-radius:8px;">
                            <?php echo $k->nama_kepala_keluarga ? strtoupper(substr($k->nama_kepala_keluarga,0,1)) : '?'; ?>
                        </div>
                        <div>
                            <div class="fw-semibold" style="font-size:.88rem;">
                                <?php echo $k->nama_kepala_keluarga ?: '<span style="color:#9ca3af;font-style:italic;">Belum ditetapkan</span>'; ?>
                            </div>
                            <code style="font-size:.73rem; color:#9ca3af;"><?php echo $k->no_kk; ?></code>
                        </div>
                    </div>
                    <a href="<?php echo base_url('kartu-keluarga/detail/'.$k->id); ?>"
                       style="font-size:.73rem; color:#1abc9c; font-weight:600; text-decoration:none; white-space:nowrap; flex-shrink:0; margin-left:8px;">
                        <i class="bi bi-people me-1"></i>Anggota
                    </a>
                </div>
                <div style="font-size:.76rem; color:#6b7280; margin-bottom:10px;">
                    <i class="bi bi-geo-alt me-1"></i><?php echo $k->alamat; ?>
                    <?php if($k->rt || $k->rw): ?> &nbsp;·&nbsp; RT <?php echo $k->rt; ?>/RW <?php echo $k->rw; ?><?php endif; ?>
                </div>
                <div class="d-flex gap-2" style="border-top:1px solid #f3f4f6; padding-top:9px;">
                    <a href="<?php echo base_url('kartu-keluarga/detail/'.$k->id); ?>"
                       class="btn flex-fill fw-semibold btn-act-view" style="border-radius:8px; font-size:.8rem; padding:7px;">
                        <i class="bi bi-eye me-1"></i>Detail
                    </a>
                    <?php if(in_array($this->session->userdata('role'), ['admin','rt','ketua_rt','sekretaris'])): ?>
                    <button class="btn fw-semibold btn-act-add" style="border-radius:8px; font-size:.8rem; padding:7px 12px;"
                        onclick="bukaModalAnggota(<?php echo $k->id; ?>,'<?php echo $k->no_kk; ?>','<?php echo addslashes($k->alamat); ?>')">
                        <i class="bi bi-person-plus"></i>
                    </button>
                    <a href="<?php echo base_url('kartu-keluarga/edit/'.$k->id); ?>"
                       class="btn fw-semibold btn-act-edit" style="border-radius:8px; font-size:.8rem; padding:7px 12px;">
                        <i class="bi bi-pencil"></i>
                    </a>
                    <a href="<?php echo base_url('kartu-keluarga/hapus/'.$k->id); ?>"
                       class="btn fw-semibold btn-act-delete" style="border-radius:8px; font-size:.8rem; padding:7px 12px;"
                       onclick="return confirm('Yakin hapus KK <?php echo $k->no_kk; ?>?')">
                        <i class="bi bi-trash"></i>
                    </a>
                    <?php endif; ?>
                </div>
            </div>
            <?php endforeach; ?>
        </div>

        <?php else: ?>
        <div class="text-center py-5 text-muted">
            <i class="bi bi-house fs-1 d-block mb-2 opacity-50"></i>
            <div class="fw-semibold mb-1">Belum ada data Kartu Keluarga</div>
            <?php if(in_array($this->session->userdata('role'), ['admin','rt','ketua_rt','sekretaris'])): ?>
            <a href="<?php echo base_url('kartu-keluarga/tambah'); ?>" class="btn btn-sm mt-2"
               style="background:#20c997; color:#fff; border-radius:8px; font-size:.82rem;">
                <i class="bi bi-plus-circle me-1"></i>Tambah KK Sekarang
            </a>
            <?php endif; ?>
        </div>
        <?php endif; ?>
    </div>

</div>

<!-- ===== MODAL UPLOAD EXCEL ===== -->
<div class="modal fade" id="modalUploadExcel" tabindex="-1">
    <div class="modal-dialog modal-lg modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header" style="background:linear-gradient(135deg,#1abc9c,#16a085);">
                <h6 class="modal-title text-white fw-bold">
                    <i class="bi bi-file-earmark-excel me-2"></i>Import Data Warga via Excel
                </h6>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <!-- Steps -->
                <div style="background:#f0fdf4; border:1.5px solid #6ee7b7; border-radius:10px; padding:14px 16px; margin-bottom:14px;">
                    <div style="font-size:.8rem; font-weight:700; color:#065f46; margin-bottom:10px;">
                        <i class="bi bi-list-ol me-1"></i>Cara Upload:
                    </div>
                    <div style="display:flex; flex-direction:column; gap:10px;">
                        <?php
                        $steps = [
                            ['Download template Excel', '<a href="'.base_url('kartu-keluarga/download_template').'" class="btn btn-sm mt-1" style="background:#20c997;color:#fff;border-radius:6px;font-size:.78rem;"><i class="bi bi-download me-1"></i>Download Template</a>'],
                            ['Isi data di sheet <em>"Import Warga"</em>', '<span style="color:#6b7280;">Mulai baris ke-5. Kolom bertanda <strong style="color:#ef4444;">*</strong> wajib diisi (NIK 16 digit, Nama, No. KK).</span>'],
                            ['Upload file Excel', '<span style="color:#6b7280;">Pilih file .xlsx yang sudah diisi, lalu klik <strong>Proses Import</strong>.</span>'],
                            ['Cek hasil import', '<span style="color:#6b7280;">Sistem menampilkan ringkasan data berhasil, dilewati, dan gagal.</span>'],
                        ];
                        foreach($steps as $i=>$s): ?>
                        <div style="display:flex; align-items:flex-start; gap:10px;">
                            <div style="width:24px;height:24px;border-radius:50%;background:#20c997;color:#fff;font-size:.72rem;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;"><?php echo $i+1; ?></div>
                            <div style="font-size:.82rem;">
                                <div style="font-weight:600; color:#374151;"><?php echo $s[0]; ?></div>
                                <div><?php echo $s[1]; ?></div>
                            </div>
                        </div>
                        <?php endforeach; ?>
                    </div>
                </div>

                <!-- Catatan -->
                <div style="background:#fffbeb; border:1.5px solid #fde68a; border-radius:8px; padding:10px 14px; margin-bottom:14px; font-size:.78rem; color:#92400e;">
                    <i class="bi bi-exclamation-triangle-fill me-1"></i>
                    <strong>Catatan:</strong> NIK harus unik (16 digit). No. KK baru otomatis dibuat jika belum ada.
                    Jika kolom <strong>Username</strong> diisi, akun warga dibuat otomatis (password = NIK).
                    Data NIK duplikat akan dilewati.
                </div>

                <!-- Form Upload -->
                <form action="<?php echo base_url('kartu-keluarga/proses_import_excel'); ?>" method="POST" enctype="multipart/form-data" id="formUploadExcel">
                    <input type="hidden" name="<?php echo $this->security->get_csrf_token_name(); ?>" value="<?php echo $this->security->get_csrf_hash(); ?>">
                    <label class="form-label">Pilih File Excel (.xlsx / .xls)</label>
                    <div id="dropZone" style="border:2px dashed #1abc9c; border-radius:10px; background:#f8fffe; text-align:center; padding:24px 16px; cursor:pointer; transition:background .2s;">
                        <i class="bi bi-cloud-upload" style="font-size:2rem; color:#1abc9c;"></i>
                        <div style="font-weight:700; font-size:.85rem; margin-top:6px;">Drag &amp; drop file di sini</div>
                        <div style="font-size:.78rem; color:#9ca3af;">atau</div>
                        <label for="fileExcel" class="btn btn-sm btn-outline-success mt-1" style="border-radius:6px; cursor:pointer; font-size:.8rem;">Pilih File</label>
                        <input type="file" id="fileExcel" name="file_excel" accept=".xlsx,.xls" class="d-none" required>
                        <div id="namaFile" style="margin-top:6px; font-size:.8rem; color:#6b7280;"></div>
                    </div>
                    <div id="progressWrap" class="d-none mt-3">
                        <div style="display:flex; justify-content:space-between; font-size:.78rem; margin-bottom:4px;">
                            <span style="color:#6b7280;">Memproses data...</span>
                            <span id="progressPct" style="color:#20c997; font-weight:700;">0%</span>
                        </div>
                        <div style="height:7px; border-radius:4px; background:#e5e7eb; overflow:hidden;">
                            <div id="progressBar" style="height:100%; width:0%; background:linear-gradient(90deg,#1abc9c,#16a085); transition:width .3s; border-radius:4px;"></div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline-secondary btn-sm" data-bs-dismiss="modal" style="border-radius:8px;">Batal</button>
                <button type="button" class="btn btn-sm fw-bold" id="btnProses"
                    style="background:#20c997; color:#fff; border:none; border-radius:8px; padding:7px 20px;">
                    <i class="bi bi-upload me-1"></i>Proses Import
                </button>
            </div>
        </div>
    </div>
</div>

<!-- ===== MODAL TAMBAH ANGGOTA (dari list) ===== -->
<div class="modal fade" id="modalTambahAnggotaList" tabindex="-1">
    <div class="modal-dialog modal-lg modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header" style="background:linear-gradient(135deg,#1abc9c,#16a085);">
                <h6 class="modal-title text-white fw-bold"><i class="bi bi-person-plus me-2"></i>Tambah Anggota Keluarga</h6>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <form id="formTambahAnggotaList" action="" method="post">
                <input type="hidden" name="<?php echo $this->security->get_csrf_token_name(); ?>" value="<?php echo $this->security->get_csrf_hash(); ?>">
                <div class="modal-body">
                    <div id="infoKKModal" style="background:#f0fdf4; border:1.5px solid #6ee7b7; border-radius:8px; padding:9px 14px; font-size:.8rem; color:#065f46; margin-bottom:14px;">
                        <i class="bi bi-house-door me-1"></i>
                        <strong id="noKKModal"></strong> — <span id="alamatKKModal"></span>
                    </div>
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label">NIK <span class="text-danger">*</span></label>
                            <input type="text" name="nik" class="form-control" maxlength="16" required placeholder="16 digit NIK">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Nama Lengkap <span class="text-danger">*</span></label>
                            <input type="text" name="nama_lengkap" class="form-control" required>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Status Hubungan <span class="text-danger">*</span></label>
                            <select name="status_hubungan" class="form-select" required>
                                <option value="">-- Pilih --</option>
                                <option value="kepala_keluarga">Kepala Keluarga</option>
                                <option value="istri">Istri</option>
                                <option value="anak">Anak</option>
                                <option value="cucu">Cucu</option>
                                <option value="orang_tua">Orang Tua</option>
                                <option value="mertua">Mertua</option>
                                <option value="famili_lain">Famili Lain</option>
                                <option value="pembantu">Pembantu</option>
                                <option value="lainnya">Lainnya</option>
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Jenis Kelamin</label>
                            <select name="jenis_kelamin" class="form-select">
                                <option value="">-- Pilih --</option>
                                <option value="L">Laki-laki</option>
                                <option value="P">Perempuan</option>
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Tempat Lahir</label>
                            <input type="text" name="tempat_lahir" class="form-control">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Tanggal Lahir</label>
                            <input type="date" name="tanggal_lahir" class="form-control">
                        </div>
                        <div class="col-md-6">
                            <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 class="col-md-6">
                            <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">
                            <label class="form-label">Pekerjaan</label>
                            <input type="text" name="pekerjaan" class="form-control">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Status Domisili</label>
                            <select name="status_domisili" class="form-select">
                                <option value="tetap">Tetap</option>
                                <option value="kost">Kost</option>
                                <option value="kontrak">Kontrak</option>
                                <option value="pendatang">Pendatang</option>
                                <option value="sementara">Sementara</option>
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Keterangan Domisili</label>
                            <input type="text" name="keterangan_domisili" class="form-control" placeholder="Opsional">
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-secondary btn-sm" data-bs-dismiss="modal" style="border-radius:8px;">Batal</button>
                    <button type="submit" class="btn btn-sm fw-bold" style="background:#20c997; color:#fff; border:none; border-radius:8px; padding:7px 20px;">
                        <i class="bi bi-save me-1"></i>Simpan Anggota
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
function bukaModalAnggota(kkId, noKK, alamat) {
    document.getElementById('formTambahAnggotaList').action =
        '<?php echo base_url('kartu-keluarga/tambah_anggota/'); ?>' + kkId;
    document.getElementById('noKKModal').textContent     = 'KK ' + noKK;
    document.getElementById('alamatKKModal').textContent = alamat;
    document.getElementById('formTambahAnggotaList').reset();
    new bootstrap.Modal(document.getElementById('modalTambahAnggotaList')).show();
}

(function () {
    var dropZone  = document.getElementById('dropZone');
    var fileInput = document.getElementById('fileExcel');
    var namaFile  = document.getElementById('namaFile');
    var btnProses = document.getElementById('btnProses');
    var form      = document.getElementById('formUploadExcel');

    function tampilNama(file) {
        if (!file) return;
        var ext = file.name.split('.').pop().toLowerCase();
        if (!['xlsx','xls'].includes(ext)) {
            alert('Format file harus .xlsx atau .xls');
            fileInput.value = ''; namaFile.innerHTML = '';
            dropZone.style.background = '#f8fffe'; dropZone.style.borderColor = '#1abc9c';
            return;
        }
        namaFile.innerHTML = '<i class="bi bi-file-earmark-excel" style="color:#1abc9c;"></i> '
            + '<strong>' + file.name + '</strong>'
            + ' <span style="color:#9ca3af;">(' + (file.size/1024).toFixed(1) + ' KB)</span>';
        dropZone.style.background  = '#e8f5e9';
        dropZone.style.borderColor = '#6ee7b7';
    }

    fileInput.addEventListener('change', function() { tampilNama(this.files[0]); });

    dropZone.addEventListener('dragover', function(e) { e.preventDefault(); this.style.background = '#e0f7fa'; });
    dropZone.addEventListener('dragleave', function() { this.style.background = '#f8fffe'; });
    dropZone.addEventListener('drop', function(e) {
        e.preventDefault(); this.style.background = '#f8fffe';
        var file = e.dataTransfer.files[0];
        if (file) {
            try { var dt = new DataTransfer(); dt.items.add(file); fileInput.files = dt.files; } catch(err) {}
            tampilNama(file);
        }
    });

    btnProses.addEventListener('click', function() {
        if (!fileInput.files || !fileInput.files[0]) { alert('Pilih file Excel terlebih dahulu!'); return; }
        document.getElementById('progressWrap').classList.remove('d-none');
        var bar = document.getElementById('progressBar');
        var pct = document.getElementById('progressPct');
        var n = 0;
        var iv = setInterval(function() {
            n += Math.random() * 12; if (n > 90) n = 90;
            bar.style.width = n + '%'; pct.textContent = Math.round(n) + '%';
        }, 400);
        btnProses.disabled  = true;
        btnProses.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span>Memproses...';
        form.submit();
    });
})();
</script>