{{-- resources/views/pesanan_kartu/index.blade.php --}}
@extends('layouts.dashboard')
@section('title', 'Pesanan Kartu Anggota')
@section('page-title', 'Kelola Pesanan Kartu')

@section('content')
@php
    $authUser = auth()->user();
    $role = strtolower(trim((string) ($authUser->role ?? '')));

    $rolesBolehPesan = [
        'superadmin','dpp','dpd_pengurus','dpd_operator','dpc_pengurus','dpc_operator','ranting_pengurus','ranting_operator',
    ];

    $rolesBolehProses = ['joudie', 'dpp', 'superadmin'];
    $rolesBolehAktif  = ['joudie'];

    $canPesan  = in_array($role, $rolesBolehPesan, true);
    $canProses = in_array($role, $rolesBolehProses, true);
    $canAktif  = in_array($role, $rolesBolehAktif, true);
@endphp

@push('styles')
<style>
    .pesanan-page .card {
        border: 0;
        border-radius: 1rem;
    }

    .pesanan-page .card-header {
        background: linear-gradient(135deg, #ffffff 0%, #f8fbff 100%);
        border-bottom: 1px solid rgba(0,0,0,.06);
        padding: 1rem 1.25rem;
    }

    .pesanan-page .section-subtitle {
        font-size: .9rem;
        color: #6c757d;
    }

    .pesanan-summary {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: .75rem;
        margin-bottom: 1rem;
    }

    .pesanan-stat {
        background: #fff;
        border: 1px solid rgba(0,0,0,.06);
        border-radius: .9rem;
        padding: .9rem 1rem;
        box-shadow: 0 .25rem 1rem rgba(15, 23, 42, .04);
    }

    .pesanan-stat .label {
        font-size: .8rem;
        color: #6c757d;
        margin-bottom: .2rem;
    }

    .pesanan-stat .value {
        font-size: 1.1rem;
        font-weight: 700;
        color: #212529;
    }

    .pesanan-toolbar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: .75rem;
        flex-wrap: wrap;
        margin-bottom: 1rem;
    }

    .info-pembayaran-box {
        background: linear-gradient(135deg, #f8fbff 0%, #ffffff 100%);
        border: 1px solid rgba(13, 110, 253, .12);
        border-left: 4px solid var(--bs-primary);
        border-radius: 1rem;
        padding: 1rem 1.1rem;
        box-shadow: 0 .25rem 1rem rgba(15, 23, 42, .04);
        margin-bottom: 1rem;
    }

    .info-pembayaran-box .info-title {
        font-weight: 700;
        color: #0d6efd;
        margin-bottom: .5rem;
        display: flex;
        align-items: center;
        gap: .45rem;
    }

    .info-pembayaran-box .info-text {
        color: #495057;
        font-size: .92rem;
        line-height: 1.6;
        margin-bottom: .35rem;
    }

    .rekening-box {
        background: #fff;
        border: 1px dashed rgba(25, 135, 84, .35);
        border-radius: .85rem;
        padding: .85rem 1rem;
        margin-top: .75rem;
        margin-bottom: .75rem;
    }

    .rekening-box .rekening-label {
        font-size: .78rem;
        text-transform: uppercase;
        letter-spacing: .04em;
        color: #6c757d;
        margin-bottom: .25rem;
    }

    .rekening-box .rekening-name {
        font-weight: 700;
        color: #198754;
        margin-bottom: .15rem;
    }

    .rekening-box .rekening-number {
        font-size: 1.05rem;
        font-weight: 800;
        color: #212529;
        letter-spacing: .03em;
        word-break: break-word;
    }

    .info-list {
        margin: 0;
        padding-left: 1rem;
        color: #495057;
        font-size: .9rem;
    }

    .info-list li + li {
        margin-top: .35rem;
    }

    .pesanan-table-wrap {
        border-top: 1px solid rgba(0,0,0,.04);
    }

    .pesanan-table {
        margin-bottom: 0;
        min-width: 1100px;
    }

    .pesanan-table thead th {
        font-size: .82rem;
        text-transform: uppercase;
        letter-spacing: .03em;
        color: #6c757d;
        white-space: nowrap;
        vertical-align: middle;
        background: #f8f9fa;
    }

    .pesanan-table tbody td {
        vertical-align: top;
        padding-top: .9rem;
        padding-bottom: .9rem;
    }

    .pesanan-no {
        font-weight: 700;
        color: var(--bs-primary);
        text-decoration: none;
    }

    .pemesan-name {
        font-weight: 600;
        color: #212529;
    }

    .meta-line {
        display: block;
        font-size: .83rem;
        color: #6c757d;
        margin-top: .25rem;
        line-height: 1.35rem;
        word-break: break-word;
    }

    .bukti-cell,
    .aksi-cell {
        min-width: 180px;
    }

    .aksi-group,
    .bukti-group {
        display: flex;
        flex-wrap: wrap;
        gap: .35rem;
        justify-content: center;
    }

    .aksi-group .btn,
    .bukti-group .btn {
        border-radius: .7rem;
    }

    .badge-status {
        font-weight: 600;
        padding: .55rem .8rem;
        border-radius: 999px;
    }

    .total-text {
        font-weight: 700;
        color: #198754;
        white-space: nowrap;
    }

    .empty-state {
        padding: 3rem 1rem;
    }

    .empty-state i {
        font-size: 3rem;
        opacity: .25;
    }

    .pagination-wrap {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: .75rem;
        flex-wrap: wrap;
    }

    .pesanan-mobile-list {
        display: none;
    }

    .pesanan-mobile-card {
        border: 1px solid rgba(0,0,0,.06);
        border-radius: 1rem;
        box-shadow: 0 .25rem 1rem rgba(15, 23, 42, .04);
    }

    .pesanan-mobile-card .card-body {
        padding: 1rem;
    }

    .mobile-topline {
        display: flex;
        align-items: start;
        justify-content: space-between;
        gap: .75rem;
        margin-bottom: .75rem;
    }

    .mobile-no {
        font-weight: 700;
        color: var(--bs-primary);
        line-height: 1.3;
    }

    .mobile-date {
        font-size: .83rem;
        color: #6c757d;
    }

    .mobile-block {
        margin-bottom: .85rem;
    }

    .mobile-label {
        font-size: .75rem;
        text-transform: uppercase;
        letter-spacing: .03em;
        color: #6c757d;
        margin-bottom: .2rem;
    }

    .mobile-value {
        font-size: .92rem;
        color: #212529;
        word-break: break-word;
    }

    .mobile-grid-2 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: .75rem;
    }

    .mobile-actions {
        display: flex;
        flex-wrap: wrap;
        gap: .45rem;
    }

    .mobile-actions .btn,
    .mobile-proof .btn {
        border-radius: .75rem;
    }

    .mobile-proof {
        display: flex;
        flex-wrap: wrap;
        gap: .45rem;
    }

    #modalUploadBuktiTransfer,
    #modalKonfirmasiProses,
    #modalKonfirmasiAktif,
    #pesananDetailModal {
        z-index: 1060;
    }

    #modalUploadBuktiTransfer .modal-dialog,
    #modalKonfirmasiProses .modal-dialog,
    #modalKonfirmasiAktif .modal-dialog,
    #pesananDetailModal .modal-dialog {
        z-index: 1061;
    }

    .modal-backdrop {
        z-index: 1055;
    }

    #pesananDetailModal .modal-dialog {
        max-width: min(1140px, calc(100vw - 1rem));
    }

    #pesananDetailModal .modal-content,
    #modalUploadBuktiTransfer .modal-content,
    #modalKonfirmasiProses .modal-content,
    #modalKonfirmasiAktif .modal-content {
        border: 0;
        border-radius: 1rem;
        overflow: hidden;
    }

    #pesananDetailModal .modal-body {
        max-height: calc(100vh - 180px);
        overflow-y: auto;
    }

    @media (max-width: 991.98px) {
        .pesanan-summary {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    @media (max-width: 767.98px) {
        .pesanan-page .card-header {
            padding: 1rem;
        }

        .pesanan-summary {
            grid-template-columns: 1fr 1fr;
        }

        .pesanan-toolbar .btn {
            width: 100%;
        }

        .pesanan-desktop-table {
            display: none;
        }

        .pesanan-mobile-list {
            display: grid;
            gap: .85rem;
            padding: 1rem;
        }

        .pagination-wrap {
            flex-direction: column;
            align-items: stretch;
        }

        .pagination-wrap .text-muted {
            text-align: center;
        }

        .mobile-actions .btn,
        .mobile-proof .btn {
            flex: 1 1 calc(50% - .45rem);
            min-width: 0;
        }

        #pesananDetailModal .modal-dialog,
        #modalUploadBuktiTransfer .modal-dialog,
        #modalKonfirmasiProses .modal-dialog,
        #modalKonfirmasiAktif .modal-dialog {
            margin: .5rem;
        }
    }

    @media (max-width: 575.98px) {
        .pesanan-summary {
            grid-template-columns: 1fr;
        }

        .mobile-grid-2 {
            grid-template-columns: 1fr;
            gap: .6rem;
        }

        .mobile-actions .btn,
        .mobile-proof .btn {
            flex: 1 1 100%;
        }

        .toast-container {
            left: .75rem !important;
            right: .75rem !important;
            bottom: .75rem !important;
        }

        .toast-container .toast {
            width: 100%;
        }
    }
</style>
@endpush

<div class="container-fluid pesanan-page">
    <div class="row">
        <div class="col-12">

            <div class="pesanan-toolbar">
                <div>
                    <h4 class="mb-1">
                        <i class="bi bi-receipt text-primary me-2"></i>
                        Pesanan Kartu Anggota
                    </h4>
                    <div class="section-subtitle">{{ $pesanan->total() }} pesanan ditemukan</div>
                </div>

                @if($canPesan)
                    <a href="{{ route('superadmin.pesanan-kartu.create') }}" class="btn btn-primary">
                        <i class="bi bi-plus-circle me-1"></i>
                        Buat Nota Baru
                    </a>
                @endif
            </div>

            <div class="pesanan-summary">
                <div class="pesanan-stat">
                    <div class="label">Total Pesanan</div>
                    <div class="value">{{ number_format($pesanan->total(), 0, ',', '.') }}</div>
                </div>
                <div class="pesanan-stat">
                    <div class="label">Halaman Aktif</div>
                    <div class="value">{{ $pesanan->currentPage() }}</div>
                </div>
                <div class="pesanan-stat">
                    <div class="label">Per Halaman</div>
                    <div class="value">{{ $pesanan->perPage() }}</div>
                </div>
                <div class="pesanan-stat">
                    <div class="label">Data Tampil</div>
                    <div class="value">{{ $pesanan->count() }}</div>
                </div>
            </div>

            <div class="info-pembayaran-box">
                <div class="info-title">
                    <i class="bi bi-info-circle-fill"></i>
                    Keterangan Pemesanan Kartu Anggota
                </div>

                <div class="info-text">
                    Saat melakukan pemesanan kartu anggota, pembayaran dilakukan terlebih dahulu melalui rekening berikut:
                </div>

                <div class="rekening-box">
                    <div class="rekening-label">Rekening Pembayaran</div>
                    <div class="rekening-name">BRI Koperasi Inkonera</div>
                    <div class="rekening-number">2180.01.000571.304</div>
                </div>

                <ul class="info-list">
                    <li>Upload bukti pembayaran melalui nota pesanan di aplikasi KTA HNSI.</li>
                    <li>Setelah pembayaran berhasil dan diverifikasi, kartu anggota elektronik sudah bisa di-download oleh operator.</li>
                    <li>Kartu anggota elektronik tersebut selanjutnya bisa dicetak dalam bentuk fisik.</li>
                </ul>
            </div>

            <div class="card shadow-sm">
                <div class="card-body p-0">

                    {{-- Desktop / tablet besar --}}
                    <div class="table-responsive pesanan-desktop-table pesanan-table-wrap">
                        <table class="table table-hover align-middle pesanan-table">
                            <thead class="sticky-top">
                                <tr>
                                    <th>No. Pesanan</th>
                                    <th>Tgl Pesan</th>
                                    <th>Pemesan</th>
                                    <th class="text-center">Bukti</th>
                                    <th class="text-center">Jml Item</th>
                                    <th class="text-end">Total</th>
                                    <th class="text-center">Billing Bayar</th>
                                    <th class="text-center">Status Kartu</th>
                                    <th class="text-center">Aksi</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($pesanan as $nota)
                                    @php
                                        $namaPemesan = $nota->nama_pemesan ?? null;
                                        $nikPemesan  = $nota->nik ?? null;
                                        $waPemesan   = $nota->nomor_wa_pemesan ?? $nota->hp_pemesan ?? $nota->nomor_wa ?? null;

                                        $provNama = $nota->provinsi_pemesan ?? $nota->prov ?? $nota->provinsi ?? $nota->provinsi_name ?? $nota->prov_name ?? null;
                                        $kabNama  = $nota->kabupaten_pemesan ?? $nota->kab ?? $nota->kabupaten ?? $nota->kota_name ?? $nota->kabupaten_name ?? $nota->kota ?? null;
                                        $kecNama  = $nota->kecamatan_pemesan ?? $nota->kec ?? $nota->kecamatan ?? $nota->kecamatan_name ?? null;

                                        $provId = $nota->prov_id ?? $nota->alamat_provinsi_id ?? $nota->alamatprovinsiid ?? $nota->provinsi_id ?? $nota->province_id ?? null;
                                        $kotaId = $nota->kota_id ?? $nota->kab_id ?? $nota->alamat_kota_id ?? $nota->alamatkotaid ?? $nota->alamat_kabupaten_id ?? $nota->alamatkabupatenid ?? $nota->kabupaten_id ?? $nota->regency_id ?? $nota->city_id ?? null;
                                        $kecId  = $nota->kec_id ?? $nota->alamat_kecamatan_id ?? $nota->alamatkecamatanid ?? $nota->kecamatan_id ?? $nota->district_id ?? null;

                                        $provTampil = (!is_null($provNama) && trim((string) $provNama) !== '') ? $provNama : ((!is_null($provId) && trim((string) $provId) !== '') ? ('Prov ID: ' . $provId) : null);
                                        $kabTampil  = (!is_null($kabNama) && trim((string) $kabNama) !== '') ? $kabNama : ((!is_null($kotaId) && trim((string) $kotaId) !== '') ? ('Kab/Kota ID: ' . $kotaId) : null);
                                        $kecTampil  = (!is_null($kecNama) && trim((string) $kecNama) !== '') ? $kecNama : ((!is_null($kecId) && trim((string) $kecId) !== '') ? ('Kec ID: ' . $kecId) : null);

                                        $lokParts = array_values(array_filter([$provTampil, $kabTampil, $kecTampil], fn($v) => !is_null($v) && trim((string) $v) !== ''));
                                        $lokasiTampil = count($lokParts) ? implode(', ', $lokParts) : '-';

                                        $total   = (int) ($nota->total_harga ?? 0);
                                        $jmlItem = (int) ($nota->jml_item ?? 0);

                                        $statusBayar = strtolower(trim((string) ($nota->status_bayar ?? 'belum')));
                                        $statusBayar = in_array($statusBayar, ['belum','lunas','gratis'], true) ? $statusBayar : 'belum';
                                        $bgClass = match($statusBayar) {
                                            'lunas'  => 'success',
                                            'gratis' => 'info',
                                            default  => 'warning',
                                        };

                                        $statusKartuRaw = $nota->status_kartu ?? ($nota->statuskartu ?? null);
                                        $statusKartu = strtolower(trim((string) ($statusKartuRaw ?? '')));

                                        $badgeKartu = match($statusKartu) {
                                            'pesan'  => 'warning',
                                            'proses' => 'primary',
                                            'aktif'  => 'success',
                                            'batal'  => 'danger',
                                            default  => 'secondary',
                                        };

                                        $labelKartu = match($statusKartu) {
                                            'pesan'  => 'Pesan',
                                            'proses' => 'Proses',
                                            'aktif'  => 'Aktif',
                                            'batal'  => 'Batal',
                                            default  => '-',
                                        };

                                        $buktiPath = $nota->bukti_transfer ?? null;
                                        $hasBukti = is_string($buktiPath) && trim($buktiPath) !== '';

                                        $tglTampil = '-';
                                        try {
                                            if (!empty($nota->tgl_pesan)) {
                                                $tglTampil = \Carbon\Carbon::parse($nota->tgl_pesan)->format('d/m/Y');
                                            }
                                        } catch (\Throwable $e) {
                                            $tglTampil = '-';
                                        }

                                        $bolehProsesUi = $canProses && ($statusKartu === 'pesan');
                                        $bolehAktifUi  = $canAktif  && ($statusKartu === 'proses');
                                        $disableHapus  = in_array($statusKartu, ['proses', 'aktif'], true);
                                    @endphp

                                    <tr>
                                        <td>
                                            <div class="pesanan-no">#{{ $nota->no_pesanan }}</div>
                                        </td>
                                        <td class="text-nowrap">{{ $tglTampil }}</td>
                                        <td style="min-width:280px;">
                                            <div class="pemesan-name">{{ $namaPemesan ?: ($nikPemesan ?: 'Anonim') }}</div>

                                            @if(!empty($waPemesan))
                                                <span class="meta-line">
                                                    <i class="bi bi-whatsapp me-1"></i>{{ $waPemesan }}
                                                </span>
                                            @endif

                                            <span class="meta-line">
                                                <i class="bi bi-geo-alt me-1"></i>{{ $lokasiTampil }}
                                            </span>

                                            @if($lokasiTampil === '-' && empty($provId) && empty($kotaId) && empty($kecId))
                                                <span class="meta-line">Alamat belum diisi.</span>
                                            @endif
                                        </td>

                                        <td class="text-center bukti-cell">
                                            <div class="bukti-group">
                                                <button type="button"
                                                        class="btn btn-outline-secondary btn-sm btnUploadBukti"
                                                        data-bs-toggle="modal"
                                                        data-bs-target="#modalUploadBuktiTransfer"
                                                        data-no="{{ $nota->no_pesanan }}"
                                                        title="Upload Bukti Transfer">
                                                    <i class="bi bi-upload"></i>
                                                </button>

                                                @if($hasBukti)
                                                    <a href="{{ route('superadmin.pesanan-kartu.bukti-transfer.show', $nota->no_pesanan) }}"
                                                       class="btn btn-outline-primary btn-sm"
                                                       target="_blank"
                                                       rel="noopener"
                                                       title="Lihat Bukti Transfer">
                                                        <i class="bi bi-eye"></i>
                                                    </a>

                                                    <a href="{{ route('superadmin.pesanan-kartu.bukti-transfer.download', $nota->no_pesanan) }}"
                                                       class="btn btn-outline-dark btn-sm"
                                                       title="Download Bukti Transfer">
                                                        <i class="bi bi-download"></i>
                                                    </a>
                                                @endif
                                            </div>
                                            <div class="small mt-2 {{ $hasBukti ? 'text-success' : 'text-muted' }}">
                                                {{ $hasBukti ? 'Sudah upload' : 'Belum ada' }}
                                            </div>
                                        </td>

                                        <td class="text-center">
                                            <strong>{{ $jmlItem }}</strong>
                                        </td>

                                        <td class="text-end">
                                            <span class="total-text">Rp {{ number_format($total, 0, ',', '.') }}</span>
                                        </td>

                                        <td class="text-center">
                                            <span class="badge bg-{{ $bgClass }} badge-status">{{ ucfirst($statusBayar) }}</span>
                                        </td>

                                        <td class="text-center">
                                            <span class="badge bg-{{ $badgeKartu }} badge-status">{{ $labelKartu }}</span>
                                        </td>

                                        <td class="text-center aksi-cell">
                                            <div class="aksi-group">
                                                <button type="button"
                                                        class="btn btn-outline-info btn-sm btnPesananDetail"
                                                        data-bs-toggle="modal"
                                                        data-bs-target="#pesananDetailModal"
                                                        data-no-pesanan="{{ $nota->no_pesanan }}"
                                                        title="Lihat Detail Pesanan">
                                                    <i class="bi bi-list-ul"></i>
                                                </button>

                                                @if($bolehProsesUi)
                                                    <button type="button"
                                                            class="btn btn-outline-success btn-sm btnOpenModalProses"
                                                            data-bs-toggle="modal"
                                                            data-bs-target="#modalKonfirmasiProses"
                                                            data-no="{{ $nota->no_pesanan }}"
                                                            title="PROSES">
                                                        <i class="bi bi-gear me-1"></i>PROSES
                                                    </button>
                                                @endif

                                                @if($bolehAktifUi)
                                                    <button type="button"
                                                            class="btn btn-outline-primary btn-sm btnOpenModalAktif"
                                                            data-bs-toggle="modal"
                                                            data-bs-target="#modalKonfirmasiAktif"
                                                            data-no="{{ $nota->no_pesanan }}"
                                                            title="AKTIF">
                                                        <i class="bi bi-check2-circle me-1"></i>AKTIF
                                                    </button>
                                                @endif

                                                @if(!$disableHapus)
                                                    <form action="{{ route('superadmin.pesanan-kartu.destroy', $nota->no_pesanan) }}"
                                                          method="POST"
                                                          class="d-inline"
                                                          onsubmit="return confirm('Hapus nota #{{ $nota->no_pesanan }}?')">
                                                        @csrf
                                                        @method('DELETE')
                                                        <button type="submit" class="btn btn-outline-danger btn-sm" title="Hapus">
                                                            <i class="bi bi-trash"></i>
                                                        </button>
                                                    </form>
                                                @endif
                                            </div>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="9" class="text-center empty-state">
                                            <div class="text-muted">
                                                <i class="bi bi-inbox d-block mx-auto mb-3"></i>
                                                <h6 class="mb-1">Belum ada pesanan kartu</h6>
                                                <p class="mb-0">Mulai buat nota pesanan pertama Anda</p>
                                            </div>
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>

                    {{-- Mobile --}}
                    <div class="pesanan-mobile-list">
                        @forelse($pesanan as $nota)
                            @php
                                $namaPemesan = $nota->nama_pemesan ?? null;
                                $nikPemesan  = $nota->nik ?? null;
                                $waPemesan   = $nota->nomor_wa_pemesan ?? $nota->hp_pemesan ?? $nota->nomor_wa ?? null;

                                $provNama = $nota->provinsi_pemesan ?? $nota->prov ?? $nota->provinsi ?? $nota->provinsi_name ?? $nota->prov_name ?? null;
                                $kabNama  = $nota->kabupaten_pemesan ?? $nota->kab ?? $nota->kabupaten ?? $nota->kota_name ?? $nota->kabupaten_name ?? $nota->kota ?? null;
                                $kecNama  = $nota->kecamatan_pemesan ?? $nota->kec ?? $nota->kecamatan ?? $nota->kecamatan_name ?? null;

                                $provId = $nota->prov_id ?? $nota->alamat_provinsi_id ?? $nota->alamatprovinsiid ?? $nota->provinsi_id ?? $nota->province_id ?? null;
                                $kotaId = $nota->kota_id ?? $nota->kab_id ?? $nota->alamat_kota_id ?? $nota->alamatkotaid ?? $nota->alamat_kabupaten_id ?? $nota->alamatkabupatenid ?? $nota->kabupaten_id ?? $nota->regency_id ?? $nota->city_id ?? null;
                                $kecId  = $nota->kec_id ?? $nota->alamat_kecamatan_id ?? $nota->alamatkecamatanid ?? $nota->kecamatan_id ?? $nota->district_id ?? null;

                                $provTampil = (!is_null($provNama) && trim((string) $provNama) !== '') ? $provNama : ((!is_null($provId) && trim((string) $provId) !== '') ? ('Prov ID: ' . $provId) : null);
                                $kabTampil  = (!is_null($kabNama) && trim((string) $kabNama) !== '') ? $kabNama : ((!is_null($kotaId) && trim((string) $kotaId) !== '') ? ('Kab/Kota ID: ' . $kotaId) : null);
                                $kecTampil  = (!is_null($kecNama) && trim((string) $kecNama) !== '') ? $kecNama : ((!is_null($kecId) && trim((string) $kecId) !== '') ? ('Kec ID: ' . $kecId) : null);

                                $lokParts = array_values(array_filter([$provTampil, $kabTampil, $kecTampil], fn($v) => !is_null($v) && trim((string) $v) !== ''));
                                $lokasiTampil = count($lokParts) ? implode(', ', $lokParts) : '-';

                                $total   = (int) ($nota->total_harga ?? 0);
                                $jmlItem = (int) ($nota->jml_item ?? 0);

                                $statusBayar = strtolower(trim((string) ($nota->status_bayar ?? 'belum')));
                                $statusBayar = in_array($statusBayar, ['belum','lunas','gratis'], true) ? $statusBayar : 'belum';
                                $bgClass = match($statusBayar) {
                                    'lunas'  => 'success',
                                    'gratis' => 'info',
                                    default  => 'warning',
                                };

                                $statusKartuRaw = $nota->status_kartu ?? ($nota->statuskartu ?? null);
                                $statusKartu = strtolower(trim((string) ($statusKartuRaw ?? '')));

                                $badgeKartu = match($statusKartu) {
                                    'pesan'  => 'warning',
                                    'proses' => 'primary',
                                    'aktif'  => 'success',
                                    'batal'  => 'danger',
                                    default  => 'secondary',
                                };

                                $labelKartu = match($statusKartu) {
                                    'pesan'  => 'Pesan',
                                    'proses' => 'Proses',
                                    'aktif'  => 'Aktif',
                                    'batal'  => 'Batal',
                                    default  => '-',
                                };

                                $buktiPath = $nota->bukti_transfer ?? null;
                                $hasBukti = is_string($buktiPath) && trim($buktiPath) !== '';

                                $tglTampil = '-';
                                try {
                                    if (!empty($nota->tgl_pesan)) {
                                        $tglTampil = \Carbon\Carbon::parse($nota->tgl_pesan)->format('d/m/Y');
                                    }
                                } catch (\Throwable $e) {
                                    $tglTampil = '-';
                                }

                                $bolehProsesUi = $canProses && ($statusKartu === 'pesan');
                                $bolehAktifUi  = $canAktif  && ($statusKartu === 'proses');
                                $disableHapus  = in_array($statusKartu, ['proses', 'aktif'], true);
                            @endphp

                            <div class="card pesanan-mobile-card">
                                <div class="card-body">
                                    <div class="mobile-topline">
                                        <div>
                                            <div class="mobile-no">#{{ $nota->no_pesanan }}</div>
                                            <div class="mobile-date">{{ $tglTampil }}</div>
                                        </div>
                                        <div class="text-end">
                                            <span class="badge bg-{{ $badgeKartu }} badge-status">{{ $labelKartu }}</span>
                                        </div>
                                    </div>

                                    <div class="mobile-block">
                                        <div class="mobile-label">Pemesan</div>
                                        <div class="mobile-value">{{ $namaPemesan ?: ($nikPemesan ?: 'Anonim') }}</div>

                                        @if(!empty($waPemesan))
                                            <div class="mobile-value text-muted mt-1">
                                                <i class="bi bi-whatsapp me-1"></i>{{ $waPemesan }}
                                            </div>
                                        @endif

                                        <div class="mobile-value text-muted mt-1">
                                            <i class="bi bi-geo-alt me-1"></i>{{ $lokasiTampil }}
                                        </div>
                                    </div>

                                    <div class="mobile-grid-2 mobile-block">
                                        <div>
                                            <div class="mobile-label">Jumlah Item</div>
                                            <div class="mobile-value"><strong>{{ $jmlItem }}</strong></div>
                                        </div>
                                        <div>
                                            <div class="mobile-label">Total</div>
                                            <div class="mobile-value text-success"><strong>Rp {{ number_format($total, 0, ',', '.') }}</strong></div>
                                        </div>
                                        <div>
                                            <div class="mobile-label">Billing Bayar</div>
                                            <div class="mobile-value">
                                                <span class="badge bg-{{ $bgClass }} badge-status">{{ ucfirst($statusBayar) }}</span>
                                            </div>
                                        </div>
                                        <div>
                                            <div class="mobile-label">Bukti</div>
                                            <div class="mobile-value {{ $hasBukti ? 'text-success' : 'text-muted' }}">
                                                {{ $hasBukti ? 'Sudah upload' : 'Belum ada' }}
                                            </div>
                                        </div>
                                    </div>

                                    <div class="mobile-block">
                                        <div class="mobile-label">Aksi Bukti</div>
                                        <div class="mobile-proof">
                                            <button type="button"
                                                    class="btn btn-outline-secondary btn-sm btnUploadBukti"
                                                    data-bs-toggle="modal"
                                                    data-bs-target="#modalUploadBuktiTransfer"
                                                    data-no="{{ $nota->no_pesanan }}">
                                                <i class="bi bi-upload me-1"></i>Upload
                                            </button>

                                            @if($hasBukti)
                                                <a href="{{ route('superadmin.pesanan-kartu.bukti-transfer.show', $nota->no_pesanan) }}"
                                                   class="btn btn-outline-primary btn-sm"
                                                   target="_blank"
                                                   rel="noopener">
                                                    <i class="bi bi-eye me-1"></i>Lihat
                                                </a>

                                                <a href="{{ route('superadmin.pesanan-kartu.bukti-transfer.download', $nota->no_pesanan) }}"
                                                   class="btn btn-outline-dark btn-sm">
                                                    <i class="bi bi-download me-1"></i>Download
                                                </a>
                                            @endif
                                        </div>
                                    </div>

                                    <div>
                                        <div class="mobile-label">Aksi Nota</div>
                                        <div class="mobile-actions">
                                            <button type="button"
                                                    class="btn btn-outline-info btn-sm btnPesananDetail"
                                                    data-bs-toggle="modal"
                                                    data-bs-target="#pesananDetailModal"
                                                    data-no-pesanan="{{ $nota->no_pesanan }}">
                                                <i class="bi bi-list-ul me-1"></i>Detail
                                            </button>

                                            @if($bolehProsesUi)
                                                <button type="button"
                                                        class="btn btn-outline-success btn-sm btnOpenModalProses"
                                                        data-bs-toggle="modal"
                                                        data-bs-target="#modalKonfirmasiProses"
                                                        data-no="{{ $nota->no_pesanan }}">
                                                    <i class="bi bi-gear me-1"></i>Proses
                                                </button>
                                            @endif

                                            @if($bolehAktifUi)
                                                <button type="button"
                                                        class="btn btn-outline-primary btn-sm btnOpenModalAktif"
                                                        data-bs-toggle="modal"
                                                        data-bs-target="#modalKonfirmasiAktif"
                                                        data-no="{{ $nota->no_pesanan }}">
                                                    <i class="bi bi-check2-circle me-1"></i>Aktif
                                                </button>
                                            @endif

                                            @if(!$disableHapus)
                                                <form action="{{ route('superadmin.pesanan-kartu.destroy', $nota->no_pesanan) }}"
                                                      method="POST"
                                                      class="flex-fill"
                                                      onsubmit="return confirm('Hapus nota #{{ $nota->no_pesanan }}?')">
                                                    @csrf
                                                    @method('DELETE')
                                                    <button type="submit" class="btn btn-outline-danger btn-sm w-100">
                                                        <i class="bi bi-trash me-1"></i>Hapus
                                                    </button>
                                                </form>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @empty
                            <div class="card pesanan-mobile-card">
                                <div class="card-body text-center empty-state">
                                    <div class="text-muted">
                                        <i class="bi bi-inbox d-block mx-auto mb-3"></i>
                                        <h6 class="mb-1">Belum ada pesanan kartu</h6>
                                        <p class="mb-0">Mulai buat nota pesanan pertama Anda</p>
                                    </div>
                                </div>
                            </div>
                        @endforelse
                    </div>

                    @if($pesanan->hasPages())
                        <div class="card-footer bg-light border-0 px-3 py-3">
                            <div class="pagination-wrap">
                                <div class="text-muted small">
                                    Menampilkan {{ $pesanan->firstItem() ?? 0 }} - {{ $pesanan->lastItem() ?? 0 }}
                                    dari {{ $pesanan->total() }} pesanan
                                </div>
                                <div>
                                    {{ $pesanan->appends(request()->query())->links() }}
                                </div>
                            </div>
                        </div>
                    @endif

                </div>
            </div>
        </div>
    </div>
</div>

{{-- MODAL UPLOAD BUKTI TRANSFER --}}
<div class="modal fade" id="modalUploadBuktiTransfer" tabindex="-1" aria-labelledby="modalUploadBuktiTransferLabel" aria-hidden="true" data-bs-backdrop="true" data-bs-keyboard="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <form id="formUploadBuktiTransfer" method="POST" enctype="multipart/form-data">
                @csrf
                <div class="modal-header">
                    <h5 class="modal-title" id="modalUploadBuktiTransferLabel">
                        <i class="bi bi-upload me-2"></i>Upload Bukti Transfer
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Tutup"></button>
                </div>
                <div class="modal-body">
                    <div class="small text-muted mb-3">
                        Nota: <span id="labelNoPesananBukti">-</span>
                    </div>

                    <div class="alert alert-primary border-0 shadow-sm" role="alert">
                        <div class="fw-bold mb-2">
                            <i class="bi bi-credit-card-2-front me-1"></i>
                            Informasi Pembayaran Pemesanan Kartu Anggota
                        </div>

                        <div class="mb-2">
                            Saat pemesanan kartu anggota, silakan lakukan pembayaran melalui rekening:
                        </div>

                        <div class="bg-white rounded p-3 border mb-2">
                            <div class="small text-muted">No. Rek BRI Koperasi Inkonera</div>
                            <div class="fw-bold text-success fs-5">2180.01.000571.304</div>
                        </div>

                        <div class="small mb-1">
                            Upload bukti pembayaran melalui nota pesanan di aplikasi KTA HNSI.
                        </div>
                        <div class="small mb-1">
                            Setelah pembayaran terverifikasi, kartu anggota elektronik sudah bisa di-download oleh operator.
                        </div>
                        <div class="small mb-0">
                            Kartu anggota elektronik tersebut juga dapat dicetak dalam bentuk fisik.
                        </div>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">File bukti (JPG/PNG/PDF, max 5MB)</label>
                        <input type="file"
                               name="bukti_transfer"
                               class="form-control"
                               accept=".jpg,.jpeg,.png,.pdf"
                               required>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light border" data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-primary">
                        <i class="bi bi-upload me-1"></i>Upload
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

{{-- MODAL PROSES --}}
<div class="modal fade" id="modalKonfirmasiProses" tabindex="-1" aria-labelledby="modalKonfirmasiProsesLabel" aria-hidden="true" data-bs-backdrop="true" data-bs-keyboard="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <form id="formKonfirmasiProses" method="POST">
                @csrf
                @method('PATCH')
                <input type="hidden" name="status_kartu" value="proses">

                <div class="modal-header">
                    <h5 class="modal-title" id="modalKonfirmasiProsesLabel">
                        <i class="bi bi-exclamation-triangle text-warning me-2"></i>Konfirmasi Proses
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Tutup"></button>
                </div>

                <div class="modal-body">
                    <div class="mb-2">Apakah uang dari pemesan sudah masuk?</div>
                    <div class="small text-muted">Nota: <span id="labelNoPesananProses">-</span></div>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-light border" data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-success">Ya, lanjutkan PROSES</button>
                </div>
            </form>
        </div>
    </div>
</div>

{{-- MODAL AKTIF --}}
<div class="modal fade" id="modalKonfirmasiAktif" tabindex="-1" aria-labelledby="modalKonfirmasiAktifLabel" aria-hidden="true" data-bs-backdrop="true" data-bs-keyboard="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <form id="formKonfirmasiAktif" method="POST">
                @csrf
                @method('PATCH')
                <input type="hidden" name="status_kartu" value="aktif">

                <div class="modal-header">
                    <h5 class="modal-title" id="modalKonfirmasiAktifLabel">
                        <i class="bi bi-exclamation-triangle text-warning me-2"></i>Konfirmasi Aktif
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Tutup"></button>
                </div>

                <div class="modal-body">
                    <div class="mb-2">Apakah uang dari pusat sudah masuk ke tim Manado?</div>
                    <div class="small text-muted">Nota: <span id="labelNoPesananAktif">-</span></div>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-light border" data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-primary">Ya, lanjutkan AKTIF</button>
                </div>
            </form>
        </div>
    </div>
</div>

{{-- MODAL DETAIL --}}
<div class="modal fade" id="pesananDetailModal" tabindex="-1" aria-labelledby="pesananDetailLabel" aria-hidden="true" data-bs-backdrop="true" data-bs-keyboard="true">
    <div class="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="pesananDetailLabel">
                    <i class="bi bi-list-ul me-2"></i>Detail Pesanan
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Tutup"></button>
            </div>
            <div class="modal-body">
                <div id="pesananDetailContent">
                    <div class="text-center py-4">
                        <div class="spinner-border text-primary" role="status">
                            <span class="visually-hidden">Loading...</span>
                        </div>
                        <p class="mt-2 text-muted mb-0">Memuat detail pesanan...</p>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-light border" data-bs-dismiss="modal">Tutup</button>
            </div>
        </div>
    </div>
</div>

{{-- TOAST SUCCESS --}}
@if(session('success'))
    <div class="toast-container position-fixed bottom-0 end-0 p-3">
        <div id="successToast" class="toast align-items-center text-white bg-success border-0 shadow" role="alert" aria-live="assertive" aria-atomic="true">
            <div class="d-flex">
                <div class="toast-body">{{ session('success') }}</div>
                <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Tutup"></button>
            </div>
        </div>
    </div>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const toastEl = document.getElementById('successToast');
            if (toastEl) {
                const toast = new bootstrap.Toast(toastEl, { delay: 3000 });
                toast.show();
            }
        });
    </script>
