@extends('admin.layout')

@section('title', 'Detail Order')

@section('content')
<div class="admin-order-detail-page">

    {{-- Header --}}
    <section class="admin-order-detail-header">
        <div class="admin-order-detail-heading">
            <a
                href="{{ route('admin.orders.index') }}"
                class="admin-order-back-link"
            >
                <svg
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    stroke-width="1.8"
                    aria-hidden="true"
                >
                    <path
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        d="m15 18-6-6 6-6"
                    />
                </svg>

                Kembali ke Order
            </a>

            <span class="admin-page-eyebrow">Transaction Detail</span>

            <h1 class="admin-order-detail-token font-figures">
                {{ $order->public_token }}
            </h1>

            <p class="admin-section-description">
                Detail pelanggan, pembayaran, fulfillment, dan riwayat status.
            </p>
        </div>

        <div class="admin-order-detail-status-wrap">
            <span class="admin-order-detail-status-label">
                Status Order
            </span>

            <div id="order-status-badge">
                @include('partials.status-stamp', [
                    'status' => $order->status
                ])
            </div>
        </div>
    </section>

    {{-- Manual payment recovery --}}
    @if ($order->status === 'PENDING_PAYMENT')
        <section id="manual-payment-recovery" class="admin-order-recovery-panel">
            <div>
                <span class="admin-panel-eyebrow">Recovery Action</span>
                <h2 class="admin-panel-title font-display">Konfirmasi Pembayaran Manual</h2>
                <p>Gunakan hanya setelah invoice dan nominal pembayaran diverifikasi langsung di {{ $order->paymentGatewayLabel() }}.</p>
            </div>

            <button type="button" class="admin-button admin-button-primary" onclick="openManualPaidModal()">
                Konfirmasi Paid
            </button>
        </section>
    @endif

    @if ($order->payment_confirmation_source === 'manual_admin')
        <section class="admin-order-manual-audit">
            <strong>Pembayaran dikonfirmasi manual</strong>
            <span>{{ $order->manualPaymentConfirmedBy?->name ?? 'Admin' }} &middot; {{ optional($order->manual_payment_confirmed_at)->format('d M Y H:i') }} WIB</span>
            <p>{{ $order->manual_payment_reason }}</p>
        </section>
    @endif

    {{-- Copy actions --}}
    <section class="admin-order-copy-grid">
        <button
            type="button"
            onclick="copyText(this, orderToken)"
            class="admin-order-copy-button"
        >
            <span class="admin-order-copy-icon">
                <svg
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    stroke-width="1.7"
                    aria-hidden="true"
                >
                    <rect x="8" y="8" width="11" height="11" rx="2"></rect>
                    <path
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        d="M16 8V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h3"
                    ></path>
                </svg>
            </span>

            <span class="admin-order-copy-content">
                <small>ID Order</small>
                <strong class="font-figures">
                    {{ $order->public_token }}
                </strong>
            </span>

            <span class="admin-order-copy-action">
                Salin
            </span>
        </button>

        <button
            type="button"
            onclick="copyText(this, invoiceUrl)"
            class="admin-order-copy-button"
        >
            <span class="admin-order-copy-icon">
                <svg
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    stroke-width="1.7"
                    aria-hidden="true"
                >
                    <path
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        d="M10 13a5 5 0 0 0 7.07.07l2-2a5 5 0 0 0-7.07-7.07l-1.15 1.15"
                    />
                    <path
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        d="M14 11a5 5 0 0 0-7.07-.07l-2 2A5 5 0 0 0 12 20l1.15-1.15"
                    />
                </svg>
            </span>

            <span class="admin-order-copy-content">
                <small>Invoice Publik</small>
                <strong>Salin link invoice pelanggan</strong>
            </span>

            <span class="admin-order-copy-action">
                Salin
            </span>
        </button>
    </section>

    {{-- Information cards --}}
    <section class="admin-order-info-grid">

        {{-- Customer information --}}
        <article class="admin-order-info-card">
            <header class="admin-order-card-header">
                <div class="admin-order-card-heading">
                    <span class="admin-order-card-icon">
                        <svg
                            viewBox="0 0 24 24"
                            fill="none"
                            stroke="currentColor"
                            stroke-width="1.7"
                            aria-hidden="true"
                        >
                            <circle cx="12" cy="8" r="4"></circle>
                            <path
                                stroke-linecap="round"
                                stroke-linejoin="round"
                                d="M4 21a8 8 0 0 1 16 0"
                            ></path>
                        </svg>
                    </span>

                    <div>
                        <span class="admin-panel-eyebrow">
                            Customer
                        </span>

                        <h2 class="admin-panel-title font-display">
                            Informasi Pemesan
                        </h2>
                    </div>
                </div>
            </header>

            <div class="admin-order-detail-list">
                <div class="admin-order-detail-row">
                    <span>Produk</span>
                    @if ($order->product && ! $order->product->trashed())
                        <a href="{{ route('admin.products.show', $order->product) }}" class="admin-entity-link">
                            {{ $order->productName() }}
                        </a>
                    @else
                        <strong>{{ $order->productName() }}</strong>
                    @endif
                </div>

                @if ($order->variantName())
                    <div class="admin-order-detail-row">
                        <span>{{ $order->variantOptionName() ?: 'Variant' }}</span>
                        <strong>{{ $order->variantLabel() }}</strong>
                    </div>
                @endif

                @foreach ($order->checkoutAnswerRows() as $answer)
                    <div class="admin-order-detail-row">
                        <span>{{ $answer['label'] }}</span>
                        <strong class="admin-order-break">{{ $answer['value'] }}</strong>
                    </div>
                @endforeach

                @unless ($order->isRobuxOrder())
                    <div class="admin-order-detail-row">
                        <span>Nama</span>
                        <strong>{{ $order->customer_name }}</strong>
                    </div>
                @endunless

                <div class="admin-order-detail-row">
                    <span>WhatsApp</span>
                    <strong class="font-figures">
                        {{ $order->customer_whatsapp }}
                    </strong>
                </div>

                @if (filled($order->customer_email))
                    <div class="admin-order-detail-row">
                        <span>Email</span>
                        <strong class="admin-order-break">{{ $order->customer_email }}</strong>
                    </div>
                @endif

                @if ($order->isRobuxOrder())
                    <div class="admin-order-detail-row">
                        <span>Jumlah Robux</span>
                        <strong class="font-figures">{{ number_format($order->robuxAmount() ?? 0, 0, ',', '.') }} Robux</strong>
                    </div>
                @elseif ($order->isBatch())
                    <div class="admin-order-detail-row">
                        <span>Jumlah</span>
                        <strong class="font-figures">
                            {{ $order->quantity }}
                            {{ strtolower(\App\Models\Product::unitLabelForType($order->productType())) }}
                        </strong>
                    </div>
                @endif

                <div class="admin-order-detail-row is-price">
                    <span>Harga</span>
                    <strong class="font-figures">
                        Rp {{ number_format($order->price_at_order, 0, ',', '.') }}
                    </strong>
                </div>
                @if ($order->discount_amount > 0)
                    <div class="admin-order-detail-row">
                        <span>Voucher</span>
                        <strong class="font-figures">{{ $order->voucher_code_snapshot }}</strong>
                    </div>
                    <div class="admin-order-detail-row">
                        <span>Diskon</span>
                        <strong class="font-figures">- Rp {{ number_format($order->discount_amount, 0, ',', '.') }}</strong>
                    </div>
                    <div class="admin-order-detail-row is-price">
                        <span>Total Setelah Diskon</span>
                        <strong class="font-figures">Rp {{ number_format($order->payableAmount(), 0, ',', '.') }}</strong>
                    </div>
                @endif
                <div class="admin-order-detail-row">
                    <span>Payment Gateway</span>
                    <strong>{{ $order->paymentGatewayLabel() }}</strong>
                </div>
                <div class="admin-order-detail-row">
                    <span>Biaya Pembayaran</span>
                    <strong>{{ $order->fee_payer === 'seller' ? 'Toko' : 'Pembeli' }}</strong>
                </div>
                @if ($order->qris_fee !== null)
                    <div class="admin-order-detail-row">
                        <span>Fee QRIS</span>
                        <strong class="font-figures">Rp {{ number_format($order->qris_fee, 0, ',', '.') }}</strong>
                    </div>
                @endif
                @if ($order->qris_total_payment !== null)
                    <div class="admin-order-detail-row is-price">
                        <span>Total Dibayar Customer</span>
                        <strong class="font-figures">Rp {{ number_format($order->qris_total_payment, 0, ',', '.') }}</strong>
                    </div>
                @endif
                @if ($order->payment_reference)
                    <div class="admin-order-detail-row">
                        <span>Reference Gateway</span>
                        <strong class="font-figures">{{ $order->payment_reference }}</strong>
                    </div>
                @endif
            </div>
        </article>

        {{-- Fulfillment status --}}
        <article class="admin-order-info-card">
            <header class="admin-order-card-header">
                <div class="admin-order-card-heading">
                    <span class="admin-order-card-icon">
                        <svg
                            viewBox="0 0 24 24"
                            fill="none"
                            stroke="currentColor"
                            stroke-width="1.7"
                            aria-hidden="true"
                        >
                            <path
                                stroke-linecap="round"
                                stroke-linejoin="round"
                                d="M12 3l7 3v6c0 4.5-3 8-7 9-4-1-7-4.5-7-9V6l7-3Z"
                            />
                            <path
                                stroke-linecap="round"
                                stroke-linejoin="round"
                                d="m9 12 2 2 4-4"
                            />
                        </svg>
                    </span>

                    <div>
                        <span class="admin-panel-eyebrow">
                            Fulfillment
                        </span>

                        <h2 class="admin-panel-title font-display">
                            Status Pemrosesan
                        </h2>
                    </div>
                </div>
            </header>

            <div class="admin-order-detail-list">
                <div class="admin-order-detail-row">
                    <span>Status</span>
                    <strong id="order-status">
                        {{ $order->status }}
                    </strong>
                </div>

                <div class="admin-order-detail-row">
                    <span>Percobaan</span>
                    <strong
                        id="order-attempts"
                        class="font-figures"
                    >
                        {{ $order->fulfillment_attempts }}
                    </strong>
                </div>

                <div
                    id="order-error-wrap"
                    class="admin-order-error-box
                    @if (! $order->last_fulfillment_error) hidden @endif"
                >
                    <span>Error Terakhir</span>

                    <p id="order-error">
                        {{ $order->last_fulfillment_error }}
                    </p>
                </div>

                <div
                    id="manual-deliver-wrap"
                    class="admin-order-manual-wrap
                    @if (! in_array($order->status, ['FULFILLMENT_FAILED', 'PAID'])) hidden @endif"
                >
                    <button
                        type="button"
                        id="manual-deliver-btn"
                        onclick="markManualDeliver()"
                        class="admin-button admin-button-primary admin-order-manual-button"
                    >
                        Tandai Selesai Manual
                    </button>
                </div>
            </div>
        </article>
    </section>

    {{-- Delivered stock --}}
    @if ($order->status === 'DELIVERED' && $order->stockLinks->isNotEmpty())
        @php
            $unitLabel = \App\Models\Product::unitLabelForType($order->productType());

            $copyAllText = collect([
                $order->productName() .
                ($order->isBatch()
                    ? ' - ' . $order->quantity . ' ' . $unitLabel
                    : '')
            ])
                ->concat(
                    $order->stockLinks->map(
                        function ($link, $index) use ($unitLabel) {
                            $payload = $link->deliveryPayload();

                            $lines = collect($payload)
                                ->map(
                                    fn ($value, $key) =>
                                        ucwords(str_replace('_', ' ', $key)) .
                                        ': ' .
                                        $value
                                )
                                ->implode("\n");

                            return "\n{$unitLabel} " .
                                ($index + 1) .
                                "\n" .
                                $lines;
                        }
                    )
                )
                ->implode("\n");
        @endphp

        <section class="admin-order-delivery-panel">
            <header class="admin-order-delivery-header">
                <div>
                    <span class="admin-panel-eyebrow">
                        Delivery Detail
                    </span>

                    <h2 class="admin-panel-title font-display">
                        {{ $unitLabel }} Terkirim
                        @if ($order->isBatch())
                            ({{ $order->quantity }})
                        @endif
                    </h2>
                </div>

                <button
                    type="button"
                    onclick="copyText(this, {{ \Illuminate\Support\Js::from($copyAllText) }})"
                    class="admin-order-copy-all"
                >
                    <svg
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        stroke-width="1.7"
                        aria-hidden="true"
                    >
                        <rect x="8" y="8" width="11" height="11" rx="2"></rect>
                        <path
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            d="M16 8V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h3"
                        ></path>
                    </svg>

                    <span>Salin Semua</span>
                </button>
            </header>

            <div class="admin-order-delivery-list">
                @foreach ($order->stockLinks as $link)
                    @php
                        $payload = $link->deliveryPayload();
                    @endphp

                    <article class="admin-order-delivery-card">
                        <header class="admin-order-delivery-card-header">
                            <span>
                                {{ $unitLabel }} {{ $loop->iteration }}
                            </span>

                            <small class="font-figures">
                                stock #{{ $link->productStock->id }}

                                @if ($link->productStock->delivered_at)
                                    &middot;
                                    {{ $link->productStock->delivered_at->format('d M H:i') }}
                                    WIB
                                @endif
                            </small>
                        </header>

                        <div class="admin-order-delivery-content">
                            @forelse ($payload as $key => $value)
                                <div class="admin-order-delivery-row">
                                    <span>
                                        {{ ucwords(str_replace('_', ' ', $key)) }}
                                    </span>

                                    <strong class="font-figures">
                                        {{ $value }}
                                    </strong>
                                </div>
                            @empty
                                <p class="admin-order-delivery-empty">
                                    Detail pengiriman kosong.
                                </p>
                            @endforelse
                        </div>
                    </article>
                @endforeach
            </div>
        </section>
    @endif

    {{-- Timeline --}}
    <section class="admin-order-timeline-panel">
        <header class="admin-order-timeline-header">
            <div>
                <span class="admin-panel-eyebrow">
                    Status History
                </span>

                <h2 class="admin-panel-title font-display">
                    Linimasa Status
                </h2>
            </div>

            <span class="admin-order-live-indicator">
                <span></span>
                Update otomatis
            </span>
        </header>

        <div class="admin-order-timeline-table-scroll">
            <table class="admin-order-timeline-table">
                <thead>
                    <tr>
                        <th>Dari</th>
                        <th>Ke</th>
                        <th>Alasan</th>
                        <th>Waktu</th>
                    </tr>
                </thead>

                <tbody id="status-history-body">
                    @forelse ($order->statusHistory as $history)
                        <tr>
                            <td>
                                {{ $history->from_status ?? '-' }}
                            </td>

                            <td>
                                <strong>{{ $history->to_status }}</strong>
                            </td>

                            <td>
                                {{ $history->reason ?? '-' }}
                            </td>

                            <td class="font-figures">
                                {{ $history->created_at->format('d M H:i') }}
                                WIB
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="4">
                                <div class="admin-order-timeline-empty">
                                    Belum ada riwayat status.
                                </div>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </section>
