@extends('layouts.app')

@section('title', 'Invoice - GTGStore')
@section('description', 'Detail invoice dan status pembayaran GTGStore.')
@section('robots', 'noindex, nofollow')
@section('canonical', route('invoice.show', $order->public_token))

@section('content')
<section class="storefront-invoice-page"
         data-invoice-page
         data-public-token="{{ $order->public_token }}"
         data-current-status="{{ $order->status }}"
         data-product-type="{{ $order->productType() ?? 'unknown' }}"
         data-status-url="{{ url('/api/orders/' . $order->public_token . '/status') }}"
         data-invoice-url="{{ route('invoice.show', $order->public_token) }}"
         data-polling-enabled="{{ in_array($order->status, ['PENDING_PAYMENT', 'PAID', 'FULFILLING', 'FULFILLMENT_FAILED'], true) ? 'true' : 'false' }}">
<div class="storefront-invoice-shell">

    <div class="storefront-invoice-card" data-invoice-card>
        <div class="storefront-invoice-decorations" aria-hidden="true">
    <div class="storefront-invoice-watermark">G</div>

    <svg
        class="storefront-invoice-leaf storefront-invoice-leaf-top"
        viewBox="0 0 120 170"
        fill="none"
    >
        <path
            d="M20 158C30 112 48 68 91 18"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
        />
        <path d="M48 104C22 94 11 72 14 50C38 55 53 71 48 104Z" fill="currentColor"/>
        <path d="M67 70C57 42 66 20 84 7C96 29 91 53 67 70Z" fill="currentColor"/>
        <path d="M35 135C16 130 6 116 5 99C24 100 38 111 35 135Z" fill="currentColor"/>
    </svg>

    <svg
        class="storefront-invoice-leaf storefront-invoice-leaf-bottom"
        viewBox="0 0 120 170"
        fill="none"
    >
        <path
            d="M20 158C30 112 48 68 91 18"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
        />
        <path d="M48 104C22 94 11 72 14 50C38 55 53 71 48 104Z" fill="currentColor"/>
        <path d="M67 70C57 42 66 20 84 7C96 29 91 53 67 70Z" fill="currentColor"/>
        <path d="M35 135C16 130 6 116 5 99C24 100 38 111 35 135Z" fill="currentColor"/>
    </svg>
</div>

