@extends('agent.layouts.index')

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

            </div>
            <!-- Sales Info -->
            <form id="agentRequestForm" action="/agent/request" method="POST">

                <div class="grid sm:grid-cols-1 md:grid-cols-4 gap-4 mb-6">

                    @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="{{ $request->request_number }}" disabled>
                    </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="{{ $request->created_at->format('Y-m-d') }}" disabled>
                    </div>
                    @php
                        $dayName = \Carbon\Carbon::parse($request->created_at)->format('l'); // e.g. Monday
                    @endphp

                    <div>
                        <label class="block text-sm font-medium mb-1">Day Name</label>
                        <select id="day-select" class="w-full border p-2 rounded" disabled>
                            <option {{ $dayName == 'Monday' ? 'selected' : '' }}>Monday</option>
                            <option {{ $dayName == 'Tuesday' ? 'selected' : '' }}>Tuesday</option>
                            <option {{ $dayName == 'Wednesday' ? 'selected' : '' }}>Wednesday</option>
                            <option {{ $dayName == 'Thursday' ? 'selected' : '' }}>Thursday</option>
                            <option {{ $dayName == 'Friday' ? 'selected' : '' }}>Friday</option>
                            <option {{ $dayName == 'Saturday' ? 'selected' : '' }}>Saturday</option>
                            <option {{ $dayName == 'Sunday' ? 'selected' : '' }}>Sunday</option>
                        </select>
                    </div>
                    <div>
                        <label class="block text-sm font-medium mb-1">Status</label>
                        <input type="text" name="request_no" class="w-full border p-2 rounded"
                            value="{{ $request->status }}" disabled>
                    </div>

                </div>
            </form>

            <!-- Product Selection -->
            <div class="border p-4 rounded-lg mb-6 overflow-x-auto">


                <!-- 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">
                            @foreach ($request->agentRequestItems as $agentRequestItem)
                                <tr>
                                    <td style="display:none">{{ $agentRequestItem->id }}</td>
                                    <td class="p-2 border">{{ $agentRequestItem->product->product_name }} </td>
                                    <td class="p-2 border">{{ $agentRequestItem->quantity }}</td>
                                    <td class="p-2 border">{{ $agentRequestItem->price }}</td>
                                    <td class="p-2 border">{{ $agentRequestItem->subtotal }} </td>
                                    <td class="p-2 border">{{ $agentRequestItem->subtotal }} </td>
                                    <td class="p-2 border text-center">
                                        @if ($request->status === 'pending')
                                            <button onclick="editRow(this)"
                                                class="bg-yellow-400 hover:bg-yellow-600 text-white py-1 px-3 rounded" data-editing="false">
                                                <i class="fa-regular fa-file-pen"></i> Edit
                                            </button>
                                            <button onclick="deleteRow(this)"
                                                class="bg-red-400 hover:bg-red-600 text-white py-1 px-3 rounded">
                                                Delete
                                            </button>
                                        @endif
                                    </td>

                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>

                @if ($request->status === 'pending')
                    <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 text-center">
                                <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 text-center ">
                                <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">
                                </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>
                @endif

            </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>

            <!-- Bottom Buttons -->
               @if ($request->status === 'pending')
               <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>
              @endif

        </div>



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

   function editRow(button) {
    const row = button.closest('tr');
    const isEditing = button.getAttribute('data-editing') === 'true';
    const productCell = row.cells[1]; // Product Name
    const quantityCell = row.cells[2];
    const priceCell = row.cells[3];
    const amountCell = row.cells[4];
    const netAmountCell = row.cells[5];

    if (!isEditing) {
        // Get current values
        const currentProductName = productCell.innerText.trim();
        const currentProductId = row.cells[0].innerText.trim();
        const currentQty = quantityCell.innerText.trim();

        // Build product dropdown
        let productOptions = '';
        for (const [id, data] of Object.entries(productsData)) {
            const selected = id == currentProductId ? 'selected' : '';
            productOptions += `<option value="${id}" data-price="${data.price}" ${selected}>${data.name}</option>`;
        }

        // Replace cells with editable inputs
        productCell.innerHTML = `<select class="product-select w-full border p-1 text-sm">${productOptions}</select>`;
        quantityCell.innerHTML = `<input type="number" class="qty-input w-full border p-1 text-sm" value="${currentQty}" min="1">`;

        // On product change, update price and amount
        productCell.querySelector('select').addEventListener('change', function () {
            const selectedOption = this.options[this.selectedIndex];
            const newPrice = parseFloat(selectedOption.getAttribute('data-price')) || 0;
            priceCell.innerText = newPrice.toFixed(2);

            const qty = parseFloat(quantityCell.querySelector('input').value) || 0;
            const amt = qty * newPrice;

            amountCell.innerText = amt.toFixed(2);
            netAmountCell.innerText = amt.toFixed(2);
            updateTotals();
        });

        // On qty change, update amount
        quantityCell.querySelector('input').addEventListener('input', function () {
            const qty = parseFloat(this.value) || 0;
            const price = parseFloat(priceCell.innerText) || 0;
            const amt = qty * price;

            amountCell.innerText = amt.toFixed(2);
            netAmountCell.innerText = amt.toFixed(2);
            updateTotals();
        });

        button.innerText = 'Save';
        button.classList.remove('bg-yellow-400');
        button.classList.add('bg-green-500');
        button.setAttribute('data-editing', 'true');
    } else {
        // Save new values
        const productSelect = productCell.querySelector('select');
        const selectedOption = productSelect.options[productSelect.selectedIndex];
        const selectedProductName = selectedOption.text;
        const selectedProductId = selectedOption.value;
        const selectedProductPrice = selectedOption.getAttribute('data-price');

        const qty = quantityCell.querySelector('input').value;

        row.cells[0].innerText = selectedProductId; // Hidden ID
        productCell.innerText = selectedProductName;
        quantityCell.innerText = qty;
        priceCell.innerText = parseFloat(selectedProductPrice).toFixed(2);
        amountCell.innerText = (qty * selectedProductPrice).toFixed(2);
        netAmountCell.innerText = (qty * selectedProductPrice).toFixed(2);

        updateTotals();

        button.innerText = 'Edit';
        button.classList.remove('bg-green-500');
        button.classList.add('bg-yellow-400');
        button.setAttribute('data-editing', 'false');
    }
}



        </>
    @endsection