@extends('site.layouts.site-2')

@section('content')

<link href="{{ dsAsset('site/css/custom/website-booking.css') }}" rel="stylesheet" />

<link href="{{ dsAsset('site/css/custom/sophie.css') }}?v={{ time() }}" rel="stylesheet" />

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-0u8/3U+UqNS1IEmQc+7rGzY5TO7rwt8N+N9JBt2X28Q97wlp9k/RfVTcFv7uIT3JTEzQeD+UhXmtwGw8n+NwZA==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<!-- <script src="{{ dsAsset('site/js/custom/website-booking.js') }}"></script> -->

<script src="{{ dsAsset('js/lib/tel-input/js/intlTelInput.js?v=1.11115') }}"></script>

<script src="{{ dsAsset('js/lib/tel-input/js/intlTelInput-jquery.min.js?v=1.11115') }}"></script>

<script src="{{ dsAsset('js/lib/tel-input/js/intlTelInput.min.js?v=1.11115') }}"></script>

<script src="{{ dsAsset('js/lib/tel-input/js/intlTelInput.min.js?v=1.11115') }}"></script>

<script src="{{ dsAsset('js/lib/tel-input/js/utils.js?v=1.11115') }}"></script>

<script src="{{ dsAsset('site/js/custom/sophie.js') }}?v={{ time() }}"></script>




<!--start banner section -->

@if(!($web_app ?? false))
    <header id="site-header" class="minimal-header effect-one clr" data-height="110" itemscope="itemscope" itemtype="https://schema.org/WPHeader" role="banner" style="position: fixed; top: 0px; width: 100%; z-index: 998;">

        <div id="site-header-inner" class="clr container">

            <div id="site-logo" style="margin-top: 10px;" class="clr" itemscope="" itemtype="https://schema.org/Brand">

                <div id="site-logo-inner" class="clr">

                    <a href="https://www.web3.fireworks.digital/" class="custom-logo-link" rel="home" aria-current="page"><img style="width:150px!important;height:auto!important;max-width:unset!important;" src="https://appointment.fireworksmedia.com/booking/public/uploadfiles/fireworks-logo-v2.png" class="custom-logo" alt="" decoding="async"></a>
                </div>


            </div>

            <div id="site-navigation-wrap" class="clr d-none d-sm-block">

                <nav id="site-navigation" class="d-flex justify-content-end align-items-center navigation main-navigation clr" itemscope="itemscope" itemtype="https://schema.org/SiteNavigationElement" role="navigation">

                    <ul id="menu-mog" class="main-menu dropdown-menu sf-menu border-0 d-none d-sm-block">
                        <!-- <li id="menu-item-42339" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-42339"><a href="https://www.mog.com.my/" class="menu-link"><span class="text-wrap">Back to Corporate Website</span></a></li> -->
                    </ul>
                </nav>


            </div>

            <!-- <div class="oceanwp-mobile-menu-icon d-sm-none clr mobile-right d-flex">

                <a href="#" class="mobile-menu d-flex" aria-label="Mobile Menu">
                    <i class="fa fa-bars align-self-center" aria-hidden="true"></i>
                    <span class="oceanwp-text align-self-center">Menu</span>
                    <span class="oceanwp-close-text">Close</span>
                </a>

            </div> -->


        </div>


        <!-- <div id="mobile-fullscreen" class="clr" style="opacity: 1;">

            <div id="mobile-fullscreen-inner" class="clr">

                <a href="javascript:void(0)" class="close" aria-label="Close Menu">
                    <div class="close-icon-wrap">
                        <div class="close-icon-inner"></div>
                    </div>
                </a>

                <nav class="clr" itemscope="itemscope" itemtype="https://schema.org/SiteNavigationElement" role="navigation">

                    <ul id="menu-mog-1" class="fs-dropdown-menu">
                        <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-42339"><a href="https://www.mog.com.my/" class="menu-link"><span class="text-wrap">Back to Corporate Website</span></a></li>
                    </ul>
                </nav>

            </div>

        </div> -->

    </header>
@endif

<!-- end banner section -->



<!-- Start booking Area -->