<div class="storefront-invoice-content">
        <div class="storefront-invoice-hero">
            <div class="storefront-invoice-heading">
                <span class="storefront-invoice-label">Invoice</span>
                @php
                    $invoiceTokenDisplay = strlen($order->public_token) > 26
                        ? substr($order->public_token, 0, 14) . '…' . substr($order->public_token, -9)
                        : $order->public_token;
                @endphp
                <h1 class="storefront-invoice-token font-figures"
                    title="{{ $order->public_token }}"
                    aria-label="Invoice {{ $order->public_token }}">
                    {{ $invoiceTokenDisplay }}
                </h1>
                <p class="storefront-invoice-subtitle">
                Detail transaksi dan pembayaran aman melalui GTGStore.
                </p>
            </div>
            
            <span id="invoice-status"
                    data-status="{{ $order->status }}"
                    class="storefront-invoice-status
                        {{ in_array($order->status, ['DELIVERED', 'DELIVERED_MANUAL']) ? 'is-success' :
                        ($order->status === 'PENDING_PAYMENT' ? 'is-pending' :
                        ($order->status === 'EXPIRED' || $order->status === 'REFUNDED' ? 'is-danger' : 'is-neutral')) }}">{{ $order->status }}</span>
        </div>

        {{-- Salin ID dan link terpisah, supaya tiap bagian bisa ditempel sendiri
             (misal ID buat konfirmasi cepat, link buat dibagikan) tanpa format
             gabungan yang berantakan saat ditempel di WhatsApp. --}}
        <div class="storefront-invoice-copy-grid">
            <button type="button"
                    data-copy-text="{{ $order->public_token }}"
                    class="storefront-invoice-copy-button">
                <span class="truncate storefront-invoice-copy-value">ID: {{ $order->public_token }}</span>
                <span class="storefront-invoice-copy-action">Salin</span>
            </button>
            <button type="button"
                    data-copy-text="{{ route('invoice.show', $order->public_token) }}"
                    class="storefront-invoice-copy-button">
                <span class="truncate storefront-invoice-copy-value">Link Invoice</span>
                <span class="storefront-invoice-copy-action">Salin</span>
            </button>
        </div>

        @if (in_array($order->status, ['PAID', 'FULFILLING', 'DELIVERED', 'DELIVERED_MANUAL'], true))
            @php
                $supportMessage = rawurlencode(
                    'Halo Admin GTGStore, saya membutuhkan bantuan untuk invoice ' . $order->public_token . '.'
                );
            @endphp
            <section class="storefront-purchase-success" aria-labelledby="purchase-success-title">
                <div class="storefront-purchase-success-icon" aria-hidden="true">
                    <svg viewBox="0 0 24 24" fill="none">
                        <path d="m7 12.5 3.1 3.1L17.5 8" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg>
                </div>
                <div class="storefront-purchase-success-copy">
                    <h2 id="purchase-success-title" class="storefront-purchase-success-title">
                        Terima kasih atas pembelian Anda!
                    </h2>
                    <p class="storefront-purchase-success-text">
                        Pembayaran sudah kami terima. Jika ada kendala pada akun atau pengiriman, tim admin siap membantu.
                    </p>
                    <a href="https://wa.me/{{ config('services.whatsapp.admin_number') }}?text={{ $supportMessage }}"
                       target="_blank" rel="noopener"
                       class="storefront-purchase-success-button">
                        <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
                            <path d="M20 11.6a8 8 0 0 1-11.8 7L4 20l1.4-4.1A8 8 0 1 1 20 11.6Z" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
                            <path d="M9.1 8.7c.2-.5.4-.5.7-.5h.5c.2 0 .3 0 .5.4l.8 1.8c.1.3.1.4-.1.6l-.6.7c-.2.2-.1.4 0 .6.5.9 1.2 1.6 2.1 2.1.2.1.4.2.6 0l.8-.9c.2-.2.4-.2.6-.1l1.7.8c.3.1.4.3.4.5 0 .3-.2 1.3-.9 1.8-.6.5-1.5.7-2.4.4-1-.3-2.4-.9-4-2.3-1.2-1.2-2.1-2.7-2.3-3.8-.2-.8 0-1.6.4-2.1.4-.5.8-.7 1.2-.7Z" fill="currentColor"/>
                        </svg>
                        Hubungi Admin via WhatsApp
                    </a>
                </div>
            </section>
        @endif

        <div class="storefront-receipt-divider" aria-hidden="true">
        <span></span>
        </div>

        @if ($order->status === 'PENDING_PAYMENT')
            @php
                $isExpiredQrisAwaitingReconciliation = in_array($order->paymentGatewayProvider(), ['dompetx', 'belibayar', 'binderpay'], true)
                    && filled($order->payment_reference)
                    && $order->qris_expired_at?->isPast();
            @endphp
            <div class="storefront-qris-section">
                <div class="storefront-qris-header">
    <div class="storefront-qris-icon">
        <svg viewBox="0 0 24 24" fill="none">
            <rect
                x="3"
                y="3"
                width="7"
                height="7"
                rx="1"
                stroke="currentColor"
                stroke-width="1.7"
            />
            <rect
                x="14"
                y="3"
                width="7"
                height="7"
                rx="1"
                stroke="currentColor"
                stroke-width="1.7"
            />
            <rect
                x="3"
                y="14"
                width="7"
                height="7"
                rx="1"
                stroke="currentColor"
                stroke-width="1.7"
            />
            <path
                d="M14 14h3v3h4v4h-3v-2h-4v-5Z"
                stroke="currentColor"
                stroke-width="1.7"
                stroke-linejoin="round"
            />
        </svg>
    </div>

    <div>
        <span class="storefront-qris-eyebrow">
            Pembayaran Aman
        </span>

        <h2 class="storefront-qris-title font-display">
            Bayar dengan QRIS
        </h2>
    </div>
