@extends('layouts.admin_sidebar')

@section('title', 'Penjualan Langsung')

@push('styles')
<style>
    .soft-shadow { box-shadow: 0 4px 20px rgba(0,0,0,0.05); }
    .product-card { transition: all 0.2s ease; cursor: pointer; }
    .product-card.selected { border-color: #22c55e; background: #f0fdf4; box-shadow: 0 0 0 3px rgba(34,197,94,0.2); }
    .product-card:hover:not(.selected) { border-color: #94a3b8; transform: translateY(-2px); }
    input:focus, select:focus { border-color: #22c55e !important; box-shadow: 0 0 0 3px rgba(34,197,94,0.1) !important; outline: none; }
    .qty-btn { transition: all 0.15s; }
    .qty-btn:hover { transform: scale(1.05); }
    .qty-btn:active { transform: scale(0.95); }
    #customerDropdown { max-height: 220px; overflow-y: auto; }
    #customerDropdown::-webkit-scrollbar { width: 4px; }
    #customerDropdown::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
    /* Metode Bayar Cards */
    .metode-card {
        display: flex; align-items: center; gap: 12px;
        padding: 14px 18px; border-radius: 14px;
        border: 2px solid #e2e8f0; background: #f8fafc;
        cursor: pointer; transition: all 0.18s ease;
        color: #64748b; user-select: none;
    }
    .metode-card:hover { border-color: #94a3b8; background: #f1f5f9; }
    .metode-card.active {
        border-color: #22c55e; background: #f0fdf4;
        color: #15803d; box-shadow: 0 0 0 3px rgba(34,197,94,0.15);
    }
    .metode-card svg { width: 20px; height: 20px; flex-shrink: 0; }
    .metode-card span { font-weight: 900; font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.05em; }
    @keyframes fadeInDown {
        from { opacity: 0; transform: translateY(-8px); }
        to   { opacity: 1; transform: translateY(0); }
    }
</style>
@endpush

@section('content')
<div class="max-w-7xl mx-auto pb-10">

    {{-- ====== HEADER ====== --}}
    <div class="flex flex-col sm:flex-row sm:items-center gap-4 mb-6">
        <div class="flex items-center gap-4">
            <div class="w-12 h-12 bg-gradient-to-br from-green-400 to-emerald-600 rounded-2xl flex items-center justify-center shadow-lg shadow-green-200 text-white flex-shrink-0">
                <i data-lucide="shopping-bag" class="w-6 h-6"></i>
            </div>
            <div>
                <h1 class="text-2xl font-black tracking-tight text-slate-800">Penjualan Langsung</h1>
                <p class="text-xs text-slate-500 font-semibold mt-0.5">Kasir Admin — Transaksi langsung & real-time</p>
            </div>
        </div>
        <div class="sm:ml-auto flex items-center gap-2">
            <span class="text-xs font-bold text-slate-400 uppercase tracking-widest">{{ now()->translatedFormat('d M Y') }}</span>
        </div>
    </div>

    {{-- ====== FLASH MESSAGES ====== --}}
    @if(session('success'))
    <div class="mb-6 flex flex-col sm:flex-row sm:items-center justify-between gap-4 bg-green-50 border border-green-200 text-green-800 px-5 py-4 rounded-2xl shadow-sm">
        <div class="flex items-start gap-3">
            <i data-lucide="check-circle-2" class="w-5 h-5 text-green-500 flex-shrink-0 mt-0.5"></i>
            <div>
                <p class="font-bold text-sm">Transaksi Berhasil!</p>
                <p class="text-xs mt-0.5 text-green-700">{{ session('success') }}</p>
            </div>
        </div>
        @if(session('trx_receipt'))
        <button type="button" onclick="bukaModalStrukDirect()" class="inline-flex items-center gap-2 px-4 py-2.5 bg-emerald-600 hover:bg-emerald-700 text-white font-bold text-xs rounded-xl shadow-md shadow-emerald-600/20 transition-all whitespace-nowrap">
            <i data-lucide="printer" class="w-4 h-4"></i> Cetak Bukti Transaksi (PNG)
        </button>
        @endif
    </div>
    @endif
    @if(session('error'))
    <div class="mb-6 flex items-start gap-3 bg-red-50 border border-red-200 text-red-800 px-5 py-4 rounded-2xl shadow-sm">
        <i data-lucide="alert-triangle" class="w-5 h-5 text-red-500 flex-shrink-0 mt-0.5"></i>
        <div>
            <p class="font-bold text-sm">Transaksi Gagal</p>
            <p class="text-xs mt-0.5 text-red-700">{{ session('error') }}</p>
        </div>
    </div>
    @endif

    {{-- ====== STOK CARDS ====== --}}
    @php
        $gas3kg  = $produk->first(fn($i) => stripos($i->nama_produk, '3') !== false && stripos($i->nama_produk, 'kg') !== false);
        $gas12kg = $produk->first(fn($i) => stripos($i->nama_produk, '12') !== false && stripos($i->nama_produk, 'kg') !== false);
        $gas55kg = $produk->first(fn($i) => (stripos($i->nama_produk, '5.5') !== false || stripos($i->nama_produk, '5,5') !== false));
    @endphp

    <div class="grid grid-cols-1 sm:grid-cols-2 {{ $gas55kg ? 'lg:grid-cols-3' : 'lg:grid-cols-2' }} gap-4 mb-6">
        {{-- Gas 3 KG --}}
        @if($gas3kg)
        <div class="product-card bg-white rounded-2xl p-5 border-2 border-slate-100 soft-shadow flex items-center justify-between"
             id="card-{{ $gas3kg->id_produk }}"
             onclick="selectProduct('{{ $gas3kg->id_produk }}', '{{ $gas3kg->nama_produk }}', {{ $gas3kg->price }}, {{ $gas3kg->stok_isi }})">
            <div>
                <p class="text-[10px] font-black text-slate-400 uppercase tracking-widest mb-1">Gas 3 KG</p>
                <div class="flex items-baseline gap-2 mb-1">
                    <span class="text-4xl font-black {{ $gas3kg->stok_isi < 10 ? 'text-red-500' : 'text-green-500' }}">{{ $gas3kg->stok_isi }}</span>
                    <span class="text-sm font-bold text-slate-400">Tabung</span>
                </div>
                <p class="text-xs text-emerald-600 font-bold">Rp {{ number_format($gas3kg->price, 0, ',', '.') }}/tabung</p>
                <p class="text-[10px] text-slate-400 mt-1">Klik untuk pilih</p>
            </div>
            <div class="w-20 h-20 flex items-center justify-center flex-shrink-0">
                <img src="{{ asset('images/gas_3kg_elpiji.jpg') }}" alt="Gas 3kg" class="w-20 h-20 object-contain drop-shadow-lg mix-blend-multiply">
            </div>
        </div>
        @endif

        {{-- Gas 5.5 KG --}}
        @if($gas55kg)
        <div class="product-card bg-white rounded-2xl p-5 border-2 border-slate-100 soft-shadow flex items-center justify-between"
             id="card-{{ $gas55kg->id_produk }}"
             onclick="selectProduct('{{ $gas55kg->id_produk }}', '{{ $gas55kg->nama_produk }}', {{ $gas55kg->price }}, {{ $gas55kg->stok_isi }})">
            <div>
                <p class="text-[10px] font-black text-slate-400 uppercase tracking-widest mb-1">Gas 5.5 KG</p>
                <div class="flex items-baseline gap-2 mb-1">
                    <span class="text-4xl font-black {{ $gas55kg->stok_isi < 5 ? 'text-red-500' : 'text-orange-500' }}">{{ $gas55kg->stok_isi }}</span>
                    <span class="text-sm font-bold text-slate-400">Tabung</span>
                </div>
                <p class="text-xs text-orange-600 font-bold">Rp {{ number_format($gas55kg->price, 0, ',', '.') }}/tabung</p>
                <p class="text-[10px] text-slate-400 mt-1">Klik untuk pilih</p>
            </div>
            <div class="w-20 h-20 flex items-center justify-center flex-shrink-0">
                <img src="{{ asset('images/gas5-5.jpg') }}" alt="Gas 5.5kg" class="w-20 h-20 object-contain drop-shadow-lg mix-blend-multiply">
            </div>
        </div>
        @endif

        {{-- Gas 12 KG --}}
        @if($gas12kg)
        <div class="product-card bg-white rounded-2xl p-5 border-2 border-slate-100 soft-shadow flex items-center justify-between"
             id="card-{{ $gas12kg->id_produk }}"
             onclick="selectProduct('{{ $gas12kg->id_produk }}', '{{ $gas12kg->nama_produk }}', {{ $gas12kg->price }}, {{ $gas12kg->stok_isi }})">
            <div>
                <p class="text-[10px] font-black text-slate-400 uppercase tracking-widest mb-1">Gas 12 KG</p>
                <div class="flex items-baseline gap-2 mb-1">
                    <span class="text-4xl font-black {{ $gas12kg->stok_isi < 5 ? 'text-red-500' : 'text-pink-500' }}">{{ $gas12kg->stok_isi }}</span>
                    <span class="text-sm font-bold text-slate-400">Tabung</span>
                </div>
                <p class="text-xs text-pink-600 font-bold">Rp {{ number_format($gas12kg->price, 0, ',', '.') }}/tabung</p>
                <p class="text-[10px] text-slate-400 mt-1">Klik untuk pilih</p>
            </div>
            <div class="w-20 h-20 flex items-center justify-center flex-shrink-0">
                <img src="{{ asset('images/gas_12kg_bright.jpg') }}" alt="Gas 12kg" class="w-20 h-20 object-contain drop-shadow-lg mix-blend-multiply">
            </div>
        </div>
        @endif
    </div>

    {{-- ====== MAIN FORM ====== --}}
    <form action="{{ route('admin.penjualan.store') }}" method="POST" id="penjualanForm">
        @csrf
        <input type="hidden" name="id_produk" id="hidden_id_produk">
        <input type="hidden" name="customers_id" id="hidden_customers_id">
        <input type="hidden" name="metode_bayar" id="hidden_metode_bayar" value="{{ old('metode_bayar', 'Tunai') }}">

        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">

            {{-- ===== KOLOM KIRI (2/3) ===== --}}
            <div class="lg:col-span-2 space-y-4">

                {{-- Pilih Pelanggan --}}
                <div class="bg-white p-6 rounded-2xl border border-slate-200 soft-shadow">
                    <div class="flex items-center gap-2 mb-4">
                        <div class="w-8 h-8 bg-blue-50 rounded-xl flex items-center justify-center">
                            <i data-lucide="users" class="w-4 h-4 text-blue-500"></i>
                        </div>
                        <h3 class="font-black text-slate-700 text-sm">Pilih Pelanggan</h3>
                    </div>

                    <div class="relative" id="customerSearchContainer">
                        <div class="relative">
                            <input type="text" id="customer_search_input"
                                   class="w-full pl-4 pr-10 py-3 bg-slate-50 border border-slate-200 rounded-xl text-slate-700 text-sm font-medium transition-all placeholder:text-slate-400"
                                   placeholder="Ketik nama pelanggan..." autocomplete="off">
                            <div class="absolute inset-y-0 right-3 flex items-center pointer-events-none text-slate-400">
                                <i data-lucide="search" class="w-4 h-4"></i>
                            </div>
                        </div>

                        {{-- Dropdown List --}}
                        <div id="customerDropdown" class="absolute z-30 w-full bg-white border border-slate-200 rounded-2xl mt-1 shadow-xl hidden">
                        </div>
                    </div>

                    {{-- Selected Customer Badge --}}
                    <div id="selectedCustomerBadge" class="hidden mt-3 flex items-center gap-3 bg-blue-50 border border-blue-100 px-4 py-3 rounded-xl">
                        <div class="w-9 h-9 bg-blue-500 rounded-xl flex items-center justify-center text-white font-black text-sm flex-shrink-0" id="badgeAvatar">A</div>
                        <div class="min-w-0">
                            <p class="font-black text-slate-800 text-sm truncate" id="badgeName">-</p>
                            <p class="text-[10px] text-slate-500 font-semibold truncate" id="badgeAddress">-</p>
                        </div>
                        <button type="button" onclick="clearCustomer()" class="ml-auto flex-shrink-0 w-7 h-7 bg-white border border-slate-200 rounded-lg flex items-center justify-center text-slate-400 hover:text-red-500 hover:border-red-200 transition-colors">
                            <i data-lucide="x" class="w-3.5 h-3.5"></i>
                        </button>
                    </div>

                    @error('customers_id')
                    <p class="text-red-500 text-xs font-bold mt-2 flex items-center gap-1"><i data-lucide="alert-circle" class="w-3 h-3"></i> {{ $message }}</p>
                    @enderror
                </div>

                {{-- Pilih Produk --}}
                <div class="bg-white p-6 rounded-2xl border border-slate-200 soft-shadow">
                    <div class="flex items-center gap-2 mb-4">
                        <div class="w-8 h-8 bg-emerald-50 rounded-xl flex items-center justify-center">
                            <i data-lucide="package" class="w-4 h-4 text-emerald-500"></i>
                        </div>
                        <h3 class="font-black text-slate-700 text-sm">Pilih Produk</h3>
                    </div>

                    <select id="select_produk" onchange="onProductSelectChange()"
                            class="w-full py-3 px-4 bg-slate-50 border border-slate-200 rounded-xl text-slate-700 text-sm font-medium transition-all">
                        <option value="">-- Pilih Produk LPG --</option>
                        @foreach($produk as $item)
                        <option value="{{ $item->id_produk }}"
                                data-nama="{{ $item->nama_produk }}"
                                data-harga="{{ $item->price }}"
                                data-stok="{{ $item->stok_isi }}">
                            {{ $item->nama_produk }} — Stok: {{ $item->stok_isi }} tabung · Rp {{ number_format($item->price, 0, ',', '.') }}
                        </option>
                        @endforeach
                    </select>

                    {{-- Info Stok & Harga Setelah Produk Dipilih --}}
                    <div id="produkInfo" class="hidden mt-3 grid grid-cols-2 gap-3">
                        <div class="bg-slate-50 rounded-xl px-4 py-3 text-center">
                            <p class="text-[10px] font-black text-slate-400 uppercase tracking-widest mb-1">Stok Tersedia</p>
                            <p class="font-black text-slate-800 text-lg" id="infoStok">0</p>
                            <p class="text-[10px] text-slate-500">tabung</p>
                        </div>
                        <div class="bg-emerald-50 rounded-xl px-4 py-3 text-center">
                            <p class="text-[10px] font-black text-emerald-400 uppercase tracking-widest mb-1">Harga/Tabung</p>
                            <p class="font-black text-emerald-700 text-lg" id="infoHarga">Rp 0</p>
                            <p class="text-[10px] text-emerald-500">per tabung</p>
                        </div>
                    </div>

                    @error('id_produk')
                    <p class="text-red-500 text-xs font-bold mt-2 flex items-center gap-1"><i data-lucide="alert-circle" class="w-3 h-3"></i> {{ $message }}</p>
                    @enderror
                </div>

                {{-- Jumlah & Detail Transaksi --}}
                <div class="bg-white p-6 rounded-2xl border border-slate-200 soft-shadow">
                    <div class="flex items-center gap-2 mb-4">
                        <div class="w-8 h-8 bg-purple-50 rounded-xl flex items-center justify-center">
                            <i data-lucide="list-ordered" class="w-4 h-4 text-purple-500"></i>
                        </div>
                        <h3 class="font-black text-slate-700 text-sm">Detail Transaksi</h3>
                    </div>

                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                        {{-- Jumlah Tabung --}}
                        <div>
                            <label class="block text-[10px] font-black text-slate-400 uppercase tracking-widest mb-2">Jumlah Tabung</label>
                            <div class="flex items-center border border-slate-200 rounded-xl overflow-hidden bg-slate-50">
                                <button type="button" class="qty-btn px-4 py-3 text-slate-500 hover:bg-slate-200 font-black text-lg transition-colors" onclick="changeQty(-1)">−</button>
                                <input type="number" name="qty_beli" id="qty_beli"
                                       class="flex-1 py-3 text-center bg-transparent text-slate-800 font-black text-lg border-0 focus:ring-0"
                                       value="{{ old('qty_beli', 1) }}" min="1" oninput="updateTotal()">
                                <button type="button" class="qty-btn px-4 py-3 text-slate-500 hover:bg-slate-200 font-black text-lg transition-colors" onclick="changeQty(1)">+</button>
                            </div>
                            <p class="text-[10px] text-slate-400 mt-1 font-semibold" id="maxStokWarning"></p>
                            @error('qty_beli')
                            <p class="text-red-500 text-xs font-bold mt-1">{{ $message }}</p>
                            @enderror
                        </div>

                        {{-- Tanggal Transaksi --}}
                        <div>
                            <label class="block text-[10px] font-black text-slate-400 uppercase tracking-widest mb-2">Tanggal Transaksi</label>
                            <input type="date" name="tanggal" id="tanggal"
                                   class="w-full py-3 px-4 bg-slate-50 border border-slate-200 rounded-xl text-slate-700 text-sm font-medium"
                                   value="{{ old('tanggal', now()->format('Y-m-d')) }}" max="{{ now()->format('Y-m-d') }}" required>
                            @error('tanggal')
                            <p class="text-red-500 text-xs font-bold mt-1">{{ $message }}</p>
                            @enderror
                        </div>

                        {{-- Metode Bayar --}}
                        <div class="sm:col-span-2">
                            <label class="block text-[10px] font-black text-slate-400 uppercase tracking-widest mb-3">Metode Pembayaran</label>
                            <div class="grid grid-cols-2 gap-3" id="metodeContainer">
                                <div class="metode-card {{ old('metode_bayar', 'Tunai') === 'Tunai' ? 'active' : '' }}"
                                     id="metode-Tunai" onclick="selectMetode('Tunai')">
                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 18.75a60.07 60.07 0 0 1 15.797 2.101c.727.198 1.453-.342 1.453-1.096V18.75M3.75 4.5v.75A.75.75 0 0 1 3 6h-.75m0 0v-.375c0-.621.504-1.125 1.125-1.125H20.25M2.25 6v9m18-10.5v.75c0 .414.336.75.75.75h.75m-1.5-1.5h.375c.621 0 1.125.504 1.125 1.125v9.75c0 .621-.504 1.125-1.125 1.125h-.375m1.5-1.5H21a.75.75 0 0 0-.75.75v.75m0 0H3.75m0 0h-.375a1.125 1.125 0 0 1-1.125-1.125V15m1.5 1.5v-.75A.75.75 0 0 0 3 15h-.75M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm3 0h.008v.008H18V10.5Zm-12 0h.008v.008H6V10.5Z"/>
                                    </svg>
                                    <span>Tunai</span>
                                </div>
                                <div class="metode-card {{ old('metode_bayar', 'Tunai') === 'Qris' ? 'active' : '' }}"
                                     id="metode-Qris" onclick="selectMetode('Qris')">
                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 0 1 3.75 9.375v-4.5ZM3.75 14.625c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5a1.125 1.125 0 0 1-1.125-1.125v-4.5ZM13.5 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 0 1 13.5 9.375v-4.5ZM6.75 6.75h.75v.75h-.75v-.75ZM6.75 16.5h.75v.75h-.75v-.75ZM16.5 6.75h.75v.75h-.75v-.75ZM13.5 13.5h.75v.75h-.75v-.75ZM13.5 19.5h.75v.75h-.75v-.75ZM19.5 13.5h.75v.75h-.75v-.75ZM19.5 19.5h.75v.75h-.75v-.75ZM16.5 16.5h.75v.75h-.75v-.75Z"/>
                                    </svg>
                                    <span>QRIS</span>
                                </div>
                            </div>
                            @error('metode_bayar')
                            <p class="text-red-500 text-xs font-bold mt-2">{{ $message }}</p>
                            @enderror

                            {{-- QRIS Image Panel --}}
                            <div id="qrisPanelWrapper" class="hidden mt-4">
                                <div class="flex flex-col items-center gap-3 bg-gradient-to-b from-slate-50 to-white border-2 border-emerald-200 rounded-2xl p-5 shadow-sm">
                                    <p class="text-[10px] font-black text-emerald-600 uppercase tracking-widest">Scan untuk Pembayaran QRIS</p>
                                    <div class="relative">
                                        <div class="absolute inset-0 rounded-2xl bg-emerald-400/10 blur-md"></div>
                                        <img src="{{ asset('images/qris_baru.jpeg') }}"
                                             alt="QR Code Pembayaran"
                                             class="relative w-56 h-56 sm:w-64 sm:h-64 object-contain rounded-2xl border border-emerald-100 shadow-md bg-white p-2">
                                    </div>
                                    <p class="text-[10px] text-slate-400 font-semibold text-center">Tunjukkan QR ini ke pelanggan untuk pembayaran</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- ===== KOLOM KANAN (1/3): RINGKASAN ===== --}}
            <div class="lg:col-span-1">
                <div class="bg-gradient-to-br from-slate-900 via-slate-800 to-emerald-950 rounded-3xl p-6 shadow-2xl shadow-slate-900/30 sticky top-6 text-white">
                    <div class="flex items-center gap-3 mb-6">
                        <div class="w-10 h-10 bg-emerald-500/20 rounded-2xl flex items-center justify-center border border-emerald-500/30">
                            <i data-lucide="receipt" class="w-5 h-5 text-emerald-400"></i>
                        </div>
                        <div>
                            <h3 class="font-black text-base">Ringkasan Order</h3>
                            <p class="text-[10px] text-slate-400 font-semibold uppercase tracking-widest">Penjualan Admin</p>
                        </div>
                    </div>

                    <div class="space-y-3 mb-6">
                        <div class="flex justify-between items-center text-sm">
                            <span class="text-slate-400 font-semibold">Pelanggan</span>
                            <span class="font-black text-white text-right max-w-[60%] truncate" id="summary_pelanggan">—</span>
                        </div>
                        <div class="flex justify-between items-center text-sm">
                            <span class="text-slate-400 font-semibold">Produk</span>
                            <span class="font-black text-white text-right max-w-[60%] truncate" id="summary_produk">—</span>
                        </div>
                        <div class="flex justify-between items-center text-sm">
                            <span class="text-slate-400 font-semibold">Harga Satuan</span>
                            <span class="font-black text-emerald-400" id="summary_harga">Rp 0</span>
                        </div>
                        <div class="flex justify-between items-center text-sm">
                            <span class="text-slate-400 font-semibold">Jumlah</span>
                            <span class="font-black text-white" id="summary_qty">1 tabung</span>
                        </div>
                    </div>

                    <div class="border-t border-slate-700/50 pt-4 mb-6">
                        <div class="flex justify-between items-center">
                            <span class="text-slate-300 font-bold text-sm">TOTAL</span>
                            <span class="font-black text-2xl text-emerald-400" id="summary_total">Rp 0</span>
                        </div>
                    </div>

                    {{-- Tombol Simpan --}}
                    <button type="button" onclick="confirmSubmit()" id="btnSubmit"
                            class="w-full py-4 bg-emerald-500 hover:bg-emerald-400 active:scale-95 text-white font-black rounded-2xl transition-all shadow-lg shadow-emerald-900/40 flex items-center justify-center gap-2 text-sm uppercase tracking-widest disabled:opacity-50 disabled:cursor-not-allowed">
                        <i data-lucide="check-circle-2" class="w-5 h-5"></i>
                        Simpan Transaksi
                    </button>

                    <p class="text-center text-[10px] text-slate-500 mt-3 font-semibold">
                        <i data-lucide="shield-check" class="w-3 h-3 inline-block mr-1 text-emerald-600"></i>
                        Stok akan otomatis berkurang
                    </p>
                </div>

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

{{-- ====== MODAL BUKTI TRANSAKSI (STRUK) ====== --}}
<div id="modalStruk" class="fixed inset-0 z-50 flex items-center justify-center bg-slate-900/60 backdrop-blur-sm hidden p-4">
    <div class="bg-white rounded-3xl max-w-md w-full max-h-[90vh] flex flex-col overflow-hidden shadow-2xl transition-all transform scale-95 border border-slate-100" id="modalStrukContainer">
        
        <!-- Header Modal -->
        <div class="p-4 border-b border-slate-100 flex items-center justify-between bg-slate-50">
            <div class="flex items-center gap-2">
                <div class="w-8 h-8 bg-emerald-100 rounded-xl flex items-center justify-center">
                    <i data-lucide="receipt" class="w-4 h-4 text-emerald-600"></i>
                </div>
                <h3 class="font-black text-slate-800 text-sm">Bukti Transaksi</h3>
            </div>
            <button type="button" onclick="tutupModalStruk()" class="w-8 h-8 rounded-xl bg-white border border-slate-200 flex items-center justify-center text-slate-400 hover:text-slate-600 transition-colors">
                <i data-lucide="x" class="w-4 h-4"></i>
            </button>
        </div>

        <!-- Scrollable Body Struk -->
        <div class="p-6 overflow-y-auto custom-scroll flex-1 bg-slate-50/50">
            <!-- Thermal Struk Target Canvas for PNG Download -->
            <div id="thermal-receipt" class="bg-white p-5 rounded-2xl border border-slate-200 shadow-sm text-slate-800 space-y-4 max-w-[340px] mx-auto font-sans leading-normal">
                
                <!-- Header Logo & Store Name -->
                <div class="text-center pb-3 border-b border-slate-100">
                    <div class="text-xl font-black text-slate-900 tracking-tight flex items-center justify-center gap-1.5 mb-0.5">
                        <span class="w-6 h-6 bg-emerald-500 text-white rounded-lg flex items-center justify-center text-xs font-black">G</span>
                        Gas<span class="text-emerald-600">Ku</span>
                    </div>
                    <p class="text-[10px] text-slate-400 font-bold uppercase tracking-widest leading-none">Bukti Transaksi Resmi</p>
                </div>

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

                <!-- Transaction Info Details -->
                <div class="space-y-2 text-xs border-b border-dashed border-slate-200 pb-3">
                    <div class="flex justify-between items-center gap-2">
                        <span class="text-slate-400 font-medium shrink-0 whitespace-nowrap">No. Invoice</span>
                        <span class="font-bold text-slate-800 font-mono shrink-0 whitespace-nowrap" id="receipt-invoice">#TRX-0</span>
                    </div>
                    <div class="flex justify-between items-center gap-2">
                        <span class="text-slate-400 font-medium 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 gap-2">
                        <span class="text-slate-400 font-medium shrink-0 whitespace-nowrap">Pelanggan</span>
                        <span class="font-bold text-slate-800 text-right truncate max-w-[170px]" id="receipt-pelanggan">-</span>
                    </div>
                    <div class="flex justify-between items-start gap-2">
                        <span class="text-slate-400 font-medium shrink-0 whitespace-nowrap">Alamat Kirim</span>
                        <span class="font-semibold text-slate-800 text-right break-words max-w-[180px] leading-tight" id="receipt-alamat">-</span>
                    </div>
                </div>

                <!-- Items Section -->
                <div class="bg-emerald-50/60 rounded-xl p-3.5 border border-emerald-100">
                    <div class="text-[10px] font-black text-emerald-800 uppercase tracking-wider mb-2">Item Transaksi</div>
                    <div id="receipt-items-list" class="space-y-2">
                        <!-- Filled by JS -->
                    </div>
                </div>

                <!-- Summary Breakdown -->
                <div class="space-y-2 text-xs border-b border-dashed border-slate-200 pb-3">
                    <div class="flex justify-between items-center">
                        <span class="text-slate-400 font-medium shrink-0 whitespace-nowrap">Ongkos Kirim</span>
                        <span class="font-semibold text-slate-800 shrink-0 whitespace-nowrap">Rp 0</span>
                    </div>
                    <div class="flex justify-between items-center text-xs pt-1.5 border-t border-slate-100 font-black">
                        <span class="text-slate-900 shrink-0 whitespace-nowrap">Total Transaksi</span>
                        <span class="text-slate-900 shrink-0 whitespace-nowrap" id="receipt-total-summary">Rp 0</span>
                    </div>
                </div>

                <!-- Payment Info -->
                <div class="space-y-2 bg-slate-50 rounded-2xl p-3.5 border border-slate-100 text-xs">
                    <div class="flex justify-between items-center gap-2">
                        <span class="text-[10px] text-slate-400 font-bold uppercase tracking-wider shrink-0 whitespace-nowrap">Metode Bayar</span>
                        <span class="font-black text-slate-800 shrink-0 whitespace-nowrap" id="receipt-metode">Tunai</span>
                    </div>
                    <div class="flex justify-between items-center gap-2 pt-1.5 border-t border-slate-100">
                        <span class="text-[10px] text-slate-400 font-bold uppercase tracking-wider shrink-0 whitespace-nowrap">Kasir / Pengantar</span>
                        <span class="font-bold text-slate-800 text-right truncate max-w-[160px]" id="receipt-pengirim">Admin</span>
                    </div>
                    <div class="flex justify-between items-center gap-2 pt-1.5 border-t border-slate-100">
                        <span class="text-[10px] text-slate-400 font-bold uppercase tracking-wider shrink-0 whitespace-nowrap">Status</span>
                        <span class="font-black text-emerald-600 uppercase text-[10px] shrink-0 whitespace-nowrap" id="receipt-status-detail">SELESAI</span>
                    </div>
                </div>

                <!-- Footer -->
                <div class="text-center pt-1">
                    <div class="inline-flex items-center gap-1 text-[10px] font-bold text-emerald-600 bg-emerald-50 px-3 py-1 rounded-full border border-emerald-100 mb-1">
                        <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" class="shrink-0"><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 Resmi LPG GasKu
                    </div>
                    <p class="text-[9px] text-slate-400">Terima kasih telah melakukan transaksi.</p>
                </div>
            </div>
        </div>

        <!-- Footer Actions -->
        <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-3 px-4 bg-emerald-600 hover:bg-emerald-500 text-white rounded-2xl text-xs font-black flex items-center justify-center gap-2 shadow-lg shadow-emerald-600/20 transition-all uppercase tracking-wider">
                <i data-lucide="download" class="w-4 h-4"></i> Unduh PNG
            </button>
            <button type="button" onclick="tutupModalStruk()" class="px-5 py-3 bg-slate-200 text-slate-700 rounded-2xl text-xs font-bold hover:bg-slate-300 transition-colors uppercase tracking-wider">Tutup</button>
        </div>
    </div>
</div>

<script>
@php
    $pelangganJs = $pelanggan->map(function($p) {
        return [
            'id'       => $p->customers_id,
            'name'     => $p->name,
            'address'  => $p->address ?? '',
            'category' => (int)($p->price_category ?? 0),
        ];
    })->values()->toArray();
@endphp
const pelangganData = {!! json_encode($pelangganJs) !!};

let selectedCustomer = null;
let selectedProduct  = { id: '', name: '', price: 0, stok: 0 };

// ===== METODE BAYAR SELECTION =====
function selectMetode(nilai) {
    document.getElementById('hidden_metode_bayar').value = nilai;
    document.querySelectorAll('.metode-card').forEach(function(card) {
        card.classList.remove('active');
    });
    const target = document.getElementById('metode-' + nilai);
    if (target) target.classList.add('active');

    // Tampilkan/sembunyikan panel QRIS
    const qrisPanel = document.getElementById('qrisPanelWrapper');
    if (qrisPanel) {
        if (nilai === 'Qris') {
            qrisPanel.classList.remove('hidden');
            qrisPanel.style.animation = 'fadeInDown 0.25s ease';
        } else {
            qrisPanel.classList.add('hidden');
        }
    }
}

// Auto-show QRIS panel if old value is Qris (after validation error)
@if(old('metode_bayar') === 'Qris')
selectMetode('Qris');
@endif

// ===== PRODUCT SELECTION =====
function selectProduct(id, nama, harga, stok) {
    // Deselect all cards
    document.querySelectorAll('.product-card').forEach(c => c.classList.remove('selected'));
    // Select clicked card
    const card = document.getElementById('card-' + id);
    if (card) card.classList.add('selected');

    // Update select dropdown
    const sel = document.getElementById('select_produk');
    sel.value = id;

    // Update hidden input & state
    document.getElementById('hidden_id_produk').value = id;
    selectedProduct = { id, name: nama, price: harga, stok };

    // Update info panel
    document.getElementById('infoStok').textContent  = stok;
    document.getElementById('infoHarga').textContent = 'Rp ' + formatNum(harga);
    document.getElementById('produkInfo').classList.remove('hidden');

    // Update summary
    document.getElementById('summary_produk').textContent = nama;
    document.getElementById('summary_harga').textContent  = 'Rp ' + formatNum(harga);
    updateTotal();
}

function onProductSelectChange() {
    const sel  = document.getElementById('select_produk');
    const opt  = sel.options[sel.selectedIndex];
    if (!opt.value) return;
    const id   = opt.value;
    const nama = opt.dataset.nama;
    const harga= parseInt(opt.dataset.harga) || 0;
    const stok = parseInt(opt.dataset.stok)  || 0;
    selectProduct(id, nama, harga, stok);
}

// ===== CUSTOMER SEARCH =====
const searchInput    = document.getElementById('customer_search_input');
const dropdown       = document.getElementById('customerDropdown');
const selectedBadge  = document.getElementById('selectedCustomerBadge');

searchInput.addEventListener('input', function() {
    const q = this.value.trim().toLowerCase();
    if (q.length < 1) { dropdown.classList.add('hidden'); return; }

    const filtered = pelangganData.filter(p =>
        p.name.toLowerCase().includes(q) ||
        (p.address && p.address.toLowerCase().includes(q))
    ).slice(0, 8);

    if (filtered.length === 0) {
        dropdown.innerHTML = '<p class="text-xs text-slate-400 text-center py-4 font-semibold">Pelanggan tidak ditemukan</p>';
    } else {
        dropdown.innerHTML = filtered.map(p => `
            <div class="flex items-center gap-3 px-4 py-3 hover:bg-slate-50 cursor-pointer transition-colors border-b border-slate-50 last:border-0"
                 onclick="chooseCustomer('${p.id}', \`${p.name.replace(/`/g,"'")}\`, \`${(p.address || '').replace(/`/g,"'")}\`, ${p.category})">
                <div class="w-9 h-9 bg-blue-100 rounded-xl flex items-center justify-center text-blue-700 font-black text-sm flex-shrink-0">
                    ${p.name.charAt(0).toUpperCase()}
                </div>
                <div class="min-w-0">
                    <p class="font-bold text-slate-800 text-sm truncate">${p.name}</p>
                    <p class="text-[10px] text-slate-400 font-semibold truncate">${p.address || 'Alamat tidak tersedia'}</p>
                </div>
            </div>
        `).join('');
    }
    dropdown.classList.remove('hidden');
});

