@extends('layouts.app')

@section('title', 'New Invoice')

@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">New Invoice</h1>
            <p class="mt-2 text-sm text-gray-700 dark:text-gray-300">Create a new sales invoice</p>
        </div>

        <form action="{{ route('sales.store') }}" method="POST" id="invoiceForm" class="space-y-6">
            @csrf

            <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-3 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 }}" {{ old('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
                        <p class="mt-1 text-xs text-gray-500">
                            <a href="{{ route('customers.create') }}" class="text-indigo-600 hover:underline">+ Add new customer</a>
                        </p>
                    </div>

                    <div>
                        <label for="warehouse_id" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Warehouse *</label>
                        <select name="warehouse_id" id="warehouse_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">
                            @foreach($warehouses as $warehouse)
                                <option value="{{ $warehouse->id }}" {{ ($defaultWarehouse && $defaultWarehouse->id == $warehouse->id) ? 'selected' : '' }}>
                                    {{ $warehouse->name }} ({{ $warehouse->code }})
                                </option>
                            @endforeach
                        </select>
                        @error('warehouse_id')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                        <p class="mt-1 text-xs text-gray-500 text-amber-600">Stock shown based on selected warehouse</p>
                    </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="{{ old('invoice_date', date('Y-m-d')) }}"
                            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">
                    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">Cash</option>
                            <option value="bank_transfer">Bank Transfer</option>
                            <option value="ewallet">E-Wallet</option>
                            <option value="credit">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="0" 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="0" 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">{{ old('notes') }}</textarea>
                </div>

                <!-- Record Only Mode -->
                <div class="mt-6 p-4 bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 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"
                                class="h-4 w-4 text-amber-600 focus:ring-amber-500 border-gray-300 rounded"
                                onchange="toggleRecordOnly()">
                        </div>
                        <div class="ml-3">
                            <label for="record_only" class="text-sm font-medium text-amber-800 dark:text-amber-200">
                                Record Only (No Stock Deduction)
                            </label>
                            <p class="text-xs text-amber-700 dark:text-amber-300 mt-1">
                                Use this for orders already processed in Dashboard, or to record sales for reference without affecting inventory.
                            </p>
                        </div>
                    </div>

                    <div id="linkedOrderSection" class="mt-3 hidden">
                        <label for="linked_order_number" class="block text-sm font-medium text-amber-800 dark:text-amber-200">
                            Linked Order Number (Optional)
                        </label>
                        <input type="text" name="linked_order_number" id="linked_order_number" placeholder="e.g., CK-NAD-000115"
                            class="mt-1 block 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 order number from Dashboard/Marketing if this sale is already processed there.
                        </p>
                    </div>
                </div>
            </div>

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

            <div class="flex items-center justify-end gap-3">
                <a href="{{ route('sales.index') }}" 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" disabled 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">
                    Create Invoice
                </button>
            </div>
        </form>
    </div>
</div>

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

    // Handle warehouse change - reload products
    document.getElementById('warehouse_id').addEventListener('change', function() {
        const warehouseId = this.value;

        // Clear current items when warehouse changes
        if (items.length > 0) {
            if (!confirm('Changing warehouse will clear current items. Continue?')) {
                // Reset to previous value
                this.value = this.dataset.previousValue || this.options[0].value;
                return;
            }
            items = [];
            itemIndex = 0;
            renderItems();
        }

        // Store current value for potential reset
        this.dataset.previousValue = warehouseId;

        // Show loading state
        const productSelect = document.getElementById('productSelect');
        productSelect.innerHTML = '<option value="">Loading products...</option>';
        productSelect.disabled = true;

        // Fetch products for selected warehouse
        fetch(`{{ url('/sales/products-by-warehouse') }}/${warehouseId}`)
            .then(response => response.json())
            .then(data => {
                productSelect.innerHTML = '<option value="">Select Product to Add</option>';
                data.products.forEach(product => {
                    const option = document.createElement('option');
                    option.value = product.sku;
                    option.dataset.name = product.product_name;
                    option.dataset.price = product.price;
                    option.dataset.stock = product.quantity;
                    option.textContent = `${product.sku} - ${product.product_name} | RM ${parseFloat(product.price).toFixed(2)} (Stock: ${product.quantity})`;
                    productSelect.appendChild(option);
                });
                productSelect.disabled = false;
            })
            .catch(error => {
                console.error('Error fetching products:', error);
                productSelect.innerHTML = '<option value="">Error loading products</option>';
                productSelect.disabled = false;
            });
    });

    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);

    // Toggle Record Only mode
    function toggleRecordOnly() {
        const checkbox = document.getElementById('record_only');
        const linkedSection = document.getElementById('linkedOrderSection');

        if (checkbox.checked) {
            linkedSection.classList.remove('hidden');
        } else {
            linkedSection.classList.add('hidden');
            document.getElementById('linked_order_number').value = '';
        }
    }

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