@extends('backend.layouts.app')

@section('title', __('Edit Sale Order'))

@section('admin-content')
<div class="p-6 mx-auto max-w-7xl">
    @include('backend.layouts.partials.messages')

    <h2 class="text-xl font-semibold mb-4">Edit Sale Order</h2>

    <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
        <form action="{{ route('admin.sale-orders.update', $order->id) }}" method="POST">
            @csrf
            @method('PUT')

            {{-- Customer Section --}}
            <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
                <div>
                    <label class="block mb-1 font-medium">Customer Code</label>
                    <input type="text" name="card_code" id="CardCode"
                        class="form-input w-full cursor-pointer bg-gray-50"
                        value="{{ $order->card_code }}"
                        readonly onclick="openCustomerModal()">
                </div>

                <div>
                    <label class="block mb-1 font-medium">Customer Name</label>
                    <input type="text" name="card_name" id="CardName"
                        value="{{ $order->card_name }}"
                        class="form-input w-full" readonly>
                </div>
                <div>
                    <label class="block mb-1 font-medium">Address</label>
                <input type="text" name="address" id="address"
                    class="form-input w-full" 
                    value="{{ $order->address }}"
                    readonly>

                </div>


                <div>
                    <label class="block mb-1 font-medium">Due Date</label>
                    <input type="date" name="doc_due_date"
                        value="{{ \Carbon\Carbon::parse($order->doc_due_date)->format('Y-m-d') }}"
                        class="form-input w-full">

                </div>
            </div>

            {{-- Include Modals --}}
            @include('components.popups.customer-modal')
            @include('components.popups.item-modal')

            <hr class="my-4">

            {{-- Order Lines --}}
            <h3 class="font-semibold mb-2">Order Lines</h3>

            <table class="w-full text-sm border">
                <thead class="bg-gray-100">
                    <tr>
                        <th class="p-2">Item Code</th>
                        <th class="p-2">Item Name</th>
                        <th class="p-2">Qty</th>
                        <th class="p-2">Unit Price</th>
                        <th class="p-2">Discount (%)</th>
                        <th class="p-2">Tax (%)</th>
                        <th class="p-2">Total</th>
                        <th class="p-2">Action</th>
                    </tr>
                </thead>

                <tbody id="items-table">
                    @foreach($order->lines as $i => $line)
                    <tr>
                        <td>
                            <input type="text" name="items[{{ $i }}][item_code]"
                                class="form-input w-full item-code bg-gray-50 cursor-pointer"
                                value="{{ $line->item_code }}"
                                readonly onclick="openItemModal(this)">
                        </td>

                        <td>
                            <input type="text" name="items[{{ $i }}][item_name]"
                                class="form-input w-full item-name"
                                value="{{ $line->item_name }}" readonly>
                        </td>

                        <td>
                            <input type="number" name="items[{{ $i }}][quantity]"
                                class="form-input w-full item-qty"
                                min="1" value="{{ $line->quantity }}">
                        </td>

                        <td>
                            <input type="number" name="items[{{ $i }}][unit_price]"
                                class="form-input w-full item-price"
                                value="{{ $line->unit_price }}">
                        </td>

                        <td>
                            <input type="number" name="items[{{ $i }}][discount]"
                                class="form-input w-full item-discount"
                                value="{{ $line->discount ?? 0 }}">
                        </td>

                        <td>
                            <input type="number" name="items[{{ $i }}][tax_rate]"
                                class="form-input w-full item-tax"
                                value="{{ $line->tax_rate }}">
                        </td>

                        <td class="item-line-total text-center">
                            {{ number_format($line->line_total, 2) }}
                        </td>

                        <td class="text-center">
                            <button type="button" class="text-red-600" onclick="removeRow(this)">
                                <i class="bi bi-x-lg"></i>
                            </button>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>

            <div class="mt-3">
                <button type="button" onclick="addRow()"
                    class="px-3 py-1 bg-primary text-white rounded">
                    + Add Item
                </button>
            </div>

            <div class="mt-3 text-right">
                <strong>Total: PKR <span id="order-total">0.00</span></strong>
            </div>

            <div class="mt-4">
                <label class="block font-medium">Comments</label>
                <textarea name="comments" class="form-textarea w-full">{{ $order->comments }}</textarea>
            </div>

            <div class="flex justify-end mt-4">
                <button type="submit" class="px-6 py-2 bg-primary text-white rounded">
                    Update Order
                </button>
            </div>

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

<script>
     let rowCount = {{ count($order->lines) }};
    let activeRow = null;

    function calculateRowTotal(row) {
        const qty = parseFloat(row.querySelector('.item-qty').value) || 0;
        const price = parseFloat(row.querySelector('.item-price').value) || 0;
        const discount = parseFloat(row.querySelector('.item-discount').value) || 0;
        const tax = parseFloat(row.querySelector('.item-tax').value) || 0;

        const subtotal = qty * price;
        const discountAmount = subtotal * (discount / 100);
        const taxAmount = (subtotal - discountAmount) * (tax / 100);
        const total = subtotal - discountAmount + taxAmount;

        row.querySelector('.item-line-total').textContent = total.toFixed(2);
        return total;
    }

    function calculateOrderTotal() {
        let total = 0;
        document.querySelectorAll('#items-table tr').forEach(row => {
            total += calculateRowTotal(row);
        });
        document.getElementById('order-total').textContent = total.toFixed(2);
    }

    function attachInputEvents(row) {
        row.querySelectorAll('.item-qty, .item-price, .item-discount, .item-tax')
            .forEach(inp => inp.addEventListener('input', calculateOrderTotal));
    }

    document.querySelectorAll('#items-table tr').forEach(row => attachInputEvents(row));
    calculateOrderTotal();

    function addRow() {
        const table = document.getElementById('items-table');
        const newRow = table.insertRow();

        newRow.innerHTML = `
        <td><input type="text" name="items[${rowCount}][item_code]" class="form-input w-full item-code bg-gray-50" readonly onclick="openItemModal(this)"></td>
        <td><input type="text" name="items[${rowCount}][item_name]" class="form-input w-full item-name" readonly></td>
        <td><input type="number" name="items[${rowCount}][quantity]" class="form-input w-full item-qty" min="1" value="1"></td>
        <td><input type="number" name="items[${rowCount}][unit_price]" class="form-input w-full item-price" value="0"></td>
        <td><input type="number" name="items[${rowCount}][discount]" class="form-input w-full item-discount" value="0"></td>
        <td><input type="number" name="items[${rowCount}][tax_rate]" class="form-input w-full item-tax" value="0"></td>
        <td class="item-line-total text-center">0.00</td>
        <td class="text-center"><button type="button" onclick="removeRow(this)" class="text-red-600"><i class="bi bi-x-lg"></i></button></td>
    `;

        attachInputEvents(newRow);
        rowCount++;
        calculateOrderTotal();
    }

    function removeRow(btn) {
        btn.closest('tr').remove();
        calculateOrderTotal();
    }

    function openItemModal(el) {
        activeRow = el.closest('tr');
        document.getElementById('itemModal').classList.remove('hidden');
    }
</script>

@endsection