@extends('admin.layouts.master')
@section('content')
    <div class="container-fluid">
        <div class="row">

            <nav class="navbar">
                <form class="justify-content-end">
                    <a href="{{ route('admin.invoice.create', $order->id) }}" class="btn btn-sm btn-warning"
                        type="button">Invoice</a>
                    <a href="{{ route('admin.order.index') }}" class="btn btn-sm bg-purple" type="button">Order List</a>
                </form>
            </nav>
        </div>
        <form id="orderForm" method="POST" action="{{ route('admin.order.update', ['order_id' => $order->id]) }}">
            @csrf
            <div class="row">
                <div class="col-md-8">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="card card-outline card-primary">
                                <div class="card-header">
                                    Edit Order
                                    <div class="card-tools">
                                        <a id="add-product-btn" onclick="addProductRow()"
                                            class="btn btn-primary btn-sm text-white"><i class="bi bi-plus"></i> Add
                                            Product</a>
                                    </div>
                                </div>

                                <div class="card-body p-3">
                                    <table class="table table-sm" id="myTable">
                                        <thead>
                                            <tr class="text-left">
                                                <th style="width: 4%;">{{ __('#') }}</th>
                                                <th style="width: 39%;">{{ __('Product') }}</th>
                                                <th style="width: 6%;">{{ __('Weight') }}</th>
                                                <th style="width: 8%;">{{ __('RRP') }}</th>
                                                <th style="width: 8%;">{{ __('Stock') }}</th>
                                                <th style="width: 10%;">{{ __('Rate') }}</th>
                                                <th style="width: 10%;">{{ __('Quantity') }}</th>
                                                <th style="width: 10%;">{{ __('Amount') }}</th>
                                                <th style="width: 5%;">{{ __('Action') }}</th>
                                            </tr>
                                        </thead>
                                        <tbody id="newlink">
                                            @php
                                                $totalWeight = 0;
                                                $totalRrp = 0;
                                                $totalQuantity = 0;
                                                $totalAmount = 0;
                                            @endphp
                                            @foreach ($order->orderDetails as $index => $orderDetail)
                                                @php
                                                    $totalWeight += $orderDetail->product->weight;
                                                    $totalRrp += $orderDetail->product->rrp;
                                                    $totalQuantity += $orderDetail->quantity;
                                                    $totalAmount += $orderDetail->total_amount;
                                                @endphp
                                                <tr class="product">


                                                    <input type="hidden" class="product-allow-discount"
                                                        value="{{ $orderDetail->product->allow_discount ? 'true' : 'false' }}" />


                                                    <th scope="row" class="product-id">{{ $index + 1 }}</th>
                                                    <td class="text-start">
                                                        <div class="mb-2">
                                                            <input type="text"
                                                                class="form-control form-control-sm bg-light border-0 products"
                                                                id="productName-{{ $index + 1 }}"
                                                                data-product-id="{{ $orderDetail->product_id }}"
                                                                placeholder="Product Name"
                                                                value="{{ $orderDetail->product->name }}" required readonly />
                                                            <input type="hidden"
                                                                class="form-control form-control-sm bg-light border-0 products"
                                                                id="productName-{{ $index + 1 }}"
                                                                data-product-id="{{ $orderDetail->product_id }}"
                                                                placeholder="Product Name"
                                                                value="{{ $orderDetail->product->id }}" required readonly
                                                                name="products_id[]" />
                                                            <div class="invalid-feedback">
                                                                Please enter a product name
                                                            </div>
                                                        </div>
                                                    </td>
                                                    <td scope="row" class="product-id">
                                                        <input type="text"
                                                            class="form-control form-control-sm product-weight border-1"
                                                            name="products_weight[]" id="productWeight-${index}"
                                                            placeholder="0.00" readonly
                                                            value="{{ $orderDetail->product->weight }}" />
                                                    </td>
                                                    <td scope="row" class="product-id">
                                                        <input type="text"
                                                            class="form-control form-control-sm product-rrp border-1"
                                                            name="products_rrp[]" id="productRrp-${index}" placeholder="0.00"
                                                            readonly value="{{ $orderDetail->product->rrp }}" />
                                                    </td>
                                                    <td scope="row" class="product-id">
                                                        <input type="number"
                                                            class="form-control form-control-sm product-stock border-1"
                                                            name="products_stock[]" id="productStock-${index}" step="0.01"
                                                            placeholder="0.00" required readonly
                                                            value="{{ $orderDetail->product->quantity }}" />
                                                    </td>
                                                    <td>
                                                        <input type="number"
                                                            class="form-control form-control-sm product-price  border-1"
                                                            id="productRate-{{ $index + 1 }}" step="0.01" placeholder="0.00"
                                                            value="{{ $orderDetail->price }}" required
                                                            name="products_amount[]" />
                                                        <div class="invalid-feedback">
                                                            Please enter a rate
                                                        </div>
                                                    </td>
                                                    <td>
                                                        <input type="number"
                                                            class="form-control form-control-sm product-quantity  border-1"
                                                            id="productQuantity-{{ $index + 1 }}" placeholder="0.00"
                                                            value="{{ $orderDetail->quantity }}" required
                                                            name="products_quantity[]" min="1"
                                                            max="{{ $orderDetail->product->quantity + $orderDetail->quantity }}" />
                                                        <div class="invalid-feedback">
                                                            Please enter a quantity
                                                        </div>
                                                    </td>
                                                    <td class="text-end">
                                                        <div>
                                                            <input type="text"
                                                                class="form-control form-control-sm border-1 product-line-price"
                                                                id="productPrice-{{ $index + 1 }}" placeholder="$0.00"
                                                                value="{{ $orderDetail->total_amount }}" readonly />
                                                        </div>
                                                    </td>
                                                    <td class="text-center">
                                                        <div>
                                                            <a href="#" data-orderDetail-id="{{ $orderDetail->id }}"
                                                                id="deleteProduct" class="text-decoration-none text-inherit">
                                                                <i class="bi bi-trash text-danger"></i>
                                                            </a>
                                                        </div>
                                                    </td>
                                                </tr>
                                            @endforeach



                                        </tbody>
                                        <tr class="totals-row">
                                            <th scope="row"></th>
                                            <td class="text-end">
                                                <span class="badge badge-danger"> totals </span>
                                            </td>
                                            <td class="weight-total">
                                                <input type="text"
                                                    class="form-control form-control-sm border-1 total-weight"
                                                    value="{{ number_format($totalWeight, 2) }}" readonly />
                                            </td>
                                            <td class="rrp-total">
                                                <input type="text" class="form-control form-control-sm border-1 total-rrp"
                                                    value="{{ number_format($totalRrp, 2) }}" readonly />
                                            </td>
                                            <td><!-- Empty cell --></td>
                                            <td><!-- Empty cell --></td>
                                            <td class="quantity-total">
                                                <input type="text"
                                                    class="form-control form-control-sm border-1 total-quantity"
                                                    value="{{ number_format($totalQuantity, 2) }}" readonly />
                                            </td>
                                            <td class="amount-total">
                                                <input type="text"
                                                    class="form-control form-control-sm border-1 total-amount"
                                                    value="{{ number_format($totalAmount, 2) }}" readonly />
                                            </td>
                                            <td></td>
                                        </tr>
                                    </table>
                                </div>

                            </div>
                        </div>


                        <div class="col-md-12">
                            <div class="card card-info">
                                <div class="card-header">
                                    Estimated Shipping Charges
                                </div>
                                <div class="card-body">
                                    <div class="row">
                                        <table class="table table-sm table-condensed table-installments table-hover">
                                            <thead id="couries">
                                                <tr data-courier='@json($couriers)'>
                                                    <th>#</th>
                                                    <th>Company</th>
                                                    <th>Box Size</th>
                                                    <th>Total Boxs</th>
                                                    <th>Local Charges</th>
                                                    <th>Int charges</th>
                                                </tr>
                                            </thead>
                                            <tbody id="courierCalculations">
                                            </tbody>
                                        </table>
                                    </div>
                                </div>

                            </div>
                        </div>



                        <div class="col-md-6">
                            <div class="card card-info">
                                <div class="card-header">
                                    Billing Address
                                </div>

                                <div class="card-body p-3">
                                    <div class="row">
                                        <div class="col-md-12">

                                            <div class="border-bottom py-2">
                                                <b>{{ $order->ba_first_name }} {{ $order->ba_last_name }}</b>
                                            </div>

                                            <div class="border-bottom py-2">
                                                <b>{{ $order->ba_line_1 }}</b>
                                            </div>

                                            <div class="border-bottom py-2">
                                                <b>{{ $order->ba_line_2 }}</b>
                                            </div>

                                            <div class="border-bottom py-2">
                                                <b>{{ $order->ba_city }} - {{ $order->ba_post_code }}</b>
                                            </div>

                                            <div class="border-bottom py-2">
                                                <b>{{ $order->ba_phone }}</b>
                                            </div>

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

                            </div>
                        </div>
                        @if ($order->delivery_method == 'delivery')
                            <div class="col-md-6">
                                <div class="card card-danger">
                                    <div class="card-header">
                                        Shipping Address
                                    </div>

                                    <div class="card-body p-3">
                                        <div class="row">
                                            <div class="col-md-12">
                                                <div class="border-bottom py-2">
                                                    <b>{{ $order->sa_first_name }} {{ $order->sa_last_name }}</b>
                                                </div>

                                                <div class="border-bottom py-2">
                                                    <b>{{ $order->sa_line_1 }}</b>
                                                </div>

                                                <div class="border-bottom py-2">
                                                    <b>{{ $order->sa_line_2 }}</b>
                                                </div>

                                                <div class="border-bottom py-2">
                                                    <b>{{ $order->sa_city }} - {{ $order->sa_post_code }}</b>
                                                </div>

                                                <div class="border-bottom py-2">
                                                    <b>{{ $order->sa_phone }}</b>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        @else
                            <div class="col-md-6">
                                <div class="card card-warning">
                                    <div class="card-header">
                                        Pickup Address
                                    </div>

                                    <div class="card-body p-3">
                                        <div class="row">
                                            <div class="col-md-12">
                                                <div class="border-bottom py-2">
                                                    <b>{{ $order->pickupAddress->name }}</b>
                                                </div>

                                                <div class="border-bottom py-2">
                                                    <b>{{ $order->pickupAddress->phone }}</b>
                                                </div>

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

                                </div>
                            </div>
                        @endif


                        <div class="col-md-12">
                            <div class="card card-danger card-outline">
                                <div class="card-header">
                                    Order Logs
                                </div>
                                <div class="card-body">
                                    <div class="row">
                                        <table
                                            class="table table-sm table-striped table-condensed table-installments table-hover">
                                            <thead>
                                                <tr>
                                                    <th>#</th>
                                                    <th>Date & Time</th>
                                                    <th>Action By</th>
                                                    <th>Action</th>
                                                    <th>Description</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach ($order_logs as $id => $log)
                                                    <tr>
                                                        <td>{{ ++$id }}</td>
                                                        <td>{{ \Carbon\Carbon::parse($log->created_at)->format('j-M-Y h:i A') }}
                                                        </td>
                                                        <td>{{ $log->actionBy->first_name ?? '' }}
                                                            {{ $log->actionBy->last_name ?? '' }}
                                                        </td>
                                                        <td>{{ $log->action }}</td>
                                                        <td>{{ $log->description }}</td>
                                                    </tr>
                                                @endforeach
                                            </tbody>
                                        </table>

                                    </div>
                                </div>

                            </div>
                        </div>

                    </div>

                </div>
                <div class="col-md-4">

                    <div class="card card-primary">
                        <div class="card-header">
                            Total Info
                        </div>

                        <div class="card-body p-2">
                            <div class="row">
                                <div class="col-6">
                                    <label for="discountable-subtotal">Discountable Subtotal</label>
                                    <input id="discountable-subtotal" name="discountable_subtotal"
                                        value="{{ $order->discountable_subtotal }}" type="text"
                                        class="form-control form-control-sm" readonly>
                                </div>
                                <div class="col-6">
                                    <label for="non-discountable-subtotal">Non-Discountable Subtotal</label>
                                    <input id="non-discountable-subtotal" name="non_discountable_subtotal"
                                        value="{{ $order->non_discountable_subtotal }}" type="text"
                                        class="form-control form-control-sm" readonly>
                                </div>
                                <div class="col-6 mt-2">
                                    <label for="cart-total-discount">Total Discount Applied</label>
                                    <input id="cart-total-discount" type="text" class="form-control form-control-sm"
                                        readonly>
                                </div>
                                <div class="col-6 mt-2">
                                    <label for="discountable-discount">Discount (%)</label>
                                    <input id="discountable-discount" name="discount_percent"
                                        value="{{ $order->discount_percentage }}" type="number" step="0.01" max="100"
                                        class="form-control form-control-sm" value="0" min="0">
                                </div>
                                {{-- <div class="col-6 mt-2">
                                    <label for="non-discountable-discount">Discount Amount (Fixed)</label>
                                    <input id="non-discountable-discount" type="number" step="0.01"
                                        class="form-control form-control-sm" value="0" min="0">
                                </div> --}}
                                <div class="col-12 mt-2">
                                    <label for="cart-discount">Discount</label>
                                    <input id="cart-discount" type="number" step="any" placeholder="Discount"
                                        name="discount" class="form-control form-control-sm" value="{{ $order->discount }}">
                                </div>
                                <div class="col-12 mt-2">
                                    <label for="cart-subtotal">Total Subtotal</label>
                                    <input id="cart-subtotal" type="text" name="sub_total"
                                        class="form-control form-control-sm" readonly>
                                </div>


                                {{-- <div class="col-6">
                                    <label for="sub_total">Sub Total</label>
                                    <input id="cart-subtotal" type="text" placeholder="Sub Total" name="sub_total"
                                        class="form-control form-control-sm" value="{{ $order->total_amount }}" readonly>
                                </div> --}}

                                <div class="col-12 mt-2">
                                    <label for="cart-shipping">Shipping Charges</label>
                                    <input id="cart-shipping" type="number" step="any" placeholder="Shipping Charges"
                                        name="shipping_charges" class="form-control form-control-sm"
                                        value="{{ $order->shipping_charges ?? 0 }}">
                                </div>
                                <div class="col-12 mt-2">
                                    <label for="cart-vat-tax">VAT Tax ({{ $vat_tax_percentage }}%)</label>
                                    <input id="cart-vat-tax" type="text" placeholder="VAT Tax ({{ $vat_tax_percentage }}%)"
                                        name="vat_tax_amount" class="form-control form-control-sm"
                                        value="{{ $order->vat_tax_amount }}" readonly>
                                </div>
                                <div class="col-12 mt-3">
                                    <div class="form-check form-switch form-switch-lg p-0" dir="ltr">
                                        <label for="is_vat_tax" class="m-0">Include VAT Tax</label>
                                        <input type="checkbox" class="ms-3 form-check-input" value="1" id="is_vat_tax"
                                            name="is_vat_tax" {{ $order->vat_tax_amount > 0 ? 'checked' : '' }}>
                                    </div>
                                </div>
                                <div class="col-12 mt-2">
                                    <label for="cart-total">Total Amount</label>
                                    <input id="cart-total" type="text" placeholder="Total Amount" name="grand_total"
                                        class="form-control form-control-sm" value="{{ $order->grand_total }}" readonly>
                                </div>
                                <div class="col-12 mt-2">
                                    <button class="btn btn-sm btn-primary float-right">Update</button>
                                </div>
                            </div>
                        </div>


                    </div>

                    <div class="card card-success card-outline">
                        <div class="card-header">
                            <h3 class="card-title">Customer Info</h3>
                        </div>
                        <div class="card-body box-profile">
                            <div class="text-center">
                                <img class="profile-user-img img-fluid img-circle"
                                    src="{{ asset(optional($order->user)->image ?? 'default-user.png') }}"
                                    alt="User profile picture" />

                            </div>

                            <h3 class="profile-username text-center"><span
                                    class="badge bg-success">{{ $order->user->first_name ?? '' }}
                                    {{ $order->user->last_name ?? '' }}</span></h3>

                            <ul class="list-group list-group-unbordered">
                                <li class="list-group-item">
                                    <b>Status</b>
                                    <a class="float-right">
                                        @if ($order->user->status == 'active')
                                            <span class="badge bg-success">Active</span>
                                        @elseif($order->user->status == 'pending')
                                            <span class="badge bg-warning">Pending</span>
                                        @else
                                            <span class="badge bg-danger">Blocked</span>
                                        @endif
                                    </a>
                                </li>
                                <li class="list-group-item">
                                    <b>Company</b> <a class="float-right">{{ $order->user->company ?? '' }}</a>
                                </li>
                                <li class="list-group-item">
                                    <b>Contact No</b> <a class="float-right">{{ $order->user->phone ?? '' }}</a>
                                </li>
                                <li class="list-group-item">
                                    <b>Email</b> <a class="float-right" style="text-transform: lowercase;"><span
                                            class="badge bg-primary">{{ $order->user->email }}</span></a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <!--end col-->
            </div>
        </form>

    </div>
