{{-- =================================================================================================
FILE  : resources/views/anggota/create.blade.php
MODUL : Tambah Anggota
TAHUN : 2026

FUNGSI:
- Form tambah anggota baru.
- Dropdown wilayah dinamis (Provinsi -> Kota -> Kecamatan -> Desa) via API.
- Pembatasan pilihan ROLE berdasarkan role user yang login.
- Wilayah otomatis lock sesuai level user login.
- Untuk user ranting/operator ranting: provinsi, kabupaten, kecamatan auto terisi & terkunci; desa tetap bisa dipilih.
================================================================================================= --}}

@extends('layouts.dashboard')

@section('title', 'Tambah Anggota')
@section('pagetitle', 'Tambah Anggota')

@push('styles')
<style>
    .section-group{
        background:#f8fafc;
        border:1px solid #f38304;
        border-radius:.75rem;
        padding:.85rem .95rem .5rem;
        margin-bottom:.85rem;
    }
    .section-box-title{
        font-size:.9rem;
        font-weight:800;
        text-transform:uppercase;
        letter-spacing:.05em;
        color:#343a40;
        margin-bottom:.55rem;
    }
    .form-label{
        font-weight:700;
        color:#0b5ed7;
        font-size:.9rem;
        margin-bottom:.2rem;
    }
    .form-control,
    .form-select,
    textarea.form-control{
        font-weight:700 !important;
        font-size:.95rem;
        color:#000 !important;
    }
    .form-control:focus,
    .form-select:focus,
    textarea.form-control:focus{
        border-color:#0d6efd;
        box-shadow:0 0 0 .18rem rgba(13,110,253,.35);
        background:#f0f6ff;
    }
    .card.border-0.shadow-sm{
        border-radius:.75rem;
    }
    .required-star{
        color:#dc3545;
        font-weight:800;
    }
    .form-text{
        font-size:.78rem;
    }
    .readonly-note{
        font-size:.75rem;
        color:#6c757d;
        margin-top:.25rem;
    }
</style>
@endpush