</div>

@if ($order->status === 'PENDING_PAYMENT')
    <div id="manual-paid-modal" class="admin-order-recovery-modal" aria-hidden="true">
        <button type="button" class="admin-order-recovery-backdrop" onclick="closeManualPaidModal()" aria-label="Tutup"></button>
        <div class="admin-order-recovery-dialog" role="dialog" aria-modal="true" aria-labelledby="manual-paid-title">
            <button type="button" class="admin-order-recovery-close" onclick="closeManualPaidModal()" aria-label="Tutup">×</button>
            <span class="admin-panel-eyebrow">Konfirmasi Pembayaran</span>
            <h2 id="manual-paid-title" class="font-display">Konfirmasi Paid Manual</h2>
            <div class="admin-order-recovery-summary">
                <span>Invoice</span><strong class="font-figures">{{ $order->public_token }}</strong>
                <span>Gateway</span><strong>{{ $order->paymentGatewayLabel() }}</strong>
                <span>Nominal order</span><strong class="font-figures">Rp{{ number_format($order->payableAmount(), 0, ',', '.') }}</strong>
                @if ($order->qris_total_payment !== null)
                    <span>Total QRIS</span><strong class="font-figures">Rp{{ number_format($order->qris_total_payment, 0, ',', '.') }}</strong>
                @endif
                @if ($order->payment_reference)
                    <span>Reference</span><strong class="font-figures">{{ $order->payment_reference }}</strong>
                @endif
            </div>
            <p>Cocokkan invoice/reference, nominal transaksi, dan status pembayaran langsung di {{ $order->paymentGatewayLabel() }} sebelum mengonfirmasi.</p>
            <label for="manual-paid-reason">Alasan konfirmasi <small>(wajib)</small></label>
            <textarea id="manual-paid-reason" maxlength="180" rows="4" placeholder="Contoh: Pembayaran sudah berhasil di {{ $order->paymentGatewayLabel() }}, tetapi status order belum diperbarui."></textarea>
            <p id="manual-paid-error" class="admin-order-recovery-error hidden"></p>
            <div class="admin-order-recovery-actions">
                <button type="button" class="admin-button admin-button-ghost" onclick="closeManualPaidModal()">Batal</button>
                <button type="button" id="manual-paid-submit" class="admin-button admin-button-primary" onclick="confirmManualPaid()">Ya, Konfirmasi Paid</button>
            </div>
        </div>
    </div>
