@extends('admin.layouts.app')

@section('content')
<style>
    @media print {
        body * { visibility: hidden; }
        #thermal-receipt, #thermal-receipt * { visibility: visible; }
        #thermal-receipt { 
            display: block !important; /* 🔥 FIX UTAMA: Memaksa teks muncul dan menghancurkan efek .hidden Tailwind saat cetak */
            position: absolute; 
            left: 0; 
            top: 0; 
            width: 58mm; 
            font-family: 'Courier New', Courier, monospace; 
            font-size: 11px; 
            color: #000;
            line-height: 1.3;
            padding: 0;
            margin: 0;
        }
    }
</style>

<div class="space-y-6">
    <div class="flex flex-col sm:flex-row sm:justify-between sm:items-center gap-4">
        <div>
            <h1 class="text-2xl font-black text-gray-900">Otomatisasi Penjualan & Keuntungan</h1>
            <p class="text-xs text-gray-500">Kalkulasi real-time performa bisnis kedai Dimsum Bumi.</p>
        </div>
        
        <div class="flex flex-wrap items-center gap-3">
            <form action="{{ route('order.process') }}" method="POST" class="inline" onsubmit="alert('Memproses pesanan otomatis & membuat review baru!')">
                @csrf
                <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white font-bold text-sm px-4 py-2.5 rounded-xl shadow-md transition-transform active:scale-95 inline-flex items-center gap-2">
                    <i class="fas fa-robot"></i> Jalankan Simulasi Pesanan
                </button>
            </form>

            <form action="{{ route('admin.export-excel') }}" method="GET" class="inline-flex items-center bg-gray-100 border border-gray-200 rounded-xl p-1 gap-1 shadow-xs">
                <select name="type" required class="bg-transparent text-xs font-bold text-gray-700 px-2 py-1.5 focus:outline-none cursor-pointer">
                    <option value="daily">📅 Jatah Harian</option>
                    <option value="monthly">🗓️ Jatah Bulanan</option>
                    <option value="yearly">📊 Jatah Tahunan</option>
                </select>
                <input type="hidden" name="date" id="export-date-bridge" value="{{ date('Y-m-d') }}">
                <button type="submit" class="bg-emerald-600 hover:bg-emerald-700 text-white font-bold text-xs px-3 py-2 rounded-lg transition-transform active:scale-95 flex items-center gap-1.5">
                    <i class="fas fa-file-excel"></i> Unduh
                </button>
            </form>
        </div>
    </div>

    @if(session('success'))
        <div class="bg-emerald-500 text-white p-4 rounded-xl text-xs font-bold shadow-sm flex items-center gap-2"><i class="fas fa-check-circle text-sm"></i> {{ session('success') }}</div>
    @endif
    @if(session('error'))
        <div class="bg-rose-500 text-white p-4 rounded-xl text-xs font-bold shadow-sm flex items-center gap-2"><i class="fas fa-exclamation-circle text-sm"></i> {{ session('error') }}</div>
    @endif

    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-5">
        <div class="bg-white p-5 rounded-2xl border border-gray-200 shadow-xs flex items-center justify-between">
            <div>
                <span class="text-xs font-bold uppercase tracking-wider text-gray-400">Total Omzet</span>
                <h3 class="text-xl font-black text-gray-900 mt-1" id="card-omset-label">Rp{{ number_format($totalSales, 0, ',', '.') }}</h3>
            </div>
            <div class="w-10 h-10 rounded-xl bg-orange-100 text-orange-600 flex items-center justify-center text-lg"><i class="fas fa-wallet"></i></div>
        </div>
        
        <div class="bg-white p-5 rounded-2xl border border-gray-200 shadow-xs flex items-center justify-between">
            <div>
                <span class="text-xs font-bold uppercase tracking-wider text-gray-400">Untung Bersih</span>
                <h3 class="text-xl font-black text-emerald-600 mt-1" id="card-profit-label">Rp{{ number_format($totalProfit, 0, ',', '.') }}</h3>
            </div>
            <div class="w-10 h-10 rounded-xl bg-emerald-100 text-emerald-600 flex items-center justify-center text-lg"><i class="fas fa-money-bill-wave"></i></div>
        </div>

        <div class="bg-white p-5 rounded-2xl border border-gray-200 shadow-xs flex items-center justify-between">
            <div>
                <span class="text-xs font-bold uppercase tracking-wider text-gray-400">Porsi Terjual</span>
                <h3 class="text-xl font-black text-gray-900 mt-1" id="card-qty-label">{{ $itemsSold }} Transaksi</h3>
            </div>
            <div class="w-10 h-10 rounded-xl bg-blue-100 text-blue-600 flex items-center justify-center text-lg"><i class="fas fa-shopping-basket"></i></div>
        </div>

        <div class="bg-white p-5 rounded-2xl border border-gray-200 shadow-xs flex items-center justify-between">
            <div>
                <span class="text-xs font-bold uppercase tracking-wider text-gray-400">Sisa Stok Menu</span>
                <h3 class="text-xl font-black text-gray-900 mt-1">{{ $remainingStock }} Pcs</h3>
            </div>
            <div class="w-10 h-10 rounded-xl bg-amber-100 text-amber-600 flex items-center justify-center text-lg"><i class="fas fa-box-open"></i></div>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 items-start">
        
        <div class="bg-white p-5 rounded-2xl border border-gray-200 shadow-xs space-y-4">
            <div class="border-b border-gray-100 pb-3">
                <h3 class="font-bold text-gray-900 text-sm flex items-center gap-2"><i class="fas fa-calculator text-orange-600"></i> Input Order Manual Kasir</h3>
                <p class="text-[11px] text-gray-400 mt-0.5">Mendukung input banyak menu sekaligus untuk sistem pembayaran tunai.</p>
            </div>

            @if ($errors->any())
                <div class="bg-rose-50 border border-rose-200 text-rose-600 p-3 rounded-xl text-[11px] font-bold space-y-1">
                    @foreach ($errors->all() as $error)
                        <div>⚠️ {{ $error }}</div>
                    @endforeach
                </div>
            @endif
            
            <div class="bg-gray-50 p-3 rounded-xl border border-gray-100 space-y-3">
                <div>
                    <label class="block text-[10px] font-bold text-gray-400 uppercase tracking-wider mb-1">Pilih Item Menu</label>
                    <select id="menu-selector" class="w-full bg-white border border-gray-200 rounded-lg p-2 text-xs font-semibold focus:outline-none focus:border-orange-500 text-gray-800 cursor-pointer">
                        <option value="" disabled selected>-- Pilih jenis hidangan --</option>
                        @foreach($allMenus as $m)
                            <option value="{{ $m->id }}" data-name="{{ $m->name }}" data-price="{{ $m->price }}" data-stock="{{ $m->stock }}">
                                {{ $m->name }} (Rp{{ number_format($m->price, 0, ',', '.') }})
                            </option>
                        @endforeach
                    </select>
                </div>
                <div class="flex gap-2 items-end">
                    <div class="flex-1">
                        <label class="block text-[10px] font-bold text-gray-400 uppercase tracking-wider mb-1">Qty Porsi</label>
                        <input type="number" id="qty-selector" min="1" value="1" class="w-full bg-white border border-gray-200 rounded-lg p-1.5 text-xs font-semibold focus:outline-none text-gray-800">
                    </div>
                    <button type="button" onclick="addItemToInvoiceList()" class="bg-orange-100 text-orange-600 hover:bg-orange-600 hover:text-white px-3 py-2 rounded-lg text-xs font-bold transition-all flex items-center gap-1">
                        <i class="fas fa-plus"></i> Tambah
                    </button>
                </div>
            </div>

            <form action="{{ route('admin.manual-order') }}" method="POST" class="space-y-4" id="manual-order-form">
                @csrf
                <input type="hidden" name="cart_items" id="json-cart-input">
                
                <div>
                    <label class="block text-[10px] font-bold text-gray-400 uppercase tracking-wider mb-1">Nama Pelanggan Offline</label>
                    <input type="text" name="customer_name" required placeholder="Tulis nama panggilan pelanggan..." class="w-full bg-gray-50 border border-gray-200 rounded-xl p-2.5 text-xs font-semibold focus:outline-none focus:border-orange-500 text-gray-800">
                </div>

                <div class="border border-gray-200 rounded-xl overflow-hidden text-[11px]">
                    <div class="bg-gray-100 p-2 font-bold text-gray-600 text-center border-b border-gray-200">List Nota Menu Terpilih</div>
                    <table class="w-full bg-white">
                        <tbody id="invoice-items-list" class="divide-y divide-gray-100">
                            <tr>
                                <td colspan="4" class="p-4 text-center text-gray-400 italic">Belum ada menu yang dimasukkan.</td>
                            </tr>
                        </tbody>
                    </table>
                    <div class="bg-gray-50 p-2 font-bold flex justify-between items-center px-3 border-t border-gray-200">
                        <span class="text-gray-500">TOTAL NOTA:</span>
                        <span id="grand-total-label" class="text-sm font-black text-orange-600">Rp0</span>
                    </div>
                </div>

                <div class="grid grid-cols-2 gap-3 border-t border-gray-100 pt-3">
                    <div>
                        <label class="block text-[10px] font-bold text-gray-400 uppercase tracking-wider mb-1">Bayar (Cash Uang)</label>
                        <input type="number" name="cash_paid" id="cash-paid-input" required min="0" value="0" oninput="calculateInvoiceChange()" class="w-full bg-gray-50 border border-gray-200 rounded-xl p-2.5 text-xs font-black text-gray-800 focus:outline-none">
                    </div>
                    <div>
                        <label class="block text-[10px] font-bold text-gray-400 uppercase tracking-wider mb-1">Kembalian</label>
                        <div id="invoice-change-label" class="w-full bg-emerald-50 border border-emerald-200 rounded-xl p-2.5 text-xs font-black text-emerald-600 h-[38px] flex items-center">Rp0</div>
                    </div>
                </div>

                <button type="submit" class="w-full bg-orange-600 hover:bg-orange-700 text-white font-bold text-xs py-3 rounded-xl shadow-md uppercase tracking-wider transition-all active:scale-95 flex items-center justify-center gap-1.5"><i class="fas fa-print"></i> Simpan & Ambil Struk</button>
            </form>
        </div>

        <div class="bg-white border border-gray-200 rounded-2xl shadow-xs overflow-hidden lg:col-span-2">
            <div class="px-6 py-4 border-b border-gray-100 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 bg-gray-50/50">
                <div>
                    <h3 class="font-bold text-gray-800 text-sm flex items-center gap-1.5"><i class="fas fa-receipt text-orange-600"></i> Riwayat Pembayaran Real-Time</h3>
                    <p class="text-[11px] text-gray-400 mt-0.5" id="date-badge-label">Menampilkan data transaksi sukses hari ini.</p>
                </div>
                
                <div class="flex items-center gap-2 shrink-0">
                    <span class="text-[10px] font-bold text-gray-400 uppercase tracking-wider hidden sm:inline">Pilih Hari:</span>
                    <input type="date" id="calendar-inspector" value="{{ date('Y-m-d') }}" onchange="fetchHistoryByDate(this.value)" class="bg-white border border-gray-300 rounded-xl p-1.5 text-xs font-black text-gray-800 focus:outline-none focus:border-orange-500 cursor-pointer shadow-2xs">
                </div>
            </div>

            <div class="overflow-x-auto w-full">
                <!-- ⚡ OPTIMASI UKURAN DAN LAYOUT TABEL AGAR ANTI-GESER ⚡ -->
                <table class="w-full text-left border-collapse text-[11px] table-auto">
                    <thead>
                        <tr class="bg-gray-50 border-b border-gray-100 text-gray-500 font-bold uppercase tracking-wider">
                            <th class="px-2 py-3">No Invoice</th>
                            <th class="px-2 py-3">Nama Pelanggan</th>
                            <th class="px-2 py-3">Menu Yang Dipesan</th>
                            <th class="px-2 py-3 text-center">Jumlah (Qty)</th>
                            <th class="px-2 py-3">Total Bayar</th>
                            <th class="px-2 py-3">Keuntungan</th>
                            <th class="px-2 py-3 text-center">Status</th>
                            <th class="px-2 py-3">Tanggal</th>
                        </tr>
                    </thead>
                    <tbody id="sales-table-body" class="divide-y divide-gray-100 font-medium text-gray-700">
                        @forelse($recentTransactions as $trx)
                            <tr class="hover:bg-slate-50/60 transition-colors">
                                <td class="px-2 py-3 font-bold text-orange-600 whitespace-nowrap">{{ $trx->invoice_number ?? 'DD-0000' . $trx->id }}</td>
                                <td class="px-2 py-3 font-semibold break-all">{{ $trx->customer_name }}</td>
                                
                                <!-- ⚡ HAPUS WHITESPACE-NOWRAP AGAR TEKS BISA OTOMATIS WRAP/TURUN KE BAWAH ⚡ -->
                                <td class="px-2 py-3 text-gray-800 font-medium max-w-[140px] break-words">
                                    @if($trx->menu)
                                        • {{ $trx->menu->name }}
                                    @else
                                        <span class="text-gray-400 italic text-[10px]">Menu tidak tercatat</span>
                                    @endif
                                </td>
                                <td class="px-2 py-3 text-center font-bold text-gray-600 whitespace-nowrap">
                                    {{ $trx->qty }} Porsi
                                </td>
                                <th class="px-2 py-3 text-left text-[10px] font-bold text-gray-500 uppercase tracking-wider">Menu Dimsum</th>