function chooseCustomer(id, name, address, category) {
    selectedCustomer = { id, name, address, category };
    document.getElementById('hidden_customers_id').value = id;

    // Show badge
    document.getElementById('badgeAvatar').textContent  = name.charAt(0).toUpperCase();
    document.getElementById('badgeName').textContent    = name;
    document.getElementById('badgeAddress').textContent = address || 'Alamat tidak tersedia';
    selectedBadge.classList.remove('hidden');
    selectedBadge.style.display = 'flex';

    // Update search & close dropdown
    searchInput.value = name;
    dropdown.classList.add('hidden');
    document.getElementById('summary_pelanggan').textContent = name;

    // Recalculate with customer-specific price if applicable
    updateTotal();
}

function clearCustomer() {
    selectedCustomer = null;
    document.getElementById('hidden_customers_id').value = '';
    searchInput.value = '';
    selectedBadge.classList.add('hidden');
    selectedBadge.style.display = 'none';
    document.getElementById('summary_pelanggan').textContent = '—';
    updateTotal();
}

// Close dropdown on outside click
document.addEventListener('click', function(e) {
    if (!document.getElementById('customerSearchContainer').contains(e.target)) {
        dropdown.classList.add('hidden');
    }
});

// ===== QTY CONTROL =====
function changeQty(delta) {
    const input = document.getElementById('qty_beli');
    let val     = parseInt(input.value) || 1;
    val         = Math.max(1, val + delta);
    if (selectedProduct.stok > 0) val = Math.min(val, selectedProduct.stok);
    input.value = val;
    updateTotal();
}