@endif

<script>
const orderToken = @json($order->public_token);
const statusFragmentUrl = @json(route('admin.orders.status-fragment', $order));
const manualPaidUrl = @json(route('admin.orders.confirm-paid', $order));
const manualDeliverUrl = @json(route('admin.orders.manual-deliver', $order));
const invoiceUrl = @json(route('invoice.show', $order->public_token));
const csrfToken = @json(csrf_token());

function copyText(button, text) {
    navigator.clipboard.writeText(text).then(() => {
        const target =
            button.querySelector('.admin-order-copy-action') ??
            button.querySelector('span:last-child') ??
            button;

        const original = target.textContent;

        target.textContent = 'Tersalin!';

        window.setTimeout(() => {
            target.textContent = original;
        }, 1500);
    }).catch(() => {
        pushToast('Gagal menyalin data.', 'error');
    });
}


function openManualPaidModal() {
    const modal = document.getElementById('manual-paid-modal');
    if (!modal) return;
    modal.classList.add('is-open');
    modal.setAttribute('aria-hidden', 'false');
    document.documentElement.classList.add('admin-order-recovery-open');
    window.setTimeout(() => document.getElementById('manual-paid-reason')?.focus(), 30);
}

function closeManualPaidModal() {
    const modal = document.getElementById('manual-paid-modal');
    if (!modal) return;
    modal.classList.remove('is-open');
    modal.setAttribute('aria-hidden', 'true');
    document.documentElement.classList.remove('admin-order-recovery-open');
}