<th class="px-2 py-3 text-left text-[10px] font-bold text-gray-500 uppercase tracking-wider">Harga Satuan</th> <th class="px-2 py-3 text-left text-[10px] font-bold text-gray-500 uppercase tracking-wider">Porsi</th>
                                <td class="px-2 py-3 whitespace-nowrap">Rp{{ number_format($trx->total_price, 0, ',', '.') }}</td>
                                <td class="px-2 py-3 text-emerald-600 whitespace-nowrap">Rp{{ number_format($trx->total_profit ?? ($trx->total_price * 0.3), 0, ',', '.') }}</td>
                                <td class="px-2 py-3 text-center whitespace-nowrap">
                                    <span class="px-2 py-0.5 rounded-full font-bold uppercase tracking-wide text-[9px] bg-green-100 text-green-700">
                                        {{ $trx->payment_status ?? $trx->status ?? 'success' }}
                                    </span>
                                </td>
                                <td class="px-2 py-3 text-gray-400 text-[10px] whitespace-nowrap">{{ $trx->created_at->format('d/m/y, H:i') }}</td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="8" class="p-10 text-center text-gray-400 italic">Belum ada transaksi terekam hari ini.</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

@if(session('print_receipt'))
    @php $receipt = session('receipt_data'); @endphp
    <div id="thermal-receipt" class="hidden">
        <div style="text-align: center;">━━━━━━━━━━━━━━━━━━━━━━━━━━</div>
        <div style="text-align: center; font-weight: bold; font-size: 13px;">DIMSUM DAY</div>
        <div style="text-align: center; font-size: 9px;">Fresh • Halal • Lezat</div>
        <div style="text-align: center;">━━━━━━━━━━━━━━━━━━━━━━━━━━</div>
        <div>📱 WA : 08501201119</div>
        <div>📷 IG : @dimsummday_</div>
        <div>📧 Email : dimsumday00@gmail.com</div>
        <div>━━━━━━━━━━━━━━━━━━━━━━━━━━</div>
        <div>No. Pesanan : {{ $receipt['invoice'] }}</div>
        <div>Tanggal     : {{ $receipt['date'] }}</div>
        <div>Pelanggan   : {{ $receipt['customer'] }}</div>
        <div>━━━━━━━━━━━━━━━━━━━━━━━━━━</div>
        <table style="width: 100%; border-collapse: collapse; font-size: 11px; color:#000;">
            <tr style="font-weight: bold;">
                <td style="width: 50%;">Menu</td>
                <td style="width: 15%; text-align: center;">Qty</td>
                <td style="width: 35%; text-align: right;">Harga</td>
            </tr>
            <tr><td colspan="3">━━━━━━━━━━━━━━━━━━━━━━━━━━</td></tr>
            @foreach($receipt['items'] as $item)
                <tr>
                    <td>{{ $item['name'] }}</td>
                    <td style="text-align: center;">{{ $item['qty'] }}</td>
                    <td style="text-align: right;">Rp{{ number_format($item['total'], 0, ',', '.') }}</td>
                </tr>
            @endforeach
        </table>
        <div>━━━━━━━━━━━━━━━━━━━━━━━━━━</div>
        <div style="display: flex; justify-content: space-between; font-weight: bold; font-size: 12px;">
            <span>TOTAL</span>
            <span>Rp{{ number_format($receipt['total'], 0, ',', '.') }}</span>
        </div>
        <div>━━━━━━━━━━━━━━━━━━━━━━━━━━</div>
        <div style="display: flex; justify-content: space-between;">
            <span>Bayar</span>
            <span>Rp{{ number_format($receipt['bayar'], 0, ',', '.') }}</span>
        </div>
        <div style="display: flex; justify-content: space-between;">
            <span>Kembalian</span>
            <span>Rp{{ number_format($receipt['kembalian'], 0, ',', '.') }}</span>
        </div>
        <div>━━━━━━━━━━━━━━━━━━━━━━━━━━</div>
        <div style="text-align: center; margin-top: 5px;">
            Terima kasih telah<br>berbelanja di DIMSUM DAY ❤️<br>
            <span style="font-size: 9px; font-style: italic;">"Setiap Gigitan Penuh Kenikmatan"</span><br>
            Instagram : @dimsummday<br>
            WhatsApp  : 08501201119
        </div>
        <div style="text-align: center;">━━━━━━━━━━━━━━━━━━━━━━━━━━</div>
    </div>

    <script>
        window.addEventListener('DOMContentLoaded', () => {
            window.print();
        });
    </script>