</div>
                
                @if ($order->hasUsableQris())
                    @php $isSandboxQris = str_starts_with((string) $order->qris_payment_string, 'DUMMY-QRIS-'); @endphp
                    @if ($isSandboxQris)
                        <p class="storefront-sandbox-notice">
                            Mode simulasi lokal - QR di bawah bukan QRIS asli. Gunakan <code>php artisan pakasir:simulate-payment {{ $order->public_token }}</code> untuk mensimulasikan pembayaran berhasil.
                        </p>
                    @endif
                    <div id="qrcode-wrap" class="storefront-qris-wrap">
                        <div class="storefront-qris-corner storefront-qris-corner-top-left"></div>
                        <div class="storefront-qris-corner storefront-qris-corner-top-right"></div>
                        <div class="storefront-qris-corner storefront-qris-corner-bottom-left"></div>
                        <div class="storefront-qris-corner storefront-qris-corner-bottom-right"></div>
                        <div id="qrcode"></div>
                        <p id="qrcode-fallback" class="hidden storefront-qris-fallback font-figures break-all">{{ $order->qris_payment_string }}</p>
                        <p class="storefront-qris-instruction">Scan pakai aplikasi e-wallet atau mobile banking apa pun yang mendukung QRIS.</p>
                        <div class="storefront-qris-trust">
    <span>
        <svg viewBox="0 0 24 24" fill="none">
            <path
                d="M12 3l7 3v6c0 4.5-3 8-7 9-4-1-7-4.5-7-9V6l7-3Z"
                stroke="currentColor"
                stroke-width="1.7"
                stroke-linejoin="round"
            />
            <path
                d="m9 12 2 2 4-4"
                stroke="currentColor"
                stroke-width="1.7"
                stroke-linecap="round"
                stroke-linejoin="round"
            />
        </svg>

        Transaksi terlindungi
    </span>

    <span>
        <svg viewBox="0 0 24 24" fill="none">
            <path
                d="M12 8v4l3 2"
                stroke="currentColor"
                stroke-width="1.7"
                stroke-linecap="round"
                stroke-linejoin="round"
            />
            <circle
                cx="12"
                cy="12"
                r="9"
                stroke="currentColor"
                stroke-width="1.7"
            />
        </svg>

        Status diperbarui otomatis
    </span>