async function confirmManualPaid() {
    const reason = document.getElementById('manual-paid-reason')?.value.trim() ?? '';
    const error = document.getElementById('manual-paid-error');
    const button = document.getElementById('manual-paid-submit');

    if (reason.length < 5) {
        if (error) { error.textContent = 'Alasan minimal 5 karakter.'; error.classList.remove('hidden'); }
        return;
    }

    if (error) error.classList.add('hidden');
    if (button) { button.disabled = true; button.textContent = 'Memproses...'; }

    try {
        const response = await fetch(manualPaidUrl, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Accept': 'application/json',
                'X-CSRF-TOKEN': csrfToken,
            },
            body: JSON.stringify({ reason }),
        });
        const json = await response.json();

        if (!response.ok) {
            throw new Error(json.message ?? Object.values(json.errors ?? {})[0]?.[0] ?? 'Konfirmasi gagal.');
        }

        closeManualPaidModal();
        pushToast(json.message ?? 'Pembayaran dikonfirmasi.', 'success');
        await refreshStatus();
        window.setTimeout(() => window.location.reload(), 700);
    } catch (e) {
        if (error) { error.textContent = e.message; error.classList.remove('hidden'); }
        if (button) { button.disabled = false; button.textContent = 'Ya, Konfirmasi Paid'; }
    }
}