@endif

<script>
    let localInvoiceCart = [];
    let grandInvoiceTotal = 0;

    function addItemToInvoiceList() {
        const selector = document.getElementById('menu-selector');
        const qtyInput = document.getElementById('qty-selector');
        
        if(!selector.value) { alert('Silakan pilih varian menu terlebih dahulu!'); return; }
        
        const selectedOpt = selector.options[selector.selectedIndex];
        const menuId = selector.value;
        const menuName = selectedOpt.getAttribute('data-name');
        const menuPrice = parseInt(selectedOpt.getAttribute('data-price'));
        const menuStock = parseInt(selectedOpt.getAttribute('data-stock'));
        const inputQty = parseInt(qtyInput.value);

        if(inputQty < 1) { alert('Jumlah kuantitas porsi minimal 1!'); return; }
        if(inputQty > menuStock) { alert(`Stok tidak mencukupi! Sisa stok ${menuName} hanya ${menuStock} pcs.`); return; }

        const existingItem = localInvoiceCart.find(item => item.id === menuId);
        if(existingItem) {
            if((existingItem.qty + inputQty) > menuStock) { alert(`Gagal! Total kuantitas gabungan melebihi stok gudang (${menuStock} pcs).`); return; }
            existingItem.qty += inputQty;
            existingItem.total = existingItem.qty * menuPrice;
        } else {
            localInvoiceCart.push({
                id: menuId,
                name: menuName,
                price: menuPrice,
                qty: inputQty,
                total: inputQty * menuPrice
            });
        }

        qtyInput.value = "1";
        renderInvoiceCartTable();
    }

    function removeItemFromInvoiceList(index) {
        localInvoiceCart.splice(index, 1);
        renderInvoiceCartTable();
    }

    function renderInvoiceCartTable() {
        const tableBody = document.getElementById('invoice-items-list');
        const hiddenInput = document.getElementById('json-cart-input');
        const totalLabel = document.getElementById('grand-total-label');

        tableBody.innerHTML = "";
        grandInvoiceTotal = 0;

        if(localInvoiceCart.length === 0) {
            tableBody.innerHTML = `<tr><td colspan="4" class="p-4 text-center text-gray-400 italic">Belum ada menu yang dimasukkan.</td></tr>`;
            totalLabel.innerText = "Rp0";
            hiddenInput.value = "";
            calculateInvoiceChange();
            return;
        }

        localInvoiceCart.forEach((item, index) => {
            grandInvoiceTotal += item.total;
            const rowHtml = `
                <tr class="hover:bg-gray-50 border-b border-gray-100">
                    <td class="p-2 pl-3 font-semibold text-gray-800">${item.name}</td>
                    <td class="p-2 text-center text-gray-500 font-bold">x${item.qty}</td>
                    <td class="p-2 text-right font-black text-gray-900">Rp${item.total.toLocaleString('id-ID')}</td>
                    <td class="p-2 text-center">
                        <button type="button" onclick="removeItemFromInvoiceList(${index})" class="text-rose-500 hover:text-rose-700 focus:outline-none"><i class="fas fa-trash-alt"></i></button>
                    </td>
                </tr>
            `;
            tableBody.insertAdjacentHTML('beforeend', rowHtml);
        });

        totalLabel.innerText = "Rp" + grandInvoiceTotal.toLocaleString('id-ID');
        hiddenInput.value = JSON.stringify(localInvoiceCart);
        calculateInvoiceChange();
    }

    function calculateInvoiceChange() {
        const cashPaidInput = document.getElementById('cash-paid-input');
        const changeLabel = document.getElementById('invoice-change-label');
        
        const amountPaid = parseInt(cashPaidInput.value) || 0;
        const changeResult = amountPaid - grandInvoiceTotal;

        if (changeResult < 0) {
            changeLabel.innerText = "Uang Kurang";
            changeLabel.className = "w-full bg-rose-50 border border-rose-200 rounded-xl p-2.5 text-xs font-black text-rose-600 h-[38px] flex items-center";
        } else {
            changeLabel.innerText = "Rp" + changeResult.toLocaleString('id-ID');
            changeLabel.className = "w-full bg-emerald-50 border border-emerald-200 rounded-xl p-2.5 text-xs font-black text-emerald-600 h-[38px] flex items-center";
        }
    }

    document.getElementById('manual-order-form').addEventListener('submit', function(e) {
        if (localInvoiceCart.length === 0) {
            const selector = document.getElementById('menu-selector');
            const qtyInput = document.getElementById('qty-selector');
            
            if (selector.value) {
                const selectedOpt = selector.options[selector.selectedIndex];
                const menuId = selector.value;
                const menuName = selectedOpt.getAttribute('data-name');
                const menuPrice = parseInt(selectedOpt.getAttribute('data-price'));
                const menuStock = parseInt(selectedOpt.getAttribute('data-stock'));
                const inputQty = parseInt(qtyInput.value) || 1;

                if (inputQty > menuStock) {
                    e.preventDefault();
                    alert(`Gagal! Stok ${menuName} tidak mencukupi (Tersisa ${menuStock} pcs).`);
                    return false;
                }

                localInvoiceCart.push({
                    id: menuId,
                    name: menuName,
                    price: menuPrice,
                    qty: inputQty,
                    total: inputQty * menuPrice
                });
                
                grandInvoiceTotal = inputQty * menuPrice;
                document.getElementById('json-cart-input').value = JSON.stringify(localInvoiceCart);
            } else {
                e.preventDefault();
                alert('Gagal simpan! Anda belum memasukkan menu hidangan apa pun ke dalam nota belanja.');
                return false;
            }
        }
        
        const cashPaid = parseInt(document.getElementById('cash-paid-input').value) || 0;
        if (cashPaid < grandInvoiceTotal) {
            e.preventDefault();
            alert('Gagal cetak! Nominal uang tunai/cash yang dimasukkan kurang dari total harga belanjaan.');
            return false;
        }
    });

    function fetchHistoryByDate(selectedDate) {
        if(!selectedDate) return;

        document.getElementById('export-date-bridge').value = selectedDate;

        const tableBody = document.getElementById('sales-table-body');
        const badgeLabel = document.getElementById('date-badge-label');
        const cardOmset = document.getElementById('card-omset-label');
        const cardProfit = document.getElementById('card-profit-label');
        const cardQty = document.getElementById('card-qty-label');

        badgeLabel.innerText = "⏳ Sedang memuat riwayat tanggal " + selectedDate + "...";

        fetch(`{{ route('admin.sales-by-date') }}?date=${selectedDate}`)
            .then(response => response.json())
            .then(res => {
                if(res.success) {
                    badgeLabel.innerText = "Menampilkan data transaksi sukses tanggal: " + res.date_label;
                    cardOmset.innerText = res.total_omset;
                    cardQty.innerText = res.data.length + " Transaksi";
                    
                    let totalProfitCalculated = 0;
                    tableBody.innerHTML = "";

                    if(res.data.length === 0) {
                        cardProfit.innerText = "Rp0";
                        tableBody.innerHTML = `<tr><td colspan="8" class="p-10 text-center text-gray-400 italic">Tidak ada transaksi sukses ditemukan pada tanggal ${res.date_label}.</td></tr>`;
                    } else {
                        res.data.forEach(item => {
                            let rawProfit = parseInt(item.total_price.replace(/[^0-9]/g, '')) * 0.3;
                            totalProfitCalculated += rawProfit;

                            const rowHtml = `
                                <tr class="hover:bg-slate-50/60 transition-colors border-b border-gray-100">
                                    <td class="px-2 py-3 font-bold text-orange-600 whitespace-nowrap">${item.invoice}</td>
                                    <td class="px-2 py-3 font-semibold break-all">${item.customer_name}</td>
                                    
                                    <td class="px-2 py-3 text-gray-800 font-medium max-w-[140px] break-words">• ${item.menu_name}</td>
                                    <td class="px-2 py-3 text-center font-bold text-gray-600 whitespace-nowrap">${item.qty} Porsi</td>
                                    
                                    <td class="px-2 py-3 whitespace-nowrap">${item.total_price}</td>
                                    <td class="px-2 py-3 text-emerald-600 whitespace-nowrap">Rp${rawProfit.toLocaleString('id-ID')}</td>
                                    <td class="px-2 py-3 text-center whitespace-nowrap">
                                        <span class="px-2 py-0.5 rounded-full font-bold uppercase tracking-wide text-[9px] bg-green-100 text-green-700">
                                            success
                                        </span>
                                    </td>
                                    <td class="px-2 py-3 text-gray-400 text-[10px] whitespace-nowrap">${selectedDate}, ${item.time}</td>
                                </tr>
                            `;
                            tableBody.insertAdjacentHTML('beforeend', rowHtml);
                        });
                        cardProfit.innerText = "Rp" + totalProfitCalculated.toLocaleString('id-ID');
                    }
                } else {
                    alert("Gagal memuat data kalender: " + res.message);
                }
            })
            .catch(err => {
                console.error("AJAX Error:", err);
                alert("Gagal terhubung dengan server kasir lokal.");
            });
    }
</script>
@endsection