@extends('layouts.app')

@section('title', 'Add Booking')

@section('page-wrapper')
    <!-- Page Header with Breadcrumb -->
    {{-- <div class="page-header d-print-none">
        <div class="container-fluid">
            <div class="row g-2 align-items-center">
                <div class="col">
                    <!-- Breadcrumb -->
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item">
                                <a href="{{ route('dashboard') }}">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24"
                                        viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"
                                        stroke-linecap="round" stroke-linejoin="round">
                                        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                                        <path d="M5 12l-2 0l9 -9l9 9l-2 0" />
                                        <path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" />
                                        <path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" />
                                    </svg>
                                    Dashboard
                                </a>
                            </li>
                            <li class="breadcrumb-item">
                                <a href="{{ route('bookings.index') }}">
                                    <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-packages">
                                        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                                        <path d="M7 16.5l-5 -3l5 -3l5 3v5.5l-5 3z"></path>
                                        <path d="M2 13.5v5.5l5 3"></path>
                                        <path d="M7 16.545l5 -3.03"></path>
                                        <path d="M17 16.5l-5 -3l5 -3l5 3v5.5l-5 3z"></path>
                                        <path d="M12 19l5 3"></path>
                                        <path d="M17 16.5l5 -3"></path>
                                        <path d="M12 13.5v-5.5l-5 -3l5 -3l5 3v5.5"></path>
                                        <path d="M7 5.03v5.455"></path>
                                        <path d="M12 8l5 -3"></path>
                                    </svg>
                                    Bookings
                                </a>
                            </li>
                            <li class="breadcrumb-item active" aria-current="page">Add</li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>
    </div> --}}

    <!-- Page Body -->
    <div class="page-body">
        <div class="container-fluid">
            <!-- Display General Errors -->
            {{-- @if (session('error'))
                <div class="alert alert-danger">
                    <h4 class="alert-title">Error</h4>
                    <p>{{ session('error') }}</p>
                </div>
            @endif --}}
            <!-- Display API Errors -->
            @if (session('api_errors'))
                <div class="alert alert-danger">
                    <h4 class="alert-title">Errors</h4>
                    <ul>
                        @foreach (session('api_errors') as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif
            <!-- Display Validation Errors -->
            {{-- @if ($errors->any())
                <div class="alert alert-danger">
                    <h4 class="alert-title">Validation Errors</h4>
                    <ul>
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif --}}
            <div class="position-relative">
                <div class="loader-overlay d-none" id="myLoader">
                    <div class="spinner-border text-primary" role="status">
                        <span class="visually-hidden">Loading...</span>
                    </div>
                </div>
                <div class="row">
                    <!-- Card -->
                    <div class="col-md-md-9 col-md-9">
                        <div class="card">
                            <!-- Card Header -->
                            <div class="card-header">
                                <h3 class="card-title">Add Booking</h3>
                            </div>
                            <form id="bookingForm" action="{{ route('bookings.store') }}" method="POST"
                                enctype="multipart/form-data">
                                <input type="hidden" name="data" id="data" value="{{ $data }}">
                                <input type="hidden" name="encryptPrice" id="encryptPrice" value="{!! $encrypted !!}">
                                @csrf
                                <div class="p-0 modal-body">
                                    <div class="px-3 py-2 bg-primary-lt fs-3 fw-medium">Warehouse Details</div>
                                </div>
                                <div class="card-body">
                                    <div class="row">
                                        <div class="mb-3 col-md-4">
                                            <label for="warehouse_id" class="form-label required">Warehouse</label>
                                            <select class="form-select @error('warehouse_id') is-invalid @enderror"
                                                id="warehouse_id" name="warehouse_id" value="">
                                                <option value="select"
                                                    {{ old('warehouse_id', '') === '' ? 'selected' : '' }}>
                                                    Select</option>
                                                @foreach ($warehouses as $id => $name)
                                                    <option value="{{ $id }}"
                                                        {{ old('warehouse_id') == $id ? 'selected' : '' }}>
                                                        {{ $name }}
                                                    </option>
                                                @endforeach
                                            </select>
                                            @error('warehouse_id')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                        <div class="mb-3 col-md-4">
                                            <label for="warehouse_name" class="form-label required">Name</label>
                                            <input type="text" placeholder="Enter name"
                                                class="form-control @error('warehouse_name') is-invalid @enderror"
                                                id="warehouse_name" name="warehouse_name"
                                                value="{{ old('warehouse_name') }}">
                                            @error('warehouse_name')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                        <div class="mb-3 col-md-4">
                                            <label for="warehouse_phone" class="form-label required">Phone</label>
                                            <input type="number" placeholder="Enter phone"
                                                class="form-control @error('warehouse_phone') is-invalid @enderror"
                                                id="warehouse_phone" name="warehouse_phone"
                                                value="{{ old('warehouse_phone') }}" minlength="10" maxlength="10"
                                                pattern="[0-9]{10}"
                                                oninput="this.value = this.value.replace(/[^0-9]/g, '').slice(0, 10)">
                                            @error('warehouse_phone')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="mb-3 col-md-12">
                                            <label for="warehouse_address" class="form-label required">Address</label>
                                            <textarea class="form-control @error('warehouse_address') is-invalid @enderror" placeholder="Enter address"
                                                name="warehouse_address" id="warehouse_address" rows="1">{!! old('warehouse_address') !!}</textarea>
                                            @error('warehouse_address')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-4">
                                            <label for="warehouse_pincode" class="form-label required">Pincode</label>
                                            <input type="number" placeholder="Enter pincode"
                                                class="form-control @error('warehouse_pincode') is-invalid @enderror"
                                                id="warehouse_pincode" name="warehouse_pincode"
                                                value="{{ old('warehouse_pincode') }}" minlength="6" maxlength="6"
                                                pattern="[0-9]{6}"
                                                oninput="this.value = this.value.replace(/[^0-9]/g, '').slice(0, 6)">
                                            @error('warehouse_pincode')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                        <div class="col-md-4">
                                            <label for="warehouse_city" class="form-label required">City</label>
                                            <input type="text" placeholder="Enter city"
                                                class="form-control @error('warehouse_city') is-invalid @enderror"
                                                id="warehouse_city" name="warehouse_city"
                                                value="{{ old('warehouse_city') }}">
                                            @error('warehouse_city')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                        <div class="col-md-4">
                                            <label for="warehouse_state" class="form-label required">State</label>
                                            <input type="text" placeholder="Enter state"
                                                class="form-control @error('warehouse_state') is-invalid @enderror"
                                                id="warehouse_state" name="warehouse_state"
                                                value="{{ old('warehouse_state') }}">
                                            @error('warehouse_state')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                                <div class="p-0 modal-body">
                                    <div class="px-3 py-2 bg-primary-lt fs-3 fw-medium">Sender Details</div>
                                </div>
                                <div class="card-body">
                                    <div class="row">
                                        <div class="mb-3 col-md-4">
                                            <label for="sender_id" class="form-label">Sender</label>
                                            <select class="form-select @error('sender_id') is-invalid @enderror"
                                                id="sender_id" name="sender_id">
                                                <option value="select" {{ old('sender_id') == '' ? 'selected' : '' }}>
                                                    Select
                                                </option>
                                                @foreach ($senders as $id => $name)
                                                    <option value="{{ $id }}"
                                                        {{ old('sender_id') == $id ? 'selected' : '' }}>
                                                        {{ $name }}
                                                    </option>
                                                @endforeach
                                            </select>
                                            @error('sender_id')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>

                                        <div class="mb-3 col-md-4" id="senderName">
                                            <label for="sender_name" class="form-label required">Name</label>
                                            <input type="text" placeholder="Enter name"
                                                class="form-control @error('sender_name') is-invalid @enderror"
                                                id="sender_name" name="sender_name" value="{{ old('sender_name') }}">
                                            @error('sender_name')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                        <div class=" col-md-4">
                                            <label for="sender_mobile" class="form-label required">Mobile</label>
                                            <input type="number" placeholder="Enter mobile"
                                                class="form-control @error('sender_mobile') is-invalid @enderror"
                                                id="sender_mobile" name="sender_mobile"
                                                value="{{ old('sender_mobile') }}" minlength="10" maxlength="10"
                                                pattern="[0-9]{10}"
                                                oninput="this.value = this.value.replace(/[^0-9]/g, '').slice(0, 10)">
                                            @error('sender_mobile')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                        <div class="mb-3 col-md-12">
                                            <label for="sender_address" class="form-label required">Address</label>
                                            <textarea class="form-control @error('sender_address') is-invalid @enderror" placeholder="Enter address"
                                                name="sender_address" id="sender_address" rows="1">{!! old('sender_address') !!}</textarea>
                                            @error('sender_address')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                        <div class="col-md-4">
                                            <label for="sender_pincode" class="form-label required">Pincode</label>
                                            <input type="hidden" name="old_sender_pincode" id="old_sender_pincode"
                                                value="{{ old('old_sender_pincode', $sender_pincode ?? '') }}">
                                            <input type="number" placeholder="Enter pincode"
                                                class="form-control @error('sender_pincode') is-invalid @enderror"
                                                id="sender_pincode" name="sender_pincode"
                                                value="{{ old('sender_pincode', $sender_pincode ?? '') }}" minlength="6"
                                                maxlength="6" pattern="[0-9]{6}"
                                                oninput="this.value = this.value.replace(/[^0-9]/g, '').slice(0, 6)"
                                                {{ isset($sender_pincode) && $sender_pincode ? 'readonly' : '' }}>
                                            @error('sender_pincode')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                        <div class="col-md-4">
                                            <label for="sender_city_id" class="form-label required">City</label>
                                            <input type="hidden" name="sender_city_id" id="sender_city_id"
                                                value="{{ old('sender_city_id') }}">
                                            <input type="text"
                                                class="form-control @error('sender_city') is-invalid @enderror"
                                                id="sender_city" name="sender_city" placeholder="Enter city"
                                                value="{{ old('sender_city') }}" readonly>
                                            @error('sender_city_id')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                        <div class="col-md-4">
                                            <label for="sender_state_id" class="form-label required">State</label>
                                            <input type="hidden" name="sender_state_id" id="sender_state_id"
                                                value="{{ old('sender_state_id') }}">
                                            <input type="text"
                                                class="form-control @error('sender_state') is-invalid @enderror"
                                                id="sender_state" name="sender_state" placeholder="Enter state"
                                                value="{{ old('sender_state') }}" readonly>
                                            @error('sender_state_id')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                        <!-- Add Checkbox for Adding Sender to Record -->
                                        <div class="mt-3 col-md-4" id="addSenderCheckbox">
                                            <div class="form-check">
                                                <input type="checkbox" class="form-check-input" id="add_to_sender_record"
                                                    name="add_to_sender_record" value="1">
                                                <label class="form-check-label" for="add_to_sender_record">Add to Sender
                                                    Record</label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="p-0 modal-body">
                                    <div class="px-3 py-2 bg-primary-lt fs-3 fw-medium">Receiver Details</div>
                                </div>
                                <div class="card-body">
                                    <div class="row">
                                        <div class="mb-3 col-md-4">
                                            <label for="receiver_name" class="form-label required">Name</label>
                                            <input type="text" placeholder="Enter name"
                                                class="form-control @error('receiver_name') is-invalid @enderror"
                                                id="receiver_name" name="receiver_name"
                                                value="{{ old('receiver_name') }}">
                                            @error('receiver_name')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                        <div class="mb-3 col-md-4">
                                            <label for="receiver_mobile" class="form-label required">Mobile</label>
                                            <input type="number" placeholder="Enter mobile"
                                                class="form-control @error('receiver_mobile') is-invalid @enderror"
                                                id="receiver_mobile" name="receiver_mobile"
                                                value="{{ old('receiver_mobile') }}" minlength="10" maxlength="10"
                                                pattern="[0-9]{10}"
                                                oninput="this.value = this.value.replace(/[^0-9]/g, '').slice(0, 10)">
                                            @error('receiver_mobile')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                        <div class="mb-3 col-md-4">
                                            <label for="receiver_address" class="form-label required">Address</label>
                                            <textarea class="form-control @error('receiver_address') is-invalid @enderror" placeholder="Enter address"
                                                name="receiver_address" rows="1">{!! old('receiver_address') !!}</textarea>
                                            @error('receiver_address')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-md-4">
                                            <label for="pincode" class="form-label required">Pincode</label>
                                            <input type="number" placeholder="Enter pincode"
                                                class="form-control @error('receiver_pincode') is-invalid @enderror"
                                                id="receiver_pincode" name="receiver_pincode"
                                                value="{{ old('receiver_pincode', $receiver_pincode ?? '') }}"
                                                minlength="6" maxlength="6" pattern="[0-9]{6}"
                                                oninput="this.value = this.value.replace(/[^0-9]/g, '').slice(0, 6)"
                                                {{ isset($receiver_pincode) && $receiver_pincode ? 'readonly' : '' }}>
                                            @error('receiver_pincode')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                        <div class="col-md-4">
                                            <label for="receiver_city_id" class="form-label required">City</label>
                                            <input type="hidden" name="receiver_city_id" id="receiver_city_id"
                                                value="{{ old('receiver_city_id') }}">
                                            <input type="text"
                                                class="form-control @error('receiver_city_id') is-invalid @enderror"
                                                id="receiver_city" name="receiver_city" placeholder="Enter city"
                                                value="{{ old('receiver_city') }}" readonly>
                                            @error('receiver_city_id')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                        <div class="col-md-4">
                                            <label for="receiver_state_id" class="form-label required">State</label>
                                            <input type="hidden" name="receiver_state_id" id="receiver_state_id"
                                                value="{{ old('receiver_state_id') }}">
                                            <input type="text"
                                                class="form-control @error('receiver_state_id') is-invalid @enderror"
                                                id="receiver_state" name="receiver_state" placeholder="Enter state"
                                                value="{{ old('receiver_state') }}" readonly>
                                            @error('receiver_state_id')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                                <div class="p-0 modal-body">
                                    <div class="px-3 py-2 bg-primary-lt fs-3 fw-medium">Other Details</div>
                                </div>
                                <div class="card-body">
                                    <div class="row">
                                        <div class="mb-3 col-md-3">
                                            <label for="date" class="form-label required">Date</label>
                                            <div class="input-icon mb-2">
                                                <div class="date-error">
                                                    <input type="text"
                                                        class="form-control @error('date') is-invalid @enderror"
                                                        placeholder="" id="date" name="date" autocomplete="off"
                                                        value="{{ old('date', now()->format('d M Y')) }}" />
                                                    <span
                                                        class="input-icon-addon"><!-- Download SVG icon from http://tabler-icons.io/i/calendar -->
                                                        <svg xmlns="http://www.w3.org/2000/svg" class="icon"
                                                            width="24" height="24" viewBox="0 0 24 24"
                                                            stroke-width="2" stroke="currentColor" fill="none"
                                                            stroke-linecap="round" stroke-linejoin="round">
                                                            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                                                            <path
                                                                d="M4 7a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12z" />
                                                            <path d="M16 3v4" />
                                                            <path d="M8 3v4" />
                                                            <path d="M4 11h16" />
                                                            <path d="M11 15h1" />
                                                            <path d="M12 15v3" />
                                                        </svg>
                                                    </span>
                                                    @error('date')
                                                        <div class="invalid-feedback">{{ $message }}</div>
                                                    @enderror
                                                </div>
                                            </div>
                                        </div>
                                        <div class=" col-md-3">
                                            <label for="system_cost" class="form-label required">System Cost</label>
                                            <input type="number" class="form-control" id="system_cost"
                                                name="system_cost" value="{!! $totalCost ? $totalCost : 0.0 !!}" readonly>
                                        </div>
                                        <div class=" col-md-3">
                                            <label for="profit_loss_amount" class="form-label required">Your additional
                                                amount</label>
                                            <input type="number" placeholder="Enter additional amount"
                                                class="form-control @error('profit_loss_amount') is-invalid @enderror"
                                                id="profit_loss_amount" name="profit_loss_amount"
                                                value="{{ old('profit_loss_amount') }}" min="0">
                                            @error('profit_loss_amount')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                            {{-- <div class="mt-2 text-muted fw-medium totalCost">{!! $totalCost ? $totalCost : 0.0 !!}</div> --}}
                                        </div>
                                        <div class=" col-md-3">
                                            <label for="total_amount" class="form-label required">Total Booking
                                                Amount</label>
                                            <input type="number"
                                                class="form-control @error('total_amount') is-invalid @enderror"
                                                id="total_amount" name="total_amount" value="{{ old('total_amount') }}"
                                                readonly>
                                            @error('total_amount')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                                <!-- Card Footer -->
                                <div class="card-footer">
                                    <button type="submit" class="btn btn-primary me-3"
                                        id="bookingFormSubmit">Save</button>
                                    <a href="{{ route('rate.calculators') }}" class="btn">Cancel</a>
                                </div>
                            </form>
                        </div>
                    </div>
                    <div class="col-md-md-3 col-md-3">
                        <div class="card">
                            <div class="card-header">
                                <h3 class="card-title">Booking Details</h3>
                            </div>
                            <div class="card-body">
                                <!-- Logo at top center -->
                                <div class="d-flex justify-content-center">
                                    <img src="{{ asset('storage/' . $courier->courier->logo) }}"
                                        alt="{{ $courier->courier->business_name }}" class="img-fluid"
                                        style="width: 35px; border-radius: 50%; object-fit: contain; border: 1px solid #dce1e7;">
                                </div>
                                <!-- Other content -->
                                <div class="row">
                                    <div class="col lh-lg">
                                        <div class="fw-bold text-center my-2">{{ $courier->courier->name }}</div>
                                        <div class="fw-bold">{{ $courier->business_name }} ({{ $courier->account_type }})
                                        </div>
                                        <div class="text-secondary">Origin Pincode: <span
                                                class="originPincode">{{ $originPincode }}</span></div>
                                        <div class="text-secondary">Delivery Area Pincode: {{ $deliveryAreaPincode }}
                                        </div>
                                        <div class="text-secondary">Approximate Weight: {{ $approximateWeight }}</div>
                                        <div class="fw-bold mt-1">Package Details: </div>
                                        @if (!empty($dimensions))
                                            @foreach ($dimensions as $index => $dimension)
                                                <div class="text-secondary">Dimension:
                                                    {{ $dimension['length_cm'] ?? 'N/A' }} X
                                                    {{ $dimension['width_cm'] ?? 'N/A' }} X
                                                    {{ $dimension['height_cm'] ?? 'N/A' }}
                                                </div>
                                            @endforeach
                                        @else
                                            <p>No dimensions available.</p>
                                        @endif
                                        <div class="fw-bold">
                                            Total Cost: ₹ <span
                                                class="totalCost">{{ $includeCommissionAmount ? $includeCommissionAmount : 0 }}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
    <script>
        let date;
        let stateSenderSelect;
        let citySenderSelect;
        let stateReceiverSelect;
        let cityReceiverSelect;
        let senderSelect;
        let warehouseSelect;

        $(document).ready(function() {

            const input = document.getElementById("profit_loss_amount");
            const maxPrice = Infinity; // set your upper cap if needed (e.g., 10000)

            // 1) Block typing of "-", "+", "e"/"E"
            input.addEventListener("keydown", (e) => {
                if (e.key === "-" || e.key === "+" || e.key === "e" || e.key === "E") {
                    e.preventDefault();
                }
            });

            // 2) Block pasting negatives or non-numeric chars
            input.addEventListener("paste", (e) => {
                const txt = (e.clipboardData || window.clipboardData).getData("text");
                if (/[^\d.]/.test(txt) || txt.includes("-")) {
                    e.preventDefault();
                }
            });

            // 3) Sanitize on input (covers mouse wheel, autofill, IME, etc.)
            input.addEventListener("input", () => {
                const raw = input.value;

                // If any "-" sneaks in (e.g., "--10"), clear it
                if (raw.includes("-")) {
                    input.value = "";
                    return;
                }

                // If it’s a number and negative, clear it
                const num = Number(raw);
                if (!Number.isNaN(num) && num < 0) {
                    input.value = "";
                    return;
                }

                // Optional: clamp to max if you have one
                if (Number.isFinite(maxPrice) && !Number.isNaN(num) && num > maxPrice) {
                    input.value = String(maxPrice);
                }
            });

            input.addEventListener("change", (e) => {
                const systemCost = parseFloat($("#system_cost").val()) || 0;
                const additionAmount = parseFloat(input.value) || 0;
                let totalBookingAmount = systemCost + additionAmount;
                $("#total_amount").val(totalBookingAmount);
            });

            // Initialize Litepicker for date
            date = new Litepicker({
                element: document.getElementById('date'),
                format: 'DD MMM YYYY',
                buttonText: {
                    previousMonth: `<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M15 6l-6 6l6 6" /></svg>`,
                    nextMonth: `<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 6l6 6l-6 6" /></svg>`,
                },
            });

            // Initialize TomSelect for warehouse_id
            warehouseSelect = new TomSelect("#warehouse_id", {
                copyClassesToDropdown: false,
                dropdownParent: 'body',
                controlInput: '<input>',
                sortField: [{
                    field: 'isSelect',
                    direction: 'desc'
                }, {
                    field: 'text',
                    direction: 'desc'
                }],
                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 sender_id
            senderSelect = new TomSelect("#sender_id", {
                copyClassesToDropdown: false,
                dropdownParent: 'body',
                controlInput: '<input>',
                sortField: [{
                    field: 'isSelect',
                    direction: 'desc'
                }, {
                    field: 'text',
                    direction: 'desc'
                }],
                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>';
                    },
                },
            });

            // Preload old values for sender and receiver
            const oldSenderId = '{{ old('sender_id') }}';
            const oldWarehouseId = '{{ old('warehouse_id') }}';
            const oldSenderStateId = '{{ old('sender_state_id') }}';
            const oldSenderCityId = '{{ old('sender_city_id') }}';
            const oldReceiverStateId = '{{ old('receiver_state_id') }}';
            const oldReceiverCityId = '{{ old('receiver_city_id') }}';

            // 1️⃣ Auto-fetch if pincode is already available on page load (edit mode)
            let existingSenderPincode = $("#sender_pincode").val();
            if (existingSenderPincode && existingSenderPincode.length === 6) {
                fetchSenderStateCity(existingSenderPincode);
            }

            let existingReceiverPincode = $("#receiver_pincode").val();
            if (existingReceiverPincode && existingReceiverPincode.length === 6) {
                fetchReceiverStateCity(existingReceiverPincode);
            }

            // Trigger sender_id change if old sender_id exists
            if (oldSenderId && oldSenderId !== 'select') {
                $('#sender_id').val(oldSenderId).trigger('change');
            }
            // Trigger sender_id change if old sender_id exists
            if (oldWarehouseId && oldWarehouseId !== 'select') {
                $('#warehouse_id').val(oldWarehouseId).trigger('change');
            }
        });

        // Handle sender selection to fetch details
        $('#sender_id').on('change', function() {
            const senderId = $(this).val();
            if (senderId && senderId != 'select') {
                $('#addSenderCheckbox').addClass('d-none');
                $('#add_to_sender_record').prop('checked', false);
                $.ajax({
                    url: '{{ route('sender.get', ':sender_id') }}'.replace(':sender_id', senderId),
                    type: 'GET',
                    dataType: 'json',
                    success: function(data) {
                        $("#senderName").hide();
                        $('#sender_name').val(data.name || '').prop('readonly', true);
                        $('#sender_mobile').val(data.mobile || '').prop('readonly', true);
                        $('#sender_address').val(data.address || '').prop('readonly', true);
                        $('#sender_pincode').val(data.pincode || '').prop('readonly', true);
                        $('#sender_pincode').prop('readonly', true);
                        // $('#sender_pincode').val(data.pincode || '').prop('readonly', true);
                        fetchSenderStateCity(data.pincode);
                    },
                    error: function(xhr) {
                        console.error('Error fetching sender details:', xhr);
                        toastr.error('Failed to fetch sender details.');
                    }
                });
            } else {
                $('#addSenderCheckbox').removeClass('d-none');
                const oldAddToSenderRecord = '{{ old('add_to_sender_record') }}';
                if (oldAddToSenderRecord === '1') {
                    $('#add_to_sender_record').prop('checked', true);
                }
                $("#senderName").show();
                $('#sender_name').val('').prop('readonly', false);
                $('#sender_mobile').val('').prop('readonly', false);
                $('#sender_address').val('').prop('readonly', false);
                $('#sender_pincode').prop('readonly', true);
                let existingSenderPincode = $("#old_sender_pincode").val();
                $('#sender_pincode').val(existingSenderPincode).prop('readonly', false);
                if (existingSenderPincode && existingSenderPincode.length === 6) {
                    fetchSenderStateCity(existingSenderPincode);
                }
            }
        });

        // Handle warehouse selection to fetch details
        $('#warehouse_id').on('change', function() {
            document.getElementById("myLoader").classList.remove("d-none");
            const warehouseId = $(this).val();
            if (warehouseId && warehouseId != 'select') {
                $.ajax({
                    url: '{{ route('warehouse.get', ':warehouse_id') }}'.replace(':warehouse_id',
                        warehouseId),
                    type: 'GET',
                    dataType: 'json',
                    success: function(data) {
                        const dataObj = {};
                        const encryptData = $("#data").val();
                        $.ajax({
                            url: '/bookings/decrypt-params',
                            type: 'POST',
                            data: {
                                data: encryptData
                            }, // 🔑 send as an object with a key
                            dataType: 'json',
                            headers: {
                                "Accept": "application/json",
                                "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr('content')
                            },
                            success: function(response) {
                                dataObj.franchise_id = response.params.franchiseId;
                                dataObj.shipment_type = response.params.shipmentType;
                                dataObj.package_type = response.params.packageType;
                                dataObj.origin_pincode = data.pincode;
                                dataObj.delivery_area_pincode = response.params
                                    .deliveryAreaPincode;
                                dataObj.payment_mode = "Prepaid";
                                dataObj.approximate_weight = response.params
                                    .approximateWeight;
                                dataObj.rov_type = response.params.rovType;
                                dataObj.dimension = response.params.dimensions;
                                dataObj.courier_setup_id = response.params.courierSetupsId;
                                $.ajax({
                                    url: '/api/delhivery/rate-estimates',
                                    type: 'POST',
                                    data: dataObj,
                                    dataType: 'json',
                                    headers: {
                                        "Accept": "application/json",
                                        "X-CSRF-TOKEN": $('meta[name="csrf-token"]')
                                            .attr('content')
                                    },
                                    success: function(correctionRate) {
                                        if (correctionRate.results[0].success) {
                                            // Ensure all values are parsed as floats, defaulting to 0 if invalid
                                            const baseCost = parseFloat(
                                                correctionRate.results[0]
                                                .data.total_amount) || 0;
                                            const totalAmount = parseFloat(
                                                correctionRate.results[0]
                                                .data.total_amount) || 0;
                                            const adminCommission =
                                                totalAmount * parseFloat(
                                                    correctionRate.results[0]
                                                    .admin_commission) / 100 ||
                                                0;
                                            const superadminCommission =
                                                totalAmount *
                                                parseFloat(correctionRate
                                                    .results[0]
                                                    .superadmin_commission) /
                                                100 ||
                                                0;
                                            const razorpayCommission =
                                                totalAmount *
                                                parseFloat(correctionRate
                                                    .results[0]
                                                    .razorpay_commission) /
                                                100 || 0;
                                            // Calculate total cost
                                            const totalCost = totalAmount +
                                                adminCommission +
                                                superadminCommission +
                                                razorpayCommission;
                                            // Format to 2 decimal places
                                            const totalCostFloat = parseFloat(
                                                totalCost.toFixed(2));
                                            $(".totalCost").html(
                                                totalCostFloat);
                                            $.ajax({
                                                url: '/bookings/encrypt-params',
                                                type: 'POST',
                                                data: {
                                                    data: [{
                                                        totalCost: totalCostFloat,
                                                        baseCost: baseCost
                                                    }]
                                                },
                                                dataType: 'json',
                                                headers: {
                                                    "Accept": "application/json",
                                                    "X-CSRF-TOKEN": $(
                                                            'meta[name="csrf-token"]'
                                                        )
                                                        .attr('content')
                                                },
                                                success: function(
                                                    correctionRate
                                                ) {
                                                    $("#encryptPrice")
                                                        .val(
                                                            correctionRate
                                                            .encrypted
                                                        );
                                                }
                                            });
                                            // Update the DOM
                                            $(".originPincode").html(data
                                                .pincode);
                                            document.getElementById("myLoader")
                                                .classList.add("d-none");
                                        } else {
                                            const errorMessage = correctionRate
                                                .results[0].data.message ||
                                                'Unknown error';
                                            toastr.error(errorMessage);
                                            warehouseSelect.clear();
                                            warehouseSelect.setValue('select');
                                        }
                                    }
                                });
                            },
                            error: function(xhr) {
                                console.error("Error:", xhr.responseJSON || xhr.statusText);
                            }
                        });
                        $('#warehouse_name').val(data.name || '').prop('readonly', true);
                        $('#warehouse_phone').val(data.phone || '').prop('readonly', true);
                        $('#warehouse_address').val(data.address || '').prop('readonly', true);
                        $('#warehouse_state').val(data.state || '').prop('readonly', true);
                        $('#warehouse_city').val(data.city || '').prop('readonly', true);
                        $('#warehouse_pincode').val(data.pincode || '').prop('readonly', true);
                        // $('#sender_pincode').val(data.pincode || '').prop('readonly', true);
                    },
                    error: function(xhr) {
                        console.error('Error fetching warehouse details:', xhr);
                        toastr.error('Failed to fetch warehouse details.');
                    }
                });
            } else {
                $('#warehouse_name').val('').prop('readonly', false);
                $('#warehouse_phone').val('').prop('readonly', false);
                $('#warehouse_address').val('').prop('readonly', false);
                $('#warehouse_state').val('').prop('readonly', false);
                $('#warehouse_city').val('').prop('readonly', false);
                $('#warehouse_pincode').val('').prop('readonly', false);
                $('.originPincode').html({{ $originPincode }});
                document.getElementById("myLoader").classList.add("d-none");
            }
        });

        function fetchSenderStateCity(pincode) {
            if (pincode.length === 6) {
                $.ajax({
                    url: '{{ route('getstatecity', ':pincode') }}'.replace(':pincode', pincode),
                    type: 'GET',
                    success: function(data) {
                        if (data.state_name) {
                            $("#sender_state_id").val(data.id);
                            $("#sender_state").val(data.state_name);
                        }
                        if (data.city_name) {
                            $("#sender_city_id").val(data.id);
                            $("#sender_city").val(data.city_name);
                        }
                    },
                    error: function() {
                        toastr.error('Invalid pincode or data not found.');
                        // alert('Invalid pincode or data not found.');
                    }
                });
            } else {
                $("#sender_state_id").val("");
                $("#sender_state").val("");
                $("#sender_city_id").val("");
                $("#sender_city").val("");
            }
        }

        function fetchReceiverStateCity(pincode) {
            if (pincode.length === 6) {
                $.ajax({
                    url: '{{ route('getstatecity', ':pincode') }}'.replace(':pincode', pincode),
                    type: 'GET',
                    success: function(data) {
                        if (data.state_name) {
                            $("#receiver_state_id").val(data.id);
                            $("#receiver_state").val(data.state_name);
                        }
                        if (data.city_name) {
                            $("#receiver_city_id").val(data.id);
                            $("#receiver_city").val(data.city_name);
                        }
                    },
                    error: function() {
                        toastr.error('Invalid pincode or data not found.');
                        // alert('Invalid pincode or data not found.');
                    }
                });
            } else {
                $("#receiver_state_id").val("");
                $("#receiver_state").val("");
                $("#receiver_city_id").val("");
                $("#receiver_city").val("");
            }
        }

        $("#bookingFormSubmit").click(function(e) {
            const btn = this;
            $(this).prop('disabled', true);
            $("#bookingFormSubmit").html('Saving...');
            $("#bookingForm").submit();
        });
    </script>
@endsection