@endif
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    const urlStatusTemplate = @json(route('superadmin.pesanan-kartu.status-kartu', ['no_pesanan' => '__NO__']));
    const labelProses = document.getElementById('labelNoPesananProses');
    const formProses  = document.getElementById('formKonfirmasiProses');
    const labelAktif  = document.getElementById('labelNoPesananAktif');
    const formAktif   = document.getElementById('formKonfirmasiAktif');

    document.addEventListener('click', function (e) {
        const btnProses = e.target.closest('.btnOpenModalProses');
        if (btnProses) {
            const no = btnProses.getAttribute('data-no');
            if (labelProses) labelProses.textContent = '#' + no;
            if (formProses) formProses.action = urlStatusTemplate.replace('__NO__', encodeURIComponent(no));
            return;
        }

        const btnAktif = e.target.closest('.btnOpenModalAktif');
        if (btnAktif) {
            const no = btnAktif.getAttribute('data-no');
            if (labelAktif) labelAktif.textContent = '#' + no;
            if (formAktif) formAktif.action = urlStatusTemplate.replace('__NO__', encodeURIComponent(no));
        }
    });
});
</script>

<script>
document.addEventListener('DOMContentLoaded', function () {
    const urlUploadTemplate = @json(route('superadmin.pesanan-kartu.bukti-transfer.upload', ['no_pesanan' => '__NO__']));
    const labelBukti = document.getElementById('labelNoPesananBukti');
    const formBukti  = document.getElementById('formUploadBuktiTransfer');

    document.addEventListener('click', function (e) {
        const btn = e.target.closest('.btnUploadBukti');
        if (!btn) return;

        const no = btn.getAttribute('data-no');
        if (labelBukti) labelBukti.textContent = '#' + no;
        if (formBukti) formBukti.action = urlUploadTemplate.replace('__NO__', encodeURIComponent(no));
    });
});
</script>

