@extends('layouts.app')

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

@section('page-wrapper')
    <link href="https://unpkg.com/@tabler/icons-webfont@latest/dist/tabler-icons.min.css" rel="stylesheet">
    <!-- 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
            <div id="error-container">
                {{-- JS will inject alert HTML here --}}
            </div>
            <!-- 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.storeB2B') }}" 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 class="form-label required">Warehouse</label>
                                            <select class="form-select @error('warehouse_id') is-invalid @enderror"
                                                id="warehouse_id" name="warehouse_id">
                                                <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">
                                            <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="mb-3 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>

                                    <div class="row">
                                        <div class="mb-3 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="mb-3 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="mb-3 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>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-4">
                                            <label class="form-label required">PAN Number</label>
                                            <input type="text" placeholder="Enter pan number"
                                                class="form-control @error('sender_pan_number') is-invalid @enderror"
                                                id="sender_pan_number" name="sender_pan_number"
                                                value="{{ old('sender_pan_number') }}" minlength="10" maxlength="10">
                                            @error('sender_pan_number')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                        <div class="col-md-4">
                                            <label for="sender_gst_number" class="form-label required">GST Number</label>
                                            <input type="text" placeholder="Enter GST number"
                                                class="form-control @error('sender_gst_number') is-invalid @enderror"
                                                id="sender_gst_number" name="sender_gst_number"
                                                value="{{ old('sender_gst_number') }}">
                                            @error('sender_gst_number')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                        <!-- Add Checkbox for Adding Sender to Record -->
                                        <div class="mt-5 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 class="col-md-12">
                                        <label for="doc_file" class="form-label required">Doc File</label>
                                        <input type="file"
                                            class="form-control @error('doc_file') is-invalid @enderror" id="doc_file"
                                            name="doc_file[]" accept="image/*,application/pdf" multiple>
                                        <small class="form-hint">JPG, JPEG, PNG, PDF allowed.</small>
                                        @error('doc_file')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                        <div id="docFilePreviewContainer"
                                            class="d-flex flex-wrap gap-3 justify-content-start">
                                        </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="text-secondary">Invoice Value: ₹{{ $invoiceValue }}</div>
                                        <div class="fw-bold mt-1">Package Details: </div>
                                        @if (!empty($dimensions))
                                            @foreach ($dimensions as $index => $dimension)
                                                <div class="text-secondary">
                                                    @if ($dimension['box_count'])
                                                        No of Boxes: {{ $dimension['box_count'] ?? '' }} <br />
                                                    @endif
                                                    @if ($Ewaybill[$index]['bill'])
                                                        Eway Bill: {{ $Ewaybill[$index]['bill'] ?? '' }} <br />
                                                    @endif
                                                    @if ($invNum[$index]['invoice'])
                                                        Invoice Number: {{ $invNum[$index]['invoice'] ?? '' }} <br />
                                                    @endif
                                                    @if ($invAmt[$index]['invoiceAmount'])
                                                        Invoice Amount: {{ $invAmt[$index]['invoiceAmount'] ?? '' }}
                                                    @endif
                                                    <div class="text-secondary">Dimension:
                                                        {{ $dimension['length_cm'] ?? 'N/A' }} X
                                                        {{ $dimension['width_cm'] ?? 'N/A' }} X
                                                        {{ $dimension['height_cm'] ?? 'N/A' }}
                                                    </div>
                                                </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 src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.5/jquery.validate.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.5/additional-methods.min.js"></script>
    <script>
        // Display session errors with Toastr
        // @if (session('error'))
        //     toastr.error('{{ session('error') }}');
        // @endif
        // @if (session('api_error'))
        //     toastr.error('{{ session('api_error') }}');
        // @endif
        // @if ($errors->any())
        //     @foreach ($errors->all() as $error)
        //         toastr.error('{{ $error }}');
        //     @endforeach
        // @endif

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

            if (typeof $.fn.validate === 'undefined') {
                console.error('jQuery Validate is not loaded.');
                return;
            }

            // Custom validation method for not equal to a value
            $.validator.addMethod("notEqual", function(value, element, param) {
                return this.optional(element) || value !== param;
            }, "This field is required.");

            // Custom validation method for pincode
            $.validator.addMethod("validPincode", function(value) {
                return /^[0-9]{6}$/.test(value);
            }, "Please enter a valid 6-digit pincode.");

            // Validate readonly fields
            $.validator.setDefaults({
                ignore: []
            });

            $("#bookingForm").validate({
                rules: {
                    warehouse_id: {
                        required: true,
                        notEqual: "select"
                    },
                    warehouse_name: {
                        required: true,
                        minlength: 2
                    },
                    warehouse_phone: {
                        required: true,
                        digits: true,
                        minlength: 10,
                        maxlength: 10
                    },
                    warehouse_address: {
                        required: true
                    },
                    warehouse_state: {
                        required: true
                    },
                    warehouse_city: {
                        required: true
                    },
                    warehouse_pincode: {
                        required: true,
                        validPincode: true
                    },
                    sender_name: {
                        required: true,
                        minlength: 2
                    },
                    sender_mobile: {
                        required: true,
                        digits: true,
                        minlength: 10,
                        maxlength: 10
                    },
                    sender_address: {
                        required: true
                    },
                    sender_state_id: {
                        required: true,
                    },
                    sender_city_id: {
                        required: true,
                    },
                    sender_pincode: {
                        required: true,
                        validPincode: true
                    },
                    sender_pan_number: {
                        required: function(element) {
                            return $("#sender_gst_number").val() === "";
                        },
                        minlength: 10,
                        maxlength: 10,
                        pattern: /^[A-Z]{5}[0-9]{4}[A-Z]{1}$/
                    },
                    sender_gst_number: {
                        required: function(element) {
                            return $("#sender_pan_number").val() === "";
                        },
                        minlength: 15,
                        maxlength: 15,
                        pattern: /^[0-9]{2}[A-Z]{5}[0-9]{4}[A-Z]{1}[0-9A-Z]{1}Z[0-9A-Z]{1}$/
                    },
                    receiver_name: {
                        required: true,
                        minlength: 2
                    },
                    receiver_mobile: {
                        required: true,
                        digits: true,
                        minlength: 10,
                        maxlength: 10
                    },
                    receiver_address: {
                        required: true
                    },
                    receiver_state_id: {
                        required: true,
                        notEqual: ""
                    },
                    receiver_city_id: {
                        required: true,
                        notEqual: ""
                    },
                    receiver_pincode: {
                        required: true,
                        validPincode: true
                    },
                    date: {
                        required: true
                    },
                    system_cost: {
                        required: true,
                        number: true,
                        min: 0
                    },
                    profit_loss_amount: {
                        required: true,
                        number: true,
                        min: 0
                    },
                    total_amount: {
                        required: true,
                        number: true,
                        min: 0
                    },
                    'doc_file[]': {
                        required: true,
                        accept: "image/jpeg,image/png,image/jpg,application/pdf"
                    }
                },
                messages: {
                    warehouse_id: "Warehouse is required.",
                    warehouse_name: "Name is required.",
                    warehouse_phone: "Phone is required.",
                    warehouse_address: "Address is required.",
                    warehouse_state: "State is required.",
                    warehouse_city: "City is required.",
                    warehouse_pincode: "Phone is required.",
                    sender_name: "Name is required.",
                    sender_mobile: "Phone is required.",
                    sender_address: "Address is required.",
                    sender_state_id: "State is required.",
                    sender_city_id: "City is required.",
                    sender_pincode: "Pincode is required.",
                    sender_pan_number: {
                        required: "PAN number is required when GST number is not provided.",
                        minlength: "PAN number must be 10 characters.",
                        maxlength: "PAN number must be 10 characters.",
                        pattern: "Please enter a valid PAN number (e.g., ABCDE1234F)."
                    },
                    sender_gst_number: {
                        required: "GST number is required when PAN number is not provided.",
                        minlength: "GST number must be 15 characters.",
                        maxlength: "GST number must be 15 characters.",
                        pattern: "Please enter a valid GST number (e.g., 27ABCDE1234F1ZG)."
                    },
                    receiver_name: "Name is required.",
                    receiver_mobile: "Mobile is required.",
                    receiver_address: "Address is required.",
                    receiver_state_id: "State is required.",
                    receiver_city_id: "City is required.",
                    receiver_pincode: "Pincode is required.",
                    date: "Please select a date.",
                    system_cost: "System cost is required.",
                    profit_loss_amount: "Your additional amount is required.",
                    total_amount: "Total booking amount is required.",
                    'doc_file[]': "Please upload valid files (JPG, JPEG, PNG, PDF allowed)."
                },
                errorPlacement: function(error, element) {
                    element.closest('.mb-3').find('.invalid-feedback').remove();
                    error.addClass('invalid-feedback');
                    if (element.is("select")) {
                        error.insertAfter(element.closest('.mb-3').find('.ts-wrapper'));
                    } else if (element.is("textarea")) {
                        error.insertAfter(element);
                    } else if (element.is(":file")) {
                        error.insertAfter(element.next('.form-hint') || element);
                    } else {
                        error.insertAfter(element);
                    }
                    element.addClass('is-invalid');
                },
                highlight: function(element) {
                    $(element).addClass('is-invalid');
                },
                unhighlight: function(element) {
                    $(element).removeClass('is-invalid');
                    $(element).closest('.mb-3').find('.invalid-feedback').remove();
                },
                submitHandler: function(form) {
                    var formData = new FormData(form);
                    var $submitButton = $('#bookingFormSubmit');

                    $submitButton.prop('disabled', true).html('Saving...');
                    $.ajax({
                        url: '{{ route('bookings.storeB2B') }}',
                        type: 'POST',
                        data: formData,
                        headers: {
                            "Accept": "application/json",
                            "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr('content')
                        },
                        processData: false,
                        contentType: false,
                        success: function(response) {
                            if (response.api_errors && response.api_errors.length > 0) {
                                $.each(response.api_errors, function(key, value) {
                                    toastr.error(value);
                                });
                            } else {
                                toastr.success('Booking created successfully!');
                                setTimeout(function() {
                                    window.location.href =
                                        '{{ route('bookings.index') }}';
                                }, 3000);
                            }
                            // $submitButton.prop('disabled', false).html('Save');
                        },
                        error: function(xhr) {
                            $submitButton.prop('disabled', false).html('Save');

                            let errorResponse = xhr.responseJSON || {};
                            let errors = errorResponse.api_errors || errorResponse.errors ||
                            {};
                            let errorMessage = errorResponse.api_errors ||
                                'An error occurred while saving the booking.';

                            let errorHtml = `<div class="alert alert-danger" id="error-content">
                                <h4 class="alert-title">Errors</h4>
                                <ul>`;
                            if (typeof errors === 'object' && Object.keys(errors).length >
                                0) {
                                $.each(errors, function(key, value) {
                                    errorHtml += `<li>${escapeHtml(value)}</li>`;
                                });
                            } else {
                                errorHtml += `<li>${escapeHtml(errorMessage)}</li>`;
                            }

                            errorHtml += `</ul></div>`;
                            $('#error-container').html(errorHtml);

                            // Scroll to and focus on the error container
                            const errorBlock = document.getElementById('error-container');
                            if (errorBlock) {
                                errorBlock.setAttribute('tabindex', '-1'); // Make focusable
                                errorBlock.focus();
                                errorBlock.scrollIntoView({
                                    behavior: 'smooth',
                                    block: 'center'
                                });
                            }
                        }
                    });
                    return false;
                }
            });

            function escapeHtml(text) {
                if (text === null || text === undefined) return ""; // handle null/undefined
                return String(text)
                    .replace(/&/g, "&amp;")
                    .replace(/</g, "&lt;")
                    .replace(/>/g, "&gt;");
            }
            // File input validation
            $('#doc_file').on('change', function() {
                const files = this.files;
                const allowedTypes = ['image/jpeg', 'image/png', 'image/jpg', 'application/pdf'];
                for (let file of files) {
                    if (!allowedTypes.includes(file.type)) {
                        toastr.error(
                            `File ${file.name} is not a valid type (JPG, JPEG, PNG, PDF allowed).`);
                        this.value = '';
                        $('#docFilePreviewContainer').empty();
                        return;
                    }
                }
            });

            document.getElementById('doc_file').addEventListener('change', function(e) {
                const previewContainer = document.getElementById('docFilePreviewContainer');
                previewContainer.innerHTML = '';
                const files = Array.from(e.target.files);

                // Check if there are any files selected
                if (files.length > 0) {
                    previewContainer.classList.add('mt-3');
                } else {
                    previewContainer.classList.remove('mt-3');
                }

                files.forEach(file => {
                    const reader = new FileReader();

                    reader.onload = function(event) {
                        // Create the image element
                        const img = document.createElement('img');
                        img.src = event.target.result;
                        img.alt = "Photo";
                        img.style.cssText =
                            "width: 100px; height: 100px; object-fit: cover; cursor: pointer;";

                        // Create the remove button
                        const removeButton = document.createElement('button');
                        removeButton.type = 'button';
                        removeButton.classList.add('btn', 'btn-sm', 'btn-danger', 'mt-1',
                            'w-100',
                            'flex-1');
                        removeButton.textContent = 'Remove';

                        // Create a wrapper div for image and remove button
                        const wrapper = document.createElement('div');
                        wrapper.classList.add('d-flex', 'flex-column', 'align-items-center');
                        wrapper.appendChild(img);
                        wrapper.appendChild(removeButton);

                        previewContainer.appendChild(wrapper);

                        removeButton.addEventListener('click', () => {
                            wrapper.remove();
                            const files = Array.from(document.getElementById('doc_file')
                                .files);
                            const filteredFiles = files.filter(f => f.name !== file
                                .name);
                            const dataTransfer = new DataTransfer();
                            filteredFiles.forEach(f => dataTransfer.items.add(f));
                            document.getElementById('doc_file').files = dataTransfer
                                .files;
                        });
                    };

                    reader.readAsDataURL(file);
                });
            });
            // 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').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.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;
                                dataObj.freight_mode = response.params.freightMode;
                                $.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) || 0;
                                            const totalAmount = parseFloat(
                                                correctionRate.results[0]
                                                .data.total) || 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