@section('content')
@php
    $user = auth()->user();

    $roleAliasMap = [
        'joudie' => 'joudie',
        'superadmin' => 'superadmin',
        'super_admin' => 'superadmin',
        'dpp' => 'dpp',

        'dpd_pengurus' => 'dpd_pengurus',
        'dpdpengurus' => 'dpd_pengurus',
        'dpd_operator' => 'dpd_operator',
        'dpdoperator' => 'dpd_operator',
        'opr_dpd' => 'dpd_operator',
        'operator_dpd' => 'dpd_operator',

        'dpc_pengurus' => 'dpc_pengurus',
        'dpcpengurus' => 'dpc_pengurus',
        'dpc_operator' => 'dpc_operator',
        'dpcoperator' => 'dpc_operator',
        'opr_dpc' => 'dpc_operator',
        'operator_dpc' => 'dpc_operator',

        'ranting_pengurus' => 'ranting_pengurus',
        'rantingpengurus' => 'ranting_pengurus',
        'ranting_operator' => 'ranting_operator',
        'rantingoperator' => 'ranting_operator',
        'opr_ranting' => 'ranting_operator',
        'operator_ranting' => 'ranting_operator',
        'opr_rtg' => 'ranting_operator',

        'anggota' => 'anggota',
    ];

    $loginRoleRaw = strtolower(trim((string)($user->role ?? '')));
    $loginRoleNorm = $roleAliasMap[$loginRoleRaw] ?? $loginRoleRaw;

    $userProv = old('alamat_provinsi_id',
        session('login_provinsi')
        ?? ($user->alamat_provinsi_id ?? $user->alamatprovinsiid ?? $user->provinsi_id ?? null)
    );

    $userKota = old('alamat_kota_id',
        session('login_kabupaten')
        ?? ($user->alamat_kota_id ?? $user->alamatkotaid ?? $user->kabupaten_id ?? $user->kota_id ?? null)
    );

    $userKec = old('alamat_kecamatan_id',
        session('login_kecamatan')
        ?? ($user->alamat_kecamatan_id ?? $user->alamatkecamatanid ?? $user->kecamatan_id ?? null)
    );

    $userDesa = old('alamat_desa_id',
        session('login_desa')
        ?? ($user->alamat_desa_id ?? $user->alamatdesaid ?? $user->desa_id ?? null)
    );

    $oldProv = $userProv;
    $oldKota = $userKota;
    $oldKec  = $userKec;
    $oldDesa = $userDesa;

    $roleHierarchy = [
        'joudie',
        'superadmin',
        'dpp',
        'dpd_pengurus',
        'dpd_operator',
        'dpc_pengurus',
        'dpc_operator',
        'ranting_pengurus',
        'ranting_operator',
        'anggota',
    ];

    $startIndexMap = [
        'joudie'            => 0,
        'superadmin'        => 1,
        'dpp'               => 3,
        'dpd_pengurus'      => 4,
        'dpd_operator'      => 5,
        'dpc_pengurus'      => 6,
        'dpc_operator'      => 7,
        'ranting_pengurus'  => 8,
        'ranting_operator'  => 9,
        'anggota'           => 9,
    ];

    $startIndex = $startIndexMap[$loginRoleNorm] ?? 9;
    $selectableRoles = array_slice($roleHierarchy, $startIndex);

    if ($loginRoleNorm !== 'joudie') {
        $selectableRoles = array_values(array_filter($selectableRoles, fn ($r) => $r !== 'joudie'));
    }

    if (isset($allowedRoles) && is_array($allowedRoles) && count($allowedRoles) > 0) {
        $selectableRoles = array_values(array_intersect($selectableRoles, $allowedRoles));
    }

    $roleLabels = [
        'joudie'            => 'Joudie',
        'superadmin'        => 'Superadmin',
        'dpp'               => 'DPP',
        'dpd_pengurus'      => 'DPD Pengurus',
        'dpd_operator'      => 'DPD Operator',
        'dpc_pengurus'      => 'DPC Pengurus',
        'dpc_operator'      => 'DPC Operator',
        'ranting_pengurus'  => 'Ranting Pengurus',
        'ranting_operator'  => 'Ranting Operator',
        'anggota'           => 'Anggota',
    ];

    $lockProv = false;
    $lockKota = false;
    $lockKec  = false;
    $lockDesa = false;

    if (in_array($loginRoleNorm, ['dpd_pengurus', 'dpd_operator'], true)) {
        $lockProv = true;
    }

    if (in_array($loginRoleNorm, ['dpc_pengurus', 'dpc_operator'], true)) {
        $lockProv = true;
        $lockKota = true;
    }

    if (in_array($loginRoleNorm, ['ranting_pengurus', 'ranting_operator'], true)) {
        $lockProv = true;
        $lockKota = true;
        $lockKec  = true;
    }

    if ($loginRoleNorm === 'anggota') {
        $lockProv = true;
        $lockKota = true;
        $lockKec  = true;
        $lockDesa = true;
    }

    $provinsis = collect($provinsis ?? []);
    $kotas = collect($kotas ?? []);
    $kecamatans = collect($kecamatans ?? []);
    $desas = collect($desas ?? []);
@endphp