</div>
                    </div>

                    <div id="qris-render-state" class="storefront-qris-state is-error hidden">
                        <p id="qris-render-message" class="storefront-qris-state-message">
                            QRIS berhasil dibuat, tetapi gambarnya gagal ditampilkan. Silakan coba lagi.
                        </p>
                        <button id="qris-render-retry-button" type="button" class="storefront-qris-retry-button">
                            Muat Ulang QRIS
                        </button>
                    </div>
                @else
                    @if ($isExpiredQrisAwaitingReconciliation)
                        <div id="qris-generation-state" class="storefront-qris-state">
                            <p id="qris-generation-message" class="storefront-qris-state-message">
                                QRIS sudah kedaluwarsa. Kami sedang memastikan status pembayaran terakhir. Halaman ini akan diperbarui otomatis.
                            </p>
                        </div>
                    @else
                        <div id="qris-generation-state" class="storefront-qris-state is-error">
                            <p id="qris-generation-message" class="storefront-qris-state-message">
                                {{ $order->qris_generation_status === 'creating'
                                    ? 'QRIS masih sedang disiapkan. Tunggu sebentar lalu coba lagi.'
                                    : 'QRIS belum berhasil dibuat. Silakan coba lagi.' }}
                            </p>

                            <form id="qris-retry-form"
                                  method="POST"
                                  action="{{ route('invoice.qris.retry', $order->public_token) }}">
                                @csrf
                                <button id="qris-retry-button" type="submit" class="storefront-qris-retry-button">
                                    Coba Lagi
                                </button>
                            </form>
                        </div>
                    @endif
                @endif
            </div>
        @endif


        <div class="storefront-invoice-summary" aria-label="Ringkasan invoice">
            <div class="storefront-invoice-summary-row">
                <span class="storefront-invoice-summary-label">Produk</span>
                <span class="storefront-invoice-summary-value text-right">{{ $order->productName() }}</span>
            </div>
            @if ($order->variantName())
                <div class="storefront-invoice-summary-row">
                    <span class="storefront-invoice-summary-label">{{ $order->variantOptionName() ?: 'Variant' }}</span>
                    <span class="storefront-invoice-summary-value text-right">{{ $order->variantLabel() }}</span>
                </div>
            @endif
            @foreach ($order->checkoutAnswerRows() as $answer)
                <div class="storefront-invoice-summary-row">
                    <span class="storefront-invoice-summary-label">{{ $answer['label'] }}</span>
                    <span class="storefront-invoice-summary-value text-right">{{ $answer['value'] }}</span>
                </div>
            @endforeach
            @unless ($order->isRobuxOrder())
                <div class="storefront-invoice-summary-row">
                    <span class="storefront-invoice-summary-label">Nama Pemesan</span>
                    <span class="storefront-invoice-summary-value">{{ $order->customer_name }}</span>
                </div>
            @else
                <div class="storefront-invoice-summary-row">
                    <span class="storefront-invoice-summary-label">Nomor WhatsApp</span>
                    <span class="storefront-invoice-summary-value font-figures">{{ $order->customer_whatsapp }}</span>
                </div>
            @endunless
            @if ($order->isRobuxOrder())
                <div class="storefront-invoice-summary-row">
                    <span class="storefront-invoice-summary-label">Jumlah Robux</span>
                    <span class="font-figures storefront-invoice-summary-value">{{ number_format($order->robuxAmount() ?? 0, 0, ',', '.') }} Robux</span>
                </div>
            @elseif ($order->isBatch())
                <div class="storefront-invoice-summary-row">
                    <span class="storefront-invoice-summary-label">Jumlah</span>
                    <span class="font-figures storefront-invoice-summary-value">{{ $order->quantity }} {{ strtolower(\App\Models\Product::unitLabelForType($order->productType())) }}</span>
                </div>
            @endif
            <div class="storefront-invoice-summary-row">
                <span class="storefront-invoice-summary-label">Harga Produk</span>
                <span class="font-figures storefront-invoice-summary-value">Rp {{ number_format($order->price_at_order, 0, ',', '.') }}</span>
            </div>
            @if ($order->discount_amount > 0)
                <div class="storefront-invoice-summary-row">
                    <span class="storefront-invoice-summary-label">Voucher {{ $order->voucher_code_snapshot }}</span>
                    <span class="font-figures storefront-invoice-summary-value">- Rp {{ number_format($order->discount_amount, 0, ',', '.') }}</span>
                </div>
                <div class="storefront-invoice-summary-row">
                    <span class="storefront-invoice-summary-label">Total Setelah Diskon</span>
                    <span class="font-figures storefront-invoice-summary-value">Rp {{ number_format($order->payableAmount(), 0, ',', '.') }}</span>
                </div>
            @endif
            @if ($order->status === 'PENDING_PAYMENT' && $order->qris_fee)
                <div class="storefront-invoice-summary-row">
                    <span class="storefront-invoice-summary-label">Biaya QRIS</span>
                    <span class="font-figures storefront-invoice-summary-value">Rp {{ number_format($order->qris_fee, 0, ',', '.') }}</span>
                </div>
                <div class="storefront-invoice-total-panel">
                <div>
                    <span class="storefront-invoice-total-label">
                    Total Pembayaran
                    </span>

                    <p class="storefront-invoice-total-note">
                     Sudah termasuk biaya transaksi QRIS.
                    </p>
            </div>

    <span class="storefront-invoice-total font-figures">
        Rp {{ number_format($order->qris_total_payment ?? $order->payableAmount(), 0, ',', '.') }}
    </span>
