{{-- Ubah Profil --}}
            <div class="card">
                <div class="card-header">
                    <h6 class="mt-2">Biodata profile</h6>
                </div>
                <div class="card-body">
                    <form action="" id="detail_profile">
                        <input type="hidden" name="id" value="{{ $penduduk->id }}">
                        <div class="form-group">
                            <div class="row">
                                <div class="col-md-7">
                                    <div class="form-group">
                                        <small for="nama">Nama Lengkap</small>
                                        <input type="text" class="form-control" id="nama" name="nama"
                                               placeholder="Nama Lengkap" value="{{ $penduduk->nama }}" required>
                                    </div>
                                </div>
                                <div class="col-md-5">
                                    <div class="form-group">
                                        <small for="username">Nama Profil</small>
                                        <div class="input-group">
                                            <span class="input-group-text">@</span>
                                            <input type="text" class="form-control" id="username" placeholder="Ex: densy82"
                                                   value="{{ $user->username }}">
                                            <input type="hidden" id="username_slug" name="username" value="{{ $user->username }}">
                                        </div>
                                        <small id="username_preview">{{ url('') . '/' . $user->username }}</small>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="row g-3 align-items-end">
                                <!-- Tanggal Lahir -->
                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label for="tanggal_lahir">Tanggal Lahir</label>
                                        <input type="date" class="form-control" id="tanggal_lahir" name="tanggal_lahir"
                                               value="{{ $penduduk->tanggal_lahir ?? date('Y-m-d') }}"
                                               required max="{{ date('Y-m-d') }}">
                                    </div>
                                </div>
                                <!-- Umur (Tampilan Teks) -->
                                <div class="col-md-2">
                                    <div class="form-group">
                                        <label for="umur">Umur</label>
                                        <div class="form-control-plaintext" style="min-height: 10px;">
                                            <div class="d-flex flex-column">
                                                <span id="umur-tahun-bulan" style="font-size:0.85em">
                                                    <span id="umur-tahun" style="font-size:0.9em">0</span> Tahun
                                                    <span id="umur-bulan" style="font-size:0.9em">0</span> Bulan
                                                </span>
                                                <span id="umur-hari-container" style="font-size:0.85em">
                                                    <span id="umur-hari" style="font-size:0.9em">0</span> Hari
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- Jenis Kelamin -->
                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label for="jenis_kelamin">Jenis Kelamin</label>
                                        <select name="jenis_kelamin" class="form-control">
                                            <option value="">Pilih Jenis Kelamin</option>
                                            <option value="Laki-laki" {{ $penduduk->jenis_kelamin == 'Laki-laki' ? 'selected' : '' }}>
                                                Laki-laki
                                            </option>
                                            <option value="Perempuan" {{ $penduduk->jenis_kelamin == 'Perempuan' ? 'selected' : '' }}>
                                                Perempuan
                                            </option>
                                        </select>
                                    </div>
                                </div>
                                <!-- Golongan Darah -->
                                <div class="col-md-2">
                                    <!-- Golongan Darah -->
                                    <div class="form-group">
                                        <label for="golongan_darah">Golongan Darah</label>
                                        <select class="form-control select2" id="golongan_darah" name="golongan_darah" style="width: 100%">
                                            @if ($penduduk->golongan_darah)
                                                <option value="{{ $penduduk->golongan_darah }}" selected>{{ $penduduk->golongan_darah }}</option>
                                            @endif
                                        </select>
                                    </div>
                                </div>
                                <!-- Resus -->
                                <div class="col-md-2">
                                    <div class="form-group">
                                        <label for="resus">Resus</label>
                                        <div class="btn-group w-100" role="group">
                                            <input type="radio" class="btn-check" name="resus_goldar" id="resus_positif"
                                                   value="+" {{ $penduduk->resus_goldar == '+' ? 'checked' : '' }}>
                                            <label class="btn btn-outline-success" for="resus_positif">+</label>
                                            <input type="radio" class="btn-check" name="resus_goldar" id="resus_negatif"
                                                   value="-" {{ $penduduk->resus_goldar == '-' ? 'checked' : '' }}>
                                            <label class="btn btn-outline-danger" for="resus_negatif">-</label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="row">
                                <!-- Kolom Agama -->
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <small for="agama" class="form-label">Agama</small>
                                        <select class="form-control select2" id="agama" name="agama" style="width: 100%">
                                            @if ($penduduk->agama)
                                                <option value="{{ $penduduk->agama }}" selected>{{ $penduduk->agama }}</option>
                                            @endif
                                        </select>
                                    </div>
                                </div>
                                <!-- Kolom Profesi -->
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <small for="profesi" class="form-label">Profesi</small>
                                        <select class="form-control select2" id="profesi" name="profesi" style="width: 100%">
                                            @if ($penduduk->profesi)
                                                <option value="{{ $penduduk->profesi }}" selected>{{ $penduduk->profesi }}</option>
                                            @endif
                                        </select>
                                    </div>
                                </div>
                                <!-- Tipe Profesi ASN -->
                                <div class="col-md-3" id="asn-type-container" style="display: {{ $penduduk->profesi == 'ASN' ? 'block' : 'none' }};">
                                    <div class="form-group">
                                        <small for="jenis_asn" class="form-label">Jenis ASN</small>
                                        <select class="form-control" id="jenis_asn" name="jenis_asn">
                                            <option value="">Pilih Jenis ASN</option>
                                            <option value="PNS" {{ optional($penduduk->asn)->jenis_asn == 'PNS' ? 'selected' : '' }}>PNS</option>
                                            <option value="PPPK" {{ optional($penduduk->asn)->jenis_asn == 'PPPK' ? 'selected' : '' }}>PPPK</option>
                                            <option value="CPNS" {{ optional($penduduk->asn)->jenis_asn == 'CPNS' ? 'selected' : '' }}>CPNS</option>
                                            <option value="CPPPK" {{ optional($penduduk->asn)->jenis_asn == 'CPPPK' ? 'selected' : '' }}>CPPPK</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row g-3">
                            <!-- Status Perkawinan -->
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="status_kawin" class="form-label">Status Perkawinan</label>
                                    <select class="form-control" id="status_kawin" name="status_kawin" required
                                            onchange="toggleFamilyStatus(this)">
                                        <option value="">Pilih Status</option>
                                        <option value="Belum Kawin" {{ $penduduk->status_kawin == 'Belum Kawin' ? 'selected' : '' }}>Belum Kawin</option>
                                        <option value="Kawin" {{ $penduduk->status_kawin == 'Kawin' ? 'selected' : '' }}>Kawin</option>
                                        <option value="Cerai Hidup" {{ $penduduk->status_kawin == 'Cerai Hidup' ? 'selected' : '' }}>Cerai Hidup</option>
                                        <option value="Cerai Mati" {{ $penduduk->status_kawin == 'Cerai Mati' ? 'selected' : '' }}>Cerai Mati</option>
                                    </select>
                                </div>
                            </div>
                            <!-- Status Hubungan dalam Keluarga -->
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="status_keluarga" class="form-label">Hubungan dalam Keluarga</label>
                                    <select class="form-control" id="status_keluarga" name="status_keluarga"
                                            {{ $penduduk->status_kawin == 'Belum Kawin' ? 'disabled' : '' }}>
                                        <option value="">Pilih Hubungan</option>
                                        <option value="Kepala Keluarga" {{ $penduduk->status_keluarga == 'Kepala Keluarga' ? 'selected' : '' }}>Kepala Keluarga</option>
                                        <option value="Anak" {{ $penduduk->status_keluarga == 'Anak' ? 'selected' : '' }}>Anak</option>
                                        @if($penduduk->status_kawin != 'Belum Kawin')
                                            <option value="Suami" {{ $penduduk->status_keluarga == 'Suami' ? 'selected' : '' }}>Suami</option>
                                            <option value="Istri" {{ $penduduk->status_keluarga == 'Istri' ? 'selected' : '' }}>Istri</option>
                                            <option value="Menantu" {{ $penduduk->status_keluarga == 'Menantu' ? 'selected' : '' }}>Menantu</option>
                                            <option value="Orang tua" {{ $penduduk->status_keluarga == 'Orang tua' ? 'selected' : '' }}>Orang tua</option>
                                            <option value="Mertua" {{ $penduduk->status_keluarga == 'Mertua' ? 'selected' : '' }}>Mertua</option>
                                            <option value="Pembantu" {{ $penduduk->status_keluarga == 'Pembantu' ? 'selected' : '' }}>Pembantu</option>
                                            <option value="Famili Lain" {{ $penduduk->status_keluarga == 'Famili Lain' ? 'selected' : '' }}>Famili Lain</option>
                                            <option value="Lainnya" {{ $penduduk->status_keluarga == 'Lainnya' ? 'selected' : '' }}>Lainnya</option>
                                        @endif
                                        <!-- Opsi lainnya -->
                                    </select>
                                    @if($penduduk->status_kawin == 'Belum Kawin')
                                        <input type="hidden" name="status_keluarga" value="{{ $penduduk->status_keluarga }}">
                                    @endif
                                </div>
                            </div>
                            <!-- Status Disabilitas -->
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="status_disabilitas" class="form-label">Disabilitas</label>
                                    <select class="form-control" id="status_disabilitas" name="status_disabilitas">
                                        <option value="0" {{ $penduduk->status_disabilitas == 0 ? 'selected' : '' }}>Tidak</option>
                                        <option value="1" {{ $penduduk->status_disabilitas == 1 ? 'selected' : '' }}>Ya</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                          <div class="row">
                              <!-- Kolom Email -->
                              <div class="col-md-4">
                                  <div class="form-group">
                                      <small for="email">Email</small>
                                      <input type="email" class="form-control" id="email" name="email"
                                             placeholder="Alamat Email" value="{{ $user->email }}">
                                      <small class="text-danger">Email hanya digunakan untuk login</small>
                                  </div>
                              </div>
                              <!-- Kolom Telepon -->
                              <div class="col-md-4">
                                  <div class="form-group">
                                      <small for="telepon">Nomor Telepon</small>
                                      <input type="text" class="form-control" id="telepon" name="telepon"
                                             title="Nomor telepon yang bisa di hubungi" placeholder="Nomor telepon"
                                             value="{{ $penduduk->telepon }}">
                                  </div>
                              </div>
                              <!-- Kolom WhatsApp -->
                              <div class="col-md-4">
                                  <div class="form-group">
                                      <small for="whatsapp">WhatsApp</small>
                                      <div class="input-group">
                                          <span class="input-group-text" id="whatsapp">+62</span>
                                          <input type="number" class="form-control" id="basic-url" aria-describedby="whatsapp"
                                                 name="whatsapp" title="Nomor Whatsapp" placeholder="85798132505"
                                                 value="{{ $penduduk->whatsapp }}">
                                      </div>
                                  </div>
                              </div>
                          </div>
                        </div>
                    </form>
                </div>
                <div class="card-footer text-end">
                    <button type="submit" form="detail_profile" class="btn btn-primary my-1">
                        <li class="fas fa-save mr-1"></li> Simpan Perubahan
                    </button>
                </div>
            </div>