@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;
        }

        .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;
        }
    </style>
    @php
        $isEditMode = isset($order) ?? [];
    @endphp


    <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: vendor 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="vendor_id" class="form-label form-label required mb-1">
                                        vendor
                                    </label>
                                    <!-- vendor Dropdown Selection -->
                                    <select class="form-control form-select" name="vendor_id" id="vendor_id" required>
                                        <option value="">Select vendor</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="openvendorModal()"
                                        style="padding: 7.2px;padding: 6.2px;font-size: 12px;">
                                        Add Vendor
                                    </button>
                                </div>
                            </div>
                            <div id="vendor-details" class="d-none mt-3">
                                <div class="card shadow-sm rounded-2 mb-2">
                                    <div class="card-body p-3">
                                        <div class="row">
                                            <!-- Shipping Address -->
                                            <div class="col-md-6 border-end">
                                                <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>
                                                    </div>
                                                </div>
                                            </div>

                                            <!-- Billing Address -->
                                            <div class="col-md-6">
                                                <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>
                                                    </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">


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

                        </div>

                        <div class="col-12 col-sm-12 col-lg-7 col-lg-4">
                            <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</option>
                                                <option value="bank_transfer" {{ $isEditMode && $order->payment_method == 'bank_transfer' ? 'selected' : '' }}>
                                                    Bank transfer</option>
                                                <option value="FPOS" {{ $isEditMode && $order->payment_method == 'FPOS' ? 'selected' : '' }}>
                                                    FPOS</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> --}}
                                            </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="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">
                                            <label for="vendor_invoice_number" class="form-label form-label mb-1">
                                                Vendor Invoice Number
                                            </label>
                                            <input type="text"
                                                name="vendor_invoice_number"
                                                id="vendor_invoice_number"
                                                class="form-control form-control-customr"
                                                placeholder="Enter Vendor Invoice Number"
                                                value="{{ $isEditMode && $order->vendor_invoice_number ? $order->vendor_invoice_number : '' }}">
                                          
                                        </div>

                                        <div class="col-12 col-sm-6">
                                            <label for="vendor_invoice_document" class="form-label form-label mb-1">
                                                Vendor Invoice Document
                                            </label>
                                            <input type="file"
                                                name="vendor_invoice_document"
                                                id="vendor_invoice_document"
                                                class="form-control form-control-customr"
                                                accept="*/*">
                                            
                                        </div>
                                         <div class="col-12 col-sm-6">
                                            @if ($isEditMode && $order->vendor_invoice_document)
                                                <div class="mt-4">
                                                    <a href="{{ asset('storage/' . $order->vendor_invoice_document) }}"
                                                    target="_blank"
                                                    class="btn btn-sm btn-info">
                                                        View Uploaded Document
                                                    </a>
                                                </div>
                                            @endif
                                         </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="card-header bg-light-title"
                    style="justify-content: center; background-color: #f2f3f8 !important;">
                    <h2 class="mb-0 title-row">Ordered Items</h2>
                </div>
                <div class="card-body">
                    <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>

                            <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" required>
                            </div>

                            <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">
                            </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>
                    </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="vendor_notes" class="form-label form-label form-label">Order
                                                Notes</label>
                                            <textarea name="vendor_notes" id="vendor_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" 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>
                        </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>
    @include('backend.purchase.partials.quick-add-product-modal')
    @include('backend.purchase.modal')
@endsection