</div>
            @endif
            <div class="storefront-invoice-summary-row">
                <span class="storefront-invoice-summary-label">Kedaluwarsa</span>
                @if ($order->status === 'PENDING_PAYMENT')
                    {{-- Countdown realtime di-render JS dari data-expires-at (lihat
                         script di bawah). Teks statis jadi fallback kalau JS belum
                         jalan (mis. sesaat sebelum hydrate) atau browser tidak
                         mendukung. --}}
                    <span id="expiry-countdown"
                          data-expires-at="{{ $order->expires_at->toIso8601String() }}"
                          data-qris-expires-at="{{ $order->qris_expired_at?->toIso8601String() }}"
                          class="storefront-invoice-countdown font-figures" aria-live="polite">
                        {{ $order->expires_at->format('d M Y, H:i') }} WIB
                    </span>
                @else
                    <span class="storefront-invoice-summary-value font-figures">{{ $order->expires_at->format('d M Y, H:i') }} WIB</span>
                @endif
            </div>
        </div>

        <div id="invoice-detail-section" class="storefront-invoice-detail">
            @if ($order->status === 'DELIVERED')
                @php
                    // Batasi kartu yang benar-benar dirender di halaman ke 2 unit
                    // pertama -- sengaja bukan disembunyikan lewat CSS/collapse,
                    // tapi memang tidak dirender sama sekali, supaya halaman tetap
                    // ringkas untuk order dengan banyak unit. Sisanya tetap bisa
                    // didapat lewat tombol "Salin Semua" di bawah.
                    $visibleLinks = $order->stockLinks->take(2);
                    $hiddenCount = max(0, $order->stockLinks->count() - $visibleLinks->count());
                    $isLinkInvite = $order->productType() === 'link_invite';
                    $unitLabel = \App\Models\Product::unitLabelForType($order->productType());
                    $unitLabelLower = strtolower($unitLabel);

                    // Data delivery bisa disalin baik untuk pembelian satuan maupun
                    // batch. Batch tetap memakai label "Salin Semua", sedangkan
                    // satuan memakai label yang lebih langsung sesuai tipe unit.
                    $showCopyDelivery = $order->stockLinks->isNotEmpty();

                    // Format rapi untuk clipboard: header nama produk + jumlah,
                    // lalu tiap unit dipisah baris kosong dengan label unit ke-N
                    // (mis. "Akun 1", "Kode Redeem 2") supaya begitu ditempel ke
                    // WhatsApp, customer/admin langsung bisa membedakan unit
                    // satu dengan yang lain.
                    $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");

                    $deliveryNoteEntries = collect([
                        'product' => $deliveryNoteDocuments['product'] ?? null,
                        'variant' => $deliveryNoteDocuments['variant'] ?? null,
                    ])->filter();
                    $deliveryNoteTextEntries = collect([
                        'product' => $deliveryNotePlainText['product'] ?? '',
                        'variant' => $deliveryNotePlainText['variant'] ?? '',
                    ])->filter(fn ($text) => trim((string) $text) !== '');

                    if ($deliveryNoteTextEntries->isNotEmpty()) {
                        $multipleNotes = $deliveryNoteTextEntries->count() > 1;
                        $copyNoteText = $deliveryNoteTextEntries
                            ->map(function ($text, $type) use ($multipleNotes, $order) {
                                if (! $multipleNotes) {
                                    return $text;
                                }

                                $label = $type === 'product'
                                    ? 'Panduan Produk'
                                    : 'Panduan Variant' . ($order->variantName() ? ' - ' . $order->variantName() : '');

                                return $label . "\n" . $text;
                            })
                            ->implode("\n\n");

                        $copyAllText .= "\n\nNOTES\n" . $copyNoteText;
                    }
                @endphp

                <div class="storefront-invoice-detail-heading">
                    <h2 class="storefront-invoice-detail-title font-display">
                        Detail Pengiriman{{ $order->isBatch() ? ' - ' . $order->quantity . ' ' . $unitLabel : '' }}
                    </h2>
                </div>

                @forelse ($visibleLinks as $link)
                    @php $payload = $link->deliveryPayload(); @endphp
                    <div class="storefront-delivery-card">
                        @if ($order->isBatch())
                            <p class="storefront-delivery-unit-label">{{ $unitLabel }} {{ $loop->iteration }}</p>
                        @endif
                        @forelse ($payload as $key => $value)
                            <div class="flex items-start justify-between gap-3">
                                <span class="storefront-delivery-key shrink-0">{{ ucwords(str_replace('_', ' ', $key)) }}</span>
                                @if ($isLinkInvite && preg_match('/^https?:\/\//i', (string) $value))
                                    <a href="{{ $value }}" target="_blank" rel="noopener"
                                       class="storefront-delivery-link text-right break-all">Buka Link &rarr;</a>
                                @else
                                    <span class="storefront-delivery-value font-figures text-right break-all">{{ $value }}</span>
                                @endif
                            </div>
                        @empty
                            <p class="storefront-invoice-message">Detail pengiriman kosong.</p>
                        @endforelse
                    </div>
                @empty
                    <p class="storefront-invoice-message">Detail pengiriman belum tersedia.</p>
                @endforelse

                @if ($hiddenCount > 0)
                    <p class="storefront-invoice-hidden-count">+ {{ $hiddenCount }} {{ $unitLabelLower }} lagi tersembunyi</p>
                @endif

                @if ($deliveryNoteEntries->isNotEmpty())
                    <section class="storefront-delivery-notes" aria-labelledby="delivery-notes-title">
                        <h3 id="delivery-notes-title" class="storefront-delivery-notes-title">Notes</h3>

                        @foreach ($deliveryNoteEntries as $type => $document)
                            <div class="storefront-delivery-note-group">
                                @if ($deliveryNoteEntries->count() > 1)
                                    <p class="storefront-delivery-note-label">
                                        {{ $type === 'product'
                                            ? 'Panduan Produk'
                                            : 'Panduan Variant' . ($order->variantName() ? ' · ' . $order->variantName() : '') }}
                                    </p>
                                @endif

                                <div class="storefront-delivery-note-document">
                                    @include('invoice.partials.delivery-note-document', ['document' => $document])
                                </div>
                            </div>
                        @endforeach
                    </section>
                @endif

                @if ($showCopyDelivery)
                    <button type="button"
                            data-copy-text="{{ $copyAllText }}"
                            data-copy-success-label="Tersalin!"
                            class="storefront-copy-all-button">
                        <span data-copy-feedback-target aria-live="polite">{{ $order->isBatch()
                            ? 'Salin Semua ' . $unitLabel . ' (' . $order->stockLinks->count() . ')'
                            : 'Salin Data ' . $unitLabel }}</span>
                    </button>
                @endif
            @elseif ($order->status === 'DELIVERED_MANUAL')
                <p class="storefront-invoice-message">
                    Pesanan ini sudah diselesaikan oleh admin secara manual. Kalau kamu belum menerima detail/akses melalui WhatsApp, silakan hubungi kami dengan menyertakan ID invoice di atas.
                </p>
            @elseif ($order->status === 'PAID' && $order->requiresManualFulfillment())
                <p class="storefront-invoice-message">
                    Pembayaran berhasil. Pesanan ini diproses secara manual - tim kami akan menghubungi kamu melalui WhatsApp segera.
                </p>
            @elseif ($order->status === 'PENDING_PAYMENT')
                <p class="storefront-invoice-message">
                    Menunggu pembayaran. Halaman ini otomatis diperbarui begitu pembayaran terkonfirmasi.
                </p>
            @elseif ($order->status === 'FULFILLMENT_FAILED')
                <p class="storefront-invoice-message">
                    Pembayaran berhasil, tapi pengiriman otomatis sempat gagal. Tim kami sedang menindaklanjuti pesanan ini secara manual.
                </p>
            @elseif ($order->status === 'EXPIRED')
                <p class="storefront-invoice-message">
                    Invoice ini sudah kedaluwarsa. Silakan checkout ulang lewat halaman produk untuk mendapatkan invoice baru.
                </p>
            @elseif ($order->status === 'REFUNDED')
                <p class="storefront-invoice-message">
                    Pesanan ini telah direfund.
                </p>
            @endif
        </div>

        <div class="storefront-invoice-support">
            <a href="https://wa.me/{{ config('services.whatsapp.admin_number') }}" target="_blank" rel="noopener"
               class="storefront-invoice-support-link">
                Ada kendala? Chat Admin
            </a>
            </div>
        </div>
    </div>