<script>
document.addEventListener('DOMContentLoaded', function () {
    const modalEl   = document.getElementById('pesananDetailModal');
    const contentEl = document.getElementById('pesananDetailContent');

    if (!modalEl || !contentEl) return;

    [modalEl,
     document.getElementById('modalUploadBuktiTransfer'),
     document.getElementById('modalKonfirmasiProses'),
     document.getElementById('modalKonfirmasiAktif')
    ].forEach(function (el) {
        if (el && el.parentNode !== document.body) {
            document.body.appendChild(el);
        }
    });

    const urlDetailTemplate    = @json(route('superadmin.pesanan-kartu.detail', ['no_pesanan' => '__NO__']));
    const urlStoreItemTemplate = @json(route('superadmin.pesanan-kartu.detail.items.store', ['no_pesanan' => '__NO__']));
    const csrfToken = @json(csrf_token());
    const DEBUG = @json((bool) config('app.debug'));

    function escapeHtml(str) {
        return String(str ?? '')
            .replaceAll('&', '&amp;')
            .replaceAll('<', '&lt;')
            .replaceAll('>', '&gt;')
            .replaceAll('"', '&quot;')
            .replaceAll("'", '&#039;');
    }

    function renderLoading(noPesanan) {
        contentEl.innerHTML = `
            <div class="text-center py-4">
                <div class="spinner-border text-primary" role="status">
                    <span class="visually-hidden">Loading...</span>
                </div>
                <p class="mt-2 text-muted mb-0">Memuat detail pesanan #${escapeHtml(noPesanan)}...</p>
            </div>
        `;
    }

    function renderError(title, status, rawText) {
        contentEl.innerHTML = `
            <div class="alert alert-danger mb-0">
                <div class="mb-2">
                    <i class="bi bi-exclamation-triangle me-2"></i>${escapeHtml(title)}
                </div>
                ${status ? `<div><strong>Status:</strong> ${escapeHtml(status)}</div>` : ''}
                ${rawText ? `<hr><pre class="small mb-0" style="white-space:pre-wrap">${escapeHtml(rawText)}</pre>` : ''}
            </div>
        `;
    }

    async function loadDetail(noPesanan) {
        renderLoading(noPesanan);
        const url = urlDetailTemplate.replace('__NO__', encodeURIComponent(noPesanan));

        try {
            const res = await fetch(url, {
                method: 'GET',
                headers: {
                    'Accept': 'application/json',
                    'X-Requested-With': 'XMLHttpRequest'
                }
            });

            const rawText = await res.text();
            let payload = null;

            try {
                payload = JSON.parse(rawText);
            } catch (_) {
                payload = null;
            }

            if (!res.ok) {
                renderError('Gagal memuat detail pesanan.', res.status, rawText);
                return;
            }

            if (!payload || !payload.html) {
                renderError('Response detail tidak valid.', res.status, rawText);
                return;
            }

            contentEl.innerHTML = payload.html;
            if (DEBUG) console.log('[DETAIL-LOADED]', { noPesanan, url });
        } catch (err) {
            renderError('Error saat fetch detail.', null, String(err));
        }
    }

    function cleanupModalArtifacts() {
        document.body.classList.remove('modal-open');
        document.body.style.removeProperty('padding-right');
        document.body.style.removeProperty('overflow');
        document.querySelectorAll('.modal-backdrop').forEach(el => el.remove());
    }

    modalEl.addEventListener('show.bs.modal', function (event) {
        const button = event.relatedTarget;
        const noPesanan = button ? button.getAttribute('data-no-pesanan') : null;

        if (!noPesanan) {
            renderError('No pesanan tidak ditemukan pada tombol.', null, null);
            return;
        }

        modalEl.setAttribute('data-current-no-pesanan', noPesanan);
        renderLoading(noPesanan);
    });

    modalEl.addEventListener('shown.bs.modal', function () {
        const noPesanan = modalEl.getAttribute('data-current-no-pesanan');
        if (noPesanan) loadDetail(noPesanan);
    });

    modalEl.addEventListener('hidden.bs.modal', function () {
        modalEl.removeAttribute('data-current-no-pesanan');
        contentEl.innerHTML = `
            <div class="text-center py-4">
                <div class="spinner-border text-primary" role="status">
                    <span class="visually-hidden">Loading...</span>
                </div>
                <p class="mt-2 text-muted mb-0">Memuat detail pesanan...</p>
            </div>
        `;
        cleanupModalArtifacts();
    });

    ['modalUploadBuktiTransfer', 'modalKonfirmasiProses', 'modalKonfirmasiAktif'].forEach(function (id) {
        const el = document.getElementById(id);
        if (el) {
            el.addEventListener('hidden.bs.modal', cleanupModalArtifacts);
        }
    });

    modalEl.addEventListener('submit', async function (e) {
        if (!e.target || e.target.id !== 'formTambahItemPesanan') return;
        e.preventDefault();

        const noPesanan = modalEl.getAttribute('data-current-no-pesanan');
        if (!noPesanan) return;

        const form = e.target;
        const nikEl = form.querySelector('[name="nik"]');
        const hargaEl = form.querySelector('[name="harga"]');
        const btn = form.querySelector('button[type="submit"]');
        const errBox = form.querySelector('#formTambahItemError');

        if (errBox) errBox.innerHTML = '';

        const nik = (nikEl ? nikEl.value : '').trim();
        const harga = hargaEl ? hargaEl.value : '';

        if (!nik) {
            if (errBox) errBox.innerHTML = `<div class="small text-danger">NIK wajib diisi.</div>`;
            return;
        }

        const url = urlStoreItemTemplate.replace('__NO__', encodeURIComponent(noPesanan));

        try {
            if (btn) btn.disabled = true;

            const res = await fetch(url, {
                method: 'POST',
                headers: {
                    'Accept': 'application/json',
                    'Content-Type': 'application/json',
                    'X-Requested-With': 'XMLHttpRequest',
                    'X-CSRF-TOKEN': csrfToken,
                },
                body: JSON.stringify({ nik, harga })
            });

            const rawText = await res.text();
            let payload = null;

            try {
                payload = JSON.parse(rawText);
            } catch (_) {
                payload = null;
            }

            if (!res.ok) {
                if (payload && payload.errors) {
                    const msgs = Object.values(payload.errors).flat()
                        .map(m => `<div class="small text-danger">${escapeHtml(m)}</div>`).join('');
                    if (errBox) errBox.innerHTML = msgs;
                } else {
                    if (errBox) errBox.innerHTML = `<div class="small text-danger">Gagal menambah item. Status ${res.status}</div>`;
                }
                return;
            }

            if (payload && payload.html) {
                contentEl.innerHTML = payload.html;
            } else {
                await loadDetail(noPesanan);
            }

            if (DEBUG) console.log('[STORE-ITEM]', { noPesanan, nik, harga });
        } catch (err) {
            if (errBox) errBox.innerHTML = `<div class="small text-danger">Error: ${escapeHtml(err)}</div>`;
        } finally {
            if (btn) btn.disabled = false;
        }
    });

    modalEl.addEventListener('click', async function (e) {
        const btn = e.target.closest('.btnHapusItemPesanan');
        if (!btn || btn.disabled) return;

        const url = btn.dataset.deleteUrl || '';
        const nik = btn.dataset.itemNik || '';
        const id  = btn.dataset.itemId || '';
        const no  = btn.dataset.noPesanan || modalEl.getAttribute('data-current-no-pesanan') || '';

        if (!url) {
            alert('Delete URL kosong. Cek data-delete-url di Blade detail.');
            return;
        }

        if (!confirm('Hapus item NIK ' + nik + ' (ID ' + id + ')?')) return;

        try {
            btn.disabled = true;

            const res = await fetch(url, {
                method: 'DELETE',
                headers: {
                    'Accept': 'application/json',
                    'X-Requested-With': 'XMLHttpRequest',
                    'X-CSRF-TOKEN': csrfToken,
                },
            });

            const rawText = await res.text();
            let payload = null;

            try {
                payload = JSON.parse(rawText);
            } catch (_) {
                payload = null;
            }

            if (!res.ok) {
                renderError('Gagal hapus item.', res.status, rawText);
                return;
            }

            if (payload && payload.html) {
                contentEl.innerHTML = payload.html;
            } else if (no) {
                await loadDetail(no);
            }
        } catch (err) {
            renderError('Error saat fetch delete.', null, String(err));
        } finally {
            btn.disabled = false;
        }
    });
});
</script>
@endpush