@extends('layouts.app')

@section('title', 'Rate Calculators')

@section('page-wrapper')
    <div class="page-body">
        <div class="container-fluid">
            <div class="row row-cards">
                <div class="col-12">
                    <div class="card mb-3">
                        <div class="card-header">
                            <h3 class="card-title">Rate Calculator</h3>
                        </div>
                        <!-- Form -->
                        <form id="calculateForm" novalidate>
                            @csrf
                            <input type="hidden" name="user_id" id="user_id" value="{{ auth()->user()->id }}">
                            <input type="hidden" name="franchise_id" id="franchise_id"
                                value="{{ auth()->user()->franchise_id }}">
                            <div class="card-body">
                                <div class="tab-content" id="calculateFormTabContent">
                                    <!-- Rate Calculator Tab -->
                                    <div class="tab-pane fade show active" id="rate-calculator" role="tabpanel"
                                        aria-labelledby="rate-calculator-tab">
                                        <div class="row">
                                            <div class="mb-3 col-md-3">
                                                <label class="form-label required">Package Type</label>
                                                <select class="form-select @error('package_type') is-invalid @enderror"
                                                    id="packageType" name="package_type" value="" required>
                                                    @foreach ($packageTypes as $id => $name)
                                                        <option value="{{ $id }}"
                                                            {{ collect(old('package_type'))->contains($id) ? 'selected' : '' }}>
                                                            {{ $name }}</option>
                                                    @endforeach
                                                </select>
                                                @error('package_type')
                                                    <div class="invalid-feedback">{{ $message }}</div>
                                                @enderror
                                                <div class="invalid-feedback">Package type is required.</div>
                                            </div>
                                            <div class="col-md-3 mb-3">
                                                <label class="form-label required">Origin
                                                    Pincode</label>
                                                <input type="number" class="form-control" name="origin_pincode"
                                                    id="originPincode" placeholder="Enter origin pincode" minlength="6"
                                                    maxlength="6" pattern="[0-9]{10}"
                                                    oninput="this.value = this.value.replace(/[^0-9]/g, '').slice(0, 6)"
                                                    required>
                                                @error('origin_pincode')
                                                    <div class="invalid-feedback">{{ $message }}</div>
                                                @enderror
                                                <div class="invalid-feedback" id="originPincodeError">Origin pincode is
                                                    required.
                                                </div>
                                            </div>
                                            <div class="col-md-3 mb-3">
                                                <label class="form-label required">Delivery
                                                    Pincode</label>
                                                <input type="number" class="form-control" name="delivery_area_pincode"
                                                    id="deliveryPincode" placeholder="Enter delivery pincode" minlength="6"
                                                    maxlength="6" pattern="[0-9]{10}"
                                                    oninput="this.value = this.value.replace(/[^0-9]/g, '').slice(0, 6)"
                                                    required>
                                                @error('delivery_area_pincode')
                                                    <div class="invalid-feedback">{{ $message }}</div>
                                                @enderror
                                                <div class="invalid-feedback" id="deliveryPincodeError">Delivery pincode is
                                                    required.</div>
                                            </div>
                                            <div class="col-md-3">
                                                <label class="form-label required">Payment Mode</label>
                                                <select
                                                    class="form-select disabled @error('payment_mode') is-invalid @enderror"
                                                    id="paymentMode" name="payment_mode" value="" required disabled>
                                                    <option value="Prepaid" selected>Prepaid</option>
                                                </select>
                                                @error('payment_mode')
                                                    <div class="invalid-feedback">{{ $message }}</div>
                                                @enderror
                                                <div class="invalid-feedback">Please select a payment mode.</div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-3">
                                                <label class="form-label required">Shipment Weight</label>
                                                <div class="input-group">
                                                    <input type="number" class="form-control" id="weight"
                                                        placeholder="Enter shipment weight (Eg 0.1)" min="0.1"
                                                        step="0.1" required name="approximate_weight">
                                                    <span class="input-group-text unit"
                                                        style="border-radius: 0 0.375rem 0.375rem 0;">Kg</span>
                                                    @error('approximate_weight')
                                                        <div class="invalid-feedback">{{ $message }}</div>
                                                    @enderror
                                                    <div class="invalid-feedback">Shipment weight is required.</div>
                                                </div>
                                            </div>
                                            <div class="col-md-3 rov-field" id="shippingAmountContainer"
                                                style="display: none;">
                                                <label class="form-label required">Shipment
                                                    Amount</label>
                                                <div class="input-group">
                                                    <span class="input-group-text"
                                                        style="border-radius: 0.375rem 0 0 0.375rem;">₹</span>
                                                    <input type="number" class="form-control" id="invoiceValue"
                                                        placeholder="Enter shipment amount" required name="invoice_value"
                                                        style="border-radius: 0 0.375rem 0.375rem 0;">
                                                    @error('invoice_value')
                                                        <div class="invalid-feedback">{{ $message }}</div>
                                                    @enderror
                                                    <div class="invalid-feedback">Shipment amount is required.</div>
                                                </div>
                                            </div>
                                            <div class="col-md-3" id="shipmentTypeContainer">
                                                <label class="form-label required">Shipment
                                                    Type</label>
                                                <select class="form-select @error('shipment_type') is-invalid @enderror"
                                                    id="shipmentType" name="shipment_type" value="" required>
                                                    <option value=""
                                                        {{ old('shipment_type', '') === '' ? 'selected' : '' }}>Select
                                                    </option>
                                                    @foreach ($shipmentTypes as $id => $name)
                                                        <option value="{{ $id }}"
                                                            {{ collect(old('shipment_type'))->contains($id) ? 'selected' : '' }}>
                                                            {{ $name }}</option>
                                                    @endforeach
                                                </select>
                                                @error('shipment_type')
                                                    <div class="invalid-feedback">{{ $message }}</div>
                                                @enderror
                                                <div class="invalid-feedback">Shipment type is required.</div>
                                            </div>
                                            <div class="col-md-3 rov-field" id="shippingModeContainer"
                                                style="display: none;">
                                                <label class="form-label required">Shipping
                                                    Mode</label>
                                                <select class="form-select @error('shipping_mode') is-invalid @enderror"
                                                    id="shippingMode" name="shipping_mode" value="" required>
                                                    @foreach ($shippingMode as $id => $name)
                                                        <option value="{{ $id }}"
                                                            {{ collect(old('shipping_mode'))->contains($id) ? 'selected' : '' }}>
                                                            {{ $name }}</option>
                                                    @endforeach
                                                </select>
                                                @error('shipping_mode')
                                                    <div class="invalid-feedback">{{ $message }}</div>
                                                @enderror
                                                <div class="invalid-feedback">Shipping mode is required.</div>
                                            </div>
                                            <div class="col-md-3 rov-field" id="rovTypeContainer" style="display: none;">
                                                <label class="form-label required">Insurance</label>
                                                <select class="form-select @error('rov_type') is-invalid @enderror"
                                                    id="rovType" name="rov_type" value="" required>
                                                    @foreach ($rovTypes as $id => $name)
                                                        <option value="{{ $id }}"
                                                            {{ collect(old('rov_type'))->contains($id) ? 'selected' : '' }}>
                                                            {{ $name }}</option>
                                                    @endforeach
                                                </select>
                                                @error('rov_type')
                                                    <div class="invalid-feedback">{{ $message }}</div>
                                                @enderror
                                                <div class="invalid-feedback">Insurance type is required.</div>
                                            </div>
                                            <div class="col-md-3 rov-field" id="freightModeContainer"
                                                style="display: none;">
                                                <label class="form-label required">Freight Mode</label>
                                                <select class="form-select @error('freight_mode') is-invalid @enderror"
                                                    id="freightMode" name="freight_mode" value="" required>
                                                    @foreach ($freightMode as $id => $name)
                                                        <option value="{{ $id }}"
                                                            {{ collect(old('freight_mode'))->contains($id) ? 'selected' : '' }}>
                                                            {{ $name }}</option>
                                                    @endforeach
                                                </select>
                                                @error('freight_mode')
                                                    <div class="invalid-feedback">{{ $message }}</div>
                                                @enderror
                                                <div class="invalid-feedback">Freight mode is required.</div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-3 mt-3 rov-field" id="shipmentboxCountContainer"
                                                style="display: none;">
                                                <label class="form-label required">Shipment Box
                                                    Count</label>
                                                <div class="input-group">
                                                    <input type="number" class="form-control" id="shipmentBoxCount"
                                                        placeholder="Enter shipment box count" required
                                                        name="shipment_box_count"
                                                        style="border-radius: 0.375rem 0.375rem 0.375rem 0.375rem;">
                                                    @error('shipment_box_count')
                                                        <div class="invalid-feedback">{{ $message }}</div>
                                                    @enderror
                                                    <div class="invalid-feedback">Shipment box count is required.</div>
                                                </div>
                                            </div>
                                            <div class="col-md-9 mt-3 rov-field" id="shipmentDescriptionContainer"
                                                style="display: none;">
                                                <label class="form-label required">Shipment
                                                    Description</label>
                                                <input type="text" class="form-control" name="shipment_description"
                                                    id="shipmentDescription" placeholder="Enter shipment description"
                                                    required>
                                                @error('shipment_description')
                                                    <div class="invalid-feedback">{{ $message }}</div>
                                                @enderror
                                                <div class="invalid-feedback">Shipment deescription is required.</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="p-0 modal-body">
                                <div class="px-3 py-2 bg-primary-lt fs-3 fw-medium">Package Details</div>
                            </div>
                            <div class="card-body" id="dimension-rows">
                                <div class="row dimension-row">
                                    <div class="col-md quantity-field" style="display: none;">
                                        <label class="form-label required">Number Of
                                            Boxes</label>
                                        <div class="input-group">
                                            <input type="number" class="form-control" name="dimensions[0][box_count]"
                                                id="dimensions[0][quantity]" placeholder="Enter number of boxes" required
                                                min="1" step="1"
                                                style="border-radius: 0.375rem 0.375rem 0.375rem 0.375rem;">
                                            <div class="invalid-feedback">Number of boxes is required (minimum 1).</div>
                                        </div>
                                    </div>
                                    <div class="col-md ewaybill-field" style="display: none;">
                                        <label class="form-label">Eway Bill</label>
                                        <div class="input-group">
                                            <input type="text" class="form-control" name="Ewaybill[0][bill]"
                                                id="Ewaybill[0][bill]" placeholder="Enter eway bill">
                                        </div>
                                    </div>
                                    <div class="col-md invoice-field" style="display: none;">
                                        <label class="form-label required">Invoice
                                            Number</label>
                                        <div class="input-group">
                                            <input type="text" class="form-control" name="invNum[0][invoice]"
                                                id="invNum[0][invoice]" placeholder="Enter invoice number"
                                                style="border-radius: 0.375rem 0.375rem 0.375rem 0.375rem;">
                                            <div class="invalid-feedback">Invoice number is required.</div>
                                        </div>
                                    </div>
                                    <div class="col-md invoice-amount-field" style="display: none;">
                                        <label class="form-label required">Invoice
                                            Amount</label>
                                        <div class="input-group">
                                            <input type="text" class="form-control" name="invAmt[0][invoiceAmount]"
                                                id="invAmt[0][invoiceAmount]" placeholder="Enter invoice amount"
                                                style="border-radius: 0.375rem 0.375rem 0.375rem 0.375rem;">
                                            <div class="invalid-feedback">Invoice amount is required.</div>
                                        </div>
                                    </div>
                                    <div class="col-md lengthClass1">
                                        <label class="form-label required">Length</label>
                                        <div class="input-group">
                                            <input type="number" class="form-control" name="dimensions[0][length_cm]"
                                                id="dimensions[0][length]" placeholder="Enter length" required
                                                min="1" step="1">
                                            <span class="input-group-text unit"
                                                style="border-radius: 0 0.375rem 0.375rem 0;">CM</span>
                                            <div class="invalid-feedback">Length is required (minimum 1).</div>
                                        </div>
                                    </div>
                                    <div class="col-md widthClass1">
                                        <label class="form-label required">Width</label>
                                        <div class="input-group">
                                            <input type="number" class="form-control" name="dimensions[0][width_cm]"
                                                id="dimensions[0][width]" placeholder="Enter width" required
                                                min="1" step="1">
                                            <span class="input-group-text unit"
                                                style="border-radius: 0 0.375rem 0.375rem 0;">CM</span>
                                            <div class="invalid-feedback">Width is required (minimum 1).</div>
                                        </div>
                                    </div>
                                    <div class="col-md heightClass1">
                                        <label class="form-label required">Height</label>
                                        <div class="input-group">
                                            <input type="number" class="form-control" name="dimensions[0][height_cm]"
                                                id="dimensions[0][height]" placeholder="Enter height" required
                                                min="1" step="1">
                                            <span class="input-group-text unit"
                                                style="border-radius: 0 0.375rem 0.375rem 0;">CM</span>
                                            <div class="invalid-feedback">Height is required (minimum 1).</div>
                                        </div>
                                    </div>
                                    <div class="col-auto mt-2" id="colAuto">
                                        <label class="form-label"> </label>
                                        <span class="nav-link-icon d-md-none d-lg-inline-block">
                                            <a href="javascript:void(0);" class="editClass" id="add-dimension"
                                                style="display: none;">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                                    viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                                    stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                                                    class="icon icon-tabler icons-tabler-outline icon-tabler-plus">
                                                    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                                                    <path d="M12 5l0 14" />
                                                    <path d="M5 12l14 0" />
                                                </svg>
                                            </a>
                                        </span>
                                    </div>
                                </div>
                            </div>
                            <div class="card-footer">
                                <button type="submit" class="btn btn-primary me-3" id="calculate">
                                    <span class="button-text">Calculate</span>
                                    <span class="spinner-border spinner-border-sm d-none" role="status"
                                        aria-hidden="true"></span>
                                </button>
                            </div>
                        </form>
                    </div>
                    @php
                        $walletBalance = Auth::user()->franchises->wallet_balance ?? 0.0;
                        $razorpayCommission =
                            App\Models\SpecialSetting::whereIn('key', ['razorpay_commission'])->pluck('value', 'key')[
                                'razorpay_commission'
                            ] ?? 0.0;
                    @endphp
                    <div id="rateResult" class="row row-cards"></div>
                </div>
            </div>
        </div>

    @endsection

    @section('scripts')
        <script>
            $(document).ready(function() {
                const bookNowButtons = document.querySelectorAll('#bookNow');

                bookNowButtons.forEach(button => {
                    const textElement = button.querySelector('.button-text');
                    const spinnerElement = button.querySelector('.spinner-border');
                    if (textElement) textElement.textContent = 'Book Now';
                    if (spinnerElement) spinnerElement.classList.add('d-none');
                    button.disabled = false;
                });
                // const bookNowBtn = document.getElementById('bookNow');
                // bookNowBtn.querySelector('.button-text').textContent = 'Book Now';
                // bookNowBtn.querySelector('.spinner-border').classList.add('d-none');
                // bookNowBtn.disabled = false;
            });
            // Initialize TomSelect for freightMode
            let freightMode = new TomSelect("#freightMode", {
                copyClassesToDropdown: false,
                dropdownParent: 'body',
                controlInput: '<input>',
                render: {
                    item: function(data, escape) {
                        return '<div>' + (data.customProperties ?
                                '<span class="dropdown-item-indicator">' + data.customProperties +
                                '</span>' : '') +
                            escape(data.text) + '</div>';
                    },
                    option: function(data, escape) {
                        return '<div>' + (data.customProperties ?
                                '<span class="dropdown-item-indicator">' + data.customProperties +
                                '</span>' : '') +
                            escape(data.text) + '</div>';
                    },
                },
            });
            // Initialize TomSelect for shippingMode
            let shippingMode = new TomSelect("#shippingMode", {
                copyClassesToDropdown: false,
                dropdownParent: 'body',
                controlInput: '<input>',
                render: {
                    item: function(data, escape) {
                        return '<div>' + (data.customProperties ?
                                '<span class="dropdown-item-indicator">' + data.customProperties +
                                '</span>' : '') +
                            escape(data.text) + '</div>';
                    },
                    option: function(data, escape) {
                        return '<div>' + (data.customProperties ?
                                '<span class="dropdown-item-indicator">' + data.customProperties +
                                '</span>' : '') +
                            escape(data.text) + '</div>';
                    },
                },
            });
            // Initialize TomSelect for shipmentType
            let shipmentType = new TomSelect("#shipmentType", {
                copyClassesToDropdown: false,
                dropdownParent: 'body',
                controlInput: '<input>',
                render: {
                    item: function(data, escape) {
                        return '<div>' + (data.customProperties ?
                                '<span class="dropdown-item-indicator">' + data.customProperties +
                                '</span>' : '') +
                            escape(data.text) + '</div>';
                    },
                    option: function(data, escape) {
                        return '<div>' + (data.customProperties ?
                                '<span class="dropdown-item-indicator">' + data.customProperties +
                                '</span>' : '') +
                            escape(data.text) + '</div>';
                    },
                },
            });
            // Initialize TomSelect for packageType
            let packageType = new TomSelect("#packageType", {
                copyClassesToDropdown: false,
                dropdownParent: 'body',
                controlInput: '<input>',
                render: {
                    item: function(data, escape) {
                        return '<div>' + (data.customProperties ?
                                '<span class="dropdown-item-indicator">' + data.customProperties +
                                '</span>' : '') +
                            escape(data.text) + '</div>';
                    },
                    option: function(data, escape) {
                        return '<div>' + (data.customProperties ?
                                '<span class="dropdown-item-indicator">' + data.customProperties +
                                '</span>' : '') +
                            escape(data.text) + '</div>';
                    },
                },
                onChange: function(value) {
                    resetFormFields();
                    updateFieldsBasedOnPackageType();
                    updateAddDimensionButtonState();
                },
            });
            // Initialize TomSelect for paymentMode
            // let paymentMode = new TomSelect("#paymentMode", {
            //     copyClassesToDropdown: false,
            //     dropdownParent: 'body',
            //     controlInput: '<input>',
            //     render: {
            //         item: function(data, escape) {
            //             return '<div>' + (data.customProperties ?
            //                     '<span class="dropdown-item-indicator">' + data.customProperties +
            //                     '</span>' : '') +
            //                 escape(data.text) + '</div>';
            //         },
            //         option: function(data, escape) {
            //             return '<div>' + (data.customProperties ?
            //                     '<span class="dropdown-item-indicator">' + data.customProperties +
            //                     '</span>' : '') +
            //                 escape(data.text) + '</div>';
            //         },
            //     },
            // });
            // Initialize TomSelect for rovType
            let rovType = new TomSelect("#rovType", {
                copyClassesToDropdown: false,
                dropdownParent: 'body',
                controlInput: '<input>',
                render: {
                    item: function(data, escape) {
                        return '<div>' + (data.customProperties ?
                                '<span class="dropdown-item-indicator">' + data.customProperties +
                                '</span>' : '') +
                            escape(data.text) + '</div>';
                    },
                    option: function(data, escape) {
                        return '<div>' + (data.customProperties ?
                                '<span class="dropdown-item-indicator">' + data.customProperties +
                                '</span>' : '') +
                            escape(data.text) + '</div>';
                    },
                },
            });
            // Add More Dimension Row
            document.getElementById('add-dimension').addEventListener('click', function() {
                const dimensionRows = document.getElementById('dimension-rows');
                const rowCount = dimensionRows.getElementsByClassName('dimension-row').length;
                const newRow = document.createElement('div');
                newRow.className = 'dimension-row row mt-3';
                newRow.innerHTML = `
                <div class="col-md quantity-field" style="display: none;">
                    <label class="form-label required">Number Of Boxes</label>
                    <div class="input-group">
                        <input type="number" class="form-control" name="dimensions[${rowCount}][box_count]"
                            id="dimensions[${rowCount}][quantity]" placeholder="Enter number of boxes" required min="1" step="1" style="border-radius: 0.375rem 0.375rem 0.375rem 0.375rem;">
                        <div class="invalid-feedback">Number of boxes is required (minimum 1).</div>
                    </div>
                </div>
                <div class="col-md ewaybill-field" style="display: none;">
                    <label class="form-label">Eway Bill</label>
                    <div class="input-group">
                        <input type="text" class="form-control" name="Ewaybill[${rowCount}][bill]"
                            id="Ewaybill[${rowCount}][bill]" placeholder="Enter eway bill">
                    </div>
                </div>
                <div class="col-md invoice-field" style="display: none;">
                    <label class="form-label required">Invoice
                        Number</label>
                    <div class="input-group">
                        <input type="text" class="form-control" name="invNum[${rowCount}][invoice]"
                            id="invNum[${rowCount}][invoice]" placeholder="Enter invoice number" style="border-radius: 0.375rem 0.375rem 0.375rem 0.375rem;">
                        <div class="invalid-feedback">Invoice number is required.</div>    
                    </div>
                </div>
                <div class="col-md invoice-amount-field" style="display: none;">
                    <label class="form-label required">Invoice
                        Amount</label>
                    <div class="input-group">
                        <input type="text" class="form-control" name="invAmt[${rowCount}][invoiceAmount]"
                            id="invAmt[${rowCount}][invoiceAmount]" placeholder="Enter invoice amount" style="border-radius: 0.375rem 0.375rem 0.375rem 0.375rem;">
                        <div class="invalid-feedback">Invoice amount is required.</div>
                    </div>
                </div>
                <div class="col-md" class="lengthClass1">
                    <label class="form-label required">Length</label>
                    <div class="input-group">
                        <input type="number" class="form-control" name="dimensions[${rowCount}][length_cm]"
                            id="dimensions[${rowCount}][length]" placeholder="Enter length" required min="1" step="1">
                        <span class="input-group-text unit" style="border-radius: 0 0.375rem 0.375rem 0;">CM</span>
                        <div class="invalid-feedback">Length is required (minimum 1).</div>
                    </div>
                </div>
                <div class="col-md" class="widthClass1">
                    <label class="form-label required">Width</label>
                    <div class="input-group">
                        <input type="number" class="form-control" name="dimensions[${rowCount}][width_cm]"
                            id="dimensions[${rowCount}][width]" placeholder="Enter width" required min="0" step="1">
                        <span class="input-group-text unit" style="border-radius: 0 0.375rem 0.375rem 0;">CM</span>
                        <div class="invalid-feedback">Width is required (minimum 1).</div>
                    </div>
                </div>
                <div class="col-md" class="heightClass1">
                    <label class="form-label required">Height</label>
                    <div class="input-group">
                        <input type="number" class="form-control" name="dimensions[${rowCount}][height_cm]"
                            id="dimensions[${rowCount}][height]" placeholder="Enter height" required min="1" step="1">
                        <span class="input-group-text unit" style="border-radius: 0 0.375rem 0.375rem 0;">CM</span>
                        <div class="invalid-feedback">Height is required (minimum 1).</div>
                    </div>
                </div>
                <div class="col-auto mt-2">
                    <label class="form-label"> </label>
                    <span class="nav-link-icon d-md-none d-lg-inline-block">
                        <a href="javascript:updateAddDimensionButtonState();" class="editClass remove-dimension" tooltip="Remove"
                        onclick="this.closest('.dimension-row').remove()" >
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-trash">
                                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                                <path d="M4 7l16 0"></path>
                                <path d="M10 11l0 6"></path>
                                <path d="M14 11l0 6"></path>
                                <path d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12"></path>
                                <path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3"></path>
                            </svg>
                        </a>
                    </span>
                </div>`;
                dimensionRows.appendChild(newRow);
                updateFieldsBasedOnPackageType();
                updateAddDimensionButtonState();
            });

            // Event listeners for dynamic updates
            document.querySelector('#packageType').addEventListener('change', function() {
                updateAddDimensionButtonState();
            });

            document.getElementById('shipmentBoxCount').addEventListener('input', function() {
                updateAddDimensionButtonState();
            });

            document.getElementById('dimension-rows').addEventListener('input', function(e) {
                if (e.target.name.includes('box_count')) {
                    updateAddDimensionButtonState();
                }
            });

            // Update fields visibility based on packageType
            function updateFieldsBasedOnPackageType() {
                const packageTypeValue = document.querySelector('#packageType').value;
                const shipmentTypeContainer = document.getElementById('shipmentTypeContainer');
                const rovTypeContainer = document.getElementById('rovTypeContainer');
                const freightModeContainer = document.getElementById('freightModeContainer');
                const shippingModeContainer = document.getElementById('shippingModeContainer');
                const shippingAmountContainer = document.getElementById('shippingAmountContainer');
                const shipmentboxCountContainer = document.getElementById('shipmentboxCountContainer');
                const shipmentDescriptionContainer = document.getElementById('shipmentDescriptionContainer');


                const lengthClass = document.querySelectorAll('.lengthClass');
                const widthClass = document.querySelectorAll('.widthClass');
                const heightClass = document.querySelectorAll('.heightClass');
                const colAuto = document.getElementById('colAuto');

                const addDimension = document.getElementById('add-dimension');
                const quantityFields = document.querySelectorAll('.quantity-field');
                const ewayBillFields = document.querySelectorAll('.ewaybill-field');
                const invoiceFields = document.querySelectorAll('.invoice-field');
                const invoiceAmountFields = document.querySelectorAll('.invoice-amount-field');

                if (packageTypeValue === 'single-package-b2c') { // Single Package
                    colAuto.style.display = 'none';
                    rovTypeContainer.style.display = 'none';
                    freightModeContainer.style.display = 'none';
                    shippingModeContainer.style.display = 'block';
                    addDimension.style.display = 'none';
                    shippingAmountContainer.style.display = 'none';
                    shipmentTypeContainer.style.display = 'block';
                    shipmentboxCountContainer.style.display = 'none';
                    shipmentDescriptionContainer.style.display = 'none';
                    quantityFields.forEach(field => field.style.display = 'none');
                    ewayBillFields.forEach(field => field.style.display = 'none');
                    invoiceFields.forEach(field => field.style.display = 'none');
                    invoiceAmountFields.forEach(field => field.style.display = 'none');

                } else if (packageTypeValue === 'multiple-package-b2b') { // Multiple Package (B2C)
                    colAuto.style.display = 'block';
                    rovTypeContainer.style.display = 'block';
                    freightModeContainer.style.display = 'block';
                    shippingModeContainer.style.display = 'none';
                    addDimension.style.display = 'block';
                    shippingAmountContainer.style.display = 'block';
                    shipmentTypeContainer.style.display = 'none';
                    shipmentboxCountContainer.style.display = 'block';
                    shipmentDescriptionContainer.style.display = 'block';
                    quantityFields.forEach(field => field.style.display = 'block');
                    ewayBillFields.forEach(field => field.style.display = 'block');
                    invoiceFields.forEach(field => field.style.display = 'block');
                    invoiceAmountFields.forEach(field => field.style.display = 'block');
                }
            }

            // Initial call to set fields and button state on page load
            document.addEventListener('DOMContentLoaded', function() {
                updateFieldsBasedOnPackageType();
                updateAddDimensionButtonState();
            });

            // Validate Step Form
            function validateStep(stepId) {
                const stepPane = document.getElementById(stepId);
                if (!stepPane) {
                    console.error('Step pane not found:', stepId);
                    return false;
                }

                const inputs = stepPane.querySelectorAll('input[required], select[required], textarea[required]');
                let isValid = true;
                const packageTypeValue = document.querySelector('#packageType')?.value || 'single-package-b2c';

                // Validate only visible required inputs
                inputs.forEach(input => {
                    const isVisible = window.getComputedStyle(input).display !== 'none';
                    if (!isVisible && input.type !== 'hidden') {
                        return; // Skip hidden fields that aren't hidden inputs
                    }

                    // Check if input is invalid
                    if (!input.value.trim() || (input.tagName === 'SELECT' && input.value === '')) {
                        // Apply is-invalid to input-group-text for invoiceValue
                        if (input.id === 'invoiceValue' && packageTypeValue === 'single-package-b2c') {
                            const inputGroupText = input.closest('.input-group')?.querySelector('.input-group-text');
                            if (inputGroupText && input.value != "") {
                                inputGroupText.classList.add('is-invalid');
                            } else {
                                return;
                            }
                        }
                        if (input.id === 'shipmentBoxCount' && packageTypeValue === 'single-package-b2c') {
                            const inputGroupText = input.closest('.input-group')?.querySelector('.form-control');
                            if (inputGroupText && input.value != "") {
                                inputGroupText.classList.add('is-invalid');
                            } else {
                                return;
                            }
                        }
                        if (input.id === 'shipmentDescription' && packageTypeValue === 'single-package-b2c') {
                            const inputGroupText = input.closest('.input-group')?.querySelector('.form-control');
                            if (inputGroupText && input.value != "") {
                                inputGroupText.classList.add('is-invalid');
                            } else {
                                return;
                            }
                        }
                        if (input.id === 'shipmentType' && packageTypeValue === 'multiple-package-b2b') {
                            const inputGroupText = input.closest('.input-group')?.querySelector('.form-select');
                            if (inputGroupText && input.value == "") {
                                inputGroupText.classList.add('is-invalid');
                            } else {
                                return;
                            }
                        }
                        input.classList.add('is-invalid');
                        isValid = false;
                        console.log('Invalid field:', input.id || input.name, 'Value:', input.value);
                    } else {
                        input.classList.remove('is-invalid');
                        // Remove is-invalid from input-group-text for invoiceValue
                        if (input.id === 'invoiceValue') {
                            const inputGroupText = input.closest('.input-group')?.querySelector('.input-group-text');
                            if (inputGroupText) {
                                inputGroupText.classList.remove('is-invalid');
                            }
                        }
                    }

                    // Additional validation for number inputs
                    if (input.type === 'number' && input.value.trim() !== '') {
                        const min = input.getAttribute('min');
                        if (min && parseFloat(input.value) < parseFloat(min)) {
                            input.classList.add('is-invalid');
                            // Apply is-invalid to input-group-text for invoiceValue
                            if (input.id === 'invoiceValue') {
                                const inputGroupText = input.closest('.input-group')?.querySelector(
                                    '.input-group-text');
                                if (inputGroupText) {
                                    inputGroupText.classList.add('is-invalid');
                                }
                            }
                            isValid = false;
                            console.log('Invalid number:', input.id || input.name, 'Value:', input.value, 'Min:', min);
                        }
                    }
                });

                // Validate Dimensions
                const dimensionRows = document.getElementById('dimension-rows')?.getElementsByClassName('dimension-row');
                if (dimensionRows) {
                    let totalBoxCount = 0;
                    for (let row of dimensionRows) {
                        const quantity = row.querySelector('input[name*="box_count"]');
                        const length = row.querySelector('input[name*="length_cm"]');
                        const width = row.querySelector('input[name*="width_cm"]');
                        const height = row.querySelector('input[name*="height_cm"]');
                        const invoice = row.querySelector('input[name*="invoice"]');
                        const invoiceAmount = row.querySelector('input[name*="invoiceAmount"]');

                        // Skip quantity validation for Single Package (B2C)
                        if (quantity && packageTypeValue !== 'single-package-b2c') {
                            if (window.getComputedStyle(quantity).display !== 'none') {
                                if (!quantity.value || parseInt(quantity.value) < 1) {
                                    quantity.classList.add('is-invalid');
                                    isValid = false;
                                } else {
                                    quantity.classList.remove('is-invalid');
                                    totalBoxCount += parseInt(quantity.value);
                                }
                            }
                        }

                        // Always validate length, width, height since they are visible
                        if (invoice && packageTypeValue !== 'single-package-b2c') {
                            if (window.getComputedStyle(quantity).display !== 'none') {
                                if (invoice && (!invoice.value)) {
                                    invoice.classList.add('is-invalid');
                                    isValid = false;
                                } else if (invoice) {
                                    invoice.classList.remove('is-invalid');
                                }
                            }
                        }

                        // Always validate length, width, height since they are visible
                        if (invoiceAmount && packageTypeValue !== 'single-package-b2c') {
                            if (window.getComputedStyle(quantity).display !== 'none') {
                                if (invoiceAmount && (!invoiceAmount.value)) {
                                    invoiceAmount.classList.add('is-invalid');
                                    isValid = false;
                                } else if (invoiceAmount) {
                                    invoiceAmount.classList.remove('is-invalid');
                                }
                            }
                        }

                        // Always validate length, width, height since they are visible
                        if (length && (!length.value || parseFloat(length.value) <= 0)) {
                            length.classList.add('is-invalid');
                            isValid = false;
                        } else if (length) {
                            length.classList.remove('is-invalid');
                        }

                        if (width && (!width.value || parseFloat(width.value) <= 0)) {
                            width.classList.add('is-invalid');
                            isValid = false;
                        } else if (width) {
                            width.classList.remove('is-invalid');
                        }

                        if (height && (!height.value || parseFloat(height.value) <= 0)) {
                            height.classList.add('is-invalid');
                            isValid = false;
                        } else if (height) {
                            height.classList.remove('is-invalid');
                        }
                    }
                    if (packageTypeValue !== 'single-package-b2c') {
                        const shipmentBoxCount = document.getElementById('shipmentBoxCount')?.value;
                        const shipmentWeight = document.getElementById('weight')?.value;
                        const shipmentWt = document.querySelector('weight');

                        // Validate total box count against shipmentBoxCount
                        const shipmentBoxCountInt = parseInt(shipmentBoxCount);
                        if (totalBoxCount !== shipmentBoxCountInt || totalBoxCount < dimensionRows.length) {
                            for (let row of dimensionRows) {
                                const quantity = row.querySelector('input[name*="box_count"]');
                                if (quantity && window.getComputedStyle(quantity).display !== 'none') {
                                    quantity.classList.add('is-invalid');
                                    const invalidFeedback = quantity.nextElementSibling;
                                    if (invalidFeedback && invalidFeedback.classList.contains('invalid-feedback')) {
                                        invalidFeedback.textContent = 'Total number of boxes (' + totalBoxCount +
                                            ') must match Shipment Box Count (' + shipmentBoxCount + ').';
                                    }
                                }
                            }
                            isValid = false;
                        } else {
                            for (let row of dimensionRows) {
                                const quantity = row.querySelector('input[name*="box_count"]');
                                if (quantity && window.getComputedStyle(quantity).display !== 'none') {
                                    quantity.classList.remove('is-invalid');
                                    const invalidFeedback = quantity.nextElementSibling;
                                    if (invalidFeedback && invalidFeedback.classList.contains('invalid-feedback')) {
                                        invalidFeedback.textContent = 'Number of boxes is required (minimum 1).';
                                    }
                                }
                            }
                        }

                        // Validate weight per box (minimum 20 grams = 0.02 kg)
                        const shipmentWeightFloat = parseFloat(shipmentWeight);
                        const shipmentBoxCountFloat = parseInt(shipmentBoxCount);
                        if (shipmentBoxCountFloat > 0 && shipmentWeightFloat / shipmentBoxCountFloat * 1000 < 20) {
                            const weightInput = document.getElementById('weight');
                            weightInput.classList.add('is-invalid');
                            const weightFeedback = weightInput.parentElement.querySelector('.invalid-feedback');
                            if (weightFeedback) {
                                weightFeedback.textContent = 'Weight per box (' + (shipmentWeightFloat / shipmentBoxCountFloat *
                                    1000).toFixed(2) + ' grams) must be at least 20 grams.';
                                weightFeedback.style.display = 'block';
                                isValid = false;
                            }
                        } else {
                            const weightInput = document.getElementById('weight');
                            const generalFeedback = weightInput.nextElementSibling?.querySelector('.invalid-feedback');

                            if (!shipmentWeight && shipmentWeight <= 0) {
                                generalFeedback.textContent = 'Shipment weight is required.';
                                isValid = false;
                            } else {
                                weightInput.classList.remove('is-invalid');
                                const weightFeedback = weightInput.parentElement.querySelector('.invalid-feedback');
                                if (weightFeedback) {
                                    weightFeedback.style.display = 'none';
                                }
                            }

                            if (generalFeedback && generalFeedback.textContent === 'Weight per box (' + (shipmentWeightFloat /
                                    shipmentBoxCountFloat * 1000).toFixed(2) + ' grams) must be at least 20 grams.') {
                                generalFeedback.textContent = 'Shipment weight is required.';
                                isValid = false;
                            }
                        }
                    }

                } else {
                    console.error('Dimension rows not found');
                }

                return isValid;
            }

            // Validate Form on Submit
            document.getElementById('calculateForm')?.addEventListener('submit', function(e) {
                e.preventDefault();
                $('#rateResult').html('');
                const currentTab = document.querySelector('.tab-pane.active')?.id;
                if (!currentTab) {
                    console.error('No active tab found');
                    return;
                }

                if (!validateStep(currentTab)) {
                    //alert('Please fill out all required fields.');
                } else {
                    const btn = this;
                    $('#calculate').prop('disabled', true);
                    btn.querySelector('.button-text').textContent = 'Calculating...';
                    btn.querySelector('.spinner-border').classList.remove('d-none');

                    const formData = $(this).serializeArray();
                    const packageTypeValue = document.querySelector('#packageType')?.value || 'single-package-b2c';
                    const data = {};
                    data.user_id = document.querySelector('#user_id')?.value;
                    data.franchise_id = document.querySelector('#franchise_id')?.value;
                    data.origin_pincode = document.querySelector('#origin_pincode')?.value;
                    data.delivery_area_pincode = document.querySelector('#delivery_area_pincode')?.value;
                    data.approximate_weight = document.querySelector('#approximate_weight')?.value;
                    data.invoice_value = document.querySelector('#invoice_value')?.value;
                    if (packageTypeValue === 'single-package-b2c') {
                        data.shipment_type = document.querySelector('#shipmentType')?.value;
                    }
                    if (packageTypeValue === 'single-package-b2c') {
                        data.shipment_mode = document.querySelector('#shippingMode')?.value;
                    }
                    if (packageTypeValue === 'multiple-package-b2b') {
                        data.rov_type = document.querySelector('#rovType')?.value;
                    }
                    if (packageTypeValue === 'multiple-package-b2b') {
                        data.freight_mode = document.querySelector('#freightMode')?.value;
                    }
                    if (packageTypeValue === 'multiple-package-b2b') {
                        data.shipment_box_count = document.querySelector('#shipmentBoxCount')?.value;
                    }
                    if (packageTypeValue === 'multiple-package-b2b') {
                        data.shipment_description = document.querySelector('#shipmentDescription')?.value;
                    }
                    // Filter form data based on package type
                    formData.forEach(item => {
                        // Always include these fields regardless of package type
                        const alwaysInclude = ['package_type', 'origin_pincode',
                            'delivery_area_pincode', 'payment_mode', 'approximate_weight', 'invoice_value'
                        ];

                        data.dimensions = data.dimensions || [];
                        data.Ewaybill = data.Ewaybill || [];
                        data.invNum = data.invNum || [];
                        data.invAmt = data.invAmt || [];

                        // Handle dimensions fields
                        const dimensionMatch = item.name.match(
                            /dimensions\[(\d+)\]\[(box_count|length_cm|width_cm|height_cm)\]/
                        );

                        // Handle ewayMatch fields
                        const ewayMatch = item.name.match(
                            /Ewaybill\[(\d+)\]\[(bill)\]/
                        );

                        // Handle invNum fields
                        const invNumMatch = item.name.match(
                            /invNum\[(\d+)\]\[(invoice)\]/
                        );

                        // Handle invAmount fields
                        const invAmountMatch = item.name.match(
                            /invAmt\[(\d+)\]\[(invoiceAmount)\]/
                        );

                        if (dimensionMatch) {
                            const index = parseInt(dimensionMatch[1]);
                            const field = dimensionMatch[2];
                            data.dimensions[index] = data.dimensions[index] || {};
                            data.dimensions[index][field] = item.value;
                            return;
                        }

                        // Include Ewaybill only for Multiple Package (B2B or B2C)
                        if (item.name.includes('Ewaybill') && packageTypeValue !== 'single-package-b2c') {
                            const index = parseInt(ewayMatch[1]);
                            const field = ewayMatch[2];
                            data.Ewaybill[index] = data.Ewaybill[index] || {};
                            data.Ewaybill[index][field] = item.value;
                            return;
                        }

                        // Include invNum only for Multiple Package (B2B or B2C)
                        if (item.name.includes('invNum') && packageTypeValue !== 'single-package-b2c') {
                            const index = parseInt(invNumMatch[1]);
                            const field = invNumMatch[2];
                            data.invNum[index] = data.invNum[index] || {};
                            data.invNum[index][field] = item.value;
                            return;
                        }

                        // Include invNum only for Multiple Package (B2B or B2C)
                        if (item.name.includes('invAmt') && packageTypeValue !== 'single-package-b2c') {
                            const index = parseInt(invAmountMatch[1]);
                            const field = invAmountMatch[2];
                            data.invAmt[index] = data.invAmt[index] || {};
                            data.invAmt[index][field] = item.value;
                            return;
                        }

                        // Include quantity only for Multiple Package (B2B or B2C)
                        if (item.name.includes('box_count') && packageTypeValue !== 'single-package-b2c') {
                            data[item.name] = item.value;
                            return;
                        }

                        // Include shipping_mode only for Multiple Package (B2C)
                        if (item.name === 'shipping_mode' && packageTypeValue === 'single-package-b2c') {
                            data[item.name] = item.value;
                            // data.shipment_type = document.querySelector('#shippingMode')?.value;
                            return;
                        }

                        /*if (item.name === 'shipment_type' && packageTypeValue === 'single-package-b2c' &&
                            packageTypeValue !== 'multiple-package-b2b') {
                            data[item.name] = item.value;
                            return;
                        }*/

                        // Include freight_mode only for Multiple Package (B2C)
                        if (item.name === 'freight_mode' && packageTypeValue === 'multiple-package-b2b' &&
                            packageTypeValue !== 'single-package-b2c') {
                            data[item.name] = item.value;
                            return;
                        }

                        // Include rovType only for Multiple Package (B2C)
                        if (item.name === 'rov_type' && packageTypeValue === 'multiple-package-b2b') {
                            data[item.name] = item.value == "0" ? false : true;
                            return;
                        }

                        // Include fields that are always required
                        if (alwaysInclude.includes(item.name)) {
                            data[item.name] = item.value;
                        }
                    });
                    $.ajax({
                        url: '/api/delhivery/rate-estimates',
                        type: 'POST',
                        data: data,
                        dataType: 'json',
                        headers: {
                            "Accept": "application/json",
                            "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr('content')
                        },
                        success: function(response) {
                            const calculateBtn = document.getElementById('calculate');
                            calculateBtn.querySelector('.button-text').textContent = 'Calculate';
                            calculateBtn.querySelector('.spinner-border').classList.add('d-none');
                            calculateBtn.disabled = false;
                            let html = '';
                            let hasSuccess = false;

                            html +=
                                `<div class="col-md-12 h2 mb-0 ms-1" bis_skin_checked="1">Results: </div>`;
                            if (Array.isArray(response.results) && response.results.length > 0) {
                                $.each(response.results, function(index, resultData) {
                                    const accountType = resultData.account_type ||
                                        'Unknown account type';
                                    const businessName = resultData.business_name ||
                                        'Unknown Courier';
                                    const businessLogo = resultData.logo ? '/storage/' + resultData
                                        .logo : '/storage/couriers/logos/default.jpg';

                                    if (resultData.success) {
                                        hasSuccess = true;
                                        const walletBalance = {!! $walletBalance !!} || 0;
                                        const razorpayCommission = {!! $razorpayCommission !!} || 0;
                                        const razorPercentage = parseFloat(razorpayCommission)
                                            .toFixed(2);
                                        const adminCommission = parseFloat(resultData
                                            .admin_commission || 0).toFixed(2);
                                        const superadminCommission = parseFloat(resultData
                                            .superadmin_commission || 0).toFixed(2);
                                        const totalCost = parseFloat(resultData.data.total_amount ||
                                            resultData.data.total || 0);
                                        const adminCommissionPercentage = totalCost *
                                            adminCommission / 100;
                                        const superadminCommissionPercentage = totalCost *
                                            superadminCommission / 100;
                                        const razorPayCommissionPercentage = totalCost * parseFloat(
                                            razorpayCommission || 0).toFixed(2) / 100;
                                        const grossAmount = parseFloat(resultData.data
                                            .gross_amount || 0);
                                        const accountId = resultData.account_id || '';
                                        const userId = {!! auth::user()->id !!};
                                        const franchiseId = {!! auth::user()->franchise_id !!};
                                        const chargedWeight = parseFloat(resultData.data
                                            .charged_weight || 0);
                                        const includeCommission = (parseFloat(totalCost) +
                                            parseFloat(totalCost) *
                                            parseFloat(razorPercentage) / 100 +
                                            parseFloat(totalCost) *
                                            parseFloat(adminCommission) / 100 + parseFloat(
                                                totalCost) * parseFloat(
                                                superadminCommission) / 100).toFixed(2);

                                        // Convert dimensions to JSON string and escape quotes
                                        const dimensionsJson = JSON.stringify(data.dimensions)
                                            .replace(/"/g, '&quot;');
                                        const EwaybillsJson = JSON.stringify(data.Ewaybill)
                                            .replace(/"/g, '&quot;');
                                        const invNumJson = JSON.stringify(data.invNum)
                                            .replace(/"/g, '&quot;');
                                        const invAmtJson = JSON.stringify(data.invAmt)
                                            .replace(/"/g, '&quot;');

                                        html += `
                                            <div class="col-md-12 col-md-3 d-flex-1">
                                                <div class="card">
                                                    <div class="card-body">
                                                        <div class="row align-items-center">
                                                            <div class="col-auto">
                                                                <img src="${businessLogo}" alt="${businessName} Logo"
                                                                    class="img-fluid"
                                                                    style="width: 35px; border-radius: 50%; object-fit:contain;border: 1px solid #dce1e7;">
                                                            </div>
                                                            <div class="col">
                                                                <div>${businessName} (${accountType})</div>
                                                                <div class="text-secondary">₹${parseFloat(totalCost).toFixed(2)} Total cost</div>
                                                                <div class="text-secondary">${adminCommission} (%) Admin commission ₹${adminCommissionPercentage.toFixed(2)}</div>
                                                                <div class="text-secondary">${superadminCommission} (%) Superadmin commission ₹${superadminCommissionPercentage.toFixed(2)} </div>
                                                                <div class="text-secondary">${razorPercentage} (%) Razorpay commission ₹${razorPayCommissionPercentage.toFixed(2)} </div>
                                                                <div class="text-secondary">₹${includeCommission} Include commission</div>
                                                            </div>
                                                            <div class="col-auto">
                                                                ${walletBalance < totalCost ?
                                                                    `<span data-bs-toggle="tooltip" data-bs-placement="top"
                                                                                                                                                                                                                                                                                                                                                                                                                    title="Insufficient balance: ₹${parseFloat(walletBalance).toFixed(2)}">
                                                                                                                                                                                                                                                                                                                                                                                                                <button class="btn btn-primary disabled"><span class="button-text">Book Now</span><span class="spinner-border spinner-border-sm d-none" role="status" aria-hidden="true"></span></button>
                                                                                                                                                                                                                                                                                                                                                                                                            </span>` :
                                                                    `<button class="btn btn-primary book-now" id="bookNow"
                                                                                                                                                                                                                                                                                                                                                                                                            data-bs-toggle="modal"
                                                                                                                                                                                                                                                                                                                                                                                                            data-bs-target="#bookNowModal"
                                                                                                                                                                                                                                                                                                                                                                                                            data-package-type="${document.querySelector('#packageType').value}"
                                                                                                                                                                                                                                                                                                                                                                                                            data-account="${businessName}"
                                                                                                                                                                                                                                                                                                                                                                                                            data-courier-setups-business-name="${businessName}"
                                                                                                                                                                                                                                                                                                                                                                                                            data-courier-setups-id="${accountId}"
                                                                                                                                                                                                                                                                                                                                                                                                            data-user-id="${userId}"
                                                                                                                                                                                                                                                                                                                                                                                                            data-franchise-id="${franchiseId}"
                                                                                                                                                                                                                                                                                                                                                                                                            data-base-cost="${totalCost}"
                                                                                                                                                                                                                                                                                                                                                                                                            data-total-cost="${includeCommission}"
                                                                                                                                                                                                                                                                                                                                                                                                            data-gross-amount="${grossAmount}"
                                                                                                                                                                                                                                                                                                                                                                                                            data-net-amount="${totalCost}"
                                                                                                                                                                                                                                                                                                                                                                                                            data-user-id="{{ Auth::user()->id }}"
                                                                                                                                                                                                                                                                                                                                                                                                            data-admin-commission="${adminCommission}"
                                                                                                                                                                                                                                                                                                                                                                                                            data-admin-commission-amount="${adminCommissionPercentage}"
                                                                                                                                                                                                                                                                                                                                                                                                            data-razorpay-commission="${razorpayCommission}"
                                                                                                                                                                                                                                                                                                                                                                                                            data-razorpay-commission-amount="${razorPayCommissionPercentage}"
                                                                                                                                                                                                                                                                                                                                                                                                            data-superadmin-commission="${superadminCommission}"
                                                                                                                                                                                                                                                                                                                                                                                                            data-superadmin-commission-amount="${superadminCommissionPercentage}"
                                                                                                                                                                                                                                                                                                                                                                                                            data-origin-pincode="${data.origin_pincode}"
                                                                                                                                                                                                                                                                                                                                                                                                            data-delivery-area-pincode="${data.delivery_area_pincode}"
                                                                                                                                                                                                                                                                                                                                                                                                            data-approximate-weight="${data.approximate_weight}"
                                                                                                                                                                                                                                                                                                                                                                                                            data-invoice-value="${data.invoice_value}"
                                                                                                                                                                                                                                                                                                                                                                                                            data-dimensions="${dimensionsJson}"
                                                                                                                                                                                                                                                                                                                                                                                                            data-ewaybill="${EwaybillsJson}"
                                                                                                                                                                                                                                                                                                                                                                                                            data-invnum="${invNumJson}"
                                                                                                                                                                                                                                                                                                                                                                                                            data-invamt="${invAmtJson}"
                                                                                                                                                                                                                                                                                                                                                                                                            data-shipping-mode="${data.shipment_mode}"
                                                                                                                                                                                                                                                                                                                                                                                                            data-freight-mode="${data.freight_mode}"
                                                                                                                                                                                                                                                                                                                                                                                                            data-rov-insurance="${data.rov_type}"
                                                                                                                                                                                                                                                                                                                                                                                                            data-shipment-box-count="${data.shipment_box_count}"
                                                                                                                                                                                                                                                                                                                                                                                                            data-shipment-description="${data.shipment_description}"
                                                                                                                                                                                                                                                                                                                                                                                                            data-shipment-mode="${data.shipment_mode}"
                                                                                                                                                                                                                                                                                                                                                                                                            data-shipment-type="${data.shipment_type}"
                                                                                                                                                                                                                                                                                                                                                                                                            ><span class="button-text">Book Now</span><span class="spinner-border spinner-border-sm d-none" role="status" aria-hidden="true"></span></button>`
                                                                }
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>`;
                                    } else {
                                        // Handle success: false
                                        const errorMessage = resultData.data.message ||
                                            'Unknown error';
                                        const errorStatus = resultData.status || 'error';
                                        html += `
                                        <div class="col-md-12 col-md-3 d-flex-1">
                                            <div class="card mb-3 border-warning">
                                                <div class="card-body">
                                                    <div class="row align-items-center">
                                                        <div class="col-auto">
                                                            <img src="${businessLogo}" alt="${businessName} Logo"
                                                                class="img-fluid"
                                                                style="width: 35px; border-radius: 50%; object-fit:contain;border: 1px solid #dce1e7;">
                                                        </div>
                                                        <div class="col">
                                                            <div>${businessName}</div>
                                                            <div class="text-warning">${errorMessage}</div>
                                                            <div class="text-muted small">${errorStatus}</div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>`;
                                    }
                                });

                                // if (!hasSuccess) {
                                //     html =
                                //         '<div class="col-12"><div class="alert alert-warning">No serviceable couriers found.</div></div>';
                                // }
                            } else {
                                html =
                                    '<div class="col-12"><div class="alert alert-info">No courier rates available.</div></div>';
                            }

                            $('#rateResult').html(html);

                            const tooltipTriggerList = document.querySelectorAll(
                                '[data-bs-toggle="tooltip"]');
                            const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl =>
                                new bootstrap.Tooltip(tooltipTriggerEl));
                        },
                        error: function(xhr) {
                            const calculateBtn = document.getElementById('calculate');
                            calculateBtn.querySelector('.button-text').textContent = 'Calculate';
                            calculateBtn.querySelector('.spinner-border').classList.add('d-none');
                            calculateBtn.disabled = false;

                            const response = xhr.responseJSON;
                            if (response && response.errors && response.errors.delivery_area_pincode) {
                                $('#deliveryPincode').addClass('is-invalid'); // highlight input
                                $('#deliveryPincodeError')
                                    .text(response.errors.delivery_area_pincode[0]) // show first error
                                    .show();
                            }

                            if (response && response.errors && response.errors.origin_pincode) {
                                $('#originPincode').addClass('is-invalid'); // highlight input
                                $('#originPincodeError')
                                    .text(response.errors.origin_pincode[0]) // show first error
                                    .show();
                            }
                        }
                    });
                }
            });

            $(document).on('click', '.book-now', function() {
                const account = $(this).data('account');
                const packageType = $(this).data('package-type');
                const courierSetupsId = $(this).data('courier-setups-id');
                const baseCost = parseFloat($(this).data('base-cost'));
                const totalCost = parseFloat($(this).data('total-cost'));
                const franchiseId = parseInt($(this).data('franchise-id'));
                const grossAmount = parseFloat($(this).data('gross-amount'));
                const netAmount = parseFloat($(this).data('net-amount'));
                const adminCommission = parseFloat($(this).data('admin-commission'));
                const adminCommissionAmount = parseFloat($(this).data('admin-commission-amount'));
                const razorpayCommission = parseFloat($(this).data('razorpay-commission'));
                const razorpayCommissionAmount = parseFloat($(this).data('razorpay-commission-amount'));
                const superadminCommission = parseFloat($(this).data('superadmin-commission'));
                const superadminCommissionAmount = parseFloat($(this).data('superadmin-commission-amount'));
                const userId = $(this).data('user-id'); // make sure this is available
                const originPincode = $(this).data('origin-pincode');
                const deliveryAreaPincode = $(this).data('delivery-area-pincode');
                const approximateWeight = $(this).data('approximate-weight');
                const invoiceValue = $(this).data('invoice-value');
                const dimensions = $(this).data('dimensions');
                const Ewaybill = $(this).data('ewaybill');
                const invNum = $(this).data('invnum');
                const invAmt = $(this).data('invamt');
                const rovType = $(this).data('rov-insurance');
                const freightMode = $(this).data('freight-mode');
                const shipmentBoxCount = $(this).data('shipment-box-count');
                const shipmentDescription = $(this).data('shipment-description');
                const shipmentMode = $(this).data('shipment-mode');
                const shipmentType = $(this).data('shipment-type');
                const btn = this;
                $('#bookNow').prop('disabled', true);
                btn.querySelector('.button-text').textContent = 'Booking...';
                btn.querySelector('.spinner-border').classList.remove('d-none');
                $.ajax({
                    url: `/bookings/checkBalance/${userId}`,
                    method: 'GET',
                    success: function(response) {
                        if (response.success) {
                            if (response.balance >= netAmount) {
                                // Encrypt parameters via AJAX
                                $.ajax({
                                    url: '/bookings/encrypt-params',
                                    method: 'POST',
                                    data: {
                                        _token: '{{ csrf_token() }}',
                                        packageType: packageType,
                                        userId: userId,
                                        franchiseId: franchiseId,
                                        account: account,
                                        courierSetupsId: courierSetupsId,
                                        baseCost: baseCost,
                                        totalCost: totalCost,
                                        grossAmount: grossAmount,
                                        netAmount: netAmount,
                                        adminCommission: adminCommission,
                                        adminCommissionAmount: adminCommissionAmount,
                                        razorpayCommission: razorpayCommission,
                                        razorpayCommissionAmount: razorpayCommissionAmount,
                                        superadminCommission: superadminCommission,
                                        superadminCommissionAmount: superadminCommissionAmount,
                                        originPincode: originPincode,
                                        deliveryAreaPincode: deliveryAreaPincode,
                                        approximateWeight: approximateWeight,
                                        invoiceValue: invoiceValue,
                                        dimensions: dimensions,
                                        Ewaybill: Ewaybill,
                                        invNum: invNum,
                                        invAmt: invAmt,
                                        rovType: rovType,
                                        freightMode: freightMode,
                                        shipmentBoxCount: shipmentBoxCount,
                                        shipmentDescription: shipmentDescription,
                                        shipmentMode: shipmentMode,
                                        shipmentType: shipmentType
                                    },
                                    success: function(encryptResponse) {
                                        if (encryptResponse.status === 'success') {
                                            const bookNowButtons = document.querySelectorAll(
                                                '#bookNow');
                                            bookNowButtons.forEach(button => {
                                                const textElement = button
                                                    .querySelector('.button-text');
                                                const spinnerElement = button
                                                    .querySelector('.spinner-border');
                                                if (textElement) textElement
                                                    .textContent = 'Book Now';
                                                if (spinnerElement) spinnerElement
                                                    .classList.add('d-none');
                                                button.disabled = false;
                                            });
                                            // Redirect with encrypted data
                                            const redirectRoute = (document.querySelector(
                                                        '#packageType').value ===
                                                    'single-package-b2c') ?
                                                `/bookings/create?data=${encodeURIComponent(encryptResponse.encrypted)}` :
                                                `/bookings/create-b2b?data=${encodeURIComponent(encryptResponse.encrypted)}`;
                                            window.location.href = redirectRoute;
                                        } else {
                                            toastr.error('Failed to encrypt parameters.');
                                        }
                                    },
                                    error: function() {
                                        toastr.error('Error encrypting parameters.');
                                    }
                                });
                            } else {
                                toastr.error('Insufficient wallet balance to proceed with booking.');
                            }
                        } else {
                            toastr.error('Could not check wallet balance.');
                        }
                    },
                    error: function() {
                        toastr.error('Something went wrong while checking balance.');
                    }
                });
            });

            // Function to reset all form fields
            function resetFormFields() {
                const form = document.getElementById('calculateForm');
                const dimensionRows = document.getElementById('dimension-rows');

                // Reset dimensions to only one row
                while (dimensionRows.children.length > 1) {
                    dimensionRows.removeChild(dimensionRows.lastChild);
                }
                const firstDimensionRow = dimensionRows.querySelector('.dimension-row');
                firstDimensionRow.querySelectorAll('input').forEach(input => {
                    input.value = '';
                    input.classList.remove('is-invalid');
                });

                // Clear rate result
                document.getElementById('rateResult').innerHTML = '';
            }

            // Function to update the Add Dimension button state
            function updateAddDimensionButtonState() {
                const packageTypeValue = document.querySelector('#packageType').value;
                const addDimensionButton = document.getElementById('add-dimension');
                const shipmentBoxCountInput = document.getElementById('shipmentBoxCount');
                const dimensionRows = document.getElementById('dimension-rows').getElementsByClassName('dimension-row');

                if (packageTypeValue === 'multiple-package-b2b' && shipmentBoxCountInput) {
                    const shipmentBoxCount = parseInt(shipmentBoxCountInput.value) || 0;
                    let totalBoxCount = 0;

                    // Calculate total box count from all dimension rows
                    for (let row of dimensionRows) {
                        const quantityInput = row.querySelector('input[name*="box_count"]');
                        if (quantityInput && window.getComputedStyle(quantityInput).display !== 'none') {
                            const quantity = parseInt(quantityInput.value) || 0;
                            totalBoxCount += quantity;
                        }
                    }

                    // Enable/disable the Add Dimension button
                    if (totalBoxCount >= shipmentBoxCount && shipmentBoxCount > 0) {
                        addDimensionButton.classList.add('disabled');
                        addDimensionButton.style.pointerEvents = 'none';
                        addDimensionButton.style.opacity = '0.6';
                    } else {
                        addDimensionButton.classList.remove('disabled');
                        addDimensionButton.style.pointerEvents = 'auto';
                        addDimensionButton.style.opacity = '1';
                    }
                } else {
                    // For single-package-b2c, keep button disabled/hidden
                    addDimensionButton.classList.add('disabled');
                    addDimensionButton.style.pointerEvents = 'none';
                    addDimensionButton.style.opacity = '0.6';
                }
            }
        </script>
    @endsection