</div>
</section>

@if ($order->status === 'PENDING_PAYMENT' && $order->hasUsableQris())
<script>
(() => {
const qrisPaymentString = @json($order->qris_payment_string);
const qrcodeElement = document.getElementById('qrcode');
const qrisRenderState = document.getElementById('qris-render-state');
const qrisRenderRetryButton = document.getElementById('qris-render-retry-button');

function showQrisRenderError(message = 'QRIS berhasil dibuat, tetapi gambarnya gagal ditampilkan. Silakan coba lagi.') {
    const messageElement = document.getElementById('qris-render-message');
    if (messageElement) messageElement.textContent = message;
    qrisRenderState?.classList.remove('hidden');
}

function renderQrCode() {
    if (!qrcodeElement || typeof QRCode === 'undefined') {
        showQrisRenderError();
        return;
    }

    try {
        qrcodeElement.innerHTML = '';
        new QRCode(qrcodeElement, {
            text: qrisPaymentString,
            width: 220,
            height: 220,
        });

        window.setTimeout(() => {
            const rendered = qrcodeElement.querySelector('canvas, img');
            if (!rendered) {
                showQrisRenderError();
                return;
            }

            qrisRenderState?.classList.add('hidden');
        }, 100);
    } catch (error) {
        showQrisRenderError();
    }
}

function loadQrCodeLibrary(sources) {
    if (typeof QRCode !== 'undefined') {
        renderQrCode();
        return;
    }

    if (!sources.length) {
        showQrisRenderError('Library QRIS gagal dimuat. Periksa koneksi lalu coba lagi.');
        return;
    }

    const script = document.createElement('script');
    script.src = sources[0];
    script.onload = renderQrCode;
    script.onerror = () => loadQrCodeLibrary(sources.slice(1));
    document.head.appendChild(script);
}

const qrisLibrarySources = [
    'https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js',
    'https://cdn.jsdelivr.net/npm/qrcodejs@1.0.0/qrcode.min.js',
];

loadQrCodeLibrary(qrisLibrarySources);
qrisRenderRetryButton?.addEventListener('click', () => {
    qrisRenderRetryButton.disabled = true;
    qrisRenderRetryButton.textContent = 'Memuat ulang...';
    qrisRenderState?.classList.add('hidden');

    if (typeof QRCode !== 'undefined') {
        renderQrCode();
    } else {
        loadQrCodeLibrary(qrisLibrarySources);
    }

    window.setTimeout(() => {
        qrisRenderRetryButton.disabled = false;
        qrisRenderRetryButton.textContent = 'Muat Ulang QRIS';
    }, 800);
});
})();
</script>
@endif