document.getElementById('qty_beli').addEventListener('input', updateTotal);

// ===== TOTAL CALCULATION =====
function updateTotal() {
    const qty   = parseInt(document.getElementById('qty_beli').value) || 1;
    let harga   = selectedProduct.price;

    // If customer has a special price category, override
    if (selectedCustomer && selectedCustomer.category > 0) {
        harga = selectedCustomer.category;
    }

    const total = harga * qty;

    document.getElementById('summary_qty').textContent    = qty + ' tabung';
    document.getElementById('summary_harga').textContent  = 'Rp ' + formatNum(harga);
    document.getElementById('summary_total').textContent  = 'Rp ' + formatNum(total);
    document.getElementById('infoHarga').textContent      = 'Rp ' + formatNum(harga);

    // Stok warning
    const warning = document.getElementById('maxStokWarning');
    if (selectedProduct.stok > 0 && qty > selectedProduct.stok) {
        warning.innerHTML = '<span class="text-red-500">Melebihi stok tersedia (' + selectedProduct.stok + ' tabung)</span>';
        document.getElementById('qty_beli').value = selectedProduct.stok;
        updateTotal();
    } else if (selectedProduct.stok > 0) {
        warning.textContent = 'Maks. ' + selectedProduct.stok + ' tabung tersedia';
        warning.className   = 'text-[10px] text-slate-400 mt-1 font-semibold';
    } else {
        warning.textContent = '';
    }
}

