@extends('layouts.master')

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

@section('title-topbar', 'New Appointment')

<!-- 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/intltelinput/intlTelInput.css') }}" rel="stylesheet">

@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" method="POST" action="{{ route('sett.appointment.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-bus"></i>
                                </div>
                                {{ __('basic.bus') }}
                            </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.file') }}
                            </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-no-search 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-no-search 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">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">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">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-no-search 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-no-search 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> Start</h6>
                                                        <p id="calander_cont_int_info_start" class="text-light text-s fw-bold text-uppercase mb-0">
                                                            Not Selected</p>
                                                    </div>
                                                    <div class="col">
                                                        <h6 class="text-blue-300 text-xs mb-1"><i class="fas fa-calendar"></i> End</h6>
                                                        <p id="calander_cont_int_info_end" class="text-light text-s fw-bold text-uppercase mb-0">
                                                            Not Selected</p>
                                                    </div>
                                                    <div class="col">
                                                        <h6 class="text-blue-300 text-xs mb-1"><i class="fas fa-calendar"></i> Days</h6>
                                                        <p id="calander_cont_int_info_days" class="text-light text-s fw-bold text-uppercase mb-0">
                                                            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">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">Package</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">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">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">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> 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">
                                                            Single
                                                        </option>
                                                        <option value="double" data-qty="2">
                                                            Double
                                                        </option>
                                                        <option value="triple" data-qty="3">
                                                            Tripe
                                                        </option>
                                                        <option value="quad" data-qty="4">
                                                            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="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>

                        <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">
                                Skip</p>
                            <input type="button" name="next" class="next-form-steps btn btn-primary action-button-next" value="{{ __('basic.continue') }}" />
                        </div>
                    </div>

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

                    <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="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>
                        </ul>

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

                            <!-- search for patients -->
                            <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">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">From
                                                                            <span class="text-gray-500 fw-bold">{{
                                                                                $item->from->name }}</span>
                                                                        </p>
                                                                    </span>
                                                                    <span>
                                                                        <p class="text-gray-300 text-xs mb-0">To
                                                                            <span class="text-gray-500 fw-bold">{{
                                                                                $item->to->name
                                                                                }}</span>
                                                                        </p>
                                                                    </span>
                                                                </div>
                                                                <h6 class="mb-0">
                                                                    {{ date('d M Y', strtotime($item->date)) }}
                                                                    <p class="text-gray-400 text-xs mb-0">
                                                                        {{ date('h:i a', strtotime($item->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">seats</span>
                                                                </h6>
                                                                <h6 class="mb-0 fw-bold">{{ $item->price_per_seat }}
                                                                    <span class="text-gray-400 text-xs mb-0">EGP</span>
                                                                </h6>
                                                            </div>
                                                            <div class="col-6 text-center">
                                                                <div id="bus_chart_btn_{{ $item->id }}" data-id="{{ $item->id }}" data-price="{{ $item->price_per_seat }}" class="b-r-l-cont btn btn-primary px-4 btn_bus_select">
                                                                    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>
                                                                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>
                                                                    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>


                            <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">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">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">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">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>

                            <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">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">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">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">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">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">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">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">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">Buy Singl</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">Sell Single</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">Buy Return</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">Sell Return</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>

                            <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">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">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">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>
                                                            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">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">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>

                        </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 col-md-7">
                                <h6 class="text-gray-400 mb-3">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">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> Create a 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 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">
                                <p data-skip="true" class="text-gray-300 clickable-item-pointer next-form-steps mb-0 me-2">
                                    Skip</p>
                                <input type="button" name="next" class="next-form-steps btn btn-primary action-button-next" value="{{ __('basic.continue') }}" />
                            </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">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 pb-0">
                                                    <input type="button" name="previous" class="previous-form-steps btn btn-secondary action-button-previous me-3" value="{{ __('basic.previous') }}">
                                                </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="{{ old('birthday') }}">
                                                </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">{{ __('patientappo.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" 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/GGeMmsPz.jpeg') }}">
                                <div class="">
                                    <p class=" mb-0 text-xs text-gray-300">
                                        {{ __('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">
                                        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-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">
                                        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">
                                        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 d-none" id="discount_amount_div">
                                <div class="me-2">
                                    <i class="fas fa-percent me-2 text-gray-400"></i> 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 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') }}" />
                            <input type="submit" name="next" class="next-form-steps btn btn-primary action-button-next" value="{{ __('basic.send') }}" />
                        </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>

                </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-capsules 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" 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.medicines') }}</span>
                                </a>
                            </li>

                            <li>
                                <a>
                                    <div class="icon-circle d-flex align-items-center justify-content-center">
                                        <i class="fas fa-vial"></i>
                                    </div>
                                    <span>{{ __('patientappo.sessions') }}</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">All The Package Itinerary</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> 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> 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> Total
                                            Buy <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> Total
                                            Sell for <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">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">Traveler Phone <small>(required)</small></label>
                                            <input name="ht_traveler_phone" type="number" class="form-control" 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')

<!-- 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 = 'destino' + 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">Not Selected</option>');
                    }
                }
            });
        } else {
            console.log('asdasd');
            $('select[name="region_id"]').html('<option value="1">Not Selected</option>');
        }
    }

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


<script>
    //--------------------- bus 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");
        }

    })





    //--------------------- 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_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(",");

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

        $('#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 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 + '">' +
            '<input type="hidden" name="package_qty_type[]" value="' + qty_type + '">' +
            '<input type="hidden" name="booking_package_offer_or_broker[]" value="' + cat + '">' +
            '<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 + '">' +

            '<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-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> 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> Total Buy PP</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="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">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">Destination</p>' +
                                '<h6 class="text-s text-gray-400 pe-2">' + value.destination
                                .name + '</h6>' +
                                '</div>' +

                                "</li>"
                            )

                        });
                    } else {
                        $('#package_modal_iti').html('Sorry!, There is 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('')

                        $.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 = "Hotel";
                                var hotel =
                                    '<div class="row"> <div class="col align-self-center me-1">' +
                                    '<p class="text-xs text-gray-200 mb-1"> 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"> 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"> Room View</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 = "Trip";

                            } else if (value.type == 3) {
                                var type = "transport";
                            } else if (value.type == 4) {
                                var type = "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">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">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>"
                            )
                        });

                        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> 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">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">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> 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> 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> 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> 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> 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>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>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) {
                        $('select[name="visa_type"]').append('<option value="sliver" data-price="' +
                            data.sliver_sell + '">Sliver</option>' +
                            '<option value="platinum" data-price="' +
                            data.platinum_sell + '">Platinum</option>' +
                            '<option value="gold" data-price="' +
                            data.gold_sell + '">Gold</option>' + '<option value="diamond" data-price="' +
                            data.diamond_sell + '">Diamond</option>');
                    } else {
                        $('select[name="visa_type"]').html('<option disabled>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.room_type.name +
                                '" >' + value.room_type.name + "-" + value.sell + '{{ __('
                                basic.egp ') }} </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();
        })


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

                    $('#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 + " days");

                            // $('#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">' +

                                //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' +
                                data.id +
                                '" class=" clickable-item-pointer text-gray-400">' +
                                '<i class="fas fa-plus"></i> <span> Add Traveler Name</span>' +
                                '</div>' +
                                '</div>' +

                                '<div class="modal fade" id="new_ht_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 room ') }}</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">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">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_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> 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> 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> Days</h6>' +
                                '<p class="text-gray-500 text-s fw-bold text-uppercase mb-0">' +
                                data.days + ' 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">' +
                                '<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 ">' + 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> 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> 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);


                }
            }

        });

    });