<script>
(() => {
const invoicePage = document.querySelector('[data-invoice-page]');

if (!invoicePage) {
    return;
}

if (invoicePage.__invoiceStatusTimer) {
    window.clearInterval(invoicePage.__invoiceStatusTimer);
}

if (invoicePage.__invoiceCountdownTimer) {
    window.clearInterval(invoicePage.__invoiceCountdownTimer);
}
const qrisRetryForm = document.getElementById('qris-retry-form');
const qrisRetryButton = document.getElementById('qris-retry-button');
const qrisGenerationMessage = document.getElementById('qris-generation-message');

qrisRetryForm?.addEventListener('submit', async (event) => {
    event.preventDefault();

    qrisRetryButton.disabled = true;
    qrisRetryButton.textContent = 'Mencoba kembali...';
    qrisGenerationMessage.textContent = 'Sedang menyiapkan QRIS...';

    try {
        const response = await fetch(qrisRetryForm.action, {
            method: 'POST',
            body: new FormData(qrisRetryForm),
            headers: {
                'Accept': 'application/json',
                'X-Requested-With': 'XMLHttpRequest',
            },
            credentials: 'same-origin',
        });

        const payload = await response.json().catch(() => ({}));

        if (response.ok && payload.status === 'ready') {
            window.location.reload();
            return;
        }

        if (response.status === 429) {
            qrisGenerationMessage.textContent = 'Terlalu banyak percobaan. Tunggu sebentar sebelum mencoba kembali.';
            return;
        }

        qrisGenerationMessage.textContent = payload.message ?? 'QRIS belum berhasil dibuat. Silakan coba lagi.';
    } catch (error) {
        qrisGenerationMessage.textContent = 'Koneksi bermasalah. Periksa jaringan lalu coba lagi.';
    } finally {
        qrisRetryButton.disabled = false;
        qrisRetryButton.textContent = 'Coba Lagi';
    }
});

async function copyText(btn, text) {
    const target = btn.querySelector('[data-copy-feedback-target]')
        ?? btn.querySelector('span:last-child')
        ?? btn;
    const original = target.textContent;
    const successLabel = btn.dataset.copySuccessLabel ?? 'Tersalin!';

    try {
        if (navigator.clipboard && window.isSecureContext) {
            await navigator.clipboard.writeText(text);
        } else {
            const textarea = document.createElement('textarea');
            textarea.value = text;
            textarea.setAttribute('readonly', '');
            textarea.style.position = 'fixed';
            textarea.style.opacity = '0';
            document.body.appendChild(textarea);
            textarea.select();
            textarea.setSelectionRange(0, textarea.value.length);

            const copied = document.execCommand('copy');
            textarea.remove();

            if (! copied) {
                throw new Error('Clipboard fallback gagal.');
            }
        }

        target.textContent = successLabel;
    } catch (error) {
        target.textContent = 'Gagal menyalin';
    } finally {
        setTimeout(() => target.textContent = original, 1800);
    }
}

// Countdown realtime sampai invoice kedaluwarsa. Dihitung ke waktu yang LEBIH
// CEPAT antara expires_at (batas invoice 30 menit) dan qris_expired_at (batas
// dari sisi Pakasir sendiri) -- QR tidak boleh terlihat valid di halaman kalau
// salah satu dari keduanya sudah lewat.
const expiryEl = document.getElementById('expiry-countdown');

if (expiryEl) {
    const candidates = [expiryEl.dataset.expiresAt, expiryEl.dataset.qrisExpiresAt]
        .filter(Boolean)
        .map(value => new Date(value).getTime());
    const targetTime = Math.min(...candidates);

    function renderCountdown() {
        const remainingMs = targetTime - Date.now();

        if (remainingMs <= 0) {
            expiryEl.textContent = 'Kedaluwarsa, menunggu pembaruan status...';
            window.clearInterval(invoicePage.__invoiceCountdownTimer);
            return;
        }

        const totalSeconds = Math.floor(remainingMs / 1000);
        const minutes = Math.floor(totalSeconds / 60);
        const seconds = totalSeconds % 60;
        expiryEl.textContent = `${minutes} menit ${String(seconds).padStart(2, '0')} detik`;
    }

    renderCountdown();
    invoicePage.__invoiceCountdownTimer = window.setInterval(renderCountdown, 1000);
}

// Polling selama status masih bisa berubah tanpa aksi customer (menunggu
// pembayaran, atau menunggu admin menyelesaikan order tipe manual/gagal
// otomatis) - supaya customer tidak perlu refresh manual saat statusnya
// berubah di sisi lain (webhook/cron/admin).
async function checkOrderStatus() {
    try {
        const response = await fetch(invoicePage.dataset.statusUrl, {
            headers: { Accept: 'application/json' },
            credentials: 'same-origin',
            cache: 'no-store',
        });

        if (!response.ok) {
            return;
        }

        const payload = await response.json();

        if (payload.status && payload.status !== invoicePage.dataset.currentStatus) {
            window.location.reload();
        }
    } catch (error) {
        // Gangguan jaringan sementara akan dicoba lagi pada interval berikutnya.
    }
}

invoicePage.querySelectorAll('[data-copy-text]').forEach((button) => {
    if (button.dataset.copyReady === 'true') {
        return;
    }

    button.dataset.copyReady = 'true';
    button.addEventListener('click', () => copyText(button, button.dataset.copyText ?? ''));
});

if (invoicePage.dataset.pollingEnabled === 'true') {
    checkOrderStatus();
    invoicePage.__invoiceStatusTimer = window.setInterval(checkOrderStatus, 4000);
}

})();
</script>
@endsection