{{-- modal relasi keluarga --}}
    <div class="modal fade" id="modal-relasi_keluarga">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content modal-content-demo">
                <div class="modal-header">
                    <h6 class="modal-title" id="modal-relasi_keluarga-title">Tambah Relasi</h6><button aria-label="Close" class="btn-close"
                        data-bs-dismiss="modal"><span aria-hidden="true"></span></button>
                </div>
                <div class="modal-body">
                    <form id="relasi_keluarga_form" method="POST" action="{{ route('member.relasi_keluarga_insert') }}" enctype="multipart/form-data" class="needs-validation" novalidate>
                        @csrf
                        <input type="hidden" name="penduduk_id" value="{{ $penduduk->id }}">
                        <input type="hidden" name="id" id="relasi_keluarga_id">
                        <div class="form-group">
                            @if(!$penduduk)
                                <div class="alert alert-warning mb-3">
                                    <i class="fas fa-exclamation-triangle me-2"></i>
                                    ID Penduduk tidak ditemukan. Pastikan profil Anda sudah terdaftar sebagai penduduk.
                                </div>
                            @endif
                            {{-- Nama Kerabat --}}
                            <div class="mb-3">
                                <label for="relasi_keluarga_kerabat" class="form-label">Nama Kerabat <span class="text-danger">*</span></label>
                                <select class="form-select" id="relasi_keluarga_kerabat" name="kerabat_id" required
                                        data-placeholder="Cari berdasarkan Nama atau Nomor KTP">
                                    <!-- Opsi kosong, akan diisi oleh select2 -->
                                </select>
                                <div class="invalid-feedback" id="kerabat_id-error">Silakan pilih kerabat</div>
                            </div>
                            {{-- Jenis Hubungan --}}
                            <div class="mb-3">
                                <label for="relasi_keluarga_hubungan" class="form-label">Jenis Hubungan</label>
                                <select class="form-control select2-hubungan" id="relasi_keluarga_hubungan" name="hubungan" required>
                                    <option value="">Pilih Hubungan</option>
                                    @foreach(App\Models\Kependudukan\PendudukRelasi::HUBUNGAN as $hubungan)
                                        <option value="{{ $hubungan }}" @if(old('hubungan') == $hubungan) selected @endif>{{ $hubungan }}</option>
                                    @endforeach
                                </select>
                                <div class="invalid-feedback" id="hubungan-error"></div>
                            </div>
                            {{-- Level Hubungan --}}
                            <div class="mb-3">
                                <label for="relasi_keluarga_level" class="form-label">Level Hubungan</label>
                                <input type="number" class="form-control" id="relasi_keluarga_level"
                                       name="level_hubungan" min="-5" max="5" required readonly>
                                <div class="invalid-feedback" id="level_hubungan-error"></div>
                            </div>
                            {{-- Kategori Hubungan --}}
                            <div class="mb-3">
                                <label for="relasi_keluarga_kategori" class="form-label">Kategori Hubungan <span class="text-danger">*</span></label>
                                <select class="form-control" id="relasi_keluarga_kategori" name="kategori_hubungan" required>
                                    <option value="">Pilih Kategori Hubungan</option>
                                    <option value="Biologis" selected>Biologis</option>
                                    <option value="Tiri">Tiri</option>
                                    <option value="Adopsi">Adopsi</option>
                                    <option value="Sosial">Sosial</option>
                                    <option value="Lainnya">Lainnya</option>
                                </select>
                                <div class="invalid-feedback" id="kategori_hubungan-error">Silakan pilih kategori hubungan</div>
                            </div>
                            {{-- Status Hubungan --}}
                            <div class="mb-3">
                                <label for="relasi_keluarga_status" class="form-label">Status Hubungan</label>
                                <select class="form-control" id="relasi_keluarga_status" name="status_hubungan" required>
                                    <option value="Aktif" selected>Aktif</option>
                                    <option value="Tidak Aktif">Tidak Aktif</option>
                                </select>
                                <div class="invalid-feedback" id="status_hubungan-error"></div>
                            </div>
                            {{-- Catatan --}}
                            <div class="mb-3">
                                <label for="relasi_keluarga_catatan" class="form-label">Catatan</label>
                                <textarea class="form-control" id="relasi_keluarga_catatan" name="catatan" rows="2"
                                          placeholder="Isi jika diperlukan"></textarea>
                            </div>
                        </div>
                    </form>
                </div>
                <div id="relasi_keluarga-body" class="mt-4"></div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-primary" form="relasi_keluarga_form">
                        <li class="fas fa-save mr-1"></li> Simpan Perubahan
                    </button>
                    <button class="btn btn-light" data-bs-dismiss="modal">
                        <i class="fas fa-times"></i>
                        Tutup
                    </button>
                </div>
            </div>
        </div>
    </div>