@extends('agent.layouts.index')

@section('content')
    <div class="p-6 bg-white shadow rounded-lg max-w-7xl mx-auto">
        <h2 class="text-2xl font-bold mb-6 text-center">Agent Request Products</h2>

        <!-- Sales Info -->
        <div class=" border p-4 rounded-lg mb-6">
            <form id="agentRequestForm" class="grid sm:grid-cols-1 md:grid-cols-3 gap-4"  action="/agent/request" method="POST">

                @csrf
                <div>
                    <label class="block text-sm font-medium mb-1">Sale Code</label>
                    <input type="text" name="request_no" class="w-full border p-2 rounded" value="{{ $invoiceNo }}"
                        readonly>
                </div>
                <div>
                    <label class="block text-sm font-medium mb-1">Sales Date</label>
                    <input type="date" name="order_date" class="w-full border p-2 rounded" value="{{ date('Y-m-d') }}">
                </div>
                <div>
                    <label class="block text-sm font-medium mb-1">Day Name</label>
                    <select id="day-select" class="w-full border p-2 rounded" @readonly(true)>
                        <option>Monday</option>
                        <option>Tuesday</option>
                        <option>Wednesday</option>
                        <option>Thursday</option>
                        <option>Friday</option>
                        <option>Saturday</option>
                        <option>Sunday</option>
                    </select>
                </div>
            </form>
        </div>

        {{--    

    <!-- Product Selection -->
    <div class="border p-4 rounded-lg mb-6 overflow-x-scroll">
        <div class="mb-4 font-semibold">Stock Qty: <span class="text-green-600">0</span></div>

        <div class="grid grid-cols-7 gap-2 text-center font-bold bg-blue-300 p-2 rounded mb-2 justify-center ">
            <div>Product Name</div>
            <div>Quantity</div>
            <div>Price</div>
            <div>Amount</div>
            <div>Discount</div>
            <div>Net Amount</div>
        </div>

        <div class="grid grid-cols-7 gap-2 my-8 justify-center">
            <div>
                <select class="w-full border p-2 rounded" id="product">
                    <option value="35">88-19 liter</option>
                    <option value="40">20-25 liter</option>
                    <option value="50">30-50 liter</option>
                </select>
            </div>
            <div><input type="number" id="quantity" class="w-full border p-2 rounded" readonly></div>
            <div><input type="number" id="price" class="w-full border p-2 rounded" value="0"></div>
            <div><input type="number" id="amount" class="w-full border p-2 rounded" readonly></div>
            <div><input type="number" id="discount" class="w-full border p-2 rounded" value="0"></div>
            <div><input type="number" id="netamount" class="w-full border p-2 rounded" readonly></div>
        </div>

        <div class="text-center my-5">
            <button onclick="addItem()" class="bg-blue-500 hover:bg-blue-700 text-white py-2 px-4 rounded">
                Add
            </button>
        </div>

        <div class="mt-4">
            <textarea class="w-full border p-2 rounded h-40" readonly id="saleDetails"></textarea>
        </div>
    </div> --}}
        <!-- Product Selection -->
        <div class="border p-4 rounded-lg mb-6 overflow-x-auto">
            <div class="mb-4 font-semibold">Stock Qty: <span class="text-green-600">0</span></div>

            <table class="min-w-[700px] w-full text-center text-sm">
                <thead class="bg-[#0c3d55]">
                    <tr class="text-white">
                        <th class="p-2 whitespace-nowrap">Product Name</th>
                        <th class="p-2 whitespace-nowrap">Quantity</th>
                        <th class="p-2 whitespace-nowrap">Price</th>
                        <th class="p-2 whitespace-nowrap">Amount</th>
                        <th class="p-2 whitespace-nowrap">Net Amount</th>
                    </tr>
                </thead>
                <tbody>
                    <tr class="bg-white hover:bg-gray-100">
                        <td class="p-2">
                            <select class="w-full border p-2 rounded text-xs" id="product">
                                <option value="" selected>Select product</option>
                                @foreach ($products as $product)
                                    <option value="{{ $product->id }}" data-name="{{ $product->product_name }}"
                                        data-price="{{ $product->product_price }}">
                                        {{ $product->product_name }}
                                    </option>
                                @endforeach
                            </select>
                        </td>
                        <td class="p-2">
                            <input type="number" id="quantity" class="w-full border p-2 rounded text-xs">
                        </td>
                        <td class="p-2">
                            <input type="number" id="price" class="w-full border p-2 rounded text-xs" value="0"
                                readonly>
                        </td>
                        <td class="p-2">
                            <input type="number" id="amount" class="w-full border p-2 rounded text-xs" readonly>
                        </td>

                        <td class="p-2">
                            <input type="number" id="netamount" class="w-full border p-2 rounded text-xs" readonly>
                        </td>
                    </tr>
                </tbody>
            </table>

            <div class="text-center my-5">
                <button onclick="addItem()" class="bg-[#0c3d55] hover:bg-blue-700 text-white py-2 px-4 rounded text-sm">
                    Add
                </button>
            </div>

            <!-- Sale Details Table -->
            <div class="overflow-x-auto">
                <table id="saleDetailsTable" class="min-w-full text-sm text-left border">
                    <thead class="bg-gray-100">
                        <tr>
                            <th class="p-2 border">Product</th>
                            <th class="p-2 border">Quantity</th>
                            <th class="p-2 border">Price</th>
                            <th class="p-2 border">Amount</th>
                            <th class="p-2 border">Net Amount</th>
                            <th class="p-2 border">Action</th>
                        </tr>
                    </thead>
                    <tbody id="product_table">
                        <!-- Dynamic Rows -->
                    </tbody>
                </table>
            </div>


        </div>


        <!-- Total Summary -->
        <div class="grid sm:grid-cols-1 md:grid-cols-2 md:w-1/2 items-center gap-4 my-6 mx-auto">
            <div>
                <label class="block text-sm font-medium mb-1">Total Amount</label>
                <input type="number" id="totalAmount" class="w-full border p-2 rounded bg-yellow-100" readonly>
            </div>

            <div>
                <label class="block text-sm font-medium mb-1">Net Amount</label>
                <input type="number" id="totalNetAmount" class="w-full border p-2 rounded bg-yellow-100" readonly>
            </div>
            {{-- <div>
        <label class="block text-sm font-medium mb-1">Balance</label>
        <input type="number" id="balance" class="w-full border p-2 rounded bg-yellow-100" readonly>
    </div> --}}
        </div>

        <!-- Bottom Buttons -->
        <div class="flex justify-center space-x-4 mt-6">
            <button onclick="clearAll()" class="bg-red-500 hover:bg-red-700 text-white py-2 px-6 rounded">
                Clear All
            </button>
            <button id="submitRequestBtn" class="bg-green-500 hover:bg-green-700 text-white py-2 px-6 rounded">
                Save Invoice
            </button>
        </div>

    </div>

    {{-- <script>
    document.getElementById('product').addEventListener('change', function() {
        document.getElementById('price').value = this.value;
        calculateAmount();
    });

    document.getElementById('filled').addEventListener('input', calculateAmount);
    document.getElementById('empty').addEventListener('input', calculateAmount);
    document.getElementById('discount').addEventListener('input', calculateAmount);

    function calculateAmount() {
        let price = parseFloat(document.getElementById('price').value) || 0;
        let filled = parseFloat(document.getElementById('filled').value) || 0;
        let discount = parseFloat(document.getElementById('discount').value) || 0;

        let amount = price * filled;
        let netamount = amount - discount;

        document.getElementById('amount').value = amount.toFixed(2);
        document.getElementById('netamount').value = netamount.toFixed(2);
    }

    function addItem() {
        let product = document.getElementById('product').options[document.getElementById('product').selectedIndex].text;
        let filled = document.getElementById('filled').value;
        let empty = document.getElementById('empty').value;
        let amount = document.getElementById('amount').value;
        let discount = document.getElementById('discount').value;
        let netamount = document.getElementById('netamount').value;

        let line = `${product} | Filled: ${filled} | Empty: ${empty} | Amount: ${amount} | Discount: ${discount} | Net: ${netamount}\n`;

        document.getElementById('saleDetails').value += line;

        // Update totals
        let totalAmount = parseFloat(document.getElementById('totalAmount').value) || 0;
        let totalDiscount = parseFloat(document.getElementById('totalDiscount').value) || 0;
        let totalNetAmount = parseFloat(document.getElementById('totalNetAmount').value) || 0;

        document.getElementById('totalAmount').value = (totalAmount + parseFloat(amount)).toFixed(2);
        document.getElementById('totalDiscount').value = (totalDiscount + parseFloat(discount)).toFixed(2);
        document.getElementById('totalNetAmount').value = (totalNetAmount + parseFloat(netamount)).toFixed(2);
        document.getElementById('balance').value = document.getElementById('totalNetAmount').value;

        // Reset inputs
        document.getElementById('filled').value = 0;
        document.getElementById('empty').value = 0;
        document.getElementById('discount').value = 0;
        calculateAmount();
    }
</script> --}}

    <script>
        function calculateAmount() {
            const quantity = parseFloat(document.getElementById('quantity').value) || 0;
            const price = parseFloat(document.getElementById('price').value) || 0;

            const amount = quantity * price;
            const netAmount = amount

            document.getElementById('amount').value = amount.toFixed(2);
            document.getElementById('netamount').value = netAmount.toFixed(2);
        }

        document.getElementById('quantity').addEventListener('input', calculateAmount);
        document.getElementById('price').addEventListener('input', calculateAmount);

        function addItem() {
            const product = document.getElementById('product');
            const quantity = document.getElementById('quantity').value;
            const price = document.getElementById('price').value;
            const amount = document.getElementById('amount').value;
            const netamount = document.getElementById('netamount').value;
            const tbody = document.querySelector('#saleDetailsTable tbody');

            const row = document.createElement('tr');
            row.innerHTML = `
            <td style="display:none">${product.options[product.selectedIndex].value}</td>
            <td class="p-2 border">${product.options[product.selectedIndex].text}</td>
            <td class="p-2 border">${quantity}</td>
            <td class="p-2 border">${price}</td>
            <td class="p-2 border">${amount}</td>
            <td class="p-2 border">${netamount}</td>
            <td class="p-2 border text-center">
                <button onclick="deleteRow(this)" class="bg-red-400 hover:bg-red-600 text-white py-1 px-3 rounded">
                    Delete
                </button>
            </td>
        `;

            tbody.appendChild(row);
            updateTotals();


            // Clear fields after adding
            document.getElementById('quantity').value = 1;
            document.getElementById('price').value = 0;
            document.getElementById('amount').value = 0;
            document.getElementById('discount').value = 0;
            document.getElementById('netamount').value = 0;
        }

        function updateTotals() {
            let totalAmount = 0;
            let totalDiscount = 0;
            let totalNetAmount = 0;

            const tbody = document.querySelector('#saleDetailsTable tbody');
            const rows = tbody.querySelectorAll('tr');

            rows.forEach(row => {
                const amount = parseFloat(row.cells[3].innerText) || 0;
                const discount = parseFloat(row.cells[4].innerText) || 0;
                const netAmount = parseFloat(row.cells[5].innerText) || 0;

                totalAmount += amount;
                totalDiscount += discount;
                totalNetAmount += netAmount;
            });

            document.getElementById('totalAmount').value = totalAmount.toFixed(2);
            document.getElementById('totalDiscount').value = totalDiscount.toFixed(2);
            document.getElementById('totalNetAmount').value = totalNetAmount.toFixed(2);
            // document.getElementById('balance').value = totalNetAmount.toFixed(2); // You can change balance logic if needed
        }


        function deleteRow(button) {
            button.closest('tr').remove();
            updateTotals();

        }

        function clearAll() {
            const tbody = document.querySelector('#saleDetailsTable tbody');
            tbody.innerHTML = '';
            updateTotals();

        }



        document.addEventListener('DOMContentLoaded', function() {
            const days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
            const today = new Date();
            const dayName = days[today.getDay()];

            const select = document.getElementById('day-select');
            for (let i = 0; i < select.options.length; i++) {
                if (select.options[i].text === dayName) {
                    select.selectedIndex = i;
                    break;
                }
            }
        });
        const priceInput = document.getElementById('price');
        const productSelect = document.getElementById('product');

        document.addEventListener('DOMContentLoaded', function() {
            // When product is selected, update price
            productSelect.addEventListener('change', function() {
                const selectedOption = productSelect.options[productSelect.selectedIndex];
                const price = selectedOption.getAttribute('data-price') || 0;
                priceInput.value = parseFloat(price).toFixed(2);
                calculateAmount();
            });

        });

        $('#submitRequestBtn').click(function() {
            var formData = {};

            $('#product_table tr').each(function(index) {
                var product_id = $(this).find('td:eq(0)').text();
                var product_name = $(this).find('td:eq(1)').text();
                var product_price = $(this).find('td:eq(3)').text();
                var quantity = $(this).find('td:eq(2)').text();
                var subtotal = $(this).find('td:eq(5)').text();

                formData['item_' + (index + 1)] = {
                    product_id: product_id,
                    product_price: product_price,
                    quantity: quantity,
                    subtotal: subtotal
                };
            });

            $.each(formData, function(key, value) {
                $('#agentRequestForm').append($('<input>', {
                    type: 'hidden',
                    name: 'formData[' + key + '][product_id]',
                    value: value.product_id
                }));
                $('#agentRequestForm').append($('<input>', {
                    type: 'hidden',
                    name: 'formData[' + key + '][product_price]',
                    value: value.product_price
                }));
                $('#agentRequestForm').append($('<input>', {
                    type: 'hidden',
                    name: 'formData[' + key + '][quantity]',
                    value: value.quantity
                }));
                $('#agentRequestForm').append($('<input>', {
                    type: 'hidden',
                    name: 'formData[' + key + '][subtotal]',
                    value: value.subtotal
                }));
            });

            $('#agentRequestForm').submit();
        });
    </script>
@endsection