@extends('master')
@section('content')
    <div class="page-wrapper">
        <div class="content">
            <div class="page-header">
                <div class="page-title">
                    <h4>{{ __('sitelabel.UpdateDemandNoteOrder') }}</h4>
                </div>
            </div>

            @if ($errors->any())
                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                    <ul>
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            @endif

            <form method="post" action="{{ url('/editdemandnoteorderprocess') }}" enctype="multipart/form-data">
                @csrf
                <input type="hidden" name="hbid" value="{{ $order->Id }}">
                <div class="card">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-lg-3 col-sm-6 col-12">
                                <div class="form-group">
                                    <label>{{ __('sitelabel.OrderDate') }}<span class="text-danger">*</span></label>
                                    <input class="form-control" type="date" name="txtOrderDate" id="txtOrderDate" value="{{ $order->OrderDate }}">
                                    <span class="text-danger">
                                        @error('txtOrderDate')
                                            {{ $message }}
                                        @enderror
                                    </span>
                                </div>
                            </div>
                            <div class="col-lg-3 col-sm-12">
                                <div class="form-group">
                                    <label>{{ __('sitelabel.BillNo') }}</label>
                                    <input type="text" readonly class="form-control" id="txtBillNo" name="txtBillNo" value="{{ $order->BillNo }}">
                                </div>
                            </div>
                            <div class="col-lg-3 col-sm-12">
                                <div class="form-group">
                                    <label>{{ __('sitelabel.Vendor') }}<span class="text-danger">*</span></label>
                                    <select class="form-select" name="cmbVendor" id="cmbVendor">
                                        <option value="">{{ __('sitelabel.SelectVendor') }}</option>
                                        @foreach ($vendors as $item)
                                            <option value="{{ $item->Id }}" {{ $item->Id == $order->VendorId ? 'selected' : '' }}>{{ $item->Name }}</option>
                                        @endforeach
                                    </select>
                                    <span class="text-danger">
                                        @error('cmbVendor')
                                            {{ $message }}
                                        @enderror
                                    </span>
                                </div>
                            </div>
                            <div class="col-lg-3 col-sm-12">
                                <div class="form-group">
                                    <label>{{ __('sitelabel.RefNo') }}</label>
                                    <input type="text" class="form-control" id="txtReferenceNo" name="txtReferenceNo" value="{{ $order->ReferenceNo }}">
                                </div>
                            </div>
                            <div class="col-lg-3 col-sm-12">
                                <div class="form-group">
                                    <label>{{ __('sitelabel.JobNo') }}</label>
                                    <input type="text" class="form-control" id="txtJobNo" name="txtJobNo" value="{{ $order->JobNo }}">
                                </div>
                            </div>
                            <div class="col-lg-3 col-sm-6 col-12">
                                <div class="form-group">
                                    <label>{{ __('sitelabel.PaymentType') }}<span class="text-danger">*</span></label>
                                    <select class="form-select" name="cmbPaymentType" id="cmbPaymentType">
                                        <option value="">{{ __('sitelabel.SeleactPaymentType') }}</option>
                                        @foreach ($paymenttype as $item)
                                            <option value="{{ $item->Id }}" {{ $item->Id == $order->ModeOfPayment ? 'selected' : '' }}>{{ $item->Name }}</option>
                                        @endforeach
                                    </select>
                                    <span class="text-danger">
                                        @error('cmbPaymentType')
                                            {{ $message }}
                                        @enderror
                                    </span>
                                </div>
                            </div>
                            <div class="col-lg-3 col-sm-12">
                                <div class="form-group">
                                    <label>{{ __('sitelabel.Status') }}</label>
                                    <input class="form-check-input" type="checkbox" id="chkStatus" name="chkStatus" {{ $order->Status == 1 ? 'checked' : '' }}>
                                </div>
                            </div>
                        </div>

                        <div class="col-lg-12">
                            <div class="form-group">
                                <label>{{ __('sitelabel.Note') }}</label>
                                <textarea class="form-control" id="txtNote" name="txtNote">{{ $order->Note }}</textarea>
                            </div>
                        </div>

                        <input type="hidden" id="rowsData" name="rowsData" value="">

                        <!-- First Table For Add Details -->
                        <div class="row mt-4">
                            <div class="col-lg-12">
                                <table class="table table-bordered">
                                    <thead style="background-color: #0C143C">
                                        <tr>
                                            <th style="color: #fff">{{ __('sitelabel.ItemCode') }}</th>
                                            <th style="color: #fff">{{ __('sitelabel.ItemName') }}</th>
                                            <th style="color: #fff">{{ __('sitelabel.PurchasePrice') }}</th>
                                            <th style="color: #fff">{{ __('sitelabel.Quantity') }}</th>
                                            <th style="color: #fff">{{ __('sitelabel.SubTotal') }}</th>
                                            <th style="color: #fff">{{ __('sitelabel.DiscountPercent') }}</th>
                                            <th style="color: #fff">{{ __('sitelabel.Total') }}</th>
                                            <th style="color: #fff">{{ __('sitelabel.Action') }}</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr style="background-color: rgb(192, 192, 192)">
                                            <td>
                                                <select class="form-control" id="ddlItemCode">
                                                    <option value="" disabled selected>{{ __('sitelabel.SelectItemCode') }}</option>
                                                    @foreach ($products as $product)
                                                        <option value="{{ $product->Id }}" data-sku="{{ $product->SKU }}">{{ $product->SKU }}</option>
                                                    @endforeach
                                                </select>
                                            </td>
                                            <td>
                                                <select class="form-control" id="ddlItemName">
                                                    <option value="" disabled selected>{{ __('sitelabel.SelectItemName') }}</option>
                                                    @foreach ($products as $product)
                                                        <option value="{{ $product->Id }}">{{ $product->Name }}</option>
                                                    @endforeach
                                                </select>
                                            </td>
                                            <td>
                                                <input type="number" class="form-control" name="txtPurchasePrice" id="txtPurchasePrice" step="0.01">
                                            </td>
                                            <td>
                                                <input type="number" class="form-control" id="txtQty" name="txtQty" min="0" value="1">
                                            </td>
                                            <td>
                                                <input type="text" class="form-control" id="txtSubTotal" name="txtSubTotal" readonly>
                                            </td>
                                            <td>
                                                <input type="number" class="form-control" id="txtDiscount" name="txtDiscount">
                                            </td>
                                            <td>
                                                <input type="text" class="form-control" id="txtTotal" name="txtTotal" readonly>
                                            </td>
                                            <td>
                                                <button type="button" class="btn btn-primary" id="addRowButton">{{ __('sitelabel.Add') }}</button>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>

                        <!-- Second Table -->
                        <div class="row mt-4">
                            <div class="col-lg-12">
                                <table class="table table-bordered" id="itemsTable">
                                    <thead>
                                        <tr>
                                            <th>{{ __('sitelabel.ItemCode') }}</th>
                                            <th>{{ __('sitelabel.ItemName') }}</th>
                                            <th>{{ __('sitelabel.PurchasePrice') }}</th>
                                            <th>{{ __('sitelabel.Quantity') }}</th>
                                            <th>{{ __('sitelabel.SubTotal') }}</th>
                                            <th>{{ __('sitelabel.DiscountPercent') }}</th>
                                            <th>{{ __('sitelabel.Total') }}</th>
                                            <th>{{ __('sitelabel.Action') }}</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <!-- Rows will be dynamically added via JavaScript -->
                                    </tbody>
                                </table>
                                <table class="table">
                                    <thead>
                                        <tr>
                                            <th>{{ __('sitelabel.SubTotal') }}</th>
                                            <th> </th>
                                            <th> </th>
                                            <th> </th>
                                            <th> </th>
                                            <th class="text-end">
                                                <span id="spSubTotal">{{ $order->OrderTotal }}</span>
                                                <input type="hidden" class="form-control" name="hdMainSubTotal" id="hdMainSubTotal" value="{{ $order->OrderTotal }}">
                                            </th>
                                            <th></th>
                                        </tr>
                                        <tr>
                                            <th>{{ __('sitelabel.Discount') }}</th>
                                            <th> </th>
                                            <th> </th>
                                            <th> </th>
                                            <th> </th>
                                            <th class="text-end">
                                                <span id="spDiscount">{{ $order->DiscountTotal }}</span>
                                                <input type="hidden" class="form-control" name="hdMainDiscount" id="hdMainDiscount" value="{{ $order->DiscountTotal }}">
                                            </th>
                                            <th></th>
                                        </tr>
                                        <tr>
                                            <th>{{ __('sitelabel.NetAmount') }}</th>
                                            <th> </th>
                                            <th> </th>
                                            <th> </th>
                                            <th> </th>
                                            <th class="text-end">
                                                <span id="spTotal">{{ $order->NetAmount }}</span>
                                                <input type="hidden" class="form-control" name="hdMainNetTotal" id="hdMainNetTotal" value="{{ $order->NetAmount }}">
                                            </th>
                                            <th></th>
                                        </tr>
                                    </thead>
                                </table>
                            </div>
                        </div>

                        <!-- Submit -->
                        <div class="row mt-4">
                            <div class="col-lg-12">
                                <button type="submit" class="btn btn-primary" id="saveButton">{{ __('sitelabel.Save') }}</button>
                                <button type="button" class="btn btn-dark" onclick="javascript:window.location='{{ url('/demandnoteorder') }}';">{{ __('sitelabel.Back') }}</button>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