<div class="{{ $web_app ? 'main-container' : '' }}" style="{{ $web_app ? '' : 'margin-top: 200px' }}">
    <section class="appoinment-booking-area {{ $web_app ? '' : 'mb-5' }}" style="{{ $web_app ? 'margin-top: 0px !important' : ''}}">

        <div class="container {{ $web_app ? 'mt-5' : '' }}" style="max-height: 100vh;">

            <div class="row">

                <div class="col-lg-8 offset-lg-2 col-sm-12 mb-3">

                    <div class="single-booking-area">

                        <form class="form-wrap" id="formServiceBooking" data-isupdate="{{ $UpdateBooking ?? '' }}">

                            @csrf

                            <div id="serviceStep">

                                <h3>{{translate('Service')}}</h3>

                                <section>

                                    <input type="hidden" name="serviceBookingId" value="{{ $bookingService->id ?? ''}}" />

                                    <input type="hidden" name="customerId" value="{{ $bookingService->cmn_customer_id ?? ''}}" />

                                    <input type="hidden" name="serviceId" value="{{ $bookingService->sch_service_id ?? ''}}" />

                                    <input type="hidden" name="employeeId" value="{{ $bookingService->sch_employee_id?? ''}}" />

                                    <input type="hidden" name="branchId" value="{{ $bookingService->cmn_branch_id ?? ''}}" />

                                    <div class="row mb-2">

                                        <div class="col-12 col-md-6 mt-2 d-flex flex-column align-items-start">

                                            <label for="cmn_branch_id" class="float-start m-0 lh-sm booking_subtitle">{{translate('Branch')}}</label>

                                            <div class="w-100 select-wrapper">
                                                @if(isset($bookingService))
                                                <select id="cmn_branch_id" name="cmn_branch_id" class="cmn_branch_id">
                                                    @foreach($branchs as $branch)
                                                    <option value="{{ $branch->id }}" {{ $bookingService->cmn_branch_id == $branch->id ? 'selected' : '' }}>{{ $branch->decoded_name }}</option>
                                                    @endforeach
                                                </select>
                                                @elseif (isset($selected_branch))
                                                <select id="cmn_branch_id" name="cmn_branch_id" class="cmn_branch_id">
                                                    @foreach($branchs as $branch)
                                                    <option value="{{ $branch->id }}" {{ $selected_branch->id == $branch->id ? 'selected' : '' }}>{{ $branch->decoded_name }}</option>
                                                    @endforeach
                                                </select>
                                                @else
                                                <select id="cmn_branch_id" name="cmn_branch_id" class="cmn_branch_id">
                                                    <option value="">Select One</option>
                                                    @foreach($branchs as $branch)
                                                    <option value="{{ $branch->id }}">{{ $branch->decoded_name ?? htmlspecialchars_decode($branch->name, ENT_QUOTES) }}</option>
                                                    @endforeach
                                                </select>
                                                @endif
                                            </div>



                                        </div>

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

                                            <label for="sch_service_category_id" class="float-start m-0 lh-sm booking_subtitle">{{translate('Service')}}</label> <span></span>

                                            <div class="w-100 select-wrapper">
                                                @if(isset($bookingService))
                                                <select id="sch_service_category_id" name="sch_service_category_id" class="serviceInput form-control">
                                                    <option value="Select One">Select One</option>
                                                    @foreach($services as $service)
                                                    <option value="{{ $service->id }}" @if($bookingService->sch_service_id == $service->id) selected @endif>{{ $service->title }}</option>
                                                    @endforeach
                                                </select>
                                                @elseif (isset($selected_service))
                                                <select id="sch_service_category_id" name="sch_service_category_id" class="serviceInput form-control">
                                                    <option value="Select One">Select One</option>
                                                    @foreach($services as $service)
                                                    <option value="{{ $service->id }}" {{ $selected_service->id == $service->id ? 'selected' : '' }}>{{ $service->title }}</option>
                                                    @endforeach
                                                </select>
                                                @else
                                                <select id="sch_service_category_id" name="sch_service_category_id" class="serviceInput form-control">
                                                    <option value="Select One">Select One</option>
                                                    @foreach($services as $service)
                                                    <option value="{{ $service->id }}">{{ $service->title }}</option>
                                                    @endforeach
                                                </select>
                                                @endif
                                            </div>


                                            <div class="w-100 select-wrapper" style="display:none">

                                                @if(isset($bookingService->sch_employee_id))
                                                <select name="sch_employee_id" class="serviceInput form-control">
                                                    @foreach($employees as $employee)
                                                    <option value="{{ $employee->id }}" @if($bookingService->sch_employee_id == $employee->id) selected @endif>{{ $employee->full_name }}</option>
                                                    @endforeach
                                                </select>
                                                @else
                                                <input type="text" id="sch_employee_id" name="sch_employee_id" class="">
                                                @endif

                                            </div>

                                        </div>

                                    </div>


                                    <div class="row mb-2">
                                        <div class="col-12 col-md-6 mb-4">
                                            <p class="m-0 lh-sm booking_subtitle">Date</p>
                                            <input id="divServiceDate" name="service_date" class="form-control input-sm" type="hidden" value="{{ $bookingService->date ?? date('Y-m-d') }}" readonly />
                                        </div>
                                        <div class="col-12 col-md-6 mb-3">
                                            <p class="m-0 lh-sm booking_subtitle">Available Time</p><input type="hidden" id="start_time" value="{{ $bookingService->start_time ?? '' }}" />
                                            <div class="d-flex align-items-center">
                                                <i class="fas fa-exclamation-triangle me-2"></i>
                                                <span id="guideMsg">Please select branch</span>
                                            </div>
                                            <div class="container p-0">
                                                <div class="row px-2 d-flex divServiceAvaiable">
                                                    <div id="divServiceAvaiableTime">
                                                    </div>
                                                </div>
                                            </div>

                                        </div>
                                    </div>

                                    <div class="row mb-5">
                                        <div class="col-12">
                                            <div class="time-slot-notice">
                                                <svg xmlns="http://www.w3.org/2000/svg" id="calendar-minimalistic-svgrepo-com" width="14.815" height="15" viewBox="0 0 14.815 15">
                                                    <path id="Path_109868" data-name="Path 109868" d="M16.815,12.9V11.417c0-.621,0-1.174-.01-1.667H2.01C2,10.243,2,10.8,2,11.417V12.9c0,2.793,0,4.19.868,5.058s2.265.868,5.058.868h2.963c2.793,0,4.19,0,5.058-.868S16.815,15.692,16.815,12.9Z" transform="translate(-2 -3.824)" fill="#ea4d56" />
                                                    <path id="Path_109869" data-name="Path 109869" d="M6.28,2.306a.556.556,0,1,0-1.111,0v1.17a3.383,3.383,0,0,0-2.28.809,3.383,3.383,0,0,0-.809,2.28h14.7a3.383,3.383,0,0,0-.809-2.28,3.383,3.383,0,0,0-2.28-.809V2.306a.556.556,0,0,0-1.111,0V3.426c-.493-.01-1.045-.01-1.667-.01H7.946c-.622,0-1.174,0-1.667.01Z" transform="translate(-2.021 -1.75)" fill="#ea4d56" />
                                                </svg>

                                                <p id="time-slot-span" class="m-0 lh-sm">You've selected <span class="time-slot-day">Friday</span>, <span class="time-slot-date">Dec 22 2023</span></p>
                                            </div>
                                        </div>

                                    </div>

                                </section>

                                <h3>Details</h3>

                                <section>

                                    <div class="row p-1">

                                        <div class="col-12">

                                            <div class="row">

                                                <p class="m-0 mb-2 booking_subtitle text-dark">Contact Information</p>

                                                <div class="col-md-6">
                                                    @php
                                                    $customer = $bookingService->customer ?? '';
                                                    $names = explode(' ', $customer);
                                                    $firstName = $names[0] ?? '';
                                                    $lastName = $names[1] ?? '';
                                                    @endphp


                                                    <label for="first_name" class="float-start">{{translate('First Name')}}*</label>

                                                    @if(isset($bookingService))
                                                    <!-- <input type="tel" id="phone_no" name="phone_no"  class="form-control" value="                   {{$bookingService->phone_no ?? '' }}" /> -->
                                                    <input type="text" id="first_name" name="first_name" class="form-control" value="{{ $firstName ?? '' }}">

                                                    @else
                                                    <input type="text" id="first_name" name="first_name" class="form-control" value="{{ $first_Name ?? '' }}" />

                                                    @endif


                                                </div>

                                                <div class="col-md-6">

                                                    <label for="last_name" class="float-start">{{translate('Last Name')}}*</label>

                                                    @if(isset($bookingService))
                                                    <!-- <input type="tel" id="phone_no" name="phone_no"  class="form-control" value="                   {{$bookingService->phone_no ?? '' }}" /> -->
                                                    <input type="text" id="last_name" name="last_name" class="form-control" value="{{ $lastName ?? '' }}">

                                                    @else
                                                    <input type="text" id="last_name" name="last_name" class="form-control" value="{{ $last_Name ?? '' }}" />

                                                    @endif



                                                </div>

                                                <div class="col-md-6">

                                                    <label for="email" class="float-start">{{translate('Email')}}*</label>

                                                    <input type="email" id="email" name="email" class="form-control" value="{{ $bookingService->email ?? $email ?? '' }}" />

                                                </div>

                                                <div class="col-md-6">

                                                    <label for="phone_no" id='abc' class="float-start">{{translate('Phone')}}*</label>
                                                    @if(isset($bookingService))
                                                    <!-- <input type="tel" id="phone_no" name="phone_no"  class="form-control" value="                   {{$bookingService->phone_no ?? '' }}" /> -->
                                                    <input type="tel" oninput="cleanPhoneNumber(event)" id="phone_no" name="phone_no" class="form-control" value="{{$bookingService->phone_no ?? '' }}">

                                                    @else

                                                    <input type="tel" oninput="cleanPhoneNumber(event)" id="phone_no" name="phone_no" class="form-control" value="{{ $phone_no ?? '' }}" />


                                                    @endif





                                                </div>


                                                <div class="col-12 my-3 bookingForSomeoneElse">
                                                    @if(isset($bookingService))

                                                    <input name="is_checked" type="checkbox" class="vh" id="bookingForSomeoneElse" {{$bookingService->is_checked == 1 ? 'checked' : '' }}>

                                                    @else
                                                    <input type="checkbox" name="is_checked" id="bookingForSomeoneElse" class="vh">
                                                    @endif
                                                    <label id="bookingForSomeoneElseLabel" for="bookingForSomeoneElse" class="d-flex justify-content-start"><span id="bookingForSomeoneElseSpan">I'm booking for someone else</span></label>
                                                </div>

                                            </div>

                                            <div class="row bookingForSomeoneElseContainer">

                                                <p class="m-0 booking_subtitle text-dark">I'm Booking for:</p>

                                                <div class="col-md-6">

                                                    @php
                                                    $somebody = $bookingService->SomeBody_Name ?? '';
                                                    $s_names = explode(' ', $somebody);
                                                    $firstName_s = $s_names[0] ?? '';
                                                    $lastName_s = $s_names[1] ?? '';
                                                    @endphp

                                                    <label for="first_name_booking" class="float-start">{{translate('First Name')}}*</label>

                                                    <input type="text" id="first_name_booking" name="first_name_booking" value="{{ $firstName_s ?? '' }}" class="form-control" />

                                                </div>

                                                <div class="col-md-6">

                                                    <label for="last_name_booking" class="float-start">{{translate('Last Name')}}*</label>

                                                    <input type="text" id="last_name_booking" name="last_name_booking" value="{{ $lastName_s ?? '' }}" class="form-control" />

                                                </div>

                                            </div>

                                            <div class="row">

                                                <div class="col-md-6">

                                                    <label for="remark" class="float-start">Remarks</label>

                                                    <textarea id="remark" name="remark" class="form-control" rows="3">{{ $bookingService->remarks ?? " " }}</textarea>
                                                    <input type="hidden" id="contact_id" name="contact_id" value="{{ $contact_id ?? '' }}" class="form-control" />
                                                </div>

                                                <div class="col-md-6 d-flex flex-column align-items-start">

                                                    <label for="heard_from" class="float-start">Where did you hear about us?</label>
                                                    <select id="heard_from" name="heard_from" class="heard_from">
                                                        <option value="">Select One</option>
                                                        <option value="Facebook">Facebook</option>
                                                        <option value="Instagram">Instagram</option>
                                                        <option value="Xiaohongshu">Xiaohongshu</option>
                                                        <option value="Youtube">Youtube</option>
                                                        <option value="TikTok">TikTok</option>
                                                        <option value="Others">Others</option>
                                                    </select>

                                                    <!-- Hidden text input for specifying the "Others" option -->
                                                    <div id="other-source" class="mt-2" style="display: none;">
                                                        <label for="other_heard_from" class="float-start">Please specify:</label>
                                                        <input type="text" id="other_heard_from" name="other_heard_from" class="form-control">
                                                    </div>
                                                </div>

                                            </div>

                                        </div>

                                    </div>

                                </section>

                                <h3>Confirmation</h3>

                                <section>

                                    <div class="row mt-4">

                                        <div class="col-12 p-4 mb-4 appointment-container">

                                            <div class="d-flex flex-column align-items-start done-container mb-4">
                                                <div class="mb-3 appointment-confirmation">

                                                    <p class="m-0 lh-sm booking_subtitle text-dark mb-2">Almost there <span id="fullName">{{ $bookingService->customer ?? '' }}</span>!</p>

                                                    <p class="m-0 lh-sm mb-2">Please confirm your appointment details before submitting! Kindly note that each appointment is strictly for 1 pax only.</p>
                                                </div>
                                            </div>

                                            <div class="appointment-details-desktop d-flex flex-column justify-content-center align-items-center">
                                                <div class="appointment-details w-100">

                                                    <div class="mb-4">
                                                        <p class="m-0 lh-sm booking_subtitle mb-3">Appointment Details:</p>

                                                        <div class="col-12 booking_details pb-2 mb-2">

                                                            <p class="m-0 lh-sm booking_label">{{translate('Date')}}</p>

                                                            <p id="booking_date_pending" class="m-0 lh-sm"></p>

                                                        </div>

                                                        <div class="col-12 booking_details pb-2 mb-2">

                                                            <p class="m-0 lh-sm booking_label">{{translate('Time')}}</p>

                                                            <p id="booking_time_pending" class="m-0 lh-sm"></p>

                                                        </div>

                                                        <div class="col-12 booking_details pb-2 mb-2">

                                                            <p class="m-0 lh-sm booking_label">{{translate('Service')}}</p>

                                                            <p id="booking_service_pending" class="m-0 lh-sm"></p>

                                                        </div>

                                                        <div class="col-12 booking_details pb-2 mb-2">

                                                            <p class="m-0 lh-sm booking_label">{{translate('Location')}}</p>

                                                            <p id="booking_location_pending" class="m-0 lh-sm"></p>

                                                        </div>
                                                    </div>

                                                    <div class="mb-4">
                                                        <p class="m-0 lh-sm booking_subtitle mb-3">Contact Information</p>

                                                        <div class="col-12 booking_details pb-2 mb-2">

                                                            <p class="m-0 lh-sm booking_label">{{translate('Name')}}</p>

                                                            <p id="full_Name_pending" class=" m-0 lh-sm "></p>

                                                        </div>

                                                        <div class="col-12 booking_details pb-2 mb-2">

                                                            <p class="m-0 lh-sm booking_label">{{translate('Phone')}}</p>

                                                            <p id="booking_phone_number_pending" class="m-0 lh-sm"></p>

                                                        </div>

                                                        <div class="col-12 booking_details pb-2 mb-2">

                                                            <p class="m-0 lh-sm booking_label">{{translate('Email')}}</p>

                                                            <p id="booking_email_pending" class=" m-0 lh-sm email"></p>

                                                        </div>

                                                    </div>


                                                    <div class="mb-4">
                                                        <div class="viewForSomeoneElseContainer">
                                                            <p class="m-0 lh-sm booking_subtitle mb-3">I'm Booking for</p>

                                                            <div class="col-12 booking_details pb-2 mb-2">

                                                                <p class="m-0 lh-sm booking_label">{{translate('Name')}}</p>

                                                                <p id="booking_name_pending" class="m-0 lh-sm"></p>

                                                            </div>
                                                            <div>

                                                            </div>
                                                        </div>

                                                        <div class="mb-4">
                                                            <div class="col-12 booking_details pb-2 mb-2">

                                                                <p class="m-0 lh-sm booking_label">Remarks</p>

                                                                <p id="booking_remark_pending" class="m-0 lh-sm text-break">

                                                                </p>

                                                            </div>
                                                        </div>


                                                    </div>

                                                    <div class="lh-sm mt-2 booking_extra_details">
                                                        If you have any changes in your appointment details, please click
                                                        <span id="updatebooking" style="color: #22A6E3 !important; text-decoration: underline !important; cursor: pointer;">
                                                            EDIT
                                                        </span>
                                                        .
                                                    </div>
                                                </div>

                                            </div>

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

                                <h3>Done</h3>

                                <section>

                                    <div class="row mt-4">

                                        <div class="col-12 p-4 mb-4 appointment-container">

                                            <div class="d-flex flex-column align-items-start done-container mb-4">
                                                <div class="mb-3 appointment-confirmation">
                                                    <p class="m-0 lh-sm booking_subtitle text-dark mb-2">Appointment Pending Acceptance</p>

                                                    <p class="m-0 lh-sm mb-2">Dear <span id="fullName_confirm"></span>,</p>

                                                    <p class="m-0 lh-sm mb-2">We've received your appointment request and it's now with our outlet team! We'll do our best to confirm your time slot within the next 24 hours.</p>
                                                
                                                    <p class="m-0 lh-sm mb-2">Thanks!</p>
                                                </div>

                                                <!-- <div class="d-flex flex-column ms-4 mt-2">
                                                    <p class="m-0 lh-sm booking_subtitle text-dark mb-2">Connect With Us:</p>
                                                    <a href="https://linktr.ee/mogeyewear" target="_blank" class="linktree">
                                                        <img height="60" src="site/img/mog-social-media-icons.png" />
                                                    </a>
                                                </div> -->
                                            </div>

                                            <div class="appointment-details-desktop d-flex flex-column justify-content-center align-items-center">
                                                <div class="appointment-details w-100">

                                                    <div class="mb-4">
                                                        <p class="m-0 lh-sm booking_subtitle mb-3">Appointment Details:</p>

                                                        <div class="col-12 booking_details pb-2 mb-2">

                                                            <p class="m-0 lh-sm booking_label">{{translate('Booking No.')}}</p>

                                                            <p id="booking_number" class="m-0 lh-sm">{{ $bookingService->id ?? '' }}</p>

                                                        </div>

                                                        <div class="col-12 booking_details pb-2 mb-2">

                                                            <p class="m-0 lh-sm booking_label">{{translate('Date')}}</p>

                                                            <p id="booking_date" class="m-0 lh-sm">{{ $bookingService->date ?? '' }}</p>

                                                        </div>

                                                        <div class="col-12 booking_details pb-2 mb-2">

                                                            <p class="m-0 lh-sm booking_label">{{translate('Time')}}</p>

                                                            <p id="booking_time" class="m-0 lh-sm">{{ $bookingService->start_time ?? '' }}</p>

                                                        </div>

                                                        <div class="col-12 booking_details pb-2 mb-2">

                                                            <p class="m-0 lh-sm booking_label">{{translate('Service')}}</p>

                                                            <p id="booking_service" class="m-0 lh-sm">{{ $bookingService->service ?? '' }}</p>

                                                        </div>

                                                        <div class="col-12 booking_details pb-2 mb-2">

                                                            <p class="m-0 lh-sm booking_label">{{translate('Location')}}</p>

                                                            <p id="booking_location" class="m-0 lh-sm">{{ $bookingService->branch ?? '' }}</p>

                                                        </div>
                                                    </div>

                                                    <div class="mb-4">
                                                        <p class="m-0 lh-sm booking_subtitle mb-3">Contact Information</p>

                                                        <div class="col-12 booking_details pb-2 mb-2">

                                                            <p class="m-0 lh-sm booking_label">{{translate('Name')}}</p>

                                                            <p id="full_Name" class=" m-0 lh-sm ">{{ $bookingService->customer ?? '' }}</p>

                                                        </div>

                                                        <div class="col-12 booking_details pb-2 mb-2">

                                                            <p class="m-0 lh-sm booking_label">{{translate('Phone')}}</p>

                                                            <p id="booking_phone_number" class="m-0 lh-sm">{{ $bookingService->phone_no ?? '' }}</p>

                                                        </div>

                                                        <div class="col-12 booking_details pb-2 mb-2">

                                                            <p class="m-0 lh-sm booking_label">{{translate('Email')}}</p>

                                                            <p id="booking_email" class=" m-0 lh-sm email">{{ $bookingService->email ?? '' }}</p>

                                                        </div>

                                                    </div>


                                                    <div class="mb-4">
                                                        <div class="viewForSomeoneElseContainer">
                                                            <p class="m-0 lh-sm booking_subtitle mb-3">I'm Booking for</p>

                                                            <div class="col-12 booking_details pb-2 mb-2">

                                                                <p class="m-0 lh-sm booking_label">{{translate('Name')}}</p>

                                                                <p id="booking_name" class="m-0 lh-sm">{{ $bookingService->SomeBody_Name ?? '' }}</p>

                                                            </div>
                                                            <div>

                                                            </div>
                                                        </div>

                                                        <div class="mb-4">
                                                            <div class="col-12 booking_details pb-2 mb-2">

                                                                <p class="m-0 lh-sm booking_label">Remarks</p>

                                                                <p id="booking_remark" class="m-0 lh-sm text-break">{{ $bookingService->remarks ?? '-' }}

                                                                </p>

                                                            </div>
                                                        </div>


                                                    </div>

                                                </div>

                                            </div>

                                        </div>

                                </section>

                            </div>

                        </form>

                    </div>

                </div>

            </div>

        </div>


    </section>
</div>

<!-- End booking Area -->
@endsection

<script>
    // Embed selected branch and service into global variables
    window.branchServiceData = {
        selectedService: @json($selected_service),
        selectedBranch: @json($selected_branch),
    }
</script>