@section('javascript')
    <script>
        var vendorsearch = '{{ route('purchase.orders.vendors.search') }}';
        var vendordetails = '{{ route('purchase.orders.vendors.details') }}';
        var vendorcreate = '{{ route('purchase.orders.vendor.store') }}';
        var Countrylist = '{{ route('purchase.orders.countries.list') }}';
        var Statelist = '{{ route('purchase.orders.states.list') }}';
        var Citylist = '{{ route('purchase.orders.cities.list') }}';
        var productsearch = '{{ route('purchase.orders.products.search') }}';
        var taxeslist = '{{ route('purchase.orders.taxes.list') }}';
        var termsConditionsUrl = '{{ route('purchase.orders.terms.conditions') }}';
        var productStockUrl = '{{ route('purchase.orders.products.stock', ':productId') }}';
        var changesDropdownUrl = '{{ route('purchase.orders.charges.dropdown') }}';
        var AddressCountrylist = '{{ route('purchase.orders.countries.list') }}';
        var AddressStatelist = '{{ route('purchase.orders.states.list') }}';
        var AddressCitylist = '{{ route('purchase.orders.cities.list') }}';
        var quickProductStoreUrl = '{{ route("purchase.orders.product.quick-store") }}';
        var attributeSetsUrl = '{{ route("purchase.orders.attributes.list") }}';
        var categoriesUrl = '{{ route("purchase.orders.categories.list") }}';
        var brandsUrl = '{{ route("purchase.orders.brands.list") }}';
        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.sale_price || p.price}</small>
                                            </div>
                                            </div>
                                            `);
        }

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

        $(document).ready(function () {

            /* ------------------------------------------------------------------
             *  BLADE-INJECTED CODE (edit mode) – runs only when $order exists
             * ------------------------------------------------------------------ */
            @if (isset($order))
                setTimeout(function () {

                    /* ---------- VENDOR ---------- */
                    var vendorOption = new Option(
                        '{{ $order->user->first_name . ' ' . $order->user->last_name ?? '' }} - {{ $order->user->email ?? '' }}',
                        '{{ $order->vendor_id }}', true, true);
                    $('#vendor_id').append(vendorOption).trigger('change');
                    loadvendorDetails('{{ $order->vendor_id }}');

                    /* ---------- SHIPPING ADDRESS ---------- */
                    @if ($order->shipping_address)
                        var shippingData = @json(json_decode($order->shipping_address, true));
                        if (shippingData) {
                            $('#shipping-name').text(shippingData.name || '-');
                            $('#shipping-email').text(shippingData.email || '-');
                            $('#shipping-phone').text(shippingData.phone || '-');
                            $('#shipping-address').text(shippingData.address || '-');

                            $('#shipping_first_name').val(shippingData.name ? shippingData.name.split(' ')[0] : '');
                            $('#shipping_last_name').val(shippingData.name ? shippingData.name.split(' ').slice(1).join(' ') : '');
                            $('#shipping_email').val(shippingData.email || '');
                            $('#shipping_phone').val(shippingData.phone || '');
                            $('#shipping_address_1').val(shippingData.address || '');
                            $('#shipping_country_id').val(shippingData.country || '');
                            $('#shipping_state_id').val(shippingData.state || '');
                            $('#shipping_city_id').val(shippingData.city || '');
                            $('#shipping_postal_code').val(shippingData.postal_code || '');
                        }
                    @endif

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

                                                <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" required>
                                                </div>

                                                <div class="col-md-2 pb-4">
                                                    <input type="number" class="form-control form-control-customr product-price"
                                                            name="price[]" value="{{ $orderProduct->price }}">
                                                </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);

                            /* Select2 for the newly added row */
                            $('.product-row:last .product-select').select2({
                                placeholder: 'Search and select product',
                                allowClear: true,
                                ajax: {
                                    url: productsearch,
                                    dataType: 'json',
                                    delay: 250,
                                    data: function (params) { return { q: params.term || '' }; },
                                    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
                            });


                            /* Load product details (image, category, sku…) */
                            (function (productId, $currentRow) {
                                $.ajax({
                                    url: productsearch,
                                    data: { q: '{{ $orderProduct->product_name }}' },
                                    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.sale_price || product.price) +
                                                ' | Wholesale Price: ' + (product.wholesale_price || '-')  + ' | Cost Price: ' + (product.cost_price || '-')  + '</div></div>';
                                            $currentRow.find('.product-details').html(detailsHtml);
                                        }
                                    }
                                });
                            })('{{ $orderProduct->product_id }}', $('.product-row:last'));
                        @endforeach

                        /* Totals */
                        $('#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 }}');

                        /* ---------- 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);

                                    $('.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(c => ({ id: c.id, text: c.charges_name })) };
                                            },
                                            cache: true
                                        }
                                    });

                                    /* Load the real charge name */
                                    (function (cId, $sel) {
                                        $.ajax({
                                            url: changesDropdownUrl,
                                            method: 'GET',
                                            success: function (data) {
                                                var charge = data.find(c => c.id == cId);
                                                if (charge) {
                                                    $sel.empty();
                                                    var opt = new Option(charge.charges_name, charge.id, true, true);
                                                    $sel.append(opt).trigger('change');
                                                }
                                            }
                                        });
                                    })(chargeId, $('.charges-select:last'));
                                });
                                $('#total_charges_amount').val('{{ $order->charges_totalamount }}');
                                $('#total_charges_display').val('{{ $order->charges_totalamount }}');
                            }
                        @endif

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

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

                    /* ---------- TERMS & CONDITIONS ---------- */
                    @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) {
                                        $('#terms_conditions').empty();
                                        var unique = [...new Set(termsData)];
                                        unique.forEach(function (tId) {
                                            var term = response.terms.find(t => t.id == tId);
                                            if (term) {
                                                var opt = new Option(term.name, term.id, true, true);
                                                $('#terms_conditions').append(opt);
                                            }
                                        });
                                        $('#terms_conditions').trigger('change');
                                    }
                                });
                            }
                        }, 1200);
                    @endif
                                                                            }, 1000);
            @endif

            /* ------------------------------------------------------------------
             *  STATIC JS – runs for BOTH create & edit
             * ------------------------------------------------------------------ */
            $('#savenewAddress').on('click', function () {
                let vendorId = $('#vendor_id').val();

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

                let formData = {
                    vendor_id: vendorId,
                    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() || $('input[name="address_country"]').val(),
                    address_state: $('#address_state').val() || $('input[name="address_state"]').val(),
                    address_city: $('#address_city').val() || $('input[name="address_city"]').val(),
                    is_default: $('#is_default').is(':checked') ? 1 : 0,
                    _token: $('meta[name="csrf-token"]').attr('content')
                };

                $.ajax({
                    url: "{{ route('purchase.orders.vendor.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
                            loadVendorDetails(vendorId);
                        }
                    },
                    error: function (xhr) {
                        let err = xhr.responseJSON?.errors;
                        if (err) {
                            Object.values(err).forEach(e => Botble.showError(e[0]));
                        } else {
                            Botble.showError('Something went wrong.');
                        }
                    }
                });
            });
            let currentAddresses = [];
            let popovers = {};

            /* ---------- VENDOR SELECT2 ---------- */
            $('#vendor_id').select2({
                placeholder: 'Search and select vendor',
                allowClear: true,
                ajax: {
                    url: vendorsearch,
                    dataType: 'json',
                    delay: 250,
                    data: params => ({ keyword: params.term || '', page: params.page || 1 }),
                    processResults: data => ({
                        results: data.data.data.map(v => ({
                            id: v.id,
                            text: `${v.first_name} ${v.last_name} - ${v.email}`,
                            name: `${v.first_name} ${v.last_name}`,
                            email: v.email,
                            phone: v.phone || '-',
                            address: v.address || '-'
                        })),
                        pagination: { more: data.data.has_more_pages }
                    }),
                    cache: true
                },
                templateResult: v => v.loading ? 'Searching...' : $(`<div><strong>${v.name}</strong><br><small>${v.email}</small></div>`),
                templateSelection: v => v.name || v.text
            })
                .on('select2:select', e => loadVendorDetails(e.params.data.id))
                .on('select2:unselecting', () => {
                    $('#vendor-details').addClass('d-none');
                    currentAddresses = [];
                    popovers = {};
                });

            /* ---------- 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 || '-');
                $(`#${type}-address-display`).html((addr.address || '-').replace(/\n/g, '<br>'));
                $(`#${type}_address_id`).val(addr.id);
            }

            /* ---------- LOAD VENDOR DETAILS ---------- */
            function loadVendorDetails(vendorId) {
                if (!vendorId) return;
                $.ajax({
                    url: vendordetails,
                    method: 'GET',
                    data: { id: vendorId },
                    success: function (res) {
                        if (!res.success) { alert(res.message || 'Failed to load vendor'); return; }
                        const v = res.Vendor;
                        currentAddresses = v.addresses || [];

                        /* Billing = vendor info (default) or saved address */
                        const savedBillingId = {{ $billingAddressId ?? 0 }};
                        const savedShippingId = {{ $shippingAddressId ?? 0 }};
                        
                        if (savedBillingId && savedBillingId > 0) {
                            const billingAddr = currentAddresses.find(a => a.id === savedBillingId);
                            if (billingAddr) {
                                updateAddressDisplay(billingAddr, 'billing');
                            } else {
                                $('#billing-name').text(v.name || v.first_name + ' ' + v.last_name);
                                $('#billing-email').text(v.email);
                                $('#billing-phone').text(v.phone || '-');
                                $('#billing-address-display').html((v.address || '-').replace(/\n/g, '<br>'));
                                $('#billing_address_id').val('');
                            }
                        } else {
                            $('#billing-name').text(v.name || v.first_name + ' ' + v.last_name);
                            $('#billing-email').text(v.email);
                            $('#billing-phone').text(v.phone || '-');
                            $('#billing-address-display').html((v.address || '-').replace(/\n/g, '<br>'));
                            $('#billing_address_id').val('');
                        }

                        /* Shipping = saved address or first/default address */
                        if (savedShippingId && savedShippingId > 0) {
                            const shippingAddr = currentAddresses.find(a => a.id === savedShippingId);
                            if (shippingAddr) {
                                updateAddressDisplay(shippingAddr, 'shipping');
                            } else {
                                const def = currentAddresses.find(a => a.is_default || a.selected) || currentAddresses[0];
                                if (def) updateAddressDisplay(def, 'shipping');
                            }
                        } else {
                            const def = currentAddresses.find(a => a.is_default || 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('');
                            }
                        }

                        $('#vendor-details').removeClass('d-none');
                    },
                    error: () => alert('Error loading vendor details')
                });
            }

            /* ---------- CREATE NEW VENDOR (modal) ---------- */
            $('#savenewvendor').on('click', function (e) {
                e.preventDefault();

                const companyName = $('#add-vendor input[name="company_name"]').val()?.trim();
                const firstName = $('#add-vendor input[name="vendor_first_name"]').val()?.trim();
                const lastName = $('#add-vendor input[name="vendor_last_name"]').val()?.trim();
                const phone = $('#add-vendor input[name="vendor_phone"]').val()?.trim();
                const email = $('#add-vendor input[name="vendor_email"]').val()?.trim();
                const status = $('#add-vendor select[name="vendor_status"]').val();
                const address = $('#add-vendor textarea[name="vendor_address"]').val()?.trim();
                const countryName = $('#add-vendor input[name="country_name"]').val()?.trim();
                const stateName = $('#add-vendor input[name="state_name"]').val()?.trim();
                const cityName = $('#add-vendor input[name="city_name"]').val()?.trim();

                if (!companyName) { Botble.showError('Company Name is required'); return; }

                const formData = {
                    company_name: companyName,
                    first_name: firstName,
                    last_name: lastName,
                    phone: phone,
                    email: email,
                    user_status: status,
                    company_address: address,
                    user_country: countryName,
                    user_state: stateName,
                    user_city: cityName,
                    _token: $('meta[name="csrf-token"]').attr('content')
                };

                $.ajax({
                    url: vendorcreate,
                    method: 'POST',
                    data: formData,
                    success: function (resp) {
                        if (resp.error === false && resp.data) {
                            const v = resp.data;
                            const txt = v.company_name || (v.first_name + ' ' + v.last_name);
                            const opt = new Option(txt + (v.email ? ' - ' + v.email : ''), v.id, true, true);
                            $('#vendor_id').append(opt).trigger('change');
                            loadVendorDetails(v.id);

                            $('#add-vendor').modal('hide');
                            $('#add-vendor input, #add-vendor select, #add-vendor textarea').val('').trigger('change');
                            Botble.showSuccess(resp.message || 'Vendor created successfully!');
                        } else {
                            Botble.showError(resp.message || 'Something went wrong.');
                        }
                    },
                    error: function (xhr) {
                        let msg = 'Error creating vendor.';
                        if (xhr.responseJSON?.errors) {
                            msg = Object.values(xhr.responseJSON.errors).flat().join('\n');
                        }
                        Botble.showError(msg);
                    }
                });
            });

            /* ---------- COUNTRY / STATE / CITY (Add-Vendor modal) - Now using text fields ---------- */
            // No select2 initialization needed for vendor - using text fields


            window.loadvendorDetails = loadVendorDetails;   // for Blade calls

        });

        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().append('<option value="">Select state...</option>');
                    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().append('<option value="">Select city...</option>');
                    if (response.data && response.data.length > 0) {
                        $.each(response.data, function (index, city) {
                            $('#city_id').append('<option value="' + city.id + '">' + city.name +
                                '</option>');
                        });
                    }
                }
            });
        }

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

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

        function openvendorModal() {
            $('#add-vendor').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 address modal - using text fields for vendors
            //             // Shipping modal - using text fields for vendors (no select2 needed)
        }

        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());
            // For vendors, use text field values; for others, use dropdown text
            const cityVal = $('#shipping_city_modal').val();
            const stateVal = $('#shipping_state_modal').val();
            const countryVal = $('#shipping_country_modal').val();
            
            if (cityVal) {
                const cityText = $('#shipping_city_modal').is('input') ? cityVal : $('#shipping_city_modal option:selected').text();
                if (cityText) addressParts.push(cityText);
            }
            if (stateVal) {
                const stateText = $('#shipping_state_modal').is('input') ? stateVal : $('#shipping_state_modal option:selected').text();
                if (stateText) addressParts.push(stateText);
            }
            if (countryVal) {
                const countryText = $('#shipping_country_modal').is('input') ? countryVal : $('#shipping_country_modal option:selected').text();
                if (countryText) addressParts.push(countryText);
            }

            $('#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_phone').val($('#shipping_phone_modal').val());
            $('#shipping_address_1').val($('#shipping_address_modal').val());
            // Store text values for vendors, IDs for others
            $('#shipping_country_id').val(countryVal);
            $('#shipping_state_id').val(stateVal);
            $('#shipping_city_id').val(cityVal);

            $('#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) {
                    return {
                        q: params.term || ''
                    };
                },
                processResults: function (data) {
                    var results = data.data.map(function (product) {
                        return {
                            id: product.id,
                            text: product.name + ' - ' + (product.sale_price || product.price),
                            product: product
                        };
                    });
                    // results.push({
                    //     id: 'add_new_product',
                    //     text: '+ Add New Product',
                    //     isAddNew: true
                    // });
                    return { results: results };
                },
                cache: true
            },
            templateResult: function(item) {
                if (item.isAddNew) {
                    return $('<div style="color: #1b6de0; font-weight: 600; padding: 8px 0; border-top: 1px solid #eee;">' + item.text + '</div>');
                }
                return formatProduct(item);
            },
            templateSelection: formatProductSelection
        });

        $(document).on('select2:open', function(e) {
            let selectEl = $(e.target);
            if (!selectEl.hasClass('product-select')) return;
            
            window.currentProductRow = selectEl.closest('.product-row');
            let dropdown = $('.select2-container--open .select2-dropdown');

            if ($('#addNewProductFooter').length === 0) {
                dropdown.append(`
                    <div id="addNewProductFooter"
                        style="padding: 10px; text-align: center;background-color: #f2f3f8; color: #1b6de0;
                               border-top: 1px solid #ddd; font-weight: 600; cursor: pointer;">
                        + Add New Product
                    </div>
                `);

                $(document).on('click', '#addNewProductFooter', function() {
                    selectEl.select2('close');
                    loadQuickProductForm();
                });
            }
        });


        // Handle product selection
        $(document).on('select2:select', '.product-select', function (e) {
            var data = e.params.data;
            var $select = $(this);
            
            if (data.id === 'add_new_product') {
                $select.val(null).trigger('change');
                window.currentProductRow = $select.closest('.product-row');
                loadQuickProductForm();
                return;
            }
            
            var product = data.product;
            var $row = $select.closest('.product-row');

            // Fill product data
            $row.find('.product-name').val(product.name);
            $row.find('.product-price').val(product.wholesale_price);

            // 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.sale_price || product.price) + ' | Wholesale Price: ' + (product.wholesale_price || '-')  + ' | Cost Price: ' + (product.cost_price || '-')  +'</div>';
            detailsHtml += '</div>';
            $row.find('.product-details').html(detailsHtml);

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

            var salePrice = product.wholesale_price;
            $row.find('.product-amount').val((1 * salePrice).toFixed(2));

            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');
            var quantity = $(this).val() || 1;
            var salePrice = $row.find('.product-price').val() || 0;
            $row.find('.product-amount').val((quantity * salePrice).toFixed(2));
            calculateTotal();
        });

        // Calculate amount on sale price change
        $(document).on('input', '.product-price', function () {
            var $row = $(this).closest('.product-row');
            var quantity = $row.find('.product-quantity').val() || 0;
            var salePrice = $(this).val() || 0;
            $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>
                            <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" required>
                        </div>
                        <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">
                        </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) {
                        return {
                            q: params.term || ''
                        };
                    },
                    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
            });

            updateRemoveButtons();
        });

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

        // Validate quantity input
        function validateQuantity(input) {
            const $input = $(input);
            let val = parseInt($input.val()) || 0;
            if (val < 1) val = 1;
            $input.val(val);

            // Recalculate amount
            const $row = $input.closest('.product-row');
            const qty = val;
            const price = parseFloat($row.find('.product-price').val()) || 0;
            $row.find('.product-amount').val((qty * price).toFixed(2));
            calculateTotal();
        }

        // Show Preview Modal
        function showPreview() {
            // Complete validation before showing preview
            if (!$('#vendor_id').val()) {
                Botble.showError('Please select a vendor');
                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;

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

            // Collect form data and send to preview controller
            var formData = {
                vendor_id: $('#vendor_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(),
                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('purchase.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 (!$('#vendor_id').val()) {
                Botble.showError('Please select a vendor');
                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
            vendor_id: $('#vendor_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(),
                                    vendor_notes: $('#vendor_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(),
                                                                                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);
            }
        });

        // Create FormData object for file upload
        var formDataObj = new FormData();
        
        // Add all form fields to FormData
        Object.keys(formData).forEach(function(key) {
            if (Array.isArray(formData[key])) {
                formData[key].forEach(function(value, index) {
                    formDataObj.append(key + '[' + index + ']', value);
                });
            } else {
                formDataObj.append(key, formData[key]);
            }
        });
        
        // Add file if selected
        var fileInput = document.getElementById('vendor_invoice_document');
        if (fileInput && fileInput.files.length > 0) {
            formDataObj.append('vendor_invoice_document', fileInput.files[0]);
        }
        
        // Add vendor invoice number
        formDataObj.append('vendor_invoice_number', $('#vendor_invoice_number').val() || '');

        $.ajax({
            url: '{{ route('purchase.orders.store') }}',
            method: 'POST',
            data: formDataObj,
            processData: false,
            contentType: false,
            success: function (response) {
                if (response.success) {
                    Botble.showSuccess(response.message);
                    window.location.href = '{{ route('purchase.orders.index') }}';
                } else {
                    Botble.showError('Error: ' + response.message);
                }
            },
            error: function (xhr) {
                Botble.showError('Error saving order. Please try again.');
            }
        });
                                                                                                                                                                                    }

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

        // $(document).ready(function () {
        //     // Initialize Select2 for 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 state dropdown
        //     $('#address_state').select2({
        //         dropdownParent: $('#addAddressModal'),
        //         placeholder: 'Select state...'
        //     });
        //     // Initialize Select2 for city dropdown
        //     $('#address_city').select2({
        //         dropdownParent: $('#addAddressModal'),
        //         placeholder: 'Select city...'
        //     });
        //     // Country change event
        //     $('#address_country').on('change', function () {
        //         var countryId = $(this).val();
        //         loadStates(countryId);
        //         $('#address_city').empty().append('<option value="">Select city...</option>');
        //     });
        //     $('#address_state').on('change', function () {
        //         var stateId = $(this).val();
        //         var countryId = $('#address_country').val();
        //         loadCities(stateId, countryId);
        //     });
        // });
        function loadStates(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 loadCities(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();
                    }
                });
            });
        }
      
                // Quick Product Functions
        function loadQuickProductForm() {
            $.ajax({
                url: attributeSetsUrl,
                method: 'GET',
                success: function(response) {
                    var html = '<div class="row">';
                    if (response.data && response.data.length > 0) {
                        // response.data.forEach(function(attrSet, index) {
                        //     html += '<div class="col-md-4 mb-3">';
                        //     html += '<label class="form-label">' + attrSet.title + '</label>';
                            
                        //     if (attrSet.display_attributes_layout === 'dropdown') {
                        //         html += '<select class="form-control attr-dropdown auto-name-trigger" name="attribute_sets[' + attrSet.id + ']" data-attr-id="' + attrSet.id + '">';
                        //         html += '<option value="">Select ' + attrSet.title + '</option>';
                        //         html += '</select>';
                        //     } else {
                        //         html += '<input type="text" class="form-control auto-name-trigger" name="attribute_sets_text[' + attrSet.id + ']" placeholder="Enter ' + attrSet.title + '" >';
                        //     }
                        //     html += '</div>';
                        // });
                        response.data.forEach(function(attrSet) {
                            html += '<div class="col-md-4 mb-3">';
                            html += '<label class="form-label">' + attrSet.title + '</label>';

                            if (attrSet.display_attributes_layout === 'dropdown') {
                                html += '<select class="form-control attr-dropdown auto-name-trigger" ' +
                                        'name="attribute_sets[' + attrSet.id + ']" ' +
                                        'data-attr-id="' + attrSet.id + '" ' +
                                        'data-order="' + attrSet.order + '">' +
                                        '<option value="">Select ' + attrSet.title + '</option></select>';
                            } else {
                                html += '<input type="text" class="form-control auto-name-trigger" ' +
                                        'name="attribute_sets_text[' + attrSet.id + ']" ' +
                                        'placeholder="Enter ' + attrSet.title + '" ' +
                                        'data-order="' + attrSet.order + '">';
                            }

                            html += '</div>';
                        });

                    }
                    html += '</div>';
                    $('#quick-product-attributes').html(html);
                    
                    $('.attr-dropdown').each(function() {
                        var $select = $(this);
                        var attrId = $select.data('attr-id');
                        
                        $select.select2({
                            dropdownParent: $('#quickAddProductModal'),
                            placeholder: 'Select ' + $select.prev('label').text(),
                            ajax: {
                                url: '{{ route("purchase.orders.attributes.values") }}',
                                dataType: 'json',
                                delay: 250,
                                data: function(params) {
                                    return { 
                                        attribute_set_id: attrId,
                                        q: params.term || '' 
                                    };
                                },
                                processResults: function(data) {
                                    return {
                                        results: data.data.map(function(attr) {
                                            return { id: attr.id, text: attr.title };
                                        })
                                    };
                                }
                            }
                        });
                    });
                    
                    generateQuickProductName();
                    generateQuickProductSKU();
                }
            });
            
            $('#quick_category').select2({
                dropdownParent: $('#quickAddProductModal'),
                placeholder: 'Select category',
                ajax: {
                    url: categoriesUrl,
                    dataType: 'json',
                    delay: 250,
                    data: function(params) { return { q: params.term || '' }; },
                    processResults: function(data) {
                        return {
                            results: data.data.map(function(cat) {
                                return { id: cat.id, text: cat.name };
                            })
                        };
                    }
                }
            });
            
            $('#quick_brand').select2({
                dropdownParent: $('#quickAddProductModal'),
                placeholder: 'Select brand',
                allowClear: true,
                ajax: {
                    url: brandsUrl,
                    dataType: 'json',
                    delay: 250,
                    data: function(params) { return { q: params.term || '' }; },
                    processResults: function(data) {
                        return {
                            results: data.data.map(function(brand) {
                                return { id: brand.id, text: brand.name };
                            })
                        };
                    }
                }
            });
            
            $('#quickProductForm')[0].reset();
            $('#quick_price, #quick_wholesale_price, #quick_cost_per_item').val('');
            $('#quickAddProductModal').modal('show');
        }
        
        function generateQuickProductName() {
            let values = {};
            $('.auto-name-trigger').each(function() {
                let order = parseInt($(this).data('order'));
                // alert(order);
                let value = '';
                if (this.tagName === 'SELECT') {
                    value = $(this).find('option:selected').text().trim();
                    if (value.startsWith('Select ')) value = '';
                } else {
                    value = $(this).val().trim();
                }
                if (!isNaN(order) && value) {
                    values[order] = value;
                }
            });
            
            let parts = [];
            if (values[0]) parts.push(values[0]);
            let loadSpeed = '';
            if (values[4]) loadSpeed += values[4];
            if (values[5]) loadSpeed += values[5];

            if (loadSpeed) parts.push(loadSpeed);
            if (values[6]) parts.push(values[6]);
            
            $('#quick_name').val(parts.join(' ').trim());
        }
        
        function generateQuickProductSKU() {
            $.ajax({
                url: '{{ route("purchase.orders.generate.sku") }}',
                method: 'GET',
                success: function(response) {
                    if (response.sku) {
                        $('#quick_sku').val(response.sku);
                    }
                }
            });
        }
        
        $(document).on('change input keyup', '.auto-name-trigger', function() {
            setTimeout(generateQuickProductName, 50);
        });
        
        $(document).on('select2:select select2:unselect', '.attr-dropdown', function() {
            setTimeout(generateQuickProductName, 100);
        });
        
        $(document).on('click', '#saveQuickProduct', function() {
            var formData = new FormData($('#quickProductForm')[0]);
            
            if (!$('#quick_name').val()) {
                Botble.showError('Please Enter Name');
                return;
            }
            // if (!formData.get('price') || !formData.get('wholesale_price') || !formData.get('cost_per_item')) {
            //     Botble.showError('Please fill in all price fields');
            //     return;
            // }
            // if (!$('#quick_category').val()) {
            //     Botble.showError('Please select a category');
            //     return;
            // }
            
            $.ajax({
                url: quickProductStoreUrl,
                method: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                success: function(response) {
                    if (response.success) {
                        Botble.showSuccess('Product created successfully');
                        $('#quickAddProductModal').modal('hide');
                        
                        if (window.currentProductRow) {
                            var $select = window.currentProductRow.find('.product-select');
                            var $row = window.currentProductRow;
                            
                            var newOption = new Option(response.product.name + ' - ' + response.product.price, response.product.id, true, true);
                            $select.append(newOption).trigger('change');
                            
                            var detailsHtml = '<div style="display: flex;text-align: left; font-size: 12px; padding-bottom: 20px;">';
                            detailsHtml += '<img src="' + (response.product.image_url || '/images/no-image.png') + '" class="rounded" style="margin-right: 10px;height: 40px;width: 40px;"/>';
                            detailsHtml += '<div><strong>' + response.product.name + '</strong><br>';
                            detailsHtml += 'Category: ' + (response.product.category_name || '-') + ' | SKU: ' + (response.product.sku || '-') + ' | Price: $' + response.product.price + ' | Wholesale Price: ' + (response.product.wholesale_price || '-')  + ' | Cost Price: ' + (response.product.cost_price || '-')  +'</div></div>';
                            $row.find('.product-details').html(detailsHtml);
                            $row.find('.product-price').val(response.product.wholesale_price);
                            $row.find('.product-quantity').val(1);
                            $row.find('.product-amount').val(response.product.wholesale_price);
                            
                            calculateTotal();
                        }
                    } else {
                        Botble.showError(response.message || 'Error creating product');
                    }
                },
                error: function(xhr) {
                    var msg = 'Error creating product';
                    if (xhr.responseJSON?.errors) {
                        msg = Object.values(xhr.responseJSON.errors).flat().join(', ');
                    }
                    Botble.showError(msg);
                }
            });
        });

        $('#quickAddProductModal').on('shown.bs.modal', function () {
            loadQuickProductForm();
        });


    </script>




@endsection