@endsection

@section('script')
    <script>
        $(document).ready(function() {
            var RowId = 1;
            var initialDetails = @json($detailsArray);

            $('#cmbVendor, #cmbPaymentType, #ddlItemName, #ddlItemCode').select2({
                theme: "bootstrap-5",
            });

            // Pre-populate existing items
            function populateExistingItems() {
                initialDetails.forEach(function(detail) {
                    const newRow = `
                        <tr id="row-${RowId}" data-item-code="${detail.itemCode}" data-product-id="${detail.productId}">
                            <td>${detail.itemCode}</td>
                            <td>${detail.productName}</td>
                            <td>
                                <input type="number" class="form-control row-purchasePrice" 
                                    data-row-id="${RowId}" min="0" step="0.01" value="${detail.purchasePrice}">
                            </td>
                            <td>
                                <input type="number" class="form-control row-qty" 
                                    data-row-id="${RowId}" min="1" value="${detail.quantity}">
                            </td>
                            <td>
                                <input type="number" class="form-control row-subTotal" 
                                    data-row-id="${RowId}" value="${detail.subTotal}" readonly>
                            </td>
                            <td>
                                <input type="number" class="form-control row-discount" 
                                    data-row-id="${RowId}" min="0" max="100" value="${detail.discount}">
                            </td>
                            <td>
                                <input type="number" class="form-control row-total" 
                                    data-row-id="${RowId}" value="${detail.total}" readonly>
                            </td>
                            <td>
                                <button type="button" class="btn btn-danger btn-sm remove-row" 
                                    data-row-id="${RowId}">Delete</button>
                            </td>
                        </tr>
                    `;
                    $('#itemsTable tbody').append(newRow);
                    RowId++;
                });
                updateRowsData(); // Calculate totals after loading existing items
            }

            // Sync product dropdowns
            function syncDropdowns() {
                $('#ddlItemCode, #ddlItemName').on('change', function() {
                    const selectedValue = $(this).val();
                    const sourceId = $(this).attr('id');

                    if (sourceId === 'ddlItemCode') {
                        $('#ddlItemName').val(selectedValue).trigger('change.select2', { skipSync: true });
                    } else {
                        $('#ddlItemCode').val(selectedValue).trigger('change.select2', { skipSync: true });
                    }

                    if (selectedValue) {
                        fetchProductDetails(selectedValue);
                    }
                });
            }

            // Fetch product details
            function fetchProductDetails(productId) {
                $.ajax({
                    type: "GET",
                    url: `${window.location.origin}/api/GetProductById/${productId}`,
                    contentType: "application/json;charset=utf-8",
                    success: function(data) {
                        if (data && data.length > 0) {
                            const product = data[0][0];
                            const purchasePrice = product.PurchasePrice || 0;

                            $("#txtPurchasePrice").val(purchasePrice);

                            if (purchasePrice === 0) {
                                $("#txtPurchasePrice").val('').focus();
                            } else {
                                $("#txtPurchasePrice").focus().select();
                            }

                            calculateFirstTableValues();
                        }
                    },
                    error: function(xhr, status, error) {
                        console.error("Error fetching product details:", error);
                        alert("Error fetching product details. Please try again.");
                    }
                });
            }

            // Add new row
            $('#addRowButton').on('click', function() {
                const itemCode = $('#ddlItemCode').val();
                const itemName = $('#ddlItemName option:selected').text();
                const sku = $('#ddlItemCode option:selected').data('sku');
                const quantity = parseFloat($('#txtQty').val()) || 0;
                const purchasePrice = parseFloat($('#txtPurchasePrice').val()) || 0;
                const discount = parseFloat($('#txtDiscount').val()) || 0;
                const subTotal = parseFloat($('#txtSubTotal').val()) || 0;
                const total = parseFloat($('#txtTotal').val()) || 0;

                if (!validateRowAddition(itemCode, quantity, purchasePrice, discount)) {
                    return;
                }

                const newRow = `
                    <tr id="row-${RowId}" data-item-code="${sku}" data-product-id="${itemCode}">
                        <td>${sku}</td>
                        <td>${itemName}</td>
                        <td>
                            <input type="number" class="form-control row-purchasePrice" 
                                data-row-id="${RowId}" min="0" step="0.01" value="${purchasePrice}">
                        </td>
                        <td>
                            <input type="number" class="form-control row-qty" 
                                data-row-id="${RowId}" min="1" value="${quantity}">
                        </td>
                        <td>
                            <input type="number" class="form-control row-subTotal" 
                                data-row-id="${RowId}" value="${subTotal}" readonly>
                        </td>
                        <td>
                            <input type="number" class="form-control row-discount" 
                                data-row-id="${RowId}" min="0" max="100" value="${discount}">
                        </td>
                        <td>
                            <input type="number" class="form-control row-total" 
                                data-row-id="${RowId}" value="${total}" readonly>
                        </td>
                        <td>
                            <button type="button" class="btn btn-danger btn-sm remove-row" 
                                data-row-id="${RowId}">Delete</button>
                        </td>
                    </tr>
                `;

                $('#itemsTable tbody').append(newRow);
                RowId++;
                resetInputs();
                updateRowsData();
            });

            // Remove row
            $(document).on('click', '.remove-row', function() {
                const rowId = $(this).data('row-id');
                $(`#row-${rowId}`).remove();
                updateRowsData();
            });

            // Update rows data for form submission
            function updateRowsData() {
                const rowsData = [];
                let totalSubTotal = 0;
                let totalDiscountAmount = 0;
                let totalNetAmount = 0;

                $('#itemsTable tbody tr').each(function() {
                    const row = $(this);
                    const purchasePrice = parseFloat(row.find('.row-purchasePrice').val()) || 0;
                    const quantity = parseFloat(row.find('.row-qty').val()) || 0;
                    const discount = parseFloat(row.find('.row-discount').val()) || 0;

                    const subTotal = purchasePrice * quantity;
                    const discountAmount = subTotal * (discount / 100);
                    const total = subTotal - discountAmount;

                    totalSubTotal += subTotal;
                    totalDiscountAmount += discountAmount;
                    totalNetAmount += total;

                    rowsData.push({
                        productId: row.data('product-id'),
                        itemCode: row.data('item-code'),
                        itemName: row.find('td:nth-child(2)').text(),
                        purchasePrice: purchasePrice,
                        quantity: quantity,
                        subTotal: subTotal,
                        discount: discount,
                        discountAmount: discountAmount,
                        total: total
                    });
                });

                updateSummaryTable(totalSubTotal, totalDiscountAmount, totalNetAmount);
                $('#rowsData').val(JSON.stringify(rowsData));
            }

            function updateSummaryTable(subTotal, discountAmount, netAmount) {
                $('#spSubTotal').text(subTotal.toFixed(2));
                $('#hdMainSubTotal').val(subTotal.toFixed(2));
                $('#spDiscount').text(discountAmount.toFixed(2));
                $('#hdMainDiscount').val(discountAmount.toFixed(2));
                $('#spTotal').text(netAmount.toFixed(2));
                $('#hdMainNetTotal').val(netAmount.toFixed(2));
            }

            // Calculate values for first table
            function calculateFirstTableValues() {
                const quantity = parseFloat($('#txtQty').val()) || 0;
                const purchasePrice = parseFloat($('#txtPurchasePrice').val()) || 0;
                const discount = parseFloat($('#txtDiscount').val()) || 0;

                const subtotal = quantity * purchasePrice;
                const discountAmount = subtotal * (discount / 100);
                const total = subtotal - discountAmount;

                $('#txtSubTotal').val(subtotal.toFixed(2));
                $('#txtTotal').val(total.toFixed(2));
            }

            // Calculate values for second table rows
            function calculateRowValues(rowId) {
                const row = $(`#row-${rowId}`);
                const quantity = parseFloat(row.find('.row-qty').val()) || 0;
                const purchasePrice = parseFloat(row.find('.row-purchasePrice').val()) || 0;
                const discount = parseFloat(row.find('.row-discount').val()) || 0;

                const subtotal = quantity * purchasePrice;
                const discountAmount = subtotal * (discount / 100);
                const total = subtotal - discountAmount;

                row.find('.row-subTotal').val(subtotal.toFixed(2));
                row.find('.row-total').val(total.toFixed(2));

                updateRowsData();
            }

            // Validation functions
            function validateRowAddition(itemCode, quantity, purchasePrice, discount) {
                if (!itemCode) {
                    alert("Please select a valid product.");
                    return false;
                }
                if (quantity <= 0) {
                    alert("Please enter a valid quantity.");
                    return false;
                }
                if (purchasePrice <= 0) {
                    alert("Please enter a valid price.");
                    return false;
                }
                if (discount < 0 || discount > 100) {
                    alert("Please enter a valid discount percentage (0-100).");
                    return false;
                }
                return true;
            }

            // Reset input fields
            function resetInputs() {
                $('#ddlItemCode, #ddlItemName').val('').trigger('change');
                $('#txtQty').val(1);
                $('#txtPurchasePrice').val('');
                $('#txtDiscount').val('0');
                $('#txtSubTotal').val('');
                $('#txtTotal').val('');
            }

            // Event listeners
            $('#txtQty, #txtPurchasePrice, #txtDiscount').on('input', calculateFirstTableValues);
            $(document).on('input', '.row-qty, .row-purchasePrice, .row-discount', function() {
                const rowId = $(this).data('row-id');
                calculateRowValues(rowId);
            });

            // Initialize
            syncDropdowns();
            populateExistingItems();
        });
    </script>
@endsection