async function markManualDeliver() {
    if (!confirm('Tandai order ini selesai secara manual?')) {
        return;
    }

    const button = document.getElementById('manual-deliver-btn');

    if (!button) {
        return;
    }

    button.disabled = true;
    button.textContent = 'Memproses...';

    try {
        const response = await fetch(manualDeliverUrl, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Accept': 'application/json',
                'X-CSRF-TOKEN': csrfToken,
            },
        });

        const json = await response.json();

        if (!response.ok) {
            pushToast(
                json.message ?? 'Gagal menandai order.',
                'error'
            );

            button.disabled = false;
            button.textContent = 'Tandai Selesai Manual';

            return;
        }

        pushToast(
            json.message ?? 'Order ditandai selesai manual.',
            'success'
        );

        await refreshStatus();
    } catch (error) {
        pushToast('Terjadi kesalahan jaringan.', 'error');

        button.disabled = false;
        button.textContent = 'Tandai Selesai Manual';
    }
}

const statusBadgeClass = {
    DELIVERED: 'badge-success',
    DELIVERED_MANUAL: 'badge-success',
    PAID: 'badge-warning',
    FULFILLING: 'badge-warning',
    FULFILLMENT_FAILED: 'badge-danger',
    EXPIRED: 'badge-danger',
    REFUNDED: 'badge-danger',
};

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

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

        if (!response.ok) {
            return;
        }

        const json = await response.json();

        const recoveryPanel = document.getElementById('manual-payment-recovery');
        if (recoveryPanel) recoveryPanel.classList.toggle('hidden', !json.can_confirm_paid);

        const statusElement =
            document.getElementById('order-status');

        const attemptsElement =
            document.getElementById('order-attempts');

        if (statusElement) {
            statusElement.textContent = json.status;
        }

        if (attemptsElement) {
            attemptsElement.textContent =
                json.fulfillment_attempts;
        }

        const badgeClass =
            statusBadgeClass[json.status] ??
            'badge-neutral';

        const statusBadge =
            document.getElementById('order-status-badge');

        if (statusBadge) {
            statusBadge.innerHTML = `
                <span class="badge ${badgeClass}">
                    <span class="badge-dot"></span>
                    ${escapeHtml(
                        json.status.replaceAll('_', ' ')
                    )}
                </span>
            `;
        }

        const errorWrap =
            document.getElementById('order-error-wrap');

        const errorElement =
            document.getElementById('order-error');

        if (json.last_fulfillment_error) {
            if (errorElement) {
                errorElement.textContent =
                    json.last_fulfillment_error;
            }

            errorWrap?.classList.remove('hidden');
        } else {
            errorWrap?.classList.add('hidden');
        }

        const manualWrap =
            document.getElementById('manual-deliver-wrap');

        manualWrap?.classList.toggle(
            'hidden',
            !json.can_manual_deliver
        );

        const manualButton =
            document.getElementById('manual-deliver-btn');

        if (manualButton && json.can_manual_deliver) {
            manualButton.disabled = false;
            manualButton.textContent =
                'Tandai Selesai Manual';
        }

        const historyBody =
            document.getElementById('status-history-body');

        if (!historyBody) {
            return;
        }

        historyBody.innerHTML = json.status_history.length
            ? json.status_history.map((history) => `
                <tr>
                    <td>
                        ${escapeHtml(history.from_status ?? '-')}
                    </td>

                    <td>
                        <strong>
                            ${escapeHtml(history.to_status)}
                        </strong>
                    </td>

                    <td>
                        ${escapeHtml(history.reason ?? '-')}
                    </td>

                    <td class="font-figures">
                        ${escapeHtml(history.created_at)} WIB
                    </td>
                </tr>
            `).join('')
            : `
                <tr>
                    <td colspan="4">
                        <div class="admin-order-timeline-empty">
                            Belum ada riwayat status.
                        </div>
                    </td>
                </tr>
            `;
    } catch (error) {
        // Polling berikutnya akan mencoba kembali.
    }
}

document.addEventListener('keydown', (event) => {
    if (event.key === 'Escape') closeManualPaidModal();
});

window.setInterval(refreshStatus, 5000);
</script>
@endsection