@extends('layouts.app')

@section('title', __('labels.project_title'))

@section('content')
    @php
        $ccfee                  = isset($company['ccfee']) ? $company['ccfee'] : 0;
        $passenger              = isset($company['passenger']) ? $company['passenger'] : '';
        $passengers             = isset($company['passengers']) ? $company['passengers'] : '';
        $bikeSelections         = isset($company['bike_selections']) ? $company['bike_selections'] : '';  
        $extraServices          = isset($company['extra_services']) ? $company['extra_services'] : '';
        $shuttleSelections      = isset($company['shuttle_selections']) ? $company['shuttle_selections'] : '';
        $vehicleRelocations     = isset($company['vehicle_relocations']) ? $company['vehicle_relocations'] : '';        
        $roomPreference         = isset($company['room_preference']) ? $company['room_preference'] : '';
        $additionalCharges      = isset($company['additional_charges']) ? $company['additional_charges'] : '';
        
        $tripText               = !empty($trip['NoteInclusions']) ?  $trip['L2_Description'] . " - " . $trip['NoteInclusions'] :$trip['L2_Description'];
        $tripDays               = isset($trip['NoDays']) ? $trip['NoDays'] : '';
        $tripCode               = isset($trip['L2_ShortCode']) ? $trip['L2_ShortCode'] : '';
        $isMultiple             = isset($trip['is_multiple_date']) ? $trip['is_multiple_date'] : '';
        $isHideEmergencyContact = isset($trip['Is_hide_emergency_con']) ? $trip['Is_hide_emergency_con'] : 0;
        $isShowBikeSelection    = isset($trip['Is_show_bike']) ? $trip['Is_show_bike'] : 0;
        $paymentMethod          = isset($trip['payment_method']) ? $trip['payment_method'] : '';
    @endphp

    @if(!$status)
        <!-- Invalid Page -->
        <div class="invalid_overflow d-flex justify-content-center align-items-center">
            <div class="text-center">
                <h1 class="display-1 fw-bold">{{ __('labels.not_found') }}</h1>
                <h1 class="text-danger">{{ __('labels.invalid_url') }}</h1>
            </div>
        </div>
    @else
        <div class="container-fluid w-90 overflow-auto">
            <!-- Navbar -->
            <nav class="bg-white pt-2 row mx-0">
                <div class="col-md-12 ps-0">
                    <a href="{{ $company['url'] ?? '#' }}" target="_blank">
                        <img src="data:image/png;base64,{{ $company['logo_base64'] ?? '' }}" 
                             alt="logo" class="logo_height">
                    </a>
                </div>
            </nav>
            <div class="row mx-0">
                <div class="col-lg-9 col-md-8 ps-0 d-flex align-items-end">
                    <h3 class="theme_col fs-32 mb-0" id="title">
                        {{ $tripText }}
                    </h3>
                </div>
                <div class="d-flex align-items-center col-md-4 col-lg-3 ps-0 pe-md-4 pe-0 mt-4 mt-md-0">
                    <ul class="nav nav-tabs border-bottom-0 d-flex flex-nowrap col-12" role="tablist">
                        <li class="nav-item w-50 position-relative">
                            <a class="icon-disable-on-submit nav-link fw-bold text-dark border-0 slider active p-0" data-menuid="1" href="#trip" onclick="event.preventDefault(); navigateTab('trip');">
                                <span class="step-label theme_col">{{ __('labels.trip') }}</span>
                                <span class="rounded-circle w-100 d-flex progress-container"></span>
                                <span class="rounded-circle wd-40px border border-3 d-flex bg-white position-relative align-items-center justify-content-center mt-3"><i class="fa-solid fa-check text-white d-none"></i></span>
                            </a>
                        </li>
                        <li class="nav-item w-50 position-relative details-tab2">
                            <a id="details-tab" class="icon-disable-on-submit nav-link fw-bold text-dark border-0 p-0 slider" data-menuid="2" href="#details" onclick="event.preventDefault(); navigateTab('details')">
                                <span class="step-label theme_col">{{ __('labels.details') }}</span>
                                <span class="rounded-circle w-100 d-flex progress-container"></span>
                                <span class="rounded-circle wd-40px border border-3 d-flex bg-white position-relative align-items-center justify-content-center mt-3"><i class="fa-solid fa-check text-white d-none"></i></span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a id="payment-tab" class="icon-disable-on-submit nav-link fw-bold text-dark border-0 p-0 slider" data-menuid="3" href="#pay" onclick="event.preventDefault(); navigateTab('pay')">
                                <span class="step-label theme_col">{{ __('labels.pay') }}</span>
                                <span class="rounded-circle wd-40px border border-3 d-flex bg-white position-relative align-items-center justify-content-center mt-3"><i class="fa-solid fa-check text-white d-none"></i></span>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
            <!-- Trip Content -->
            <div class="tab-content">
                <div id="trip" class="tab-pane active px-0 trip_height">
                    <form class="trip-form">
                        <input type="hidden" value="{{ $trip['Price'] ?? '' }}" id="tripPrice">
                        <input type="hidden" value="{{ $trip['RecID'] ?? '' }}" id="tripID">
                        <input type="hidden" value="" id="tripTotalPrice">
                        <input type="hidden" value="" id="isBookAnotherDay">
                        <input type="hidden" value="" id="is_main_trip_deleted">

                        <div class="row mx-0 mt-5 pt-2 mb-lg-5">
                            <div class="col-md-6 px-0">
                                <!-- Date and Calender -->
                                <div class="">
                                    <div class="col-7 col-xxl-10 col-xl-9 col-lg-10 col-md-11 col-12">
                                        <div class="">
                                            <div class="calendar-header d-flex justify-content-center align-items-center py-1">
                                                <div class="w-100 ms-0 me-2">
                                                    <select id="month" class="form-select rounded-0 py-1 shadow-none"></select>
                                                </div>
                                                <div class="me-2">
                                                    <select id="year" class="wd-100px form-select rounded-0 py-1 shadow-none"></select>
                                                </div>
                                                <div class="d-flex">
                                                    <button type="button" class="btn btn-light btn-sm me-1" onclick="changeMonth(-1)"><i class="fa-solid fa-angle-left dark_grap_col"></i></button>
                                                    <button type="button" class="btn btn-light btn-sm" onclick="changeMonth(1)"><i class="fa-solid fa-angle-right dark_grap_col"></i></button>
                                                </div>
                                            </div>
                                            <table class="table calendar-table mb-0 fs-14">
                                                <thead>
                                                <tr class="text-center">
                                                    <th>{{ __('labels.sun') }}</th>
                                                    <th>{{ __('labels.mon') }}</th>
                                                    <th>{{ __('labels.tue') }}</th>
                                                    <th>{{ __('labels.wed') }}</th>
                                                    <th>{{ __('labels.thu') }}</th>
                                                    <th>{{ __('labels.fri') }}</th>
                                                    <th>{{ __('labels.sat') }}</th>
                                                </tr>
                                                </thead>
                                                <tbody id="calendar-body"></tbody>
                                            </table>
                                        </div>
                                        <div class="input-wrapper">
                                            <span class="text-danger fs-14 d-none error-msg">{{ __('labels.date_required') }}</span>
                                            <input id="trip_date" type="text" value="" class="pe-none cursor-default form-control border-0 fs-14 py-2 mt-1 px-0 theme_col" required>
                                            <div class="fs-14 text-danger" id="booking_cutoff_error"></div>
                                            <div class="fs-14 text-danger" id="duplicate_date_error"></div>
                                        </div>
                                    </div>
                                </div>
                                <!-- Traveller Count -->
                                <div class="mt-5">
                                    <div class="col-7 col-xxl-7 col-xl-6 col-lg-6 col-md-11 col-12 input-wrapper pt-3">
                                        <div class="h-33"><label for="travellersCount" class="d-none fs-18 form-label mb-0">{{ __('labels.number_travellers', ['passengers' => $passengers])}}</label></div>
                                        <select required class="form-select mx-auto shadow-none rounded-1 fs-18 input_border py-7 down_icon" id="travellersCount" onchange="passengerCreation();">
                                            <option value="" hidden>{{ __('labels.number_travellers', ['passengers' => $passengers])}}</option>
                                            @for($i = $trip['PaxMin'] ?? 1; $i <= ($trip['PaxMax'] ?? 10); $i++)
                                                <option value="{{ $i }}">{{ $i }}</option>
                                            @endfor
                                        </select>
                                        <span class="text-danger fs-14 d-none error-msg">{{ __('labels.travellers_required', ['passengers' => $passengers]) }}</span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6 ps-md-3 px-0 d-flex flex-column mt-md-0 mt-4">
                                @if (!empty($trip['ShortDescription']))
                                    <label class="fs-20 fw-bold pb-2 mb-0">{{ __('labels.overview') }}</label>
                                @endif
                                <div class="form-label fs-14 overview_overflow mt-4 pt-2 pe-md-4">{{ $trip['ShortDescription'] ?? '' }}</div>
                                <div class="d-flex align-items-end mt-md-auto mt-4 pe-md-4">
                                    <button type="button" class="btn bg_dark_blue btn_hover w-100 text-white shadow-none border-0 rounded-1 fs-22 d-flex align-items-center px-3 ms-md-auto me-md-0 mx-auto py-2 mt-1" id="openDetailsBtn" onclick="navigateTab('details')">
                                        <span class="mx-md-5 fw-bold">{{ __('labels.bike_selection_traveller', ['passenger' => $passenger])}}</span>
                                        <i class="fa-solid fa-chevron-right fs-2"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                            @include('layouts.footer')
                    </form>
                </div>

                <!-- Details Content -->
                <div id="details" class="tab-pane fade px-0">
                    <form class="details-form ps-md-5 pe-md-4">
                        <div id="passenger_list">
                            <div class="pe-2 ps-0 py-7 mt-5 head_bg fs-18 fw-bold personal-details" data-traveller="1">{{ $company['passenger'] ?? '' }} 1 Details</div>
                            
                            <!-- Hidden Inputs -->
                            <input type="hidden" id="service_id_1" value="">
                            <input type="hidden" id="service_bike_id_1" value="">
                            <input type="hidden" id="service_bike_price_1" value="">
                            <input type="hidden" id="service_bike_selected_1" value="">
                            <input type="hidden" id="service_price_1" value="">
                            <input type="hidden" id="service_shuttle_id_1" value="">
                            <input type="hidden" id="service_shuttle_price_1" value="">

                            <!-- First / Last Name -->
                            <div class="row mx-0 mt-4">
                                <div class="col-md-6 col-12 ps-0 pe-md-3 pe-0">
                                    <div class="mb-4 input-wrapper">
                                        <label for="firstName1" class="form-label mb-1">{{ __('labels.first_name') }}<span class="text-danger">*</span></label>
                                        <input type="text" id="firstName1" class="form-control rounded-1 p-2 shadow-none" required>
                                        <span class="text-danger fs-14 d-none error-msg">{{ __('labels.first_name_required') }}</span>
                                    </div>
                                </div>
                                <div class="col-md-6 col-12 pe-0 ps-md-3 ps-0">
                                    <div class="mb-4 input-wrapper">
                                        <label for="lastName1" class="form-label mb-1">{{ __('labels.last_name') }}<span class="text-danger">*</span></label>
                                        <input type="text" id="lastName1" class="form-control rounded-1 p-2 shadow-none" required>
                                        <span class="text-danger fs-14 d-none error-msg">{{ __('labels.last_name_required') }}</span>
                                    </div>
                                </div>
                            </div>

                            <!-- Email / Phone -->
                            <div class="row mx-0">
                                <div class="col-md-6 col-12 ps-0 pe-md-3 pe-0">
                                    <div class="mb-4 input-wrapper">
                                        <label for="email1" class="form-label mb-1">{{ __('labels.email') }}<span class="text-danger">*</span></label>
                                        <input type="email" id="email1" class="form-control rounded-1 p-2 shadow-none" required>
                                        <span class="text-danger fs-14 d-none error-msg">{{ __('labels.email_required') }}</span>
                                    </div>
                                </div>
                                <div class="col-md-6 col-12 pe-0 ps-md-3 ps-0">
                                    <div class="mb-4 input-wrapper">
                                        <label for="phone1" class="form-label mb-1">{{ __('labels.phone') }}<span class="text-danger">*</span></label>
                                        <input type="tel" id="phone1" class="form-control rounded-1 p-2 shadow-none" required>
                                        <span class="text-danger fs-14 d-none error-msg">{{ __('labels.phone_required') }}</span>
                                    </div>
                                </div>
                            </div>

                            <!-- Height + About Us -->
                            <div class="row mx-0">
                                <div class="col-md-6 col-12 ps-0 pe-md-3 pe-0">
                                    <div class="mb-4 mb-md-0 input-wrapper">
                                        <label for="height1" class="form-label mb-1">{{ __('labels.height') }}<span class="text-danger">*</span></label>
                                        <div class="d-flex col-lg-6">
                                            <input type="text" id="height1" oninput="validHeight(this)" class="form-control rounded-1 p-2 shadow-none" required>
                                            <select class="form-select ms-2 shadow-none fs-16 py-2 ps-2 rounded-1 validate-ignore" id="heightUnit1">
                                                <option value="cm" selected>{{ __('labels.centimeter') }}</option>
                                                <option value="inches">{{ __('labels.inches') }}</option>
                                            </select>
                                        </div>
                                        <span class="text-danger fs-14 d-none error-msg">{{ __('labels.height_required') }}</span>
                                    </div>
                                </div>
                                <div class="col-md-6 col-12 pe-0 ps-md-3 ps-0">
                                    <div class="">
                                        <label for="about_us1" class="form-label mb-1">{{ __('labels.about_us') }}</label>
                                        <select class="form-select shadow-none p-2 rounded-1" id="about_us1">
                                            <option value="" selected hidden>{{ __('labels.select') }}</option>
                                            @foreach($aboutusOptions as $option)
                                                <option value="{{ $option['name'] }}">{{ $option['name'] }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <!-- Services  -->
                            <div class="row mx-0 mt-4">
                                <div class="col-md-6 col-12 ps-0 pe-md-3 pe-0">
                                    <div class="mb-4 pt-2 pt-md-0">
                                        <label for="firstTravellerMessage" class="d-none form-label mb-1">{{ __('labels.message') }}</label>
                                        <textarea id="firstTravellerMessage" class="form-control rounded-1 p-2 shadow-none input_border" rows="5" placeholder="{{ __('labels.message') }}"></textarea>
                                    </div>
                                </div>
                                <div class="col-md-6 col-12 pe-0 ps-md-3 ps-0">
                                    @if(is_array($bikeList) && $isShowBikeSelection == 1 && !empty($bikeList))
                                        <div class="mb-4 col-xxl-12 col-xl-7 col-lg-7 pt-2">
                                            <button type="button" class="btn border-0 bg_dark_blue text-white rounded-1" onclick="openService(1, 'bike_list')">
                                                {{ $bikeSelections }}<i class="fa-solid fa-chevron-right ms-2"></i>
                                            </button>
                                            <span id="selectedBikeServices_1"></span>
                                        </div>
                                    @endif

                                    @if(is_array($services) && !empty($services))
                                        <div class="mb-4 col-xxl-12 col-xl-7 col-lg-7 pt-2">
                                            <button type="button" class="btn border-0 bg_dark_blue text-white rounded-1" onclick="openService(1, 'extra_services')">
                                                {{ $extraServices }}<i class="fa-solid fa-chevron-right ms-2"></i>
                                            </button>
                                            <span id="selectedExtraServices_1"></span>
                                        </div>
                                    @endif

                                    @if(is_array($shuttles) && !empty($shuttles))
                                        <div class="mb-4 col-xxl-12 col-xl-7 col-lg-7 pt-2">
                                            <button type="button" class="btn border-0 bg_dark_blue text-white rounded-1" onclick="openService(1, 'shuttles')">
                                                {{ $shuttleSelections }}<i class="fa-solid fa-chevron-right ms-2"></i>
                                            </button>
                                            <span id="selectedshuttles_1"></span>
                                        </div>
                                    @endif
                                </div>
                            </div>

                            <!-- Emergency Contact  -->
                            @if($isHideEmergencyContact == 0)
                                <div class="pe-2 ps-0 py-7 my-3 head_bg fs-18 fw-bold emergency-details" data-traveller="1">{{ __('labels.emergency_contact_details') }}</div>
                                <div class="row mx-0">
                                    <div class="col-md-6 col-12 ps-0 pe-md-3 pe-0">
                                        <div class="mb-4 input-wrapper">
                                            <label for="emergencyFirstName" class="form-label mb-1">{{ __('labels.first_name') }}<span class="text-danger">*</span></label>
                                            <input type="text" id="emergencyFirstName" class="form-control rounded-1 p-2 shadow-none" required>
                                            <span class="text-danger fs-14 d-none error-msg">{{ __('labels.first_name_required') }}</span>
                                        </div>
                                    </div>
                                    <div class="col-md-6 col-12 pe-0 ps-md-3 ps-0">
                                        <div class="mb-4 input-wrapper">
                                            <label for="emergencyLastName" class="form-label mb-1">{{ __('labels.last_name') }}<span class="text-danger">*</span></label>
                                            <input type="text" id="emergencyLastName" class="form-control rounded-1 p-2 shadow-none" required>
                                            <span class="text-danger fs-14 d-none error-msg">{{ __('labels.last_name_required') }}</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="row mx-0">
                                    <div class="col-md-6 col-12 ps-0 pe-md-3 pe-0">
                                        <div class="mb-4 input-wrapper">
                                            <label for="emergencyPhone" class="form-label mb-1">{{ __('labels.phone') }}<span class="text-danger">*</span></label>
                                            <input type="tel" id="emergencyPhone" class="form-control rounded-1 p-2 shadow-none" required>
                                            <span class="text-danger fs-14 d-none error-msg">{{ __('labels.phone_required') }}</span>
                                        </div>
                                    </div>
                                    <div class="col-md-6 col-12 pe-0 ps-md-3 ps-0">
                                        <div class="mb-4 input-wrapper">
                                            <label for="emergencyRelationship" class="form-label mb-1">{{ __('labels.relationship') }}<span class="text-danger">*</span></label>
                                            <select class="form-select shadow-none p-2 rounded-1" id="emergencyRelationship" required>
                                                <option value="" selected hidden>{{ __('labels.select') }}</option>
                                                @foreach($relationshipOptions as $option)
                                                    <option value="{{ $option['name'] }}">{{ $option['name'] }}</option>
                                                @endforeach
                                            </select>
                                            <span class="text-danger fs-14 d-none error-msg">{{ __('labels.relationship_required') }}</span>
                                        </div>
                                    </div>
                                </div>
                            @endif

                            <div class="personal-details-traveller">
                                <div class="pe-2 ps-0 py-7 my-3 head_bg fs-18 fw-bold personal-details" data-traveller="2">{{ $company['passenger'] ?? '' }} 2 Details</div>
                                
                                <input type="hidden" id="service_id_2" value="">
                                <input type="hidden" id="service_bike_id_2" value="">
                                <input type="hidden" id="service_bike_price_2" value="">
                                <input type="hidden" id="service_bike_selected_2" value="">
                                <input type="hidden" id="service_price_2" value="">
                                <input type="hidden" id="service_shuttle_id_2" value="">
                                <input type="hidden" id="service_shuttle_price_2" value="">

                                <!-- First / Last Name -->
                                <div class="row mx-0 mt-4">
                                    <div class="col-md-6 col-12 ps-0 pe-md-3 pe-0">
                                        <div class="mb-4 input-wrapper">
                                            <label for="firstName2" class="form-label mb-1">{{ __('labels.first_name') }}<span class="text-danger">*</span></label>
                                            <input type="text" id="firstName2" class="form-control rounded-1 p-2 shadow-none" required>
                                            <span class="text-danger fs-14 d-none error-msg">{{ __('labels.first_name_required') }}</span>
                                        </div>
                                    </div>
                                    <div class="col-md-6 col-12 pe-0 ps-md-3 ps-0">
                                        <div class="mb-4 input-wrapper">
                                            <label for="lastName2" class="form-label mb-1">{{ __('labels.last_name') }}<span class="text-danger">*</span></label>
                                            <input type="text" id="lastName2" class="form-control rounded-1 p-2 shadow-none" required>
                                            <span class="text-danger fs-14 d-none error-msg">{{ __('labels.last_name_required') }}</span>
                                        </div>
                                    </div>
                                </div>


                                <!-- Height + Services  -->
                                <div class="row mx-0">
                                    <div class="col-md-6 col-12 ps-0 pe-md-3 pe-0">
                                        <div class="mb-4 mb-md-0 input-wrapper">
                                            <label for="height2" class="form-label mb-1">{{ __('labels.height') }}<span class="text-danger">*</span></label>
                                            <div class="d-flex col-lg-6">
                                                <input type="text" id="height2" oninput="validHeight(this)" class="form-control rounded-1 p-2 shadow-none" required>
                                                <select class="form-select ms-2 shadow-none fs-16 py-2 rounded-1 ps-2 validate-ignore" id="heightUnit2">
                                                    <option value="cm" selected>{{ __('labels.centimeter') }}</option>
                                                    <option value="inches">{{ __('labels.inches') }}</option>
                                                </select>
                                            </div>
                                            <span class="text-danger fs-14 d-none error-msg">{{ __('labels.height_required') }}</span>
                                        </div>
                                    </div>

                                    <div class="col-md-6 col-12 pe-0 ps-md-3 ps-0">
                                        @if(is_array($bikeList) && $isShowBikeSelection == 1 && !empty($bikeList))
                                            <div class="mb-4 col-xxl-12 col-xl-7 col-lg-7 pt-2">
                                                <button type="button" class="btn border-0 bg_dark_blue text-white rounded-1" onclick="openService(2, 'bike_list')">
                                                    {{ $bikeSelections }}<i class="fa-solid fa-chevron-right ms-2"></i>
                                                </button>
                                                <span id="selectedBikeServices_2"></span>
                                            </div>
                                        @endif

                                        @if(is_array($services) && !empty($services))
                                            <div class="mb-4 col-xxl-12 col-xl-7 col-lg-7 pt-2">
                                                <button type="button" class="btn border-0 bg_dark_blue text-white rounded-1" onclick="openService(2, 'extra_services')">
                                                    {{ $extraServices }}<i class="fa-solid fa-chevron-right ms-2"></i>
                                                </button>
                                                <span id="selectedExtraServices_2"></span>
                                            </div>
                                        @endif

                                        @if(is_array($shuttles) && !empty($shuttles))
                                            <div class="mb-4 col-xxl-12 col-xl-7 col-lg-7 pt-2">
                                                <button type="button" class="btn border-0 bg_dark_blue text-white rounded-1" onclick="openService(2, 'shuttles')">
                                                    {{ $shuttleSelections }}<i class="fa-solid fa-chevron-right ms-2"></i>
                                                </button>
                                                <span id="selectedshuttles_2"></span>
                                            </div>
                                        @endif

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

                        <!-- Payment Button -->
                        <div class="row mx-0 mt-5 d-flex justify-content-end paymentButton">
                            <div class="col-md-6"> </div>
                            <div class="col-md-6 ps-0 ps-md-3 pe-0 pt-md-4">
                                <button type="button" class="btn bg_dark_blue text-white shadow-none fs-22 d-flex align-items-center px-4 py-3 w-100 rounded-1" id="openPayBtn" onclick="navigateTab('pay')">
                                    <span class="me-3 fw-bold w-100">{{ __('labels.payment') }}</span>
                                    <i class="fa-solid fa-chevron-right fs-2"></i>
                                </button>
                            </div>
                        </div>
                    </form>
                        @include('layouts.footer')
                </div>

                <!-- Payment Content -->
                <div id="pay" class="tab-pane fade px-0 trip_height">
                    <div class="row mx-0 px-0 pb-2 mb-md-4 mt-5">
                        <div class="col-md-6 ps-0 pe-0 pe-md-3">
                            <h6 class="fs-18 fw-bold mb-0">{{ __('labels.tour_details') }}</h6>
                            <div class="border mt-2 col-md-10 px-3 py-4 rounded-1">
                                <h6 class="fs-18 fw-bold mb-3 px-2">{{ $tripText }}</h6>
                                <div class="row mx-0">
                                    <div class="col-md-6 col-xxl-5 col-6 px-2">
                                        <label class="form-label fs-14">{{ __('labels.package') }}</label>
                                    </div>
                                    <div class="col-md-6 col-xxl-7 col-6 px-2 text-end">
                                        <label class="form-label fs-14" id="package_days">
                                            {{ $tripDays == 1 ? 'Full day' : $tripDays . ' days' }}
                                        </label>
                                    </div>
                                </div>

                                <div class="row mx-0">
                                    <div class="col-md-6 col-xxl-5 col-6 px-2">
                                        <label class="form-label fs-14">{{ __('labels.trip_code') }}</label>
                                    </div>
                                    <div class="col-md-6 col-xxl-7 col-6 px-2 text-end">
                                        <label class="form-label fs-14">{{ $tripCode }}</label>
                                    </div>
                                </div>

                                <div class="row mx-0">
                                    <div class="col-md-6 col-xxl-5 col-6 px-2">
                                        <label class="form-label fs-14">{{ __('labels.start_on') }}</label>
                                    </div>
                                    <div class="col-md-6 col-xxl-7 col-6 px-2 text-end">
                                        <label class="form-label fs-14" id="startDate"></label>
                                    </div>
                                </div>

                                <div class="row mx-0">
                                    <div class="col-md-6 col-xxl-5 col-6 px-2">
                                        <label class="form-label fs-14">{{ __('labels.ends_on') }}</label>
                                    </div>
                                    <div class="col-md-6 col-xxl-7 col-6 px-2 text-end">
                                        <label class="form-label fs-14" id="endDate"></label>
                                    </div>
                                </div>

                                <div class="row mx-0 pb-3">
                                    <div class="col-md-6 col-xxl-5 col-6 px-2">
                                        <label class="form-label fs-14 mb-lg-0">{{ __('labels.no_travellers', ['passengers' => $passengers]) }}</label>
                                    </div>
                                    <div class="col-md-6 col-xxl-7 col-6 px-2 text-end">
                                        <label class="form-label fs-14" id="travellers"></label>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-10">
                                @if($isMultiple == 1)
                                <h6 class="fs-18 fw-bold pb-2 mb-0 mt-4 pt-md-3">{{ __('labels.your_booking') }}</h6>
                                <div class="border mt-2 px-3 py-4 rounded-1">
                                    <div id="bookedTrip"></div>
                                    <button onclick="bookAnotherDay()" type="button" class="disable-on-submit mb-3 btn theme_col shadow-none border-theme rounded-1 fs-18 px-4 me-auto py-1">
                                        <i class="fa-solid fa-plus"></i>
                                        <span class="ms-2">{{ __('labels.book_another_day') }}</span>
                                    </button>
                                    <br>
                                    <span class="text-danger mb-2 fs-14 error-msg d-none" id="emptySelectedDate">{{ __('labels.empty_multiple_service_date') }}</span>
                                </div>
                                @endif

                                <h6 class="fs-18 fw-bold pb-2 mb-0 mt-4 pt-md-3">{{ __('labels.booking_details') }}</h6>
                                <div class="border mt-2 px-3 py-4 rounded-1">
                                    <div class="row mx-0 pt-3">
                                        <div class="col-md-7 col-8 px-2">
                                            <label class="form-label fs-14">{{ __('labels.travellers', ['passenger' => $passenger]) }}</label>
                                        </div>
                                        <div class="col-md-5 col-4 px-2 text-end">
                                            <span id="Price" class="form-label fs-14 text-end"></span>
                                        </div>
                                    </div>

                                    <div class="row mx-0 border-bottom h-0">
                                        <div class="col-md-7 col-8 px-2">
                                            <label class="form-label fs-14" id="bikeserviceName"></label>
                                        </div>
                                        <div class="col-md-5 col-4 px-2 text-end">
                                            <label class="form-label fs-14 d-none"></label>
                                            <label class="form-label fs-14 text-end" id="bikeserviceAmount"></label>
                                        </div>
                                    </div>

                                    <div class="row mx-0 border-bottom pt-2">
                                        <div class="col-md-7 col-8 px-2">
                                            <label class="form-label fs-14 mb-2" id="extraServiceLabel">{{ __('labels.extra_services_label') }}</label>
                                        </div>
                                        <div class="col-md-5 col-4 px-2 text-end">
                                            <label class="form-label fs-14 d-none"></label>
                                            <label class="form-label fs-14 mb-2 text-end" id="extraserviceAmount"></label>
                                        </div>
                                    </div>

                                    <div class="row mx-0 border-bottom pt-2">
                                        <div class="col-md-7 col-8 px-2">
                                            <label class="form-label fs-14 mb-2" id="shuttleServiceLabel">{{ __('labels.shuttles_label') }}</label>
                                        </div>
                                        <div class="col-md-5 col-4 px-2 text-end">
                                            <label class="form-label fs-14 d-none"></label>
                                            <label class="form-label fs-14 mb-2 text-end" id="shuttleserviceAmount"></label>
                                        </div>
                                    </div>

                                    <div class="row mx-0 border-bottom py-2">
                                        <div class="col-md-7 col-8 px-2">
                                            <label class="form-label fs-14 mb-0">{{ __('labels.sub_total') }}</label>
                                        </div>
                                        <div class="col-md-5 col-4 px-2 text-end">
                                            <label class="form-label fs-14 mb-0 text-end" id="subTotal"></label>
                                        </div>
                                    </div>

                                    <div class="row mx-0 py-2">
                                        <div class="col-md-7 col-8 px-2">
                                            <label class="form-label fs-14 mb-0">{{ __('labels.ccfee') }}</label>
                                        </div>
                                        <div class="col-md-5 col-4 px-2 text-end">
                                            <label class="form-label fs-14 mb-0 text-end" id="creditCardFee"></label>
                                        </div>
                                    </div>

                                    <div class="row mx-0 head_bg py-2">
                                        <div class="col-md-7 col-8 px-2">
                                            <label class="form-label fs-14 mb-0">{{ __('labels.total') }}</label>
                                        </div>
                                        <div class="col-md-5 col-4 px-2 d-flex justify-content-end">
                                            <span class="form-label fs-14 mb-0 pe-2">{{ $company['currency'] ?? '' }}</span>
                                            <label class="form-label fs-14 mb-0 text-end" id="Total"></label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-6 col-xxl-6 pe-0 ps-0 ps-md-3">                           
                            <div class="mt-4 mt-md-0">
                                <h6 class="fs-18 fw-bold pb-2 mb-0">{{ __('labels.payment') }}</h6>
                                <div class="border px-4 pt-4 rounded-1 h-400px">
                                    @if (empty($paymentMethod) || Str::lower($paymentMethod) == 'Both' || Str::lower($paymentMethod) == 'bankdeposit')
                                        <div class="row mx-0 border pad-10 rounded-1">
                                            <div class="col-md-6 col-6 align-content-center">
                                                <input class="form-check-input shadow-none cursor-pointer disable-on-submit payment_method_check_box" type="radio" name="flexRadioDefault" id="pay_later" @if (Str::lower($paymentMethod) == 'bankdeposit') checked @endif>
                                                <label class="form-label fw-bold fs-14 my-0 ms-3 cursor-pointer" for="pay_later">{{ __('labels.pay_later') }}</label>
                                            </div>
                                        </div>
                                    @endif
                                    @if (empty($paymentMethod) || Str::lower($paymentMethod) == 'both' || Str::lower($paymentMethod) == 'online')
                                        <div class="row mx-0 border py-2 rounded-1 mt-1">
                                            <div class="col-md-6 col-6 align-content-center">
                                                <input class="form-check-input shadow-none cursor-pointer disable-on-submit payment_method_check_box" type="radio" name="flexRadioDefault" id="stripe" checked>
                                                <label class="form-label fw-bold fs-14 my-0 ms-3 cursor-pointer" for="stripe">{{ __('labels.stripe') }}</label>
                                            </div>
                                            <div class="col-md-6 col-6 d-flex justify-content-end brand-icons">
                                                <img src="https://img.icons8.com/color/48/000000/visa.png" />
                                                <img src="https://img.icons8.com/color/48/000000/mastercard.png" />
                                                <img src="https://img.icons8.com/color/48/000000/amex.png" />
                                                <img src="https://img.icons8.com/color/48/000000/discover.png" />
                                                <!--
                                                <div class="card_border px-2 rounded-1 me-1 me-md-2 shadow-sm"><img src="{{ asset('images/visa.png') }}" class="wd-36px" alt="..."></div>
                                                <div class="card_border px-2 rounded-1 align-content-center me-1 me-md-2 shadow-sm"><img src="{{ asset('images/card.png') }}" class="wd-36px" alt="..."></div>
                                                <div class="card_border px-2 rounded-1 me-1 me-md-2 shadow-sm"><img src="{{ asset('images/amex.png') }}" class="wd-36px" alt="..."></div>
                                                <div class="card_border px-2 rounded-1 me-1 me-md-2 shadow-sm"><img src="{{ asset('images/discover.png') }}" class="wd-36px" alt="..."></div>
                                                -->
                                            </div>
                                        </div>
                                    @endif
                                    <span class="text-danger fs-14 d-none" id="stripeError">{{ __('labels.stripe_required') }}</span>
                                    <div class="row mx-0 pt-3">
                                        <div class="alert alert-success bg-white d-flex align-items-lg-center fs-16 py-2" role="alert">
                                            <div><img src="{{ asset('images/shield.png') }}" alt="..." width="18"></div>
                                            <div class="ms-2 fw-bold fs-12">{{ __('labels.secure_ssl') }}</div>
                                        </div>
                                    </div>
                                    <div id="card_details">
                                        <div class="payment-parent-container">
                                            <div class="d-flex justify-content-center mt-4">
                                                <h5 class="text-center fw-bold pe-2">{{ __('labels.total') . ' ' . $company['currency'] ?? '' }}</h5>
                                                <h5 class="text-center fw-bold" id="amount_with_currency"></h5>
                                            </div>
                                            <form id="payment-form">
                                                <label for="card-element" class="fw-bold mb-2">{{ __('labels.card_number') }}</label>
                                                <div id="card-element"></div>
                                                <div class="brand-icons">
                                                    <img src="https://img.icons8.com/color/48/000000/visa.png" />
                                                    <img src="https://img.icons8.com/color/48/000000/mastercard.png" />
                                                    <img src="https://img.icons8.com/color/48/000000/amex.png" />
                                                    <img src="https://img.icons8.com/color/48/000000/discover.png" />
                                                </div>
                                            </form>
                                            <span id="payment-result" class="text-danger fs-14 py-3"></span>
                                        </div>
                                    </div>
                                    <div id="payment_method_description" class="py-4 fs-14">{{ __('labels.payment_method_description') }}</div>
                                </div>
                                <div class="d-flex mt-5 mb-4 align-items-center px-4">
                                    <input type="checkbox" required class="mt-0 form-check-input light_box_check shadow-none cursor-pointer disable-on-submit" id="confirm_check">
                                    <label class="form-check-label fs-10 ms-2 cursor-pointer" for="confirm_check">
                                        {{ __('labels.confirm_check') }}
                                        <a href="https://www.myodyssey.app/privacy-policy/" target="blank">{{ __('labels.terms_condition') }}</a> and
                                        <a href="https://www.myodyssey.app/privacy-policy/" target="blank">{{ __('labels.privacy_policy') }}</a>
                                    </label>
                                </div>

                                <div class="text-danger fs-14 d-none px-4" id="confirm_checkError">{{ __('labels.terms_condition_privacy_error') }}</div>

                                <div class="row mx-0 pt-md-3 pt-4 px-4">
                                    <button id="confirm_booking_btn" class="disable-on-submit btn bg_dark_blue fs-22 shadow-none rounded-1 py-2 text-white d-flex align-items-center justify-content-center px-4" onclick="submitPassenger()">
                                        <span class="w-100">
                                            <span class="d-none spinner-border spinner-border-sm me-1" id="spinner" role="status" aria-hidden="true"></span>
                                            <span id="confirm_booking_label" class="fw-bold">{{ __('labels.confirm_booking') }}</span>
                                        </span>
                                        <i class="fa-solid fa-chevron-right fs-3 ms-auto"></i>
                                    </button>
                                </div>
                                <span class="text-danger fs-14" id="submitError"></span>
                                    @include('layouts.footer')
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        <script>
            window.addEventListener("pageshow", function(event) {
                if (event.persisted || window.performance.getEntriesByType("navigation")[0]?.type === "back_forward") {
                    window.location.reload();
                }
            });

            let SUCCESS_BOOKING_URL     = @json(route('success.booking'));
            let STRIPE_PAYMENT_URL      = @json(route('payment.index'));
            let PAYMENT_PRE_URL         = @json(route('payment.pre'));

            let LBL_EXTRA_SERVICES      = "{{ $extraServices  }}";
            let LBL_BIKE_SELECTION      = "{{ $bikeSelections }}";
            let LBL_SHUTTLES            = "{{ $shuttleSelections }}";
            let LBL_TRIP_TITLE          = "{{ $tripText }}";
            let LBL_PAYMENT_DETAILS     = "{{ __('labels.payment_details') }}";
            let LBL_SUBMIT_BOOKING      = "{{ __('labels.submit_booking') }}";
            let LBL_PAY_NOW             = "{{ __('labels.pay_now') }}";
            let LBL_TRAVELLER_DETAILS   = "{{ __('labels.traveller_details', ['passenger' => $passenger]) }}";
            let defaultCurrency         = "{{ __('labels.default_currency') }}";

            let aboutUsOptions      = @json($aboutusOptions);
            let relationshipOptions = @json($relationshipOptions);
            let bikeList            = @json($bikeList);
            let services            = @json($services);
            let shuttles            = @json($shuttles);
            let currencySymbol      = @json($currencySymbol);

            let passengerLabel      = "{{ $company['passenger'] ?? '' }}";
            let themeColor          = "{{ $company['hex_code'] ?? '' }}";
            let hoverThemeColor     = "{{ $company['hover_hex_code'] ?? '' }}";
            let redirectUrl         = "{{ $company['redirect_url'] ?? '' }}";
            let companyCurrency     = "{{ $company['currency'] ?? '' }}";
            let companyId           = "{{ $company['uuid'] ?? '' }}";
            let companyEmail        = "{{ $company['email'] ?? '' }}";
            let companyName         = "{{ $company['name'] ?? '' }}";
            let stripePublic        = "{{ $company['stripe_public_key'] ?? '' }}";
            let timezone            = "{{ $company['timezone'] ?? '' }}";

            let priceOfTrip         = "{{ $trip['Price'] ?? '' }}";
            let tripID              = "{{ $trip['id'] ?? '' }}";
            let tripCode            = "{{ $tripCode }}";
            let tripName            = "{{ $trip['L2_Description'] ?? '' }}";
            let tripStartAMPM       = "{{ $trip['TimeStartAMPM'] ?? '' }}";
            let tripStartHour       = "{{ $trip['TimeStartHr'] ?? '' }}";
            let tripStartMins       = "{{ $trip['TimeStartMin'] ?? '' }}";
            let bookingCutoffHours  = "{{ $trip['Booking_cutoff_hours'] ?? '' }}";
            let isMultiple          = "{{ $isMultiple }}";
            let tripDays            = parseInt("{{ $tripDays }}", 10);
            let ccfee               = {{ $ccfee }};

            localStorage.setItem('tripDays', Number(tripDays));

            document.documentElement.style.setProperty('--theme_text_color', themeColor);
            document.documentElement.style.setProperty('--hover_theme_text_color', hoverThemeColor);

        </script>
    @endif

@endsection