@extends('layouts.app')

@section('title', 'Edit Invoice ' . $sale->invoice_number)

@section('content')
<div class="px-4 sm:px-6 lg:px-8 py-8">
    <div class="max-w-4xl mx-auto">
        <div class="mb-6">
            <h1 class="text-3xl font-bold tracking-tight text-gray-900 dark:text-white">
                {{ $sale->payment_status == 'paid' ? 'Mark as Record Only' : 'Edit Invoice' }}
            </h1>
            <p class="mt-2 text-sm text-gray-700 dark:text-gray-300">{{ $sale->invoice_number }}</p>
        </div>

        @if($sale->payment_status == 'paid')
            {{-- Simplified form for paid invoices - only record_only toggle --}}
            <form action="{{ route('sales.update', $sale->id) }}" method="POST" class="space-y-6">
                @csrf
                @method('PUT')

                <div class="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-4 mb-6">
                    <div class="flex">
                        <svg class="h-5 w-5 text-blue-400" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"/>
                        </svg>
                        <div class="ml-3">
                            <h3 class="text-sm font-medium text-blue-800 dark:text-blue-200">Paid Invoice</h3>
                            <p class="mt-1 text-sm text-blue-700 dark:text-blue-300">
                                This invoice is marked as Paid. You can only mark it as "Record Only" to restore stock.
                                Other details cannot be edited.
                            </p>
                        </div>
                    </div>
                </div>

                {{-- Invoice Summary (read-only) --}}
                <div class="bg-white dark:bg-gray-800 shadow rounded-lg p-6">
                    <h2 class="text-lg font-medium text-gray-900 dark:text-white mb-4">Invoice Summary</h2>
                    <dl class="grid grid-cols-2 gap-4">
                        <div>
                            <dt class="text-sm text-gray-500 dark:text-gray-400">Customer</dt>
                            <dd class="text-sm font-medium text-gray-900 dark:text-white">{{ $customers->firstWhere('id', $sale->customer_id)->name ?? 'N/A' }}</dd>
                        </div>
                        <div>
                            <dt class="text-sm text-gray-500 dark:text-gray-400">Invoice Date</dt>
                            <dd class="text-sm font-medium text-gray-900 dark:text-white">{{ \Carbon\Carbon::parse($sale->invoice_date)->format('d M Y') }}</dd>
                        </div>
                        <div>
                            <dt class="text-sm text-gray-500 dark:text-gray-400">Total</dt>
                            <dd class="text-sm font-medium text-gray-900 dark:text-white">RM {{ number_format($sale->total, 2) }}</dd>
                        </div>
                        <div>
                            <dt class="text-sm text-gray-500 dark:text-gray-400">Items</dt>
                            <dd class="text-sm font-medium text-gray-900 dark:text-white">{{ $items->count() }} items ({{ $items->sum('quantity') }} units)</dd>
                        </div>
                    </dl>
                </div>

                {{-- Record Only Toggle --}}
                <div class="bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 rounded-lg p-6">
                    <div class="flex items-start">
                        <div class="flex items-center h-5">
                            <input type="checkbox" name="record_only" id="record_only" value="1"
                                class="h-5 w-5 text-amber-600 focus:ring-amber-500 border-gray-300 rounded">
                        </div>
                        <div class="ml-3">
                            <label for="record_only" class="text-base font-medium text-amber-800 dark:text-amber-200">
                                Mark as Record Only (Restore Stock)
                            </label>
                            <p class="text-sm text-amber-700 dark:text-amber-300 mt-1">
                                Check this box if this sale was already processed in Dashboard/Marketing.
                                <strong>This will restore {{ $items->sum('quantity') }} units back to inventory.</strong>
                            </p>
                        </div>
                    </div>

                    <div class="mt-4">
                        <label for="linked_order_number" class="block text-sm font-medium text-amber-800 dark:text-amber-200 mb-1">
                            Linked Order Number (Optional)
                        </label>
                        <input type="text" name="linked_order_number" id="linked_order_number"
                            placeholder="e.g., OM-2024-001234"
                            class="w-full px-3 py-2 bg-white dark:bg-gray-700 text-gray-900 dark:text-white border border-amber-300 dark:border-amber-600 rounded-md shadow-sm focus:ring-amber-500 focus:border-amber-500 text-sm">
                    </div>
                </div>

                <div class="flex items-center justify-end gap-3">
                    <a href="{{ route('sales.show', $sale->id) }}" class="px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700/50">
                        Cancel
                    </a>
                    <button type="submit" class="px-4 py-2 bg-amber-600 border border-transparent rounded-md text-sm font-medium text-white hover:bg-amber-700">
                        Mark as Record Only & Restore Stock
                    </button>
                </div>
            </form>
        @else
            {{-- Full edit form for unpaid/partial invoices --}}
            <form action="{{ route('sales.update', $sale->id) }}" method="POST" id="invoiceForm" class="space-y-6">
                @csrf
                @method('PUT')

                <div class="bg-white dark:bg-gray-800 shadow rounded-lg p-6">
                    <h2 class="text-lg font-medium text-gray-900 dark:text-white mb-4">Invoice Details</h2>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label for="customer_id" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Customer *</label>
                        <select name="customer_id" id="customer_id" required
                            class="mt-1 block w-full px-3 py-2 bg-white dark:bg-gray-700 text-gray-900 dark:text-white border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500">
                            <option value="">Select Customer</option>
                            @foreach($customers as $customer)
                                <option value="{{ $customer->id }}" {{ $sale->customer_id == $customer->id ? 'selected' : '' }}>
                                    {{ $customer->name }} ({{ $customer->phone }})
                                </option>
                            @endforeach
                        </select>
                        @error('customer_id')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label for="invoice_date" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Invoice Date *</label>
                        <input type="date" name="invoice_date" id="invoice_date" required value="{{ $sale->invoice_date }}"
                            class="mt-1 block w-full px-3 py-2 bg-white dark:bg-gray-700 text-gray-900 dark:text-white border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500">
                        @error('invoice_date')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>
                </div>
            </div>

            <!-- Items Section -->
            <div class="bg-white dark:bg-gray-800 shadow rounded-lg p-6">
                <h2 class="text-lg font-medium text-gray-900 dark:text-white mb-4">Items</h2>

                <div class="mb-4">
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Add Product</label>
                    <select id="productSelect" class="w-full px-3 py-2 bg-white dark:bg-gray-700 text-gray-900 dark:text-white border border-gray-300 dark:border-gray-600 rounded-md">
                        <option value="">Select Product to Add</option>
                        @foreach($products as $product)
                            <option value="{{ $product->sku }}" data-name="{{ $product->product_name }}" data-price="{{ $product->price ?? 0 }}" data-stock="{{ $product->quantity }}">
                                {{ $product->sku }} - {{ $product->product_name }} | RM {{ number_format($product->price, 2) }} (Stock: {{ $product->quantity }})
                            </option>
                        @endforeach
                    </select>
                </div>

                <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700" id="itemsTable">
                    <thead class="bg-gray-50 dark:bg-gray-700">
                        <tr>
                            <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">Product</th>
                            <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase w-24">Qty</th>
                            <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase w-32">Price</th>
                            <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase w-32">Total</th>
                            <th class="px-4 py-3 w-16"></th>
                        </tr>
                    </thead>
                    <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700" id="itemsBody">
                        <!-- Items will be added here by JavaScript -->
                    </tbody>
                </table>

                <div id="noItemsMsg" class="text-center py-8 text-gray-500 dark:text-gray-400" style="display: none;">
                    No items added. Select a product above to add items.
                </div>
            </div>

            <!-- Totals Section -->
            <div class="bg-white dark:bg-gray-800 shadow rounded-lg p-6">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label for="payment_method" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Payment Method</label>
                        <select name="payment_method" id="payment_method"
                            class="mt-1 block w-full px-3 py-2 bg-white dark:bg-gray-700 text-gray-900 dark:text-white border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500">
                            <option value="cash" {{ $sale->payment_method == 'cash' ? 'selected' : '' }}>Cash</option>
                            <option value="bank_transfer" {{ $sale->payment_method == 'bank_transfer' ? 'selected' : '' }}>Bank Transfer</option>
                            <option value="ewallet" {{ $sale->payment_method == 'ewallet' ? 'selected' : '' }}>E-Wallet</option>
                            <option value="credit" {{ $sale->payment_method == 'credit' ? 'selected' : '' }}>Credit</option>
                        </select>
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Discount</label>
                        <div class="mt-1 flex gap-2">
                            <select name="discount_type" id="discount_type"
                                class="w-32 px-3 py-2 bg-white dark:bg-gray-700 text-gray-900 dark:text-white border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500">
                                <option value="percent">%</option>
                                <option value="fixed">RM</option>
                            </select>
                            <input type="number" name="discount_value" id="discount_value" value="{{ $sale->discount_percent }}" min="0" step="0.01"
                                class="flex-1 px-3 py-2 bg-white dark:bg-gray-700 text-gray-900 dark:text-white border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500">
                        </div>
                    </div>
                </div>

                <div class="mt-6 border-t border-gray-200 dark:border-gray-700 pt-4">
                    <div class="flex justify-between text-sm mb-2">
                        <span class="text-gray-600 dark:text-gray-400">Subtotal:</span>
                        <span class="text-gray-900 dark:text-white" id="subtotalDisplay">RM 0.00</span>
                    </div>
                    <div class="flex justify-between text-sm mb-2">
                        <span class="text-gray-600 dark:text-gray-400">Discount:</span>
                        <span class="text-red-600" id="discountDisplay">- RM 0.00</span>
                    </div>
                    <div class="flex justify-between text-lg font-bold">
                        <span class="text-gray-900 dark:text-white">Total:</span>
                        <span class="text-gray-900 dark:text-white" id="totalDisplay">RM 0.00</span>
                    </div>
                </div>

                <div class="mt-6">
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Amount Paid</label>
                    <div class="flex gap-2 mb-2">
                        <button type="button" onclick="payExact()" id="btnPayExact"
                            class="flex-1 px-4 py-3 bg-green-600 text-white rounded-md hover:bg-green-700 font-medium text-sm">
                            Pay Exact: <span id="exactAmountBtn">RM 0.00</span>
                        </button>
                        <button type="button" onclick="setAmountPaid(0)"
                            class="px-4 py-3 bg-gray-200 dark:bg-gray-600 text-gray-700 dark:text-gray-200 rounded-md hover:bg-gray-300 dark:hover:bg-gray-500 font-medium text-sm">
                            Unpaid
                        </button>
                    </div>
                    <div class="flex gap-2 mb-2">
                        <button type="button" onclick="setAmountPaid(50)" class="flex-1 px-3 py-2 bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-200 rounded-md hover:bg-blue-200 dark:hover:bg-blue-800 text-sm">RM 50</button>
                        <button type="button" onclick="setAmountPaid(100)" class="flex-1 px-3 py-2 bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-200 rounded-md hover:bg-blue-200 dark:hover:bg-blue-800 text-sm">RM 100</button>
                        <button type="button" onclick="setAmountPaid(200)" class="flex-1 px-3 py-2 bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-200 rounded-md hover:bg-blue-200 dark:hover:bg-blue-800 text-sm">RM 200</button>
                        <button type="button" onclick="setAmountPaid(500)" class="flex-1 px-3 py-2 bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-200 rounded-md hover:bg-blue-200 dark:hover:bg-blue-800 text-sm">RM 500</button>
                    </div>
                    <div class="flex gap-2">
                        <div class="flex-1">
                            <input type="number" name="amount_paid" id="amount_paid" value="{{ $sale->amount_paid }}" min="0" step="0.01"
                                class="w-full px-3 py-2 bg-white dark:bg-gray-700 text-gray-900 dark:text-white border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 text-lg font-medium"
                                oninput="updateChange()">
                        </div>
                    </div>
                    <div id="changeDisplay" class="mt-2 p-3 bg-yellow-50 dark:bg-yellow-900/30 border border-yellow-200 dark:border-yellow-800 rounded-md hidden">
                        <div class="flex justify-between items-center">
                            <span class="text-yellow-800 dark:text-yellow-200 font-medium">Change:</span>
                            <span class="text-yellow-800 dark:text-yellow-200 font-bold text-lg" id="changeAmount">RM 0.00</span>
                        </div>
                    </div>
                </div>

                <div class="mt-4">
                    <label for="notes" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Notes</label>
                    <textarea name="notes" id="notes" rows="2"
                        class="mt-1 block w-full px-3 py-2 bg-white dark:bg-gray-700 text-gray-900 dark:text-white border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500">{{ $sale->notes }}</textarea>
                </div>

                <!-- Record Only Mode -->
                <div class="mt-6 p-4 {{ $sale->record_only ? 'bg-green-50 dark:bg-green-900/20 border-green-200 dark:border-green-800' : 'bg-amber-50 dark:bg-amber-900/20 border-amber-200 dark:border-amber-800' }} border rounded-lg">
                    <div class="flex items-start">
                        <div class="flex items-center h-5">
                            <input type="checkbox" name="record_only" id="record_only" value="1"
                                {{ $sale->record_only ? 'checked disabled' : '' }}
                                class="h-4 w-4 text-amber-600 focus:ring-amber-500 border-gray-300 rounded">
                        </div>
                        <div class="ml-3">
                            <label for="record_only" class="text-sm font-medium {{ $sale->record_only ? 'text-green-800 dark:text-green-200' : 'text-amber-800 dark:text-amber-200' }}">
                                Record Only (No Stock Deduction)
                            </label>
                            @if($sale->record_only)
                                <p class="text-sm text-green-700 dark:text-green-300 mt-1">
                                    <svg class="inline w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
                                        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
                                    </svg>
                                    This sale is already marked as Record Only.
                                    @if($sale->stock_restored)
                                        Stock was restored on {{ \Carbon\Carbon::parse($sale->stock_restored_at)->format('d M Y H:i') }}.
                                    @endif
                                </p>
                            @else
                                <p class="text-sm text-amber-700 dark:text-amber-300 mt-1">
                                    Check this if this sale was already processed in Dashboard/Marketing.
                                    <strong>This will restore the stock that was deducted.</strong>
                                </p>
                            @endif
                        </div>
                    </div>
                    @if(!$sale->record_only)
                        <div id="linkedOrderSection" class="mt-3">
                            <label for="linked_order_number" class="block text-sm font-medium text-amber-800 dark:text-amber-200 mb-1">
                                Linked Order Number (Optional)
                            </label>
                            <input type="text" name="linked_order_number" id="linked_order_number"
                                value="{{ $sale->linked_order_number }}"
                                placeholder="e.g., OM-2024-001234"
                                class="w-full px-3 py-2 bg-white dark:bg-gray-700 text-gray-900 dark:text-white border border-amber-300 dark:border-amber-600 rounded-md shadow-sm focus:ring-amber-500 focus:border-amber-500 text-sm">
                            <p class="text-xs text-amber-600 dark:text-amber-400 mt-1">
                                Enter the Dashboard/Marketing order number for reference.
                            </p>
                        </div>
                    @endif
                </div>
            </div>

            <!-- Hidden container for item inputs -->
            <div id="itemInputs"></div>

            <div class="flex items-center justify-end gap-3">
                <a href="{{ route('sales.show', $sale->id) }}" class="px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700/50">
                    Cancel
                </a>
                <button type="submit" id="submitBtn" class="px-4 py-2 bg-indigo-600 border border-transparent rounded-md text-sm font-medium text-white hover:bg-indigo-700 disabled:opacity-50 disabled:cursor-not-allowed">
                    Update Invoice
                </button>
            </div>
        </form>
    </div>
