@extends('backend.layouts.app')
@section('content')
    <style>
        /* .page-wrapper .page-header {
                                        display: none !important;
                                    } */


        .container-xl {
            max-width: inherit !important;
        }

        * {
            scrollbar-width: none !important;
            ;
        }

        .alert-license {
            display: none !important;
        }

        .select2-selection {
            text-align: left;
        }

        /* #charges-container {
                                        padding-left: 8px;
                                        padding-right: 8px;
                                    } */
        .fw-bold {
            font-weight: 600;
            border: none;
            background: none;
            text-align: right;
            font-size: 16px;
        }

        /* === Address Popover Styles === */
        .popover {
            max-width: 490px !important;
            width: 490px !important;
            border-radius: 10px !important;
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15) !important;
            border: none !important;
        }

        .popover-body {
            padding: 0 !important;
        }

        .scrollable-address-list {
            max-height: 300px;
            overflow-y: auto;
            padding: 10px;
            margin-bottom: 0;
            list-style: none;
        }

        .scrollable-address-list li {
            background-color: #fff;
            border: 1px solid #e5e7eb;
            border-radius: 8px;
            padding: 12px 14px;
            margin-bottom: 8px;
            transition: all 0.2s ease-in-out;
            cursor: pointer;
        }

        .scrollable-address-list li.selected {
            background-color: #e7f0ff;
            border-color: #1b6de0;
        }

        .scrollable-address-list li address {
            font-style: normal;
            font-size: 14px;
            line-height: 1.5;
            color: #2d2d2d;
            margin: 0;
        }

        .scrollable-address-list li strong {
            text-transform: capitalize;
            font-weight: 600;
            display: block;
            margin-bottom: 6px;
            font-size: 15px;
        }

        .scrollable-address-list li:hover {
            background-color: #1b6de0;
            border-color: #1b6de0;
        }

        .scrollable-address-list li:hover address {
            color: #fff !important;
        }

        .popover-footer {
            border-top: 1px solid #eaeaea;
            padding: 10px 14px;
            background-color: #f9fafb;
            text-align: left;
            border-radius: 0 0 10px 10px;
        }

        .popover-footer button {
            font-size: 14px;
            font-weight: 500;
            color: #1b6de0;
            background: none;
            border: none;
            padding: 8px 0;
            width: 100%;
            text-align: left;
        }

        .popover-footer button:hover {
            background-color: #e7f0ff;
            border-radius: 6px;
            color: #000;
        }

        .popover-footer button svg {
            margin-right: 8px;
            vertical-align: middle;
        }

        .btn-address-trigger {
            border: none;
            color: #1b6de0;
            font-size: 14px;
            display: inline-flex;
            align-items: center;
            text-decoration: none;
        }

        .btn-address-trigger svg {
            width: 16px;
            height: 16px;
            fill: #1b6de0;
            margin-left: 6px;
        }

        /* Scrollbar styling */
        .scrollable-address-list::-webkit-scrollbar {
            width: 6px;
        }

        .scrollable-address-list::-webkit-scrollbar-track {
            background: #f1f1f1;
            border-radius: 10px;
        }

        .scrollable-address-list::-webkit-scrollbar-thumb {
            background-color: #d1d5db;
            border-radius: 10px;
        }

        .scrollable-address-list::-webkit-scrollbar-thumb:hover {
            background-color: #a8b2c1;
        }

        /* Address display area */
        .address-display address {
            font-style: normal;
            font-size: 15px;
            line-height: 1.6;
            color: #333;
            margin: 0;
        }

        .address-display strong {
            /* font-weight: 600;
                                        font-size: 16px;
                                        display: block;
                                        margin-bottom: 8px; */
            color: #1b6de0;
        }

        h6.text-uppercase {
            color: #333;
            font-size: 16px;
        }

        .text-uppercase.d-block {
            font-size: 14px;
            color: #666;
            margin-top: 5px;
        }
        .small-btn {
            padding: 6px 12px;
            font-size: 12px;
            border-radius: 8px;
        }
    </style>
    @php
        $isEditMode = isset($order) ?? [];
    @endphp
    {{--
    <div class="row align-items-center mt-0 mb-3">
        <div class="col-auto">
            <h1 class="h3 mb-0" style="font-size: 25px;">
                {{ $isEditMode ? 'Edit Order' : 'Create Order' }}
            </h1>
        </div>
    </div> --}}

    <div class="row">
        <div class="col-lg-12 mx-auto">
            <div class="card">
                <div class="card-body">
                    <div class="row g-3 p-2 align-items-start">
                        <!-- LEFT: Customer Section -->
                        <div class="col-12 col-sm-12 col-lg-5 col-lg-4">
                            <div class="row g-2 align-items-center">
                                <div class="col-12 col-sm-9">
                                    <input type="hidden" class="order_id" id="order_id" value="" readonly>

                                    <label for="customer_id" class="form-label form-label required mb-1">
                                        Customer
                                    </label>
                                    <!-- Customer Dropdown Selection -->
                                    <select class="form-control form-select" name="customer_id" id="customer_id" required>
                                        <option value="">Select Customer</option>
                                        <!-- Options will be loaded via AJAX -->
                                    </select>
                                </div>
                                <div class="col-12 col-sm-3">
                                    <label class="form-label d-block invisible">Add</label>
                                    <button type="button" class="btn btn-primary w-100" onclick="openCustomerModal()"
                                        style="padding: 7.2px;padding: 6.2px;font-size: 12px;">
                                        Add Customer
                                    </button>
                                </div>
                            </div>

                            {{-- <div id="customer-details" class="d-none mt-3">
                                <div class="card shadow-sm rounded-2 mb-2">
                                    <div class="card-body p-3">
                                        <h3 class="mb-2 form-label form-label">Billing Address</h3>
                                        <p class="mb-1"><strong>Name:</strong> <span id="customer-name"
                                                class="text-muted"></span></p>
                                        <p class="mb-1"><strong>Email:</strong> <span id="customer-email"
                                                class="text-muted"></span></p>
                                        <p class="mb-1"><strong>Phone:</strong> <span id="customer-phone"
                                                class="text-muted"></span></p>
                                        <p class="mb-0"><strong>Address:</strong> <span id="customer-address"
                                                class="text-muted"></span></p>
                                    </div>
                                </div>
                                <div class="card shadow-sm rounded-2">
                                    <div class="card-body p-3 d-flex justify-content-between align-items-start">
                                        <div>
                                            <h3 class="mb-2 form-label form-label required">Shipping Address</h3>
                                            <p class="mb-1"><strong>Name:</strong> <span id="shipping-name"
                                                    class="text-muted"></span></p>
                                            <p class="mb-1"><strong>Email:</strong> <span id="shipping-email"
                                                    class="text-muted"></span></p>
                                            <p class="mb-1"><strong>Phone:</strong> <span id="shipping-phone"
                                                    class="text-muted"></span></p>
                                            <p class="mb-0"><strong>Address:</strong> <span id="shipping-address"
                                                    class="text-muted"></span></p>
                                        </div>
                                        <div>
                                            <button class="btn btn-sm btn-icon btn-primary" onclick="editShipping()"
                                                title="Edit Shipping">
                                                <svg class="icon  svg-icon-ti-ti-edit" data-bs-toggle="tooltip"
                                                    data-bs-title="Edit" xmlns="http://www.w3.org/2000/svg" width="24"
                                                    height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                                    stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                                    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                                                    <path d="M7 7h-1a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-1">
                                                    </path>
                                                    <path
                                                        d="M20.385 6.585a2.1 2.1 0 0 0 -2.97 -2.97l-8.415 8.385v3h3l8.385 -8.415z">
                                                    </path>
                                                    <path d="M16 5l3 3"></path>
                                                </svg>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                                <input type="hidden" name="shipping_first_name" id="shipping_first_name">
                                <input type="hidden" name="shipping_last_name" id="shipping_last_name">
                                <input type="hidden" name="shipping_email" id="shipping_email">
                                <input type="hidden" name="shipping_phone" id="shipping_phone">
                                <input type="hidden" name="shipping_address_1" id="shipping_address_1">
                                <input type="hidden" name="shipping_address_2" id="shipping_address_2">
                                <input type="hidden" name="shipping_country_id" id="shipping_country_id">
                                <input type="hidden" name="shipping_state_id" id="shipping_state_id">
                                <input type="hidden" name="shipping_city_id" id="shipping_city_id">
                                <input type="hidden" name="shipping_postal_code" id="shipping_postal_code">
                            </div> --}}
                            <div id="customer-details" class="d-none mt-3">
                                <div class="card shadow-sm rounded-2 mb-2">
                                    <div class="card-body p-3">
                                        <div class="row">
                                            <!-- Billing Address -->
                                            <div class="col-md-6 border-end">
                                                <h6 class="text-uppercase fw-semibold mb-2">
                                                    Billing Address
                                                    <a href="#" class="btn-address-trigger" id="billingPopoverTrigger">
                                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"
                                                            width="16" height="16">
                                                            <path
                                                                d="M50.3 512c-13.04 0-25.74-5.08-35.2-14.35C3.47 486.27-1.93 469.88.64 453.82l16.9-105.61c3.01-18.79 11.71-35.82 25.17-49.27l272.83-272.7c35.01-34.99 91.99-34.98 127.01.02l41.14 41.12c16.96 16.96 26.31 39.5 26.32 63.47 0 23.98-9.33 46.52-26.29 63.47L210.3 467.59c-12.98 12.98-29.4 21.57-47.47 24.84L59.23 511.2c-2.97.54-5.96.8-8.93.8zM379.02 39.99c-12.74 0-25.48 4.85-35.18 14.54L71 327.23c-7.46 7.45-12.28 16.9-13.95 27.31l-16.9 105.61c-.73 4.55 1.54 7.55 2.95 8.93 1.41 1.38 4.46 3.58 8.99 2.76l103.6-18.77A49.498 49.498 0 00182 439.3l273.4-273.27c9.4-9.39 14.57-21.89 14.57-35.18s-5.19-25.79-14.59-35.19l-41.14-41.12c-9.71-9.71-22.47-14.56-35.22-14.56z" />
                                                            <path transform="rotate(-45.01 331.896 178.02)"
                                                                d="M311.84 79.14h40.01v197.75h-40.01z" />
                                                        </svg>
                                                    </a>
                                                </h6>

                                                <div class="address-display" id="selectedBillingAddress">
                                                    <div class="text-dark">
                                                        <span id="billing-name" class="text-muted"></span> <br>
                                                        <span id="billing-email" class="text-muted"></span> <br>
                                                        <span id="billing-phone" class="text-muted"></span> <br>
                                                        <span id="billing-address-display"></span>
                                                        <br>
                                                        <div class="d-flex gap-2 mt-2">
                                                            <strong>Default Discount:</strong>
                                                            <span id="customer_default_discount">0</span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                            <!-- Shipping Address -->
                                            <div class="col-md-6">
                                                <h6 class="text-uppercase fw-semibold mb-2">
                                                    Shipping Address
                                                    <a href="#" class="btn-address-trigger" id="shippingPopoverTrigger">
                                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"
                                                            width="16" height="16">
                                                            <path
                                                                d="M50.3 512c-13.04 0-25.74-5.08-35.2-14.35C3.47 486.27-1.93 469.88.64 453.82l16.9-105.61c3.01-18.79 11.71-35.82 25.17-49.27l272.83-272.7c35.01-34.99 91.99-34.98 127.01.02l41.14 41.12c16.96 16.96 26.31 39.5 26.32 63.47 0 23.98-9.33 46.52-26.29 63.47L210.3 467.59c-12.98 12.98-29.4 21.57-47.47 24.84L59.23 511.2c-2.97.54-5.96.8-8.93.8zM379.02 39.99c-12.74 0-25.48 4.85-35.18 14.54L71 327.23c-7.46 7.45-12.28 16.9-13.95 27.31l-16.9 105.61c-.73 4.55 1.54 7.55 2.95 8.93 1.41 1.38 4.46 3.58 8.99 2.76l103.6-18.77A49.498 49.498 0 00182 439.3l273.4-273.27c9.4-9.39 14.57-21.89 14.57-35.18s-5.19-25.79-14.59-35.19l-41.14-41.12c-9.71-9.71-22.47-14.56-35.22-14.56z" />
                                                            <path transform="rotate(-45.01 331.896 178.02)"
                                                                d="M311.84 79.14h40.01v197.75h-40.01z" />
                                                        </svg>
                                                    </a>
                                                </h6>

                                                <div class="address-display" id="selectedShippingAddress">
                                                    <div class="text-dark">
                                                        <span id="shipping-name" class="text-muted"></span> <br>
                                                        <span id="shipping-email" class="text-muted"></span> <br>
                                                        <span id="shipping-phone" class="text-muted"></span> <br>
                                                        <span id="shipping-address-display"></span>
                                                        <br>
                                                        <div class="d-flex gap-2 mt-2">
                                                            <strong>Customer Type:</strong>
                                                            <span id="customer_type">-</span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <!-- Hidden inputs for form submission -->
                                        <input type="hidden" name="shipping_address_id" id="shipping_address_id">
                                        <input type="hidden" name="billing_address_id" id="billing_address_id">

                                        <!-- Shipping address details -->
                                        <input type="hidden" name="shipping_first_name" id="shipping_first_name">
                                        <input type="hidden" name="shipping_last_name" id="shipping_last_name">
                                        <input type="hidden" name="shipping_email" id="shipping_email">
                                        <input type="hidden" name="shipping_phone" id="shipping_phone">
                                        <input type="hidden" name="shipping_address_1" id="shipping_address_1">
                                        <input type="hidden" name="shipping_address_2" id="shipping_address_2">
                                        <input type="hidden" name="shipping_country_id" id="shipping_country_id">
                                        <input type="hidden" name="shipping_state_id" id="shipping_state_id">
                                        <input type="hidden" name="shipping_city_id" id="shipping_city_id">
                                        <input type="hidden" name="shipping_postal_code" id="shipping_postal_code">

                                        <!-- Billing address details -->
                                        <input type="hidden" name="billing_first_name" id="billing_first_name">
                                        <input type="hidden" name="billing_last_name" id="billing_last_name">
                                        <input type="hidden" name="billing_email" id="billing_email">
                                        <input type="hidden" name="billing_phone" id="billing_phone">
                                        <input type="hidden" name="billing_address_1" id="billing_address_1">
                                        <input type="hidden" name="billing_address_2" id="billing_address_2">
                                        <input type="hidden" name="billing_country_id" id="billing_country_id">
                                        <input type="hidden" name="billing_state_id" id="billing_state_id">
                                        <input type="hidden" name="billing_city_id" id="billing_city_id">
                                        <input type="hidden" name="billing_postal_code" id="billing_postal_code">
                                    </div>
                                </div>
                                
                                <!-- Credit Limit Summary - Horizontal Layout -->
                                <div id="credit_limit_summary" class="d-none">
                                    <div class="card shadow-sm rounded-2">
                                        <div class="card-body p-3">
                                            <div class="row text-center">
                                                <div class="col-md-4">
                                                    <label class="font-13 fw-semibolds mb-1 d-block text-muted">Credit Limit</label>
                                                    <span class="fw-bold d-block" id="credit_limit_display" style="font-size: 18px; text-align: center;">$0.00</span>
                                                </div>
                                                <div class="col-md-4">
                                                    <label class="font-13 fw-semibolds mb-1 d-block text-muted">Balance</label>
                                                    <span class="fw-bold d-block" id="balance_display" style="font-size: 18px; text-align: center;">$0.00</span>
                                                </div>
                                                <div class="col-md-4">
                                                    <label class="font-13 fw-semibolds mb-1 d-block text-muted">Available Credit</label>
                                                    <span class="fw-bold d-block" id="available_credit_display" style="font-size: 18px; text-align: center;">$0.00</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="mt-3 d-none" id="is_cash_sales_div">
                                <h3>Cash Sales</h3>
                            </div>

                        </div>

                        <div class="col-12 col-sm-12 col-lg-7 col-lg-4">
                            {{-- <div class="card shadow-sm mb-3 mt-2">
                                <div class="card-body">
                                    <div class="row align-items-center">
                                        <div class="col-12 col-sm-6 text-center">
                                            <img src="{{ asset('assets/images/tyres_logo.png') }}" alt="Logo"
                                                class="img-fluid" style="max-height: 70px;">
                                        </div>
                                        <div class="col-12 col-sm-6">
                                            <h3 class="mb-2 form-label form-label">Company Details</h3>
                                            <p class="mb-1"><strong>Company Name:</strong> <span class="text-muted">Tyres
                                                    Planet</span></p>
                                            <p class="mb-1"><strong>Address:</strong> <span class="text-muted">15
                                                    Lancashire St, Acacia Ridge QLD 4110, Australia</span></p>

                                            <p class="mb-0"><strong>CALL:</strong> <span class="form-label form-label">+91
                                                    90993
                                                    33099</span></p>
                                        </div>
                                    </div>


                                </div>
                            </div> --}}
                            <div class="">
                                <div class="">
                                    <div class="row g-3">
                                        <div class="col-12 col-sm-6">
                                            <label for="order_number" class="form-label form-label required mb-1">
                                                Order No
                                            </label>
                                            <input type="text" name="order_number" id="order_number"
                                                class="form-control form-control-customr" placeholder="Enter Order Number"
                                                readonly="" value="{{ $orderNumber }}">
                                        </div>

                                        <div class="col-12 col-sm-6">
                                            <label for="order_date" class="form-label form-label required mb-1">
                                                Order date
                                            </label>
                                            <input type="text" name="order_date" id="order_date"
                                                class="form-control form-control-customr" placeholder="Enter Order Date"
                                                readonly="" value="{{ $orderDate }}">
                                        </div>



                                        <div class="col-12 col-sm-6">
                                            <label for="payment_method" class="form-label form-label required small mb-1">
                                                Payment Method
                                            </label>
                                            <select name="payment_method" id="payment_method"
                                                class="form-control form-control-customr aiz-selectpicker" {{ $isEditMode ? 'disabled' : '' }}>
                                                {{-- <option value="cod" {{ $isEditMode && $order->payment_method == 'cod' ?
                                                    'selected' : '' }}>
                                                    Cash on delivery (COD)</option> --}}
                                                {{-- <option value="bank_transfer" {{ $isEditMode && $order->payment_method
                                                    == 'bank_transfer' ? 'selected' : '' }}>
                                                    Bank transfer</option>
                                                <option value="stripe" {{ $isEditMode && $order->payment_method == 'stripe'
                                                    ? 'selected' : '' }}>
                                                    Stripe</option>
                                                <option value="paypal" {{ $isEditMode && $order->payment_method == 'paypal'
                                                    ? 'selected' : '' }}>
                                                    PayPal</option>
                                                <option value="razorpay" {{ $isEditMode && $order->payment_method ==
                                                    'razorpay' ? 'selected' : '' }}>
                                                    Razorpay</option>
                                                <option value="paystack" {{ $isEditMode && $order->payment_method ==
                                                    'paystack' ? 'selected' : '' }}>
                                                    Paystack</option>
                                                <option value="mollie" {{ $isEditMode && $order->payment_method == 'mollie'
                                                    ? 'selected' : '' }}>
                                                    Mollie</option>
                                                <option value="sslcommerz" {{ $isEditMode && $order->payment_method ==
                                                    'sslcommerz' ? 'selected' : '' }}>
                                                    SslCommerz</option> --}}
                                                <option value="FPOS" {{ $isEditMode && $order->payment_method == 'FPOS' ? 'selected' : '' }}>
                                                    FPOS</option>
                                                <option value="CASH" {{ $isEditMode && $order->payment_method == 'CASH' ? 'selected' : '' }}>
                                                    CASH</option>
                                                <option value="bank_transfer" {{ $isEditMode && $order->payment_method == 'bank_transfer' ? 'selected' : '' }}>
                                                    BANK TRANSFER</option>
                                            </select>
                                            @if ($isEditMode)
                                                <input type="hidden" name="payment_method" value="{{ $order->payment_method }}">
                                            @endif
                                        </div>

                                        <div class="col-12 col-sm-6">
                                            <label for="payment_status" class="form-label form-label required small mb-1">
                                                Payment Status
                                            </label>
                                            <select name="payment_status" id="payment_status"
                                                class="form-control form-control-customr aiz-selectpicker">
                                                <option value="pending" {{ $isEditMode && $order->payment_status == 'pending' ? 'selected' : '' }}>
                                                    Pending</option>
                                                <option value="part_completed" {{ $isEditMode && $order->payment_status == 'part_completed' ? 'selected' : '' }}>
                                                    Part Completed</option>
                                                <option value="completed" {{ $isEditMode && $order->payment_status == 'completed' ? 'selected' : '' }}>
                                                    Completed</option>
                                                {{-- <option value="refunding" {{ $isEditMode && $order->payment_status ==
                                                    'refunding' ? 'selected' : '' }}>
                                                    Refunding</option>
                                                <option value="refunded" {{ $isEditMode && $order->payment_status ==
                                                    'refunded' ? 'selected' : '' }}>
                                                    Refunded</option>
                                                <option value="fraud" {{ $isEditMode && $order->payment_status == 'fraud' ?
                                                    'selected' : '' }}>
                                                    Fraud</option>
                                                <option value="failed" {{ $isEditMode && $order->payment_status == 'failed'
                                                    ? 'selected' : '' }}>
                                                    Failed</option>
                                                <option value="canceled" {{ $isEditMode && $order->payment_status ==
                                                    'canceled' ? 'selected' : '' }}>
                                                    Canceled</option> --}}
                                            </select>
                                        </div>

                                        <div class="col-12 col-sm-6">
                                            <label for="payment-status" class="form-label form-label mb-1">
                                                Transaction ID
                                            </label>
                                            <input type="text" name="transaction_id" id="transaction_id"
                                                class="form-control form-control-customr" placeholder="Enter Transaction ID"
                                                {{ $isEditMode ? 'readonly' : '' }}
                                                value="{{ $isEditMode && $order->payment ? $order->payment->charge_id : '' }}">
                                        </div>
                                        
                                        <div class="col-12 col-sm-6 d-none" id="customer_payment_terms_div">
                                            <label class="form-label form-label mb-1">Payment Terms</label>

                                            <div class="input-group">
                                                <input type="text" class="form-control" name="payment_terms" id="payment_terms" placeholder="Enter Payment Terms" readonly value="{{ $isEditMode ? $order->payment_terms : '' }}">
                                                <button class="btn btn-secondary small-btn" type="button">Days</button>
                                            </div>
                                
                                        </div>
                                        <small class="form-hint mt-1">You can leave this field empty if the payment method
                                            is
                                            COD or Bank transfer</small>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="card-header bg-light-title show_product_details d-none"
                    style="justify-content: center; background-color: #f2f3f8 !important;">
                    <h2 class="mb-0 title-row">Ordered Items</h2>
                </div>
                <div class="card-body show_product_details d-none">
                    <div id="product-list">
                        <div class="row font-weight-bold text-center border-bottom pt-2 pb-2"
                            style="background-color: #f2f3f8; border-radius: 10px 10px 0px 0px;">
                            <div class="col-md-3 form-label form-label mb-0">Product</div>
                            <div class="col-md-4 form-label form-label mb-0">Product Details</div>
                            <div class="col-md-1 form-label form-label mb-0">Quantity</div>
                            <div class="col-md-2 form-label form-label mb-0">Price</div>
                            <div class="col-md-2 form-label form-label mb-0">Amount</div>


                        </div>

                        {{-- Default empty row for create mode --}}
                        <div class="row product-row pt-2 text-center align-items-center">
                            <div class="col-md-3 mb-2">
                                <select class="form-control product-select" name="products[]" data-row="0"
                                    style="width: 100%;">
                                    <option value="">Select Product</option>
                                </select>
                                <div class="col-md-quantity float-left ml-2" style="text-align: left;">
                                    <small class="text-secondary text-success">
                                        Quantity: <span class="show-available-qty text-danger"></span>
                                    </small>
                                </div>
                            </div>

                            {{-- <div class="col-md-2 pb-4">
                                <input type="text" class="form-control form-control-customr product-name"
                                    name="productname[]">
                            </div> --}}
                            <div class="col-md-4 mb-2">
                                <div class="product-details" style="padding-bottom: 0px;">
                                    -
                                </div>
                            </div>

                            <div class="col-md-1 pb-4">
                                <input type="number" class="form-control form-control-customr product-quantity"
                                    name="quantity[]" value="0" min="1" oninput="validateQuantity(this)" readonly required>
                            </div>
                            <input type="hidden" class="product-cost-price" value="0">
                            <div class="col-md-2 pb-4">
                                <input type="number" class="form-control form-control-customr product-price" name="price[]"
                                    value="0.00" min="0" @if (!Auth::user()->hasPermission('sales.orders.price-editable'))
                                    readonly @endif>
                            </div>


                            <div class="col-md-2 pb-4">
                                <div class="row">
                                    <div class="col-10 pe-3">
                                        <input type="number" class="form-control form-control-customr product-amount"
                                            name="amount[]" readonly value="0.00" min="0">
                                    </div>
                                    <div class="col-1 ps-1 d-flex justify-content-end close-md-products">
                                        <button type="button" class="btn-close remove-row p-0 d-none">
                                            <i class="fa-regular fa-circle-xmark"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                            {{-- <div class="col-md-1 pb-4">
                                <button type="button" class="btn-close remove-row p-0 d-none" style="justify-self: center;">
                                    <i class="fa-regular fa-circle-xmark"></i>
                                </button>

                            </div> --}}

                        </div>
                    </div>

                    <div class="row" style="text-align: right;">
                        <div class="col text-end p-3">
                            <a href="javascript:void(0);" class="btn btn-circle btn-primary custom-btn" id="add-product">
                                <span>+ Add Product</span>
                            </a>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-7">
                            <div class="card pb-3 pl-3 pr-3">

                                <h5 class="section-title mb-0 p-2 pl-3 addc-section" style="font-weight: 600;">
                                    Additional Information
                                </h5>
                                <div class="p-4">
                                    <div id="charges-container">
                                        <div class="row">
                                            <div class="col-md-6 col-md-charges">
                                                <label class="form-label form-label">Select
                                                    Charge</label>
                                            </div>
                                            <div class="col-md-5">
                                                <label class="form-label form-label">Amount</label>
                                            </div>
                                            <div class="col-md-1"></div>
                                        </div>
                                        <div class="row single-charge-row mb-3">
                                            <div class="col-md-6 col-md-charges">
                                                <select name="charges[]" class="form-control charges-select"
                                                    data-live-search="true" required>
                                                    <option value="">Choose Charges</option>
                                                </select>
                                            </div>
                                            <div class="col-md-5">
                                                <input type="number" class="form-control charges-amount"
                                                    name="charges_amount[]" placeholder="Enter amount" value="0.00"
                                                    step="0.01" min="0">
                                            </div>
                                            <div class="col-md-1 d-flex align-items-center">
                                                <button type="button" class="btn-close remove-charge-row d-none">
                                                    <i class="fa-regular fa-circle-xmark"></i>
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row align-items-center mb-3">
                                        <div class="col-md-6">
                                            <button type="button" class="btn btn-circle btn-primary custom-btn"
                                                id="add-charge-row">
                                                + Add Charges
                                            </button>
                                        </div>
                                        <div class="col-md-5">
                                            <div class="d-flex justify-content-between align-items-center">
                                                <label class="fw-bold mb-0 me-2 form-label form-label"
                                                    style="white-space: nowrap;">Total Charges:</label>
                                                <input type="text" class="fw-bold" id="total_charges_amount" value="0.00"
                                                    readonly style="max-width: 120px;">
                                            </div>
                                        </div>
                                    </div>

                                    <div class="mb-3">
                                        <div class="">
                                            <label for="customer_notes" class="form-label form-label form-label">Order
                                                Notes</label>
                                            <textarea name="customer_notes" id="customer_notes" cols="6" rows="5"
                                                class="form-control form-control-customr"
                                                placeholder="Enter any notes (optional)">{{ $isEditMode ? $order->description : '' }}</textarea>
                                        </div>
                                    </div>

                                    <div class="mb-3">
                                        <div class="">
                                            <label for="terms_conditions" class="form-label form-label">
                                                Terms & Conditions
                                            </label>
                                            <select id="terms_conditions" name="terms_conditions[]"
                                                class="form-control aiz-selectpicker terms_conditions" multiple
                                                data-live-search="true" data-selected-text-format="values"
                                                title="Select Terms & Conditions">

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

                                    <div id="selected-terms-details" class=""></div>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-5">
                            <div class="p-4 rounded" style="background: #f8f9fc; border: 1px solid #e4e5eb;">
                                <div class="d-flex justify-content-between align-items-center mb-3">
                                    <label class="mb-0 fw-semibolds form-label form-label">Sub Total</label>
                                    <input type="text" class="fw-bold" id="subtotal" value="0.00" readonly>
                                </div>

                                {{-- <div class="row mb-3">
                                    <div class="col-md-6" style="align-content: center;">
                                        <label class="font-13 fw-semibolds mb-0 form-label form-label">Tax Rate</label>
                                    </div>
                                    <div class="col-md-6">
                                        <select class="form-control form-control-customr" id="tax_rate"
                                            onchange="calculateTax()">
                                            <option value="0">Select Tax</option>
                                        </select>
                                    </div>
                                </div>

                                <div class="d-flex justify-content-between align-items-center mb-3">
                                    <label class="mb-0 fw-semibolds form-label form-label">Tax Amount</label>
                                    <input type="text" class="fw-bold" id="tax_amount" value="0.00" readonly>
                                </div> --}}

                                <div class="row mb-3">
                                    <div class="col-md-3" style="align-content: center;">
                                        <label class="font-13 fw-semibolds mb-0 form-label form-label">Discount</label>
                                    </div>
                                    <div class="col-md-3">
                                        <input type="number" class="form-control form-control-customr" id="discount_value"
                                            min="0" value="0" placeholder="0.00">
                                    </div>
                                    <div class="col-md-6">
                                        <select class="form-control" id="discount_type">
                                            <option value="amount">Flat</option>
                                            <option value="percent">Percent</option>
                                        </select>
                                    </div>
                                </div>

                                <div class="row mb-3">
                                    <div class="col-md-6 d-flex align-items-center">
                                        <label class="font-13 fw-semibolds mb-0 form-label form-label">Discount
                                            Amount</label>
                                    </div>
                                    <div class="col-md-6 d-flex align-items-center justify-content-end">
                                        <input type="text" class="fw-bold" id="discount_amount" value="0.00" readonly>
                                    </div>
                                </div>



                                {{-- <div class="d-flex justify-content-between align-items-center mb-3">
                                    <label class="mb-0 fw-semibold text-muted">Shipping</label>
                                    <input type="number" class="form-control form-control-customr" id="shipping_amount"
                                        value="0.00" min="0" onchange="calculateTotal()" style="width: 120px;">
                                </div> --}}

                                <div class="row">
                                    <div class="col-md-6 d-flex align-items-center">
                                        <label class="font-13 fw-semibolds mb-0 form-label form-label">Total Charges
                                            Amount</label>
                                    </div>
                                    <div class="col-md-6 d-flex align-items-center justify-content-end">
                                        <input type="text" class="fw-bold" id="total_charges_display" value="0.00" readonly>
                                    </div>
                                </div>


                                <hr>
                                <div class="d-flex justify-content-between align-items-center mb-3">
                                    <label class="mb-0 fw-semibolds form-label form-label">Total</label>
                                    <input type="text" class="fw-bold" id="total" value="0.00" readonly>
                                </div>
                                
                                <div class="text-end mb-2" style="text-align: right;">
                                    <button type="button" class="btn btn-circle btn-primary custom-btn px-4"
                                        onclick="showPreview()">
                                        {{ $isEditMode ? 'Update Order' : 'Create Order' }}
                                    </button>
                                </div>

                                <div id="credit-limit-error" class="alert alert-danger mb-3" style="display: none;">
                                    <strong>Note:</strong> <span id="credit-limit-message" class="text-danger"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Order Preview Modal -->
    <div class="modal fade" id="orderPreviewModal" tabindex="-1" role="dialog" aria-labelledby="orderPreviewModalLabel"
        aria-hidden="true">
        <div class="modal-dialog" role="document" style="max-width: 210mm; width: 100%;">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="orderPreviewModalLabel">Order Preview</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body" id="previewContent">
                    <!-- Preview content will be loaded here -->
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary" onclick="confirmOrder()">Confirm Order</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('javascript')
    <script>
        var customersearch = '{{ route('customers.search') }}';
        var customerdetails = '{{ route('customers.details') }}';
        var customercreate = '{{ route('sales.customers.store') }}';
        var Countrylist = '{{ route('countries.list') }}';
        var Statelist = '{{ route('states.list') }}';
        var Citylist = '{{ route('cities.list') }}';
        var productsearch = '{{ route('products.search') }}';
        var taxeslist = '{{ route('taxes.list') }}';
        var termsConditionsUrl = '{{ route('sales.terms-conditions') }}';
        var productStockUrl = '{{ route('products.stock', ':productId') }}';
        var changesDropdownUrl = '{{ route('charges.dropdown') }}';
        var AddressCountrylist = '{{ route('countries.list') }}';
        var AddressStatelist = '{{ route('states.list') }}';
        var AddressCitylist = '{{ route('cities.list') }}';
        var customerType = 1;
        var customerCreditLimit = 0;
        var customerPendingOrders = 0;

        function formatProduct(product) {
            if (!product.product) return product.text;
            let p = product.product;
            return $(`

                                            <div class="d-flex align-items-center">
                                                <img src="${p.image_url || '/images/no-image.png'}" width="40" height="40" class="me-2 rounded"/>
                                                <div>
                                                    <div><strong>${p.name}</strong></div>
                                                    <small>SKU: ${p.sku || '-'} | Price: $${p.price} | Sale Price: $${p.sale_price}</small>
                                                </div>
                                            </div>
                                        `);

        }

        function formatProductSelection(product) {
            return product.text || product.name;
        }

        function checkCreditLimit() {
            const errorDiv = document.getElementById('credit-limit-error');
            const messageSpan = document.getElementById('credit-limit-message');
            
            // Get customer payment terms from input field
            const customerPaymentTerms = parseInt($('#payment_terms').val()) || 0;
            window.customerPaymentTerms = customerPaymentTerms;
            console.log('Payment terms:', customerPaymentTerms);
            
            const availableCredit = customerCreditLimit - customerPendingOrders;
            
            if (customerType === '1') { // Wholesaler
                if (customerCreditLimit == 0 && customerPaymentTerms == 0) {
                    messageSpan.textContent = 'No credit limit and no payment terms available. Please clear outstanding dues.';
                    errorDiv.style.display = 'block';
                    return false;
                } else if (customerCreditLimit == 0 && customerPaymentTerms > 0) {
                    messageSpan.textContent = `No credit limit available. Payment terms: ${customerPaymentTerms} days. Payment required to proceed.`;
                    errorDiv.style.display = 'block';
                    return false;
                } else if (customerCreditLimit > 0 && customerPaymentTerms == 0) {
                    if (customerPendingOrders > customerCreditLimit) {
                        messageSpan.textContent = `Credit limit: $${customerCreditLimit.toFixed(2)} exceeded. Available credit: $${availableCredit.toFixed(2)}. No payment terms. Please clear outstanding dues.`;
                        errorDiv.style.display = 'block';
                        return false;
                    }
                    messageSpan.textContent = `Credit limit: $${customerCreditLimit.toFixed(2)}, Available credit: $${availableCredit.toFixed(2)}. No payment terms available. Immediate payment required.`;
                    errorDiv.style.display = 'block';
                    return false;
                } else if (customerCreditLimit > 0 && customerPaymentTerms > 0) {
                    if (customerPendingOrders > customerCreditLimit) {
                        messageSpan.textContent = `Credit limit: $${customerCreditLimit.toFixed(2)} exceeded. Available credit: $${availableCredit.toFixed(2)}. Payment terms: ${customerPaymentTerms} days. Please clear outstanding dues.`;
                        errorDiv.style.display = 'block';
                        return false;
                    }
                    messageSpan.textContent = `Credit limit: $${customerCreditLimit.toFixed(2)}, Available credit: $${availableCredit.toFixed(2)}. Payment terms: ${customerPaymentTerms} days available.`;
                    errorDiv.style.display = 'block';
                    errorDiv.className = 'alert alert-info mb-3';
                }
            } else { // Retail customer
                if (customerPaymentTerms > 0) {
                    messageSpan.textContent = `Payment terms: ${customerPaymentTerms} days available for this customer.`;
                    errorDiv.style.display = 'block';
                    errorDiv.className = 'alert alert-info mb-3';
                } else {
                    messageSpan.textContent = 'No payment terms. Immediate payment required.';
                    errorDiv.style.display = 'block';
                    errorDiv.className = 'alert alert-warning mb-3';
                }
                return true;
            }
            
            errorDiv.style.display = 'none';
            return true;
        }
        
        $(document).ready(function () {
            let currentAddresses = [];
            let popovers = {};

            @if (isset($order))
                // Pre-populate form for edit mode
                setTimeout(function () {
                    // Set customer
                    var customerOption = new Option(
                        '{{ $order->user->name ?? '' }} - {{ $order->user->email ?? '' }}',
                        '{{ $order->user_id }}', true, true);
                    $('#customer_id').append(customerOption).trigger('change');

                    // Load customer details and then set addresses
                    loadCustomerDetails('{{ $order->user_id }}').then(function () {
                        // Set billing address from database
                        // Set billing address from database
                        @if (isset($billingAddress))
                            var billingAddr = {
                                id: {{ $billingAddress->id }},
                                name: '{{ addslashes($billingAddress->name) }}',
                                email: '{{ addslashes($billingAddress->email) }}',
                                phone: '{{ addslashes($billingAddress->phone) }}',
                                address: '{{ addslashes($billingAddress->address) }}',
                                country: '{{ $billingAddress->country }}',
                                state: '{{ $billingAddress->state }}',
                                city: '{{ $billingAddress->city }}',
                                zip_code: '{{ addslashes($billingAddress->zip_code) }}',
                                country_name: '{{ addslashes($billingAddress->locationCountry?->name) }}',
                                state_name: '{{ addslashes($billingAddress->locationState?->name) }}',
                                city_name: '{{ addslashes($billingAddress->locationCity?->name) }}'
                            };
                            updateAddressDisplay(billingAddr, 'billing');
                        @endif

                            // Set shipping address from database
                            @if (isset($shippingAddress))
                                var shippingAddr = {
                                    id: {{ $shippingAddress->id }},
                                    name: '{{ addslashes($shippingAddress->name) }}',
                                    email: '{{ addslashes($shippingAddress->email) }}',
                                    phone: '{{ addslashes($shippingAddress->phone) }}',
                                    address: '{{ addslashes($shippingAddress->address) }}',
                                    country: '{{ $shippingAddress->country }}',
                                    state: '{{ $shippingAddress->state }}',
                                    city: '{{ $shippingAddress->city }}',
                                    zip_code: '{{ addslashes($shippingAddress->zip_code) }}',
                                    country_name: '{{ addslashes($shippingAddress->locationCountry?->name) }}',
                                    state_name: '{{ addslashes($shippingAddress->locationState?->name) }}',
                                    city_name: '{{ addslashes($shippingAddress->locationCity?->name) }}'
                                };
                                updateAddressDisplay(shippingAddr, 'shipping');
                            @endif
                                                                            });

                    // Load existing products
                    @if ($order->orderProducts && count($order->orderProducts) > 0)
                        $('.product-row').remove();
                        @foreach ($order->orderProducts as $index => $orderProduct)
                            var productRow = `
                                                                                                                                                <div class="row product-row pt-2 text-center align-items-center">
                                                                                                                                                    <div class="col-md-3 mb-2">
                                                                                                                                                        <select class="form-control product-select" name="products[]" data-row="{{ $index }}" style="width: 100%;">
                                                                                                                                                            <option value="{{ $orderProduct->product_id }}" selected>{{ $orderProduct->product_name }}</option>
                                                                                                                                                        </select>
                                                                                                                                                        <div class="col-md-quantity float-left ml-2" style="text-align: left;">
                                                                                                                                                            <small class="text-secondary text-success">
                                                                                                                                                                Quantity: <span class="show-available-qty text-danger"></span>
                                                                                                                                                            </small>
                                                                                                                                                        </div>
                                                                                                                                                    </div>
                                                                                                                                                     <div class="col-md-4 mb-2">
                                                                                                                                                            <div class="product-details" style="padding-bottom: 0px;">
                                                                                                                                                                -
                                                                                                                                                            </div>
                                                                                                                                                        </div>

                                                                                                                                                    <div class="col-md-1 pb-4">
                                                                                                                                                        <input type="number" class="form-control form-control-customr product-quantity" 
                                                                                                                                                               name="quantity[]" value="{{ $orderProduct->qty }}" min="1" readonly
                                                                                                                                                               oninput="validateQuantity(this)" required>
                                                                                                                                                    </div>
                                                                                                                                                    <input type="hidden" class="product-cost-price" value="{{ $orderProduct->price }}">
                                                                                                                                                    <div class="col-md-2 pb-4">
                                                                                                                                                        <input type="number" class="form-control form-control-customr product-price" 
                                                                                                                                                               name="price[]" value="{{ $orderProduct->price }}" @if (!Auth::user()->hasPermission('sales.orders.price-editable')) readonly @endif>
                                                                                                                                                    </div>
                                                                                                                                                    <div class="col-md-2 pb-4">
                                                                                                                                                        <div class="row">
                                                                                                                                                            <div class="col-10 pe-3">
                                                                                                                                                                <input type="number" class="form-control form-control-customr product-amount" 
                                                                                                                                                                       name="amount[]" value="{{ $orderProduct->amount }}" readonly>
                                                                                                                                                            </div>
                                                                                                                                                             <div class="col-1 ps-1 d-flex justify-content-end close-md-products">
                                                                                                                                                                  <button type="button" style="justify-self: center;" class="btn-close remove-row p-0 {{ count($order->orderProducts) > 1 ? '' : 'd-none' }}">
                                                                                                                                                                    <i class="fa-regular fa-circle-xmark"></i>
                                                                                                                                                                </button>
                                                                                                                                                    </div>
                                                                                                                                                        </div>
                                                                                                                                                    </div>

                                                                                                                                                </div>
                                                                                                                                            `;
                            $('#product-list').append(productRow);
                            $('.product-row:last .product-select').select2({
                                placeholder: 'Search and select product',
                                allowClear: true,
                                ajax: {
                                    url: productsearch,
                                    dataType: 'json',
                                    delay: 250,
                                    data: function (params) {
                                        var data = {
                                            q: params.term || '',
                                            customer_id: $('#customer_id').val() || ''
                                        };
                                        @if (isset($order))
                                            data.order_id = {{ $order->id }};
                                        @endif
                                                                                                                                                        return data;
                                    },
                                    processResults: function (data) {
                                        return {
                                            results: data.data.map(function (product) {
                                                return {
                                                    id: product.id,
                                                    text: product.name + ' -' + (
                                                        product.sale_price ||
                                                        product.price),
                                                    product: product
                                                };
                                            })
                                        };
                                    },
                                    cache: true
                                },
                                templateResult: formatProduct,
                                templateSelection: formatProductSelection
                            });
                            loadProductStock('{{ $orderProduct->product_id }}', $('.product-row:last'));
                            // Load product details for edit mode
                            (function (productId, $currentRow) {
                                $.ajax({
                                    url: productsearch,
                                    data: {
                                        product_id: productId,
                                        order_id: {{ $order->id }},
                                        customer_id: $('#customer_id').val() || ''
                                    },
                                    success: function (response) {
                                        var product = response.data.find(p => p.id ==
                                            productId);
                                        if (product) {
                                            var detailsHtml =
                                                '<div style="display: flex;text-align: left; font-size: 12px; padding-bottom: 20px;">';
                                            detailsHtml += '<img src="' + (product
                                                .image_url || '/images/no-image.png') +
                                                '" class="rounded" style="margin-right: 10px;height: 40px;width: 40px;"/>';
                                            detailsHtml += '<div><strong>' + product.name +
                                                '</strong><br>';
                                            detailsHtml += 'Category: ' + (product

                                                .category_name || '-') + ' | SKU: ' +
                                                (product.sku || '-') + ' | Price: $' + (product.price) + ' | Sale Price: $' + (product.sale_price) + ' | Wholesale Price: ' + (product.wholesale_price);


                                            // Store original price and group discount data for edit mode


                                            let priceToShow = 0;
                                            
                                            if (customerType === "0" || customerType === 0) {
                                                priceToShow = product.sale_price && Number(product.sale_price) < Number(product.price)
                                                    ? product.sale_price
                                                    : product.price;
                                            } else {
                                                priceToShow = product.wholesale_price

                                            }

                                            $currentRow.data('original-price', priceToShow);
                                            $currentRow.data('group-discount', product.group_wise_discount || null);

                                            detailsHtml += '</div>';
                                            detailsHtml += '</div>';
                                            $currentRow.find('.product-details').html(
                                                detailsHtml);
                                        }
                                    }
                                });
                            })('{{ $orderProduct->product_id }}', $('.product-row:last'));
                        @endforeach
                        $('#subtotal').val('{{ $order->amount }}');
                        $('#tax_amount').val('{{ $order->tax_amount }}');
                        $('#discount_value').val('{{ $order->discount_amount ?? 0 }}');
                        $('#discount_type').val('{{ $order->discount_type ?? 'amount' }}');
                        $('#discount_amount').val('{{ $order->discount_total_amount }}');
                        $('#total').val('{{ $order->sub_total }}');

                        // Load existing charges
                        @if ($order->charges)
                            var chargesData = @json(json_decode($order->charges, true));
                            if (chargesData && Object.keys(chargesData).length > 0) {
                                $('.single-charge-row').remove();
                                Object.keys(chargesData).forEach(function (chargeId, index) {
                                    var amount = chargesData[chargeId];
                                    var chargeRow =
                                        `<div class="row single-charge-row mb-3"><div class="col-md-6 col-md-charges"><select name="charges[]" class="form-control charges-select" required><option value="${chargeId}" selected>Loading...</option></select></div><div class="col-md-5"><input type="number" class="form-control charges-amount" name="charges_amount[]" placeholder="Enter amount" value="${amount}" step="0.01" min="0"></div><div class="col-md-1 d-flex align-items-center"><button type="button" class="btn-close remove-charge-row ${index === 0 ? 'd-none' : ''}"><i class="fa-regular fa-circle-xmark"></i></button></div></div>`;
                                    $('#charges-container').append(chargeRow);

                                    // Initialize Select2 for this charge row
                                    $('.charges-select:last').select2({
                                        placeholder: 'Choose Charges',
                                        allowClear: true,
                                        width: '100%',
                                        ajax: {
                                            url: changesDropdownUrl,
                                            dataType: 'json',
                                            delay: 250,
                                            data: function (params) {
                                                return {
                                                    q: params.term || ''
                                                };
                                            },
                                            processResults: function (data) {
                                                return {
                                                    results: data.map(function (charge) {
                                                        return {
                                                            id: charge.id,
                                                            text: charge
                                                                .charges_name
                                                        };
                                                    })
                                                };
                                            },
                                            cache: true
                                        }
                                    });

                                    // Load actual charge name
                                    (function (currentChargeId, currentSelect) {
                                        $.ajax({
                                            url: changesDropdownUrl,
                                            method: 'GET',
                                            success: function (data) {
                                                var charge = data.find(function (c) {
                                                    return c.id ==
                                                        currentChargeId;
                                                });
                                                if (charge) {
                                                    // Clear existing options and add the correct one
                                                    currentSelect.empty();
                                                    var option = new Option(charge
                                                        .charges_name, charge
                                                        .id, true, true);
                                                    currentSelect.append(option)
                                                        .trigger('change');
                                                }
                                            }
                                        });
                                    })(chargeId, $('.charges-select:last'));
                                });
                                $('#total_charges_amount').val('{{ $order->charges_totalamount }}');
                                $('#total_charges_display').val('{{ $order->charges_totalamount }}');
                            }
                        @endif

                            // Load existing tax
                            @if ($order->tax_percent)
                                var taxOption = new Option('Loading...', '{{ $order->tax_percent }}', true,
                                    true);
                                $('#tax_rate').append(taxOption).trigger('change');

                                // Load actual tax name
                                setTimeout(function () {
                                    $.ajax({
                                        url: taxeslist,
                                        method: 'GET',
                                        success: function (data) {
                                            var tax = data.find(function (t) {
                                                return t.percentage ==
                                                    '{{ $order->tax_percent }}';
                                            });
                                            if (tax) {
                                                $('#tax_rate').empty();
                                                var option = new Option(tax.name + ' (' +
                                                    tax.percentage + '%)', tax
                                                    .percentage, true, true);
                                                $('#tax_rate').append(option).trigger(
                                                    'change');
                                            }
                                        }
                                    });
                                }, 500);
                            @endif
                    @endif
                                                                        }, 1000);

                // Set terms and conditions for edit mode (completely separate)
                @if ($order->terms_conditions)
                    setTimeout(function () {
                        var termsData = @json(json_decode($order->terms_conditions, true));
                        if (termsData && termsData.length > 0) {
                            $.ajax({
                                url: termsConditionsUrl,
                                method: 'GET',
                                success: function (response) {
                                    // Clear any existing options first
                                    $('#terms_conditions').empty();
                                    // Remove duplicates from termsData
                                    var uniqueTerms = [...new Set(termsData)];
                                    uniqueTerms.forEach(function (termId) {
                                        var term = response.terms.find(function (t) {
                                            return t.id == termId;
                                        });
                                        if (term) {
                                            var option = new Option(term.name, term.id,
                                                true, true);
                                            $('#terms_conditions').append(option);
                                        }
                                    });
                                    $('#terms_conditions').trigger('change');
                                }
                            });
                        }
                    }, 1200);
                @endif
            @endif

            $('#customer_id').select2({
                placeholder: 'Search and select customer',
                allowClear: true,
                ajax: {
                    url: customersearch,
                    dataType: 'json',
                    delay: 250,
                    data: function (params) {
                        return {
                            keyword: params.term || '',
                            page: params.page
                        };
                    },
                    processResults: function (data, params) {
                        params.page = params.page || 1;
                        return {
                            results: data.data.data.map(function (customer) {
                                return {
                                    id: customer.id,
                                    // text: customer.name + ' - ' + customer.email,
                                    // name: customer.name,
                                    text: customer.display_name,     // ✔ using display_name
                                    name: customer.display_name, 
                                    email: customer.email,
                                };
                            }),
                            pagination: {
                                more: data.data.has_more_pages || false
                            }
                        };
                    },
                    cache: true
                },
                templateResult: customer => customer.loading ? 'Searching...' : $(`<div><strong>${customer.name}</strong><br><small>${customer.email}</small></div>`),
                templateSelection: customer => customer.name || customer.text
            })
                .on('select2:select', e => loadCustomerDetails(e.params.data.id))
                .on('select2:unselecting', () => {
                    $('#customer-details').addClass('d-none');
                    $('#is_cash_sales_div').addClass('d-none');
                    $('#credit_limit_summary').addClass('d-none');
                    currentAddresses = [];
                    popovers = {};
                    $('.show_product_details').addClass('d-none');
                    window.customerCreditLimit = 0;
                    window.customerBalance = 0;
                    window.customerAvailableCredit = 0;
                });

            /* ---------- POPOVERS (shipping / billing) ---------- */
            initPopover('shippingPopoverTrigger', 'shipping');
            initPopover('billingPopoverTrigger', 'billing');

            function initPopover(triggerId, type) {
                const trigger = document.getElementById(triggerId);
                if (!trigger) return;

                popovers[type] = new bootstrap.Popover(trigger, {
                    html: true,
                    trigger: 'click',
                    placement: 'bottom',
                    sanitize: false,
                    content: () => generatePopoverContent(type)
                });

                trigger.addEventListener('click', e => e.preventDefault());

                trigger.addEventListener('shown.bs.popover', function () {
                    document.querySelectorAll('.address-item').forEach(item => {
                        item.addEventListener('click', function () {
                            const id = parseInt(this.dataset.addressId);
                            const addr = currentAddresses.find(a => a.id === id);
                            if (addr) {
                                updateAddressDisplay(addr, type);
                                popovers[type].hide();
                            }
                        });
                    });

                    document.querySelector('.new-address-btn')?.addEventListener('click', () => {
                        $('#addAddressModal').modal('show');
                        popovers[type].hide();
                    });

                    const outside = e => {
                        const popoverEl = document.querySelector('.popover');
                        if (popoverEl && !popoverEl.contains(e.target) && !trigger.contains(e.target)) {
                            popovers[type].hide();
                            document.removeEventListener('click', outside);
                        }
                    };
                    setTimeout(() => document.addEventListener('click', outside), 0);
                });
            }

            function generatePopoverContent(type) {
                let list = '';
                if (currentAddresses.length) {
                    currentAddresses.forEach(a => {
                        list += `<li class="address-item" data-address-id="${a.id}"
                                                                style="cursor:pointer;padding:8px;border-bottom:1px solid #eee;">
                                                                <address class="mb-0">${a.name}<br>${a.address}</address>
                                                             </li>`;
                    });
                } else {
                    list = '<div class="p-2 text-center text-muted">No addresses found</div>';
                }
                return `
                                                <div class="scrollable-address-list" style="max-height:300px;overflow-y:auto;">${list}</div>
                                                <div class="popover-footer p-2 border-top">
                                                    <button class="btn btn-sm btn-outline-primary w-100 new-address-btn">
                                                        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none"
                                                             viewBox="0 0 24 24" stroke="currentColor">
                                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                                  d="M12 4v16m8-8H4"/>
                                                        </svg>
                                                        New Address
                                                    </button>
                                                </div>`;
            }

            function updateAddressDisplay(addr, type) {
                $(`#${type}-name`).text(addr.name || '-');
                $(`#${type}-email`).text(addr.email || '-');
                $(`#${type}-phone`).text(addr.phone || '-');

                // Create formatted address with location names
                let formattedAddress = addr.address || '';
                if (addr.city_name || addr.state_name || addr.country_name || addr.zip_code) {
                    const locationParts = [addr.city_name, addr.state_name, addr.country_name, addr.zip_code].filter(Boolean);
                    if (locationParts.length > 0) {
                        formattedAddress += (formattedAddress ? '<br>' : '') + locationParts.join(', ');
                    }
                }
                $(`#${type}-address-display`).html(formattedAddress || '-');
                $(`#${type}_address_id`).val(addr.id);

                // Populate hidden form fields
                const nameParts = (addr.name || '').split(' ');
                $(`#${type}_first_name`).val(nameParts[0] || '');
                $(`#${type}_last_name`).val(nameParts.slice(1).join(' ') || '');
                $(`#${type}_email`).val(addr.email || '');
                $(`#${type}_phone`).val(addr.phone || '');
                $(`#${type}_address_1`).val(addr.address || '');
                $(`#${type}_address_2`).val('');
                $(`#${type}_country_id`).val(addr.country || '');
                $(`#${type}_state_id`).val(addr.state || '');
                $(`#${type}_city_id`).val(addr.city || '');
                $(`#${type}_postal_code`).val(addr.zip_code || '');
            }

            function loadCustomerDetails(customerId) {

                return new Promise((resolve, reject) => {
                    if (!customerId) {
                        $('#customer-details').addClass('d-none');
                        $('#is_cash_sales_div').addClass('d-none');
                        $('.show_product_details').addClass('d-none');
                        currentAddresses = [];
                        popovers = {};
                        resolve();
                        return;
                    }
                    $('.show_product_details').removeClass('d-none');
                    $('.product-row').remove();
                    $('#add-product').trigger('click');

                    $.ajax({
                        url: customerdetails,
                        method: 'GET',
                        data: {
                            id: customerId
                        },
                        success: function (response) {
                            if (response.success && response.customer) {
                                var customer = response.customer;
                                currentAddresses = customer.addresses || [];
                                customerType = customer.customer_type || '';
                                
                                // Update customer default discount
                                $('#customer_default_discount').text(customer.default_discount || '0');
                                $('#customer_type').text(customer.customer_type_name || '-');
                                $('#payment_terms').val(customer.payment_terms ? customer.payment_terms : 0);
                                $('#customer_payment_terms_div').removeClass('d-none');
                                
                                // Set global payment terms variable
                                window.customerPaymentTerms = parseInt(customer.payment_terms) || 0;


                                // Store customer default discount for calculations
                                window.customerDefaultDiscount = parseFloat(customer.default_discount) || 0;

                                // Calculate and display credit limit summary
                                var creditLimit = parseFloat(customer.credit_limit) || 0;
                                if (customerType === '1' || customerType === 1) {
                                    // Calculate balance for wholesalers
                                    var requestData = { customer_id: customerId };
                                    @if (isset($order))
                                        requestData.exclude_order_id = {{ $order->id }};
                                    @endif
                                    
                                    $.ajax({
                                        url: '{{ route("customers.credit.balance") }}',
                                        method: 'GET',
                                        data: requestData,
                                        success: function(creditData) {
                                            var balance = parseFloat(creditData.balance) || 0;
                                            var availableCredit = creditLimit - balance;
                                            
                                            // Store for validation
                                            window.customerCreditLimit = creditLimit;
                                            window.customerBalance = balance;
                                            window.customerAvailableCredit = availableCredit;
                                            
                                            // Display credit summary
                                            $('#credit_limit_display').text('$' + creditLimit.toFixed(2));
                                            $('#balance_display').text('$' + balance.toFixed(2));
                                            $('#available_credit_display').text('$' + availableCredit.toFixed(2))
                                                .removeClass('text-success text-danger')
                                                .addClass(availableCredit > 0 ? 'text-success' : 'text-danger');
                                            $('#credit_limit_summary').removeClass('d-none');
                                            
                                            // Update global variables and check credit limit
                                            customerCreditLimit = creditLimit;
                                            customerPendingOrders = balance;
                                            customerType = customer.customer_type || '0';
                                            customerPaymentTerms = window.customerPaymentTerms || 0;
                                            
                                            checkCreditLimit();
                                        },
                                        error: function(xhr) {
                                            console.error('Error loading credit balance:', xhr);
                                            // Still show the section with credit limit
                                            window.customerCreditLimit = creditLimit;
                                            window.customerBalance = 0;
                                            window.customerAvailableCredit = creditLimit;
                                            
                                            $('#credit_limit_display').text('$' + creditLimit.toFixed(2));
                                            $('#balance_display').text('$0.00');
                                            $('#available_credit_display').text('$' + creditLimit.toFixed(2));
                                            $('#credit_limit_summary').removeClass('d-none');
                                        }
                                    });
                                } else {
                                    $('#credit_limit_summary').addClass('d-none');
                                    window.customerCreditLimit = 0;
                                    window.customerBalance = 0;
                                    window.customerAvailableCredit = 0;
                                      checkCreditLimit();
                                }

                                // Only set default addresses if not in edit mode
                                @if (!isset($order))
                                    /* Billing = first/default address or customer info */
                                    const billingAddr = currentAddresses.find(a => a.selected) || currentAddresses[0];
                                    if (billingAddr) {
                                        updateAddressDisplay(billingAddr, 'billing');
                                    } else {
                                        $('#billing-name').text(customer.name);
                                        $('#billing-email').text(customer.email);
                                        $('#billing-phone').text(customer.phone || '-');
                                        $('#billing-address-display').html((customer.address || '-').replace(/\n/g, '<br>'));
                                        $('#billing_address_id').val('');
                                    }

                                    /* Shipping = first/default address */
                                    const def = currentAddresses.find(a => a.selected) || currentAddresses[0];
                                    if (def) {
                                        updateAddressDisplay(def, 'shipping');
                                    } else {
                                        $('#shipping-name').text('No address');
                                        $('#shipping-email, #shipping-phone, #shipping-address-display').text('');
                                        $('#shipping_address_id').val('');
                                    }
                                @endif
                                                            if (customerId === "104" || customerId == 104) {

                                    $('#is_cash_sales_div').removeClass('d-none');
                                    $('#customer-details').addClass('d-none');
                                } else {
                                    $('#customer-details').removeClass('d-none');
                                    $('#is_cash_sales_div').addClass('d-none');
                                }

                                // Apply discounts to existing products when customer changes
                                $('.product-row').each(function () {
                                    var $row = $(this);
                                    if ($row.find('.product-select').val()) {
                                        // applyDiscounts($row);
                                    }
                                });
                                calculateTotal();

                                resolve();
                            } else {
                                reject('Customer not found');
                            }
                        },
                        error: function () {
                            alert('Error loading customer details');
                            reject('Error loading customer details');
                        }
                    });
                });
            }
            $('#savenewAddress').on('click', function () {
                let customerId = $('#customer_id').val();

                if (!customerId) {
                    toastr.error('Please select a customer first!');
                    return;
                }

                let formData = {
                    customer_id: customerId,
                    address_full_name: $('input[name="address_full_name"]').val(),
                    address_phone: $('input[name="address_phone"]').val(),
                    address_line: $('input[name="address_line"]').val(),
                    address_email: $('input[name="address_email"]').val(),
                    address_country: $('#address_country').val(),
                    address_state: $('#address_state').val(),
                    address_city: $('#address_city').val(),
                    is_default: $('#is_default').is(':checked') ? 1 : 0,
                    _token: $('meta[name="csrf-token"]').attr('content')
                };

                $.ajax({
                    url: "{{ route('sales.customers.address.store') }}",
                    method: 'POST',
                    data: formData,
                    success: function (response) {
                        if (response.status) {
                            Botble.showSuccess(response.message);

                            // Add new address to currentAddresses array
                            currentAddresses.push(response.data);

                            // Close modal and reset form
                            $('#addAddressModal').modal('hide');
                            $('#addAddressModal').find('input, select').val('');
                            $('#is_default').prop('checked', false);

                            // Refresh popovers
                            loadCustomerDetails(customerId);
                        }
                    },
                    error: function (xhr) {
                        let err = xhr.responseJSON?.errors;
                        if (err) {
                            // Show only the first error message
                            const firstError = Object.values(err)[0][0];
                            Botble.showError(firstError);
                        } else {
                            Botble.showError('Something went wrong.');
                        }
                    }
                });
            });

            $('#savenewcustomer').on('click', function (e) {
                e.preventDefault();

                // Validate required fields
                var name = $('#add-customer input[name="customer_name"]').val().trim();
                var phone = $('#add-customer input[name="customer_phone"]').val().trim();
                var address = $('#add-customer input[name="customer_address"]').val().trim();
                var countryId = $('#country_id').val();
                var stateId = $('#state_id').val();
                var cityId = $('#city_id').val();
                var zip_code = $('#zip_code').val();

                if (!name) {
                    Botble.showError('Name is required');
                    return;
                }
                if (!phone) {
                    Botble.showError('Phone is required');
                    return;
                }
                if (!address) {
                    Botble.showError('Address is required');
                    return;
                }
                if (!countryId) {
                    Botble.showError('Country is required');
                    return;
                }
                if (!stateId) {
                    Botble.showError('State is required');
                    return;
                }
                if (!cityId) {
                    Botble.showError('City is required');
                    return;
                }
                if (!zip_code) {
                    Botble.showError('Zip Code is required');
                    return;
                }

                var emailValue = $('#add-customer input[name="customer_email"]').val();
                var formData = {
                    name: name,
                    phone: phone,
                    address: address,
                    country_id: countryId,
                    state_id: stateId,
                    city_id: cityId,
                    zip_code: zip_code,
                    password: '111111',
                    password_confirmation: '111111',
                    _token: $('meta[name="csrf-token"]').attr('content')
                };

                if (emailValue && emailValue.trim() !== '') {
                    formData.email = emailValue;
                }

                $.ajax({
                    url: customercreate,
                    method: 'POST',
                    data: formData,
                    success: function (response) {
                        if (response.error === false) {
                            if (response.data && response.data !== null) {
                                var customer = response.data;
                                var customerText = customer.name;
                                if (customer.email) {
                                    customerText += ' - ' + customer.email;
                                }

                                var newOption = new Option(customerText, customer.id, true,
                                    true);
                                $('#customer_id').append(newOption).trigger('change');

                                loadCustomerDetails(customer.id);
                            }

                            $('#add-customer').modal('hide');
                            $('#add-customer input').val('');
                            $('#add-customer select').val('').trigger('change');
                            Botble.showSuccess(response.message ||
                                'Customer created successfully!');
                        } else {
                            Botble.showError('Something went wrong. Customer not created.');
                        }
                    },
                    error: function (xhr) {
                        var response = xhr.responseJSON;
                        var errorMessage = 'Error creating customer. Please try again.';

                        if (response && response.errors) {
                            errorMessage = '';
                            $.each(response.errors, function (field, messages) {
                                errorMessage += messages.join(', ') + '\n';
                            });
                        }

                        Botble.showError(errorMessage);
                    }
                });

            });


            // Initialize Select2 for country dropdown
            $('#country_id').select2({
                dropdownParent: $('#add-customer'),
                placeholder: 'Select country...',
                ajax: {
                    url: Countrylist,
                    dataType: 'json',
                    delay: 250,
                    data: function (params) {
                        return {
                            q: params.term || ''
                        };
                    },
                    processResults: function (data) {
                        return {
                            results: data.data.map(function (country) {
                                return {
                                    id: country.id,
                                    text: country.name
                                };
                            })
                        };
                    },
                    cache: true
                }
            });

            // Initialize Select2 for state dropdown
            $('#state_id').select2({
                dropdownParent: $('#add-customer'),
                placeholder: 'Select state...'
            });

            // Initialize Select2 for city dropdown
            $('#city_id').select2({
                dropdownParent: $('#add-customer'),
                placeholder: 'Select city...'
            });

            // Country change event
            $('#country_id').on('change', function () {
                var countryId = $(this).val();
                loadStates(countryId);
                $('#city_id').empty().append('<option value="">Select city...</option>');
            });

            $('#state_id').on('change', function () {
                var stateId = $(this).val();
                var countryId = $('#country_id').val();
                loadCities(stateId, countryId);
            });

            // Initialize Select2 for address modal country dropdown
            $('#address_country').select2({
                dropdownParent: $('#addAddressModal'),
                placeholder: 'Select country...',
                allowClear: true,
                ajax: {
                    url: AddressCountrylist,
                    dataType: 'json',
                    delay: 250,
                    data: function (params) {
                        return {
                            q: params.term || ''
                        };
                    },
                    processResults: function (data) {
                        return {
                            results: data.data.map(function (country) {
                                return {
                                    id: country.id,
                                    text: country.name
                                };
                            })
                        };
                    },
                    cache: true
                }
            });
            // Initialize Select2 for address modal state dropdown
            $('#address_state').select2({
                dropdownParent: $('#addAddressModal'),
                placeholder: 'Select state...'
            });
            // Initialize Select2 for address modal city dropdown
            $('#address_city').select2({
                dropdownParent: $('#addAddressModal'),
                placeholder: 'Select city...'
            });
            // Address modal country change event
            $('#address_country').on('change', function () {
                var countryId = $(this).val();
                loadAddressStates(countryId);
                $('#address_city').empty().append('<option value="">Select city...</option>');
            });
            $('#address_state').on('change', function () {
                var stateId = $(this).val();
                var countryId = $('#address_country').val();
                loadAddressCities(stateId, countryId);
            });
        });

        function loadStates(countryId) {
            if (!countryId) {
                $('#state_id').empty().append('<option value="">Select state...</option>');
                return;
            }

            $.ajax({
                url: Statelist,
                method: 'GET',
                data: {
                    country_id: countryId
                },
                success: function (response) {
                    $('#state_id').empty();
                    if (response.data && response.data.length > 0) {
                        $.each(response.data, function (index, state) {
                            $('#state_id').append('<option value="' + state.id + '">' + state.name +
                                '</option>');
                        });
                    }
                }
            });
        }

        function loadCities(stateId, countryId) {
            if (!stateId) {
                $('#city_id').empty().append('<option value="">Select city...</option>');
                return;
            }

            $.ajax({
                url: Citylist,
                method: 'GET',
                data: {
                    state_id: stateId,
                    country_id: countryId
                },
                success: function (response) {
                    $('#city_id').empty();
                    if (response.data && response.data.length > 0) {
                        $.each(response.data, function (index, city) {
                            $('#city_id').append('<option value="' + city.id + '">' + city.name +
                                '</option>');
                        });
                    }
                }
            });
        }

        function openCustomerModal() {
            $('#add-customer').modal('show');
        }

        function editShipping() {
            // Load current shipping data into modal
            $('#shipping_name').val($('#shipping-name').text());
            $('#shipping_email_modal').val($('#shipping-email').text());
            $('#shipping_phone_modal').val($('#shipping-phone').text());
            $('#shipping_address_modal').val($('#shipping-address').text());

            // Initialize dropdowns
            initShippingDropdowns();
            $('#edit-shipping').modal('show');
        }

        function initShippingDropdowns() {
            $('#shipping_country_modal').select2({
                dropdownParent: $('#edit-shipping'),
                placeholder: 'Select country...',
                ajax: {
                    url: Countrylist,
                    dataType: 'json',
                    delay: 250,
                    data: function (params) {
                        return {
                            q: params.term || ''
                        };
                    },
                    processResults: function (data) {
                        return {
                            results: data.data.map(function (country) {
                                return {
                                    id: country.id,
                                    text: country.name
                                };
                            })
                        };
                    }
                }
            });

            $('#shipping_state_modal').select2({
                dropdownParent: $('#edit-shipping'),
                placeholder: 'Select state...'
            });
            $('#shipping_city_modal').select2({
                dropdownParent: $('#edit-shipping'),
                placeholder: 'Select city...'
            });

            $('#shipping_country_modal').on('change', function () {
                var countryId = $(this).val();
                loadShippingStates(countryId);
                $('#shipping_city_modal').empty().append('<option value="">Select city...</option>');
            });

            $('#shipping_state_modal').on('change', function () {
                var stateId = $(this).val();
                loadShippingCities(stateId);
            });
        }

        function loadShippingStates(countryId) {
            if (!countryId) return;
            $.ajax({
                url: Statelist,
                data: {
                    country_id: countryId
                },
                success: function (response) {
                    $('#shipping_state_modal').empty();
                    if (response.data && response.data.length > 0) {
                        $.each(response.data, function (index, state) {
                            $('#shipping_state_modal').append('<option value="' + state.id + '">' +
                                state.name + '</option>');
                        });
                    }
                }
            });
        }

        function loadShippingCities(stateId) {
            if (!stateId) return;
            $.ajax({
                url: Citylist,
                data: {
                    state_id: stateId
                },
                success: function (response) {
                    $('#shipping_city_modal').empty();
                    if (response.data && response.data.length > 0) {
                        $.each(response.data, function (index, city) {
                            $('#shipping_city_modal').append('<option value="' + city.id + '">' + city
                                .name + '</option>');
                        });
                    }
                }
            });
        }

        $(document).on('click', '#save-shipping', function () {
            var addressParts = [];
            if ($('#shipping_address_modal').val()) addressParts.push($('#shipping_address_modal').val());
            if ($('#shipping_city_modal option:selected').text() && $('#shipping_city_modal').val()) addressParts
                .push($('#shipping_city_modal option:selected').text());
            if ($('#shipping_state_modal option:selected').text() && $('#shipping_state_modal').val()) addressParts
                .push($('#shipping_state_modal option:selected').text());
            if ($('#shipping_country_modal option:selected').text() && $('#shipping_country_modal').val())
                addressParts.push($('#shipping_country_modal option:selected').text());


            $('#shipping-name').text($('#shipping_name').val());
            $('#shipping-email').text($('#shipping_email_modal').val());
            $('#shipping-phone').text($('#shipping_phone_modal').val());
            $('#shipping-address').text(addressParts.join(', '));


            // $('#shipping_first_name').val($('#shipping_name').val().split(' ')[0] || '');
            // $('#shipping_last_name').val($('#shipping_name').val().split(' ').slice(1).join(' ') || '');
            // $('#shipping_email').val($('#shipping_email_modal').val());
            $('#shipping_phone').val($('#shipping_phone_modal').val());
            $('#shipping_address_1').val($('#shipping_address_modal').val());
            $('#shipping_country_id').val($('#shipping_country_modal').val());
            $('#shipping_state_id').val($('#shipping_state_modal').val());
            $('#shipping_city_id').val($('#shipping_city_modal').val());

            $('#edit-shipping').modal('hide');
            Botble.showSuccess('Shipping address updated!');
        });


        $('.product-select').select2({
            placeholder: 'Search and select product',
            allowClear: true,
            ajax: {
                url: productsearch,
                dataType: 'json',
                delay: 250,
                data: function (params) {
                    var data = {
                        q: params.term || '',
                        customer_id: $('#customer_id').val() || ''
                    };
                    @if (isset($order))
                        data.order_id = {{ $order->id }};
                    @endif
                                                return data;
                },
                processResults: function (data) {
                    return {
                        results: data.data.map(function (product) {
                            return {
                                id: product.id,
                                text: product.name + ' - ' + (product.price),
                                product: product
                            };
                        })
                    };
                },
                cache: true
            },
            templateResult: formatProduct,
            templateSelection: formatProductSelection
        });


        // Handle product selection
        $(document).on('select2:select', '.product-select', function (e) {
            var product = e.params.data.product;
            var $row = $(this).closest('.product-row');
            //  $row.find('.product-cost-price').val(product.price);
            $row.find('.product-cost-price').val(product.cost_price);
            // Fill product data
            $row.find('.product-name').val(product.name);
            let priceToShow = 0;
            if (customerType === 0 || customerType === "0") {
                priceToShow = product.sale_price && Number(product.sale_price) < Number(product.price)
                    ? product.sale_price
                    : product.price;
            } else {
                priceToShow = product.wholesale_price

            }

            $row.data('original-price', priceToShow);
            $row.data('group-discount', product.group_wise_discount || null);

            $row.find('.product-price').val(priceToShow);

            // Display product details with image
            var detailsHtml =
                '<div style="display: flex;text-align: left; font-size: 12px; padding-bottom: 20px;">';
            detailsHtml += '<img src="' + (product.image_url || '/images/no-image.png') +
                '" class="rounded" style="margin-right: 10px;height: 40px;width: 40px;"/>';
            detailsHtml += '<div><strong>' + product.name + '</strong><br>';

            detailsHtml += 'Category: ' + (product.category_name || '-') + ' | SKU: ' + (product.sku || '-') + 
                ' | Price: $' + (product.price) + ' | Sale Price: ' + (product.sale_price) + ' | Wholesale Price: ' + (product.wholesale_price);


            detailsHtml += '</div>';
            detailsHtml += '</div>';
            $row.find('.product-details').html(detailsHtml);

            $row.find('.product-quantity').val(1);

            loadProductStock(product.id, $row);

            // Apply discount calculation
            applyDiscounts($row);

            calculateTotal();
        });

        function calculateTotal() {
            var subtotal = 0;
            $('.product-amount').each(function () {
                subtotal += parseFloat($(this).val()) || 0;
            });
            $('#subtotal').val(subtotal.toFixed(2));

            // Calculate tax
            var taxRate = parseFloat($('#tax_rate').val()) || 0;
            var taxAmount = (subtotal * taxRate / 100);
            $('#tax_amount').val(taxAmount.toFixed(2));

            // Calculate discount
            var discountValue = parseFloat($('#discount_value').val()) || 0;
            var chargesAmount = parseFloat($('#total_charges_display').val()) || 0;
            var discountType = $('#discount_type').val();
            var discountAmount = 0;

            if (discountType === 'percent') {
                // Limit percentage to 100%
                if (discountValue > 100) {
                    $('#discount_value').val(100);
                    discountValue = 100;
                }
                discountAmount = (subtotal * discountValue / 100);
            } else {
                // Flat amount - cannot exceed subtotal
                if (discountValue > subtotal) {
                    $('#discount_value').val(subtotal.toFixed(2));
                    discountValue = subtotal;
                }
                discountAmount = discountValue;
            }

            $('#discount_amount').val(discountAmount.toFixed(2));


            // Calculate final total
            var shipping = parseFloat($('#shipping_amount').val()) || 0;
            var total = subtotal + taxAmount - discountAmount + shipping + chargesAmount;
            $('#total').val(total.toFixed(2));
        }

        function calculateTax() {
            calculateTotal();
        }

        function calculateDiscount() {
            calculateTotal();
        }

        // Handle discount input changes
        $(document).on('input', '#discount_value', function () {
            calculateTotal();
        });

        $(document).on('change', '#discount_type', function () {
            calculateTotal();
        });

        // Calculate amount on quantity change
        $(document).on('input', '.product-quantity', function () {
            var $row = $(this).closest('.product-row');
            applyDiscounts($row);
            calculateTotal();
        });

        // Calculate amount on sale price change
        $(document).on('input', '.product-price', function () {
            var $row = $(this).closest('.product-row');
            var costPrice = parseFloat($row.find('.product-cost-price').val()) || 0;
            var quantity = $row.find('.product-quantity').val() || 0;
            var salePrice = $(this).val() || 0;
            // if (salePrice < costPrice) {
            //     $(this).val(costPrice.toFixed(2));

            //     // Optional: show a warning
            //      Botble.showError("Selling price cannot be less than cost price!");

            //     salePrice = costPrice;
            // }
            $row.find('.product-amount').val((quantity * salePrice).toFixed(2));
            calculateTotal();
        });

        // Add new product row
        $('#add-product').on('click', function () {
            var rowCount = $('.product-row').length;
            var newRow = `
                                            <div class="row product-row text-center align-items-center pt-1">
                                                <div class="col-md-3 col-md-products mb-2">
                                                    <div class="form-group">
                                                        <select class="form-control product-select" name="products[]" data-row="${rowCount}" style="width: 100%;">
                                                            <option value="">Select Product</option>
                                                        </select>
                                                    </div>
                                                    <div class="col-md-quantity float-left ml-2" style="text-align: left;">
                                                        <small class="text-secondary text-success">
                                                            Quantity: <span class="show-available-qty text-danger"></span>
                                                        </small>
                                                    </div>
                                                </div>
                                                 <div class="col-md-4 mb-2">
                                                            <div class="product-details" style="padding-bottom: 0px;">
                                                                -
                                                            </div>
                                                    </div>

                                                <div class="col-md-1 pb-4">
                                                    <input type="number" class="form-control form-control-customr product-quantity" name="quantity[]" value="0" min="1" oninput="validateQuantity(this)" required readonly>
                                                </div>
                                                <input type="hidden" class="product-cost-price" value="0">
                                                <div class="col-md-2 pb-4">
                                                    <input type="number" class="form-control form-control-customr product-price" name="price[]" value="0.00" min="0"
                                                          @if (!Auth::user()->hasPermission('sales.orders.price-editable')) readonly @endif>
                                                </div>

                                                <div class="col-md-2 pb-4">
                                                    <div class="row">
                                                        <div class="col-10 pe-3">
                                                            <input type="number" class="form-control form-control-customr product-amount" name="amount[]" readonly value="0.00" min="0">
                                                        </div>
                                                         <div class="col-1 ps-1 d-flex justify-content-end close-md-products">
                                                                   <button type="button" class="btn-close remove-row p-0" style="justify-self: center;">
                                                                <i class="fa-regular fa-circle-xmark"></i>
                                                            </button>
                                                                </div>

                                                    </div>
                                                </div>

                                            </div>
                                        `;

            $('#product-list').append(newRow);

            // Initialize Select2 for the new row
            var $newSelect = $('.product-row:last .product-select');
            $newSelect.select2({
                placeholder: 'Search and select product',
                allowClear: true,
                ajax: {
                    url: productsearch,
                    dataType: 'json',
                    delay: 250,
                    data: function (params) {
                        var data = {
                            q: params.term || '',
                            customer_id: $('#customer_id').val() || ''
                        };
                        @if (isset($order))
                            data.order_id = {{ $order->id }};
                        @endif
                                                    return data;
                    },
                    processResults: function (data) {
                        return {
                            results: data.data.map(function (product) {
                                return {
                                    id: product.id,
                                    text: product.name + ' - ' + (product.price),
                                    product: product
                                };
                            })
                        };
                    },
                    cache: true
                },
                templateResult: formatProduct,
                templateSelection: formatProductSelection
            });

            updateRemoveButtons();
        });

        // Function to apply discounts
        function applyDiscounts($row) {
            var quantity = parseInt($row.find('.product-quantity').val()) || 1;
            var originalPrice = parseFloat($row.data('original-price')) || 0;
            var groupDiscount = $row.data('group-discount');
            var customerDiscount = window.customerDefaultDiscount || 0;
            if (originalPrice === 0) return;

            var finalPrice = originalPrice;
            var priceAfterCustomerDiscount = originalPrice;

            // Apply customer default discount first
            if (customerDiscount !== 0) {
                if (customerDiscount > 0) {
                    // Positive value = increase price
                    priceAfterCustomerDiscount = originalPrice + customerDiscount;
                } else {
                    // Negative value = decrease price
                    priceAfterCustomerDiscount = originalPrice + customerDiscount;
                }
                finalPrice = priceAfterCustomerDiscount;
            }

            // Apply group-wise product discount based on quantity
            if (groupDiscount && typeof groupDiscount === 'object') {
                var applicableDiscount = null;

                // Custom quantity range mapping
                if (quantity >= 1 && quantity <= 3) {
                    // No discount for 1-3 items
                    applicableDiscount = null;
                } else if (quantity >= 4 && quantity <= 7) {
                    // Apply 1-4 range discount for 4-7 items
                    if (groupDiscount['1-4'] && groupDiscount['1-4'].enabled == '1') {
                        applicableDiscount = groupDiscount['1-4'];
                    }
                } else if (quantity >= 8 && quantity <= 9) {
                    // Apply 5-8 range discount for 8-9 items
                    if (groupDiscount['5-8'] && groupDiscount['5-8'].enabled == '1') {
                        applicableDiscount = groupDiscount['5-8'];
                    }
                } else if (quantity >= 10 && quantity <= 11) {
                    // Apply 9-10 range discount for 10-11 items
                    if (groupDiscount['9-10'] && groupDiscount['9-10'].enabled == '1') {
                        applicableDiscount = groupDiscount['9-10'];
                    }
                } else if (quantity >= 12) {
                    // Apply 11-12 range discount for 12+ items
                    if (groupDiscount['11-12'] && groupDiscount['11-12'].enabled == '1') {
                        applicableDiscount = groupDiscount['11-12'];
                    }
                }

                if (applicableDiscount) {
                    if (applicableDiscount.type === 'percentage') {
                        finalPrice = finalPrice - (finalPrice * parseFloat(applicableDiscount.value) / 100);
                    } else if (applicableDiscount.type === 'amount' || applicableDiscount.type === 'fixed') {
                        finalPrice = finalPrice - parseFloat(applicableDiscount.value);
                    }
                }
            }

            // Ensure price doesn't go below 0
            finalPrice = Math.max(0, finalPrice);

            // Update the price field and amount
            $row.find('.product-price').val(finalPrice.toFixed(2));
            $row.find('.product-amount').val((quantity * finalPrice).toFixed(2));
        }

        $(document).on('click', '.remove-row', function () {
            $(this).closest('.product-row').remove();
            updateRemoveButtons();
            calculateTotal();
        });

        function updateRemoveButtons() {
            var $rows = $('.product-row');
            if ($rows.length > 1) {
                $rows.find('.remove-row').removeClass('d-none');
            } else {
                $rows.find('.remove-row').addClass('d-none');
            }
        }

        function initializeTaxSelect2() {
            $('#tax_rate').select2({
                placeholder: 'Select Tax',
                allowClear: true,
                width: '100%',
                ajax: {
                    url: taxeslist,
                    dataType: 'json',
                    delay: 250,
                    data: function (params) {
                        return {
                            q: params.term || ''
                        };
                    },
                    processResults: function (data) {
                        var results = [];


                        if (data && data.length > 0) {
                            data.forEach(function (tax) {
                                results.push({
                                    id: tax.percentage,
                                    text: tax.name + ' (' + tax.percentage + '%)'
                                });
                            });
                        }

                        return {
                            results: results
                        };
                    },
                    cache: true
                }
            });

            // Load default tax rate for new orders
            @if (!isset($order))
                loadDefaultTaxRate();
            @endif
                                    }

        function loadDefaultTaxRate() {
            $.ajax({
                url: taxeslist,
                method: 'GET',
                success: function (data) {
                    // Get default tax rate from settings
                    var defaultTaxRate = '{{ get_ecommerce_setting("default_tax_rate") }}';

                    if (defaultTaxRate && data && data.length > 0) {
                        var defaultTax = data.find(function (tax) {
                            return tax.id == defaultTaxRate;
                        });

                        if (defaultTax) {
                            var option = new Option(
                                defaultTax.name + ' (' + defaultTax.percentage + '%)',
                                defaultTax.percentage,
                                true,
                                true
                            );
                            $('#tax_rate').append(option).trigger('change');
                            calculateTax();
                        }
                    }
                }
            });
        }
        $(document).ready(function () {
            // Initialize Select2 for charges with AJAX
            function initializeChargesSelect2() {
                $('.charges-select').select2({
                    placeholder: 'Choose Charges',
                    allowClear: true,
                    width: '100%',
                    ajax: {
                        url: changesDropdownUrl,
                        dataType: 'json',
                        delay: 250,
                        data: function (params) {
                            return {
                                q: params.term || ''
                            };
                        },
                        processResults: function (data) {
                            return {
                                results: data.map(function (charge) {
                                    return {
                                        id: charge.id,
                                        text: charge.charges_name
                                    };
                                })
                            };
                        },
                        cache: true
                    }
                });
            }

            // Add new charge row
            $('#add-charge-row').on('click', function () {
                let newRow = `
                                                <div class="row single-charge-row mb-3">
                                                    <div class="col-md-6 col-md-charges">
                                                        <select name="charges[]" class="form-control charges-select" required>
                                                            <option value="">Choose Charges</option>
                                                        </select>
                                                    </div>
                                                    <div class="col-md-5">
                                                        <input type="number" class="form-control charges-amount" name="charges_amount[]"
                                                            placeholder="Enter amount" value="0.00" step="0.01" min="0">
                                                    </div>
                                                    <div class="col-md-1 d-flex align-items-center">
                                                        <button type="button" class="btn-close remove-charge-row">
                                                            <i class="fa-regular fa-circle-xmark"></i>
                                                        </button>
                                                    </div>
                                                </div>
                                            `;

                $('#charges-container').append(newRow);

                // Initialize Select2 for new row
                $('#charges-container .charges-select:last').select2({
                    placeholder: 'Choose Charges',
                    allowClear: true,
                    width: '100%',
                    ajax: {
                        url: changesDropdownUrl,
                        dataType: 'json',
                        delay: 250,
                        data: function (params) {
                            return {
                                q: params.term || ''
                            };
                        },
                        processResults: function (data) {
                            return {
                                results: data.map(function (charge) {
                                    return {
                                        id: charge.id,
                                        text: charge.charges_name
                                    };
                                })
                            };
                        },
                        cache: true
                    }
                });

                // Show remove buttons if more than one row
                updateRemoveButtons();
            });

            // Remove charge row
            $(document).on('click', '.remove-charge-row', function () {
                $(this).closest('.single-charge-row').remove();
                updateRemoveButtons();
                calculateTotalCharges();
            });

            // Update remove button visibility
            function updateRemoveButtons() {
                let rows = $('.single-charge-row');
                if (rows.length > 1) {
                    $('.remove-charge-row').removeClass('d-none');
                } else {
                    $('.remove-charge-row').addClass('d-none');
                }
            }

            // Calculate total charges
            function calculateTotalCharges() {
                let total = 0;
                $('.charges-amount').each(function () {
                    let amount = parseFloat($(this).val()) || 0;
                    total += amount;
                });
                $('#total_charges_amount').val(total.toFixed(2));
                $('#total_charges_display').val(total.toFixed(2));

                calculateTotal();
            }



            // Update total when amount changes
            $(document).on('input', '.charges-amount', function () {
                calculateTotalCharges();
            });

            initializeChargesSelect2();
            initializeTaxSelect2();
            initializeTermsConditions();
        });

        function initializeTermsConditions() {
            $('#terms_conditions').select2({
                placeholder: 'Select Terms & Conditions',
                allowClear: true,
                width: '100%',
                ajax: {
                    url: termsConditionsUrl,
                    dataType: 'json',
                    delay: 250,
                    data: function (params) {
                        return {
                            q: params.term || ''
                        };
                    },
                    processResults: function (data) {
                        return {
                            results: data.terms.map(function (term) {
                                return {
                                    id: term.id,
                                    text: term.name
                                };
                            })
                        };
                    },
                    cache: true
                }
            });

            // Load default terms only in create mode
            @if (!isset($order))
                $.ajax({
                    url: termsConditionsUrl,
                    method: 'GET',
                    success: function (response) {
                        if (response.defaultTerms && response.defaultTerms.length > 0) {
                            // Add default options to select
                            response.defaultTerms.forEach(function (termId) {
                                var term = response.terms.find(function (t) {
                                    return t.id == termId;
                                });
                                if (term) {
                                    var option = new Option(term.name, term.id, true, true);
                                    $('#terms_conditions').append(option);
                                }
                            });
                            $('#terms_conditions').trigger('change');
                        }
                    }
                });
            @endif
                                    }

        function updateSelectedTermsDetails() {
            var selectedValues = $('#terms_conditions').val() || [];
            var $detailsContainer = $('#selected-terms-details');

            if (selectedValues.length === 0) {
                $detailsContainer.empty();
                return;
            }

            $.ajax({
                url: termsConditionsUrl,
                method: 'GET',
                success: function (response) {
                    var html = '';
                    var selectedTerms = response.terms.filter(function (term) {
                        return selectedValues.includes(term.id.toString());
                    });

                    if (selectedTerms.length > 0) {
                        html +=
                            '<div class="card mt-3"><div class="card-header"><h4 class="mb-0">Selected Terms & Conditions</h4></div><div class="card-body">';
                        selectedTerms.forEach(function (term, index) {
                            html += '<div class="mb-3">';
                            html += '<strong>' + (index + 1) + '. ' + term.name + '</strong>';
                            if (term.description) {
                                html += '<p class="text-muted mt-1 mb-0">' + term.description + '</p>';
                            }
                            html += '</div>';
                        });
                        html += '</div></div>';
                    }

                    $detailsContainer.html(html);
                }
            });
        }

        $(document).on('change', '#terms_conditions', function () {
            updateSelectedTermsDetails();
        });

        // Load product stock
        function loadProductStock(productId, $row) {
            var requestData = {};
            @if (isset($order))
                requestData.order_id = {{ $order->id }};
            @endif

            $.ajax({
                url: productStockUrl.replace(':productId', productId),
                method: 'GET',
                data: requestData,
                success: function (response) {
                    var availableQty = response.available_qty || 0;

                    $row.find('.product-quantity').attr('max', availableQty);
                    $row.data('available-qty', availableQty);
                    $row.find('.show-available-qty').text(availableQty);

                    if (availableQty === 0) {
                        $row.find('.product-quantity').val(0).prop('readonly', true).attr('min', 0);
                    } else {
                        $row.find('.product-quantity').prop('readonly', false).attr('min', 1);
                        var currentQty = parseInt($row.find('.product-quantity').val()) || 0;
                        if (currentQty === 0) {
                            $row.find('.product-quantity').val(1);
                        } else if (currentQty > availableQty) {
                            $row.find('.product-quantity').val(availableQty);
                        }
                    }
                }
            });
        }

        // Validate quantity input
        function validateQuantity(input) {
            var $input = $(input);
            var $row = $input.closest('.product-row');
            var availableQty = $row.data('available-qty') || 0;
            var enteredQty = parseInt($input.val()) || 0;

            if (availableQty === 0) {
                // If no stock available, keep quantity at 0
                $input.val(0);
            } else {
                // If stock is available
                if (enteredQty > availableQty) {
                    $input.val(availableQty);
                } else if (enteredQty < 1) {
                    // Don't allow quantity less than 1 when stock is available
                    $input.val(1);
                }
            }

            // Recalculate amount after validation
            var quantity = $input.val() || 0;
            var price = $row.find('.product-price').val() || 0;
            $row.find('.product-amount').val((quantity * price).toFixed(2));
            calculateTotal();
        }

        // Show Preview Modal
        function showPreview() {
            // Complete validation before showing preview
            if (!$('#customer_id').val()) {
                Botble.showError('Please select a customer');
                return;
            }

            if (!$('#payment_method').val()) {
                Botble.showError('Please select payment method');
                return;
            }

            if (!$('#payment_status').val()) {
                Botble.showError('Please select payment status');
                return;
            }

            // Validate transaction_id for online payment methods
            var onlinePaymentMethods = ['stripe', 'paypal', 'razorpay', 'paystack', 'mollie', 'sslcommerz'];
            var paymentMethod = $('#payment_method').val();
            var paymentStatus = $('#payment_status').val();

            if (onlinePaymentMethods.includes(paymentMethod)) {
                if (!$('#transaction_id').val()) {
                    Botble.showError('Transaction ID is required for ' + paymentMethod + ' payments');
                    return;
                }
            }

            // Validate products
            var validProducts = 0;
            var hasErrors = false;
            var productIds = [];

            $('.product-row').each(function (index) {
                var $row = $(this);
                var productId = $row.find('.product-select').val();
                var quantity = parseInt($row.find('.product-quantity').val()) || 0;
                var salePrice = parseFloat($row.find('.product-price').val()) || 0;
                var costPrice = parseFloat($row.find('.product-cost-price').val()) || 0;

                if (productId) {
                    // Check for duplicate products
                    if (productIds.includes(productId)) {
                        Botble.showError('Duplicate product found in row ' + (index + 1) +
                            '. Same product cannot be added multiple times.');
                        hasErrors = true;
                        return false;
                    }
                    productIds.push(productId);

                    if (quantity <= 0) {
                        Botble.showError('Product quantity must be greater than 0 in row ' + (index + 1));
                        hasErrors = true;
                        return false;
                    }
                    if (salePrice <= 0) {
                        Botble.showError('Product price must be greater than 0 in row ' + (index + 1));
                        hasErrors = true;
                        return false;
                    }
                    // if (salePrice < costPrice) {
                    //     Botble.showError('Product price in row ' + (index + 1) + ' cannot be less than cost price.');
                    //     hasErrors = true;
                    //     return false;
                    // }
                    validProducts++;
                }
            });

            if (hasErrors) return;

            if (validProducts === 0) {
                Botble.showError('Please add at least one product');
                return;
            }

            // Validate charges
            var chargeIds = [];
            var chargeErrors = false;
            $('.charges-select').each(function (index) {
                var chargeId = $(this).val();
                var amount = parseFloat($('.charges-amount').eq(index).val()) || 0;

                if (chargeId) {
                    if (chargeIds.includes(chargeId)) {
                        Botble.showError('Duplicate charge found in row ' + (index + 1) +
                            '. Same charge cannot be added multiple times.');
                        chargeErrors = true;
                        return false;
                    }
                    if (amount <= 0) {
                        Botble.showError('Charge amount must be greater than 0 in row ' + (index + 1));
                        chargeErrors = true;
                        return false;
                    }
                    chargeIds.push(chargeId);
                }
            });

            if (chargeErrors) return;

            // Check credit limit for wholesalers AFTER all validations
            var orderTotal = parseFloat($('#total').val()) || 0;
            var availableCredit = window.customerAvailableCredit || 0;
            var creditLimit = window.customerCreditLimit || 0;
            var balance = window.customerBalance || 0;
            
            if (customerType === '1' && creditLimit > 0 && ((balance + orderTotal) > creditLimit)) {
                // Show credit limit override modal
                $('#override_order_total').text('$' + orderTotal.toFixed(2));
                $('#override_available_credit').text('$' + availableCredit.toFixed(2));
                var exceededAmount = (balance + orderTotal) - creditLimit;
                $('#override_exceeded_amount').text('$' + exceededAmount.toFixed(2));
                $('#super_user_password').val('');
                $('#password_error').addClass('d-none');
                $('#creditLimitOverrideModal').modal('show');
                return;
            }

            // Collect form data and send to preview controller
            var formData = {
                customer_id: $('#customer_id').val(),
                billing_address_id: $('#billing_address_id').val(),
                shipping_address_id: $('#shipping_address_id').val(),
                order_number: $('#order_number').val(),
                order_date: $('#order_date').val(),
                payment_method: $('#payment_method').val(),
                payment_status: $('#payment_status').val(),
                transaction_id: $('#transaction_id').val(),
                shipping_first_name: $('#shipping_first_name').val(),
                shipping_last_name: $('#shipping_last_name').val(),
                shipping_phone: $('#shipping_phone').val(),
                shipping_email: $('#shipping_email').val(),
                shipping_address_1: $('#shipping_address_1').val(),
                billing_first_name: $('#billing_first_name').val(),
                billing_last_name: $('#billing_last_name').val(),
                billing_phone: $('#billing_phone').val(),
                billing_email: $('#billing_email').val(),
                billing_address_1: $('#billing_address_1').val(),
                tax_amount: $('#tax_amount').val(),
                tax_rate: $('#tax_rate').val(),
                discount_amount: $('#discount_amount').val(),
                total_charges_amount: $('#total_charges_display').val(),
                total: $('#total').val(),
                terms_conditions: $('#terms_conditions').val(),
                products: [],
                quantity: [],
                sale_price: [],
                amount: [],
                _token: $('meta[name="csrf-token"]').attr('content')
            };

            // Collect product data
            $('.product-row').each(function () {
                var productId = $(this).find('.product-select').val();
                if (productId) {
                    formData.products.push(productId);
                    formData.quantity.push($(this).find('.product-quantity').val());
                    formData.sale_price.push($(this).find('.product-price').val());
                    formData.amount.push($(this).find('.product-amount').val());
                }
            });

            // Send AJAX request to get preview
            $.ajax({
                url: '{{ route('sales.orders.preview') }}',
                method: 'POST',
                data: formData,
                success: function (response) {
                    $('#previewContent').html(response);
                    $('#orderPreviewModal').modal('show');
                },
                error: function (xhr) {
                    Botble.showError('Error generating preview. Please try again.');
                }
            });
        }

        // Generate/Save Order
        function generateOrder() {
            // Validation
            if (!$('#customer_id').val()) {
                Botble.showError('Please select a customer');
                return;
            }

            // Validate products first
            var validProducts = 0;
            var hasErrors = false;

            $('.product-row').each(function (index) {
                var $row = $(this);
                var productId = $row.find('.product-select').val();
                var quantity = parseInt($row.find('.product-quantity').val()) || 0;
                var salePrice = parseFloat($row.find('.product-price').val()) || 0;

                if (productId) {
                    if (quantity <= 0) {
                        Botble.showError('Product quantity must be greater than 0 in row ' + (index + 1));
                        hasErrors = true;
                        return false;
                    }
                    if (salePrice <= 0) {
                        Botble.showError('Product sale price must be greater than 0 in row ' + (index + 1));
                        hasErrors = true;
                        return false;
                    }
                    validProducts++;
                }
            });

            if (hasErrors) return;

            if (validProducts === 0) {
                Botble.showError('Please add at least one product');
                return;
            }

            if (!$('#payment_method').val()) {
                Botble.showError('Please select payment method');
                return;
            }

            if (!$('#payment_status').val()) {
                Botble.showError('Please select payment status');
                return;
            }

            // Validate products
            var validProducts = 0;
            var hasErrors = false;

            $('.product-row').each(function (index) {
                var $row = $(this);
                var productId = $row.find('.product-select').val();
                var quantity = parseInt($row.find('.product-quantity').val()) || 0;
                var salePrice = parseFloat($row.find('.product-price').val()) || 0;

                if (productId) {
                    if (quantity <= 0) {
                        Botble.showError('Product quantity must be greater than 0 in row ' + (index + 1));
                        hasErrors = true;
                        return false;
                    }
                    if (salePrice <= 0) {
                        Botble.showError('Product sale price must be greater than 0 in row ' + (index + 1));
                        hasErrors = true;
                        return false;
                    }
                    validProducts++;
                }
            });

            if (hasErrors) return;

            if (validProducts === 0) {
                Botble.showError('Please add at least one product');
                return;
            }

            var formData = {
                @if (isset($order))
                    order_id: {{ $order->id }},
                @endif
            customer_id: $('#customer_id').val(),
                billing_address_id: $('#billing_address_id').val(),
                    shipping_address_id: $('#shipping_address_id').val(),
                        order_number: $('#order_number').val(),
                            payment_method: $('#payment_method').val(),
                                payment_status: $('#payment_status').val(),
                                    customer_notes: $('#customer_notes').val(),
                                        terms_conditions: $('#terms_conditions').val(),
                                            shipping_first_name: $('#shipping_first_name').val(),
                                                shipping_last_name: $('#shipping_last_name').val(),
                                                    shipping_email: $('#shipping_email').val(),
                                                        shipping_phone: $('#shipping_phone').val(),
                                                            shipping_address_1: $('#shipping_address_1').val(),
                                                                shipping_country_id: $('#shipping_country_id').val(),
                                                                    shipping_state_id: $('#shipping_state_id').val(),
                                                                        shipping_city_id: $('#shipping_city_id').val(),
                                                                            shipping_postal_code: $('#shipping_postal_code').val(),
                                                                                billing_first_name: $('#billing_first_name').val(),
                                                                                    billing_last_name: $('#billing_last_name').val(),
                                                                                        billing_email: $('#billing_email').val(),
                                                                                            billing_phone: $('#billing_phone').val(),
                                                                                                billing_address_1: $('#billing_address_1').val(),
                                                                                                    billing_country_id: $('#billing_country_id').val(),
                                                                                                        billing_state_id: $('#billing_state_id').val(),
                                                                                                            billing_city_id: $('#billing_city_id').val(),
                                                                                                                billing_postal_code: $('#billing_postal_code').val(),
                                                                                                                    charges: [],
                                                                                                                        charges_amount: [],
                                                                                                                            tax_rate: $('#tax_rate').val(),
                                                                                                                                tax_amount: $('#tax_amount').val(),
                                                                                                                                    discount_type: $('#discount_type').val(),
                                                                                                                                        discount_value: $('#discount_value').val(),
                                                                                                                                            discount_amount: $('#discount_amount').val(),
                                                                                                                                                total_charges_amount: $('#total_charges_display').val(),
                                                                                                                                                    subtotal: $('#subtotal').val(),
                                                                                                                                                        total: $('#total').val(),
                                                                                                                                                            products: [],
                                                                                                                                                                productname: [],
                                                                                                                                                                    quantity: [],
                                                                                                                                                                        price: [],
                                                                                                                                                                            sale_price: [],
                                                                                                                                                                                amount: [],
                                                                                                                                                                                    _token: $('meta[name="csrf-token"]').attr('content')
        };

        // Validate charges
        var chargeIds = [];
        var chargeErrors = false;
        $('.charges-select').each(function (index) {
            var chargeId = $(this).val();
            var amount = parseFloat($('.charges-amount').eq(index).val()) || 0;

            if (chargeId) {
                if (chargeIds.includes(chargeId)) {
                    Botble.showError('Duplicate charge found in row ' + (index + 1) +
                        '. Same charge cannot be added multiple times.');
                    chargeErrors = true;
                    return false;
                }
                if (amount <= 0) {
                    Botble.showError('Charge amount must be greater than 0 in row ' + (index + 1));
                    chargeErrors = true;
                    return false;
                }
                chargeIds.push(chargeId);
            }
        });

        if (chargeErrors) return;

        // Collect charges data
        $('.charges-select').each(function (index) {
            var chargeId = $(this).val();
            var amount = parseFloat($('.charges-amount').eq(index).val()) || 0;
            if (chargeId && amount > 0) {
                formData.charges.push(chargeId);
                formData.charges_amount.push(amount);
            }
        });

        // Check for duplicate products
        var productIds = [];
        var hasDuplicates = false;
        $('.product-row').each(function (index) {
            var productId = $(this).find('.product-select').val();
            if (productId) {
                if (productIds.includes(productId)) {
                    Botble.showError('Duplicate product found in row ' + (index + 1) +
                        '. Same product cannot be added multiple times.');
                    hasDuplicates = true;
                    return false;
                }
                productIds.push(productId);
            }
        });

        if (hasDuplicates) return;

        // Collect product data
        $('.product-row').each(function () {
            var productId = $(this).find('.product-select').val();
            var quantity = parseInt($(this).find('.product-quantity').val()) || 0;
            var salePrice = parseFloat($(this).find('.product-price').val()) || 0;

            if (productId && quantity > 0 && salePrice > 0) {
                formData.products.push(productId);
                formData.productname.push($(this).find('.product-name').val());
                formData.quantity.push(quantity);
                formData.price.push(parseFloat($(this).find('.product-price').val()) || 0);
                formData.sale_price.push(salePrice);
                formData.amount.push(parseFloat($(this).find('.product-amount').val()) || 0);
            }
        });

        $.ajax({
            url: '{{ route('sales.orders.store') }}',
            method: 'POST',
            data: formData,
            success: function (response) {
                if (response.success) {
                    Botble.showSuccess(response.message);
                    window.location.href = '{{ route('orders.index') }}';
                } else {
                    Botble.showError('Error: ' + response.message);
                }
            },
            error: function (xhr) {
                if (xhr.status === 422 && xhr.responseJSON && xhr.responseJSON.message) {
                    Botble.showError(xhr.responseJSON.message);
                } else {
                    Botble.showError('Error saving order. Please try again.');
                }
            }
        });
                                    }

        function confirmOrder() {
            $('#orderPreviewModal').modal('hide');
            generateOrder();
        }

        // Handle credit limit override confirmation
        // $('#confirmOverride').on('click', function() {
        //     alert('Override confirmed');
        //     var password = $('#super_user_password').val();
            
        //     if (!password) {
        //         $('#password_error').text('Password is required').removeClass('d-none');
        //         return;
        //     }
            
        //     // Verify super user password
        //     $.ajax({
        //         url: '{{ route("verify.super.user.password") }}',
        //         method: 'POST',
        //         data: {
        //             password: password,
        //             _token: $('meta[name="csrf-token"]').attr('content')
        //         },
        //         success: function(response) {
        //             if (response.success) {
        //                 $('#creditLimitOverrideModal').modal('hide');
        //                 // Continue with order preview
        //                 continueToPreview();
        //             } else {
        //                 $('#password_error').text('Invalid password. Please try again.').removeClass('d-none');
        //             }
        //         },
        //         error: function() {
        //             $('#password_error').text('Error verifying password. Please try again.').removeClass('d-none');
        //         }
        //     });
        // });
    $(document).on('click', '#btnYes', function() {
        $('#confirmation_buttons').addClass('d-none');
        $('#password_section').removeClass('d-none');
        $('#password_buttons').removeClass('d-none');
        $('#super_user_password').focus();
    });

    // Handle Back button click - go back to Yes/No
    $(document).on('click', '#btnBack', function() {
        $('#password_section').addClass('d-none');
        $('#password_buttons').addClass('d-none');
        $('#confirmation_buttons').removeClass('d-none');
        $('#super_user_password').val('');
        $('#password_error').addClass('d-none');
    });

    // Handle credit limit override confirmation
    $(document).on('click', '#confirmOverride', function() {
        var password = $('#super_user_password').val();
        
        if (!password) {
            $('#password_error').text('Password is required').removeClass('d-none');
            return;
        }
        
        $.ajax({
            url: '{{ route("verify.super.user.password") }}',
            method: 'POST',
            data: {
                password: password,
                _token: $('meta[name="csrf-token"]').attr('content')
            },
            success: function(response) {

                if (response.success) {
                    $('#creditLimitOverrideModal').modal('hide');

                    // Reset modal
                    $('#password_section').addClass('d-none');
                    $('#password_buttons').addClass('d-none');
                    $('#confirmation_buttons').removeClass('d-none');
                    $('#super_user_password').val('');
                    $('#password_error').addClass('d-none');

                    continueToPreview();

                } else {
                    // Use backend message
                    $('#password_error').text(response.message).removeClass('d-none');
                }
            },
            error: function(xhr) {
                let message = "Error verifying password. Please try again.";

                if (xhr.responseJSON && xhr.responseJSON.message) {
                    message = xhr.responseJSON.message;
                }

                $('#password_error').text(message).removeClass('d-none');
            }
        });
    });


    // Reset modal when closed
    $('#creditLimitOverrideModal').on('hidden.bs.modal', function() {
        $('#password_section').addClass('d-none');
        $('#password_buttons').addClass('d-none');
        $('#confirmation_buttons').removeClass('d-none');
        $('#super_user_password').val('');
        $('#password_error').addClass('d-none');
    });
        // Continue to preview after override
        function continueToPreview() {
            var formData = {
                customer_id: $('#customer_id').val(),
                billing_address_id: $('#billing_address_id').val(),
                shipping_address_id: $('#shipping_address_id').val(),
                order_number: $('#order_number').val(),
                order_date: $('#order_date').val(),
                payment_method: $('#payment_method').val(),
                payment_status: $('#payment_status').val(),
                transaction_id: $('#transaction_id').val(),
                shipping_first_name: $('#shipping_first_name').val(),
                shipping_last_name: $('#shipping_last_name').val(),
                shipping_phone: $('#shipping_phone').val(),
                shipping_email: $('#shipping_email').val(),
                shipping_address_1: $('#shipping_address_1').val(),
                billing_first_name: $('#billing_first_name').val(),
                billing_last_name: $('#billing_last_name').val(),
                billing_phone: $('#billing_phone').val(),
                billing_email: $('#billing_email').val(),
                billing_address_1: $('#billing_address_1').val(),
                tax_amount: $('#tax_amount').val(),
                tax_rate: $('#tax_rate').val(),
                discount_amount: $('#discount_amount').val(),
                total_charges_amount: $('#total_charges_display').val(),
                total: $('#total').val(),
                terms_conditions: $('#terms_conditions').val(),
                products: [],
                quantity: [],
                sale_price: [],
                amount: [],
                _token: $('meta[name="csrf-token"]').attr('content')
            };

            $('.product-row').each(function () {
                var productId = $(this).find('.product-select').val();
                if (productId) {
                    formData.products.push(productId);
                    formData.quantity.push($(this).find('.product-quantity').val());
                    formData.sale_price.push($(this).find('.product-price').val());
                    formData.amount.push($(this).find('.product-amount').val());
                }
            });

            $.ajax({
                url: '{{ route('sales.orders.preview') }}',
                method: 'POST',
                data: formData,
                success: function (response) {
                    $('#previewContent').html(response);
                    $('#orderPreviewModal').modal('show');
                },
                error: function (xhr) {
                    Botble.showError('Error generating preview. Please try again.');
                }
            });
        }

        function loadAddressStates(countryId) {
            return new Promise((resolve) => {
                if (!countryId) {
                    $('#address_state').empty().append('<option value="">Select state...</option>');
                    resolve();
                    return;
                }

                $.ajax({
                    url: AddressStatelist,
                    method: 'GET',
                    data: { country_id: countryId },
                    success: function (response) {
                        $('#address_state').empty().append('<option value="">Select state...</option>');
                        if (response.data && response.data.length > 0) {
                            $.each(response.data, function (index, state) {
                                $('#address_state').append(`<option value="${state.id}">${state.name}</option>`);
                            });
                        }
                        resolve();
                    },
                    error: () => {
                        $('#address_state').empty().append('<option value="">Error loading states</option>');
                        resolve();
                    }
                });
            });
        }

        function loadAddressCities(stateId, countryId) {
            return new Promise((resolve) => {
                if (!stateId) {
                    $('#address_city').empty().append('<option value="">Select city...</option>');
                    resolve();
                    return;
                }

                $.ajax({
                    url: AddressCitylist,
                    method: 'GET',
                    data: { state_id: stateId, country_id: countryId },
                    success: function (response) {
                        $('#address_city').empty().append('<option value="">Select city...</option>');
                        if (response.data && response.data.length > 0) {
                            $.each(response.data, function (index, city) {
                                $('#address_city').append(`<option value="${city.id}">${city.name}</option>`);
                            });
                        }
                        resolve();
                    },
                    error: () => {
                        $('#address_city').empty().append('<option value="">Error loading cities</option>');
                        resolve();
                    }
                });
            });
        }
    </script>




    @include('backend.sales.modal')
@endsection