@extends('admin.layout.content')

@section('content')
    <div class="content-manager-container px-3 py-4">

        {{-- Notifikasi Flash Message Sukses / Gagal --}}
        @if (session('success'))
            <div class="alert alert-success alert-dismissible fade show flash-alert" role="alert">
                <i class="material-symbols-outlined align-middle me-1">check_circle</i> {{ session('success') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        @endif

        @if (session('error'))
            <div class="alert alert-danger alert-dismissible fade show flash-alert" role="alert">
                <i class="material-symbols-outlined align-middle me-1">error</i> {{ session('error') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        @endif

        {{-- Alert Menampilkan Error Validasi Input Form --}}
        @if ($errors->any())
            <div class="alert alert-danger alert-dismissible fade show flash-alert" role="alert">
                <strong class="d-block mb-1">Periksa kembali isian Anda:</strong>
                <ul class="mb-0 ps-3">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        @endif

        <div
            class="d-flex flex-column flex-md-row justify-content-between align-items-start align-items-md-center gap-3 mb-4">
            <div>
                <h2 class="content-manager-title h3 mb-1">Manajemen Alamat Pembeli</h2>
                <p class="text-muted mb-0">Kelola data alamat pengiriman milik para pembeli di sistem.</p>
            </div>
            {{-- Trigger Modal Tambah --}}
            <button class="btn-add-content d-inline-flex align-items-center gap-2 shadow-sm" data-bs-toggle="modal"
                data-bs-target="#modalCreate">
                <span class="material-symbols-outlined">add</span>
                Tambah Alamat
            </button>
        </div>

        <div class="content-manager-card">

            <div
                class="content-filter-bar d-flex flex-column flex-sm-row-reverse justify-content-between align-items-stretch align-items-sm-center gap-3">
                <div class="search-box-wrapper">
                    <span class="material-symbols-outlined">search</span>
                    <input type="text" id="search-input" class="form-control search-box-input" placeholder="Cari...">
                </div>

                <div class="d-flex align-items-center gap-2">
                    <span class="text-muted small text-nowrap">Tampilkan:</span>
                    <div class="dropdown show-entries-wrapper position-relative">
                        <button
                            class="btn dropdown-toggle dropdown-toggle-select d-flex align-items-center justify-content-between"
                            type="button" id="entriesDropdown" data-bs-toggle="dropdown" aria-expanded="false">
                            <span id="selected-entry-value">10</span>
                        </button>
                        <ul class="dropdown-menu dropdown-menu-entries" aria-labelledby="entriesDropdown">
                            <li><a class="dropdown-item active" href="#" data-value="10">10</a></li>
                            <li><a class="dropdown-item" href="#" data-value="25">25</a></li>
                            <li><a class="dropdown-item" href="#" data-value="50">50</a></li>
                        </ul>
                    </div>
                </div>
            </div>

            <div class="table-responsive">
                <table id="address-table" class="table content-data-table mb-0 align-middle">
                    <thead>
                        <tr>
                            <th style="width: 60px;">No</th>
                            <th>Pemilik</th>
                            <th>Label Alamat</th>
                            <th>Nama Penerima</th>
                            <th>Kota</th>
                            <th class="text-center" style="width: 100px;">Utama</th>
                            <th class="text-center" style="width: 140px;">Aksi</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($addresses as $index => $address)
                            <tr class="address-row">
                                <td class="row-index-number" data-origin-index="{{ $index + 1 }}">{{ $index + 1 }}</td>
                                <td>
                                    <span class="content-item-name fw-semibold">
                                        {{ $address->user?->username ?? '-' }}
                                    </span>
                                    <small class="d-block text-muted" style="font-size:0.75rem;">
                                        {{ $address->user?->email ?? '' }}
                                    </small>
                                </td>
                                <td>
                                    <span class="badge"
                                        style="background-color:#f0fdf4; color:#166534; border:1px solid #bbf7d0; font-size:0.78rem; padding:4px 10px; border-radius:8px;">
                                        {{ $address->address_label }}
                                    </span>
                                </td>
                                <td>{{ $address->recipient_name }}</td>
                                <td>{{ $address->city }}, {{ $address->province }}</td>
                                <td class="text-center">
                                    @if ($address->is_primary)
                                        <span class="badge"
                                            style="background-color:#ecfdf5; color:#059669; border:1px solid #6ee7b7; font-size:0.75rem; padding:3px 10px; border-radius:20px;">
                                            <span class="material-symbols-outlined align-middle"
                                                style="font-size:13px;">star</span> Utama
                                        </span>
                                    @else
                                        <span class="text-muted small">—</span>
                                    @endif
                                </td>
                                <td class="text-end">
                                    <div class="d-inline-flex gap-1">
                                        {{-- Tombol Detail --}}
                                        <button class="btn-table-action btn-action-view" title="Detail"
                                            data-bs-toggle="modal" data-bs-target="#modalShow"
                                            data-id="{{ $address->address_id }}"
                                            data-user="{{ $address->user?->username ?? '-' }}"
                                            data-email="{{ $address->user?->email ?? '-' }}"
                                            data-label="{{ $address->address_label }}"
                                            data-recipient="{{ $address->recipient_name }}"
                                            data-phone="{{ $address->recipient_phone }}"
                                            data-full-address="{{ $address->full_address }}"
                                            data-province="{{ $address->province }}"
                                            data-city="{{ $address->city }}"
                                            data-district="{{ $address->district }}"
                                            data-village="{{ $address->village }}"
                                            data-postal="{{ $address->postal_code }}"
                                            data-primary="{{ $address->is_primary ? '1' : '0' }}">
                                            <span class="material-symbols-outlined">visibility</span>
                                        </button>
                                        {{-- Tombol Edit --}}
                                        <button class="btn-table-action btn-action-edit" title="Edit"
                                            data-bs-toggle="modal" data-bs-target="#modalEdit"
                                            data-id="{{ $address->address_id }}"
                                            data-user-id="{{ $address->user_id }}"
                                            data-label="{{ $address->address_label }}"
                                            data-recipient="{{ $address->recipient_name }}"
                                            data-phone="{{ $address->recipient_phone }}"
                                            data-full-address="{{ $address->full_address }}"
                                            data-province="{{ $address->province }}"
                                            data-city="{{ $address->city }}"
                                            data-district="{{ $address->district }}"
                                            data-village="{{ $address->village }}"
                                            data-postal="{{ $address->postal_code }}"
                                            data-primary="{{ $address->is_primary ? '1' : '0' }}">
                                            <span class="material-symbols-outlined">edit</span>
                                        </button>
                                        {{-- Tombol Hapus --}}
                                        <button class="btn-table-action btn-action-delete" title="Hapus"
                                            data-bs-toggle="modal" data-bs-target="#modalDelete"
                                            data-id="{{ $address->address_id }}"
                                            data-name="{{ $address->address_label }} - {{ $address->recipient_name }}">
                                            <span class="material-symbols-outlined">delete</span>
                                        </button>
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr class="empty-row">
                                <td colspan="7" class="text-center text-muted py-4">Belum ada data alamat yang
                                    tersedia.</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            <div
                class="content-pagination-bar d-flex flex-column flex-sm-row justify-content-between align-items-center gap-3">
                <p class="pagination-summary"></p>
                <nav class="d-flex align-items-center">
                    {{-- Navigasi dinamis --}}
                </nav>
            </div>

        </div>
    </div>

    {{-- ==================== MODAL TAMBAH (CREATE) ==================== --}}
    <div class="modal fade modal-modern" id="modalCreate" data-bs-backdrop="static" tabindex="-1"
        aria-labelledby="modalCreateLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-fullscreen-sm-down mx-auto px-2" style="max-width: 580px;">
            <div class="modal-content border-0 shadow">
                <form action="{{ route('admin.buyer-addresses.store') }}" method="POST">
                    @csrf
                    <div class="modal-header d-flex align-items-center justify-content-between border-0 pb-0 pt-4 px-4">
                        <div class="d-flex align-items-center gap-3">
                            <div
                                class="icon-circle-wrapper bg-emerald-light border border-emerald-light text-success-dark flex-shrink-0">
                                <span class="material-symbols-outlined"
                                    style="font-size: 22px; color: #10b981;">add_location_alt</span>
                            </div>
                            <div>
                                <h5 class="modal-title fw-bold text-slate-800 mb-0" id="modalCreateLabel"
                                    style="font-size: 1.1rem; line-height: 1.2;">Tambah Alamat</h5>
                                <small class="text-muted d-block mt-1" style="font-size: 0.78rem;">Daftarkan alamat
                                    pengiriman baru ke sistem</small>
                            </div>
                        </div>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body p-4">
                        <div class="mb-3">
                            <label class="form-label fw-semibold text-secondary small">PENGGUNA <span
                                    class="text-danger">*</span></label>
                            <select name="user_id" class="form-select form-modern-input w-100" required>
                                <option value="">-- Pilih Pengguna --</option>
                                @foreach ($users as $user)
                                    <option value="{{ $user->user_id }}"
                                        {{ old('user_id') == $user->user_id ? 'selected' : '' }}>
                                        {{ $user->username }} ({{ $user->email }})
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="row g-3 mb-3">
                            <div class="col-sm-6">
                                <label class="form-label fw-semibold text-secondary small">LABEL ALAMAT <span
                                        class="text-danger">*</span></label>
                                <select name="address_label" id="create-label"
                                    class="form-select form-modern-input w-100" required>
                                    <option value="">-- Pilih Label Alamat --</option>
                                    <option value="Rumah" {{ old('address_label') === 'Rumah' ? 'selected' : '' }}>Rumah</option>
                                    <option value="Kantor" {{ old('address_label') === 'Kantor' ? 'selected' : '' }}>Kantor</option>
                                    <option value="Kosan" {{ old('address_label') === 'Kosan' ? 'selected' : '' }}>Kosan</option>
                                </select>
                            </div>
                            <div class="col-sm-6">
                                <label class="form-label fw-semibold text-secondary small">NOMOR TELEPON <span
                                        class="text-danger">*</span></label>
                                <input type="text" name="recipient_phone" class="form-control form-modern-input w-100"
                                    value="{{ old('recipient_phone') }}" required placeholder="08xxxxxxxxxx" data-validate="phone">
                            </div>
                        </div>
                        <div class="mb-3">
                            <label class="form-label fw-semibold text-secondary small">NAMA PENERIMA <span
                                    class="text-danger">*</span></label>
                            <input type="text" name="recipient_name" class="form-control form-modern-input w-100"
                                value="{{ old('recipient_name') }}" required placeholder="Nama lengkap penerima">
                        </div>
                        <div class="mb-3">
                            <label class="form-label fw-semibold text-secondary small">ALAMAT LENGKAP <span
                                    class="text-danger">*</span></label>
                            <textarea name="full_address" id="create-address-detail"
                                class="form-control form-modern-input w-100" rows="2" required
                                placeholder="Jalan, nomor rumah, RT/RW, dll.">{{ old('full_address') }}</textarea>
                            <input type="hidden" name="full_address_copy" id="create-full-address"
                                value="{{ old('full_address') }}">
                        </div>
                        <div class="row g-3 mb-3">
                            <div class="col-sm-6">
                                <label class="form-label fw-semibold text-secondary small">PROVINSI <span
                                        class="text-danger">*</span></label>
                                <select name="province" id="create-province" class="form-select form-modern-input w-100 no-tomselect"
                                    required>
                                    <option value="">-- Pilih Provinsi --</option>
                                </select>
                            </div>
                            <div class="col-sm-6">
                                <label class="form-label fw-semibold text-secondary small">KOTA/KABUPATEN <span
                                        class="text-danger">*</span></label>
                                <select name="city" id="create-city" class="form-select form-modern-input w-100 no-tomselect" required
                                    disabled>
                                    <option value="">-- Pilih Kota/Kabupaten --</option>
                                </select>
                            </div>
                        </div>
                        <div class="row g-3 mb-3">
                            <div class="col-sm-6">
                                <label class="form-label fw-semibold text-secondary small">KECAMATAN <span
                                        class="text-danger">*</span></label>
                                <select name="district" id="create-district" class="form-select form-modern-input w-100 no-tomselect"
                                    required disabled>
                                    <option value="">-- Pilih Kecamatan --</option>
                                </select>
                            </div>
                            <div class="col-sm-6">
                                <label class="form-label fw-semibold text-secondary small">DESA / KELURAHAN <span
                                        class="text-danger">*</span></label>
                                <select name="village" id="create-village" class="form-select form-modern-input w-100 no-tomselect"
                                    required disabled>
                                    <option value="">-- Pilih Desa / Kelurahan --</option>
                                </select>
                            </div>
                        </div>
                        <div class="row g-3 mb-3">
                            <div class="col-sm-6">
                                <label class="form-label fw-semibold text-secondary small">KODE POS <span
                                        class="text-danger">*</span></label>
                                <input type="text" name="postal_code" class="form-control form-modern-input w-100"
                                    value="{{ old('postal_code') }}" required placeholder="40132">
                            </div>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" name="is_primary" value="1"
                                id="create-is-primary" {{ old('is_primary') ? 'checked' : '' }}>
                            <label class="form-check-label fw-semibold text-secondary small" for="create-is-primary">
                                Jadikan sebagai alamat utama
                            </label>
                        </div>
                    </div>
                    <div class="modal-footer border-0 pt-0 p-4 d-flex justify-content-end gap-2">
                        <button type="button" class="btn btn-modern-secondary px-4"
                            data-bs-dismiss="modal">Batal</button>
                        <button type="submit" class="btn btn-modern-primary px-4">Simpan Alamat</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    {{-- ==================== MODAL DETAIL (SHOW) ==================== --}}
    <div class="modal fade modal-modern" id="modalShow" tabindex="-1" aria-labelledby="modalShowLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-fullscreen-sm-down mx-auto px-2" style="max-width: 560px;">
            <div class="modal-content border-0 shadow">
                <div class="modal-header d-flex align-items-center justify-content-between border-0 pb-0 pt-4 px-4">
                    <div class="d-flex align-items-center gap-3">
                        <div class="icon-circle-wrapper bg-emerald-light border border-emerald-light flex-shrink-0">
                            <span class="material-symbols-outlined"
                                style="font-size: 22px; color: #10b981;">location_on</span>
                        </div>
                        <div>
                            <h5 class="modal-title fw-bold text-slate-800 mb-0" id="modalShowLabel"
                                style="font-size: 1.1rem; line-height: 1.2;">Detail Alamat</h5>
                            <small class="text-muted d-block mt-1" style="font-size: 0.78rem;">Informasi lengkap data
                                alamat</small>
                        </div>
                    </div>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body p-4">
                    <div class="d-flex flex-column gap-3 py-1">

                        {{-- Badge Utama --}}
                        <div id="show-primary-badge" class="d-none">
                            <span style="display:inline-flex; align-items:center; gap:5px; background-color:#f0fdf4; color:#059669; border:1px solid #6ee7b7; font-size:0.8rem; padding:5px 14px; border-radius:20px; font-weight:600;">
                                <span class="material-symbols-outlined" style="font-size:15px;">star</span>
                                Alamat Utama
                            </span>
                        </div>

                        <div class="row g-3">
                            <div class="col-12">
                                <div class="p-3 rounded-3" style="background-color: #f8fafc; border: 1px solid #f1f5f9;">
                                    <span class="d-block text-secondary fw-semibold small mb-1">PEMILIK ALAMAT</span>
                                    <span id="show-user" class="fw-bold text-slate-800 style-word-break"></span>
                                    <small id="show-email" class="d-block text-muted mt-1"></small>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="p-3 rounded-3" style="background-color: #f8fafc; border: 1px solid #f1f5f9;">
                                    <span class="d-block text-secondary fw-semibold small mb-1">LABEL ALAMAT</span>
                                    <span id="show-label" class="fw-semibold text-slate-800 style-word-break"></span>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="p-3 rounded-3" style="background-color: #f8fafc; border: 1px solid #f1f5f9;">
                                    <span class="d-block text-secondary fw-semibold small mb-1">NAMA PENERIMA</span>
                                    <span id="show-recipient" class="fw-semibold text-slate-800 style-word-break"></span>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="p-3 rounded-3" style="background-color: #f8fafc; border: 1px solid #f1f5f9;">
                                    <span class="d-block text-secondary fw-semibold small mb-1">NOMOR TELEPON</span>
                                    <span id="show-phone" class="fw-semibold text-slate-800"></span>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="p-3 rounded-3" style="background-color: #f8fafc; border: 1px solid #f1f5f9;">
                                    <span class="d-block text-secondary fw-semibold small mb-1">KODE POS</span>
                                    <span id="show-postal" class="fw-semibold text-slate-800"></span>
                                </div>
                            </div>
                            <div class="col-12">
                                <div class="p-3 rounded-3" style="background-color: #f8fafc; border: 1px solid #f1f5f9;">
                                    <span class="d-block text-secondary fw-semibold small mb-1">ALAMAT LENGKAP</span>
                                    <span id="show-full-address" class="text-slate-600 style-word-break" style="font-size:0.95rem;"></span>
                                </div>
                            </div>
                            <div class="col-sm-3">
                                <div class="p-3 rounded-3" style="background-color: #f8fafc; border: 1px solid #f1f5f9;">
                                    <span class="d-block text-secondary fw-semibold small mb-1">KECAMATAN</span>
                                    <span id="show-district" class="fw-semibold text-slate-800"></span>
                                </div>
                            </div>
                            <div class="col-sm-3">
                                <div class="p-3 rounded-3" style="background-color: #f8fafc; border: 1px solid #f1f5f9;">
                                    <span class="d-block text-secondary fw-semibold small mb-1">KOTA</span>
                                    <span id="show-city" class="fw-semibold text-slate-800"></span>
                                </div>
                            </div>
                            <div class="col-sm-3">
                                <div class="p-3 rounded-3" style="background-color: #f8fafc; border: 1px solid #f1f5f9;">
                                    <span class="d-block text-secondary fw-semibold small mb-1">PROVINSI</span>
                                    <span id="show-province" class="fw-semibold text-slate-800"></span>
                                </div>
                            </div>
                            <div class="col-sm-3">
                                <div class="p-3 rounded-3" style="background-color: #f8fafc; border: 1px solid #f1f5f9;">
                                    <span class="d-block text-secondary fw-semibold small mb-1">DESA / KELURAHAN</span>
                                    <span id="show-village" class="fw-semibold text-slate-800"></span>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
                <div class="modal-footer border-0 pt-0 p-4">
                    <button type="button" class="btn btn-modern-secondary w-100"
                        data-bs-dismiss="modal">Tutup</button>
                </div>
            </div>
        </div>
    </div>

    {{-- ==================== MODAL EDIT (UPDATE) ==================== --}}
    <div class="modal fade modal-modern" id="modalEdit" data-bs-backdrop="static" tabindex="-1"
        aria-labelledby="modalEditLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-fullscreen-sm-down mx-auto px-2" style="max-width: 580px;">
            <div class="modal-content border-0 shadow">
                <form id="form-edit" method="POST">
                    @csrf
                    @method('PUT')
                    <div class="modal-header d-flex align-items-center justify-content-between border-0 pb-0 pt-4 px-4">
                        <div class="d-flex align-items-center gap-3">
                            <div class="icon-circle-wrapper bg-emerald-light border border-emerald-light flex-shrink-0">
                                <span class="material-symbols-outlined"
                                    style="font-size: 22px; color: #10b981;">edit_location_alt</span>
                            </div>
                            <div>
                                <h5 class="modal-title fw-bold text-slate-800 mb-0" id="modalEditLabel"
                                    style="font-size: 1.1rem; line-height: 1.2;">Perbarui Alamat</h5>
                                <small class="text-muted d-block mt-1" style="font-size: 0.78rem;">Modifikasi rincian
                                    alamat terpilih</small>
                            </div>
                        </div>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body p-4">
                        <div class="mb-3">
                            <label class="form-label fw-semibold text-secondary small">PENGGUNA <span
                                    class="text-danger">*</span></label>
                            <select name="user_id" id="edit-user-id" class="form-select form-modern-input w-100"
                                required>
                                <option value="">-- Pilih Pengguna --</option>
                                @foreach ($users as $user)
                                    <option value="{{ $user->user_id }}">
                                        {{ $user->username }} ({{ $user->email }})
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="row g-3 mb-3">
                            <div class="col-sm-6">
                                <label class="form-label fw-semibold text-secondary small">LABEL ALAMAT <span
                                        class="text-danger">*</span></label>
                                <select name="address_label" id="edit-label" class="form-select form-modern-input w-100"
                                    required>
                                    <option value="">-- Pilih Label Alamat --</option>
                                    <option value="Rumah">Rumah</option>
                                    <option value="Kantor">Kantor</option>
                                    <option value="Kosan">Kosan</option>
                                </select>
                            </div>
                            <div class="col-sm-6">
                                <label class="form-label fw-semibold text-secondary small">NOMOR TELEPON <span
                                        class="text-danger">*</span></label>
                                <input type="text" name="recipient_phone" id="edit-phone"
                                    class="form-control form-modern-input w-100" required data-validate="phone" placeholder="08xxxxxxxxxx">
                            </div>
                        </div>
                        <div class="mb-3">
                            <label class="form-label fw-semibold text-secondary small">NAMA PENERIMA <span
                                    class="text-danger">*</span></label>
                            <input type="text" name="recipient_name" id="edit-recipient"
                                class="form-control form-modern-input w-100" required>
                        </div>
                        <div class="mb-3">
                            <label class="form-label fw-semibold text-secondary small">ALAMAT LENGKAP <span
                                    class="text-danger">*</span></label>
                            <textarea name="full_address" id="edit-address-detail"
                                class="form-control form-modern-input w-100" rows="2" required></textarea>
                            <input type="hidden" name="full_address_copy" id="edit-full-address">
                        </div>
                        <div class="row g-3 mb-3">
                            <div class="col-sm-6">
                                <label class="form-label fw-semibold text-secondary small">PROVINSI <span
                                        class="text-danger">*</span></label>
                                <select name="province" id="edit-province" class="form-select form-modern-input w-100 no-tomselect"
                                    required>
                                    <option value="">-- Pilih Provinsi --</option>
                                </select>
                            </div>
                            <div class="col-sm-6">
                                <label class="form-label fw-semibold text-secondary small">KOTA/KABUPATEN <span
                                        class="text-danger">*</span></label>
                                <select name="city" id="edit-city" class="form-select form-modern-input w-100 no-tomselect" required
                                    disabled>
                                    <option value="">-- Pilih Kota/Kabupaten --</option>
                                </select>
                            </div>
                        </div>
                        <div class="row g-3 mb-3">
                            <div class="col-sm-6">
                                <label class="form-label fw-semibold text-secondary small">KECAMATAN <span
                                        class="text-danger">*</span></label>
                                <select name="district" id="edit-district" class="form-select form-modern-input w-100 no-tomselect"
                                    required disabled>
                                    <option value="">-- Pilih Kecamatan --</option>
                                </select>
                            </div>
                            <div class="col-sm-6">
                                <label class="form-label fw-semibold text-secondary small">DESA / KELURAHAN <span
                                        class="text-danger">*</span></label>
                                <select name="village" id="edit-village" class="form-select form-modern-input w-100 no-tomselect"
                                    required disabled>
                                    <option value="">-- Pilih Desa / Kelurahan --</option>
                                </select>
                            </div>
                        </div>
                        <div class="row g-3 mb-3">
                            <div class="col-sm-6">
                                <label class="form-label fw-semibold text-secondary small">KODE POS <span
                                        class="text-danger">*</span></label>
                                <input type="text" name="postal_code" id="edit-postal"
                                    class="form-control form-modern-input w-100" required>
                            </div>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" name="is_primary" value="1"
                                id="edit-is-primary">
                            <label class="form-check-label fw-semibold text-secondary small" for="edit-is-primary">
                                Jadikan sebagai alamat utama
                            </label>
                        </div>
                    </div>
                    <div class="modal-footer border-0 pt-0 p-4 d-flex justify-content-end gap-2">
                        <button type="button" class="btn btn-modern-secondary px-4"
                            data-bs-dismiss="modal">Batal</button>
                        <button type="submit" class="btn btn-modern-primary px-4">Simpan Perubahan</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    {{-- ==================== MODAL HAPUS (DELETE) ==================== --}}
    <div class="modal fade modal-modern" id="modalDelete" tabindex="-1" aria-labelledby="modalDeleteLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered mx-auto px-3" style="max-width: 400px;">
            <div class="modal-content border-0 shadow">
                <form id="form-delete" method="POST">
                    @csrf
                    @method('DELETE')
                    <div class="modal-body text-center p-4 pt-5">
                        <div class="icon-circle-wrapper bg-danger-subtle text-danger mx-auto mb-3 flex-shrink-0"
                            style="width: 56px; height: 56px; background-color: #fef2f2;">
                            <span class="material-symbols-outlined"
                                style="font-size: 28px; color: #ef4444;">delete_forever</span>
                        </div>
                        <h5 class="fw-bold text-slate-800 mb-2" style="font-size: 1.15rem;">Hapus Data Alamat?</h5>
                        <p class="text-secondary mb-0 small px-1">Tindakan ini tidak dapat dibatalkan. Anda akan
                            menghapus alamat secara permanen:</p>
                        <div class="mt-3 p-2 rounded-3 font-monospace fw-bold text-danger bg-light style-word-break"
                            id="delete-name"
                            style="font-size: 1.05rem; background-color: #fff5f5 !important; border: 1px dashed #fca5a5;">
                        </div>
                    </div>
                    <div class="modal-footer bg-white border-0 d-flex gap-2 p-4 pt-0 justify-content-center">
                        <button type="button" class="btn btn-modern-secondary px-4 m-0 w-50"
                            data-bs-dismiss="modal" style="padding: 0.6rem;">Batal</button>
                        <button type="submit" class="btn btn-danger px-4 m-0 w-50"
                            style="background-color: #ef4444; border: none; border-radius: 10px; font-weight: 500; padding: 0.6rem;">Ya,
                            Hapus</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    {{-- JAVASCRIPT: Logic Utama --}}
    <script>
        document.addEventListener('DOMContentLoaded', function() {

            const wilayahRoutes = {
                provinces: @json(route('admin.wilayah.provinces', ['code' => session('admin_route_code')])),
                regencies: @json(route('admin.wilayah.regencies', ['code' => session('admin_route_code'), 'provinceCode' => '__CODE__'])),
                districts: @json(route('admin.wilayah.districts', ['code' => session('admin_route_code'), 'regencyCode' => '__CODE__'])),
                villages:  @json(route('admin.wilayah.villages',  ['code' => session('admin_route_code'), 'districtCode' => '__CODE__'])),
            };

            const oldCreateValues = {
                province: @json(old('province')),
                city: @json(old('city')),
                district: @json(old('district')),
                village: @json(old('village')),
                fullAddress: @json(old('full_address')),
            };

            const createProvince = document.getElementById('create-province');
            const createCity = document.getElementById('create-city');
            const createDistrict = document.getElementById('create-district');
            const createVillage = document.getElementById('create-village');
            const createAddressDetail = document.getElementById('create-address-detail');
            const createFullAddress = document.getElementById('create-full-address');

            const editForm = document.getElementById('form-edit');
            const editProvince = document.getElementById('edit-province');
            const editCity = document.getElementById('edit-city');
            const editDistrict = document.getElementById('edit-district');
            const editVillage = document.getElementById('edit-village');
            const editAddressDetail = document.getElementById('edit-address-detail');
            const editFullAddress = document.getElementById('edit-full-address');

            function buildWilayahUrl(template, code) {
                return template.replace('__CODE__', encodeURIComponent(code));
            }

            function normalizeText(value) {
                return (value || '').toString().trim().toLowerCase();
            }

            function splitFullAddress(fullAddress) {
                const value = (fullAddress || '').trim();
                const marker = '\nDesa:';
                const markerIndex = value.toLowerCase().lastIndexOf(marker.toLowerCase());

                if (markerIndex !== -1) {
                    return {
                        detail: value.slice(0, markerIndex).trim(),
                        village: value.slice(markerIndex + marker.length).trim(),
                    };
                }

                return {
                    detail: value,
                    village: '',
                };
            }

            function composeFullAddress(detail, village) {
                const cleanDetail = (detail || '').trim();
                const cleanVillage = (village || '').trim();

                if (!cleanVillage) {
                    return cleanDetail;
                }

                return `${cleanDetail}${cleanDetail ? '\n' : ''}Desa: ${cleanVillage}`;
            }

            function setSelectPlaceholder(selectElement, placeholder, disabled = true) {
                if (!selectElement) {
                    return;
                }

                selectElement.innerHTML = `<option value="">${placeholder}</option>`;
                selectElement.disabled = disabled;
                selectElement.value = '';
                
                if (selectElement.tomselect) {
                    selectElement.tomselect.sync();
                    if (disabled) {
                        selectElement.tomselect.disable();
                    } else {
                        selectElement.tomselect.enable();
                    }
                }
            }

            async function fetchWilayahItems(url) {
                const response = await fetch(url, {
                    headers: {
                        Accept: 'application/json',
                    },
                });

                if (!response.ok) {
                    throw new Error('Gagal memuat data wilayah.');
                }

                const payload = await response.json();
                return Array.isArray(payload.data) ? payload.data : [];
            }

            async function populateSelect(selectElement, url, placeholder, selectedName = '') {
                if (!selectElement) {
                    return '';
                }

                setSelectPlaceholder(selectElement, placeholder, true);

                let items = [];
                try {
                    items = await fetchWilayahItems(url);
                } catch (error) {
                    console.error(error);
                    return '';
                }

                let selectedValue = '';
                const fragment = document.createDocumentFragment();

                items.forEach(function(item) {
                    const option = document.createElement('option');
                    option.value = item.code;
                    option.textContent = item.name;
                    fragment.appendChild(option);

                    if (normalizeText(item.name) === normalizeText(selectedName)) {
                        selectedValue = item.code;
                    }
                });

                selectElement.appendChild(fragment);
                selectElement.disabled = items.length === 0;

                if (selectedValue) {
                    selectElement.value = selectedValue;
                }

                if (selectElement.tomselect) {
                    selectElement.tomselect.sync();
                    if (selectElement.disabled) {
                        selectElement.tomselect.disable();
                    } else {
                        selectElement.tomselect.enable();
                    }
                }

                return selectedValue;
            }

            function getSelectedText(selectElement) {
                if (!selectElement || !selectElement.selectedOptions.length) {
                    return '';
                }

                return selectElement.selectedOptions[0].textContent.trim();
            }

            function syncCreateFullAddress() {
                if (!createAddressDetail || !createFullAddress) {
                    return;
                }

                createFullAddress.value = createAddressDetail.value.trim();
            }

            function syncEditFullAddress() {
                if (!editAddressDetail || !editFullAddress) {
                    return;
                }

                editFullAddress.value = editAddressDetail.value.trim();
            }

            async function loadProvinceCascade(selectElement, selectedName = '') {
                return populateSelect(selectElement, wilayahRoutes.provinces, '-- Pilih Provinsi --', selectedName);
            }

            async function loadCityCascade(selectElement, provinceCode, selectedName = '') {
                if (!provinceCode) {
                    setSelectPlaceholder(selectElement, '-- Pilih Kota/Kabupaten --');
                    return '';
                }

                return populateSelect(
                    selectElement,
                    buildWilayahUrl(wilayahRoutes.regencies, provinceCode),
                    '-- Pilih Kota/Kabupaten --',
                    selectedName
                );
            }

            async function loadDistrictCascade(selectElement, cityCode, selectedName = '') {
                if (!cityCode) {
                    setSelectPlaceholder(selectElement, '-- Pilih Kecamatan --');
                    return '';
                }

                return populateSelect(
                    selectElement,
                    buildWilayahUrl(wilayahRoutes.districts, cityCode),
                    '-- Pilih Kecamatan --',
                    selectedName
                );
            }

            async function loadVillageCascade(selectElement, districtCode, selectedName = '') {
                if (!districtCode) {
                    setSelectPlaceholder(selectElement, '-- Pilih Desa / Kelurahan --');
                    return '';
                }

                return populateSelect(
                    selectElement,
                    buildWilayahUrl(wilayahRoutes.villages, districtCode),
                    '-- Pilih Desa / Kelurahan --',
                    selectedName
                );
            }

            async function initCreateLocation() {
                if (!createProvince) {
                    return;
                }

                const parsedOldFullAddress = splitFullAddress(oldCreateValues.fullAddress);

                if (createAddressDetail) {
                    createAddressDetail.value = parsedOldFullAddress.detail;
                }

                if (createFullAddress) {
                    createFullAddress.value = oldCreateValues.fullAddress || '';
                }

                const selectedProvince = await loadProvinceCascade(createProvince, oldCreateValues.province);
                const selectedCity = await loadCityCascade(createCity, selectedProvince, oldCreateValues.city);
                const selectedDistrict = await loadDistrictCascade(createDistrict, selectedCity, oldCreateValues.district);
                await loadVillageCascade(createVillage, selectedDistrict, oldCreateValues.village || parsedOldFullAddress.village);

                syncCreateFullAddress();
            }

            async function initEditLocation(addressData) {
                if (!editProvince || !addressData) {
                    return;
                }

                editFullAddress.value = addressData.fullAddress || '';
                editAddressDetail.value = addressData.fullAddress || '';

                const selectedProvince = await loadProvinceCascade(editProvince, addressData.province || '');
                const selectedCity = await loadCityCascade(editCity, selectedProvince, addressData.city || '');
                const selectedDistrict = await loadDistrictCascade(editDistrict, selectedCity, addressData.district || '');
                await loadVillageCascade(editVillage, selectedDistrict, addressData.village || '');

                syncEditFullAddress();
            }

            // ================= LOGIK AUTO-DISMISS ALERT (5 DETIK) =================
            const alerts = document.querySelectorAll('.flash-alert');
            alerts.forEach(function(alertElement) {
                setTimeout(function() {
                    const bsAlert = bootstrap.Alert.getOrCreateInstance(alertElement);
                    if (bsAlert) {
                        bsAlert.close();
                    }
                }, 5000);
            });

            // ================= LOGIK MODAL DATA BINDING =================

            // --- MODAL SHOW ---
            const modalShow = document.getElementById('modalShow');
            if (modalShow) {
                modalShow.addEventListener('show.bs.modal', function(event) {
                    const btn = event.relatedTarget;
                    document.getElementById('show-user').textContent = btn.getAttribute('data-user');
                    document.getElementById('show-email').textContent = btn.getAttribute('data-email');
                    document.getElementById('show-label').textContent = btn.getAttribute('data-label');
                    document.getElementById('show-recipient').textContent = btn.getAttribute('data-recipient');
                    document.getElementById('show-phone').textContent = btn.getAttribute('data-phone');
                    document.getElementById('show-full-address').textContent = btn.getAttribute('data-full-address');
                    document.getElementById('show-province').textContent = btn.getAttribute('data-province');
                    document.getElementById('show-city').textContent = btn.getAttribute('data-city');
                    document.getElementById('show-district').textContent = btn.getAttribute('data-district');
                    document.getElementById('show-village').textContent = btn.getAttribute('data-village') || '-';
                    document.getElementById('show-postal').textContent = btn.getAttribute('data-postal');

                    const badgeEl = document.getElementById('show-primary-badge');
                    if (btn.getAttribute('data-primary') === '1') {
                        badgeEl.classList.remove('d-none');
                    } else {
                        badgeEl.classList.add('d-none');
                    }
                });
            }

            // --- MODAL EDIT ---
            const modalEdit = document.getElementById('modalEdit');
            if (modalEdit) {
                modalEdit.addEventListener('show.bs.modal', async function(event) {
                    const btn = event.relatedTarget;
                    const id = btn.getAttribute('data-id');

                    document.getElementById('edit-user-id').value = btn.getAttribute('data-user-id');
                    document.getElementById('edit-label').value = btn.getAttribute('data-label');
                    document.getElementById('edit-phone').value = btn.getAttribute('data-phone');
                    document.getElementById('edit-recipient').value = btn.getAttribute('data-recipient');
                    document.getElementById('edit-postal').value = btn.getAttribute('data-postal');
                    document.getElementById('edit-is-primary').checked = btn.getAttribute('data-primary') === '1';

                    await initEditLocation({
                        fullAddress: btn.getAttribute('data-full-address'),
                        province: btn.getAttribute('data-province'),
                        city: btn.getAttribute('data-city'),
                        district: btn.getAttribute('data-district'),
                        village: btn.getAttribute('data-village'),
                    });

                    document.getElementById('form-edit').action = `/admin/buyer-addresses/{{ session('admin_route_code') }}/${id}`;
                });
            }

            if (createProvince) {
                createProvince.addEventListener('change', async function() {
                    await loadCityCascade(createCity, createProvince.value);
                    setSelectPlaceholder(createDistrict, '-- Pilih Kecamatan --');
                    setSelectPlaceholder(createVillage, '-- Pilih Desa / Kelurahan --');
                    syncCreateFullAddress();
                });
            }

            if (createCity) {
                createCity.addEventListener('change', async function() {
                    await loadDistrictCascade(createDistrict, createCity.value);
                    setSelectPlaceholder(createVillage, '-- Pilih Desa / Kelurahan --');
                    syncCreateFullAddress();
                });
            }

            if (createDistrict) {
                createDistrict.addEventListener('change', async function() {
                    await loadVillageCascade(createVillage, createDistrict.value);
                    syncCreateFullAddress();
                });
            }

            if (createVillage) {
                createVillage.addEventListener('change', syncCreateFullAddress);
            }

            if (createAddressDetail) {
                createAddressDetail.addEventListener('input', syncCreateFullAddress);
            }

            const createForm = document.querySelector('#modalCreate form');
            if (createForm) {
                createForm.addEventListener('submit', function() {
                    syncCreateFullAddress();
                });
            }

            if (editProvince) {
                editProvince.addEventListener('change', async function() {
                    await loadCityCascade(editCity, editProvince.value);
                    setSelectPlaceholder(editDistrict, '-- Pilih Kecamatan --');
                    setSelectPlaceholder(editVillage, '-- Pilih Desa / Kelurahan --');
                    syncEditFullAddress();
                });
            }

            if (editCity) {
                editCity.addEventListener('change', async function() {
                    await loadDistrictCascade(editDistrict, editCity.value);
                    setSelectPlaceholder(editVillage, '-- Pilih Desa / Kelurahan --');
                    syncEditFullAddress();
                });
            }

            if (editDistrict) {
                editDistrict.addEventListener('change', async function() {
                    await loadVillageCascade(editVillage, editDistrict.value);
                    syncEditFullAddress();
                });
            }

            if (editVillage) {
                editVillage.addEventListener('change', syncEditFullAddress);
            }

            if (editAddressDetail) {
                editAddressDetail.addEventListener('input', syncEditFullAddress);
            }

            if (editForm) {
                editForm.addEventListener('submit', function() {
                    syncEditFullAddress();
                });
            }

            initCreateLocation();

            // --- MODAL DELETE ---
            const modalDelete = document.getElementById('modalDelete');
            if (modalDelete) {
                modalDelete.addEventListener('show.bs.modal', function(event) {
                    const btn = event.relatedTarget;
                    const id = btn.getAttribute('data-id');
                    document.getElementById('delete-name').textContent = btn.getAttribute('data-name');
                    document.getElementById('form-delete').action = `/admin/buyer-addresses/{{ session('admin_route_code') }}/${id}`;
                });
            }

            // ================= LOGIK FILTER & PAGINATION CLIENT-SIDE DINAMIS =================
            const searchInput = document.getElementById('search-input');
            const dropdownItems = document.querySelectorAll('.dropdown-menu-entries .dropdown-item');
            const selectedEntryValue = document.getElementById('selected-entry-value');
            const paginationSummary = document.querySelector('.pagination-summary');
            const paginationContainer = document.querySelector('.content-pagination-bar nav');

            let currentLimit = parseInt(selectedEntryValue.textContent) || 10;
            let currentPage = 1;

            function applyFilters() {
                const rows = document.querySelectorAll('.address-row');
                const query = searchInput.value.toLowerCase().trim();

                let matchedRows = [];
                rows.forEach(row => {
                    const text = row.textContent.toLowerCase();
                    const isMatch = text.includes(query);
                    if (isMatch) {
                        matchedRows.push(row);
                    } else {
                        row.style.display = 'none';
                    }
                });

                const totalMatch = matchedRows.length;
                const totalPages = Math.ceil(totalMatch / currentLimit) || 1;

                if (currentPage > totalPages) currentPage = totalPages;

                const startIdx = (currentPage - 1) * currentLimit;
                const endIdx = startIdx + currentLimit;

                matchedRows.forEach((row, index) => {
                    if (index >= startIdx && index < endIdx) {
                        row.style.display = '';
                        const indexCell = row.querySelector('.row-index-number');
                        if (indexCell) indexCell.textContent = index + 1;
                    } else {
                        row.style.display = 'none';
                    }
                });

                if (paginationSummary) {
                    if (totalMatch === 0) {
                        paginationSummary.textContent = "Menampilkan 0 data";
                        const emptyRow = document.querySelector('.empty-row');
                        if (emptyRow) emptyRow.style.display = '';
                    } else {
                        const emptyRow = document.querySelector('.empty-row');
                        if (emptyRow) emptyRow.style.display = 'none';
                        const fromPos = startIdx + 1;
                        const toPos = Math.min(endIdx, totalMatch);
                        paginationSummary.textContent =
                            `Menampilkan ${fromPos} sampai ${toPos} dari ${totalMatch} entri`;
                    }
                }

                renderPagination(totalPages);
            }

            function renderPagination(totalPages) {
                if (!paginationContainer) return;
                paginationContainer.innerHTML = '';

                const prevLink = document.createElement('a');
                prevLink.href = '#';
                prevLink.className = `content-page-link ${currentPage === 1 ? 'disabled' : ''}`;
                prevLink.innerHTML =
                    '<span class="material-symbols-outlined" style="font-size: 18px;">chevron_left</span>';
                prevLink.addEventListener('click', function(e) {
                    e.preventDefault();
                    if (currentPage > 1) { currentPage--; applyFilters(); }
                });
                paginationContainer.appendChild(prevLink);

                for (let i = 1; i <= totalPages; i++) {
                    const pageLink = document.createElement('a');
                    pageLink.href = '#';
                    pageLink.className = `content-page-link ${currentPage === i ? 'active' : ''}`;
                    pageLink.textContent = i;
                    pageLink.addEventListener('click', function(e) {
                        e.preventDefault();
                        currentPage = i;
                        applyFilters();
                    });
                    paginationContainer.appendChild(pageLink);
                }

                const nextLink = document.createElement('a');
                nextLink.href = '#';
                nextLink.className = `content-page-link ${currentPage === totalPages ? 'disabled' : ''}`;
                nextLink.innerHTML =
                    '<span class="material-symbols-outlined" style="font-size: 18px;">chevron_right</span>';
                nextLink.addEventListener('click', function(e) {
                    e.preventDefault();
                    if (currentPage < totalPages) { currentPage++; applyFilters(); }
                });
                paginationContainer.appendChild(nextLink);
            }

            if (searchInput) {
                searchInput.addEventListener('input', function() {
                    currentPage = 1;
                    applyFilters();
                });
            }

            dropdownItems.forEach(item => {
                item.addEventListener('click', function(e) {
                    e.preventDefault();
                    dropdownItems.forEach(i => i.classList.remove('active'));
                    this.classList.add('active');
                    selectedEntryValue.textContent = this.getAttribute('data-value');
                    currentLimit = parseInt(this.getAttribute('data-value'));
                    currentPage = 1;
                    applyFilters();
                });
            });

            applyFilters();
        });
    </script>
@endsection