// ===== CONFIRM & SUBMIT =====
function confirmSubmit() {
    if (!document.getElementById('hidden_customers_id').value) {
        Swal.fire({ icon: 'warning', title: 'Pilih Pelanggan', text: 'Anda belum memilih pelanggan.', confirmButtonColor: '#22c55e', timer: 2500 });
        return;
    }
    if (!document.getElementById('hidden_id_produk').value) {
        Swal.fire({ icon: 'warning', title: 'Pilih Produk', text: 'Anda belum memilih produk LPG.', confirmButtonColor: '#22c55e', timer: 2500 });
        return;
    }
    const qty = parseInt(document.getElementById('qty_beli').value) || 0;
    if (qty < 1) {
        Swal.fire({ icon: 'warning', title: 'Jumlah Tidak Valid', text: 'Jumlah tabung minimal 1.', confirmButtonColor: '#22c55e' });
        return;
    }

    const total = document.getElementById('summary_total').textContent;
    Swal.fire({
        title: 'Konfirmasi Transaksi',
        html: `
            <div class="text-left space-y-2 text-sm">
                <div class="flex justify-between py-2 border-b border-slate-100">
                    <span class="text-slate-500 font-semibold">Pelanggan</span>
                    <span class="font-bold text-slate-800">${document.getElementById('badgeName').textContent}</span>
                </div>
                <div class="flex justify-between py-2 border-b border-slate-100">
                    <span class="text-slate-500 font-semibold">Produk</span>
                    <span class="font-bold text-slate-800">${selectedProduct.name}</span>
                </div>
                <div class="flex justify-between py-2 border-b border-slate-100">
                    <span class="text-slate-500 font-semibold">Jumlah</span>
                    <span class="font-bold text-slate-800">${qty} tabung</span>
                </div>
                <div class="flex justify-between py-2">
                    <span class="text-slate-500 font-semibold">Total Bayar</span>
                    <span class="font-black text-emerald-600 text-base">${total}</span>
                </div>
            </div>`,
        icon: 'question',
        showCancelButton: true,
        confirmButtonColor: '#22c55e',
        cancelButtonColor: '#94a3b8',
        confirmButtonText: 'Simpan Transaksi',
        cancelButtonText: 'Batalkan',
    }).then(result => {
        if (result.isConfirmed) {
            document.getElementById('penjualanForm').submit();
        }
    });
}