</div>

<script>
    let items = [];
    let itemIndex = 0;

    // Load existing items
    @foreach($items as $item)
        items.push({
            idx: itemIndex++,
            sku: "{{ $item->sku }}",
            name: "{{ $item->product_name }}",
            qty: {{ $item->quantity }},
            price: {{ $item->unit_price }}
        });
    @endforeach

    document.getElementById('productSelect').addEventListener('change', function() {
        const option = this.options[this.selectedIndex];
        if (!option.value) return;

        const sku = option.value;
        const name = option.dataset.name;
        const price = parseFloat(option.dataset.price) || 0;

        // Check if already added
        if (items.find(i => i.sku === sku)) {
            alert('Product already added');
            this.value = '';
            return;
        }

        addItem(sku, name, 1, price);
        this.value = '';
    });

    function addItem(sku, name, qty, price) {
        const idx = itemIndex++;
        items.push({ idx, sku, name, qty, price });
        renderItems();
    }

    function removeItem(idx) {
        items = items.filter(i => i.idx !== idx);
        renderItems();
    }

    function updateQty(idx, qty) {
        const item = items.find(i => i.idx === idx);
        if (item) item.qty = parseInt(qty) || 1;
        renderItems();
    }

    function updatePrice(idx, price) {
        const item = items.find(i => i.idx === idx);
        if (item) item.price = parseFloat(price) || 0;
        renderItems();
    }

    function renderItems() {
        const tbody = document.getElementById('itemsBody');
        const noMsg = document.getElementById('noItemsMsg');
        const inputsDiv = document.getElementById('itemInputs');

        tbody.innerHTML = '';
        inputsDiv.innerHTML = '';

        if (items.length === 0) {
            noMsg.style.display = 'block';
            document.getElementById('submitBtn').disabled = true;
        } else {
            noMsg.style.display = 'none';
            document.getElementById('submitBtn').disabled = false;
        }

        items.forEach((item, i) => {
            const lineTotal = item.qty * item.price;

            tbody.innerHTML += `
                <tr>
                    <td class="px-4 py-3">
                        <div class="text-sm font-medium text-gray-900 dark:text-white">${item.name}</div>
                        <div class="text-xs text-gray-500">${item.sku}</div>
                    </td>
                    <td class="px-4 py-3">
                        <input type="number" min="1" value="${item.qty}" onchange="updateQty(${item.idx}, this.value)"
                            class="w-20 px-2 py-1 border border-gray-300 rounded text-sm dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                    </td>
                    <td class="px-4 py-3">
                        <input type="number" min="0" step="0.01" value="${item.price.toFixed(2)}" onchange="updatePrice(${item.idx}, this.value)"
                            class="w-28 px-2 py-1 border border-gray-300 rounded text-sm dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                    </td>
                    <td class="px-4 py-3 text-sm text-gray-900 dark:text-white">
                        RM ${lineTotal.toFixed(2)}
                    </td>
                    <td class="px-4 py-3">
                        <button type="button" onclick="removeItem(${item.idx})" class="text-red-600 hover:text-red-800">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
                            </svg>
                        </button>
                    </td>
                </tr>
            `;

            inputsDiv.innerHTML += `
                <input type="hidden" name="items[${i}][sku]" value="${item.sku}">
                <input type="hidden" name="items[${i}][product_name]" value="${item.name}">
                <input type="hidden" name="items[${i}][quantity]" value="${item.qty}">
                <input type="hidden" name="items[${i}][unit_price]" value="${item.price}">
            `;
        });

        updateTotals();
    }

    let currentTotal = 0;

    function updateTotals() {
        const subtotal = items.reduce((sum, i) => sum + (i.qty * i.price), 0);
        const discountType = document.getElementById('discount_type').value;
        const discountValue = parseFloat(document.getElementById('discount_value').value) || 0;

        let discountAmount;
        if (discountType === 'fixed') {
            discountAmount = Math.min(discountValue, subtotal);
        } else {
            const discountPercent = Math.min(discountValue, 100);
            discountAmount = subtotal * (discountPercent / 100);
        }

        currentTotal = subtotal - discountAmount;

        document.getElementById('subtotalDisplay').textContent = 'RM ' + subtotal.toFixed(2);
        document.getElementById('discountDisplay').textContent = '- RM ' + discountAmount.toFixed(2);
        document.getElementById('totalDisplay').textContent = 'RM ' + currentTotal.toFixed(2);
        document.getElementById('exactAmountBtn').textContent = 'RM ' + currentTotal.toFixed(2);

        updateChange();
    }

    function setAmountPaid(amount) {
        document.getElementById('amount_paid').value = amount.toFixed(2);
        updateChange();
    }

    function payExact() {
        document.getElementById('amount_paid').value = currentTotal.toFixed(2);
        updateChange();
    }

    function updateChange() {
        const amountPaid = parseFloat(document.getElementById('amount_paid').value) || 0;
        const change = amountPaid - currentTotal;
        const changeDisplay = document.getElementById('changeDisplay');
        const changeAmount = document.getElementById('changeAmount');

        if (amountPaid > currentTotal && currentTotal > 0) {
            changeDisplay.classList.remove('hidden');
            changeAmount.textContent = 'RM ' + change.toFixed(2);
        } else {
            changeDisplay.classList.add('hidden');
        }
    }

    document.getElementById('discount_type').addEventListener('change', updateTotals);
    document.getElementById('discount_value').addEventListener('input', updateTotals);

    // Initial render
    renderItems();
</script>
        @endif
@endsection