@extends('layouts.user_sidebar')

@section('content')
<main class="min-h-screen bg-slate-50 pt-20 pb-10">
    <div class="px-4 sm:px-6 lg:px-8 max-w-4xl mx-auto">
        <div class="mb-8">
            <h1 class="text-2xl sm:text-3xl font-extrabold text-slate-900 tracking-tight mb-2">Riwayat Pesanan</h1>
            <p class="text-slate-500">Pantau status pesanan dan riwayat pembelian Anda.</p>
        </div>

        <!-- Filter Card -->
        <div class="bg-white rounded-2xl shadow-sm border border-slate-200 p-5 mb-6">
            <form action="{{ route('user.pesanan') }}" method="GET" id="filterForm" class="space-y-4">
                <!-- Hidden input for filter type -->
                <input type="hidden" name="filter" id="filterInput" value="{{ $filter }}">

                <!-- Row 1: Rentang Waktu & Status -->
                <div class="flex flex-col md:flex-row md:items-center justify-between gap-4">
                    <!-- Quick Filters (Waktu) -->
                    <div>
                        <span class="block text-xs font-bold uppercase tracking-wider text-slate-400 mb-2">Rentang Waktu</span>
                        <div class="flex flex-wrap gap-2">
                            <a href="{{ route('user.pesanan', array_merge(request()->query(), ['filter' => '7_hari'])) }}" 
                               class="px-4 py-2 text-xs font-bold rounded-xl border transition-all duration-200 {{ $filter === '7_hari' ? 'bg-gas3kg border-gas3kg text-white shadow-sm' : 'bg-white border-slate-200 text-slate-600 hover:bg-slate-50' }}">
                                7 Hari Terakhir
                            </a>
                            <a href="{{ route('user.pesanan', array_merge(request()->query(), ['filter' => '30_hari'])) }}" 
                               class="px-4 py-2 text-xs font-bold rounded-xl border transition-all duration-200 {{ $filter === '30_hari' ? 'bg-gas3kg border-gas3kg text-white shadow-sm' : 'bg-white border-slate-200 text-slate-600 hover:bg-slate-50' }}">
                                30 Hari Terakhir
                            </a>
                            <a href="{{ route('user.pesanan', array_merge(request()->query(), ['filter' => 'semua'])) }}" 
                               class="px-4 py-2 text-xs font-bold rounded-xl border transition-all duration-200 {{ $filter === 'semua' ? 'bg-gas3kg border-gas3kg text-white shadow-sm' : 'bg-white border-slate-200 text-slate-600 hover:bg-slate-50' }}">
                                Semua Riwayat
                            </a>
                            <button type="button" onclick="toggleCustomDate()" 
                                    class="px-4 py-2 text-xs font-bold rounded-xl border transition-all duration-200 {{ $filter === 'custom' ? 'bg-gas3kg border-gas3kg text-white shadow-sm' : 'bg-white border-slate-200 text-slate-600 hover:bg-slate-50' }} flex items-center gap-1">
                                <i data-lucide="calendar" class="w-3.5 h-3.5"></i> Kustom
                            </button>
                        </div>
                    </div>

                    <!-- Status Filter -->
                    <div class="w-full md:w-48">
                        <span class="block text-xs font-bold uppercase tracking-wider text-slate-400 mb-2">Status Pesanan</span>
                        <select name="status" onchange="this.form.submit()" 
                                class="w-full text-xs font-semibold text-slate-700 bg-slate-50 border border-slate-200 rounded-xl px-3 py-2.5 focus:outline-none focus:ring-2 focus:ring-gas3kg focus:bg-white transition-all">
                            <option value="semua" {{ $status === 'semua' ? 'selected' : '' }}>Semua Status</option>
                            <option value="menunggu" {{ $status === 'menunggu' ? 'selected' : '' }}>Menunggu Konfirmasi</option>
                            <option value="diproses" {{ $status === 'diproses' ? 'selected' : '' }}>Diproses</option>
                            <option value="dikirim" {{ $status === 'dikirim' ? 'selected' : '' }}>Dikirim</option>
                            <option value="selesai" {{ $status === 'selesai' ? 'selected' : '' }}>Selesai</option>
                            <option value="dibatalkan" {{ $status === 'dibatalkan' ? 'selected' : '' }}>Dibatalkan</option>
                        </select>
                    </div>
                </div>

                <!-- Row 2: Custom Date Inputs (collapsible) -->
                <div id="customDateSection" class="{{ $filter === 'custom' ? 'block' : 'hidden' }} pt-4 border-t border-dashed border-slate-200">
                    <div class="flex flex-col sm:flex-row items-end gap-3">
                        <div class="flex-1 w-full">
                            <label class="block text-xs font-bold text-slate-500 mb-1">Tanggal Mulai</label>
                            <input type="date" name="start_date" value="{{ $startDate }}" 
                                   class="w-full text-xs font-semibold text-slate-700 bg-slate-50 border border-slate-200 rounded-xl px-3 py-2 focus:outline-none focus:ring-2 focus:ring-gas3kg focus:bg-white transition-all">
                        </div>
                        <div class="flex-1 w-full">
                            <label class="block text-xs font-bold text-slate-500 mb-1">Tanggal Akhir</label>
                            <input type="date" name="end_date" value="{{ $endDate }}" 
                                   class="w-full text-xs font-semibold text-slate-700 bg-slate-50 border border-slate-200 rounded-xl px-3 py-2 focus:outline-none focus:ring-2 focus:ring-gas3kg focus:bg-white transition-all">
                        </div>
                        <button type="submit" 
                                class="w-full sm:w-auto px-5 py-2.5 bg-slate-900 text-white text-xs font-bold rounded-xl hover:bg-slate-800 transition-colors shadow-sm flex items-center justify-center gap-1.5 shrink-0">
                            <i data-lucide="filter" class="w-3.5 h-3.5"></i> Terapkan
                        </button>
                    </div>
                </div>
            </form>
        </div>

        @if($riwayat->count() > 0)
            <div class="bg-white rounded-2xl shadow-sm border border-slate-200 overflow-hidden">
                <div class="divide-y divide-slate-100">
                    @foreach($riwayat as $pesanan)
                        @php
                            $items     = $pesanan['items'];
                            $firstItem = $items->first();
                            $status    = $pesanan['status'];
                            $kurir     = $pesanan['kurir'];
                            $totalSemua  = $pesanan['total_semua'];
                            $ongkirSemua = $pesanan['ongkir_semua'];
                        @endphp
                        <div class="p-5 sm:p-6 hover:bg-slate-50 transition-colors">
                            {{-- Header: tanggal & status --}}
                            <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3 mb-4">
                                <div>
                                    <p class="text-xs text-slate-400 font-medium">{{ \Carbon\Carbon::parse($pesanan['created_at'])->format('d M Y - H:i') }}</p>
                                    @if($pesanan['group_id'])
                                        <p class="text-[10px] text-slate-300 font-mono mt-0.5">#{{ substr($pesanan['group_id'], 0, 8) }}...</p>
                                    @endif
                                </div>
                                <div class="flex items-center gap-3">
                                    @if($status === 'menunggu')
                                        <span class="px-3 py-1 bg-yellow-100 text-yellow-700 rounded-full text-xs font-bold uppercase tracking-wider flex items-center gap-1.5"><i data-lucide="clock" class="w-3.5 h-3.5"></i> Menunggu Konfirmasi</span>
                                    @elseif($status === 'diproses')
                                        <span class="px-3 py-1 bg-blue-100 text-blue-700 rounded-full text-xs font-bold uppercase tracking-wider flex items-center gap-1.5"><i data-lucide="loader" class="w-3.5 h-3.5 animate-spin"></i> Diproses</span>
                                    @elseif($status === 'dikirim')
                                        <span class="px-3 py-1 bg-indigo-100 text-indigo-700 rounded-full text-xs font-bold uppercase tracking-wider flex items-center gap-1.5"><i data-lucide="truck" class="w-3.5 h-3.5"></i> Dikirim</span>
                                    @elseif($status === 'selesai')
                                        <span class="px-3 py-1 bg-green-100 text-green-700 rounded-full text-xs font-bold uppercase tracking-wider flex items-center gap-1.5"><i data-lucide="check-circle" class="w-3.5 h-3.5"></i> Selesai</span>
                                    @elseif($status === 'dibatalkan')
                                        <span class="px-3 py-1 bg-red-100 text-red-700 rounded-full text-xs font-bold uppercase tracking-wider flex items-center gap-1.5"><i data-lucide="x-circle" class="w-3.5 h-3.5"></i> Dibatalkan</span>
                                    @endif
                                </div>
                            </div>

                            {{-- Item list --}}
                            <div class="space-y-2 mb-4">
                                @foreach($items as $trx)
                                    @php
                                        $namaProduk = $trx->produk->nama_produk ?? 'Gas LPG';
                                        $is3Kg  = stripos($namaProduk,'3') !== false;
                                        $is12Kg = stripos($namaProduk,'12') !== false;
                                        $is5Kg  = stripos($namaProduk,'5.5') !== false || stripos($namaProduk,'5,5') !== false;
                                    @endphp
                                    <div class="flex items-center gap-3 bg-slate-50 rounded-xl p-3 border border-slate-100">
                                        <div class="w-10 h-10 rounded-xl overflow-hidden shrink-0 border border-slate-100">
                                            @if($is3Kg) <img src="{{ asset('images/gas_3kg_elpiji.jpg') }}" class="w-full h-full object-cover">
                                            @elseif($is12Kg) <img src="{{ asset('images/gas_12kg_bright.jpg') }}" class="w-full h-full object-cover">
                                            @elseif($is5Kg) <img src="{{ asset('images/gas5-5.jpg') }}" class="w-full h-full object-cover">
                                            @else <div class="w-full h-full bg-slate-100 flex items-center justify-center text-slate-400"><i data-lucide="cylinder" class="w-5 h-5"></i></div>
                                            @endif
                                        </div>
                                        <div class="flex-1 min-w-0">
                                            <p class="font-bold text-slate-900 text-sm">{{ $namaProduk }}</p>
                                            <p class="text-xs text-slate-500">{{ $trx->qty_beli_isi }} tabung × Rp {{ number_format($trx->harga_satuan,0,',','.') }}</p>
                                        </div>
                                        <div class="text-right shrink-0">
                                            <p class="font-black text-slate-800 text-sm">Rp {{ number_format($trx->total_harga,0,',','.') }}</p>
                                            @if($trx->ongkir > 0)
                                                <p class="text-[10px] text-slate-400">+ongkir Rp {{ number_format($trx->ongkir,0,',','.') }}</p>
                                            @endif
                                        </div>
                                    </div>
                                @endforeach
                            </div>

                            {{-- Summary footer --}}
                            <div class="bg-slate-50 rounded-xl p-4 grid grid-cols-2 sm:grid-cols-4 gap-4">
                                <div>
                                    <p class="text-xs text-slate-500 mb-1">Total Item</p>
                                    <p class="font-bold text-slate-800">{{ $items->count() }} jenis</p>
                                </div>
                                <div>
                                    <p class="text-xs text-slate-500 mb-1">Ongkos Kirim</p>
                                    <p class="font-bold text-emerald-600">Rp {{ number_format($ongkirSemua,0,',','.') }}</p>
                                </div>
                                <div>
                                    <p class="text-xs text-slate-500 mb-1">Total Bayar</p>
                                    <p class="font-black text-blue-600">Rp {{ number_format($totalSemua,0,',','.') }}</p>
                                </div>
                                <div>
                                    <p class="text-xs text-slate-500 mb-1">Kurir Pengantar</p>
                                    <p class="font-bold text-slate-800">{{ $kurir ? ($kurir->name ?? '-') : '-' }}</p>
                                </div>
                            </div>

                            {{-- Action: Cetak Struk --}}
                            <div class="flex justify-end gap-2 mt-4 pt-3 border-t border-slate-100">
                                @php
                                    $struData = [
                                        'group_id'  => $pesanan['group_id'] ?? ($firstItem->id_transaksi ?? '-'),
                                        'ongkir'    => $ongkirSemua,
                                        'total'     => $totalSemua,
                                        'metode'    => $pesanan['metode_bayar'] ?? '-',
                                        'status'    => $status,
                                        'tanggal'   => \Carbon\Carbon::parse($pesanan['created_at'])->format('d M Y H:i'),
                                        'pelanggan' => auth()->user()->name ?? '-',
                                        'alamat'    => $pesanan['pelanggan']->address ?? '-',
                                        'kurir'     => optional($kurir)->name ?? 'Belum Ada',
                                        'items'     => $items->map(fn($t) => [
                                            'nama'     => $t->produk->nama_produk ?? 'Gas LPG',
                                            'qty'      => $t->qty_beli_isi,
                                            'harga'    => $t->harga_satuan,
                                            'subtotal' => $t->total_harga,
                                        ])->values()->toArray(),
                                    ];
                                @endphp
                                <button type="button"
                                    data-struk='@json($struData)'
                                    onclick="bukaModalStruk(this)"
                                    class="px-4 py-2 bg-white border border-slate-200 hover:border-gas3kg hover:text-gas3kg text-slate-700 rounded-xl text-xs font-bold transition-all duration-200 flex items-center gap-1.5 shadow-sm">
                                    <i data-lucide="file-text" class="w-3.5 h-3.5 text-slate-400"></i>
                                    Struk Belanja (PNG)
                                </button>
                            </div>

                        </div>
                    @endforeach
                </div>

                <!-- Pagination Section -->
                @if($riwayat->hasPages())
                    <div class="px-6 py-4 border-t border-slate-100 bg-slate-50 flex justify-center">
                        {{ $riwayat->links() }}
                    </div>
                @endif
            </div>
        @else
            @if($totalAllCount > 0)
                <div class="py-16 text-center flex flex-col items-center justify-center bg-white rounded-2xl border border-slate-200 shadow-sm p-6">
                    <div class="w-24 h-24 bg-slate-50 rounded-full flex items-center justify-center text-slate-300 mb-4">
                        <i data-lucide="search" class="w-12 h-12"></i>
                    </div>
                    <h3 class="text-lg font-bold text-slate-900 mb-1">Tidak Ada Pesanan Cocok</h3>
                    <p class="text-sm text-slate-500 max-w-sm mb-6">Tidak ada transaksi yang cocok dengan filter atau rentang waktu yang Anda pilih.</p>
                    <a href="{{ route('user.pesanan', ['filter' => 'semua', 'status' => 'semua']) }}" class="px-6 py-2.5 bg-gas3kg text-white font-bold rounded-xl shadow-md hover:bg-emerald-600 transition-colors flex items-center justify-center gap-2">
                        <i data-lucide="rotate-ccw" class="w-4 h-4"></i> Reset Filter & Tampilkan Semua
                    </a>
                </div>
            @else
                <div class="py-16 text-center flex flex-col items-center justify-center bg-white rounded-2xl border border-slate-200 shadow-sm p-6">
                    <div class="w-24 h-24 bg-slate-50 rounded-full flex items-center justify-center text-slate-300 mb-4">
                        <i data-lucide="inbox" class="w-12 h-12"></i>
                    </div>
                    <h3 class="text-lg font-bold text-slate-900 mb-1">Belum Ada Pesanan</h3>
                    <p class="text-sm text-slate-500 max-w-sm mb-6">Anda belum pernah melakukan pemesanan gas. Pesan gas pertama Anda sekarang!</p>
                    <a href="{{ route('user.dashboard') }}" class="px-6 py-2.5 bg-gas3kg text-white font-bold rounded-xl shadow-md hover:bg-emerald-600 transition-colors">Pesan Gas Sekarang</a>
                </div>
            @endif
        @endif
    </div>

    <!-- Modal Cetak Struk -->
    <div id="modalStruk" class="fixed inset-0 bg-slate-900/60 backdrop-blur-sm z-[9999] flex items-center justify-center hidden opacity-0 transition-opacity duration-300 overflow-y-auto p-3 sm:p-4">
        <div class="bg-white w-[92%] max-w-[440px] rounded-3xl shadow-2xl overflow-hidden transform scale-95 transition-transform duration-300 ease-out flex flex-col max-h-[92vh] my-auto border border-slate-100">
            <div class="p-4 border-b border-slate-100 flex justify-between items-center bg-slate-50 shrink-0">
                <div class="flex items-center gap-2">
                    <i data-lucide="file-text" class="w-5 h-5 text-gas3kg"></i>
                    <h3 class="font-black text-slate-800 text-sm md:text-base">Struk Transaksi</h3>
                </div>
                <button type="button" onclick="tutupModalStruk()" class="text-slate-400 hover:text-slate-600 p-1 rounded-lg hover:bg-slate-100 transition-colors">
                    <i data-lucide="x" class="w-5 h-5"></i>
                </button>
            </div>

            <!-- Receipt Content Wrapper -->
            <div class="p-4 sm:p-6 bg-slate-50 flex-1 overflow-y-auto scrollbar-custom flex justify-center">
                <div id="thermal-receipt" class="bg-white p-5 sm:p-6 rounded-2xl border border-slate-100 shadow-xl w-full max-w-[360px] mx-auto font-sans text-slate-800 leading-normal relative overflow-hidden shrink-0 my-auto">
                    <div class="absolute top-0 left-0 right-0 h-2 bg-gradient-to-r from-emerald-400 to-green-600"></div>

                    <!-- Header -->
                    <div class="text-center mt-4 mb-5">
                        <div class="text-xl font-black text-slate-900 tracking-tight mb-1">GasKu</div>
                        <p class="text-[10px] text-slate-400 font-bold uppercase tracking-widest">Bukti Transaksi Resmi</p>
                    </div>

                    <!-- Total & Status Badge -->
                    <div class="flex flex-col items-center justify-center mb-5 bg-slate-50 rounded-2xl py-4 px-3 border border-slate-100">
                        <span class="text-[10px] font-bold text-slate-400 uppercase tracking-wider mb-1">Total Pembayaran</span>
                        <span class="text-2xl font-black text-slate-900" id="receipt-total">Rp 0</span>
                        <span class="mt-2 inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-[10px] font-bold uppercase tracking-wider bg-emerald-50 text-emerald-700 border border-emerald-100" id="receipt-status-badge">
                            <span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>
                            <span id="receipt-status">Selesai</span>
                        </span>
                    </div>

                    <!-- Details -->
                    <div class="space-y-2.5 mb-5">
                        <div class="flex justify-between items-center text-xs gap-2"><span class="text-slate-400 shrink-0 whitespace-nowrap">No. Invoice</span><span class="font-bold text-slate-800 whitespace-nowrap" id="receipt-invoice">#TRX-0</span></div>
                        <div class="flex justify-between items-center text-xs gap-2"><span class="text-slate-400 shrink-0 whitespace-nowrap">Waktu Transaksi</span><span class="font-bold text-slate-800 text-right whitespace-nowrap" id="receipt-tanggal">-</span></div>
                        <div class="flex justify-between items-center text-xs gap-2"><span class="text-slate-400 shrink-0 whitespace-nowrap">Pelanggan</span><span class="font-bold text-slate-800 text-right truncate" id="receipt-pelanggan">-</span></div>
                        <div class="flex justify-between text-xs gap-4"><span class="text-slate-400 shrink-0 whitespace-nowrap">Alamat Kirim</span><span class="font-semibold text-slate-800 text-right break-words max-w-[190px]" id="receipt-alamat">-</span></div>
                    </div>

                    <div class="border-t border-dashed border-slate-200 my-4"></div>

                    <!-- Items Section -->
                    <div class="bg-emerald-50 rounded-xl p-4 border border-emerald-100 mb-5">
                        <div class="text-xs font-black text-emerald-800 uppercase tracking-wider mb-3">Item Pesanan</div>
                        <div id="receipt-items-list" class="space-y-2.5"></div>
                    </div>

                    <!-- Fees -->
                    <div class="space-y-2 mb-5">
                        <div class="flex justify-between text-xs"><span class="text-slate-400">Ongkos Kirim</span><span class="font-semibold text-slate-800" id="receipt-ongkir">Rp 0</span></div>
                        <div class="flex justify-between text-xs pt-2 border-t border-slate-100">
                            <span class="font-bold text-slate-900">Total Transaksi</span>
                            <span class="font-black text-slate-900" id="receipt-total-summary">Rp 0</span>
                        </div>
                    </div>

                    <div class="border-t border-dashed border-slate-200 my-4"></div>

                    <!-- Payment Info -->
                    <div class="space-y-2 mb-5 bg-slate-50 rounded-2xl p-4 border border-slate-100 text-xs">
                        <div class="flex justify-between"><span class="text-[10px] text-slate-400 font-bold uppercase tracking-wider">Metode Bayar</span><span class="font-bold text-slate-800" id="receipt-metode">Tunai</span></div>
                        <div class="flex justify-between pt-2 border-t border-slate-100"><span class="text-[10px] text-slate-400 font-bold uppercase tracking-wider">Kurir Pengantar</span><span class="font-bold text-slate-800" id="receipt-kurir">-</span></div>
                        <div class="flex justify-between pt-2 border-t border-slate-100"><span class="text-[10px] text-slate-400 font-bold uppercase tracking-wider">Status</span><span class="font-extrabold uppercase text-[10px]" id="receipt-status-detail">-</span></div>
                    </div>

                    <!-- Footer -->
                    <div class="text-center mt-5">
                        <div class="inline-flex items-center gap-1.5 text-[10px] font-bold text-emerald-600 bg-emerald-50 px-3 py-1 rounded-full border border-emerald-100 mb-3">
                            <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z"/><path d="m9 12 2 2 4-4"/></svg>
                            Layanan LPG GasKu
                        </div>
                        <p class="text-[9px] text-slate-400">Terima kasih telah mempercayai layanan kami.</p>
                    </div>
                </div>
            </div>

            <div class="p-4 border-t border-slate-100 flex gap-3 bg-slate-50">
                <button type="button" onclick="unduhStrukPng(this)" class="flex-1 py-2.5 px-4 bg-gas3kg hover:bg-emerald-600 text-white rounded-xl text-xs font-bold flex items-center justify-center gap-1.5 shadow-md shadow-emerald-500/20 transition-all">
                    <i data-lucide="download" class="w-4 h-4"></i> Unduh PNG
                </button>
                <button type="button" onclick="tutupModalStruk()" class="flex-1 py-2.5 px-4 bg-slate-200 text-slate-700 rounded-xl text-xs font-bold hover:bg-slate-300 transition-colors">Tutup</button>
            </div>
        </div>
    </div>

    <style>
    .scrollbar-custom::-webkit-scrollbar { width: 6px; }
    .scrollbar-custom::-webkit-scrollbar-track { background: #f1f5f9; border-radius: 10px; }
    .scrollbar-custom::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
    .scrollbar-custom::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
    </style>
</main>
@endsection

@push('scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/html-to-image/1.11.11/html-to-image.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
<script>
    function toggleCustomDate() {
        const section = document.getElementById('customDateSection');
        const filterInput = document.getElementById('filterInput');
        if (section.classList.contains('hidden')) {
            section.classList.remove('hidden');
            filterInput.value = 'custom';
        } else {
            section.classList.add('hidden');
            filterInput.value = '7_hari';
            document.getElementById('filterForm').submit();
        }
    }

    // Buka modal struk - data dibaca dari data-struk attribute (JSON)
    function bukaModalStruk(btn) {
        const formatIDR = (n) => 'Rp ' + parseInt(n).toLocaleString('id-ID');

        let d = {};
        try {
            const raw = btn.getAttribute('data-struk') || '{}';
            d = typeof raw === 'string' ? JSON.parse(raw) : raw;
        } catch(e) {
            console.error('Gagal parse data struk:', e);
            alert('Gagal memuat data struk transaksi.');
            return;
        }

        const items    = Array.isArray(d.items) ? d.items : [];
        const groupId  = d.group_id  || '-';
        const total    = d.total     || 0;
        const ongkir   = d.ongkir    || 0;
        const metode   = d.metode    || '-';
        const status   = d.status    || '-';
        const tanggal  = d.tanggal   || '-';
        const pelanggan= d.pelanggan || '-';
        const alamat   = d.alamat    || '-';
        const kurir    = d.kurir     || 'Belum Ada';

        document.getElementById('receipt-invoice').innerText    = '#' + String(groupId).substring(0, 8).toUpperCase();
        document.getElementById('receipt-tanggal').innerText    = tanggal;
        document.getElementById('receipt-pelanggan').innerText  = pelanggan;
        document.getElementById('receipt-alamat').innerText     = alamat;
        document.getElementById('receipt-ongkir').innerText     = formatIDR(ongkir);
        document.getElementById('receipt-total').innerText      = formatIDR(total);
        document.getElementById('receipt-total-summary').innerText = formatIDR(total);
        document.getElementById('receipt-metode').innerText     = metode;
        document.getElementById('receipt-kurir').innerText      = kurir;

        // Render item list
        const listEl = document.getElementById('receipt-items-list');
        listEl.innerHTML = '';
        items.forEach(item => {
            const hargaSatuan = parseInt(item.harga);
            const subtotal    = item.qty * hargaSatuan;
            const div = document.createElement('div');
            div.className = 'flex justify-between items-start text-xs border-b border-slate-100/80 pb-2 last:border-0 last:pb-0';
            div.innerHTML = `
                <div>
                    <p class="font-bold text-slate-900">${item.nama}</p>
                    <p class="text-[10px] text-slate-500 mt-0.5">${item.qty} Tabung × ${formatIDR(hargaSatuan)}</p>
                </div>
                <span class="font-black text-slate-900 shrink-0 ml-3">${formatIDR(subtotal)}</span>`;
            listEl.appendChild(div);
        });

        // Status badge
        const statusEl     = document.getElementById('receipt-status');
        const statusBadge  = document.getElementById('receipt-status-badge');
        const statusDetail = document.getElementById('receipt-status-detail');
        statusEl.innerText     = status;
        statusDetail.innerText = status;

        statusBadge.className = 'mt-2 inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-[10px] font-bold uppercase tracking-wider border';
        statusDetail.className = 'font-extrabold uppercase tracking-wider text-[10px]';

        // Reset dot
        let dot = statusBadge.querySelector('.status-dot');
        if (!dot) { dot = document.createElement('span'); dot.className = 'status-dot w-1.5 h-1.5 rounded-full'; statusBadge.prepend(dot); }
        dot.className = 'status-dot w-1.5 h-1.5 rounded-full';

        if (status.toLowerCase() === 'selesai') {
            statusBadge.classList.add('bg-emerald-50','text-emerald-700','border-emerald-100');
            statusDetail.classList.add('text-emerald-600');
            dot.classList.add('bg-emerald-500');
        } else if (status.toLowerCase() === 'dibatalkan') {
            statusBadge.classList.add('bg-red-50','text-red-700','border-red-100');
            statusDetail.classList.add('text-red-600');
            dot.classList.add('bg-red-500');
        } else {
            statusBadge.classList.add('bg-amber-50','text-amber-700','border-amber-100');
            statusDetail.classList.add('text-amber-500');
            dot.classList.add('bg-amber-500');
        }

        const modal = document.getElementById('modalStruk');
        modal.classList.remove('hidden');
        setTimeout(() => {
            modal.classList.remove('opacity-0');
            modal.firstElementChild.classList.remove('scale-95');
        }, 10);
        if (typeof lucide !== 'undefined') lucide.createIcons();
    }


    function tutupModalStruk() {
        const modal = document.getElementById('modalStruk');
        modal.classList.add('opacity-0');
        modal.firstElementChild.classList.add('scale-95');
        setTimeout(() => modal.classList.add('hidden'), 300);
    }

    function unduhStrukPng(btn) {
        const originalBtnHtml = btn.innerHTML;
        btn.disabled = true;
        btn.innerHTML = '<span class="inline-block animate-spin mr-1">🌀</span> Memproses...';

        const target = document.getElementById('thermal-receipt');
        const invoiceId = (document.getElementById('receipt-invoice').innerText || 'TRX').replace('#','');

        // Buat elemen clone di wrapper terpisah tanpa batasan overflow/max-height agar struk lengkap dari atas ke bawah
        const captureWrapper = document.createElement('div');
        captureWrapper.style.position = 'fixed';
        captureWrapper.style.top = '0';
        captureWrapper.style.left = '0';
        captureWrapper.style.width = '100vw';
        captureWrapper.style.height = 'auto';
        captureWrapper.style.minHeight = '100vh';
        captureWrapper.style.zIndex = '999999';
        captureWrapper.style.opacity = '0';
        captureWrapper.style.pointerEvents = 'none';
        captureWrapper.style.background = '#ffffff';
        captureWrapper.style.display = 'flex';
        captureWrapper.style.justifyContent = 'center';
        captureWrapper.style.alignItems = 'flex-start';
        captureWrapper.style.padding = '24px 0';

        const clone = target.cloneNode(true);
        clone.style.width = '360px';
        clone.style.height = 'auto';
        clone.style.maxHeight = 'none';
        clone.style.overflow = 'visible';
        clone.style.boxShadow = 'none';
        clone.style.border = '1px solid #e2e8f0';
        clone.style.borderRadius = '16px';
        clone.style.backgroundColor = '#ffffff';
        clone.style.margin = '0 auto';
        clone.style.position = 'relative';

        captureWrapper.appendChild(clone);
        document.body.appendChild(captureWrapper);

        const finishDownload = (dataUrl) => {
            if (document.body.contains(captureWrapper)) {
                document.body.removeChild(captureWrapper);
            }
            const link = document.createElement('a');
            link.download = `Struk_${invoiceId}.png`;
            link.href = dataUrl;
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);

            btn.disabled = false;
            btn.innerHTML = originalBtnHtml;
            if (typeof lucide !== 'undefined') lucide.createIcons();
        };

        const tryHtml2CanvasFallback = () => {
            if (typeof html2canvas !== 'undefined') {
                html2canvas(clone, {
                    scale: 2,
                    useCORS: true,
                    allowTaint: true,
                    backgroundColor: '#ffffff',
                    logging: false,
                    windowWidth: 400,
                    windowHeight: clone.scrollHeight + 100
                }).then(canvas => {
                    finishDownload(canvas.toDataURL('image/png'));
                }).catch(err2 => {
                    if (document.body.contains(captureWrapper)) {
                        document.body.removeChild(captureWrapper);
                    }
                    console.error('Metode PNG gagal:', err2);
                    btn.disabled = false;
                    btn.innerHTML = originalBtnHtml;
                    if (typeof lucide !== 'undefined') lucide.createIcons();
                    alert('Gagal mengunduh gambar struk. Silakan coba lagi.');
                });
            } else {
                if (document.body.contains(captureWrapper)) {
                    document.body.removeChild(captureWrapper);
                }
                btn.disabled = false;
                btn.innerHTML = originalBtnHtml;
                if (typeof lucide !== 'undefined') lucide.createIcons();
                alert('Gagal mengunduh gambar struk. Silakan coba lagi.');
            }
        };

        // Engine 1: htmlToImage pada clone tanpa batasan height
        if (typeof htmlToImage !== 'undefined') {
            const fullHeight = clone.scrollHeight || clone.offsetHeight || 600;
            htmlToImage.toPng(clone, {
                quality: 0.98,
                pixelRatio: 2,
                backgroundColor: '#ffffff',
                width: 360,
                height: fullHeight,
                style: {
                    margin: '0',
                    borderRadius: '16px',
                    maxHeight: 'none',
                    overflow: 'visible'
                }
            })
            .then(finishDownload)
            .catch(err => {
                console.warn('htmlToImage clone capture failed, switching to html2canvas...', err);
                tryHtml2CanvasFallback();
            });
        } else {
            tryHtml2CanvasFallback();
        }
    }
</script>
@endpush