@extends('admin.layouts.master')
@section('content')
    <div class="container-fluid">
        <div class="row">
            <nav class="navbar">
                <form class="justify-content-end">
                    <a href="#" class="btn btn-sm bg-purple" type="button">Order List</a>
                </form>
            </nav>
        </div>
        <form id="orderForm" method="POST" action="{{ route('admin.order.store') }}">
            @csrf
            <div class="row">


                    <div class="col-12">
                    <div class="card card-primary card-outline mb-2">
                        <div class="card-header">
                            Customer Info
                            <div class="card-tools">

                            </div>
                        </div>
                        <div class="card-body px-3 py-2">
                            <div class="row">
                                <div class="col-md-3">
                                    <label for="company_id">Comany <span class="text-danger">*</span></label>
                                    <select name="company_id" id="company_id" class="form-control form-control-sm">
                                        @foreach ($companies as $company)
                                            <option value="{{ $company->id }}">{{ $company->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-md-3">
                                    <label for="customer_id">Customer <span class="text-danger">*</span></label>
                                    <select name="customer_id" id="customer_id"
                                        class="form-control form-control-sm select2">
                                        @foreach ($customers as $customer)
                                            <option value="{{ $customer->id }}">{{ $customer->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-md-3">
                                    <label for="delivery_method">Delivery Method <span class="text-danger">*</span></label>
                                    <select name="delivery_method" id="delivery_method"
                                        class="form-control form-control-sm">
                                        <option value="delivery" selected>Delivery</option>
                                        <option value="pick_up">Pickup</option>
                                    </select>
                                </div>
                                <div class="col-md-3">
                                    <label for="payment_method">Payment Method <span class="text-danger">*</span></label>
                                    <select name="payment_method" id="payment_method"
                                        class="form-control form-control-sm">
                                        <option value="stripe" selected>Payment Before Delivery</option>
                                        <option value="cash_on_delivery">Payment After Delivery</option>
                                    </select>
                                </div>
                                <div class="col-12">
                                    <label for="billing_address_id">Billing Address <span
                                            class="text-danger">*</span></label>
                                    <select name="billing_address_id" id="billing_address_id"
                                        class="form-control form-control-sm" required>

                                    </select>
                                </div>
                                <div class="col-12" id="sa">
                                    <label for="shipping_address_id">Shipping Address <span
                                            class="text-danger">*</span></label>
                                    <select name="shipping_address_id" id="shipping_address_id"
                                        class="form-control form-control-sm" required>

                                    </select>
                                </div>
                                <div class="col-12 d-none" id="pa">
                                    <label for="pickup_address_id">Pickup Address <span
                                            class="text-danger">*</span></label>
                                    <select name="pickup_address_id" id="pickup_address_id"
                                        class="form-control form-control-sm">
                                        @foreach ($pickup_addresses as $pickup_address)
                                            <option value="{{ $pickup_address->id }}">{{ $pickup_address->name ?? null }}
                                                --- {{ $pickup_address->phone ?? null }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <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">
                                        </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"
                                                    readonly />
                                            </td>
                                            <td class="rrp-total">
                                                <input type="text"
                                                    class="form-control form-control-sm border-1 total-rrp"
                                                     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"
                                                     readonly />
                                            </td>
                                            <td class="amount-total">
                                                <input type="text"
                                                    class="form-control form-control-sm border-1 total-amount"
                                                     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>
                </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" 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" 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" type="number" step="0.01" max="100" 
                                           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">
                                </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-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">
                                </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" 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" 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" readonly>
                                </div>
                                <div class="col-12 mt-2">
                                    <button type="submit" class="btn btn-sm btn-primary float-right">Update</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
@endsection

@section('js')
<script>
    // Global variables
    const vatTaxCheckbox = document.getElementById('is_vat_tax');
    const vatTaxPercentage = {{ $vat_tax_percentage }};
    let products = @json($products);

    // Initialize when document is ready
    $(document).ready(function() {
        
        
        // Initialize event listeners
        initEventListeners();
    });

    function initEventListeners() {
       
        $(document).on('change', '.products', handleProductChange);
        
        // Quantity/price input changes
        $(document).on('input', '.product-quantity, .product-price', function() {
            calculateLineTotal($(this).closest('tr'));
            updateTotals();
        });
        
        // Discount/shipping changes
        $(document).on('input', '#discountable-discount, #cart-discount, #cart-shipping', updateTotals);
        
        // VAT checkbox change
        $(document).on('change', '#is_vat_tax', updateTotals);
    }

    // Add new product row
    function addProductRow() {


     
        const tableBody = $('#newlink');
        const index = tableBody.children().length + 1;
        
        // Get already selected product IDs
        // let selectedProductIds = [];
        // $('.products').each(function() {
        //     const val = $(this).val();
        //     if (val) selectedProductIds.push(parseInt(val));
        // });

        // Filter available products
        // let availableProducts = products.filter(product => !selectedProductIds.includes(product.id));

        // Build options HTML
        let optionsHtml = '<option value="">Select Product</option>';
        products.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}"
                    data-unit-price="${product.unit_price}">
                    ${product.name}
                </option>`;
        });

        const newRow = `
            <tr class="product">
                <th scope="row" class="product-id">${index}</th>
                <td class="text-start">
                    <select class="form-control form-control-sm products" name="product_id[]" id="choices-product-${index}" required>
                        ${optionsHtml}
                    </select>
                </td>
                <td>
                    <input type="text" class="form-control form-control-sm product-weight" name="product_weight[]" readonly />

                    <input type="hidden" class="form-control form-control-sm allow-discount" name="allow_discount[]" readonly />

                </td>
                <td>
                    <input type="text" class="form-control form-control-sm product-rrp" name="product_rrp[]" readonly />
                </td>
                <td>
                    <input type="number" class="form-control form-control-sm product-stock" name="product_stock[]" readonly />
                </td>
                <td>
                    <input type="number" class="form-control form-control-sm product-price" name="product_price[]" step="0.01" required />
                </td>
                <td>
                    <input type="number" class="form-control form-control-sm product-quantity" name="product_quantity[]" min="1" required />
                </td>
                <td>
                    <input type="text" class="form-control form-control-sm product-line-price" name="product_total_amount[]" readonly />
                </td>
                <td class="text-center">
                    <button type="button" class="btn btn-sm btn-danger" onclick="removeProductRow(this)">
                        <i class="bi bi-x-circle text-white"></i>
                    </button>
                </td>
            </tr>
        `;

        tableBody.append(newRow);
         $('#choices-product-' + index).select2();
    }

    // Handle product selection change
    function handleProductChange() {
        const $row = $(this).closest('tr');
        const productId = $(this).val();
        const product = products.find(p => p.id == productId);

        if (product) {
            // Update product details
            $row.find('.product-weight').val(product.weight);
            $row.find('.product-rrp').val(product.rrp);
            $row.find('.product-stock').val(product.quantity);
            $row.find('.product-price').val(product.unit_price);
            $row.find('.allow-discount').val(product.allow_discount);
            $row.find('.product-quantity').val(1).attr('max', product.quantity);
            
            // Store allow_discount as data attribute
            // $row.data('allow-discount', product.allow_discount);
            
            // Calculate initial line total
            calculateLineTotal($row);
            
            // Update all totals
            updateTotals();
        }
    }

    // Calculate line total for a single row
    function calculateLineTotal($row) {
        const price = parseFloat($row.find('.product-price').val()) || 0;
        const quantity = parseFloat($row.find('.product-quantity').val()) || 0;
        const lineTotal = price * quantity;
        $row.find('.product-line-price').val(lineTotal.toFixed(2));
    }

    // Remove product row
    function removeProductRow(button) {
        const $row = $(button).closest('tr');
        $row.remove();
        
        // Update row numbers
        $('#newlink tr').each(function(index) {
            $(this).find('.product-id').text(index + 1);
        });
        
        updateTotals();
    }

    // Update all totals
    function updateTotals() {
        let totalWeight = 0;
        let totalRrp = 0;
        let totalQuantity = 0;
        let totalAmount = 0;
        let discountableSubtotal = 0;
        let nonDiscountableSubtotal = 0;

        // Calculate product totals
        $('.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;
            const allowDiscount = $row.find('.allow-discount').val();
            const lineTotal = price * quantity;

          
            totalWeight += weight * quantity;
            totalRrp += rrp * quantity;
            totalQuantity += quantity;
            totalAmount += lineTotal;

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

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

        // Calculate discounts
        const discountPercent = parseFloat($('#discountable-discount').val()) || 0;
        const fixedDiscount = parseFloat($('#cart-discount').val()) || 0;
        const discountableDiscount = discountableSubtotal * (discountPercent / 100);
        const totalDiscount = discountableDiscount + fixedDiscount;
        const discountableAfter = Math.max(0, discountableSubtotal - discountableDiscount);
        const totalSubtotal = discountableAfter + nonDiscountableSubtotal-fixedDiscount;

        // Update discount fields
        $('#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));

        // Calculate shipping and VAT
        const shipping = parseFloat($('#cart-shipping').val()) || 0;
        const vatAmount = vatTaxCheckbox.checked ? 
            (totalSubtotal + shipping) * (vatTaxPercentage / 100) : 0;
        const grandTotal = totalSubtotal + shipping + vatAmount;

        // Update final totals
        $('#cart-vat-tax').val(vatAmount.toFixed(2));
        $('#cart-total').val(grandTotal.toFixed(2));

        // Update courier calculations
        calculateCourierCosts(totalWeight);
    }

    // Calculate courier costs
    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 courierRow = $('#couries tr[data-courier]');
        let couriers = courierRow.data('courier');

        // If data is a string, parse it
        if (typeof couriers === 'string') {
            couriers = JSON.parse(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;
            const totalBoxes = Math.ceil(totalWeight / boxSize);

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

            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>${totalBoxes}</td>
                    <td>${localCharges}</td>
                    <td>${intCharges}</td>
                </tr>
            `;

            $tableBody.append(row);
        });
    }
     $(document).ready(function() {
            $(document).on('change', '#customer_id', function(e) {
                let customerId = $('#customer_id').val();

                $.ajax({
                    url: "{{ url('admin/orders/get-user-addresses') }}/" + customerId,
                    method: "GET",
                    headers: {
                        "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content")
                    },
                    success: function(response) {
                        $('#billing_address_id').empty();
                        $('#shipping_address_id').empty();

                        $.each(response.billing_addresses, function(index, address) {
                            $('#billing_address_id').append('<option value="' + address
                                .id + '">' +
                                address.address_line_1 + ' --- ' +
                                address.address_line_2 + ' --- ' +
                                address.post_code + '</option>');
                        });

                        $.each(response.shipping_addresses, function(index, address) {
                            $('#shipping_address_id').append('<option value="' + address
                                .id + '">' +
                                address.address_line_1 + ' --- ' +
                                address.address_line_2 + ' --- ' +
                                address.post_code + '</option>');
                        });

                        MyToast.fire({
                            icon: response.alert,
                            title: response.message,
                        });
                    },
                    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() {
            $('#delivery_method').change(function() {
                $('#sa').toggleClass('d-none');
                $('#shipping_address_id').prop('required', !$('#shipping_address_id').prop('required'));
                $('#pa').toggleClass('d-none');
                $('#pickup_address_id').prop('required', !$('#pickup_address_id').prop('required'));
            });
        });
</script>
@endsection