@endsection


@section('js')
    <script>

        function updateTotals() {
            let totalWeight = 0;
            let totalRrp = 0;
            let totalQuantity = 0;
            let totalAmount = 0;

            $('.product').each(function () {
                const $row = $(this);
                const quantity = parseFloat($row.find('.product-quantity').val()) || 0;
                const price = parseFloat($row.find('.product-price').val()) || 0;
                const weight = parseFloat($row.find('.product-weight').val()) || 0;
                const rrp = parseFloat($row.find('.product-rrp').val()) || 0;

                // Calculate line total
                const lineTotal = price * quantity;
                $row.find('.product-line-price').val(lineTotal.toFixed(2));

                // Update totals
                totalWeight += weight * quantity;
                totalRrp += rrp;
                totalQuantity += quantity;
                totalAmount += lineTotal;
            });

            // Update total fields
            $('.total-weight').val(totalWeight.toFixed(2));
            $('.total-rrp').val(totalRrp.toFixed(2));
            $('.total-quantity').val(totalQuantity.toFixed(2));
            $('.total-amount').val(totalAmount.toFixed(2));

            // Update courier calculations
            calculateCourierCosts(totalWeight);
        }

        function calculateCourierCosts(totalWeight) {
            const $tableBody = $('#courierCalculations');
            $tableBody.empty();

            if (!totalWeight || totalWeight <= 0) {
                $tableBody.append('<tr><td colspan="6" class="text-center">Please add products to calculate shipping</td></tr>');
                return;
            }
            const couriers = getCourierData();
            console.log("Processed couriers:", couriers);

            if (!couriers || couriers.length === 0) {
                $tableBody.append('<tr><td colspan="6" class="text-center text-danger">No shipping options available</td></tr>');
                return;
            }

            couriers.forEach((courier, index) => {
                const boxSize = parseFloat(courier.box_size) || 1;
                const localPrice = parseFloat(courier.local_price) || 0;
                const intPrice = parseFloat(courier.international_price) || 0;

                // Calculate boxes needed
                const totalBoxes = Math.ceil(totalWeight / boxSize);
                const lastBoxWeight = totalWeight % boxSize || boxSize;

                // Create box description
                let boxDescription = `${totalBoxes} box${totalBoxes !== 1 ? 'es' : ''}`;
                // if (totalBoxes > 1) {
                //     boxDescription += `F`;
                // } else {
                //     boxDescription += ` (${totalWeight.toFixed(2)} kg)`;
                // }

                // Calculate charges
                const localCharges = (totalBoxes * localPrice).toFixed(2);
                const intCharges = (totalBoxes * intPrice).toFixed(2);

                // Create table row
                const row = `
                                <tr data-courier-id="${courier.id}">
                                    <td>${index + 1}</td>
                                    <td>${courier.name || 'Unknown Carrier'}</td>
                                    <td>${boxSize.toFixed(2)} g</td>
                                    <td>${boxDescription}</td>
                                    <td>${totalBoxes} × ${localPrice.toFixed(2)} = ${localCharges}</td>
                                    <td>${totalBoxes} × ${intPrice.toFixed(2)} = ${intCharges} </td>
                                </tr>
                            `;

                $tableBody.append(row);
            });
        }
        function getCourierData() {
            try {

                const courierRow = $('#couries tr[data-courier]');


                const rawData = courierRow.data('courier');
                console.log("Raw courier data:", rawData);
                if (typeof rawData === 'object') {
                    return rawData;
                }
                return JSON.parse(rawData);
            } catch (error) {
                console.error("Error parsing courier data:", error);
                return [];
            }
        }
        const input = document.getElementsByClassName('product-stock');
        const min = parseFloat(input.min);
        const max = parseFloat(input.max);
        const value = parseFloat(input.value);

        if (value < min) {
            input.value = min;
        } else if (value > max) {
            input.value = max;
        }

        const vatTaxCheckbox = document.getElementById('is_vat_tax');
        const vatTaxInput = document.getElementById('cart-vat-tax');
        const vatTaxPercentage = "{{ $vat_tax_percentage }}";
        function calculateTotal() {

            let discountableSubtotal = 0;
            let nonDiscountableSubtotal = 0;
            $('.product').each(function () {
                const price = parseFloat($(this).find('.product-price').val()) || 0;
                const quantity = parseFloat($(this).find('.product-quantity').val()) || 0;
                const allowDiscount = $(this).find('.product-allow-discount').val();
                const lineTotal = price * quantity;
                $(this).find('.product-line-price').val(lineTotal.toFixed(2));

                if (allowDiscount==1) {
                    discountableSubtotal += lineTotal;
                } else {
                    nonDiscountableSubtotal += lineTotal;
                }
            });

            $('#discountable-discount').prop('disabled', discountableSubtotal <= 0);
            $('#non-discountable-discount').prop('disabled', nonDiscountableSubtotal <= 0);
            if (discountableSubtotal <= 0) {
                $('#discountable-discount').val(0);
            }
            // if (nonDiscountableSubtotal <= 0) {
            //     $('#non-discountable-discount').val(0);
            // }

            // Get discount values
            const discountPercent = parseFloat($('#discountable-discount').val()) || 0;
            const fixedDiscount = parseFloat($('#cart-discount').val()) || 0;
            // const fixedDiscount = parseFloat($('#non-discountable-discount').val()) || 0;
            // Calculate discount amounts
            const discountableDiscount = discountableSubtotal * (discountPercent / 100);
            const totalDiscount = discountableDiscount + fixedDiscount;

            // Apply discounts (ensure they don't exceed subtotals)
            const discountableAfter = Math.max(0, discountableSubtotal - discountableDiscount);

            const totalSubtotal = discountableAfter + nonDiscountableSubtotal - fixedDiscount;
            $('#discountable-subtotal').val(discountableSubtotal.toFixed(2));
            $('#non-discountable-subtotal').val(nonDiscountableSubtotal.toFixed(2));
            $('#cart-subtotal').val(totalSubtotal.toFixed(2));
            $('#cart-total-discount').val(totalDiscount.toFixed(2));

            const shipping = parseFloat($('#cart-shipping').val()) || 0;
            const vatAmount = vatTaxCheckbox.checked ?
                (totalSubtotal + shipping) * vatTaxPercentage / 100 : 0;
            const grandTotal = totalSubtotal + shipping + vatAmount;
            $('#cart-total').val(grandTotal.toFixed(2));
            $('#cart-vat-tax').val(vatAmount.toFixed(2));
        }

        // Event Listeners
        $(document).ready(function () {
            calculateTotal();

            $(document).on('input', '.product-price, .product-quantity, #discountable-discount, #cart-discount, #cart-shipping', calculateTotal);
            document.getElementById('is_vat_tax').addEventListener('change', calculateTotal);
        });

        $('.select2-selection__rendered').css('line-height', '1.5');
        $('.select2-selection').css('height', 'calc(1.5em + .5rem + 2px)');

        let products = @json($products);
        let vat_tax_percentage = '{{ $order->vat_tax_percentage }}'

        function addProductRow() {
            const tableBody = document.getElementById('newlink');
            const index = tableBody.children.length + 1;
            const newRow = document.createElement('tr');
            newRow.classList.add('product');

            let selectedProductIds = [];
            $('.products').each(function () {
                if ($(this).data('product-id')) {
                    selectedProductIds.push(parseInt($(this).data('product-id')));
                } else {
                    const val = $(this).val();
                    if (val) selectedProductIds.push(parseInt(val));
                }
            });

            let productsToAppend = products.filter(product => !selectedProductIds.includes(product.id));

            let optionsHtml = '<option value="">Select Product</option>';
            productsToAppend.forEach(product => {
                optionsHtml += `<option value="${product.id}" data-weight="${product.weight}" data-rrp="${product.rrp}" data-stock="${product.quantity}" data-allow-discount="${product.allow_discount}">${product.name}</option>`;
            });

            newRow.innerHTML = `
                        <th scope="row" class="product-id">${index}</th>
                        <td class="text-start">
                            <div class="input-light">
                                <select class="form-control form-control-sm bg-light border-0 products" name="product_id[]" id="choices-product-${index}" required>
                                    ${optionsHtml}
                                </select>
                            </div>
                        </td>
                        <td>
                            <input type="text" class="form-control-sm form-control product-weight border-1" name="product_weight[]" id="productWeight-${index}" placeholder="0.00" readonly />
                        </td>
                        <td>
                            <input type="text" class="form-control-sm form-control product-rrp border-1" name="product_rrp[]" id="productRrp-${index}" placeholder="0.00" readonly />
                             <input type="hidden" class="product-allow-discount" id="productAllowDiscount-${index}" name="product_allow_discount[]"  />
                        </td>
                        <td>
                            <input type="number" class="form-control-sm form-control product-stock border-1" name="product_stock[]" id="productStock-${index}" step="0.01" placeholder="0.00" readonly />
                        </td>
                        <td>
                            <input type="number" class="form-control-sm form-control product-price border-1" name="product_price[]" id="productRate-${index}" step="0.01" placeholder="0.00" required />
                            <div class="invalid-feedback">Please enter a rate</div>
                        </td>
                        <td>
                            <input type="number" class="form-control-sm form-control product-quantity border-1" name="product_quantity[]" id="productQuantity-${index}" placeholder="0.00" required min="1" />
                            <div class="invalid-feedback">Please enter a quantity</div>
                        </td>
                        <td class="text-end">
                            <input type="text" class="form-control-sm form-control border-1 product-line-price" name="product_total_amount[]" id="productPrice-${index}" placeholder="$0.00" readonly />
                        </td>
                        <td class="text-center">
                            <a class="btn btn-sm btn-danger" onclick="removeProductRow(this)"><i class="bi bi-x-circle text-white"></i></a>
                        </td>
                    `;

            tableBody.appendChild(newRow);

            // Initialize Select2 for the new select element
            $('#choices-product-' + index).select2();

            // Add event listener for product selection change
            $('#choices-product-' + index).on('change', function () {
                const selectedOption = $(this).find('option:selected');
                const weight = selectedOption.data('weight') || 0;
                const rrp = selectedOption.data('rrp') || 0;
                const stock = selectedOption.data('stock') || 0;
                const allow_discount = selectedOption.data('allow-discount') || 0;
                $(this).closest('tr').find('.product-allow-discount').val(allow_discount);
                $(this).closest('tr').find('.product-weight').val(weight);
                $(this).closest('tr').find('.product-rrp').val(rrp);
                $(this).closest('tr').find('.product-stock').val(stock);
                $(this).closest('tr').find('.product-quantity').attr('max', stock);
            });
        }

        function removeProductRow(button) {
            const row = button.closest('tr');
            row.parentNode.removeChild(row);
            const rows = document.querySelectorAll('#newlink .product');
            rows.forEach((row, index) => {
                row.querySelector('.product-id').textContent = index + 1;
            });
            calculateTotal();
            updateTotals();
        }

        $(document).delegate('.products', 'change', function () {
            const product_id = $(this).val();
            const productStock = $(this).closest('tr').find('.product-stock');
            const productRate = $(this).closest('tr').find('.product-price');
            const productQuantity = $(this).closest('tr').find('.product-quantity');
            const productPrice = $(this).closest('tr').find('.product-line-price');
            const productAllowDiscount = $(this).closest('tr').find('.product-allow-discount');

            let product = products.find(product => product.id == product_id);
            if (product) {
                productStock.val(product.quantity);
                productRate.val(product.unit_price);
                let maxQuantity = product.quantity + productQuantity;
                productQuantity.val(1).attr({
                    "min": 1,
                    "max": maxQuantity
                });
                productPrice.val(product.unit_price);

                calculateTotal();
            }
        });

        $(document).ready(function () {
            $(document).on('click', '#deleteProduct', function (e) {
                e.preventDefault();

                let row = $(this).closest('tr');
                let orderDetailId = $(this).data('orderdetail-id');

                Swal.fire({
                    title: "Are you sure?",
                    text: "This product will be removed from the order.",
                    icon: "warning",
                    showCancelButton: true,
                    confirmButtonColor: "#d33",
                    cancelButtonColor: "#3085d6",
                    confirmButtonText: "Yes, delete it!"
                }).then((result) => {
                    if (result.isConfirmed) {
                        $.ajax({
                            url: "{{ url('admin/orders/delete-order-item') }}/" +
                                orderDetailId,
                            method: "DELETE",
                            headers: {
                                "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content")
                            },
                            success: function (response) {
                                row.remove();
                                MyToast.fire({
                                    icon: response.alert,
                                    title: response.message,
                                });
                                calculateTotal();
                            },
                            error: function (xhr) {
                                let errorMessage = "Something went wrong.";
                                if (xhr.responseJSON && xhr.responseJSON.message) {
                                    errorMessage = xhr.responseJSON.message;
                                }
                                Swal.fire({
                                    title: "Error",
                                    text: errorMessage,
                                    icon: "error"
                                });
                            }
                        });
                    }
                });
            });
        });
        $(document).ready(function () {
            $('#orderForm').submit(function (e) {
                let isValid = true;
                let errors = [];

                // if (!$('select[name="products_id[]"]').val()) {
                //     errors.push('Please select at least one product.');
                //     isValid = false;
                // }

                const subTotal = parseFloat($('input[name="sub_total"]').val()) || 0;
                const grandTotal = parseFloat($('input[name="grand_total"]').val()) || 0;
                const discount = parseFloat($('input[name="discount"]').val()) || 0;
                const shippingCharges = parseFloat($('input[name="shipping_charges"]').val()) || 0;
                const vatTaxAmount = parseFloat($('input[name="vat_tax_amount"]').val()) || 0;

                if (subTotal < 0) {
                    errors.push('Subtotal must be greater than 0.');
                    isValid = false;
                }
                if (grandTotal < 0) {
                    errors.push('Grand total must be greater than 0.');
                    isValid = false;
                }
                if (discount < 0) {
                    errors.push('Discount must be at least 0.');
                    isValid = false;
                }
                if (shippingCharges < 0) {
                    errors.push('Shipping charges must be at least 0.');
                    isValid = false;
                }
                if (vatTaxAmount < 0) {
                    errors.push('VAT tax amount must be at least 0.');
                    isValid = false;
                }

                $('input[name="product_stock[]"]').each(function () {
                    if (parseFloat($(this).val()) <= 0) {
                        errors.push('Product stock must be greater than 0.');
                        isValid = false;
                    }
                });

                $('.product-quantity').each(function () {
                    if (parseFloat($(this).val()) <= 0) {
                        errors.push('Product quantity must be greater than 0.');
                        isValid = false;
                    }
                });

                $('.products-quantity').each(function () {
                    if (parseFloat($(this).val()) <= 0) {
                        errors.push('Product quantity must be greater than 0.');
                        isValid = false;
                    }
                });

                $('.product-total-amount').each(function () {
                    if (parseFloat($(this).val()) < 0) {
                        errors.push('Product total amount must be greater than 0.');
                        isValid = false;
                    }
                });

                $('.product-price').each(function () {
                    if (parseFloat($(this).val()) < 0) {
                        errors.push('Product price must be greater than 0.');
                        isValid = false;
                    }
                });

                $('.products-price').each(function () {
                    if (parseFloat($(this).val()) <= 0) {
                        errors.push('Product price must be greater than 0.');
                        isValid = false;
                    }
                });

                if (!isValid) {
                    e.preventDefault();
                    Swal.fire({
                        icon: 'error',
                        title: 'Validation Error',
                        html: errors.join('<br>')
                    });
                }
            });
        });

        $(document).ready(function () {
            // Get courier data from the table row


            // Product totals calculation


            // Courier calculations

            updateTotals();

            // Event handlers
            $(document).on('change', '.product-quantity, .product-price', updateTotals);

            $(document).on('click', '#deleteProduct', function (e) {
                e.preventDefault();
                $(this).closest('tr').remove();
                updateTotals();
            });

            // Courier selection handler
            $(document).on('click', '#courierCalculations tr', function () {
                $('#courierCalculations tr').removeClass('selected');
                $(this).addClass('selected');

                // You can now access the selected courier ID:
                const selectedCourierId = $(this).data('courier-id');
                console.log("Selected courier ID:", selectedCourierId);
            });
        });
    </script>
@endsection