</script>

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

    $(document).ready(function() {
        // 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.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.name + '" data-phone_number="' +
                                    value.phone_number + '" 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();
            }
        });

        //in case the user chosse new patient to add the appointment for
        $(document).on('click', '#profile-tab', function() {
            $("#search_patient_id").prop('disabled', true);
        });

        //in case the user chosse new patient to add the appointment for
        $(document).on('click', '#home-tab', function() {
            $("#search_patient_id").prop('disabled', false);
        });
    });
</script>


<script>
    //--------------------- coupons -------------------
    $(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("");
    })
</script>

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

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

        if (id !== undefined) {
            var name = $(this).data('full_name');
            var phone_number = $(this).data('phone_number');
            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 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 service_price = $('#services').find(':selected').data('price');
        var room = $('#room').val();
        var final_price_before_days = service_price * room;


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


        //-------- 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 = $("#package_id").val();

        if (package_id_input !== "false") {
            var package_to_name = $("#package_id option:selected").text();
            var package_to_price = $("select[name=package_offer_id] option:selected").attr('data-price');

            if (package_to_price) {
                var package_to_price = parseInt($("select[name=package_offer_id] option:selected").attr(
                    'data-price'));
                var package_qty = $("#package_qty").val();
                var package_to_price = package_to_price * package_qty;
            } else {
                var package_to_price = 0;
                var package_qty = 0;
            }
        } else {
            var package_to_name = " Not Selected";
            var package_to_price = 0;
            var package_qty = 0;
        }

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

        //-------- 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 = " 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 = " 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 + visa_to_price + airline_from_final_price + airline_to_final_price +
            trip_to_price);

        $('#search_patient_id').val(id);
        $("#avatar_final_info").attr("src", avatar_url + '/' + avatar);
        $('#name_final_info').text(name);
        $('#number_final_info').text(phone_number);
        $('#branch_final_info').text(branch_name);
        $('#addre_final_info').text(branch_address);

        //hotel
        $('#hotel_final_info').text(hotel_rooms_number + " Rooms");
        $('#hotel_price_final_info').text(hotel_final_price);

        //package
        $('#package_final_info').text('Package ' + package_to_name + " *" + package_qty);
        $('#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);

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

@endsection