// ===== HELPER =====
function formatNum(n) {
    return n.toLocaleString('id-ID');
}

// Restore old values if validation failed
@if(old('id_produk'))
    const oldProduk = document.querySelector('#select_produk option[value="{{ old('id_produk') }}"]');
    if (oldProduk) {
        selectProduct('{{ old('id_produk') }}', oldProduk.dataset.nama, parseInt(oldProduk.dataset.harga)||0, parseInt(oldProduk.dataset.stok)||0);
    }
@endif

// ===== BUKTI TRANSAKSI (STRUK) LOGIC =====
let currentReceiptData = null;

@if(session('trx_receipt'))
    currentReceiptData = @json(session('trx_receipt'));
    document.addEventListener('DOMContentLoaded', function() {
        setTimeout(bukaModalStrukDirect, 300);
    });
@endif

function bukaModalStrukDirect() {
    if (!currentReceiptData) return;
    const d = currentReceiptData;
    const formatIDR = (n) => 'Rp ' + parseInt(n || 0).toLocaleString('id-ID');

    document.getElementById('receipt-invoice').textContent      = d.invoice || '#TRX';
    document.getElementById('receipt-tanggal').textContent      = d.tanggal || '-';
    document.getElementById('receipt-pelanggan').textContent    = d.pelanggan || '-';
    document.getElementById('receipt-alamat').textContent       = d.alamat || '-';
    document.getElementById('receipt-total').textContent        = formatIDR(d.total);
    document.getElementById('receipt-total-summary').textContent= formatIDR(d.total);
    document.getElementById('receipt-metode').textContent       = d.metode || 'Tunai';
    document.getElementById('receipt-pengirim').textContent     = d.pengirim || 'Admin';
    document.getElementById('receipt-status').textContent       = d.status || 'Selesai';
    document.getElementById('receipt-status-detail').textContent= (d.status || 'SELESAI').toUpperCase();

    const itemsList = document.getElementById('receipt-items-list');
    itemsList.innerHTML = `
        <div class="flex justify-between items-start text-xs gap-2">
            <div class="min-w-0 flex-1">
                <p class="font-bold text-slate-800 leading-tight">${d.produk}</p>
                <p class="text-[10px] text-slate-500 font-semibold mt-0.5">${d.qty} tabung x ${formatIDR(d.harga_satuan)}</p>
            </div>
            <span class="font-bold text-slate-900 shrink-0 whitespace-nowrap">${formatIDR(d.subtotal)}</span>
        </div>
    `;

    const modal = document.getElementById('modalStruk');
    const container = document.getElementById('modalStrukContainer');
    modal.classList.remove('hidden');
    setTimeout(() => {
        container.classList.remove('scale-95');
        container.classList.add('scale-100');
    }, 10);

    if (typeof lucide !== 'undefined') lucide.createIcons();
}

function tutupModalStruk() {
    const modal = document.getElementById('modalStruk');
    const container = document.getElementById('modalStrukContainer');
    container.classList.remove('scale-100');
    container.classList.add('scale-95');
    setTimeout(() => modal.classList.add('hidden'), 200);
}

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('#','');

    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.');
        }
    };

    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>

@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>
@endpush
@endsection