<div class="container-fluid">
    <div class="row justify-content-center">
        <div class="col-12 col-lg-11 col-xl-10">

            <div class="card border-0 shadow-sm">
                <div class="card-header bg-white border-0 pb-0">
                    <h5 class="mb-1 fw-semibold text-primary">
                        <i class="bi bi-person-plus-fill me-1"></i> Tambah Data Anggota
                    </h5>
                </div>

                <div class="card-body pt-3">

                    @if ($errors->any())
                        <div class="alert alert-danger py-2">
                            <div class="fw-bold mb-1">Terdapat kesalahan input:</div>
                            <ul class="mb-0 ps-3">
                                @foreach ($errors->all() as $err)
                                    <li>{{ $err }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif

                    <form action="{{ route('anggota.store') }}" method="POST" class="row g-3">
                        @csrf

                        <div class="col-12">
                            <div class="section-group">
                                <h6 class="section-box-title">Identitas Utama</h6>

                                <div class="row g-2">
                                    <div class="col-12 col-md-4">
                                        <label for="nik" class="form-label">NIK <span class="required-star">*</span></label>
                                        <input type="text" name="nik" id="nik" value="{{ old('nik') }}" class="form-control form-control-sm @error('nik') is-invalid @enderror" maxlength="18" required>
                                        @error('nik')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="col-12 col-md-8">
                                        <label for="nama_lengkap" class="form-label">Nama Lengkap <span class="required-star">*</span></label>
                                        <input type="text" name="nama_lengkap" id="nama_lengkap" value="{{ old('nama_lengkap') }}" class="form-control form-control-sm @error('nama_lengkap') is-invalid @enderror" maxlength="50" required>
                                        @error('nama_lengkap')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-12">
                            <div class="section-group">
                                <h6 class="section-box-title">Data Pribadi</h6>

                                <div class="row g-2">
                                    <div class="col-12 col-md-4">
                                        <label for="tanggal_lahir" class="form-label">Tanggal Lahir</label>
                                        <input type="date" name="tanggal_lahir" id="tanggal_lahir" value="{{ old('tanggal_lahir') }}" class="form-control form-control-sm @error('tanggal_lahir') is-invalid @enderror">
                                        @error('tanggal_lahir')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="col-12 col-md-4">
                                        <label for="jenis_kelamin" class="form-label">Jenis Kelamin</label>
                                        <select name="jenis_kelamin" id="jenis_kelamin" class="form-select form-select-sm @error('jenis_kelamin') is-invalid @enderror">
                                            <option value="">-- Pilih --</option>
                                            <option value="L" {{ old('jenis_kelamin') == 'L' ? 'selected' : '' }}>Laki-laki</option>
                                            <option value="P" {{ old('jenis_kelamin') == 'P' ? 'selected' : '' }}>Perempuan</option>
                                        </select>
                                        @error('jenis_kelamin')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="col-12 col-md-4">
                                        <label for="id_agama" class="form-label">Agama</label>
                                        <select name="id_agama" id="id_agama" class="form-select form-select-sm @error('id_agama') is-invalid @enderror">
                                            <option value="">-- Pilih Agama --</option>
                                            @foreach ($agamas as $a)
                                                @php
                                                    $idAg = $a->id_agama ?? ($a->idagama ?? null);
                                                    $nmAg = $a->nama_agama ?? ($a->namaagama ?? '');
                                                @endphp
                                                <option value="{{ $idAg }}" {{ old('id_agama') == $idAg ? 'selected' : '' }}>
                                                    {{ $nmAg }}
                                                </option>
                                            @endforeach
                                        </select>
                                        @error('id_agama')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="col-12 col-md-6">
                                        <label for="pendidikan_id" class="form-label">Pendidikan Terakhir</label>
                                        <select name="pendidikan_id" id="pendidikan_id" class="form-select form-select-sm @error('pendidikan_id') is-invalid @enderror">
                                            <option value="">-- Pilih Pendidikan --</option>
                                            @foreach ($pendidikans as $p)
                                                @php
                                                    $pid = $p->pendidikan_id ?? ($p->pendidikanid ?? null);
                                                    $pname = $p->nama_pendidikan ?? ($p->namapendidikan ?? '');
                                                @endphp
                                                <option value="{{ $pid }}" {{ old('pendidikan_id') == $pid ? 'selected' : '' }}>
                                                    {{ $pname }}
                                                </option>
                                            @endforeach
                                        </select>
                                        @error('pendidikan_id')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="col-12 col-md-6">
                                        <label for="nomor_wa" class="form-label">Nomor WhatsApp</label>
                                        <input type="text" name="nomor_wa" id="nomor_wa" value="{{ old('nomor_wa') }}" class="form-control form-control-sm @error('nomor_wa') is-invalid @enderror" maxlength="20" placeholder="Contoh: 0812XXXXXXX">
                                        @error('nomor_wa')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="col-12">
                                        <label for="email" class="form-label">Email</label>
                                        <input type="email" name="email" id="email" value="{{ old('email') }}" class="form-control form-control-sm @error('email') is-invalid @enderror" maxlength="40" placeholder="nama@contoh.com">
                                        @error('email')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-12">
                            <div class="section-group">
                                <h6 class="section-box-title">Status & Organisasi</h6>

                                <div class="row g-2">
                                    <div class="col-12 col-md-4">
                                        <label for="id_status" class="form-label">Status Pekerjaan</label>
                                        <select name="id_status" id="id_status" class="form-select form-select-sm @error('id_status') is-invalid @enderror">
                                            <option value="">-- Pilih Status Pekerjaan --</option>
                                            @foreach ($statusPekerjaans as $s)
                                                @php
                                                    $sid = $s->id_status ?? ($s->idstatus ?? null);
                                                    $sname = $s->nama_status ?? ($s->namastatus ?? '');
                                                @endphp
                                                <option value="{{ $sid }}" {{ old('id_status') == $sid ? 'selected' : '' }}>
                                                    {{ $sname }}
                                                </option>
                                            @endforeach
                                        </select>
                                        @error('id_status')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="col-12 col-md-4">
                                        <label for="jabatan_id" class="form-label">Jabatan Organisasi</label>
                                        <select name="jabatan_id" id="jabatan_id" class="form-select form-select-sm @error('jabatan_id') is-invalid @enderror">
                                            <option value="">-- Pilih Jabatan --</option>
                                            @foreach ($jabatans as $j)
                                                @php
                                                    $jid = $j->jabatan_id ?? ($j->jabatanid ?? null);
                                                    $jname = $j->nama_jabatan ?? ($j->namajabatan ?? '');
                                                @endphp
                                                <option value="{{ $jid }}" {{ old('jabatan_id') == $jid ? 'selected' : '' }}>
                                                    {{ $jname }}
                                                </option>
                                            @endforeach
                                        </select>
                                        @error('jabatan_id')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="col-12 col-md-4">
                                        <label for="status_organisasi" class="form-label">Status Organisasi</label>
                                        <select name="status_organisasi" id="status_organisasi" class="form-select form-select-sm @error('status_organisasi') is-invalid @enderror">
                                            <option value="">-- Pilih Status --</option>
                                            <option value="P" {{ old('status_organisasi') == 'P' ? 'selected' : '' }}>Pengurus</option>
                                            <option value="A" {{ old('status_organisasi') == 'A' ? 'selected' : '' }}>Anggota</option>
                                            <option value="S" {{ old('status_organisasi') == 'S' ? 'selected' : '' }}>Simpatisan</option>
                                        </select>
                                        @error('status_organisasi')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-12">
                            <div class="section-group">
                                <h6 class="section-box-title">Wilayah Domisili</h6>

                                <div class="row g-2">
                                    <div class="col-12 col-md-3">
                                        <label for="alamat_provinsi_id" class="form-label">Provinsi</label>
                                        <select name="{{ $lockProv ? '' : 'alamat_provinsi_id' }}" id="alamat_provinsi_id" class="form-select form-select-sm @error('alamat_provinsi_id') is-invalid @enderror" {{ $lockProv ? 'disabled' : '' }}>
                                            <option value="">-- Pilih Provinsi --</option>
                                            @foreach ($provinsis as $prov)
                                                <option value="{{ $prov->id }}" {{ (string)$oldProv === (string)$prov->id ? 'selected' : '' }}>
                                                    {{ $prov->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                        @if ($lockProv)
                                            <input type="hidden" name="alamat_provinsi_id" value="{{ $oldProv }}">
                                        @endif
                                        @error('alamat_provinsi_id')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                        @if ($lockProv)
                                            <div class="readonly-note">Provinsi dikunci sesuai wilayah user login.</div>
                                        @endif
                                    </div>

                                    <div class="col-12 col-md-3">
                                        <label for="alamat_kota_id" class="form-label">Kabupaten / Kota</label>
                                        <select name="{{ $lockKota ? '' : 'alamat_kota_id' }}" id="alamat_kota_id" class="form-select form-select-sm @error('alamat_kota_id') is-invalid @enderror" {{ (!$oldProv || $lockKota) ? 'disabled' : '' }}>
                                            <option value="">-- Pilih Kabupaten / Kota --</option>
                                            @foreach ($kotas as $k)
                                                <option value="{{ $k->id }}" {{ (string)$oldKota === (string)$k->id ? 'selected' : '' }}>
                                                    {{ $k->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                        @if ($lockKota)
                                            <input type="hidden" name="alamat_kota_id" value="{{ $oldKota }}">
                                        @endif
                                        @error('alamat_kota_id')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                        @if ($lockKota)
                                            <div class="readonly-note">Kabupaten / kota dikunci sesuai wilayah user login.</div>
                                        @endif
                                    </div>

                                    <div class="col-12 col-md-3">
                                        <label for="alamat_kecamatan_id" class="form-label">Kecamatan</label>
                                        <select name="{{ $lockKec ? '' : 'alamat_kecamatan_id' }}" id="alamat_kecamatan_id" class="form-select form-select-sm @error('alamat_kecamatan_id') is-invalid @enderror" {{ (!$oldKota || $lockKec) ? 'disabled' : '' }}>
                                            <option value="">-- Pilih Kecamatan --</option>
                                            @foreach ($kecamatans as $kc)
                                                <option value="{{ $kc->id }}" {{ (string)$oldKec === (string)$kc->id ? 'selected' : '' }}>
                                                    {{ $kc->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                        @if ($lockKec)
                                            <input type="hidden" name="alamat_kecamatan_id" value="{{ $oldKec }}">
                                        @endif
                                        @error('alamat_kecamatan_id')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                        @if ($lockKec)
                                            <div class="readonly-note">Kecamatan dikunci sesuai wilayah user login.</div>
                                        @endif
                                    </div>

                                    <div class="col-12 col-md-3">
                                        <label for="alamat_desa_id" class="form-label">Desa / Kelurahan</label>
                                        <select name="{{ $lockDesa ? '' : 'alamat_desa_id' }}" id="alamat_desa_id" class="form-select form-select-sm @error('alamat_desa_id') is-invalid @enderror" {{ (!$oldKec || $lockDesa) ? 'disabled' : '' }}>
                                            <option value="">-- Pilih Desa / Kelurahan --</option>
                                            @foreach ($desas as $d)
                                                <option value="{{ $d->id }}" {{ (string)$oldDesa === (string)$d->id ? 'selected' : '' }}>
                                                    {{ $d->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                        @if ($lockDesa)
                                            <input type="hidden" name="alamat_desa_id" value="{{ $oldDesa }}">
                                        @endif
                                        @error('alamat_desa_id')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="col-12">
                                        <label for="detail_alamat" class="form-label">Detail Alamat</label>
                                        <textarea name="detail_alamat" id="detail_alamat" rows="2" class="form-control form-control-sm @error('detail_alamat') is-invalid @enderror" placeholder="Alamat lengkap (jalan/lorong/RT/RW, dusun, patokan, dll)">{{ old('detail_alamat') }}</textarea>
                                        @error('detail_alamat')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-12">
                            <div class="section-group">
                                <h6 class="section-box-title">Kondisi Tempat Tinggal</h6>

                                <div class="row g-2">
                                    <div class="col-12 col-md-4">
                                        <label for="status_rumah" class="form-label">Status Rumah</label>
                                        <select name="status_rumah" id="status_rumah" class="form-select form-select-sm @error('status_rumah') is-invalid @enderror">
                                            <option value="">-- Pilih --</option>
                                            <option value="M" {{ old('status_rumah') == 'M' ? 'selected' : '' }}>Milik</option>
                                            <option value="S" {{ old('status_rumah') == 'S' ? 'selected' : '' }}>Sewa</option>
                                            <option value="N" {{ old('status_rumah') == 'N' ? 'selected' : '' }}>Menumpang</option>
                                        </select>
                                        @error('status_rumah')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="col-12 col-md-4">
                                        <label for="kondisi_rumah" class="form-label">Kondisi Rumah</label>
                                        <select name="kondisi_rumah" id="kondisi_rumah" class="form-select form-select-sm @error('kondisi_rumah') is-invalid @enderror">
                                            <option value="">-- Pilih --</option>
                                            <option value="L" {{ old('kondisi_rumah') == 'L' ? 'selected' : '' }}>Layak</option>
                                            <option value="T" {{ old('kondisi_rumah') == 'T' ? 'selected' : '' }}>Tidak Layak</option>
                                        </select>
                                        @error('kondisi_rumah')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="col-12 col-md-4">
                                        <label for="status_tanah_pekarangan" class="form-label">Status Tanah Pekarangan</label>
                                        <select name="status_tanah_pekarangan" id="status_tanah_pekarangan" class="form-select form-select-sm @error('status_tanah_pekarangan') is-invalid @enderror">
                                            <option value="">-- Pilih --</option>
                                            <option value="M" {{ old('status_tanah_pekarangan') == 'M' ? 'selected' : '' }}>Milik</option>
                                            <option value="S" {{ old('status_tanah_pekarangan') == 'S' ? 'selected' : '' }}>Sewa / Kontrak</option>
                                            <option value="N" {{ old('status_tanah_pekarangan') == 'N' ? 'selected' : '' }}>Numpang / Lainnya</option>
                                        </select>
                                        @error('status_tanah_pekarangan')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-12">
                            <div class="section-group">
                                <h6 class="section-box-title">Akses Dasar Rumah Tangga</h6>

                                <div class="row g-2">
                                    <div class="col-12 col-md-4">
                                        <label for="akses_listrik" class="form-label">Akses Listrik</label>
                                        <select name="akses_listrik" id="akses_listrik" class="form-select form-select-sm @error('akses_listrik') is-invalid @enderror">
                                            <option value="">-- Pilih --</option>
                                            <option value="Y" {{ old('akses_listrik') == 'Y' ? 'selected' : '' }}>Ada</option>
                                            <option value="T" {{ old('akses_listrik') == 'T' ? 'selected' : '' }}>Tidak Ada</option>
                                        </select>
                                        @error('akses_listrik')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="col-12 col-md-4">
                                        <label for="akses_air_bersih" class="form-label">Akses Air Bersih</label>
                                        <select name="akses_air_bersih" id="akses_air_bersih" class="form-select form-select-sm @error('akses_air_bersih') is-invalid @enderror">
                                            <option value="">-- Pilih --</option>
                                            <option value="Y" {{ old('akses_air_bersih') == 'Y' ? 'selected' : '' }}>Ada</option>
                                            <option value="T" {{ old('akses_air_bersih') == 'T' ? 'selected' : '' }}>Tidak Ada</option>
                                        </select>
                                        @error('akses_air_bersih')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="col-12 col-md-4">
                                        <label for="sanitasi" class="form-label">Sanitasi</label>
                                        <select name="sanitasi" id="sanitasi" class="form-select form-select-sm @error('sanitasi') is-invalid @enderror">
                                            <option value="">-- Pilih --</option>
                                            <option value="L" {{ old('sanitasi') == 'L' ? 'selected' : '' }}>Layak</option>
                                            <option value="T" {{ old('sanitasi') == 'T' ? 'selected' : '' }}>Tidak Layak</option>
                                        </select>
                                        @error('sanitasi')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-12">
                            <div class="section-group">
                                <h6 class="section-box-title">Jaminan & Perlindungan</h6>

                                <div class="row g-2">
                                    <div class="col-12 col-md-4">
                                        <label for="bpjs_kesehatan" class="form-label">BPJS Kesehatan</label>
                                        <select name="bpjs_kesehatan" id="bpjs_kesehatan" class="form-select form-select-sm @error('bpjs_kesehatan') is-invalid @enderror">
                                            <option value="">-- Pilih --</option>
                                            <option value="Y" {{ old('bpjs_kesehatan') == 'Y' ? 'selected' : '' }}>Memiliki</option>
                                            <option value="T" {{ old('bpjs_kesehatan') == 'T' ? 'selected' : '' }}>Tidak Memiliki</option>
                                        </select>
                                        @error('bpjs_kesehatan')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="col-12 col-md-4">
                                        <label for="bpjs_ketenagakerjaan" class="form-label">BPJS Ketenagakerjaan</label>
                                        <select name="bpjs_ketenagakerjaan" id="bpjs_ketenagakerjaan" class="form-select form-select-sm @error('bpjs_ketenagakerjaan') is-invalid @enderror">
                                            <option value="">-- Pilih --</option>
                                            <option value="Y" {{ old('bpjs_ketenagakerjaan') == 'Y' ? 'selected' : '' }}>Memiliki</option>
                                            <option value="T" {{ old('bpjs_ketenagakerjaan') == 'T' ? 'selected' : '' }}>Tidak Memiliki</option>
                                        </select>
                                        @error('bpjs_ketenagakerjaan')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="col-12 col-md-4">
                                        <label for="asuransi_nelayan" class="form-label">Asuransi Nelayan</label>
                                        <select name="asuransi_nelayan" id="asuransi_nelayan" class="form-select form-select-sm @error('asuransi_nelayan') is-invalid @enderror">
                                            <option value="">-- Pilih --</option>
                                            <option value="Y" {{ old('asuransi_nelayan') == 'Y' ? 'selected' : '' }}>Memiliki</option>
                                            <option value="T" {{ old('asuransi_nelayan') == 'T' ? 'selected' : '' }}>Tidak Memiliki</option>
                                        </select>
                                        @error('asuransi_nelayan')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-12">
                            <div class="section-group">
                                <h6 class="section-box-title">Kesehatan & Sosial Ekonomi</h6>

                                <div class="row g-2">
                                    <div class="col-12 col-md-6">
                                        <label for="keanggotaan_koperasi" class="form-label">Keanggotaan Koperasi</label>
                                        <select name="keanggotaan_koperasi" id="keanggotaan_koperasi" class="form-select form-select-sm @error('keanggotaan_koperasi') is-invalid @enderror">
                                            <option value="">-- Pilih --</option>
                                            <option value="Y" {{ old('keanggotaan_koperasi') == 'Y' ? 'selected' : '' }}>Anggota Koperasi</option>
                                            <option value="T" {{ old('keanggotaan_koperasi') == 'T' ? 'selected' : '' }}>Bukan Anggota</option>
                                        </select>
                                        @error('keanggotaan_koperasi')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="col-12 col-md-6">
                                        <label for="kartu_kusuka" class="form-label">Kartu Kusuka</label>
                                        <select name="kartu_kusuka" id="kartu_kusuka" class="form-select form-select-sm @error('kartu_kusuka') is-invalid @enderror">
                                            <option value="">-- Pilih --</option>
                                            <option value="Y" {{ old('kartu_kusuka') == 'Y' ? 'selected' : '' }}>Memiliki</option>
                                            <option value="T" {{ old('kartu_kusuka', 'T') == 'T' ? 'selected' : '' }}>Belum Memiliki</option>
                                        </select>
                                        @error('kartu_kusuka')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="col-12">
                                        <label for="riwayat_penyakit_kecelakaan" class="form-label">Riwayat Penyakit / Kecelakaan</label>
                                        <textarea name="riwayat_penyakit_kecelakaan" id="riwayat_penyakit_kecelakaan" rows="3" class="form-control form-control-sm @error('riwayat_penyakit_kecelakaan') is-invalid @enderror" placeholder="Isi bila ada riwayat penyakit, kecelakaan kerja, atau kondisi kesehatan penting lainnya">{{ old('riwayat_penyakit_kecelakaan') }}</textarea>
                                        @error('riwayat_penyakit_kecelakaan')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-12">
                            <div class="section-group">
                                <h6 class="section-box-title">Akses Login</h6>

                                <div class="row g-2">
                                    <div class="col-12 col-md-6">
                                        <label for="password" class="form-label">Password Login <span class="required-star">*</span></label>
                                        <input type="password" name="password" id="password" class="form-control form-control-sm @error('password') is-invalid @enderror" required>
                                        @error('password')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                        <div class="form-text">Minimal 6 karakter.</div>
                                    </div>

                                    <div class="col-12 col-md-6">
                                        <label for="role" class="form-label">Role Login <span class="required-star">*</span></label>
                                        <select name="role" id="role" class="form-select form-select-sm @error('role') is-invalid @enderror" required>
                                            <option value="">-- Pilih Role --</option>
                                            @foreach ($selectableRoles as $r)
                                                <option value="{{ $r }}" {{ old('role') == $r ? 'selected' : '' }}>
                                                    {{ $roleLabels[$r] ?? $r }}
                                                </option>
                                            @endforeach
                                        </select>
                                        @error('role')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                        <div class="form-text">Role ditampilkan sesuai hak akses akun yang sedang login.</div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-12 d-flex justify-content-between mt-1">
                            <a href="{{ route('anggota.index') }}" class="btn btn-outline-secondary btn-sm">
                                <i class="bi bi-arrow-left"></i> Kembali
                            </a>

                            <button type="submit" class="btn btn-primary btn-sm">
                                <i class="bi bi-save"></i> Simpan Anggota
                            </button>
                        </div>
                    </form>
                </div>
            </div>

        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    const URL_KOTA = @json(url('api/get-kota'));
    const URL_KEC  = @json(url('api/get-kecamatan'));
    const URL_DESA = @json(url('api/get-desa'));

    const roleLogin = @json($loginRoleNorm);

    const oldProv = @json($oldProv);
    const oldKota = @json($oldKota);
    const oldKec  = @json($oldKec);
    const oldDesa = @json($oldDesa);

    const elProv = document.getElementById('alamat_provinsi_id');
    const elKota = document.getElementById('alamat_kota_id');
    const elKec  = document.getElementById('alamat_kecamatan_id');
    const elDesa = document.getElementById('alamat_desa_id');

    let lockProv = false;
    let lockKota = false;
    let lockKec  = false;
    let lockDesa = false;

    if (['dpd_pengurus', 'dpd_operator'].includes(roleLogin)) {
        lockProv = true;
    }

    if (['dpc_pengurus', 'dpc_operator'].includes(roleLogin)) {
        lockProv = true;
        lockKota = true;
    }

    if (['ranting_pengurus', 'ranting_operator'].includes(roleLogin)) {
        lockProv = true;
        lockKota = true;
        lockKec  = true;
    }

    if (roleLogin === 'anggota') {
        lockProv = true;
        lockKota = true;
        lockKec  = true;
        lockDesa = true;
    }

    function resetSelect(el, placeholder, disabled = true) {
        if (!el) return;
        el.innerHTML = '';
        const opt = document.createElement('option');
        opt.value = '';
        opt.textContent = placeholder;
        el.appendChild(opt);
        el.disabled = disabled;
    }

    async function fetchJson(url) {
        const res = await fetch(url, {
            headers: { 'Accept': 'application/json' }
        });
        if (!res.ok) throw new Error(`HTTP ${res.status}`);
        return await res.json();
    }

    function appendOptions(el, data, selectedId) {
        if (!el || !Array.isArray(data)) return;
        data.forEach(item => {
            const opt = document.createElement('option');
            opt.value = item.id;
            opt.textContent = item.name;
            if (selectedId !== null && selectedId !== undefined && String(item.id) === String(selectedId)) {
                opt.selected = true;
            }
            el.appendChild(opt);
        });
    }

    function applyLocks() {
        if (elProv) {
            elProv.disabled = lockProv;
        }

        if (elKota) {
            if (lockKota) {
                elKota.disabled = true;
            } else {
                elKota.disabled = !elProv || !elProv.value;
            }
        }

        if (elKec) {
            if (lockKec) {
                elKec.disabled = true;
            } else {
                elKec.disabled = !elKota || !elKota.value;
            }
        }

        if (elDesa) {
            if (lockDesa) {
                elDesa.disabled = true;
            } else {
                elDesa.disabled = !elKec || !elKec.value;
            }
        }
    }

    async function loadKota(provId, selectedId = null) {
        resetSelect(elKota, '-- Pilih Kabupaten / Kota --', true);
        resetSelect(elKec, '-- Pilih Kecamatan --', true);
        resetSelect(elDesa, '-- Pilih Desa / Kelurahan --', true);

        if (!provId) {
            applyLocks();
            return;
        }

        const data = await fetchJson(`${URL_KOTA}/${provId}`);
        resetSelect(elKota, '-- Pilih Kabupaten / Kota --', lockKota ? true : false);
        appendOptions(elKota, data, selectedId);
        applyLocks();
    }

    async function loadKecamatan(kotaId, selectedId = null) {
        resetSelect(elKec, '-- Pilih Kecamatan --', true);
        resetSelect(elDesa, '-- Pilih Desa / Kelurahan --', true);

        if (!kotaId) {
            applyLocks();
            return;
        }

        const data = await fetchJson(`${URL_KEC}/${kotaId}`);
        resetSelect(elKec, '-- Pilih Kecamatan --', lockKec ? true : false);
        appendOptions(elKec, data, selectedId);
        applyLocks();
    }

    async function loadDesa(kecId, selectedId = null) {
        resetSelect(elDesa, '-- Pilih Desa / Kelurahan --', true);

        if (!kecId) {
            applyLocks();
            return;
        }

        const data = await fetchJson(`${URL_DESA}/${kecId}`);
        resetSelect(elDesa, '-- Pilih Desa / Kelurahan --', lockDesa ? true : false);
        appendOptions(elDesa, data, selectedId);
        applyLocks();
    }

    (async () => {
        try {
            if (oldProv && !lockKota && !lockKec) {
                if (elProv) elProv.value = oldProv;
                await loadKota(oldProv, oldKota);

                if (oldKota) {
                    await loadKecamatan(oldKota, oldKec);

                    if (oldKec) {
                        await loadDesa(oldKec, oldDesa);
                    }
                }
            } else if (oldKec && !lockDesa) {
                await loadDesa(oldKec, oldDesa);
            }
        } catch (e) {
            console.error('Gagal init wilayah:', e);
        } finally {
            applyLocks();
        }
    })();

    if (!lockProv) {
        elProv?.addEventListener('change', async function () {
            try {
                await loadKota(this.value, null);
            } catch (e) {
                console.error(e);
                resetSelect(elKota, '-- Gagal load Kabupaten/Kota --', true);
                resetSelect(elKec, '-- Pilih Kecamatan --', true);
                resetSelect(elDesa, '-- Pilih Desa / Kelurahan --', true);
                applyLocks();
            }
        });
    }

    if (!lockKota) {
        elKota?.addEventListener('change', async function () {
            try {
                await loadKecamatan(this.value, null);
            } catch (e) {
                console.error(e);
                resetSelect(elKec, '-- Gagal load Kecamatan --', true);
                resetSelect(elDesa, '-- Pilih Desa / Kelurahan --', true);
                applyLocks();
            }
        });
    }

    if (!lockKec) {
        elKec?.addEventListener('change', async function () {
            try {
                await loadDesa(this.value, null);
            } catch (e) {
                console.error(e);
                resetSelect(elDesa, '-- Gagal load Desa/Kelurahan --', true);
                applyLocks();
            }
        });
    }
});
</script>
@endpush