@extends('layouts.master')

@section('title', 'New Appointment | Alboosh - Timeless authenticity, born of the desert')

@section('title-topbar', __('basic.new booking'))

<!-- css insert -->
@section('css')

<!-- select 2 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.1.0-rc.0/css/select2.min.css"
    integrity="sha512-aD9ophpFQ61nFZP6hXYu4Q/b/USW7rpLCQLX6Bi0WJHXNO7Js/fUENpBQf/+P4NtpzNX0jSgR5zVvPOJp+W2Kg=="
    crossorigin="anonymous" referrerpolicy="no-referrer" />

<!-- boostrap datepicker -->
<link rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css" />

<!-- international telephone input -->
<link href="{{ URL::asset('plugins/internationaltelephone/intlTelInput.css') }}" rel="stylesheet">

<!-- datepicker time and date -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.13/flatpickr.min.css"
    integrity="sha512-MQXduO8IQnJVq1qmySpN87QQkiR1bZHtorbJBD0tzy7/0U9+YIC93QWHeGTEoojMVHWWNkoCp8V6OzVSYrX0oQ=="
    crossorigin="anonymous" referrerpolicy="no-referrer" />

@endsection


<!-- content insert -->
@section('content')

<div class="container-fluid px-2 mt-3">

    <!-- page title link -->
    <div class="d-sm-flex align-items-center justify-content-between mb-3">
        <span class="mb-0">
            <a class="link-cust-text text-gray-200 fw-light" href="{{ route('sett.home') }}">{{ __('basic.dashboard') }}
                |</a>
            <a class="link-cust-text text-gray-200 fw-light" href="{{ route('sett.booking.index') }}">{{
                __('basic.appointment') }}
                | </a>
            <a class="text-gray-300">{{ __('basic.new appointment') }}</a>
        </span>
    </div>

    <div class="card card-input shadow mb-3 pb-3">
        <!-- Card Header - Dropdown -->
        <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
            <h6 class="m-0 fw-bold text-gray-500"><i class="fas fa-calendar me-2"></i>
                {{ __('basic.new appointment') }}
            </h6>
        </div>

        <!-- Card Body -->
        <div class="card-body px-3">

            @foreach ($errors->all() as $error)
            <div class="text-red"><i class="fas fa-exclamation me-1"></i> {{ $error }}</div>
            @endforeach

            <div class="multi-setps-form-calander col-12">

                <form id="myform" class="myform" method="POST" action="{{ route('sett.booking.store') }}"
                    enctype="multipart/form-data">

                    @csrf

                    <!-- progressbar -->
                    <ul class="ps-0 progressbar progressbar_6icons" id="progressbar">
                        <li class="active">
                            <a>
                                <!-- in case we want to use prog selector href="#clinics" -->
                                <div class="icon-circle checked d-flex align-items-center justify-content-center">
                                    <i class="fas fa-hotel"></i>
                                </div>
                                {{ __('basic.hotel') }}
                            </a>
                        </li>

                        <li>
                            <a>
                                <div class="icon-circle d-flex align-items-center justify-content-center">
                                    <i class="fas fa-suitcase-rolling"></i>
                                </div>
                                {{ __('basic.services') }}
                            </a>
                        </li>
                        <li>
                            <a>
                                <div class="icon-circle d-flex align-items-center justify-content-center">
                                    <i class="fas fa-file-alt"></i>
                                </div>
                                {{ __('basic.selling to') }}
                            </a>
                        </li>
                        <li>
                            <a>
                                <div class="icon-circle d-flex align-items-center justify-content-center">
                                    <i class="bi bi-person-fill"></i>
                                </div>
                                {{ __('basic.patient') }}
                            </a>
                        </li>
                        <li>
                            <a>
                                <div class="icon-circle d-flex align-items-center justify-content-center">
                                    <i class="bi bi-info-lg"></i>
                                </div>
                                {{ __('basic.details') }}
                            </a>
                        </li>
                        <li>
                            <a>
                                <div class="icon-circle d-flex align-items-center justify-content-center">
                                    <i class="far fa-paper-plane"></i>
                                </div>
                                {{ __('basic.send') }}
                            </a>
                        </li>
                    </ul>

                    <!-- content -->

                    <!-- slide 1 -->
                    <div class="cont_tap px-0" id="clinics">

                        <ul class="nav nav-tabs mb-4" id="myTab" role="tablist">
                            <li class="nav-item" role="presentation">
                                <button class="nav-link active" id="hotel-tab" data-bs-toggle="tab"
                                    data-bs-target="#hotel_tap" type="button" role="tab" aria-controls="hotel_tap"
                                    aria-selected="true" class="text-gray-500"><i class="fas fa-hotel me-1"></i>
                                    {{ __('basic.unit') }}</button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link" id="package-tab" data-bs-toggle="tab"
                                    data-bs-target="#package_tap" type="button" role="tab" aria-controls="package_tap"
                                    aria-selected="false" class="main-color"><i class="fas fa-box-open me-1"></i>
                                    {{ __('basic.package') }}</button>
                            </li>
                        </ul>

                        <div class="tab-content" id="myTabContent">

                            {{-- hotel --}}
                            <div class="tab-pane fade show active mb-2" id="hotel_tap" role="tabpanel"
                                aria-labelledby="bus_tap">

                                <div class="row justify-content-center mb-4">
                                    <h5 class="text-center text-gray-400 mb-2">{{ __('patientappo.nearest clinic') }}

                                    </h5>

                                    <div class="row justify-content-center">

                                        <div class="col-12 col-md-4 mb-3 mb-md-0">

                                            <div class="my-3">
                                                <label class="form-label">{{ __('basic.destination') }}
                                                    <small>({{ __('basic.required') }})</small></label>
                                                <select id="dest_selc_form"
                                                    class="js-example-basic-single select2-hidden-accessible @error('destination_id') is-invalid @enderror"
                                                    name="destination_id" required>
                                                    @foreach ($destination as $iteam)
                                                    <option value="{{ $iteam->id }}"
                                                        data-branch_name="{{ $iteam->name }}">
                                                        {{ $iteam->name }}
                                                    </option>
                                                    @endforeach
                                                </select>

                                                @error('destination_id')
                                                <span class="error-msg-form">
                                                    {{ $message }}
                                                </span>
                                                @enderror
                                            </div>

                                            <div class="my-3">
                                                <label class="form-label">{{ __('basic.hotels') }}
                                                    <small>({{ __('basic.required') }})</small></label>
                                                <select id="units_selc_form"
                                                    class="js-example-basic-single select2-hidden-accessible @error('unit_id') is-invalid @enderror"
                                                    name="unit_id" required>
                                                    <option disabled>- Select Destination First -</option>
                                                </select>

                                                @error('unit_id')
                                                <span class="error-msg-form">
                                                    {{ $message }}
                                                </span>
                                                @enderror
                                            </div>

                                            <div class="mb-1">
                                                <label class="form-label">{{ __('basic.your rooms comes from') }}
                                                    <small>({{ __('basic.required') }})</small></label>

                                                <div class="d-flex">
                                                    <div class="check_custom_index me-3">
                                                        <input checked type="radio" id="direct_radio"
                                                            name="offer_type_check" value="direct">
                                                        <label for="direct_radio">{{ __("basic.hotel direct") }}</label>
                                                        <div class="check">
                                                            <div class="inside"></div>
                                                        </div>
                                                    </div>
                                                    <div class="check_custom_index me-3">
                                                        <input type="radio" id="offer_radio" name="offer_type_check"
                                                            value="offer">
                                                        <label for="offer_radio">{{ __("basic.offers") }}</label>
                                                        <div class="check">
                                                            <div class="inside"></div>
                                                        </div>
                                                    </div>
                                                    <div class="check_custom_index">
                                                        <input type="radio" id="broker_radio" name="offer_type_check"
                                                            value="broker">
                                                        <label for="broker_radio">{{ __("basic.brokers") }}</label>
                                                        <div class="check">
                                                            <div class="inside"></div>
                                                        </div>
                                                    </div>
                                                </div>

                                            </div>

                                            <div class="my-3" id="offers_check_cont" style="display: none">
                                                <label class="form-label">{{ __('basic.broker') }}
                                                    <small>({{ __('basic.required') }})</small></label>
                                                <select id="offer_ht_selc_form"
                                                    class="js-example-basic-single select2-no-search select2-hidden-accessible @error('offer_ht_id') is-invalid @enderror"
                                                    name="offer_ht_id">
                                                    <option disabled>- Select Hotel First -</option>
                                                </select>

                                                @error('offer_ht_id')
                                                <span class="error-msg-form">
                                                    {{ $message }}
                                                </span>
                                                @enderror
                                            </div>

                                            <div class="my-3" id="all_rooms_check_cont">
                                                <label class="form-label">{{ __('basic.rooms') }}
                                                    <small>({{ __('basic.required') }})</small></label>
                                                <select id="all_rooms_check"
                                                    class="js-example-basic-single select2-hidden-accessible @error('all_rooms_check') is-invalid @enderror"
                                                    name="all_rooms_check" required>
                                                    @foreach ($rooms as $item)
                                                    <option value="{{ $item->id }}">{{ $item->name }}</option>
                                                    @endforeach
                                                </select>
                                                @error('all_rooms_check')
                                                <span class="error-msg-form">
                                                    {{ $message }}
                                                </span>
                                                @enderror
                                            </div>

                                            <div class="my-3" id="room_view_check_cont">
                                                <label class="form-label">{{ __('basic.room view') }}
                                                    <small>({{ __('basic.required') }})</small></label>
                                                <select id="room_view_check"
                                                    class="js-example-basic-single select2-hidden-accessible @error('room_view_check') is-invalid @enderror"
                                                    name="room_view_check" required>
                                                    @foreach ($room_views as $item)
                                                    <option value="{{ $item->id }}">{{ $item->name }}</option>
                                                    @endforeach
                                                </select>
                                                @error('room_view_check')
                                                <span class="error-msg-form">
                                                    {{ $message }}
                                                </span>
                                                @enderror
                                            </div>

                                            <div class="my-3" id="meal_check_cont">
                                                <label class="form-label">{{ __('basic.meal') }}
                                                    <small>({{ __('basic.required') }})</small></label>
                                                <select id="meal_check"
                                                    class="js-example-basic-single select2-hidden-accessible @error('meal_check') is-invalid @enderror"
                                                    name="meal_check" required>
                                                    @foreach ($meals as $item)
                                                    <option value="{{ $item->id }}">{{ $item->name }}</option>
                                                    @endforeach
                                                </select>
                                                @error('meal_check')
                                                <span class="error-msg-form">
                                                    {{ $message }}
                                                </span>
                                                @enderror
                                            </div>

                                            <div class="my-3" id="rooms_offers_check_cont" style="display: none">
                                                <label class="form-label">{{ __('basic.type') }}
                                                    <small>({{ __('basic.required') }})</small></label>
                                                <select id="services"
                                                    class="js-example-basic-single select2-hidden-accessible @error('service_id') is-invalid @enderror"
                                                    name="service_id" required>
                                                    <option disabled>- Select Offer First -</option>
                                                </select>
                                                @error('service_id')
                                                <span class="error-msg-form">
                                                    {{ $message }}
                                                </span>
                                                @enderror
                                            </div>

                                            <div class="my-3" id="broker_unit_check_cont" style="display: none">
                                                <label class="form-label">{{ __('basic.broker') }}
                                                    <small>({{ __('basic.required') }})</small></label>
                                                <select id="unit_broker_id"
                                                    class="js-example-basic-single select2-hidden-accessible @error('market_id') is-invalid @enderror"
                                                    name="unit_borker_id">
                                                    @foreach ($brokers as $item)
                                                    <option value="{{ $item->id }}">{{ $item->company_name }}</option>
                                                    @endforeach
                                                </select>
                                            </div>

                                            <div class="my-3">
                                                <label class="form-label">{{ __('basic.market') }}
                                                    <small>({{ __('basic.required') }})</small></label>
                                                <select id="market_id"
                                                    class="js-example-basic-single select2-hidden-accessible @error('market_id') is-invalid @enderror"
                                                    name="market_id">
                                                    @foreach ($markets as $item)
                                                    <option value="{{ $item->id }}" @if ($item->id == 2)
                                                        selected
                                                        @endif>{{ $item->name }}</option>
                                                    @endforeach
                                                </select>

                                                @error('market_id')
                                                <span class="error-msg-form">
                                                    {{ $message }}
                                                </span>
                                                @enderror
                                            </div>


                                            <div class="mt-4">

                                                <div class="row">

                                                    <div class="col-4">
                                                        <div class="mb-3">
                                                            <label class="form-label">{{ __('basic.rooms')
                                                                }}</small></label>
                                                            <select id="room"
                                                                class="js-example-basic-single select2-no-search select2-hidden-accessible @error('room') is-invalid @enderror"
                                                                name="room" required>
                                                                @for ($i = 1; $i <= 20; $i++) <option value="{{ $i }}">
                                                                    {{ $i }}
                                                                    </option>
                                                                    @endfor
                                                            </select>
                                                        </div>
                                                    </div>

                                                    <div class="col-4">
                                                        <div class="mb-3">
                                                            <label class="form-label">
                                                                {{ __('basic.adult') }}</label>
                                                            <input name="adult" type="number"
                                                                class="form-control @error('adult') is-invalid @enderror"
                                                                placeholder="Write your first name here" required
                                                                value="1">
                                                        </div>
                                                    </div>

                                                    <div class="col-4">
                                                        <div class="mb-3">
                                                            <label class="form-label">{{ __('basic.children')
                                                                }}</label>
                                                            <input name="children" type="number"
                                                                class="form-control @error('children') is-invalid @enderror"
                                                                placeholder="Write your first name here" value="0">
                                                        </div>
                                                    </div>

                                                </div>


                                            </div>
                                        </div>

                                        <!-- calander -->
                                        <div
                                            class="col-12 col-md-7 position-relative px-0 ps-md-4 justify-content-sm-center calander-left-border text-center align-self-center">



                                            <div class="calander_cont mx-auto position-relative">
                                                <div id="calander_cont">
                                                    <!-- calander ajax content -->
                                                </div>

                                                <div class="row mt-2" id="calander_cont_int_info" style="display: none">
                                                    <hr>
                                                    <div class="col">
                                                        <h6 class="text-blue-300 text-xs mb-1"><i
                                                                class="fas fa-calendar"></i> {{ __("basic.start") }}
                                                        </h6>
                                                        <p id="calander_cont_int_info_start"
                                                            class="text-light text-s fw-bold text-uppercase mb-0">
                                                            {{ __("basic.not selected") }}</p>
                                                    </div>
                                                    <div class="col">
                                                        <h6 class="text-blue-300 text-xs mb-1"><i
                                                                class="fas fa-calendar"></i> {{ __("basic.end") }}</h6>
                                                        <p id="calander_cont_int_info_end"
                                                            class="text-light text-s fw-bold text-uppercase mb-0">
                                                            {{ __("basic.not selected") }}</p>
                                                    </div>
                                                    <div class="col">
                                                        <h6 class="text-blue-300 text-xs mb-1"><i
                                                                class="fas fa-calendar"></i>
                                                            {{ __("basic.nights number") }}
                                                        </h6>
                                                        <p id="calander_cont_int_info_days"
                                                            class="text-light text-s fw-bold text-uppercase mb-0">
                                                            {{ __("basic.not selected") }}</p>
                                                    </div>
                                                </div>

                                            </div>

                                            <div id="calendar_booked_info" class="mt-4">

                                            </div>

                                            <div id="calendar_booked_saved" class="mt-3">

                                            </div>

                                            <!-- showing waiting during ajax performance -->
                                            <div id="waiting" class="w-100 h-100 text-center"
                                                style="position: absolute; top:0px; left:0px;z-index:999999; background-color: #ffffffba;">
                                                <div class="spinner-grow text-primary" role="status"
                                                    style="position: relative; top: 50%; transform: translateY(-50%);">
                                                    <span class="sr-only">{{ __("basic.loading") }}...</span>
                                                </div>
                                            </div>

                                            <input type="hidden" name="calander_date_start" id="calander_date_start"
                                                value="" required>
                                            <input type="hidden" name="calander_date_end" id="calander_date_end"
                                                value="">

                                            @error('calander_date_start')
                                            <span class="error-msg-form text-center">
                                                <p>{{ $message }}</p>
                                            </span>
                                            @enderror
                                        </div>

                                    </div>

                                </div>

                            </div>

                            {{-- package --}}
                            <div class="tab-pane fade show mb-2" id="package_tap" role="tabpanel"
                                aria-labelledby="package_tap">


                                <div class="row justify-content-center mt-3">
                                    <div class="col-12 col-md-4 mb-4">

                                        <div class="row px-4">

                                            <div class="col-12 mb-3">
                                                <div class="text-s text-gray-400 text-start">{{ __("basic.package") }}
                                                    <span class="text-gray-400 clickable-item-pointer ms-1" href="#"
                                                        data-bs-toggle="tooltip"
                                                        data-bs-title="{{ __('basic.package_booking_tip') }}"><i
                                                            class="fas fa-info-circle"></i></span>
                                                </div>
                                                <select id="package_id"
                                                    class="js-example-basic-single select2-hidden-accessible @error('package_id') is-invalid @enderror"
                                                    name="package_id" required>
                                                    @foreach ($packages as $iteam)
                                                    <option value="{{ $iteam->id }}">
                                                        {{ $iteam->name }}
                                                    </option>
                                                    @endforeach
                                                </select>
                                            </div>

                                            <div class="col-12 mb-3">
                                                <label class="form-label">{{ __('basic.your package comes from') }}
                                                    <small>({{ __('basic.required') }})</small></label>

                                                <div class="d-flex">
                                                    <div class="check_custom_index me-3">
                                                        <input type="radio" id="package_offer_checkbox"
                                                            name="package_type_check" value="offer" checked>
                                                        <label for="package_offer_checkbox">{{ __("basic.offers")
                                                            }}</label>
                                                        <div class="check">
                                                            <div class="inside"></div>
                                                        </div>
                                                    </div>
                                                    <div class="check_custom_index">
                                                        <input type="radio" id="package_broker_checkbox"
                                                            name="package_type_check" value="debtor">
                                                        <label for="package_broker_checkbox">{{ __("basic.brokers")
                                                            }}</label>
                                                        <div class="check">
                                                            <div class="inside"></div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="col-12 mb-3" id="offer_package_check_cont">
                                                <div class="text-s text-gray-400 text-start">{{ __("basic.offer") }}
                                                </div>
                                                <select id="package_offer_id"
                                                    class="js-example-basic-single select2-no-search select2-hidden-accessible @error('package_offer_id') is-invalid @enderror"
                                                    name="package_offer_id" required>
                                                    <option disabled>
                                                        Select Package First
                                                    </option>
                                                </select>

                                                @error('package_offer_id')
                                                <span class="error-msg-form">
                                                    {{ $message }}
                                                </span>
                                                @enderror
                                            </div>

                                            <div class="col-12 mb-3" id="broker_package_check_cont"
                                                style="display: none">
                                                <label class="form-label">{{ __('basic.broker') }}
                                                    <small>({{ __('basic.required') }})</small></label>
                                                <select id="package_broker_id"
                                                    class="js-example-basic-single select2-no-search select2-hidden-accessible @error('package_broker_id') is-invalid @enderror"
                                                    name="package_broker_id">
                                                    @foreach ($brokers as $item)
                                                    <option value="{{ $item->id }}">{{ $item->company_name }}</option>
                                                    @endforeach
                                                </select>
                                            </div>

                                            <div class="row px-0 mb-3">
                                                <div class="col-12">
                                                    <div class="text-s text-gray-400 text-start"><i
                                                            class="fas fa-users"></i> {{ __("basic.type") }}</div>
                                                    <select id="package_qty_type"
                                                        class="js-example-basic-single select2-no-search select2-hidden-accessible @error('package_qty_type') is-invalid @enderror"
                                                        name="package_qty_type" required>
                                                        <option value="single" data-qty="1">
                                                            {{ __("basic.single") }}
                                                        </option>
                                                        <option value="double" data-qty="2">
                                                            {{ __("basic.double") }}
                                                        </option>
                                                        <option value="triple" data-qty="3">
                                                            {{ __("basic.triple") }}
                                                        </option>
                                                        <option value="quad" data-qty="4">
                                                            {{ __("basic.quad") }}
                                                        </option>
                                                    </select>
                                                    @error('package_qty_type')
                                                    <span class="error-msg-form">
                                                        {{ $message }}
                                                    </span>
                                                    @enderror
                                                </div>
                                            </div>

                                            <div class="col-12 text-center">
                                                <input id="package_search" type="button"
                                                    class="btn btn-primary action-button-next"
                                                    value="{{ __('basic.search') }}" />
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-12 col-md-8 text-center px-4 calander-left-border">
                                        <div id="package_cont_img">
                                            <img class="img-fluid p-md-2 mb-2" width="500px"
                                                src="{{ URL::asset('img/dashboard/undraw_camping_noc8.svg') }}" alt="">
                                        </div>

                                        <div id="package_cont" style="display: none"></div>
                                    </div>

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

                        @unlessrole('Sales-manager|Sales-worker')
                        <div class="d-flex justify-content-end align-items-center p-4 py-0">
                            <p data-skip="true" class="text-gray-300 clickable-item-pointer next-form-steps mb-0 me-2">
                                {{ __("basic.skip") }}</p>
                            <input type="button" name="next" class="next-form-steps btn btn-primary action-button-next"
                                value="{{ __('basic.continue') }}" />
                        </div>
                        @endunlessrole
                    </div>

                    <!-- slide 2 (Bus) -->

                    @unlessrole('Sales-manager|Sales-worker')

                    <div class="cont_tap px-2" id="time">

                        <ul class="nav nav-tabs mb-4" id="myTab" role="tablist">
                            <li class="nav-item" role="presentation">
                                <button class="nav-link active" id="home-tab" data-bs-toggle="tab"
                                    data-bs-target="#bus_tap" type="button" role="tab" aria-controls="bus_tap"
                                    aria-selected="true" class="text-gray-500"><i class="fas fa-bus me-1"></i>
                                    {{ __('basic.bus') }}</button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link" id="home-tab" data-bs-toggle="tab"
                                    data-bs-target="#limousine_tap" type="button" role="tab" aria-controls="bus_tap"
                                    aria-selected="true" class="text-gray-500"><i class="fas fa-car me-1"></i>
                                    {{ __('basic.transport rides') }}</button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link" id="visa-tab" data-bs-toggle="tab" data-bs-target="#visa_tap"
                                    type="button" role="tab" aria-controls="visa_tap" aria-selected="false"
                                    class="main-color"><i class="fas fa-passport me-1"></i>
                                    {{ __('basic.visa') }}</button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link" id="airline-tab" data-bs-toggle="tab"
                                    data-bs-target="#airline_tap" type="button" role="tab" aria-controls="airline_tap"
                                    aria-selected="false" class="main-color"><i class="fas fa-plane me-1"></i>
                                    {{ __('basic.airline') }}</button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link" id="trips-tab" data-bs-toggle="tab" data-bs-target="#trip_tap"
                                    type="button" role="tab" aria-controls="trip_tap" aria-selected="false"
                                    class="main-color"><i class="fas fa-shuttle-van me-1"></i>
                                    {{ __('basic.trips') }}</button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link" id="file-tab" data-bs-toggle="tab" data-bs-target="#file_tap"
                                    type="button" role="tab" aria-controls="trip_tap" aria-selected="false"
                                    class="main-color"><i class="fas fa-file me-1"></i>
                                    {{ __('basic.files') }}</button>
                            </li>
                        </ul>

                        <div class="tab-content" id="myTabContent">

                            <!-- Bus -->
                            <div class="tab-pane fade show active mb-2" id="bus_tap" role="tabpanel"
                                aria-labelledby="bus_tap">

                                <div class="row justify-content-around">

                                    <div class="col-12 col-md-7">
                                        <h6 class="text-gray-400 mb-3">{{ __("basic.upcoming bus trip") }}</h6>
                                        <div class="row mb-2">

                                            @foreach ($bus_trips as $item)
                                            <div class="col-12 col-md-6 mb-3">
                                                <div
                                                    class="d-flex b-r-s-cont p-3 border-gray-200 d-flex align-items-center">

                                                    <i class="fas fa-bus fs-3 text-gray-400 me-3"></i>
                                                    <div class="col">
                                                        <div class="d-flex justify-content-between align-items-center">
                                                            <div>
                                                                <div class="d-flex">
                                                                    <span class="me-2">
                                                                        <p class="text-gray-300 text-xs mb-0">{{
                                                                            __("basic.from") }}
                                                                            <span class="text-gray-500 fw-bold">{{
                                                                                $item->fromable->name }}</span>
                                                                        </p>
                                                                    </span>
                                                                    <span>
                                                                        <p class="text-gray-300 text-xs mb-0">{{
                                                                            __("basic.to") }}
                                                                            <span class="text-gray-500 fw-bold">{{
                                                                                $item->toable->name }}</span>
                                                                        </p>
                                                                    </span>
                                                                </div>
                                                                <h6 class="mb-0">
                                                                    {{ date('d M Y', strtotime($item->start_date)) }}
                                                                    <p class="text-gray-400 text-xs mb-0">
                                                                        {{ date('h:i a', strtotime($item->start_date))
                                                                        }}
                                                                    </p>
                                                                </h6>
                                                            </div>
                                                        </div>
                                                        <hr class="my-1">
                                                        <div class="row justify-content-between mb-0">
                                                            <div class="col-6">

                                                                <h6 class="mb-0 text-s">{{ $item->seats_available }}
                                                                    <span class="text-gray-400 mb-0">{{
                                                                        __("basic.seats") }}</span>
                                                                </h6>
                                                                <h6 class="mb-0 fw-bold">{{ $item->sell }}
                                                                    <span class="text-gray-400 text-xs mb-0">{{
                                                                        __("basic.egp") }}</span>
                                                                </h6>
                                                            </div>
                                                            <div class="col-6 text-center">
                                                                <div id="bus_chart_btn_{{ $item->id }}"
                                                                    data-id="{{ $item->id }}"
                                                                    data-price="{{ $item->sell }}"
                                                                    class="b-r-l-cont btn btn-primary px-4 btn_bus_select">
                                                                    {{ __("basic.select") }}</div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            @endforeach

                                            <div class="modal fade" id="bus_chart" tabindex="-1" role="dialog"
                                                aria-labelledby="exampleModalLabel" aria-hidden="true">
                                                <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
                                                    <div class="modal-content b-r-s-cont border-0">
                                                        <div class="modal-header">
                                                            <h5 class="modal-title" id="exampleModalLabel"><i
                                                                    class="fas fa-bus me-1"></i>
                                                                {{ __("basic.trip bookings") }}</h5>
                                                            <button type="button" class="btn-close"
                                                                data-bs-dismiss="modal" aria-label="Close"></button>
                                                        </div>

                                                        <!-- Modal content -->
                                                        <div class="modal-body px-5 py-3">

                                                            <div id="bus_chart_cont">

                                                            </div>

                                                        </div>

                                                        <div class="modal-footer">
                                                            <div class="left-side">
                                                                <button type="button" class="btn btn-default btn-link"
                                                                    data-bs-dismiss="modal">{{
                                                                    __('basic.never mind') }}</button>
                                                            </div>
                                                            <div class="divider"></div>
                                                            <div class="right-side">
                                                                <div
                                                                    class="btn btn-default btn-link main-color bus_trip_btn_sub">
                                                                    <div id="bus_chart_cont_error"
                                                                        class="text-red text-center fw-bold mb-2">
                                                                    </div>
                                                                    {{ __("basic.select") }}
                                                                </div>
                                                            </div>
                                                        </div>

                                                    </div>
                                                </div>

                                            </div>

                                        </div>
                                        <input type="hidden" name="bus_from_id" id="bus_from_id" value="false">
                                        <input type="hidden" name="bus_from_qty">
                                        <input type="hidden" name="bus_from_seats">
                                        <input type="hidden" name="bus_to_id" id="bus_to_id" value="false">
                                        <input type="hidden" name="bus_to_qty">
                                        <input type="hidden" name="bus_to_seats">
                                    </div>

                                    <div class="col-12 col-md-5 calander-left-border">
                                        <img class="img-fluid p-md-2 mb-2"
                                            src="{{ URL::asset('img/dashboard/undraw_navigator_a479.svg') }}" alt=""
                                            style="margin-top:-51px;">

                                        <div id="bus_ticket_info_cont">

                                        </div>
                                    </div>

                                </div>
                            </div>


                            <!-- Limo -->
                            <div class="tab-pane fade show mb-2" id="limousine_tap" role="tabpanel"
                                aria-labelledby="limousine_tap">

                                <div class="row justify-content-around">

                                    <div class="col-12 col-md-5">

                                        <div class="mb-1">
                                            <label class="form-label">{{ __('basic.type') }}</label>
                                            <div class="d-flex">
                                                <div class="check_custom_index me-3">
                                                    <input checked type="radio" id="offer_limo_radio"
                                                        name="offer_type_limo_check" value="offer">
                                                    <label for="offer_limo_radio">{{ __("basic.offers") }}</label>
                                                    <div class="check">
                                                        <div class="inside"></div>
                                                    </div>
                                                </div>
                                                <div class="check_custom_index me-3">
                                                    <input type="radio" id="broker_limo_radio"
                                                        name="offer_type_limo_check" value="direct">
                                                    <label for="broker_limo_radio">{{ __("basic.direct") }}</label>
                                                    <div class="check">
                                                        <div class="inside"></div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        {{-- limo offer cont --}}
                                        <div id="limo_offer_cont">

                                            <div class="my-3">
                                                <div class="text-s text-gray-400 text-start">{{ __("basic.offers")
                                                    }}</div>
                                                <select id="limo_offer_id"
                                                    class="js-example-basic-single select2-hidden-accessible"
                                                    name="limo_offer_id" required>
                                                    @foreach ($limo_trips as $item)
                                                    <option value="{{ $item->id }}" data-text="{{ $item->name }}"
                                                        @if($item->debtor)
                                                        data-broker="{{ $item->debtor->company_name }}"
                                                        @endif
                                                        data-broker_id="{{ $item->debtor_id }}"
                                                        data-start_date="{{ $item->start_date }}"
                                                        data-end_date="{{ $item->end_date }}" data-sell="{{ $item->sell
                                                        }}"
                                                        data-buy="{{ $item->buy }}">{{ $item->name . ' - (' .
                                                        $item->sell
                                                        . ")"}}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                            <div>
                                                <div class="col-12 text-center">
                                                    <input id="limo_offer_search" type="button"
                                                        class="btn btn-primary action-button-next"
                                                        value="{{ __('basic.book') }}">
                                                </div>
                                            </div>

                                        </div>

                                        {{-- limo direct --}}
                                        <div id="limo_direct_cont" style="display: none">

                                            <div class="my-3">
                                                <div class="text-s text-gray-400 text-start">{{ __("basic.vehicles")
                                                    }}</div>
                                                <select id="vehicle_limo_offer"
                                                    class="js-example-basic-single select2-hidden-accessible @error('vehicle_limo_offer') is-invalid @enderror"
                                                    name="vehicle_limo_offer" required>
                                                    @foreach ($limos as $item)
                                                    <option value="{{ $item->id }}">{{ $item->name . ' - (' .
                                                        $item->code . ')'}}</option>
                                                    @endforeach
                                                </select>
                                            </div>

                                            <div class="row">
                                                <div class="col-12 col-md-6 mb-3">
                                                    <label class="form-label">{{ __('basic.start date') }}
                                                        <small>({{ __('basic.required') }})</small></label>
                                                    <div class="input-group">
                                                        <div class="input-group-prepend">
                                                            <div class="input-group-text"><i
                                                                    class="bi bi-calendar2-week-fill"></i>
                                                            </div>
                                                        </div>
                                                        <input id="start_limo_offer" name="start_limo_offer" type="text"
                                                            class="form-control datepicker_time bg-white"
                                                            placeholder="YYYY-MM-DD" data-enable-time="true" required>
                                                    </div>
                                                </div>

                                                <div class="col-12 col-md-6 mb-3">
                                                    <label class="form-label">{{ __('basic.end date') }}
                                                        <small>({{ __('basic.required') }})</small></label>
                                                    <div class="input-group">
                                                        <div class="input-group-prepend">
                                                            <div class="input-group-text"><i
                                                                    class="bi bi-calendar2-week-fill"></i>
                                                            </div>
                                                        </div>
                                                        <input id="end_limo_offer" name="end_limo_offer" type="text"
                                                            class="form-control datepicker_time bg-white"
                                                            placeholder="YYYY-MM-DD" data-enable-time="true" required>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="my-3">
                                                <div class="text-s text-gray-400 text-start">{{ __("basic.offers")
                                                    }}</div>
                                                <select id="broker_limo_offer"
                                                    class="js-example-basic-single select2-hidden-accessible"
                                                    name="broker_limo_offer" required>
                                                    <option value="null">{{ __('basic.not selected') }}</option>
                                                    @foreach ($debtors as $item)
                                                    <option value="{{ $item->id }}">{{ $item->company_name}}</option>
                                                    @endforeach
                                                </select>
                                            </div>

                                            <div class="row mb-3">
                                                <div class="col-12 col-md-6">
                                                    <div class="text-s text-gray-400 text-start">{{ __("basic.adult")
                                                        }}</div>
                                                    <select id="adult_limo_offer"
                                                        class="js-example-basic-single select2-no-search select2-hidden-accessible @error('adult_limo_offer') is-invalid @enderror"
                                                        name="adult_limo_offer" required>
                                                        @for ($i = 1; $i <= 20; $i++) <option value="{{ $i }}">
                                                            {{ $i }}
                                                            </option>
                                                            @endfor
                                                    </select>
                                                </div>
                                                <div class="col-12 col-md-6">
                                                    <div class="text-s text-gray-400 text-start">{{ __("basic.children")
                                                        }}</div>
                                                    <select id="children_limo_offer"
                                                        class="js-example-basic-single select2-no-search select2-hidden-accessible @error('children_limo_offer') is-invalid @enderror"
                                                        name="children_limo_offer" required>
                                                        @for ($i = 0; $i <= 20; $i++) <option value="{{ $i }}">
                                                            {{ $i }}
                                                            </option>
                                                            @endfor
                                                    </select>
                                                </div>
                                            </div>
                                            <div>
                                                <div class="col-12 text-center">
                                                    <input id="limo_direct_search" type="button"
                                                        class="btn btn-primary action-button-next"
                                                        value="{{ __('basic.book') }}">
                                                </div>
                                            </div>

                                        </div>


                                    </div>

                                    <div class="col-12 col-md-7 calander-left-border">
                                        <img class="img-fluid p-md-2 mb-2"
                                            src="{{ URL::asset('img/dashboard/undraw_navigator_a479.svg') }}" alt=""
                                            style="margin-top:-51px;">

                                        <div id="limo_ticket_info_cont">

                                        </div>
                                    </div>

                                </div>
                            </div>


                            {{-- Visa --}}
                            <div class="tab-pane fade" id="visa_tap" role="tabpanel" aria-labelledby="profile-tab">
                                <div class="row justify-content-center position-relative">

                                    <div class="col-12 col-md-10 col-lg-6 text-center position-relative pt-5">

                                        <img class="img-fluid p-md-2 mb-2"
                                            src="{{ URL::asset('img/dashboard/undraw_adventure_re_ncqp.svg') }}" alt=""
                                            style="margin-top:-51px;">

                                        <div class="p-4 px-5 bg-white rounded rounded-pill position-absolute"
                                            style="box-shadow: -1px 1rem 1rem 7px rgb(58 59 69 / 15%) !important; bottom: 110px;">
                                            <div class="row">

                                                <div class="col">
                                                    <div class="text-s text-gray-400 text-start">{{ __("basic.travel
                                                        to") }}</div>
                                                    <select id="visa_id"
                                                        class="js-example-basic-single select2-hidden-accessible @error('visa_id') is-invalid @enderror"
                                                        name="visa_id" required>
                                                        <option value="false">Not Selected</option>
                                                        @foreach ($visas as $iteam)
                                                        <option value="{{ $iteam->id }}">
                                                            {{ $iteam->name }}
                                                        </option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                                <div class="col">
                                                    <div class="text-s text-gray-400 text-start">{{ __("basic.type") }}
                                                    </div>
                                                    <select id="visa_type"
                                                        class="js-example-basic-single select2-no-search select2-hidden-accessible @error('visa_type') is-invalid @enderror"
                                                        name="visa_type" required>
                                                        <option disabled>
                                                            Select Visa First
                                                        </option>
                                                    </select>

                                                    @error('visa_type')
                                                    <span class="error-msg-form">
                                                        {{ $message }}
                                                    </span>
                                                    @enderror
                                                </div>

                                                <div class="col">
                                                    <div class="text-s text-gray-400 text-start">{{ __("basic.quantity")
                                                        }}</div>
                                                    <select id="visa_qty"
                                                        class="js-example-basic-single select2-no-search select2-hidden-accessible @error('visa_qty') is-invalid @enderror"
                                                        name="visa_qty" required>
                                                        @for ($i = 1; $i <= 20; $i++) <option value="{{ $i }}">
                                                            {{ $i }}
                                                            </option>
                                                            @endfor
                                                    </select>

                                                    @error('visa_qty')
                                                    <span class="error-msg-form">
                                                        {{ $message }}
                                                    </span>
                                                    @enderror
                                                </div>

                                                <div class="col">
                                                    <div class="text-s text-gray-400 text-start">{{ __("basic.arrival
                                                        date") }}</div>
                                                    <input id="visa_date" name="visa_date" type="text"
                                                        class="form-control hasdatetimepicker @error('visa_date') is-invalid @enderror"
                                                        placeholder="YYYY/MM/DD" required
                                                        value="{{ old('visa_date') }}">

                                                    @error('visa_date')
                                                    <span class="error-msg-form">
                                                        {{ $message }}
                                                    </span>
                                                    @enderror
                                                </div>
                                            </div>

                                        </div>

                                    </div>
                                </div>

                            </div>

                            {{-- Airline --}}
                            <div class="tab-pane fade" id="airline_tap" role="tabpanel" aria-labelledby="profile-tab">
                                <div class="row justify-content-center position-relative">

                                    <div class="col-12 col-md-10 col-lg-9 text-center position-relative pt-5">

                                        <img class="img-fluid p-md-2 mb-2"
                                            src="{{ URL::asset('img/dashboard/undraw_connected_world_wuay.svg') }}"
                                            alt="" style="margin-top:-51px;">

                                        <div class="p-4 px-5 bg-white rounded rounded-pill position-absolute"
                                            style="box-shadow: -1px 1rem 1rem 7px rgb(58 59 69 / 15%) !important; bottom: 110px;">
                                            <div class="row">

                                                <div class="col">
                                                    <div class="text-s text-gray-400 text-start">{{ __("basic.from") }}
                                                    </div>
                                                    <select id="from_airline"
                                                        class="js-example-basic-single select2-hidden-accessible @error('from_airline') is-invalid @enderror"
                                                        name="from_airline" required>
                                                        <option value="false">{{ __('basic.not selected') }}</option>
                                                        @foreach ($airports as $iteam)
                                                        <option value="{{ $iteam->id }}">
                                                            {{ $iteam->name }}
                                                        </option>
                                                        @endforeach
                                                    </select>

                                                    @error('from_airline')
                                                    <span class="error-msg-form">
                                                        {{ $message }}
                                                    </span>
                                                    @enderror
                                                </div>

                                                <div class="col">
                                                    <div class="text-s text-gray-400 text-start">{{ __("basic.to") }}
                                                    </div>
                                                    <select id="to_airline"
                                                        class="js-example-basic-single select2-hidden-accessible @error('to_airline') is-invalid @enderror"
                                                        name="to_airline" required>
                                                        <option value="false">{{ __('basic.not selected') }}</option>
                                                        @foreach ($airports as $iteam)
                                                        <option value="{{ $iteam->id }}">
                                                            {{ $iteam->name }}
                                                        </option>
                                                        @endforeach
                                                    </select>

                                                    @error('to_airline')
                                                    <span class="error-msg-form">
                                                        {{ $message }}
                                                    </span>
                                                    @enderror
                                                </div>
                                                <div class="col">
                                                    <div class="text-s text-gray-400 text-start">{{ __("basic.depart")
                                                        }}</div>
                                                    <input id="airline_from_date" name="airline_from_date" type="text"
                                                        class="form-control hasdatetimepicker @error('airline_from_date') is-invalid @enderror"
                                                        placeholder="YYYY/MM/DD" required
                                                        value="{{ old('airline_from_date') }}">

                                                    @error('airline_from_date')
                                                    <span class="error-msg-form">
                                                        {{ $message }}
                                                    </span>
                                                    @enderror
                                                </div>
                                                <div class="col">
                                                    <div class="text-s text-gray-400 text-start">{{ __("basic.return")
                                                        }}</div>
                                                    <input id="airline_to_date" name="airline_to_date" type="text"
                                                        class="form-control hasdatetimepicker @error('airline_to_date') is-invalid @enderror"
                                                        placeholder="YYYY/MM/DD" required
                                                        value="{{ old('airline_to_date') }}">

                                                    @error('airline_to_date')
                                                    <span class="error-msg-form">
                                                        {{ $message }}
                                                    </span>
                                                    @enderror
                                                </div>
                                                <hr class="my-2">
                                                <div class="col">
                                                    <div class="text-s text-gray-400 text-start">{{ __("basic.quantity")
                                                        }}</div>
                                                    <select id="adult_airline"
                                                        class="js-example-basic-single select2-no-search select2-hidden-accessible @error('adult_airline') is-invalid @enderror"
                                                        name="adult_airline" required>
                                                        @for ($i = 1; $i <= 50; $i++) <option value="{{ $i }}">
                                                            {{ $i }}
                                                            </option>
                                                            @endfor
                                                    </select>

                                                    @error('adult_airline')
                                                    <span class="error-msg-form">
                                                        {{ $message }}
                                                    </span>
                                                    @enderror
                                                </div>
                                                <div class="col">
                                                    <div class="text-s text-gray-400 text-start">{{ __("basic.broker")
                                                        }}</div>
                                                    <select id="debtor_airline"
                                                        class="js-example-basic-single select2-hidden-accessible @error('debtor_airline') is-invalid @enderror"
                                                        name="debtor_airline" required>
                                                        @foreach ($debtors as $iteam)
                                                        <option value="{{ $iteam->id }}">
                                                            {{ $iteam->name }}
                                                        </option>
                                                        @endforeach
                                                    </select>

                                                    @error('debtor_airline')
                                                    <span class="error-msg-form">
                                                        {{ $message }}
                                                    </span>
                                                    @enderror
                                                </div>
                                                <hr class="my-2">
                                                <div class="col">
                                                    <div class="text-s text-gray-400 text-start">
                                                        {{ __("basic.buy single trip") }}</div>
                                                    <input name="buy_airline" type="number"
                                                        class="form-control @error('buy_airline') is-invalid @enderror"
                                                        placeholder="Buy ticket.." value="0">

                                                    @error('buy_airline')
                                                    <span class="error-msg-form">
                                                        {{ $message }}
                                                    </span>
                                                    @enderror
                                                </div>
                                                <div class="col">
                                                    <div class="text-s text-gray-400 text-start">
                                                        {{ __("basic.sell single trip") }}</div>
                                                    <input name="sell_airline" type="number"
                                                        class="form-control @error('sell_airline') is-invalid @enderror"
                                                        placeholder="Sell ticket.." value="0">

                                                    @error('sell_airline')
                                                    <span class="error-msg-form">
                                                        {{ $message }}
                                                    </span>
                                                    @enderror
                                                </div>
                                                <div class="col">
                                                    <div class="text-s text-gray-400 text-start">
                                                        {{ __("basic.buy return trip") }}</div>
                                                    <input name="buy_airline_return" type="number"
                                                        class="form-control @error('buy_airline_return') is-invalid @enderror"
                                                        placeholder="Buy ticket.." value="0">

                                                    @error('buy_airline_return')
                                                    <span class="error-msg-form">
                                                        {{ $message }}
                                                    </span>
                                                    @enderror
                                                </div>
                                                <div class="col">
                                                    <div class="text-s text-gray-400 text-start">
                                                        {{ __("basic.sell return trip") }}</div>
                                                    <input name="sell_airline_return" type="number"
                                                        class="form-control @error('sell_airline_return') is-invalid @enderror"
                                                        placeholder="Sell ticket.." value="0">

                                                    @error('sell_airline_return')
                                                    <span class="error-msg-form">
                                                        {{ $message }}
                                                    </span>
                                                    @enderror
                                                </div>
                                            </div>

                                        </div>

                                    </div>
                                </div>

                            </div>

                            {{-- Trip --}}
                            <div class="tab-pane fade" id="trip_tap" role="tabpanel" aria-labelledby="trip-tab">

                                <div class="row justify-content-center position-relative">

                                    <div class="col-12 col-md-10 col-lg-6 text-center position-relative pt-5">

                                        <img class="img-fluid p-md-2 mb-2"
                                            src="{{ URL::asset('img/dashboard/undraw_into_the_night_vumi.svg') }}"
                                            alt="" style="margin-top:-51px;">

                                        <div class="p-4 px-5 bg-white rounded rounded-pill position-absolute"
                                            style="box-shadow: -1px 1rem 1rem 7px rgb(58 59 69 / 15%) !important; bottom: 110px;">
                                            <div class="row">

                                                <div class="col">
                                                    <div class="text-s text-gray-400 text-start">{{ __("basic.trip") }}
                                                    </div>
                                                    <select id="trip_id"
                                                        class="js-example-basic-single select2-hidden-accessible @error('trip_id') is-invalid @enderror"
                                                        name="trip_id" required>
                                                        <option value="false">{{ __('basic.not selected') }}</option>
                                                        @foreach ($trips as $iteam)
                                                        <option value="{{ $iteam->id }}">
                                                            {{ $iteam->name }}
                                                        </option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                                <div class="col">
                                                    <div class="text-s text-gray-400 text-start">{{ __("basic.offer") }}
                                                    </div>
                                                    <select id="trip_offer_id"
                                                        class="js-example-basic-single select2-no-search select2-hidden-accessible @error('trip_offer_id') is-invalid @enderror"
                                                        name="trip_offer_id" required>
                                                        <option disabled>
                                                            {{ __('basic.select visa first') }}
                                                        </option>
                                                    </select>

                                                    @error('trip_offer_id')
                                                    <span class="error-msg-form">
                                                        {{ $message }}
                                                    </span>
                                                    @enderror
                                                </div>

                                                <div class="col">
                                                    <div class="text-s text-gray-400 text-start">{{ __("basic.quantity")
                                                        }}</div>
                                                    <select id="trip_qty"
                                                        class="js-example-basic-single select2-no-search select2-hidden-accessible @error('trip_qty') is-invalid @enderror"
                                                        name="trip_qty" required>
                                                        @for ($i = 1; $i <= 20; $i++) <option value="{{ $i }}">
                                                            {{ $i }}
                                                            </option>
                                                            @endfor
                                                    </select>

                                                    @error('trip_qty')
                                                    <span class="error-msg-form">
                                                        {{ $message }}
                                                    </span>
                                                    @enderror
                                                </div>

                                                <div class="col">
                                                    <div class="text-s text-gray-400 text-start">{{ __("basic.date") }}
                                                    </div>
                                                    <input id="trip_date" name="trip_date" type="text"
                                                        class="form-control hasdatetimepicker @error('trip_date') is-invalid @enderror"
                                                        placeholder="YYYY/MM/DD" required
                                                        value="{{ old('trip_date') }}">

                                                    @error('trip_date')
                                                    <span class="error-msg-form">
                                                        {{ $message }}
                                                    </span>
                                                    @enderror
                                                </div>

                                            </div>

                                        </div>

                                    </div>

                                </div>

                            </div>

                            {{-- File --}}
                            <div class="tab-pane fade" id="file_tap" role="tabpanel" aria-labelledby="file-tab">
                                <div class="row justify-content-around">

                                    <div class="col-12 col-md-7">
                                        <h6 class="text-gray-400 mb-3">{{ __("basic.inprogress files") }}</h6>
                                        <div class="row mb-2">
                                            @foreach ($op_file as $item)
                                            <div class="col-12 col-md-6 mb-3">
                                                <div
                                                    class="d-flex b-r-s-cont p-3 border-gray-200 d-flex align-items-center">

                                                    <i class="fas fa-file-alt fs-3 text-gray-400 me-3"></i>
                                                    <div class="col">
                                                        <div class="d-flex justify-content-between align-items-center">
                                                            <div>
                                                                <p class="text-gray-500 text-xs mb-0">
                                                                    {{ date('d M Y', strtotime($item->date)) }}
                                                                </p>
                                                                <h6 class="mb-0">
                                                                    {{ $item->name }}
                                                                </h6>
                                                                <h6 class="mb-0 text-xs">
                                                                    <span class="text-gray-300">{{ __("basic.worker")
                                                                        }}:
                                                                    </span>
                                                                    {{ $item->worker->name }}
                                                                </h6>
                                                            </div>

                                                            <i data-id="{{ $item->id }}"
                                                                class="fas fa-check-circle fs-5 clickable-item-pointer text-gray-300 file_click"></i>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            @endforeach
                                        </div>
                                        <input type="hidden" name="file_id" id="file_id" value="false">
                                    </div>

                                    <div class="col-12 col-md-5 calander-left-border">
                                        <div class="row">

                                            <h6 class="text-gray-400 mb-3"><i class="fas fa-plus"></i>
                                                {{ __("basic.create new file") }}
                                            </h6>

                                            <div class="col-12 mb-3">
                                                <label class="form-label">{{ __('basic.name') }}
                                                    <small>({{ __('basic.required') }})</small></label>
                                                <input name="op_name" type="text"
                                                    class="form-control @error('name') is-invalid @enderror"
                                                    value="{{ old('op_name') }}" placeholder="File Name .." required>

                                                @error('op_name')
                                                <span class="error-msg-form">
                                                    {{ $message }}
                                                </span>
                                                @enderror
                                            </div>

                                            <div class="col-12 mb-3">
                                                <label class="form-label">{{ __('basic.worker') }}
                                                    <small>({{ __('basic.required') }})</small></label>
                                                <select id="worker_id"
                                                    class="js-example-basic-single select2-hidden-accessible @error('op_worker_id') is-invalid @enderror"
                                                    name="op_worker_id">
                                                    @foreach ($workers as $item)
                                                    <option value="{{ $item->id }}">{{ $item->name }}</option>
                                                    @endforeach
                                                </select>
                                                <div id="op_worker_id-js-error-valid"></div>

                                                @error('op_worker_id')
                                                <span class="error-msg-form">
                                                    {{ $message }}
                                                </span>
                                                @enderror
                                            </div>

                                            <div class="col-12 mb-3">
                                                <label class="form-label">{{ __('basic.note') }}
                                                    <small>({{ __('basic.optional') }})</small></label>
                                                <textarea name="op_note"
                                                    class="form-control @error('op_note') is-invalid @enderror" rows="4"
                                                    placeholder="Write here the file note">{{ old('op_note') }}</textarea>

                                                @error('op_note')
                                                <span class="error-msg-form">
                                                    {{ $message }}
                                                </span>
                                                @enderror
                                            </div>

                                        </div>

                                    </div>

                                </div>
                            </div>

                        </div>

                        <div class="d-flex justify-content-between p-4">
                            <input type="button" name="previous"
                                class="previous-form-steps btn btn-secondary action-button-previous me-3"
                                value="{{ __('basic.previous') }}" />
                            <input type="button" data-skip="true" name="next"
                                class="next-form-steps btn btn-primary action-button-next"
                                value="{{ __('basic.continue') }}" />
                        </div>
                    </div>

                    <!-- slide 3 (file) -->

                    <div class="cont_tap px-2" id="time">

                        <div class="row justify-content-around">

                            <div class="col-12">

                                <ul class="nav nav-tabs" id="myTab" role="tablist">
                                    <li class="nav-item" role="presentation">
                                        <button class="nav-link active" id="home-tab" data-bs-toggle="tab"
                                            data-bs-target="#broker_tap" type="button" role="tab"
                                            aria-controls="broker_tap" aria-selected="true" class="text-gray-500"><i
                                                class="fas fa-users me-1"></i>
                                            {{ __('basic.broker') }}</button>
                                    </li>
                                    <li class="nav-item" role="presentation">
                                        <button class="nav-link" id="file-tab" data-bs-toggle="tab"
                                            data-bs-target="#new_broker_tab" type="button" role="tab"
                                            aria-controls="new_broker_tab" aria-selected="false" class="main-color"><i
                                                class="fas fa-plus me-1"></i>
                                            {{ __('basic.new') }}</button>
                                    </li>
                                </ul>

                                <div class="tab-content" id="myTabContent">

                                    <!-- search for patients -->
                                    <div class="tab-pane fade show active" id="broker_tap" role="tabpanel"
                                        aria-labelledby="broker-tab">

                                        <div class="row pt-5 justify-content-center">

                                            <h5 class="text-center text-gray-400">
                                                <p class="text-gray-400 text-xs mb-0">{{ __('basic.you can skip') }}</p>

                                                {{ __('basic.write broker to sell') }} <span
                                                    class="text-gray-400 clickable-item-pointer ms-1" href="#"
                                                    data-bs-toggle="tooltip"
                                                    data-bs-title="{{ __('basic.broker_booking_tip') }}"><i
                                                        class="fas fa-info-circle"></i></span>
                                            </h5>

                                            <div class="col-12 col-md-9 my-4">

                                                <div class="debtor-search-eng-cont-calander">

                                                    <div class="p-1 bg-white rounded rounded-pill border-all"
                                                        style="box-shadow: -1px 1rem 1rem 7px rgb(58 59 69 / 15%) !important; ">

                                                        <div class="input-group">
                                                            <input id="debtor-search-eng" type="search"
                                                                placeholder="{{ __('basic.broker search msg') }}"
                                                                aria-describedby="button-add"
                                                                class="form-control border-0 bg-transparent px-4"
                                                                required>
                                                            <div class="input-group-append pe-2">
                                                                <button class="btn btn-link text-primary typeahead"><i
                                                                        class="fa fa-search text-gray-300"></i></button>
                                                            </div>
                                                        </div>

                                                    </div>

                                                </div>

                                                @error('debtor_search_patient_id')
                                                <span class="error-msg-form">
                                                    {{ $message }}
                                                </span>
                                                @enderror

                                                <!-- patient id from search bar via ajax-->
                                                <input type="hidden" name="debtor_search_patient_id"
                                                    id="debtor_search_patient_id" value="" required>

                                                <div id="debtor-search-eng-js-error-valid"></div>

                                            </div>


                                            <div class="col-12 mt-4 position-relative">

                                                <!-- showing waiting during ajax performance -->
                                                <div id="waiting2" class="w-100 h-100 text-center"
                                                    style="position: absolute; top:0px; left:0px;z-index:999999; background-color: #ffffffba;">
                                                    <div class="spinner-grow text-primary" role="status"
                                                        style="position: relative; top: 50%; transform: translateY(-50%);">
                                                        <span class="sr-only">{{ __("basic.loading") }}...</span>
                                                    </div>
                                                </div>

                                            </div>


                                            <h6 id="debtor-hid-info-search" class="text-gray-600 mb-3"
                                                style="display: none">
                                                {{ __('patientappo.patient info') }} </h6>
                                            <div id="debtor_info_ajax">
                                                <!-- to get the patient info from ajax -->
                                            </div>


                                        </div>


                                    </div>

                                    <div class="tab-pane fade" id="new_broker_tab" role="tabpanel"
                                        aria-labelledby="new-broker-tab">

                                        <h5 class="text-gray-400 mt-4">{{ __('basic.new broker') }}
                                        </h5>

                                        <div class="row mb-1 mt-5">

                                            <div class="col-12 col-md-5 align-self-center mb-2">
                                                <div class="avatar-update-container">
                                                    <div class="picture">
                                                        <img src="{{ URL::asset('img/dashboard/avatars/default-pp.png') }}"
                                                            class="picture-src" id="mib_PicturePreview" title="" />
                                                        <input type="file" name='debtor_avatar' accept="image/*"
                                                            id="mib_img_input">
                                                    </div>
                                                    <h6 class="text-gray-300">{{ __('basic.choose pic') }}</h6>

                                                    @error('avatar')
                                                    <span class="error-msg-form">
                                                        {{ $message }}
                                                    </span>
                                                    @enderror
                                                </div>
                                            </div>

                                            <div class="col-12 col-md-7 mb-2">
                                                <div class="mb-3">
                                                    <label class="form-label">{{ __('patientappo.first name') }}
                                                        <small>({{ __('basic.required') }})</small></label>
                                                    <input name="debtor_first_name" type="text"
                                                        class="form-control @error('debtor_first_name') is-invalid @enderror"
                                                        placeholder="Write your first name here" required
                                                        value="{{ old('debtor_first_name') }}">
                                                </div>

                                                @error('debtor_first_name')
                                                <span class="error-msg-form">
                                                    {{ $message }}
                                                </span>
                                                @enderror

                                                <div class="mb-3">
                                                    <label class="form-label">{{ __('patientappo.second name') }}
                                                        <small>({{ __('basic.required') }})</small></label>
                                                    <input name="debtor_second_name" type="text"
                                                        class="form-control @error('debtor_second_name') is-invalid @enderror"
                                                        placeholder="Write your second name here" required
                                                        value="{{ old('debtor_second_name') }}">
                                                </div>

                                                @error('debtor_second_name')
                                                <span class="error-msg-form">
                                                    {{ $message }}
                                                </span>
                                                @enderror

                                                <div class="mb-3">
                                                    <label class="form-label">{{ __('basic.company name') }}
                                                        <small>({{ __('basic.required') }})</small></label>
                                                    <input name="debtor_company_name" type="text"
                                                        class="form-control @error('debtor_company_name') is-invalid @enderror"
                                                        placeholder="Write the company name here" required
                                                        value="{{ old('debtor_company_name') }}">
                                                </div>
                                                @error('debtor_company_name')
                                                <span class="error-msg-form">
                                                    {{ $message }}
                                                </span>
                                                @enderror

                                            </div>

                                        </div>

                                        <div class="row mb-2">
                                            <div class="col-12 col-md-6 mb-2">
                                                <label class="form-label">{{ __('patientappo.password') }}
                                                    <small>({{ __('basic.required') }})</small></label>
                                                <input id="debtor_password" name="debtor_password" type="password"
                                                    class="form-control @error('debtor_password') is-invalid @enderror"
                                                    placeholder="Wrtie your password here..." required>

                                                @if ($errors->has('debtor_password'))
                                                <span class="error-msg-form">
                                                    {{ $errors->first('password') }}
                                                </span>
                                                @else
                                                <div class="form-text text-gray-200">
                                                    {{ __('patientappo.password msg') }}
                                                </div>
                                                @endif
                                            </div>

                                            <div class="col-12 col-md-6 mb-2">
                                                <label class="form-label">{{ __('patientappo.confirm password') }}
                                                    <small>({{ __('basic.required') }})</small></label>
                                                <input name="debtor_password_confirmation" type="password"
                                                    class="form-control" placeholder="Confirm your password..."
                                                    id="debtor_password-confirm" required>
                                            </div>

                                        </div>

                                        <hr>
                                        <h6 class="text-gray-400 mb-">
                                            {{ __('basic.other info') }}
                                        </h6>

                                        <div class="row mb-2">

                                            <div class="col-12 col-md-4 mb-2">
                                                <label class="form-label">{{ __('patientappo.phone number') }}
                                                    <small>({{ __('basic.required') }})</small></label>
                                                <input id="int-miphone" name="debtor_phone_number" type="tel"
                                                    class="form-control @error('debtor_phone_number') is-invalid @enderror"
                                                    required value="{{ old('debtor_phone_number') }}">

                                                <div id="phonenumber-js-error-valid"></div>

                                                @if ($errors->has('debtor_phone_number'))
                                                <span class="error-msg-form">
                                                    {{ $errors->first('phone_number') }}
                                                </span>
                                                @else
                                                <div class="form-text text-gray-200">We'll never share your email
                                                    with anyone else.
                                                </div>
                                                @endif
                                            </div>

                                            <div class="col-12 col-md-4 mb-2">
                                                <label class="form-label">{{ __('patientappo.email')
                                                    }}
                                                    <small>({{ __('basic.required') }})</small></label>
                                                <input id="int-miphone2" name="debtor_email" type="tel"
                                                    class="form-control @error('debtor_email') is-invalid @enderror"
                                                    value="{{ old('debtor_email') }}" required>

                                                <div id="debtor_email-js-error-valid"></div>

                                                @error('debtor_email')
                                                <span class="error-msg-form">
                                                    {{ $message }}
                                                </span>
                                                @enderror
                                            </div>

                                            <div class="col-12 col-md-4 mb-2">
                                                <label class="form-label">{{ __('basic.note') }}<small>
                                                        ({{ __('basic.optional') }})</small></label>
                                                <input name="debtor_note" type="text"
                                                    class="form-control @error('debtor_note') is-invalid @enderror"
                                                    placeholder="Write your note for debtor"
                                                    value="{{ old('debtor_note') }}">

                                                @error('debtor_note')
                                                <span class="error-msg-form">
                                                    {{ $message }}
                                                </span>
                                                @enderror

                                            </div>

                                        </div>

                                        <div class="d-flex justify-content-end p-4 pb-0">
                                            <input type="button" name="next" data-type="debtor"
                                                class="next-form-steps search-select-btn btn btn-primary action-button-next debtor-search-select-btn"
                                                value="{{ __('basic.continue') }}" />
                                        </div>

                                    </div>
                                </div>

                            </div>

                        </div>


                        <div class="d-flex justify-content-between p-4">
                            <input type="button" name="previous"
                                class="previous-form-steps btn btn-secondary action-button-previous me-3"
                                value="{{ __('basic.previous') }}" />

                            <div class="d-flex align-items-center">
                                <input data-skip="true" type="button" name="next"
                                    class="next-form-steps btn btn-secondary action-button-next"
                                    value="{{ __('basic.skip') }}" />
                            </div>
                        </div>
                    </div>


                    <!-- slide 4 traveler chose -->

                    <div class="cont_tap px-2" id="time">

                        <div class="row justify-content-around">

                            <div class="col-12">

                                <ul class="nav nav-tabs" id="myTab" role="tablist">
                                    <li class="nav-item" role="presentation">
                                        <button class="nav-link active" id="home-tab" data-bs-toggle="tab"
                                            data-bs-target="#home" type="button" role="tab" aria-controls="home"
                                            aria-selected="true" class="text-gray-500"><i class="fas fa-user me-1"></i>
                                            {{ __('basic.patient') }}</button>
                                    </li>
                                    <li class="nav-item" role="presentation">
                                        <button class="nav-link" id="profile-tab" data-bs-toggle="tab"
                                            data-bs-target="#profile" type="button" role="tab" aria-controls="profile"
                                            aria-selected="false" class="main-color"><i class="fas fa-plus me-1"></i>
                                            {{ __('basic.new') }}</button>
                                    </li>
                                </ul>

                                <div class="tab-content" id="myTabContent">

                                    <!-- search for patients -->
                                    <div class="tab-pane fade show active" id="home" role="tabpanel"
                                        aria-labelledby="home-tab">

                                        <div class="row pt-5 justify-content-center">

                                            <h5 class="text-center text-gray-400">
                                                {{ __('patientappo.patient for appointment') }}
                                            </h5>

                                            <div class="col-12 col-md-9 my-4">

                                                <div class="search-eng-cont-calander">

                                                    <div class="p-1 bg-white rounded rounded-pill border-all"
                                                        style="box-shadow: -1px 1rem 1rem 7px rgb(58 59 69 / 15%) !important; ">

                                                        <div class="input-group">
                                                            <input id="search-eng" type="search"
                                                                placeholder="{{ __('patientappo.patient search msg') }}"
                                                                aria-describedby="button-add"
                                                                class="form-control border-0 bg-transparent px-4"
                                                                required>
                                                            <div class="input-group-append pe-2">
                                                                <button class="btn btn-link text-primary typeahead"><i
                                                                        class="fa fa-search text-gray-300"></i></button>
                                                            </div>
                                                        </div>

                                                    </div>

                                                </div>

                                                @error('search_patient_id')
                                                <span class="error-msg-form">
                                                    {{ $message }}
                                                </span>
                                                @enderror

                                                <!-- patient id from search bar via ajax-->
                                                <input type="hidden" name="search_patient_id" id="search_patient_id"
                                                    data-name="" data-phone_number="" value="" required>

                                                <div id="search-eng-js-error-valid"></div>

                                            </div>


                                            <div class="col-12 mt-4 position-relative">

                                                <!-- showing waiting during ajax performance -->
                                                <div id="waiting2" class="w-100 h-100 text-center"
                                                    style="position: absolute; top:0px; left:0px;z-index:999999; background-color: #ffffffba;">
                                                    <div class="spinner-grow text-primary" role="status"
                                                        style="position: relative; top: 50%; transform: translateY(-50%);">
                                                        <span class="sr-only">{{ __("basic.loading") }}...</span>
                                                    </div>
                                                </div>

                                                <h6 id="hid-info-search" class="text-gray-600 mb-3"
                                                    style="display: none">
                                                    {{ __('patientappo.patient info') }} </h6>
                                                <div id="patient_info_ajax">
                                                    <!-- to get the patient info from ajax -->
                                                </div>


                                                <div class="d-flex justify-content-between p-4">
                                                    <div class="d-flex justify-content-between p-4 pb-0">
                                                        <input type="button" name="previous"
                                                            id="previous-form-steps-traveler"
                                                            class="previous-form-steps btn btn-secondary action-button-previous me-3"
                                                            value="{{ __('basic.previous') }}">
                                                    </div>

                                                    <div class="d-flex align-items-center">
                                                        <input data-skip="true" type="button" name="next"
                                                            id="traveler_btn_skip" style="display: none"
                                                            class="next-form-steps btn btn-secondary action-button-next"
                                                            value="{{ __('basic.skip') }}" />
                                                    </div>
                                                </div>

                                            </div>

                                        </div>


                                    </div>

                                    <div class="tab-pane fade" id="profile" role="tabpanel"
                                        aria-labelledby="profile-tab">

                                        <h5 class="text-gray-400 mt-4">{{ __('patientappo.new patient') }}
                                        </h5>

                                        <div class="row mb-1 mt-5">

                                            <div class="col-12 col-md-5 align-self-center mb-2">
                                                <div class="avatar-update-container">
                                                    <div class="picture">
                                                        <img src="{{ URL::asset('img/dashboard/avatars/default-pp.png') }}"
                                                            class="picture-src" id="mib_PicturePreview" title="" />
                                                        <input type="file" name='avatar' accept="image/*"
                                                            id="mib_img_input">
                                                    </div>
                                                    <h6 class="text-gray-300">{{ __('basic.choose pic') }}</h6>

                                                    @error('avatar')
                                                    <span class="error-msg-form">
                                                        {{ $message }}
                                                    </span>
                                                    @enderror
                                                </div>
                                            </div>

                                            <div class="col-12 col-md-7 mb-2">
                                                <div class="mb-3">
                                                    <label class="form-label">{{ __('patientappo.first name') }}
                                                        <small>({{ __('basic.required') }})</small></label>
                                                    <input name="first_name" type="text"
                                                        class="form-control @error('first_name') is-invalid @enderror"
                                                        placeholder="Write your first name here" required
                                                        value="{{ old('first_name') }}">
                                                </div>

                                                @error('first_name')
                                                <span class="error-msg-form">
                                                    {{ $message }}
                                                </span>
                                                @enderror

                                                <div class="mb-3">
                                                    <label class="form-label">{{ __('patientappo.second name') }}
                                                        <small>({{ __('basic.required') }})</small></label>
                                                    <input name="second_name" type="text"
                                                        class="form-control @error('second_name') is-invalid @enderror"
                                                        placeholder="Write your second name here" required
                                                        value="{{ old('second_name') }}">
                                                </div>

                                                @error('second_name')
                                                <span class="error-msg-form">
                                                    {{ $message }}
                                                </span>
                                                @enderror

                                            </div>

                                        </div>

                                        <div class="row mb-2">
                                            <div class="col-12 col-md-6 mb-2">
                                                <label class="form-label">{{ __('patientappo.password') }}
                                                    <small>({{ __('basic.required') }})</small></label>
                                                <input id="password" name="password" type="password"
                                                    class="form-control @error('password') is-invalid @enderror"
                                                    placeholder="Wrtie your password here..." required>

                                                @if ($errors->has('password'))
                                                <span class="error-msg-form">
                                                    {{ $errors->first('password') }}
                                                </span>
                                                @else
                                                <div class="form-text text-gray-200">
                                                    {{ __('patientappo.password msg') }}
                                                </div>
                                                @endif
                                            </div>


                                            <div class="col-12 col-md-6 mb-2">
                                                <label class="form-label">{{ __('patientappo.confirm password') }}
                                                    <small>({{ __('basic.required') }})</small></label>
                                                <input name="password_confirmation" type="password" class="form-control"
                                                    placeholder="Confirm your password..." id="password-confirm"
                                                    required>
                                            </div>

                                        </div>

                                        <hr>
                                        <h6 class="text-gray-400 mb-">
                                            {{ __('patientappo.additional personal information') }}
                                        </h6>

                                        <div class="row mb-2">

                                            <div class="col-12 col-md-3 mb-2">
                                                <label class="form-label">{{ __('basic.passport') }}
                                                    <small>({{ __('basic.optional') }})</small></label>
                                                <input name="passport_number" type="text"
                                                    class="form-control @error('passport_number') is-invalid @enderror"
                                                    placeholder="A120MS..." value="{{ old('passport_number') }}">
                                                @error('passport_number')
                                                <span class="error-msg-form">
                                                    {{ $message }}
                                                </span>
                                                @enderror
                                            </div>

                                            <div class="col-12 col-md-3 mb-2">
                                                <label class="form-label">{{ __('patientappo.email') }}
                                                    <small>({{ __('basic.optional') }})</small></label>
                                                <input name="email" type="email"
                                                    class="form-control @error('email') is-invalid @enderror"
                                                    placeholder="Yousef@gmail.com..." value="{{ old('email') }}">
                                                @error('email')
                                                <span class="error-msg-form">
                                                    {{ $message }}
                                                </span>
                                                @enderror
                                            </div>

                                            <div class="col-12 col-md-3 mb-2">
                                                <label class="form-label">{{ __('patientappo.know us') }}
                                                    <small>({{ __('basic.required') }})</small></label>
                                                <select
                                                    class="js-example-basic-single select2-hidden-accessible select2-no-search @error('from_recourse_id') is-invalid @enderror"
                                                    name="from_recourse_id">
                                                    @foreach ($from_recourses as $iteam)
                                                    <option @if (old('from_recourse_id')===$iteam->id) selected
                                                        @endif
                                                        value="{{ $iteam->id }}">{{ $iteam->name }}
                                                    </option>
                                                    @endforeach
                                                </select>

                                                <div id="from-recourse-js-error-valid"></div>

                                                @error('from_recourse_id')
                                                <span class="error-msg-form">
                                                    {{ $message }}
                                                </span>
                                                @enderror

                                            </div>


                                            <div class="col-12 col-md-3 mb-2">
                                                <label class="form-label">{{ __('basic.class') }}
                                                    <small>({{ __('basic.required') }})</small></label>
                                                <select
                                                    class="js-example-basic-single select2-no-search select2-hidden-accessible @error('traveler_class') is-invalid @enderror"
                                                    name="traveler_class" required>
                                                    <option @if (old('traveler_class')==1) selected @endif value="1">
                                                        VIP
                                                    </option>
                                                    <option @if (old('traveler_class')==2) selected @endif value="2">
                                                        5*
                                                    </option>
                                                    <option @if (old('traveler_class')==3) selected @endif value="3">
                                                        4*
                                                    </option>
                                                    <option selected @if (old('traveler_class')==4) selected @endif
                                                        value="4">
                                                        3*
                                                    </option>
                                                    <option @if (old('traveler_class')==5) selected @endif value="5">
                                                        2*
                                                    </option>
                                                    <option @if (old('traveler_class')==6) selected @endif value="6">
                                                        1*
                                                    </option>
                                                </select>
                                                <div id="traveler_class-js-error-valid"></div>

                                                @error('traveler_class')
                                                <span class="error-msg-form">
                                                    {{ $message }}
                                                </span>
                                                @enderror
                                            </div>
                                        </div>

                                        <div class="row mb-2">


                                            <div class="col-12 col-md-3 mb-2">
                                                <label class="form-label">{{ __('basic.catagorey') }}
                                                    <small>({{ __('basic.required') }})</small></label>
                                                <select
                                                    class="js-example-basic-single select2-no-search select2-hidden-accessible @error('traveler_cat') is-invalid @enderror"
                                                    name="traveler_cat" required>
                                                    <option @if (old('traveler_cat')==1) selected @endif value="1">
                                                        Not selected
                                                    </option>
                                                    <option @if (old('traveler_cat')==2) selected @endif value="2">
                                                        Outgoing
                                                    </option>
                                                    <option @if (old('traveler_cat')==3) selected @endif value="3">
                                                        Domestic
                                                    </option>
                                                    <option @if (old('traveler_cat')==4) selected @endif value="4">
                                                        Incoming
                                                    </option>
                                                    <option @if (old('traveler_cat')==5) selected @endif value="5">
                                                        Religious
                                                    </option>
                                                </select>
                                                <div id="traveler_cat-js-error-valid"></div>

                                                @error('traveler_cat')
                                                <span class="error-msg-form">
                                                    {{ $message }}
                                                </span>
                                                @enderror
                                            </div>

                                            <div class="col-12 col-md-3 mb-2">
                                                <label class="form-label">{{ __('basic.religion') }}
                                                    <small>({{ __('basic.required') }})</small></label>
                                                <select
                                                    class="js-example-basic-single select2-no-search select2-hidden-accessible @error('religion') is-invalid @enderror"
                                                    name="religion" required>
                                                    <option @if (old('religion')==1) selected @endif value="1">
                                                        Muslim
                                                    </option>
                                                    <option @if (old('religion')==2) selected @endif value="2">
                                                        Christine
                                                    </option>
                                                    <option selected @if (old('religion')==3) selected @endif value="3">
                                                        Not sure
                                                    </option>
                                                </select>
                                                <div id="religion-js-error-valid"></div>

                                                @error('religion')
                                                <span class="error-msg-form">
                                                    {{ $message }}
                                                </span>
                                                @enderror
                                            </div>

                                            <div class="col-12 col-md-3 mb-2">
                                                <label class="form-label">{{ __('patientappo.gendar') }}
                                                    <small>({{ __('basic.required') }})</small></label>
                                                <select
                                                    class="js-example-basic-single select2-no-search select2-hidden-accessible @error('gendar') is-invalid @enderror"
                                                    name="gendar" required>
                                                    <option @if (old('gendar')==='male' ) selected @endif value="male">
                                                        {{ __('patientappo.male') }}</option>
                                                    <option @if (old('gendar')==='female' ) selected @endif
                                                        value="female">
                                                        {{ __('patientappo.female') }}</option>
                                                </select>
                                                <div id="gendar-js-error-valid"></div>

                                                @error('gendar')
                                                <span class="error-msg-form">
                                                    {{ $message }}
                                                </span>
                                                @enderror
                                            </div>

                                            <div class="col-12 col-md-3 mb-2">

                                                <label class="form-label">{{ __('patientappo.birthday') }}
                                                    <small>({{ __('basic.required') }})</small></label>
                                                <div class="input-group">
                                                    <div class="input-group-prepend">
                                                        <div class="input-group-text"><i
                                                                class="bi bi-calendar2-week-fill"></i> </div>
                                                    </div>
                                                    <input name="birthday" type="text"
                                                        class="form-control hasdatetimepicker @error('birthday') is-invalid @enderror"
                                                        placeholder="YYYY/MM/DD" required
                                                        value="@if(old('birthday')){{ old('birthday') }}@else{{ date('Y-m-d') }}@endif">
                                                </div>
                                                <div id="birthday-js-error-valid"></div>

                                                @error('birthday')
                                                <span class="error-msg-form">
                                                    {{ $message }}
                                                </span>
                                                @enderror

                                            </div>
                                        </div>


                                        <div class="row mb-2">

                                            <div class="col-12 col-md-3 mb-2">
                                                <label class="form-label">{{ __('patientappo.country') }}
                                                    <small>({{ __('basic.required') }})</small></label>
                                                <select
                                                    class="js-example-basic-single select2-hidden-accessible @error('country_id') is-invalid @enderror"
                                                    name="country_id" required>
                                                    @foreach ($countries as $iteam)
                                                    <option value="{{ $iteam->id }}">{{ $iteam->name }}
                                                    </option>
                                                    @endforeach
                                                </select>
                                                <div id="country-js-error-valid"></div>

                                                @error('country_id')
                                                <span class="error-msg-form">
                                                    {{ $message }}
                                                </span>
                                                @enderror

                                            </div>

                                            <div class="col-12 col-md-3 mb-2">
                                                <label class="form-label">{{ __('patientappo.city') }}
                                                    <small>({{ __('basic.required') }})</small></label>
                                                <select
                                                    class="js-example-basic-single select2-hidden-accessible @error('city_id') is-invalid @enderror"
                                                    name="city_id" required>
                                                    <option value="10003">Not Selected</option>
                                                </select>

                                                <div id="city-js-error-valid"></div>

                                                @if ($errors->has('city_id'))
                                                <span class="error-msg-form">
                                                    {{ $errors->first('city_id') }}
                                                </span>
                                                @else
                                                <div class="form-text text-gray-200">
                                                    {{ __('patientappo.city msg') }}
                                                </div>
                                                @endif
                                            </div>


                                            <div class="col-12 col-md-3 mb-2">
                                                <label class="form-label">{{ __('basic.region') }}
                                                    <small>({{ __('basic.required') }})</small></label>
                                                <select
                                                    class="js-example-basic-single select2-hidden-accessible @error('region_id') is-invalid @enderror"
                                                    name="region_id" required>
                                                    <option value="1">Not Selected</option>
                                                </select>

                                                <div id="region-js-error-valid"></div>

                                                @error('region_id')
                                                <span class="error-msg-form">
                                                    {{ $message }}
                                                </span>
                                                @enderror
                                            </div>

                                            <div class="col-12 col-md-3 mb-2">
                                                <label class="form-label">{{ __('basic.branch') }}
                                                    <small>({{ __('basic.required') }})</small></label>
                                                <select
                                                    class="js-example-basic-single select2-no-search select2-hidden-accessible @error('first_branch_id') is-invalid @enderror"
                                                    name="first_branch_id" required>
                                                    @foreach ($branches as $item)
                                                    <option value="{{ $item->id }}">{{ $item->name }}
                                                    </option>
                                                    @endforeach
                                                </select>
                                                <div id="first_branch_id-js-error-valid"></div>

                                                @error('first_branch_id')
                                                <span class="error-msg-form">
                                                    {{ $message }}
                                                </span>
                                                @enderror
                                            </div>
                                        </div>


                                        <hr>

                                        <h6 class="text-gray-400 mb-">{{ __('patientappo.contact information') }}
                                        </h6>

                                        <div class="row mb-2">

                                            <div class="col-12 col-md-4 mb-2">
                                                <label class="form-label">{{ __('patientappo.phone number') }}
                                                    <small>({{ __('basic.required') }})</small></label>
                                                <input id="int-miphone" name="phone_number" type="tel"
                                                    class="form-control @error('phone_number') is-invalid @enderror"
                                                    required value="{{ old('phone_number') }}">

                                                <div id="phonenumber-js-error-valid"></div>

                                                @if ($errors->has('phone_number'))
                                                <span class="error-msg-form">
                                                    {{ $errors->first('phone_number') }}
                                                </span>
                                                @else
                                                <div class="form-text text-gray-200">We'll never share your email
                                                    with anyone else.
                                                </div>
                                                @endif
                                            </div>

                                            <div class="col-12 col-md-4 mb-2">
                                                <label class="form-label">{{ __('patientappo.second phone number')
                                                    }}
                                                    <small>({{ __('basic.optional') }})</small></label>
                                                <input id="int-miphone2" name="sec_phone_number" type="tel"
                                                    class="form-control @error('sec_phone_number') is-invalid @enderror"
                                                    value="{{ old('sec_phone_number') }}">

                                                <div id="secphonenumber-js-error-valid"></div>

                                                @error('sec_phone_number')
                                                <span class="error-msg-form">
                                                    {{ $message }}
                                                </span>
                                                @enderror
                                            </div>

                                            <div class="col-12 col-md-4 mb-2">
                                                <label class="form-label">{{ __('basic.note') }}<small>
                                                        ({{ __('basic.optional') }})</small></label>
                                                <input name="trv_note" type="text"
                                                    class="form-control @error('trv_note') is-invalid @enderror"
                                                    placeholder="Write your note for traveler"
                                                    value="{{ old('trv_note') }}">

                                                @error('trv_note')
                                                <span class="error-msg-form">
                                                    {{ $message }}
                                                </span>
                                                @enderror

                                            </div>

                                        </div>

                                        <div class="d-flex justify-content-between p-4 pb-0">
                                            <input type="button" name="{{ __('basic.previous') }}"
                                                class="previous-form-steps btn btn-secondary action-button-previous me-3"
                                                value="{{ __('basic.previous') }}" />
                                            <input type="button" name="next" data-id="new"
                                                class="next-form-steps search-select-btn btn btn-primary action-button-next"
                                                value="{{ __('basic.continue') }}" />
                                        </div>
                                    </div>
                                </div>

                            </div>

                        </div>

                    </div>


                    <!-- slide 3 appointment info -->

                    <div class="cont_tap px-2" id="about">

                        <div class="d-flex justify-content-around align-items-center flex-wrap mt-4">

                            <div class="d-flex mb-4 align-items-center me-2 mb-2">
                                <img id="avatar_final_info" class="rounded-circle avatar-m me-3"
                                    src="{{ URL::asset('img/dashboard/avatars/default-pp.png') }}">
                                <div class="">
                                    <p class="mb-0 text-xs text-gray-300" id="type_reciver_final_info">
                                        {{ __('basic.patient') }}</p>
                                    <h5 id="name_final_info" class="mb-1 fw-bold text-gray-600">
                                        {{ __('basic.not selected') }}
                                    </h5>
                                    <p id="number_final_info" class="mb-0 text-xs text-gray-400">
                                        {{ __('basic.not selected') }}</p>
                                </div>
                            </div>

                            <div class="me-2">
                                <h6 class="text-gray-300 text-xs mb-1">{{ __('basic.branch') }}</h6>
                                <p id="branch_final_info" class="text-gray-600 text-s fw-bold">
                                    {{ __('basic.not selected') }}</p>
                            </div>

                            <div class="me-2">
                                <h6 class="text-gray-300 text-xs mb-1">{{ __('basic.address') }}</h6>
                                <p id="addre_final_info" class="text-gray-600 text-s fw-bold">
                                    {{ __('basic.not selected') }}</p>
                            </div>
                        </div>

                        <hr>

                        <div class="px-lg-5 mt-4">

                            <div class="d-flex justify-content-between align-items-center px-lg-5 mb-3">
                                <div class="me-2">
                                    <i class="fas fa-hotel me-2 text-gray-400"></i>
                                    <span id="hotel_final_info">
                                        {{ __('basic.not selected') }}
                                    </span>
                                </div>
                                <div id="hotel_price_final_info" class="text-center">
                                    {{ __('basic.not selected') }}
                                </div>
                            </div>

                            <div class="d-flex justify-content-between align-items-center px-lg-5 mb-3">
                                <div class="me-2">
                                    <i class="fas fa-box-open me-2 text-gray-400"></i>
                                    <span id="package_final_info">
                                        {{ __('basic.package') }}
                                    </span>
                                </div>
                                <div id="package_price_final_info" class="text-center">
                                    {{ __('basic.not selected') }}
                                </div>
                            </div>

                            <div class="d-flex justify-content-between align-items-center px-lg-5 mb-3">
                                <div class="me-2">
                                    <i class="fas fa-bus me-2 text-gray-400"></i>
                                    <span id="bus_from_final_info">
                                        {{ __('basic.not selected') }}
                                    </span>
                                </div>
                                <div id="bus_from_price_final_info" class="text-center">
                                    {{ __('basic.not selected') }}
                                </div>
                            </div>

                            <div class="d-flex justify-content-between align-items-center px-lg-5 mb-3">
                                <div class="me-2">
                                    <i class="fas fa-bus me-2 text-gray-400"></i>
                                    <span id="bus_to_final_info">
                                        {{ __('basic.not selected') }}
                                    </span>
                                </div>
                                <div id="bus_to_price_final_info" class="text-center">
                                    {{ __('basic.not selected') }}
                                </div>
                            </div>

                            <div class="d-flex justify-content-between align-items-center px-lg-5 mb-3">
                                <div class="me-2">
                                    <i class="fas fa-car me-2 text-gray-400"></i>
                                    <span id="limo_final_info">
                                        {{ __('basic.limousine') }}
                                    </span>
                                </div>
                                <div id="limo_price_final_info" class="text-center">
                                    {{ __('basic.not selected') }}
                                </div>
                            </div>

                            <div class="d-flex justify-content-between align-items-center px-lg-5 mb-3">
                                <div class="me-2">
                                    <i class="fas fa-plane me-2 text-gray-400"></i>
                                    <span id="airline_from_final_info">
                                        {{ __('basic.not selected') }}
                                    </span>
                                </div>
                                <div id="airline_from_price_final_info" class="text-center">
                                    {{ __('basic.not selected') }}
                                </div>
                            </div>

                            <div class="d-flex justify-content-between align-items-center px-lg-5 mb-3">
                                <div class="me-2">
                                    <i class="fas fa-plane me-2 text-gray-400"></i>
                                    <span id="airline_to_final_info">
                                        {{ __('basic.not selected') }}
                                    </span>
                                </div>
                                <div id="airline_to_price_final_info" class="text-center">
                                    {{ __('basic.not selected') }}
                                </div>
                            </div>

                            <div class="d-flex justify-content-between align-items-center px-lg-5 mb-3">
                                <div class="me-2">
                                    <i class="fas fa-passport me-2 text-gray-400"></i>
                                    <span id="visa_final_info">
                                        {{ __('basic.visa') }}
                                    </span>
                                </div>
                                <div id="visa_price_final_info" class="text-center">
                                    {{ __('basic.not selected') }}
                                </div>
                            </div>

                            <div class="d-flex justify-content-between align-items-center px-lg-5 mb-3">
                                <div class="me-2">
                                    <i class="fas fa-shuttle-van me-2 text-gray-400"></i>
                                    <span id="trip_final_info">
                                        {{ __('basic.trip') }}
                                    </span>
                                </div>
                                <div id="trip_price_final_info" class="text-center">
                                    {{ __('basic.not selected') }}
                                </div>
                            </div>

                            <div class="d-flex justify-content-between align-items-center px-lg-5 mb-3">
                                <div class="me-2">
                                    <i class="fas fa-tag me-2 text-gray-400"></i> {{ __('basic.coupon') }}
                                </div>

                                <div class="text-center">
                                    <div class="input-group">
                                        <input type="text" name="coupon_input" class="form-control custom-select"
                                            id="coupon_input" style="border-radius: 5px 0px 0px 5px !important;"
                                            placeholder="Discount code here ..">

                                        <input type="hidden" name="coupon_id" id="coupon_id">

                                        <div class="input-group-append">
                                            <button id="coupon-buttn" class="btn btn-outline-secondary"
                                                class="form-control " type="button">{{ __('basic.send') }}</button>
                                        </div>
                                    </div>

                                    @error('coupon_id')
                                    <span class="error-msg-form">
                                        {{ $message }}
                                    </span>
                                    @enderror

                                    <div id="search-result-input"></div>

                                </div>
                            </div>

                            <div class="d-flex justify-content-between align-items-center px-lg-5 mb-3">
                                <div class="me-2">
                                    <i class="fas fa-tag me-2 text-gray-400"></i> {{ __('basic.discount') }}
                                </div>
                                <div>
                                    <input id="discount" name="discount" type="number" style="width: 245px !important;"
                                        class="form-control @error('discount') is-invalid @enderror"
                                        placeholder="Write your discount amount" value="{{ old('discount') }}">
                                    @error('discount')
                                    <span class="error-msg-form">
                                        {{ $message }}
                                    </span>
                                    @enderror
                                </div>
                            </div>

                            <div class="d-flex justify-content-between align-items-center px-lg-5 mb-3 d-none"
                                id="discount_amount_div">
                                <div class="me-2">
                                    <i class="fas fa-percent me-2 text-gray-400"></i> {{ __('basic.discount') }}
                                </div>
                                <div id="discount_amount_place" class="text-center text-decoration-line-through">
                                    {{ __('basic.not selected') }}
                                </div>
                            </div>

                            <div class="d-flex justify-content-between align-items-center px-lg-5 mb-4">
                                <div class="me-2 fw-bold">
                                    <i class="fas fa-dollar-sign me-2"></i> {{ __('basic.total price') }}
                                </div>
                                <input type="hidden" id="final_price_show" name="final_price_show">
                                <div id="price_total_final_info" class="fw-bold text-center">
                                    {{ __('basic.not selected') }}
                                </div>
                            </div>

                            <div id="wallet_total_final_info" style="display: none">
                                <hr>
                                <div class="d-flex justify-content-between align-items-center px-lg-5 mb-4">
                                    <div class="me-2 fw-bold">
                                        <i class="fas fa-wallet me-2"></i> {{ __('basic.broker wallet') }}
                                    </div>
                                    <div id="wallet_total_final_info_current_wallet" class="fw-bold text-center">
                                        {{ __('basic.not selected') }}
                                    </div>
                                </div>
                                <div class="d-flex justify-content-between align-items-center px-lg-5 mb-4">
                                    <div class="me-2 fw-bold">
                                        <i class="fas fa-wallet me-2"></i>
                                        {{ __('basic.broker wallet after withdrawal') }}
                                    </div>
                                    <div id="wallet_total_final_info_after_withd_wallet" class="fw-bold text-center">
                                        {{ __('basic.not selected') }}
                                    </div>
                                </div>

                            </div>

                            <hr>

                            {{-- Issue invoices --}}
                            <div class="d-flex justify-content-between align-items-center px-lg-5 mb-4">
                                <div class="me-2 fw-bold">
                                    <i class="fas fa-wallet me-2"></i>
                                    {{ __('basic.type of withdraw') }}
                                    <span class="text-gray-400 clickable-item-pointer ms-1" href="#"
                                        data-bs-toggle="tooltip"
                                        data-bs-title="{{ __('basic.type of withdraw tip') }}"><i
                                            class="fas fa-info-circle"></i></span>
                                </div>

                                <div>
                                    <select
                                        class="js-example-basic-single select2-no-search select2-hidden-accessible @error('invoice_status') is-invalid @enderror"
                                        id="invoice_status" name="invoice_status" required>
                                        <option selected value="1">{{ __('basic.invoices for client and supplier')
                                            }}</option>
                                        <option value="2">{{ __('basic.client invoices') }}</option>
                                        <option value="3">{{ __('basic.no invoices') }}</option>
                                    </select>
                                    <div id="invoice_status-js-error-valid"></div>

                                    @error('invoice_status')
                                    <span class="error-msg-form">
                                        {{ $message }}
                                    </span>
                                    @enderror
                                </div>

                            </div>

                            {{-- Tax --}}
                            <div class="d-flex justify-content-between align-items-center px-lg-5 mb-4">
                                <div class="me-2 fw-bold">
                                    <i class="fas fa-dollar-sign me-2"></i>
                                    {{ __('basic.tax') }}
                                </div>

                                <div>
                                    <select
                                        class="js-example-basic-single select2-no-search select2-hidden-accessible @error('tax_id') is-invalid @enderror"
                                        id="tax_id" name="tax_id">
                                        <option selected>
                                        </option>
                                        @foreach ($taxes as $item)
                                        <option value="{{ $item->id }}">{{ $item->name }}</option>
                                        @endforeach
                                    </select>
                                    <div id="tax_id-js-error-valid"></div>

                                    @error('tax_id')
                                    <span class="error-msg-form">
                                        {{ $message }}
                                    </span>
                                    @enderror
                                </div>

                            </div>

                            {{-- Currency --}}
                            <div class="d-flex justify-content-between align-items-center px-lg-5 mb-4">
                                <div class="me-2 fw-bold">
                                    <i class="fas fa-dollar-sign me-2"></i>
                                    {{ __('basic.currency') }}
                                </div>

                                <div>
                                    <select
                                        class="js-example-basic-single select2-no-search select2-hidden-accessible @error('currency_id') is-invalid @enderror"
                                        id="currency_id" name="currency_id" required>
                                        @foreach ($currencies as $item)
                                        <option value="{{ $item->id }}">{{ $item->code }}</option>
                                        @endforeach

                                    </select>
                                    <div id="currency_id-js-error-valid"></div>

                                    @error('currency_id')
                                    <span class="error-msg-form">
                                        {{ $message }}
                                    </span>
                                    @enderror
                                </div>

                            </div>


                            @if(Auth::user()->branch_id == 0)
                            <hr>

                            <div class="d-flex justify-content-between align-items-center px-lg-5 mb-4">
                                <div class="me-2 fw-bold">
                                    <i class="fas fa-map-marker-alt me-2"></i>
                                    {{ __('basic.which branch this booking belong to') }}
                                    <span class="text-gray-400 clickable-item-pointer ms-1" href="#"
                                        data-bs-toggle="tooltip"
                                        data-bs-title="{{ __('basic.which branch this booking belong to msg') }}"><i
                                            class="fas fa-info-circle"></i></span>
                                </div>

                                <div>
                                    <select
                                        class="js-example-basic-single select2-no-search select2-hidden-accessible @error('belong_booking_branch_id') is-invalid @enderror"
                                        name="belong_booking_branch_id" required>
                                        @foreach ($branches as $item)
                                        <option value="{{ $item->id }}">{{ $item->name }}
                                        </option>
                                        @endforeach
                                    </select>
                                    <div id="belong_booking_branch_id-js-error-valid"></div>

                                    @error('belong_booking_branch_id')
                                    <span class="error-msg-form">
                                        {{ $message }}
                                    </span>
                                    @enderror
                                </div>

                            </div>
                            @endif


                            {{-- send sms and email --}}
                            <hr>

                            <div class="d-flex justify-content-between align-items-center px-lg-5 mb-1">
                                <div class="me-2">
                                    <i class="fas fa-mobile-alt me-2 text-gray-400"></i> {{ __('basic.send sms') }}
                                </div>
                                <div>
                                    <div class="switch-checkbox">
                                        <input class="done_btn" id="send_sms_status" name="send_sms_status"
                                            type="checkbox" value="1" id="transp_check"><label for="send_sms_status"
                                            class="ms-auto me-auto">Toggle</label>
                                    </div>
                                    @error('send_sms_status')
                                    <span class="error-msg-form">
                                        {{ $message }}
                                    </span>
                                    @enderror
                                </div>
                            </div>

                            <div id="send_sms_cont" style="display: none">
                                <div class="d-flex justify-content-between align-items-center px-lg-5 mb-3">
                                    <div class="me-2">
                                        <i class="fas fa-mobile-alt me-2 text-gray-400"></i> {{ __('basic.phone number')
                                        }}
                                    </div>
                                    <div>
                                        <input id="send_sms" name="send_sms" type="number"
                                            style="width: 245px !important;"
                                            class="form-control @error('send_phone') is-invalid @enderror"
                                            placeholder="Write the phone number that you want to send sms"
                                            value="{{ old('send_sms') }}">
                                        @error('send_sms')
                                        <span class="error-msg-form">
                                            {{ $message }}
                                        </span>
                                        @enderror
                                    </div>
                                </div>
                            </div>

                            <div class="d-flex justify-content-between align-items-center px-lg-5 mb-1">
                                <div class="me-2">
                                    <i class="fas fa-envelope-open-text me-2 text-gray-400"></i>
                                    {{ __('basic.send email') }}
                                </div>
                                <div>
                                    <div class="switch-checkbox">
                                        <input class="done_btn" id="send_email_status" name="send_email_status"
                                            type="checkbox" value="1" id="transp_check"><label for="send_email_status"
                                            class="ms-auto me-auto">Toggle</label>
                                    </div>
                                    @error('send_email_status')
                                    <span class="error-msg-form">
                                        {{ $message }}
                                    </span>
                                    @enderror
                                </div>
                            </div>

                            <div id="send_email_cont" style="display: none">
                                <div class="d-flex justify-content-between align-items-center px-lg-5 mb-1">
                                    <div class="me-2">
                                        <i class="fas fa-envelope-open-text me-2 text-gray-400"></i> {{
                                        __('basic.email') }}
                                    </div>
                                    <div>
                                        <input id="send_email" name="send_email" type="email"
                                            style="width: 245px !important;"
                                            class="form-control @error('send_email') is-invalid @enderror"
                                            placeholder="Write the email that you want to send email"
                                            value="{{ old('send_email') }}">
                                        @error('send_email')
                                        <span class="error-msg-form">
                                            {{ $message }}
                                        </span>
                                        @enderror
                                    </div>
                                </div>
                            </div>

                            {{-------- End send sms and email --------}}

                            <div class="row mb-2 px-lg-5">
                                <div class="mb-3">
                                    <label class="form-label">{{ __('basic.note') }}
                                        <small>({{ __('basic.optional') }})</small></label>
                                    <textarea name="appointment_note" class="form-control"
                                        placeholder="Write here your notes .." rows="4" spellcheck="false"></textarea>
                                </div>
                            </div>

                            @error('appointment_note')
                            <span class="error-msg-form">
                                {{ $message }}
                            </span>
                            @enderror

                            <div class="row align-items-center main-color-bg text-white px-lg-5 b-r-s-cont px-4 py-4">
                                <div class="col-12 col-md text-blue-300 mb-2 mb-md-0">
                                    {{ __('patientappo.come before 15 msg') }}
                                </div>
                                <div class="col-12 col-md text-center">
                                    <h6 class="text-xs mb-1 text-blue-300">{{ __('basic.appointment time') }}</h6>
                                    <p id="date_final_info" class="text-l fs-4 fw-bold mb-0">
                                        {{ __('basic.not selected') }}</p>
                                    <p id="time_final_info" class="text-s text-blue-200">
                                        {{ __('basic.not selected') }}</p>
                                </div>

                            </div>

                        </div>

                        <div class="d-flex justify-content-between p-4">
                            <input type="button" name="previous"
                                class="previous-form-steps btn btn-secondary action-button-previous me-3"
                                value="{{ __('basic.previous') }}" />
                            <div>
                                <div class="text-red" id="form_submit_btn_cont"></div>
                                <input id="form_submit_btn" name="next" class="btn btn-primary"
                                    value="{{ __('basic.send') }}" />
                            </div>

                        </div>
                    </div>

                    <!-- slide 4 -->

                    <div class="cont_tap" id="sending">
                        <div class="d-flex justify-content-center p2">
                            <img src="{{ URL::asset('img/dashboard/system/loading-dash.svg') }}" style="width: 195px;"
                                alt="Loading" />
                        </div>
                    </div>

                    @endunlessrole

                </form>
            </div>

        </div>

    </div>
</div>






<!-- get all related info appointment -->
<div class="modal fade" id="add_new_package_modal" tabindex="-1" role="dialog" aria-labelledby="all_info_appointment"
    aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
        <div class="modal-content b-r-s-cont border-0">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel"><i class="fas fa-route me-1"></i>
                    {{ __('basic.packages') }}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>

            <!-- Modal content -->
            <div class="modal-body px-3 py-3 pt-1 pb-4">

                <div class="multi-setps-form-calander col-12">

                    <form id="myform_2" class="myform" id="add_new_package_modal_form">
                        @csrf

                        <!-- progressbar -->
                        <ul class="ps-0 progressbar_5icons progressbar" id="progressbar_patient">
                            <li class="active">
                                <a>
                                    <!-- in case we want to use prog selector href="#clinics" -->
                                    <div class="icon-circle checked d-flex align-items-center justify-content-center">
                                        <i class="fas fa-route"></i>
                                    </div>
                                    <span>{{ __('basic.itinerary') }}</span>
                                </a>
                            </li>

                            <li>
                                <a>
                                    <div class="icon-circle d-flex align-items-center justify-content-center">
                                        <i class="fas fa-dollar-sign"></i>
                                    </div>
                                    <span>{{ __('basic.prices') }}</span>
                                </a>
                            </li>

                            <li>
                                <a>
                                    <div class="icon-circle d-flex align-items-center justify-content-center">
                                        <i class="fas fa-user"></i>
                                    </div>
                                    <span>{{ __('basic.traveler') }}</span>
                                </a>
                            </li>

                            <li>
                                <a>
                                    <div class="icon-circle d-flex align-items-center justify-content-center">
                                        <i class="fas fa-capsules"></i>
                                    </div>
                                    <span>{{ __('basic.send') }}</span>
                                </a>
                            </li>
                        </ul>

                        <!-- content -->

                        <div class="cont_tap_patient" id="all_info_basic">

                            <div id="basic_inputs_package_modal"></div>
                            <div class="row">
                                <div class="col-12">
                                    <p class="text-gray-500 mb-2">{{ __("basic.discover your package points") }}</p>

                                    <div>
                                        <ul class="list-group patient-timeline" id="package_modal_iti">

                                        </ul>
                                    </div>

                                </div>
                            </div>

                            <div class="d-flex justify-content-between mt-3 align-items-center">
                                <div></div>
                                <div>
                                    <input type="button" name="next"
                                        class="next-form-steps_patient btn btn-primary action-button-next"
                                        value="Continue" />
                                </div>
                            </div>

                        </div>

                        <div class="cont_tap_patient px-2 px-md-3" id="all_info_examination">

                            <div class="row">

                                <div class="col-12" id="package_modal_prices">

                                </div>

                                <div class="d-flex justify-content-center mb-2">
                                    <div class="me-3 px-4 text-center align-self-center">
                                        <h6 class="text-gray-300 text-xs mb-1"><i class="fas fa-dollar-sign"></i> {{
                                            __("basic.total buy per person") }}
                                        </h6>
                                        <p id="total_buy_package_modal" class="text-gray-600 fs-6 fw-bold mb-0">0</p>
                                    </div>
                                    <div class="main-color-bg text-center b-r-s-cont py-3 px-4 align-self-center">
                                        <h6 class="text-blue-300 text-xs mb-0"><i class="fas fa-dollar-sign"></i> {{
                                            __("basic.total sell per person") }}
                                        </h6>
                                        <p id="total_sell_package_modal" class="text-white fs-4 fw-bold mb-0">0</p>
                                    </div>
                                    <div class="me-3 px-4 text-center align-self-center">
                                        <h6 class="text-gray-300 text-xs mb-1"><i class="fas fa-dollar-sign"></i> {{
                                            __("basic.total buy") }} for <span id="qty_buy_package_modal_all_pp"></span>
                                            pp
                                        </h6>
                                        <p id="total_buy_package_modal_all_pp" class="text-gray-600 fs-6 fw-bold mb-0">0
                                        </p>
                                    </div>
                                    <div class="main-color-bg text-center b-r-s-cont py-3 px-4 align-self-center">
                                        <h6 class="text-blue-300 text-xs mb-0"><i class="fas fa-dollar-sign"></i> {{
                                            __("basic.total sell") }} <span id="qty_sell_package_modal_all_pp"></span>
                                            pp
                                        </h6>
                                        <p id="total_sell_package_modal_all_pp" class="text-white fs-4 fw-bold mb-0">0
                                        </p>
                                    </div>
                                </div>
                            </div>

                            <div class="d-flex justify-content-between mt-3 align-items-center">
                                <input type="button" name="previous"
                                    class="previous-form-steps_patient btn btn-secondary action-button-previous"
                                    value="Previous" />
                                <div>
                                    <input type="button" name="next"
                                        class="next-form-steps_patient btn btn-primary action-button-next"
                                        value="Continue" />
                                </div>
                            </div>
                        </div>

                        <div class="cont_tap_patient" id="all_info_treatment">

                            <div class="row mb-2 justify-content-center">
                                <div class="col-6">
                                    <div class="row">
                                        <div class="col-12 mb-2">
                                            <label class="form-label">{{ __("basic.traveler name") }}
                                                <small>(required)</small></label>
                                            <input class="package_modal_traveler_name form-control" type="text"
                                                placeholder="Traveler Name ..">
                                        </div>
                                        <div class="col-12 mb-2">
                                            <label class="form-label">{{ __("basic.traveler phone") }}
                                                <small>(required)</small></label>
                                            <input class="package_modal_traveler_phone form-control" type="number"
                                                placeholder="Traveler Phone ..">
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="d-flex justify-content-between mt-3 align-items-center">
                                <input type="button" name="previous"
                                    class="previous-form-steps_patient btn btn-secondary action-button-previous"
                                    value="Previous" />
                                <div>
                                    <input type="button" name="next" id="book_package_modal"
                                        class="btn btn-primary action-button-next" value="Continue" />
                                </div>
                            </div>
                        </div>

                        <div class="cont_tap_patient" id="all_info_medicines">

                            <div class="row">

                                <div class="table-responsive">
                                    <table class="table display datatable-modal" id="table-medicine" width="100%"
                                        cellspacing="0">
                                        <thead>
                                            <tr>
                                                <th class="text-xs w-25">{{ __('basic.name') }}</th>
                                                <th class="text-xs text-center">{{ __('basic.start') }}
                                                </th>
                                                <th class="text-xs text-center">{{ __('basic.end') }}</th>
                                                <th class="text-xs text-center">{{ __('basic.status') }}
                                                </th>
                                                <th class="text-xs text-center">{{ __('basic.handle') }}
                                                </th>
                                            </tr>
                                        </thead>
                                        <tbody id="medic-table">
                                            <!-- it is sent by ajax -->
                                        </tbody>
                                    </table>
                                </div>
                            </div>

                            <div class="d-flex justify-content-between mt-3 align-items-center">
                                <input type="button" name="previous"
                                    class="previous-form-steps_patient btn btn-secondary action-button-previous"
                                    value="Previous" />
                                <div>
                                    <input type="button" name="next"
                                        class="next-form-steps_patient btn btn-primary action-button-next"
                                        value="Continue" />
                                </div>
                            </div>
                        </div>

                        <div class="cont_tap_patient" id="all_info_session">

                            <div class="row">
                                <div class="table-responsive">
                                    <table class="table display datatable-modal" id="table-session" width="100%"
                                        cellspacing="0">
                                        <thead>
                                            <tr>
                                                <th class="text-xs">{{ __('basic.name') }}</th>
                                                <th class="text-xs text-center">
                                                    {{ __('patientappo.session status') }}</th>
                                                <th class="text-xs text-center">
                                                    {{ __('patientappo.pay status') }}
                                                </th>
                                                <th class="text-xs text-center">
                                                    {{ __('patientappo.pay Code') }}
                                                </th>
                                                <th class="text-xs text-center">{{ __('basic.handle') }}</th>
                                            </tr>
                                        </thead>
                                        <tbody id="session-table">
                                            <!-- it is sent by ajax -->
                                        </tbody>
                                    </table>
                                </div>
                            </div>

                            <div class="d-flex justify-content-between mt-3 align-items-center">
                                <input type="button" name="previous"
                                    class="previous-form-steps_patient btn btn-secondary action-button-previous"
                                    value="Previous" />
                                <div>
                                </div>
                            </div>
                        </div>

                    </form>
                </div>


            </div>

        </div>
    </div>

</div> <!-- end of all info appointment -->


@endsection

<!-- js insert -->
@section('js')

<!-- datapicker date and time -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.13/flatpickr.min.js"
    integrity="sha512-K/oyQtMXpxI4+K0W7H25UopjM8pzq0yrVdFdG21Fh5dBe91I40pDd9A4lzNlHPHBIP2cwZuoxaUSX0GJSObvGA=="
    crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script>
    //-------- datepicker time --------
        $('.datepicker_time').flatpickr({
            enableTime: true,
            dateFormat: "Y-m-d H:i",
        });

</script>

<!-- select 2 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.1.0-rc.0/js/select2.min.js"
    integrity="sha512-4MvcHwcbqXKUHB6Lx3Zb5CEAVoE9u84qN+ZSMM6s7z8IeJriExrV3ND5zRze9mxNlABJ6k864P/Vl8m0Sd3DtQ=="
    crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
    $(document).ready(function() {
            $('.js-example-basic-single').select2();
            //hide search
            $('.select2-no-search').select2({
                minimumResultsForSearch: -1
            });
        });
</script>

<!-- jquery ui datepicker -->
<script type="text/javascript"
    src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>
<script>
    $(function() {
            $('.hasdatetimepicker').datepicker({
                todayHighlight: true,
                format: "yyyy-mm-dd",
            }).on('change', function() {
                $('.datepicker').hide();
            });
        });
</script>

<!-- validate jquery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.5/jquery.validate.min.js"
    integrity="sha512-rstIgDs0xPgmG6RX1Aba4KV5cWJbAMcvRCVmglpam9SoHZiUCyQVDdH2LPlxoHtrv17XWblE/V/PP+Tr04hbtA=="
    crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
    //Rules for the Validator plugin
        var $validator = $('#myform').validate({

            //ignore: [], //to enable vlidation for hidden inputs
            //ignore: ['#calander_date_daya'],
            onkeyup: false,
            //ignore: ":hidden:not(#calander_date_start)", //select for enable hidden input

            rules: {
                first_name: {
                    minlength: 3,
                    maxlength: 30,
                },
                second_name: {
                    minlength: 3,
                    maxlength: 60,
                },
                mother_name: {
                    minlength: 4,
                    maxlength: 60,
                },
                email: {
                    email: true,
                },
                password: {
                    minlength: 7,
                    maxlength: 100,
                },
                password_confirmation: {
                    minlength: 7,
                    maxlength: 100,
                    equalTo: '#password',
                },
                appointment_note: {
                    maxlength: 255,
                },
            },
            messages: {
                email: {
                    required: "We need your email address to contact you",
                    email: "Your email address must be in the format of name@domain.com"
                },
                password_confirmation: {
                    equalTo: "Password does not match",
                }
            },
            //for inserting erros for some inputs that makes posation problem such as selector 2 and bt datapicker
            errorPlacement: function(error, element) {
                switch (element.attr("name")) {
                    case 'role':
                        error.insertAfter($("#role-js-error-valid"));
                        break;
                    case 'first_branch_id':
                        error.insertAfter($("#first_branch_id-js-error-valid"));
                        break;
                    case 'gendar':
                        error.insertAfter($("#gendar-js-error-valid"));
                        break;
                    case 'birthday':
                        error.insertAfter($("#birthday-js-error-valid"));
                        break;
                    case 'country_id':
                        error.insertAfter($("#country-js-error-valid"));
                        break;
                    case 'city_id':
                        error.insertAfter($("#city-js-error-valid"));
                        break;
                    case 'region_id':
                        error.insertAfter($("#region-js-error-valid"));
                        break;
                    case 'started_work':
                        error.insertAfter($("#startedwork-js-error-valid"));
                        break;
                    case 'phone_number':
                        error.insertAfter($("#phonenumber-js-error-valid"));
                        break;
                    case 'sec_phone_number':
                        error.insertAfter($("#secphonenumber-js-error-valid"));
                        break;
                    case 'from_recourse_id':
                        error.insertAfter($("#from-recourse-js-error-valid"));
                        break;
                    case 'search-eng':
                        error.insertAfter($("#search-eng-js-error-valid"));
                        break;

                    default:
                        error.insertAfter(element);
                }


            },
        });
</script>
<script>
    //for showing loading icon until the ajax is done
        $(document).ajaxStart(function() {
            $("#waiting, #waiting2").show();
        });

        $(document).ajaxStop(function() {
            $("#waiting, #waiting2").hide();
        });

        //insert passwrod depends on the username
        $('input[name="first_name"]').keyup(function(e) {
            e.preventDefault();

            first_name = $(this).val();
            new_password = 'tripo' + first_name;
            $('input[name="password"]').val(new_password);
            $('input[name="password_confirmation"]').val(new_password);
        })

        fetchCity();

        //for country and cities ajax inputs
        function fetchCity(countryID = $('select[name="country_id"]').val()) {

            var url = "{{ route('sett.createcityajax', ':id') }}";
            url = url.replace(':id', countryID);

            if (countryID) {
                $.ajax({
                    url: url,
                    type: "GET",
                    dataType: "json",
                    success: function(data) {
                        $('select[name="city_id"]').empty();
                        $.each(data, function(key, value) {
                            $('select[name="city_id"]').append('<option value="' +
                                value.id + '">' + value.name + '</option>');
                        });
                        fetchRegion();
                    }
                });
            } else {
                $('select[name="city_id"]').empty();
            }
        }

        $('select[name="country_id"]').on('change', function(e) {
            var country_id = $(this).val();
            fetchCity(country_id)
        });

        fetchRegion();

        //for country and cities ajax inputs
        function fetchRegion(cityID = $('select[name="city_id"]').val()) {

            var url = "{{ route('sett.pat_createcityajax', ':id') }}";
            url = url.replace(':id', cityID);

            console.log(2121221);
            if (cityID) {
                $.ajax({
                    url: url,
                    type: "GET",
                    dataType: "json",
                    success: function(data) {
                        console.log(data);

                        if (data.length > 0) {
                            console.log(55555);

                            $('select[name="region_id"]').empty();
                            $.each(data, function(key, value) {
                                $('select[name="region_id"]').append('<option value="' +
                                    value.id + '">' + value.name + '</option>');
                            });
                        } else {
                            console.log('www');
                            $('select[name="region_id"]').html('<option value="1">{{ __("basic.not selected") }}</option>');
                        }
                    }
                });
            } else {
                console.log('asdasd');
                $('select[name="region_id"]').html('<option value="1">{{ __("basic.not selected") }}</option>');
            }
        }

        $('select[name="city_id"]').on('change', function(e) {
            var city_id = $(this).val();
            fetchRegion(city_id)
        });
</script>


<script>
    //--------------------- transportation ajax -------------------

    //select fron the btn from outside
    $(document).on('click', '.btn_bus_select', function() {
        var id = $(this).data('id');
        var price = $(this).data('price');

        $('.bus_trip_btn_sub').attr('data-id', id);
        $('.bus_trip_btn_sub').attr('data-price', price);

        var url = "{{ route('sett.bus_ava_ajax', [':id']) }}";
        url = url.replace(':id', id);
        $.ajax({
            url: url,
            type: "GET",
            success: function(data) {
                $("#bus_chart_cont").html(data);
                $('#bus_chart').modal('show');
            }
        });

    });

    //select on the chart modal
    $(document).on('click', '.bus_trip_btn_sub', function() {
        var id = $(this).attr('data-id');
        var bus_btn_select = "#bus_chart_btn_" + id;

        var bus_from_input = $("#bus_from_id").val();
        var bus_to_input = $("#bus_to_id").val();

        var qty_input = $("input[name='seat_num']:checked").length;

        var price = $(this).data('price');

        // $("input[name='seat_num']:checked").each(function (checkedValue, value) {
        //     var seat_number_array = $(this).val();
        //     $("input[name='bus_to_seats']").val(JSON.stringify(seat_number_array));

        // });

        // var value = $('#input_hidden_field').val(); //retrieve array
        // value = JSON.parse(value);

        //for select more than a seat

        if(qty_input == 0){
            $('#bus_chart_cont_error').html("You Should Chose A Seat");

            return false;
        }else{
            $('#bus_chart_cont_error').html("");
        }


        if (bus_from_input == "false" && bus_from_input == "false") {

                $(bus_btn_select).addClass('btn-success');
                $(bus_btn_select).html('<i class="fas fa-check-circle"></i>Selected');

                $('input[name="bus_from_id"]').val(id);
                $('input[name="bus_from_id"]').attr('data-price' , price);
                $('input[name="bus_from_qty"]').val(qty_input);

                //for seats numbers
                var $checkedagreeChecker = $("input[name='seat_num']:checked");
                var joinedValues = $checkedagreeChecker.map(function(){return this.value}).get().join(",");
                $("input[name='bus_from_seats']").val($checkedagreeChecker.length > 0 ? joinedValues : -1 );

                var bus_seats_from = $('input[name="bus_from_seats"]').val();

                $("#bus_ticket_info_cont").html(
                    "<p class='text-gray-500'><i class='fas fa-check-circle'></i> Singl Ticket for: " + qty_input + " seats in number " + bus_seats_from + "</p>"
                );

                $('.modal').modal('hide');

        } else if (bus_to_input == "false" && bus_from_input !== "false") {
                $(bus_btn_select).addClass('btn-success');
                $(bus_btn_select).html('<i class="fas fa-check-circle"></i>Selected');

                $('input[name="bus_to_id"]').val(id);
                $('input[name="bus_to_id"]').attr('data-price' , price);
                $('input[name="bus_to_qty"]').val(qty_input);

                //for seats numbers
                var $checkedagreeChecker = $("input[name='seat_num']:checked");
                var joinedValues = $checkedagreeChecker.map(function(){return this.value}).get().join(",");
                $("input[name='bus_to_seats']").val($checkedagreeChecker.length > 0 ? joinedValues : -1 );

                var bus_seats_to = $('input[name="bus_to_seats"]').val();

                $("#bus_ticket_info_cont").append(
                    "<p class='text-gray-500'><i class='fas fa-check-circle'></i> Round Ticket for: " + qty_input + " seats in number " + bus_seats_to + "</p>"
                );

                $('.modal').modal('hide');

        } else {
            $(".btn_bus_select").removeClass('btn-success');
            $(".btn_bus_select").html('Select');;

            $('input[name="bus_from_id"]').removeAttr('data-price');
            $('input[name="bus_to_id"]').removeAttr('data-price');

            $("#bus_ticket_info_cont").html("");

            $('input[name="bus_from_id"]').val("false");
            $('input[name="bus_from_qty"]').val("false");
            $('input[name="bus_from_seats"]').val("false");
            $('input[name="bus_to_id"]').val("false");
            $('input[name="bus_to_qty').val("false");
            $('input[name="bus_to_seats"]').val("false");
            $('#bus_chart_cont_error').html("Click Here Again");
        }

    });

    $(document).on('click', '.bus_booking_click', function() {

        var id = $(this).data('id');
        var qty_input_id = "#busqty_" + id;

        var qty_input = $(qty_input_id + " option:selected").val();
        var price = $(this).data('price');

        console.log(qty_input);
        var bus_from_input = $("#bus_from_id").val();
        var bus_to_input = $("#bus_to_id").val();

        if (bus_from_input == "false" && bus_from_input == "false") {
            if ($(this).hasClass('done-color')) {
                $(this).removeClass('done-color');
                $(this).addClass('fa-check-circle');
                $(this).removeClass('fa-arrow-right');
                $('input[name="bus_from_id"]').val("false");
                $('input[name="bus_from_qty"]').val("false");
                $('input[name="bus_from_id"]').attr('data-price', 'false');
            } else {
                $(this).addClass('done-color');
                $(this).removeClass('fa-check-circle');
                $(this).addClass('fa-arrow-right');
                $('input[name="bus_from_id"]').val(id);
                $('input[name="bus_from_id"]').attr('data-price' , price);
                $('input[name="bus_from_qty"]').val(qty_input);
            }
        } else if (bus_to_input == "false" && bus_from_input !== "false") {
            if ($(this).hasClass('done-color')) {
                $(this).removeClass('done-color');
                $(this).addClass('fa-check-circle');
                $(this).removeClass('fa-arrow-left');
                $('input[name="bus_to_id"]').val("false");
                $('input[name="bus_to_id"]').attr('data-price' , 'false');
                $('input[name="bus_to_qty"]').val("false");
            } else {
                $(this).addClass('done-color');
                $(this).removeClass('fa-check-circle');
                $(this).addClass('fa-arrow-left');
                $('input[name="bus_to_id"]').val(id);
                $('input[name="bus_to_id"]').attr('data-price' , price);
                $('input[name="bus_to_qty"]').val(qty_input);
            }
        } else {
            $(".bus_booking_click").removeClass('done-color');
            $(".bus_booking_click").removeClass('fa-arrow-right');
            $(".bus_booking_click").removeClass('fa-arrow-left');
            $(".bus_booking_click").addClass('fa-check-circle');
            $('input[name="bus_from_id"]').val("false");
            $('input[name="bus_from_qty"]').val("false");
            $('input[name="bus_to_id"]').val("false");
            $('input[name="bus_to_qty').val("false");
        }

    });





    //change limo radio input
    $("input[name='offer_type_limo_check'").change(function(){

        var type =  $('input[name="offer_type_limo_check"]:checked').val();

        if(type === "offer"){
            $('#limo_offer_cont').show();
            $('#limo_direct_cont').hide();
        }else if(type === "direct"){
            $('#limo_offer_cont').hide();
            $('#limo_direct_cont').show();
        }

    });


    // limo offer book
    $(document).on('click', '#limo_offer_search', function() {


        var limo_offer_id = $('#limo_offer_id option:selected').val();

        var text = $('#limo_offer_id option:selected').data('text');
        var broker = $('#limo_offer_id option:selected').data('broker');
        var broker_id = $('#limo_offer_id option:selected').data('broker_id');

        var start = $('#limo_offer_id option:selected').data('start_date');
        var end = $('#limo_offer_id option:selected').data('end_date');
        var buy = $('#limo_offer_id option:selected').data('buy');
        var sell = $('#limo_offer_id option:selected').data('sell');


        //get days between two dates
        var startDay = new Date(start);
        var endDay = new Date(end);
        var millisBetween = startDay.getTime() - endDay.getTime();
        var days = millisBetween / (1000 * 3600 * 24);
        var hours = Math.floor(millisBetween / (60 * 60 * 1000));

        var days = Math.round(Math.abs(days))


        // rendom nymber and strings
        var rendom_number = (Math.random() + 1).toString(36).substring(4);

        $('#limo_ticket_info_cont').append(

                        '<div class="px-2 pt-2 shadow b-r-l-cont mb-4 position-relative booked_package" id="booked_package_'+ rendom_number +'">' +

                                //remove booking
                                '<div class="d-flex align-items-center justify-content-center position-absolute rounded-circle avatar-xxs cancel-color-btn clickable-item-pointer delete_booking_hotel" style="top: -3px;">' +
                                    '<i class="fas fa-times text-xs"></i>' +
                                '</div>' +

                                //1- offer, 2- direct
                                '<input type="hidden" name="limo_type[]" value="1">' +
                                '<input type="hidden" name="limo_id[]" value="' + limo_offer_id + '">' +
                                '<input type="hidden" name="limo_broker_id[]" value="' + broker_id + '">' +
                                '<input type="hidden" name="limo_from[]" value="' + start + '">' +
                                '<input type="hidden" name="limo_to[]" value="' + end + '">' +
                                '<input type="hidden" name="limo_days[]" value="' + days + '">' +
                                '<input type="hidden" name="limo_hours[]" value="' + hours + '">' +

                                '<input type="hidden" name="limo_adult[]" value="null">' +
                                '<input type="hidden" name="limo_child[]" value="null">' +

                                // top booking bar
                                '<div class="row pt-2 align-items-center px-0 px-md-2">' +

                                        '<div class="row mb-2 text-end">' +

                                            '<div class="col">' +
                                                '<h6 data-bs-toggle="modal" data-bs-target="#new_limo_traveler_'+ rendom_number + '" class="text-gray-400 mb-1 text-s fas-bold clickable-item-pointer"><i class="fas fa-user me-2"></i>{{ __("basic.add traveler name") }}</h6>' +
                                            '</div>' +

                                            // add new traveler
                                            '<div class="modal fade" id="new_limo_traveler_' + rendom_number + '" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">' +
                                            '<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">' +

                                                    '<div class=" modal-content b-r-s-cont border-0">' +
                                                        '<div class="modal-header">' +
                                                            '<h5 class="modal-title" id="exampleModalLabel"><i class="fas fa-dollar-sign me-1"></i> {{ __('basic.new traveler') }}</h5>' +
                                                            '<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>' +
                                                        '</div>' +

                                                        '<div class="modal-body px-5 py-3">' +

                                                            '<div class="row mb-2 text-start">' +

                                                                '<div class="col-12 mb-2">' +
                                                                    '<label class="form-label">{{ __("basic.traveler name") }} <small>(required)</small></label>' +
                                                                    '<input name="limo_traveler_name[]" type="text" class="form-control" placeholder="Traveler Name ..">' +
                                                                '</div>' +
                                                                '<div class="col-12 mb-2">' +
                                                                    '<label class="form-label">{{ __("basic.traveler phone") }} <small>(required)</small></label>' +
                                                                    '<input name="limo_traveler_phone[]" type="number" class="form-control" placeholder="Traveler Phone ..">' +
                                                                '</div>' +
                                                            '</div>' +
                                                        '</div>' +

                                                        '<div class="modal-footer">' +
                                                            '<div class="left-side">' +
                                                                '<button type="button" class="btn btn-default btn-link" data-bs-dismiss="modal">{{__('basic.never mind') }}</button>' +
                                                            '</div>' +
                                                            '<div class="divider"></div>' +
                                                            '<div class="right-side">' +
                                                                '<button data-bs-dismiss="modal" class="btn btn-default btn-link main-color">{{ __("basic.add new") }}</button>' +
                                                            '</div>' +
                                                        '</div>' +
                                                    '</div>' +
                                                '</div>' +
                                            '</div>' +

                                        '</div>' +

                                        '<hr>' +

                                        '<div class="col-12 col-md-4 d-flex mb-2 align-items-center">' +
                                            '<i class="fas fa-car fs-1 me-3"></i>' +
                                            '<div class="text-start"">' +
                                            '<p class="mb-0 text-xs fw-bold text-gray-600 ">' + text + '</p>' +
                                                '<p class="mb-0 text-xs text-gray-300 ">' + days  + '{{ __("basic.days") }} (' + hours + ' {{ __("basic.hours") }})</p>' +
                                                '<p class="mb-0 text-xs text-gray-300 ">BR: ' + broker + '</p>' +
                                            '</div>' +
                                        '</div>' +

                                        '<div class="col mb-2">' +
                                            '<h6 class="text-gray-300 text-xs mb-1"><i class="fas fa-users"></i> {{ __("basic.start") }}</h6>' +
                                            '<p class="text-gray-600 text-s fw-bold">' + start + '</p>' +
                                        '</div>' +

                                        '<div class="col mb-2">' +
                                            '<h6 class="text-gray-300 text-xs mb-1"><i class="fas fa-dollar-sign"></i> {{ __("basic.end") }}</h6>' +
                                            '<p class="text-gray-600 text-s fw-bold final_price_package_text_buy">' + end + '</p>' +
                                        '</div>' +

                                        '<div class="col mb-2">' +
                                            '<h6 class="text-gray-300 text-xs mb-1"><i class="fas fa-dollar-sign"></i> {{ __("basic.buy") }}</h6>' +
                                            '<input name="limo_buy[]" class="text-center form-control border-0 px-0" type="number" value="' + buy + '" style="padding: 0 !important;font-weight: 600;height: 26px !important;"> ' +
                                        '</div>' +

                                        '<div class="col mb-2">' +
                                            '<h6 class="text-gray-300 text-xs mb-1"><i class="fas fa-dollar-sign"></i> {{ __("basic.sell") }}</h6>' +
                                            '<input name="limo_sell[]" class="text-center form-control border-0 px-0 limo_sell_input" type="number" value="' + sell + '" style="padding: 0 !important;font-weight: 600;height: 26px !important;"> ' +
                                        '</div>' +

                                '</div>' +

                        '</div>'

        )

    });


            // limo offer book
    $(document).on('click', '#limo_direct_search', function() {


        var limo_offer_id = $('#vehicle_limo_offer option:selected').val();
        var text = $('#vehicle_limo_offer option:selected').text();

        var broker = $('#broker_limo_offer option:selected').text();
        var broker_id = $('#broker_limo_offer option:selected').val();

        var start = $('#start_limo_offer').val();
        var end = $('#end_limo_offer').val();
        var buy = 0;
        var sell = 0;

        var adult = $('#adult_limo_offer').val();
        var child = $('#children_limo_offer').val();

        //get days between two dates
        var startDay = new Date(start);
        var endDay = new Date(end);
        var millisBetween = startDay.getTime() - endDay.getTime();
        var days = millisBetween / (1000 * 3600 * 24);
        var hours = Math.floor(millisBetween / (60 * 60 * 1000));

        var days = Math.round(Math.abs(days))


        // rendom nymber and strings
        var rendom_number = (Math.random() + 1).toString(36).substring(4);

        $('#limo_ticket_info_cont').append(

                        '<div class="px-2 pt-2 shadow b-r-l-cont mb-4 position-relative booked_package" id="booked_package_'+ rendom_number +'">' +

                                //remove booking
                                '<div class="d-flex align-items-center justify-content-center position-absolute rounded-circle avatar-xxs cancel-color-btn clickable-item-pointer delete_booking_hotel" style="top: -3px;">' +
                                    '<i class="fas fa-times text-xs"></i>' +
                                '</div>' +

                                //1- offer, 2- direct
                                '<input type="hidden" name="limo_type[]" value="2">' +
                                '<input type="hidden" name="limo_id[]" value="' + limo_offer_id + '">' +
                                '<input type="hidden" name="limo_broker_id[]" value="' + broker_id + '">' +
                                '<input type="hidden" name="limo_from[]" value="' + start + '">' +
                                '<input type="hidden" name="limo_to[]" value="' + end + '">' +
                                '<input type="hidden" name="limo_days[]" value="' + days + '">' +
                                '<input type="hidden" name="limo_hours[]" value="' + hours + '">' +

                                '<input type="hidden" name="limo_adult[]" value="' + adult + '">' +
                                '<input type="hidden" name="limo_child[]" value="' + child + '">' +

                                // top booking bar
                                '<div class="row pt-2 align-items-center px-0 px-md-2">' +

                                        '<div class="row mb-2 text-end">' +

                                            '<div class="col">' +
                                                '<h6 data-bs-toggle="modal" data-bs-target="#new_limo_traveler_'+ rendom_number + '" class="text-gray-400 mb-1 text-s fas-bold clickable-item-pointer"><i class="fas fa-user me-2"></i>{{ __("basic.add traveler name") }}</h6>' +
                                            '</div>' +

                                            // add new traveler
                                            '<div class="modal fade" id="new_limo_traveler_' + rendom_number + '" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">' +
                                            '<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">' +

                                                    '<div class=" modal-content b-r-s-cont border-0">' +
                                                        '<div class="modal-header">' +
                                                            '<h5 class="modal-title" id="exampleModalLabel"><i class="fas fa-dollar-sign me-1"></i> {{ __('basic.new traveler') }}</h5>' +
                                                            '<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>' +
                                                        '</div>' +

                                                        '<div class="modal-body px-5 py-3">' +

                                                            '<div class="row mb-2 text-start">' +

                                                                '<div class="col-12 mb-2">' +
                                                                    '<label class="form-label">{{ __("basic.traveler name") }} <small>(required)</small></label>' +
                                                                    '<input name="limo_traveler_name[]" type="text" class="form-control" placeholder="Traveler Name ..">' +
                                                                '</div>' +
                                                                '<div class="col-12 mb-2">' +
                                                                    '<label class="form-label">{{ __("basic.traveler phone") }} <small>(required)</small></label>' +
                                                                    '<input name="limo_traveler_phone[]" type="number" class="form-control" placeholder="Traveler Phone ..">' +
                                                                '</div>' +
                                                            '</div>' +
                                                        '</div>' +

                                                        '<div class="modal-footer">' +
                                                            '<div class="left-side">' +
                                                                '<button type="button" class="btn btn-default btn-link" data-bs-dismiss="modal">{{__('basic.never mind') }}</button>' +
                                                            '</div>' +
                                                            '<div class="divider"></div>' +
                                                            '<div class="right-side">' +
                                                                '<button data-bs-dismiss="modal" class="btn btn-default btn-link main-color">{{ __("basic.add new") }}</button>' +
                                                            '</div>' +
                                                        '</div>' +
                                                    '</div>' +
                                                '</div>' +
                                            '</div>' +

                                        '</div>' +

                                        '<hr>' +

                                        '<div class="col-12 col-md-4 d-flex mb-2 align-items-center">' +
                                            '<i class="fas fa-car fs-1 me-3"></i>' +
                                            '<div class="text-start"">' +
                                            '<p class="mb-0 text-xs fw-bold text-gray-600 ">' + text + '</p>' +
                                                '<p class="mb-0 text-xs text-gray-300 ">' + days  + '{{ __("basic.days") }} (' + hours + ' {{ __("basic.hours") }})</p>' +
                                                '<p class="mb-0 text-xs text-gray-300 ">BR: ' + broker + '</p>' +
                                            '</div>' +
                                        '</div>' +

                                        '<div class="col mb-2">' +
                                            '<h6 class="text-gray-300 text-xs mb-1"><i class="fas fa-users"></i> {{ __("basic.start") }}</h6>' +
                                            '<p class="text-gray-600 text-s fw-bold">' + start + '</p>' +
                                        '</div>' +

                                        '<div class="col mb-2">' +
                                            '<h6 class="text-gray-300 text-xs mb-1"><i class="fas fa-dollar-sign"></i> {{ __("basic.end") }}</h6>' +
                                            '<p class="text-gray-600 text-s fw-bold final_price_package_text_buy">' + end + '</p>' +
                                        '</div>' +

                                        '<div class="col mb-2">' +
                                            '<h6 class="text-gray-300 text-xs mb-1"><i class="fas fa-dollar-sign"></i> {{ __("basic.buy") }}</h6>' +
                                            '<input name="limo_buy[]" class="text-center form-control border-0 px-0" type="number" value="' + buy + '" style="padding: 0 !important;font-weight: 600;height: 26px !important;"> {{ __("basic.day") }}' +
                                        '</div>' +

                                        '<div class="col mb-2">' +
                                            '<h6 class="text-gray-300 text-xs mb-1"><i class="fas fa-dollar-sign"></i> {{ __("basic.sell") }}</h6>' +
                                            '<input name="limo_sell[]" class="text-center form-control border-0 px-0 limo_sell_input" type="number" value="' + sell + '" style="padding: 0 !important;font-weight: 600;height: 26px !important;"> {{ __("basic.day") }}' +
                                        '</div>' +

                                '</div>' +

                        '</div>'

        )

    });





        //--------------------- Package js -------------------

        $(document).on('click', '#book_package_modal', function() {

            var modal = $("#add_new_package_modal");

            // basic
            var package_type = modal.find('.package_type').val();
            var package_id = modal.find('.package_id').val();
            var package_name = modal.find('.package_name').val();
            var cat = modal.find('.cat').val();

            var offer_name = modal.find('.offer_name').val();
            var debtor_id = modal.find('.debtor_id').val();
            var debtor_name = modal.find('.debtor_name').val();

            var offer_id = modal.find('.offer_id').val();
            var qty_type = modal.find('.qty_type').val();

            var package_qty_current = $('#package_qty_type option:selected').data('qty');

            // items
            var package_item_id = modal.find('.package_item_id');
            var package_item_type = modal.find('.package_item_type');

            var package_item_buy = modal.find('.package_modal_buy');
            var package_item_sell = modal.find('.package_modal_sell');

            var package_modal_room_type = modal.find('.package_modal_room_type');
            var package_modal_room_view = modal.find('.package_modal_room_view');
            var package_modal_room_meal = modal.find('.package_modal_room_meal');

            // totals
            var total_buy_package_modal = $("#total_buy_package_modal").html();
            var total_sell_package_modal = $("#total_sell_package_modal").html();


            // rendom nymber and strings
            var rendom_number = (Math.random() + 1).toString(36).substring(4);


            // array for items
            var item_ids = package_item_id.map(function(){return this.value}).get().join(",");
            var item_typs = package_item_type.map(function(){return this.value}).get().join(",");
            var item_buys = package_item_buy.map(function(){return this.value}).get().join(",");
            var item_sells = package_item_sell.map(function(){return this.value}).get().join(",");
            var item_room_typs = package_modal_room_type.map(function(){return this.value}).get().join(",");
            var item_room_views = package_modal_room_view.map(function(){return this.value}).get().join(",");
            var item_room_meals = package_modal_room_meal.map(function(){return this.value}).get().join(",");


            // traveler
            var traveler_name = modal.find('.package_modal_traveler_name').val();
            var traveler_phone = modal.find('.package_modal_traveler_phone').val();


            $('#package_cont_img').hide();
            $('#package_cont').show();

            //get the itinerary
            var itinerary = $('#package_modal_iti').html();


            $('#package_cont').append(
                            '<div class="px-2 pt-2 shadow b-r-l-cont mb-4 position-relative booked_package" id="booked_package_'+ rendom_number +'">' +

                                    //remove booking
                                    '<div class="d-flex align-items-center justify-content-center position-absolute rounded-circle avatar-xxs cancel-color-btn clickable-item-pointer delete_booking_hotel" style="top: -3px;">' +
                                        '<i class="fas fa-times text-xs"></i>' +
                                    '</div>' +

                                    '<input type="hidden" name="booking_package_js[]" value="' + rendom_number + '">' +
                                    '<input type="hidden" name="package_id[]" value="' + package_id + '">' +
                                    '<input type="hidden" name="package_offer_id[]" value="' + offer_id + '">' +
                                    //1- customized, 2- commission, 3- broker
                                    '<input type="hidden" name="package_type[]" value="' + cat + '">' +
                                    '<input type="hidden" name="package_debtor_id[]" value="' + debtor_id + '">' +
                                    '<input type="hidden" name="package_qty_type[]" value="' + qty_type + '">' +
                                    '<input type="hidden" name="package_qty[]" value="' + package_qty_current + '">' +
                                    '<input type="hidden" name="booking_package_buy[]" value="' + total_buy_package_modal + '">' +
                                    '<input type="hidden" name="booking_package_sell[]" value="' + total_sell_package_modal + '">' +
                                    // items
                                    '<input type="hidden" name="booking_package_items_ids_' + rendom_number + '" value="' + item_ids + '">' +
                                    '<input type="hidden" name="booking_package_items_typs_' + rendom_number + '" value="' + item_typs + '">' +
                                    '<input type="hidden" name="booking_package_items_buys_' + rendom_number + '" value="' + item_buys + '">' +
                                    '<input type="hidden" name="booking_package_items_sells_' + rendom_number + '" value="' + item_sells + '">' +
                                    '<input type="hidden" name="booking_package_items_room_typs_' + rendom_number + '" value="' + item_room_typs + '">' +
                                    '<input type="hidden" name="booking_package_items_views_' + rendom_number + '" value="' + item_room_views + '">' +
                                    '<input type="hidden" name="booking_package_items_meals_' + rendom_number + '" value="' + item_room_meals + '">' +


                                    // top booking bar
                                    '<div class="row pt-2 align-items-center px-0 px-md-2">' +

                                            '<div class="row mb-2">' +

                                                '<div class="col">' +
                                                '<h6 data-bs-toggle="modal" data-bs-target="#new_package_iti'+ rendom_number + '" class="text-gray-400 mb-1 fas-bold text-s clickable-item-pointer"><i class="fas fa-route"></i> {{ __("basic.itinerary") }}</h6>' +
                                                '</div>' +

                                                // itinerary
                                                '<div class="modal fade" id="new_package_iti' + rendom_number + '" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">' +

                                                '<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">' +

                                                        '<div class=" modal-content b-r-s-cont border-0">' +
                                                            '<div class="modal-header">' +
                                                                '<h5 class="modal-title" id="exampleModalLabel"><i class="fas fa-route me-1"></i> {{ __("basic.itinerary") }}</h5>' +
                                                                '<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>' +
                                                            '</div>' +

                                                            '<div class="modal-body px-5 py-3"><ul class="list-group patient-timeline text-start">' +
                                                                itinerary +
                                                            '</ul></div>' +

                                                            '<div class="modal-footer">' +
                                                                '<div class="left-side">' +
                                                                    '<button type="button" class="btn btn-default btn-link" data-bs-dismiss="modal">{{__("basic.never mind") }}</button>' +
                                                                '</div>' +
                                                                '<div class="divider"></div>' +
                                                                '<div class="right-side">' +
                                                                    '<button data-bs-dismiss="modal" class="btn btn-default btn-link main-color">{{ __("basic.add new") }}</button>' +
                                                                '</div>' +
                                                            '</div>' +
                                                        '</div>' +
                                                    '</div>' +
                                                '</div>' +


                                                '<div class="col">' +
                                                    '<h6 data-bs-toggle="modal" data-bs-target="#new_package_traveler_'+ rendom_number + '" class="text-gray-400 mb-1 text-s fas-bold clickable-item-pointer"><i class="fas fa-user me-2"></i>{{ __("basic.add traveler name") }}</h6>' +
                                                '</div>' +

                                                // add new traveler
                                                '<div class="modal fade" id="new_package_traveler_' + rendom_number + '" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">' +
                                                '<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">' +

                                                        '<div class=" modal-content b-r-s-cont border-0">' +
                                                            '<div class="modal-header">' +
                                                                '<h5 class="modal-title" id="exampleModalLabel"><i class="fas fa-dollar-sign me-1"></i> {{ __('basic.new package') }}</h5>' +
                                                                '<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>' +
                                                            '</div>' +

                                                            '<div class="modal-body px-5 py-3">' +

                                                                '<div class="row mb-2 text-start">' +

                                                                    '<div class="col-12 mb-2">' +
                                                                        '<label class="form-label">{{ __("basic.traveler name") }} <small>(required)</small></label>' +
                                                                        '<input name="package_traveler_name[]" type="text" class="form-control" value="' + traveler_name + '" placeholder="Traveler Name ..">' +
                                                                    '</div>' +
                                                                    '<div class="col-12 mb-2">' +
                                                                        '<label class="form-label">{{ __("basic.traveler phone") }} <small>(required)</small></label>' +
                                                                        '<input name="package_traveler_phone[]" type="number" class="form-control" value="' + traveler_phone + '"  placeholder="Traveler Phone ..">' +
                                                                    '</div>' +
                                                                '</div>' +
                                                            '</div>' +

                                                            '<div class="modal-footer">' +
                                                                '<div class="left-side">' +
                                                                    '<button type="button" class="btn btn-default btn-link" data-bs-dismiss="modal">{{__('basic.never mind') }}</button>' +
                                                                '</div>' +
                                                                '<div class="divider"></div>' +
                                                                '<div class="right-side">' +
                                                                    '<button data-bs-dismiss="modal" class="btn btn-default btn-link main-color">{{ __("basic.add new") }}</button>' +
                                                                '</div>' +
                                                            '</div>' +
                                                        '</div>' +
                                                    '</div>' +
                                                '</div>' +


                                            '</div>' +

                                            '<hr>' +

                                            '<div class="col-12 col-md-4 d-flex mb-2 align-items-center">' +
                                                '<i class="fas fa-route fs-1 me-3"></i>' +
                                                '<div class="text-start"">' +
                                                '<p class="mb-0 text-xs fw-bold text-gray-600 ">' + package_name + '</p>' +
                                                    '<p class="mb-0 text-xs text-gray-300 ">' + offer_name + '</p>' +
                                                    '<p class="mb-0 text-xs text-gray-300 ">BR: ' + debtor_name + '</p>' +
                                                '</div>' +
                                            '</div>' +

                                            '<div class="col mb-2">' +
                                                '<h6 class="text-gray-300 text-xs mb-1"><i class="fas fa-users"></i> {{ __("basic.type") }}</h6>' +
                                                '<p class="text-gray-600 text-s fw-bold">' + qty_type + '</p>' +
                                            '</div>' +

                                            '<div class="col mb-2">' +
                                                '<h6 class="text-gray-300 text-xs mb-1"><i class="fas fa-dollar-sign"></i> {{ __("basic.total buy per person") }}</h6>' +
                                                '<p class="text-gray-600 text-s fw-bold final_price_package_text_buy">' + total_buy_package_modal + '</p>' +
                                                '<input class="final_price_package_input_buy" type="hidden" name="total_package_price_buy[]">' +
                                            '</div>' +

                                            '<div class="col mb-2">' +
                                                '<h6 class="text-gray-300 text-xs mb-1"><i class="fas fa-dollar-sign"></i> Total Sell PP</h6>' +
                                                '<p class="text-gray-600 text-s fw-bold final_price_package_text_sell">' + total_sell_package_modal + '</p>' +
                                                '<input class="final_price_package_input_sell" type="hidden" name="total_package_price_sell[]">' +
                                            '</div>' +

                                            '<div class="col mb-2">' +
                                                '<h6 class="text-gray-300 text-xs mb-1"><i class="fas fa-dollar-sign"></i> Total Buy for ' + package_qty_current + ' People</h6>' +
                                                '<p class="text-gray-600 text-s fw-bold final_price_package_text_buy_all">' + (total_buy_package_modal * package_qty_current) + '</p>' +
                                            '</div>' +

                                            '<div class="col mb-2">' +
                                                '<h6 class="text-gray-300 text-xs mb-1"><i class="fas fa-dollar-sign"></i> Total Sell for ' + package_qty_current + ' People</h6>' +
                                                '<p class="text-gray-600 text-s fw-bold final_price_package_text_sell_all">' + (total_sell_package_modal * package_qty_current) + '</p>' +
                                            '</div>' +


                                    '</div>' +

                            '"</div">'

            )

            $('#add_new_package_modal').modal('hide');

        });

        $(document).on('click', '#package_search', function() {

            var package_id = $('#package_id').val();
            var cat =  $('input[name="package_type_check"]:checked').val();
            var offer_id = $('#package_offer_id').val();
            var broker_id = $('#package_broker_id').val();
            var package_qty = $('#package_qty').val();
            var package_qty_type = $('#package_qty_type').val();

            var url = "{{ route('sett.fetch_package_search', [':package_id', ':cat', ':offer_id', ':broker_id', ':package_qty_type', ':package_qty']) }}";

            url = url.replace(':package_id', package_id).replace(':cat', cat).replace(':offer_id', offer_id).replace(':broker_id', broker_id).replace(':package_qty_type', package_qty_type).replace(':package_qty', package_qty);

            $('#package_modal_iti').html('')

            $.ajax({
                url: url,
                type: "GET",
                dataType: "json",
                success: function(data) {
                    if (data) {

                        $("#basic_inputs_package_modal").html('<input type="hidden" class="package_type" value="' + data.cat + '">'
                        + '<input type="hidden" class="package_id" value="' + data.package_id + '">'
                        + '<input type="hidden" class="package_name" value="' + data.package_name + '">'
                        + '<input type="hidden" class="offer_id" value="' + data.offer_id + '">'
                        + '<input type="hidden" class="offer_name" value="' + data.name + '">'
                        + '<input type="hidden" class="cat" value="' + data.cat + '">'
                        + '<input type="hidden" class="debtor_name" value="' + data.new_debtor_name + '">'
                        + '<input type="hidden" class="debtor_id" value="' + data.new_debtor_id + '">'
                        + '<input type="hidden" class="qty_type" value="' + data.qty_type + '">');

                        console.log(data.package_data.itinerary);
                        if(data.package_data.itinerary.length > 0){

                            $.each(data.package_data.itinerary, function(key, value) {
                                $('#package_modal_iti').append(
                                    '<li class="row flex-nowrap list-group-item d-flex justify-content-between position-relative price_div">'+
                                    '<i class="col patient-timeline-pointer fas fa-circle text-xxs mb-0 main-color"></i>' +
                                    '<div class="col-5 me-1">' +
                                        '<p class="text-xs text-gray-700 mb-0">{{ __("basic.day") }} ' + value.day +'</p>' +
                                        '<h6 class="text-s fw-bold  mb-0">' + value.name + '</h6>' +
                                        '<p class="text-xs text-gray-400 mb-0">' + value.info +'</p>' +
                                    '</div>' +

                                    '<div class="col-4 align-self-center me-1">' +
                                        '<p class="text-xs text-gray-200 mb-0">{{ __("basic.destination") }}</p>' +
                                        '<h6 class="text-s text-gray-400 pe-2">' + value.destination.name + '</h6>' +
                                    '</div>' +

                                    "</li>"
                                )

                            });
                        }else{
                            $('#package_modal_iti').html('{{ __("basic.sorry no itinerary") }}');
                        }


                        var qty_type_buy = "buy_" + data.qty_type;
                        var qty_type_sell = "sell_" + data.qty_type;

                        if(data.package_offer_items){

                            $('#package_modal_prices').html('')

                            if(data.package_offer_items.length > 0){
                                $.each(data.package_offer_items, function(key, value) {

                                    var hotel = '<input type="hidden" class="package_modal_room_type" value="null">' + '<input type="hidden" class="package_modal_room_view" value="null">' + '<input type="hidden" class="package_modal_room_meal" value="null">';

                                    if(value.type == 1){
                                        var type = "{{ __('basic.hotel') }}";
                                        var hotel = '<div class="row"> <div class="col align-self-center me-1">' +
                                                '<p class="text-xs text-gray-200 mb-1"> {{ __("basic.room type") }}</p>' +
                                                '<div>' +
                                                    '<select class="js-example-basic-single select2-hidden-accessible package_modal_room_type" required>' +
                                                                @foreach ($rooms as $item)
                                                                '<option value="{{ $item->id }}">{{ $item->name }}</option>' +
                                                                @endforeach
                                                    '</select>' +
                                                '</div>' +
                                            '</div>' +

                                        '<div class="col align-self-center me-1">' +
                                                '<p class="text-xs text-gray-200 mb-1"> {{ __("basic.room view") }}</p>' +
                                                '<div>' +
                                                    '<select class="js-example-basic-single select2-hidden-accessible package_modal_room_view" required>' +
                                                                @foreach ($room_views as $item)
                                                                '<option value="{{ $item->id }}">{{ $item->name }}</option>' +
                                                                @endforeach
                                                    '</select>' +
                                                '</div>' +
                                            '</div>' +
                                            '<div class="col align-self-center me-1 ">' +
                                                '<p class="text-xs text-gray-200 mb-1"> {{ __("basic.room meal") }}</p>' +
                                                '<div>' +
                                                    '<select class="js-example-basic-single select2-hidden-accessible package_modal_room_meal" required>' +
                                                                @foreach ($meals as $item)
                                                                '<option value="{{ $item->id }}">{{ $item->name }}</option>' +
                                                                @endforeach
                                                    '</select>' +
                                                '</div>' +
                                            '</div>' +

                                            // '<div class="col mb-2">' +
                                            //         '<h6 class="text-gray-300 text-xs">Qty</h6>' +
                                            //         '<select class="js-example-basic-single select2-no-search select2-hidden-accessible room_qty_input" name="room_qty" required>' +
                                            //             '<option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option> <option value="8">8</option><option value="9">9</option><option value="10">10</option>' +
                                            //     '</select>' +
                                            // '</div>' +

                                            '</div>' ;

                                    }else if(value.type == 2){
                                        var type = '{{ __("basic.trip") }}';

                                    }else if(value.type == 3){
                                        var type = '{{ __("basic.transport") }}';
                                    }else if(value.type == 4){
                                        var type = {{ __("basic.airline") }};
                                    }

                                    if(data.qty_type === "single"){
                                        var item_buy = value.buy_single;
                                        var item_sell = value.sell_single;
                                    }else if(data.qty_type === "double"){
                                        var item_buy = value.buy_double;
                                        var item_sell = value.sell_double;
                                    }else if(data.qty_type === "triple"){
                                        var item_buy = value.buy_triple;
                                        var item_sell = value.sell_triple;
                                    }else if(data.qty_type === "quad"){
                                        var item_buy = value.buy_quad;
                                        var item_sell = value.sell_quad;
                                    }

                                    $('#package_modal_prices').append(
                                        '<div class="row mb-3">'+
                                            '<div class="col-1 align-self-center text-center">' +
                                            '<i class="patient-timeline-pointer fas fa-circle text-xxs mb-0 main-color"></i>' +
                                            '</div>' +

                                            '<div class="col me-1">' +
                                                '<p class="text-xs text-gray-700 mb-0">' + type + '</p>' +
                                                '<h6 class="text-s fw-bold  mb-0">' + value.packageable.name + '</h6>' +
                                                '<p class="text-xs text-gray-400 mb-0">' + value.debtor.company_name +'</p>' +
                                            '</div>' +

                                            '<input type="hidden" class="package_item_type" value="' + type + '" >' +
                                            '<input type="hidden" class="package_item_id" value="' + value.id + '" >' +

                                            '<div class="col align-self-center me-1">' +
                                                '<p class="text-xs text-gray-200 mb-1">{{ __("basic.buy per person") }}</p>' +
                                                '<input class="text-s text-gray-600 border-0 package_modal_buy" type="number" value="' + item_buy + '" >' +
                                            '</div>' +

                                            '<div class="col align-self-center me-1">' +
                                                '<p class="text-xs text-gray-200 mb-1">{{ __("basic.sell per person") }}</p>' +
                                                '<input class="text-s text-gray-600 border-0 package_modal_sell" type="number" value="' + item_sell + '" >' +
                                            '</div>' +

                                            '<div class="col align-self-center text-center"><i class="fas fa-times text-red-200 clickable-item-pointer delete_price_package_modal"></i></div>' +

                                            hotel +

                                        "</div>" +

                                        "<hr>"
                                    )
                                });
                            }else{
                                $('#package_modal_prices').html(
                                '<div class="row mb-3">'+

                                    '<input type="hidden" class="package_item_type" value="null" >' +
                                    '<input type="hidden" class="package_item_id" value="null" >' +

                                    '<div class="col align-self-center me-1">' +
                                        '<p class="text-xs text-gray-200 mb-1">{{ __("basic.buy per person") }}</p>' +
                                        '<input class="text-s text-gray-600 border-0 package_modal_buy" type="number" value="' + data.total_buy + '" >' +
                                    '</div>' +
                                    '<div class="col align-self-center me-1">' +
                                        '<p class="text-xs text-gray-200 mb-1">{{ __("basic.sell per person") }}</p>' +
                                        '<input class="text-s text-gray-600 border-0 package_modal_sell" type="number" value="' + data.total_sell + '" >' +
                                    '</div>' +
                                '</div>' +
                                '<hr>'
                            )
                            }

                            fetchTotals();

                        }else{
                            $('#package_modal_prices').html(
                                '<div class="row mb-3">'+

                                    '<input type="hidden" class="package_item_type" value="null" >' +
                                    '<input type="hidden" class="package_item_id" value="null" >' +

                                    '<div class="col align-self-center me-1">' +
                                        '<p class="text-xs text-gray-200 mb-1">Buy Per Person</p>' +
                                        '<input class="text-s text-gray-600 border-0 package_modal_buy" type="number" value="' + data.total_buy + '" >' +
                                    '</div>' +
                                    '<div class="col align-self-center me-1">' +
                                        '<p class="text-xs text-gray-200 mb-1">Sell Per Person</p>' +
                                        '<input class="text-s text-gray-600 border-0 package_modal_sell" type="number" value="' + data.total_sell + '" >' +
                                    '</div>' +
                                '</div>' +
                                '<hr>'
                            )
                            fetchTotals();

                        }

                        $('.js-example-basic-single').select2();

                        $('#add_new_package_modal').modal('show');

                    } else {
                        // $('select[name="package_offer_id"]').html('<option disabled>Not Selected</option>');
                    }
                }
            });


        });



        // culculate all items in modals

        $(document).on("change", ".package_modal_buy, .package_modal_sell", function(){
            fetchTotals()
        });


        $(document).on("click", ".delete_price_package_modal", function() {
            $(this).parent().parent().remove();
            fetchTotals()
        });

        function fetchTotals() {

            var package_qty = $('#package_qty_type option:selected').data('qty');

            var iti_single_buy_input = $('.package_modal_buy');
            iti_single_buy = 0;
            $.each(iti_single_buy_input, function(key, value) {
                if(this.value > 0){
                    iti_single_buy += parseFloat(this.value);
                }
            });

            var iti_single_sell_input = $('.package_modal_sell');
            iti_single_sell = 0;
            $.each(iti_single_sell_input, function(key, value) {
                if(this.value > 0){
                    iti_single_sell += parseFloat(this.value);
                }
            });

            $("#total_buy_package_modal").html(iti_single_buy);
            $("#total_sell_package_modal").html(iti_single_sell);

            $("#qty_buy_package_modal_all_pp").html(package_qty);
            $("#qty_sell_package_modal_all_pp").html(package_qty);

            $("#total_buy_package_modal_all_pp").html(iti_single_buy * package_qty);
            $("#total_sell_package_modal_all_pp").html(iti_single_sell * package_qty);
        }


        // $(document).on('click', '#package_searchw', function() {

        //     var package_id = $('#package_id').val();
        //     var cat =  $('input[name="package_type_check"]:checked').val();
        //     var offer_id = $('#package_offer_id').val();
        //     var broker_id = $('#package_broker_id').val();
        //     var package_qty = $('#package_qty').val();
        //     var package_qty_type = $('#package_qty_type').val();

        //     var url = "{{ route('sett.fetch_package_search', [':package_id', ':cat', ':offer_id', ':broker_id', ':package_qty', ':package_qty_type']) }}";

        //     url = url.replace(':package_id', package_id).replace(':cat', cat).replace(':offer_id', offer_id).replace(':broker_id', broker_id).replace(':package_qty', package_qty).replace(':package_qty_type', package_qty_type);

        //     $.ajax({
        //         url: url,
        //         type: "GET",
        //         dataType: "json",
        //         success: function(data) {
        //             if (data) {

        //                 $('#package_cont_img').hide();
        //                 $('#package_cont').show();

        //                 $('#package_cont').append(
        //                     '<div class="px-2 pt-2 shadow b-r-l-cont mb-4 position-relative">' +

        //                             //remove booking
        //                             '<div class="d-flex align-items-center justify-content-center position-absolute rounded-circle avatar-xxs cancel-color-btn clickable-item-pointer delete_booking_hotel" style="top: -3px;">' +
        //                                 '<i class="fas fa-times text-xs"></i>' +
        //                             '</div>' +

        //                             //add traveler
        //                             '<div class="row add_hotel_customer_cont text-end mt-2 mb-3 pe-4" style="display: none;">' +
        //                                     '<div data-bs-toggle="modal" data-bs-target="#new_package_traveler'+ data.id + '" class=" clickable-item-pointer text-gray-400">' +
        //                                         '<i class="fas fa-plus"></i> <span> {{ __("basic.add traveler name") }}</span>' +
        //                                     '</div>' +
        //                             '</div>' +

        //                                 '<div class="modal fade" id="new_package_traveler' + data.id + '" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">' +
        //                                 '<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">' +

        //                                         '<div class=" modal-content b-r-s-cont border-0">' +
        //                                             '<div class="modal-header">' +
        //                                                 '<h5 class="modal-title" id="exampleModalLabel"><i class="fas fa-dollar-sign me-1"></i> {{ __('basic.new package') }}</h5>' +
        //                                                 '<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>' +
        //                                             '</div>' +

        //                                             '<div class="modal-body px-5 py-3">' +

        //                                                 '<div class="row mb-2">' +

        //                                                     '<div class="col-12 mb-2">' +
        //                                                         '<label class="form-label">{{ __("basic.traveler name") }} <small>(required)</small></label>' +
        //                                                         '<input name="ht_traveler_name[]" type="text" class="form-control" placeholder="Traveler Name ..">' +
        //                                                     '</div>' +
        //                                                     '<div class="col-12 mb-2">' +
        //                                                         '<label class="form-label">{{ __("basic.traveler phone") }} <small>(required)</small></label>' +
        //                                                         '<input name="ht_traveler_phone[]" type="number" class="form-control" placeholder="Traveler Phone ..">' +
        //                                                     '</div>' +
        //                                                 '</div>' +
        //                                             '</div>' +

        //                                             '<div class="modal-footer">' +
        //                                                 '<div class="left-side">' +
        //                                                     '<button type="button" class="btn btn-default btn-link" data-bs-dismiss="modal">{{__('basic.never mind') }}</button>' +
        //                                                 '</div>' +
        //                                                 '<div class="divider"></div>' +
        //                                                 '<div class="right-side">' +
        //                                                     '<button data-bs-dismiss="modal" class="btn btn-default btn-link main-color">Add New</button>' +
        //                                                 '</div>' +
        //                                             '</div>' +
        //                                         '</div>' +
        //                                     '</div>' +
        //                                 '</div>' +

        //                                 //dates
        //                                 '<div class="row mt-2">' +
        //                                     '<input type="hidden" name="booking_package_start[]" value="' + data.from_date + '">' +
        //                                     '<div class="col">' +
        //                                         '<h6 class="text-gray-300 text-xs mb-1"><i class="fas fa-calendar"></i> {{ __("basic.start") }}</h6>' +
        //                                         '<p class="text-gray-500 text-s fw-bold text-uppercase mb-0">' +
        //                                             data.from_date + '</p>' +

        //                                     '</div>' +
        //                                     '<div class="col">' +
        //                                         '<h6 class="text-gray-300 text-xs mb-1"><i class="fas fa-calendar"></i> {{ __("basic.end") }}</h6>' +
        //                                         '<p class="text-gray-500 text-s fw-bold text-uppercase mb-0">' +
        //                                             data.from_date + '</p>' +
        //                                     '</div>' +
        //                                     '<div class="col">' +
        //                                         '<h6 class="text-gray-300 text-xs mb-1"><i class="fas fa-calendar"></i> {{ __("basic.days") }}</h6>' +
        //                                         '<p class="text-gray-500 text-s fw-bold text-uppercase mb-0">' +
        //                                             data.from_date + ' Days </p>' +
        //                                     '</div>' +
        //                                 '</div>' +

        //                                 '<hr class="mb-2 mt-3">' +

        //                                 '<div class="row pt-2 align-items-center px-0 px-md-2">' +
        //                                     '<div class="col-12 col-md-4 d-flex mb-2 align-items-center">' +
        //                                             '<i class="fas fa-cubes"></i>' +
        //                                         '<div class="text-start"">' +
        //                                         '<p class="mb-0 text-xs fw-bold text-gray-600 ">' + data.name + '</p>' +
        //                                             '<p class="mb-0 text-xs text-gray-300 ">' + data.info + '</p>' +
        //                                             '<p class="mb-0 text-xs text-gray-300 ">BR:' + data.broker_name + '</p>' +
        //                                         '</div>' +
        //                                     '</div>' +

        //                                     '<div class="col mb-2">' +
        //                                         '<h6 class="text-gray-300 text-xs mb-1"><i class="fas fa-utensils"></i> {{ __("basic.meal") }}</h6>' +
        //                                         '<p class="text-gray-600 text-s fw-bold text-uppercase">' + data.meal_name + '</p>' +
        //                                     '</div>' +

        //                                     '<div class="col mb-2">' +
        //                                         '<input type="hidden" name="market_id[]" value="' + data.market_id + '">' +
        //                                         '<h6 class="text-gray-300 text-xs mb-1"><i class="fas fa-users"></i> PP <small>' + data.market_name + '</small></h6>' +
        //                                         '<p class="text-gray-600 text-s fw-bold">' + data.capacity + '</p>' +
        //                                     '</div>' +

        //                                     '<div class="col mb-2">' +
        //                                         '<h6 class="text-gray-300 text-xs mb-1"><i class="fas fa-dollar-sign"></i> RBP</h6>' +
        //                                         '<input name="room_price_buy[]" class="text-center form-control border-0 px-0" type="number" value="' + data.final_room_price_buy + '"style="padding: 0 !important;font-weight: 600;height: 26px !important;">' +
        //                                     '</div>' +

        //                                     '<div class="col mb-2">' +
        //                                         '<h6 class="text-gray-300 text-xs mb-1"><i class="fas fa-dollar-sign"></i> RSP</h6>' +
        //                                         '<input type="hidden" name="comes_from[]" value="' + data.comes_from + '">' +
        //                                         '<input type="hidden" name="broker_id[]" value="' + data.broker_id + '">' +
        //                                         '<input type="hidden" name="unit_id[]" value="' + data.unit_id + '">' +
        //                                         '<input type="hidden" name="unit_offer_id[]" value="' + data.unit_offer_id + '">' +
        //                                         '<input type="hidden" name="room_id[]" value="' + data.id + '">' +
        //                                         '<input type="hidden" name="unit_room_view[]" value="' + data.room_view + '">' +
        //                                         '<input type="hidden" name="unit_room_meal[]" value="' + data.meal_id + '">' +
        //                                         '<input name="room_price[]" class="room_price text-center form-control border-0 px-0" type="number" value="' + data.final_room_price_sell + '"style="padding: 0 !important;font-weight: 600;height: 26px !important;">' +
        //                                     '</div>' +

        //                                     '<div class="col mb-2">' +
        //                                         '<h6 class="text-gray-300 text-xs mb-1"><i class="fas fa-bed"></i> Qty</h6>' +
        //                                         '<select class="js-example-basic-single select2-no-search select2-hidden-accessible room_qty_input" name="room_qty[]" required>' +
        //                                             '<option value="0">0</option><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option> <option value="8">8</option><option value="9">9</option><option value="10">10</option>' +
        //                                     '</select>' +
        //                                     '</div>' +

        //                                     '<div class="col mb-2">' +
        //                                         '<h6 class="text-gray-300 text-xs mb-1"><i class="fas fa-dollar-sign"></i> {{ __("basic.final") }}</h6>' +
        //                                         '<p class="text-gray-600 text-s fw-bold final_price_room_input">0</p>' +
        //                                         '<div class="room_final_price_cont"></div>' +
        //                                     '</div>' +

        //                                 '</div>' +

        //                                 '</div>' +

        //                                 '</div>' +
        //                             '</div>'
        //                     );

        //                 // fetchPackageOfferQty();

        //             } else {
        //                 // $('select[name="package_offer_id"]').html('<option disabled>Not Selected</option>');
        //             }
        //         }
        //     });


        // });





        //unit booking catagory
        $(document).on('change', $('input[name="package_type_check"]'), function() {

            var type =  $('input[name="package_type_check"]:checked').val();

            console.log(type);
            if(type === "offer"){
                $('#offer_package_check_cont').show();
                $('#broker_package_check_cont').hide();
            }else if(type === "debtor"){
                $('#offer_package_check_cont').hide();
                $('#broker_package_check_cont').show();
            }
        });

        fetchPackageOffer();

        //for country and cities ajax inputs
        function fetchPackageOffer(packageID = $('select[name="package_id"]').val()) {

            var url = "{{ route('sett.fetch_package_offer', ':id') }}";
            url = url.replace(':id', packageID);

            $('select[name="package_offer_id"]').empty();

            if (packageID) {
                $.ajax({
                    url: url,
                    type: "GET",
                    dataType: "json",
                    success: function(data) {
                        if (data) {
                            $('select[name="package_offer_id"]').empty();
                            $.each(data, function(key, value) {
                                $('select[name="package_offer_id"]').append('<option value="' +
                                    value.id + '" data-price="' +
                                    value.sell + '" data-qty="' +
                                    value.traveler_number_left + '">' + value.name + "-" + value.from_date + " to " + value.to_date +  '</option>');
                            });
                            // fetchPackageOfferQty();
                        } else {
                            $('select[name="package_offer_id"]').html('<option disabled>{{ __("basic.not selected") }}</option>');
                        }
                    }
                });
            } else {
                $('select[name="package_offer_id"]').html('<option disabled>No Result</option>');
            }
        };

        // fetchPackageOfferQty();

        //for country and cities ajax inputs
        // function fetchPackageOfferQty(qty = $('select[name="package_offer_id"] option:selected').data("qty")) {

        //     console.log(qty);
        //     $('select[name="package_qty"]').empty();
        //     for (i = 1; i < qty; i++) {
        //         $('select[name="package_qty"]').append('<option value="' +
        //             i + '">' + i + '</option>');
        //     }
        // }

        $(document).on('change', '#package_id', function() {
            fetchPackageOffer();
        });


        //--------------------- Trips -------------------

        fetchTripOffer();

        //for country and cities ajax inputs
        function fetchTripOffer(tripID = $('select[name="trip_id"]').val()) {

            var url = "{{ route('sett.fetch_trip_offer', ':id') }}";
            url = url.replace(':id', tripID);

            $('select[name="trip_offer_id"]').empty();

            if (tripID) {
                $.ajax({
                    url: url,
                    type: "GET",
                    dataType: "json",
                    success: function(data) {
                        if (data) {
                            $('select[name="trip_offer_id"]').empty();
                            $.each(data, function(key, value) {
                                $('select[name="trip_offer_id"]').append('<option value="' +
                                    value.id + '" data-price="' +
                                    value.sell + '">' + value.sell + "-" + value.debtor.company_name +  '</option>');
                            });
                        } else {
                            $('select[name="trip_offer_id"]').html('<option disabled>{{ __("basic.not selected") }}</option>');
                        }
                    }
                });
            } else {
                $('select[name="trip_offer_id"]').html('<option disabled>No Result</option>');
            }
        };

        $(document).on('change', '#trip_id', function() {
            fetchTripOffer();
        });

        //--------------------- Visa -------------------

        fetchVisaType();

        //for country and cities ajax inputs
        function fetchVisaType(visaID = $('select[name="visa_id"]').val()) {

            var url = "{{ route('sett.fetch_visa_type_ajax', ':id') }}";
            url = url.replace(':id', visaID);

            $('select[name="visa_type"]').empty();

            if (visaID) {
                $.ajax({
                    url: url,
                    type: "GET",
                    dataType: "json",
                    success: function(data) {
                        if (data) {
                            $.each(data.types, function(key, value) {
                                $('select[name="visa_type"]').append('<option value="' +
                                    value.id + '" data-price="' +
                                    value.sell + '">' + value.sell + "-" + value.name +  '</option>');
                            });
                        } else {
                            $('select[name="visa_type"]').html('<option disabled>{{ __("basic.not selected") }}</option>');
                        }
                    }
                });
            } else {
                $('select[name="visa_type"]').html('<option disabled>No Result</option>');
            }
        }

        $(document).on('change', '#visa_id', function() {
            fetchVisaType();
        });



        //--------------------- calander appointment ajax -------------------


        //default calander ajax
        $(document).ready(function() {

            function fetchCalander(month = {{ date('m') }}, year = {{ date('Y') }}) {

                var unit_offer_id = $('#offer_ht_selc_form').val();
                var room_type = $('#services').val();
                var room_num = $('#room').val();
                var market = $('#market_id').val();
                var broker_id = $('#unit_broker_id').val();
                var comes_from =  $('input[name="offer_type_check"]:checked').val();

                var url =
                    "{{ route('sett.appcalander_appointment_ajax', [':month', ':year', ':comes_from', ':unit_offer_id', ':broker_id',':room_type', ':room_num', ':market']) }}";
                url = url.replace(':month', month).replace(':year', year).replace(':comes_from', comes_from).replace(':unit_offer_id', unit_offer_id).replace(':broker_id', broker_id).replace(
                    ':room_type', room_type).replace(':room_num', room_num).replace(':market', market);

                $.ajax({
                    url: url,
                    type: "GET",
                    success: function(data) {
                        $("#calander_cont").html(data);
                    }
                });
            }

            //unit booking catagory
                $("input[name='offer_type_check'").change(function(){

                var type =  $('input[name="offer_type_check"]:checked').val();

                fetchCalander();
                if(type === "direct"){
                    $('#offers_check_cont').hide();
                    $('#rooms_offers_check_cont').hide();
                    $('#broker_unit_check_cont').hide();
                    $('#all_rooms_check_cont').show();
                    $('#room_view_check_cont').show();
                    $('#meal_check_cont').show();
                }else if(type === "offer"){
                    $('#offers_check_cont').show();
                    $('#rooms_offers_check_cont').show();
                    $('#broker_unit_check_cont').hide();
                    $('#all_rooms_check_cont').hide();
                    $('#room_view_check_cont').hide();
                    $('#meal_check_cont').hide();
                }else if(type === "broker"){
                    $('#broker_unit_check_cont').show();
                    $('#offers_check_cont').hide();
                    $('#rooms_offers_check_cont').hide();
                    $('#all_rooms_check_cont').show();
                    $('#room_view_check_cont').show();
                    $('#meal_check_cont').show();
                }
            });

            function fetchOffer_ht(unit_id = $('#units_selc_form').val()) {
                var url = "{{ route('sett.app_fetch_offer_ht', [':date1']) }}";
                url = url.replace(':date1', unit_id);
                console.log('wswsws');

                $.ajax({
                    url: url,
                    type: "GET",
                    dataType: "json",
                    success: function(data) {

                        if(data.length > 0){
                            $('select[name="offer_ht_id"]').empty();
                            $.each(data, function(key, value) {
                                $('select[name="offer_ht_id"]').append('<option value="' +
                                    value.id + '">' + value.name + '</option>');
                            });
                            fetchServices_cat();
                            fetchCalander()
                        }else{
                            $('select[name="offer_ht_id"]').html('<option>- No Offer -</option>');
                            fetchServices_cat();
                            fetchCalander()
                        }

                    }
                });
            }

            function fetchServices_cat(unit_offer = $('#offer_ht_selc_form').val()) {

                var url = "{{ route('sett.app_fetch_unit_offer_room', [':date1']) }}";
                url = url.replace(':date1', unit_offer);
                console.log('arwaty');

                $.ajax({
                    url: url,
                    type: "GET",
                    dataType: "json",
                    success: function(data) {
                        console.log('wsasqwe12');
                        if(data){
                            $('select[name="service_id"]').empty();
                            $.each(data, function(key, value) {
                                $('select[name="service_id"]').append('<option value="' +
                                    value.id + '" data-price="' + value.sell +
                                '" data-name="' + value.type.name +
                                '" >' + value.type.name + '</option>');
                            });
                            fetchCalander()
                        }else{
                            console.log('2121122');
                            $('select[name="service_id"]').empty();
                        }

                    }
                });

            }

            $(document).on('change', '.room_qty_input', function() {
                var qty = $(this).val();
                var price = $(this).parent().parent().find('.room_price').val();
                var final_price = price * qty;

                if(qty > 0){
                    $(this).parent().parent().find('.final_price_room_input').html(final_price);
                    $(this).parent().parent().find('.room_final_price_cont').html('<input type="hidden" name="room_final_price[]" value="' + final_price + '" class="room_final_price">' );

                    $(this).parent().parent().parent().find('.add_hotel_customer_cont').show();

                }else{
                    $(this).parent().parent().find('.room_final_price').remove();

                    $(this).parent().parent().parent().find('.add_hotel_customer_cont').hide();

                }
            });

            $(document).on('keyup', '.room_price', function() {
                var qty = $(this).parent().parent().find('.room_qty_input').val();
                var price = $(this).val();

                var final_price = price * qty;

                if(qty > 0){

                    $(this).parent().parent().find('.final_price_room_input').html(final_price);
                    $(this).parent().parent().find('.room_final_price_cont').html('<input type="hidden" name="room_final_price[]" value="' + final_price + '" class="room_final_price">' );

                    $(this).parent().parent().parent().find('.add_hotel_customer_cont').show();

                }else{
                    $(this).parent().parent().find('.room_final_price').remove();
                    $(this).parent().parent().parent().find('.add_hotel_customer_cont').hide();

                }
            });


            $(document).on('change', '#offer_ht_selc_form', function() {
                    fetchServices_cat()
            });


            $(document).on('change', '#services, #room, #market_id', function() {
                fetchCalander();
            });

            //to get unit depnds on branch selected
            fetchUnit();

            function fetchUnit(branch = $('#dest_selc_form').val()) {

                var url = "{{ route('sett.app_fetch_unit_ajax', [':date']) }}";
                url = url.replace(':date', branch);

                $.ajax({
                    url: url,
                    type: "GET",
                    dataType: "json",
                    success: function(data) {
                        $('#units_selc_form').empty();
                        $.each(data, function(key, value) {
                            $('#units_selc_form').append('<option value="' +
                                value.id + '">' + value.name + '</option>');
                        });
                        fetchOffer_ht();
                    }
                });
            }

            $(document).on('change', '#dest_selc_form', function() {
                fetchUnit();
            });

            $(document).on('change', '#units_selc_form', function() {
                fetchOffer_ht();
            });

            //reinsert the calander when the month arrows are clicked
            $(document).on('click', '#change_month', function() {
                var month = $(this).data('month');
                var year = $(this).data('year');
                fetchCalander(month, year)
            });
        });


        $(document).on('click', '.file_click', function() {

            var id = $(this).data('id');

            if ($(this).hasClass('done-color')) {
                $(this).removeClass('done-color');
                $('#file_id').val("");
                //turn on all file inputs
                $('input[name="op_name"]').prop("disabled", false);
                $('select[name="op_worker_id"]').prop("disabled", false);
                $('textarea[name="op_note"]').prop("disabled", false);
            } else {
                //disable all file inputs
                $('input[name="op_name"]').prop("disabled", true);
                $('select[name="op_worker_id"]').prop("disabled", true);
                $('textarea[name="op_note"]').prop("disabled", true);

                //remove other select
                $('.file_click').removeClass('done-color');
                $('#file_id').val("");
                $('#file_id').val("");

                $(this).addClass('done-color');
                $('#file_id').val(id);
            }

        })

        // ----------------- timeslots -----------------
        //-- to show the available timeslots for given day
        //when (#available_day_ajax) is clicked in calander days, (data-timeslots attribute) will be taken which containing the give date
        //it will be send to timeslots.php to selecet the booked date from db then check the availability and excute timeslot fun
        $(document).on('click', '.available_day_ajax-selector', function() {
            //to reomove first classes booked and add booked to the selected day in calander
            $('.available_day_ajax_selected').removeClass('selected_main_day_calander');
            $('.calendar_booking_time_div').removeClass('selected_day_calander');
            $('.td_calander ').removeClass('selected_main_day_calander');
            // $(this).parent().parent().parent().parent().closest('div').addClass("selected_main_day_calander")
        });

        $(document).ready(function() {


            $(document).on('click', '.delete_booking_hotel', function() {
                $(this).parent().remove();
            })



            // select days to booking hotel
            $(document).on('mouseover click', '.available_day_ajax-selector', function() {

                //booked day
                if($(this).hasClass('disabled_link')){
                    $('.available_day_ajax-selector').removeClass("selected_day_calander");
                    $('.available_day_ajax-selector').removeClass("reserved");
                    $('.available_day_ajax-selector').removeClass("firstClick");
                    $('.available_day_ajax-selector').removeClass("secondClick");
                    $('#calander_date_start').removeClass("firstClick");
                    $('#calander_date_start').removeClass("secondClick");
                    return false;
                }


                //after 2 clicks checkin and checkout clicked
                if ($(".firstClick").length > 0 && $(".secondClick").length > 0) {
                    if (event.type === "click") {
                        $('.available_day_ajax-selector').removeClass("selected_day_calander");
                        $('.available_day_ajax-selector').removeClass("reserved");
                        $('.available_day_ajax-selector').removeClass("firstClick");
                        $('.available_day_ajax-selector').removeClass("secondClick");

                        $('#calander_date_start').removeClass("firstClick");
                        $('#calander_date_start').removeClass("secondClick");
                    }
                }

                //cliced 1 checkin only
                if ($(".firstClick").length > 0 && $(".secondClick").length == 0) {

                    var tds = $('a.available_day_ajax-selector');
                    var firstClick = $(".firstClick");
                    var firstClickIndex = tds.index(firstClick);
                    var currentIndex = tds.index(this);
                    //day before today
                    if(firstClickIndex > currentIndex){
                        $('.available_day_ajax-selector').removeClass("selected_day_calander");
                        $('.available_day_ajax-selector').removeClass("reserved");
                        $('.available_day_ajax-selector').removeClass("firstClick");
                        $('.available_day_ajax-selector').removeClass("secondClick");
                        $('#calander_date_start').removeClass("firstClick");
                        $('#calander_date_start').removeClass("secondClick");
                        $('#calander_cont_int_info').hide();
                        $('#calander_cont_int_info_start').val();
                        return false;
                    }
                    //for mouse hover
                    if (event.type === "mouseover") {

                        $('.available_day_ajax-selector').removeClass("selected_day_calander");


                        tds.filter(function() {
                            var idx = tds.index(this);
                            return idx >= firstClickIndex && idx <= currentIndex;
                        }).addClass("selected_day_calander")

                    }
                    //for click
                    if (event.type === "click") {

                        console.log(currentIndex);

                        $('#calander_date_start').addClass("secondClick");
                        $(this).addClass("secondClick");

                        $('.selected_day_calander').addClass('reserved');

                        var start = $("#calander_date_start").val();
                        var end = $(this).data("timeslots");

                        $('#calander_date_end').val(end);
                        $('#end_calendar_show').html(end);

                        var comes_from =  $('input[name="offer_type_check"]:checked').val();

                        var broker_id = $('#unit_broker_id').val();

                        var unit_id = $('#units_selc_form').val();
                        var unit_offer_id = $('#offer_ht_selc_form').val();
                        var room_view_id = $('#room_view_check').val();
                        var meal_id = $('#meal_check').val();
                        var date = start + "to" + end;
                        var market = $('#market_id').val();
                        var room_type = $('#services').val();
                        var all_rooms_check = $('#all_rooms_check').val();
                        var room = $('#room').val();
                        var adult = $('#adult').val();


                        // rendom nymber and strings
                        var rendom_number = (Math.random() + 1).toString(36).substring(4);


                        $('#calander_cont_int_info_end').html(end);

                        var url =
                            "{{ route('sett.hotel_search_booking_ad_calendar', [':unit_id',':comes_from', ':unit_offer_id', ':room_type',':all_rooms_check', ':room_view_id', ':meal_id', ':broker_id', ':market',':date',':room',':adult']) }}";
                        url = url.replace(':unit_id', unit_id).replace(':comes_from', comes_from).replace(':unit_offer_id',unit_offer_id).replace(':room_type',room_type).replace(':all_rooms_check',all_rooms_check).replace(':room_view_id',room_view_id).replace(':meal_id',meal_id).replace(':broker_id',broker_id).replace(':market',market).replace(':date',date).replace(':room',room).replace(':adult',adult);

                        $.ajax({
                            url: url,
                            type: "GET",
                            success: function(data) {

                                $('#calander_cont_int_info_days').html(data.days + " {{ __('basic.nights') }}");

                                // $('#calendar_booked_info').hide();

                                    avatar_url = '{{ URL::asset('img/unit/rooms') }}';

                                    $('#calendar_booked_info').append(

                                        '<div class="px-2 pt-2 shadow b-r-l-cont mb-4 position-relative" id="unit_booking_' + rendom_number + '">' +

                                                //------- Edit Booking ---------
                                                '<div class="d-flex align-items-center justify-content-center position-absolute rounded-circle avatar-xxs done-color-btn clickable-item-pointer" style="top: -3px; left: 33px;" data-bs-toggle="modal" data-bs-target="#edit_hotel_booking_'+ rendom_number + '" >' +
                                                        '<i class="fas fa-edit text-xs"></i>' +
                                                    '</div>' +

                                                '<div class="modal fade" id="edit_hotel_booking_' + rendom_number + '" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">' +
                                                '<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">' +

                                                    '<div class=" modal-content b-r-s-cont border-0">' +
                                                        '<div class="modal-header">' +
                                                            '<h5 class="modal-title" id="exampleModalLabel"><i class="fas fa-edit me-1"></i> {{ __('basic.edit booking') }}</h5>' +
                                                            '<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>' +
                                                        '</div>' +

                                                            '<div class="modal-body px-5 py-3">' +

                                                                '<div class="row mb-2 text-start">' +

                                                                    '<div class="col-12 mb-2">' +
                                                                        '<label class="form-label">{{ __("basic.room type") }} <small>({{ __("basic.required") }})</small></label>' +
                                                                        '<select class="js-example-basic-single select2-no-search select2-hidden-accessible room_id_input" name="room_id[]" required>' +
                                                                              @foreach ($rooms as $item)
                                                                                '<option' + (data.room_id == '{{ $item->id }}'? ' selected ': ' ') + 'value="{{ $item->id }}">{{ $item->name }}</option>' +
                                                                               @endforeach
                                                                        '</select>' +
                                                                    '</div>' +
                                                                    '<div class="col-12 mb-2">' +
                                                                        '<label class="form-label">{{ __("basic.room view") }} <small>({{ __("basic.required") }})</small></label>' +
                                                                        '<select class="js-example-basic-single select2-no-search select2-hidden-accessible unit_room_view_input" name="unit_room_view[]" required>' +
                                                                              @foreach ($room_views as $item)
                                                                                '<option' + (data.room_view == '{{ $item->id }}'? ' selected ': ' ') + 'value="{{ $item->id }}">{{ $item->name }}</option>' +
                                                                                @endforeach
                                                                        '</select>' +
                                                                    '</div>' +

                                                                    '<div class="col-12 mb-2">' +
                                                                        '<label class="form-label">{{ __("basic.meal") }} <small>({{ __("basic.required") }})</small></label>' +
                                                                        '<select class="js-example-basic-single select2-no-search select2-hidden-accessible unit_room_meal_input" name="unit_room_meal[]" required>' +
                                                                              @foreach ($meals as $item)
                                                                                '<option' + (data.meal_id == '{{ $item->id }}'? ' selected ': ' ') + 'value="{{ $item->id }}">{{ $item->name }}</option>' +
                                                                                @endforeach
                                                                        '</select>' +
                                                                    '</div>' +
                                                                '</div>' +
                                                            '</div>' +

                                                            '<div class="modal-footer">' +
                                                                '<div class="left-side">' +
                                                                    '<button type="button" class="btn btn-default btn-link" data-bs-dismiss="modal">{{__('basic.never mind') }}</button>' +
                                                                '</div>' +
                                                                '<div class="divider"></div>' +
                                                                '<div class="right-side">' +
                                                                    '<button type="button" class="btn btn-default btn-link update_hotel_booking_modal" data-bs-dismiss="modal" data-id="' + rendom_number + '">{{__('basic.update') }}</button>' +
                                                                '</div>' +
                                                            '</div>' +
                                                        '</div>' +
                                                    '</div>' +
                                                '</div>' +

                                                //------- Remove Booking ---------
                                                '<div class="d-flex align-items-center justify-content-center position-absolute rounded-circle avatar-xxs cancel-color-btn clickable-item-pointer delete_booking_hotel" style="top: -3px;">' +
                                                    '<i class="fas fa-times text-xs"></i>' +
                                                '</div>' +

                                                //add traveler
                                                '<div class="row add_hotel_customer_cont text-end mt-2 mb-3 pe-4" style="display: none;">' +
                                                        '<div data-bs-toggle="modal" data-bs-target="#new_ht_traveler'+ rendom_number + '" class=" clickable-item-pointer text-gray-400">' +
                                                            '<i class="fas fa-plus"></i> <span> {{ __("basic.add traveler name") }}</span>' +
                                                        '</div>' +
                                                '</div>' +

                                                    '<div class="modal fade" id="new_ht_traveler' + rendom_number + '" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">' +
                                                    '<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">' +

                                                            '<div class=" modal-content b-r-s-cont border-0">' +
                                                                '<div class="modal-header">' +
                                                                    '<h5 class="modal-title" id="exampleModalLabel"><i class="fas fa-dollar-sign me-1"></i> {{ __('basic.new traveler') }}</h5>' +
                                                                    '<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>' +
                                                                '</div>' +

                                                                '<div class="modal-body px-5 py-3">' +

                                                                    '<div class="row mb-2 text-start">' +

                                                                        '<div class="col-12 mb-2">' +
                                                                            '<label class="form-label">{{ __("basic.traveler name") }} <small>(required)</small></label>' +
                                                                            '<input name="ht_traveler_name[]" type="text" class="form-control" placeholder="Traveler Name ..">' +
                                                                        '</div>' +
                                                                        '<div class="col-12 mb-2">' +
                                                                            '<label class="form-label">{{ __("basic.traveler phone") }} <small>(required)</small></label>' +
                                                                            '<input name="ht_traveler_phone[]" type="number" class="form-control" placeholder="Traveler Phone ..">' +
                                                                        '</div>' +
                                                                    '</div>' +
                                                                '</div>' +

                                                                '<div class="modal-footer">' +
                                                                    '<div class="left-side">' +
                                                                        '<button type="button" class="btn btn-default btn-link" data-bs-dismiss="modal">{{__('basic.never mind') }}</button>' +
                                                                    '</div>' +
                                                                    '<div class="divider"></div>' +
                                                                    '<div class="right-side">' +
                                                                        '<button type="button" class="btn btn-default btn-link" data-bs-dismiss="modal">{{__('basic.add new') }}</button>' +
                                                                    '</div>' +
                                                                '</div>' +
                                                            '</div>' +
                                                        '</div>' +
                                                    '</div>' +

                                                    //dates
                                                    '<div class="row mt-2">' +
                                                        '<input type="hidden" name="booking_start[]" value="' + start + '">' +
                                                        '<input type="hidden" name="booking_end[]" value="' + end + '">' +
                                                        '<div class="col">' +
                                                            '<h6 class="text-gray-300 text-xs mb-1"><i class="fas fa-calendar"></i> {{ __("basic.start") }}</h6>' +
                                                            '<p class="text-gray-500 text-s fw-bold text-uppercase mb-0">' +
                                                                start + '</p>' +

                                                        '</div>' +
                                                        '<div class="col">' +
                                                            '<h6 class="text-gray-300 text-xs mb-1"><i class="fas fa-calendar"></i> {{ __("basic.end") }}</h6>' +
                                                            '<p class="text-gray-500 text-s fw-bold text-uppercase mb-0">' +
                                                                end + '</p>' +
                                                        '</div>' +
                                                        '<div class="col">' +
                                                            '<h6 class="text-gray-300 text-xs mb-1"><i class="fas fa-calendar"></i> {{ __("basic.nights number") }}</h6>' +
                                                            '<p class="text-gray-500 text-s fw-bold text-uppercase mb-0">' +
                                                                data.days + ' {{ __("basic.nights") }} </p>' +
                                                        '</div>' +
                                                    '</div>' +

                                                    '<hr class="mb-2 mt-3">' +

                                                    '<div class="row pt-2 align-items-center px-0 px-md-2">' +
                                                        '<div class="col-12 col-md-4 d-flex mb-2 align-items-center">' +
                                                                '<img class="rounded-circle avatar-small2 me-2" src=' + avatar_url + '/' + data.img + '>' +
                                                            '<div class="text-start"">' +
                                                            '<p class="mb-0 text-xs fw-bold text-gray-600 room_id_cont">' + data.name + '</p>' +
                                                                '<p class="mb-0 text-xs text-gray-300 ">' + data.info + '</p>' +
                                                                '<p class="mb-0 text-xs text-gray-300 ">BR:' + data.broker_name + '</p>' +
                                                            '</div>' +
                                                        '</div>' +

                                                        '<div class="col mb-2">' +
                                                            '<h6 class="text-gray-300 text-xs mb-1"><i class="fas fa-utensils"></i> {{ __("basic.meal") }}</h6>' +
                                                            '<p class="text-gray-600 text-s fw-bold text-uppercase unit_room_meal_cont">' + data.meal_name + '</p>' +
                                                        '</div>' +

                                                        '<div class="col mb-2">' +
                                                            '<h6 class="text-gray-300 text-xs mb-1"><i class="fas fa-users"></i> PP <small>' + data.market_name + '</small></h6>' +
                                                        '</div>' +

                                                        '<div class="col mb-2">' +
                                                            '<h6 class="text-gray-300 text-xs mb-1"><i class="fas fa-dollar-sign"></i> RBP</h6>' +
                                                            '<input name="room_price_buy[]" class="text-center form-control border-0 px-0" type="number" value="' + data.final_room_price_buy + '"style="padding: 0 !important;font-weight: 600;height: 26px !important;">' +
                                                        '</div>' +

                                                        '<div class="col mb-2">' +
                                                            '<h6 class="text-gray-300 text-xs mb-1"><i class="fas fa-dollar-sign"></i> RSP</h6>' +
                                                            '<input type="hidden" name="market_id[]" value="' + data.market_id + '">' +
                                                            '<input type="hidden" name="comes_from[]" value="' + data.comes_from + '">' +
                                                            '<input type="hidden" name="broker_id[]" value="' + data.broker_id + '">' +
                                                            '<input type="hidden" name="unit_id[]" value="' + data.unit_id + '">' +
                                                            '<input type="hidden" name="unit_offer_id[]" value="' + data.unit_offer_id + '">' +
                                                            '<input type="hidden" name="offer_room_id[]" value="' + data.offer_room_id + '">' +
                                                            '<input type="hidden" name="offer_room_price_id[]" value="' + data.offer_room_price_id + '">' +
                                                            '<input name="room_price[]" class="room_price text-center form-control border-0 px-0" type="number" value="' + data.final_room_price_sell + '"style="padding: 0 !important;font-weight: 600;height: 26px !important;">' +
                                                        '</div>' +

                                                        '<div class="col mb-2">' +
                                                            '<h6 class="text-gray-300 text-xs mb-1"><i class="fas fa-bed"></i> Qty</h6>' +
                                                            '<select class="js-example-basic-single select2-no-search select2-hidden-accessible room_qty_input" name="room_qty[]" required>' +
                                                                '<option value="0">0</option><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option> <option value="8">8</option><option value="9">9</option><option value="10">10</option>' +
                                                        '</select>' +
                                                        '</div>' +

                                                        '<div class="col mb-2">' +
                                                            '<h6 class="text-gray-300 text-xs mb-1"><i class="fas fa-dollar-sign"></i> {{ __("basic.final") }}</h6>' +
                                                            '<p class="text-gray-600 text-s fw-bold final_price_room_input">0</p>' +
                                                            '<div class="room_final_price_cont"></div>' +
                                                        '</div>' +

                                                    '</div>' +

                                                    '</div>' +

                                                    '</div>' +
                                                '</div>'
                                    );

                                    $('.js-example-basic-single').select2();
                            }

                        });

                    }
                }
                //no clicks
                else {
                    if (event.type === "click") {
                        $(this).addClass("firstClick");
                        $('#calander_date_start').addClass("firstClick");

                        var day = $(this).data("day");
                        var start = $(this).data("timeslots");
                        $('#calander_date_start').val(start);
                        $('#calander_date_end').val('');


                        $('#calander_cont_int_info').show();
                        $('#calander_cont_int_info_start').html(start);


                    }
                }

            });


            // update hotel booking
            $(document).on('click', '.update_hotel_booking_modal', function() {
                var id = $(this).data('id');
                var booking_fetch = '#unit_booking_' + id;

                var room_id_input = $(booking_fetch).find(".room_id_input option:selected").text();
                var unit_room_view_input = $(booking_fetch).find(".unit_room_view_input option:selected").text();
                var unit_room_meal_input = $(booking_fetch).find(".unit_room_meal_input option:selected").text();

                $(booking_fetch).find(".room_id_cont").html(room_id_input + "(" + unit_room_view_input + ")");
                $(booking_fetch).find(".unit_room_meal_cont").html(unit_room_meal_input);
            })


        });
</script>

<script>
    //--------------------- search engine ajax -------------------

        $(document).ready(function() {

            // ------- Debtors --------
            // Send Search Text to the server
            $("#debtor-search-eng").keyup(function() {

                let search_query = $(this).val();

                var url = "{{ route('sett.debtor_search', ':search_query') }}";
                url = url.replace(':search_query', search_query);

                if (search_query != "") {
                    $.ajax({
                        url: url,
                        type: "GET",
                        dataType: "json",
                        success: function(data) {

                            avatar_url = '{{ URL::asset('img/useravatar') }}';

                            if (data !== "") {
                                $('#debtor-hid-info-search').show();

                                var html = ''
                                $.each(data, function(key, value) {

                                    html +=
                                        '<div class="row border-top-gray py-4 align-items-center px-0 px-md-2">' +

                                        '<div class="col-12 col-md-5 d-flex mb-2 align-items-center">' +

                                        '<div class="position-relative">' +
                                        '<img class="rounded-circle avatar-small2 me-3" src=' + avatar_url + '/' + value.avatar + '>' +
                                        '</div>' +

                                        '<div><p class = "mb-0 text-xs text-gray-300 ">{{ __('basic.broker') }} </p> <p class = "mb-0 text-xs fw-bold text-gray-600 " >' + value.name +'</p> </div> </div>' +

                                        '<div class="col-4 col-md mb-2">' +
                                        '<h6 class="text-gray-300 text-xs mb-1">{{ __('basic.company name') }}</h6>' +
                                        '<p class="text-gray-600 text-s fw-bold">' + value.company_name + '</p></div>' +

                                        '<div class="col-3 col-md mb-2">' +
                                        '<h6 class="text-gray-300 text-xs mb-1">{{ __('patientappo.phone number') }}</h6>' +
                                        '<p class="text-gray-600 text-s fw-bold">' + value.phone_number + '</p></div>' +

                                        '<div class="col-4 col-md mb-2 text-center">' +
                                        '<h6 class="text-gray-300 text-xs mb-1">{{ __('basic.balance') }}</h6>' +
                                        '<p class="text-gray-600 text-s fw-bold">' + value.balance + '</p></div>' +

                                        '<div class="col-4 col-md mb-2 text-end">' +
                                        '<input type="button"  data-type="debtor" name="next" class="next-form-steps btn btn-primary search-select-btn debtor-search-select-btn" value="{{ __('basic.continue') }}" data-id="' +
                                        value.id + '" data-full_name="' + value.name + '" data-phone_number="' + value.phone_number + '" data-email="' + value.email + '" data-avatar="' + value.avatar + '" data-balance="' + value.balance + '">' +
                                        '</div>' +

                                        '</div>'
                                });

                                $('#debtor_info_ajax').html(html);
                            }

                            if (data == "") {
                                $('#debtor_info_ajax').html(
                                    '<a class="list-group-item list-group-item-action border-0 text-gray-700"><i class="fas fa-search text-gray-200 me-2"></i>{{ __("basic.no record found") }}</a>'
                                );
                            }
                        },
                    });
                } else {
                    $('#debtor-hid-info-search').hide();
                    $("#debtor_info_ajax").empty();
                }
            });

            $(document).on("click", ".debtor-search-select-btn", function() {
                var id = $(this).data('id');
                $('#debtor_search_patient_id').val(id);

                if (!$('#myform').valid()) {
                    return false;
                }

                if (id !== undefined) {
                    var name = $(this).data('full_name');
                    var phone_number = $(this).data('phone_number');
                    var email = $(this).data('email');
                    var avatar = $(this).data('avatar');
                    var balance = $(this).data('balance');
                    $("#debtor_search_patient_id").val(id);
                } else {
                    var first_name = $("input[name=debtor_first_name]").val();
                    var second_name = $("input[name=debtor_second_name]").val();
                    var name = first_name + ' ' + second_name;
                    var phone_number = $("input[name=debtor_phone_number]").val();
                    var email = $("input[name=debtor_email]").val();
                    var avatar = 'default-pp.png';
                    var balance = 0;
                    $("#debtor_search_patient_id").val("new");
                }

                avatar_url = "{{ URL::asset('img/debtor') }}";

                $("#avatar_final_info").attr("src", avatar_url + '/' + avatar);
                $('#name_final_info').text(name);
                $('#number_final_info').text(phone_number);

                // send sms and email
                $('#send_sms').val(phone_number);
                $('#send_email').val(email);

                $('#wallet_total_final_info').show()
                $('#wallet_total_final_info_current_wallet').html(balance)

                $('#type_reciver_final_info').html("{{ __('basic.broker') }}");

                $('#traveler_btn_skip').show()

            });



            $(document).on("click", "#previous-form-steps-traveler", function() {
                $('#debtor_search_patient_id').val("");
                $('#traveler_btn_skip').hide()
                $('#wallet_total_final_info').hide()
            });


            $(document).on("click", "#form_submit_btn", function() {
                var price = $('#price_total_final_info').text();

                if(price > 0){
                    $('#myform').submit();
                }else{
                    console.log(price);
                    $('#form_submit_btn_cont').html('{{ __("basic.no service") }}')
                    toastr.info('{{ __("basic.no service") }}');
                }

            });



            $('input[name="debtor_first_name"]').keyup(function(e) {
                e.preventDefault();
                first_name = $(this).val();
                new_password = 'tripo' + first_name;
                $('input[name="debtor_password"]').val(new_password);
                $('input[name="debtor_password_confirmation"]').val(new_password);
            })


            // ------- Traveler --------

            // Send Search Text to the server
            $("#search-eng").keyup(function() {

                let search_query = $(this).val();

                var url = "{{ route('sett.app_calander_patient_search', ':search_query') }}";
                url = url.replace(':search_query', search_query);

                if (search_query != "") {
                    $.ajax({
                        url: url,
                        type: "GET",
                        dataType: "json",
                        success: function(data) {

                            avatar_url = '{{ URL::asset('img/useravatar') }}';

                            if (data !== "") {
                                $('#hid-info-search').show();

                                var html = ''
                                $.each(data, function(key, value) {
                                    if (value.recommendation == 1) {
                                        recom_color = 'main-color-bg-200';
                                        recom_msg = 'Normal';
                                    } else if (value.recommendation == 2) {
                                        recom_color = 'text-green-ligh-bg';
                                        recom_msg = 'Recommended';
                                    } else if (value.recommendation == 3) {
                                        recom_color = 'text-red-bg';
                                        recom_msg = 'Not recommended';
                                    }
                                    html +=
                                        '<div class="row border-top-gray py-4 align-items-center px-0 px-md-2">' +

                                        '<div class="col-6 col-md-5 d-flex mb-2 align-items-center">' +
                                        '<div class="position-relative">' +
                                        '<img class="rounded-circle avatar-small2 me-3" src=' +
                                        avatar_url + '/' + value.avatar +
                                        '><div data-toggle="tooltip" data-placement="top" title="' +
                                        recom_msg +
                                        '" class="status-indicator-img-small ' +
                                        recom_color + '"></div>' +
                                        '</div>' +
                                        '<div><p class = "mb-0 text-xs text-gray-300 ">{{ __('basic.patient') }} </p> <p class = "mb-0 text-xs fw-bold text-gray-600 " >' +
                                        value.full_name +
                                        '</p> </div> </div>' +
                                        '<div class="col-6 col-md mb-2">' +
                                        '<h6 class="text-gray-300 text-xs mb-1">{{ __('patientappo.phone number') }}</h6>' +
                                        '<p class="text-gray-600 text-s fw-bold">' + value.phone_number + '</p></div>' +

                                        '<div class="col-6 col-md mb-2 text-end">' +
                                        '<input type="button" name="next" class="next-form-steps search-select-btn btn btn-primary" value="{{ __('basic.continue') }}" data-id="' +
                                        value.id + '" data-full_name="' + value.full_name + '" data-phone_number="' +
                                        value.phone_number + '" data-email="' +
                                        value.email + '" data-avatar="' + value.avatar + '">' +
                                        '</div>' +

                                        '</div>'
                                });

                                $('#patient_info_ajax').html(html);
                            }

                            if (data == "") {
                                $('#patient_info_ajax').html(
                                    '<a class="list-group-item list-group-item-action border-0 text-gray-700"><i class="fas fa-search text-gray-200 me-2"></i>No Record founded</a>'
                                );
                            }
                        },
                    });
                } else {
                    $('#hid-info-search').hide();
                    $("#patient_info_ajax").empty();
                }
            });

        });

</script>


<script>
    //--------------------- coupons and discount -------------------
        $(document).on('click', '#coupon-buttn', function() {

            var search_query = $('#coupon_input').val();
            var patient_check = $('#search_patient_id').val();

            //services price
            var total_price = $('#final_price_show').val();


            if (!patient_check) {
                var patient_id = 'null';
            } else {
                var patient_id = patient_check;
            }

            var url =
                "{{ route('sett.invo_coupon_search', [':search_query', ':patient_id', ':total_price']) }}";
            url = url.replace(':search_query', search_query).replace(':patient_id', patient_id).replace(
                ':total_price', total_price);

            $.ajax({
                url: url,
                type: "GET",
                dataType: "json",
                success: function(data) {
                    //if the coupon is not valid or used before
                    if (!data.discount_amount) {
                        $('#coupon_input').val("")
                        $("#discount_amount_div").addClass('d-none');
                        $("#search-result-input").html('<p class="text-red-error">' + data.msg +
                            '</p>');
                        $("#price_total_final_info").html('$' + total_price);

                        //if the coupon is valid
                    } else {
                        $("#discount_amount_div").removeClass('d-none');

                        $("#search-result-input").html('<p class="me-2 text-green">' + data.msg +
                            '<small id="delete_coupon" class="text-red clickable-item-pointer"> DELETE</small><p>'
                        );

                        $("#discount_amount_place").html('$' + data.discount_amount);

                        //insert the coupon id to the hidden input
                        $("#coupon_id").val(data.id);

                        var after_discount = total_price - data.discount_amount;
                        $("#price_total_final_info").html('$' + after_discount);
                    }
                }
            });
        });


        //in case the user want to delete the coupon
        $(document).on('click', '#delete_coupon', function() {
            var total_price = $('#final_price_show').val();
            $("#discount_amount_div").addClass('d-none');
            $('#coupon_input').val('');
            $("#search-result-input").html('');
            $("#price_total_final_info").html('$' + total_price);
            //set null to coupon id hidden input
            $("#coupon_id").val("");
        })


        $(document).on('keyup', '#discount', function() {
                var discount = $(this).val();
                var total_price = parseFloat($('#final_price_show').val());
                if(total_price == 0 || discount > total_price){
                    return false
                }
                var final_price = parseFloat(total_price - discount);
                $('#price_total_final_info').html(final_price);
        });

</script>

<script>
    //get the final details appointment to show in the last slide
            $(document).on("click", ".search-select-btn", function() {

                //remove no service msg
                $('#form_submit_btn_cont').html('')

                id = $(this).data('id');
                type = $(this).data('type');

                if (id !== undefined) {
                    var name = $(this).data('full_name');
                    var phone_number = $(this).data('phone_number');
                    var email = $(this).data('email');
                    var avatar = $(this).data('avatar');
                } else {
                    var first_name = $("input[name=first_name]").val();
                    var second_name = $("input[name=second_name]").val();
                    var name = first_name + ' ' + second_name;
                    var phone_number = $("input[name=phone_number]").val();
                    var email = $("input[name=email]").val();
                    var avatar = 'default-pp.png';
                }

                var branch_name = $('#dest_selc_form').find(':selected').data('branch_name');
                var branch_address = $('#dest_selc_form').find(':selected').data('branch_address');
                var service_name = $('#services').find(':selected').data('name');

                var avatar_url = '{{ URL::asset('img/useravatar') }}';

                if(type !== "debtor"){
                    $('#search_patient_id').val(id);
                }

                $("#avatar_final_info").attr("src", avatar_url + '/' + avatar);
                $('#name_final_info').text(name);
                $('#number_final_info').text(phone_number);
                $('#email_final_info').val(email);

                // send sms and email
                $('#send_sms').val(phone_number);
                $('#send_email').val(email);

                $('#branch_final_info').text(branch_name);
                $('#addre_final_info').text(branch_address);
                $('#type_reciver_final_info').html("{{ __('basic.traveler') }}");

                var service_price = $('#services').find(':selected').data('price');
                var room = $('#room').val();
                var final_price_before_days = service_price * room;

                //-------- Hotel ----------


                var room_qty_input = $('.room_qty_input');
                // var hotel_name = $("#units_selc_form option:selected").text();
                hotel_rooms_number = 0;
                hotel_final_price = 0;

                $.each(room_qty_input, function(key, value) {
                    if(this.value > 0){
                        hotel_final_price += parseFloat($('.room_price')[key].value * this.value);
                        hotel_rooms_number += parseFloat(this.value);
                    }
                });


                //get days between two dates
                // var startDay = new Date(start_time_appo);
                // var endDay = new Date(end_time_appo);
                // var millisBetween = startDay.getTime() - endDay.getTime();
                // var days = millisBetween / (1000 * 3600 * 24);
                // var days = Math.round(Math.abs(days))

                // if(!isNaN(days)){
                //     var final_price_hotel = final_price_before_days * days;
                // }else{
                //     var final_price_hotel = 0;
                // }


                //-------- Package ----------

                var package_id_input = $("input[name='booking_package_sell[]']")

                var package_to_price = 0;
                var package_qty = 0;

                $.each(package_id_input, function(key, value) {
                        package_qty += 1;
                        package_to_price += parseFloat(this.value);
                });

                //----- bus ------

                var bus_from_price = $("input[name=bus_from_id]").attr('data-price');
                var bus_from_qty = $("input[name=bus_from_qty]").val();

                if(bus_from_price){
                    var bus_from_price = $("input[name=bus_from_id]").attr('data-price');
                }else{
                    var bus_from_price = 0;
                }
                var bus_from_final_price = bus_from_price * bus_from_qty;


                var bus_to_price = $("input[name=bus_to_id]").attr('data-price');
                var bus_to_qty = $("input[name=bus_to_qty]").val();

                if(bus_to_price){
                    var bus_to_price = $("input[name=bus_to_id]").attr('data-price');
                }else{
                    var bus_to_price = 0;
                }
                var bus_to_final_price = bus_to_price * bus_to_qty;


                //-------- Limo ----------


                var limo_qty_input = $('.limo_sell_input');

                var limo_number = 0;
                var limo_final_price = 0;

                $.each(limo_qty_input, function(key, value) {
                    if(this.value > 0){
                        limo_number += 1;
                        limo_final_price += parseFloat(this.value);
                    }
                });


                //-------- Visa ----------

                var visa_id_input = $("#visa_id").val();

                if(visa_id_input !== "false"){
                    var visa_to_name = $("#visa_id option:selected").text();
                    var visa_to_price = $("select[name=visa_type] option:selected").attr('data-price');

                    if(visa_to_price){
                        var visa_to_price = parseInt($("select[name=visa_type] option:selected").attr('data-price'));
                        var visa_qty = $("#visa_qty").val();
                        var visa_to_price = visa_to_price * visa_qty;
                    }else{
                        var visa_to_price = 0;
                        var visa_qty = 0;
                    }
                }else{
                    var visa_to_name = '{{ __("basic.not selected") }}';
                    var visa_to_price = 0;
                    var visa_qty = 0;
                }


                //-------- Airline ----------

                var from_airline = $("#from_airline").val();

                if(from_airline !== "false"){
                    var airline_from_price = $("input[name=sell_airline]").val();
                    var airline_from_qty = $("select[name=adult_airline]").val();
                }else{
                    var airline_from_price = 0;
                    var airline_from_qty = 0;
                }

                var airline_from_final_price = airline_from_price * airline_from_qty;

                var airline_to_date = $("#airline_to_date").val();

                if(airline_to_date){
                    var airline_to_price = $("input[name=sell_airline_return]").val();
                    var airline_to_qty = $("select[name=adult_airline]").val();
                }else{
                    var airline_to_price = 0;
                    var airline_to_qty = 0;
                }

                var airline_to_final_price = airline_to_price * airline_to_qty;

                //-------- Trip ----------

                var trip_id_input = $("#trip_id").val();

                if(trip_id_input !== "false"){
                    var trip_to_name = $("#trip_id option:selected").text();
                    var trip_to_price = $("select[name=trip_offer_id] option:selected").attr('data-price');

                    if(trip_to_price){
                        var trip_to_price = parseInt($("select[name=trip_offer_id] option:selected").attr('data-price'));
                        var trip_qty = $("#trip_qty").val();
                        var trip_to_price = trip_to_price * trip_qty;
                    }else{
                        var trip_to_price = 0;
                        var trip_qty = 0;
                    }
                }else{
                    var trip_to_name = '{{ __("basic.not selected") }}';
                    var trip_to_price = 0;
                    var trip_qty = 0;
                }

                //-------- Final price ---------
                var final_price = parseInt(hotel_final_price + package_to_price + bus_from_final_price + bus_to_final_price + limo_final_price + visa_to_price + airline_from_final_price + airline_to_final_price + trip_to_price);



                // broker wallet
                var wallet = parseFloat($("#wallet_total_final_info_current_wallet").html());
                var after_wallet_withdraw = parseFloat(wallet - final_price);

                $("#wallet_total_final_info_after_withd_wallet").html(after_wallet_withdraw)


                //hotel
                $('#hotel_final_info').text(hotel_rooms_number + " {{ __('basic.rooms') }}");
                $('#hotel_price_final_info').text(hotel_final_price);

                //package
                $('#package_final_info').text( package_qty + "{{ __('basic.package') }}");
                $('#package_price_final_info').text(package_to_price);

                //bus from
                $('#bus_from_final_info').text('Bus Ticket Single *' + bus_from_qty);
                $('#bus_from_price_final_info').text(bus_from_final_price);

                //bus to
                $('#bus_to_final_info').text('Bus Ticket Return *' + bus_to_qty);
                $('#bus_to_price_final_info').text(bus_to_final_price);

                //Limo
                $('#limo_final_info').text(limo_number + " {{ __('basic.limousine') }}");
                $('#limo_price_final_info').text(limo_final_price);

                //airline from
                $('#airline_from_final_info').text('Airline Ticket Single *' + airline_from_qty);
                $('#airline_from_price_final_info').text(airline_from_final_price);

                //airline to
                $('#airline_to_final_info').text('Airline Ticket Return *' + airline_to_qty);
                $('#airline_to_price_final_info').text(airline_to_final_price);

                //visa
                $('#visa_final_info').text('Visa to ' + visa_to_name + " *" + visa_qty);
                $('#visa_price_final_info').text(visa_to_price);

                //trip
                $('#trip_final_info').text('Trip ' + trip_to_name + " *" + trip_qty);
                $('#trip_price_final_info').text(trip_to_price);

                //final_price
                $('#price_total_final_info').text(final_price);
                $('#final_price_show').val(final_price);

                // $('#date_final_info').text(time_appointment);
                // $('#time_final_info').text(date_final);
            })
</script>

<!-- international telephone input -->
<script src="{{ URL::asset('plugins/internationaltelephone/intlTelInput.min.js') }}"></script>

<script>
    //to enable international telephone input (#int-miphone) is where we need to insert it
        const phoneInputField = document.querySelector("#int-miphone");
        const phoneInput = window.intlTelInput(phoneInputField, {
            //preferred countries https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2
            preferredCountries: ["eg", "sa", "ae", "qa"],
            utilsScript: "{{ URL::asset('plugins/intltelinput/utils.js') }}",
        });
        const phoneInputField2 = document.querySelector("#int-miphone2");
        const phoneInput2 = window.intlTelInput(phoneInputField2, {
            //preferred countries https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2
            preferredCountries: ["eg", "sa", "ae", "qa"],
            utilsScript: "{{ URL::asset('plugins/intltelinput/utils.js') }}",
        });
</script>



{{-- send sms and email --}}
<script>
    // email
    $(document).on("change", "#send_email_status", function() {
        var status = $(this);
        if(status.is(':checked')){
            $('#send_email_cont').show();
        }else{
            $('#send_email_cont').hide();
        }
    });
    //sms
    $(document).on("change", "#send_sms_status", function() {
        var status = $(this);
        if(status.is(':checked')){
            $('#send_sms_cont').show();
        }else{
            $('#send_sms_cont').hide();
        }
    });
</script>
@endsection