@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') }}" rel="stylesheet" />

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

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



<!--start banner section -->

<!-- <section class="banner-area position-relative" style="background:url({{$appearance->background_image}}) no-repeat;">

    <div class="overlay overlay-bg"></div>

    <div class="container">

        <div class="row">

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

                <div class="position-relative text-center">

                    <h1 class="text-capitalize mb-3 text-white">{{translate('Appointment Booking')}}</h1>

                    <a class="text-white" href="{{route('site.home')}}">{{translate('Home')}} </a>

                    <i class="icofont-long-arrow-right text-white"></i>

                    <a class="text-white" href="{{route('site.appoinment.booking')}}"> {{translate('Appointment Booking')}}</a>

                </div>

            </div>

        </div>

    </div>

</section> -->

<!-- end banner section -->



<!-- Start booking Area -->
<div style="margin-top: 8rem;">
    <section class="appoinment-booking-area mb-5">

        <div class="container">

            <div class="row">

                <div class="col-lg-8 mb-3">

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

                        <form class="form-wrap" id="formServiceBooking">

                            <div id="serviceStep">

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

                                <section>

                                    <div class="row mb-2">

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

                                            <label for="cmn_branch_id" class="float-start">{{translate('Branch')}}</label>

                                            <select id="cmn_branch_id" name="cmn_branch_id" class="cmn_branch_id">
                                                <option></option>
                                            </select>

                                        </div>

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

                                            <label for="sch_service_category_id" class="float-start">{{translate('Service')}}</label>
                                            <!-- <select id="sch_service_category_id" name="sch_service_category_id" class="serviceInput form-control"> -->
                                            <div class="w-100 select-wrapper">

                                                <select id="sch_service_category_id" name="sch_service_category_id" class="serviceInput form-control">
                                                    <option id="title"></option>
                                                    <!-- <option value="paradigm_mall">Custom Glasses</option>
                                                <option value="subang_parade">Eye Consultation</option> -->
                                                </select>
                                            </div>

                                        </div>

                                    </div>


                                    <div class="row mb-2">

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

                                            <div id="divServiceDate" style="float: left;"></div>

                                        </div>


                                        

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

                                                <input id="serviceDate" name="service_date" class="form-control input-sm" type="text" readonly />

                                                <div id="divServiceDate" style="float: left;"></div>

                                            </div> -->

                                        

                                        <div class="col-12 col-md-6 mb-2">
                                            <p class="m-0 lh-sm booking_subtitle">Available Time </p>

                                            <div class="container p-0">
                                                <div class="row px-2 d-flex">
                                                    <!-- <div id="divServiceAvaiableTime"></div> -->
                                                    <!-- <div class="col-4 px-1 align-self-center">
                                                    <div class="time-slot" id="divServiceAvaiableTime"></div>
                                                </div> -->
                                                    <div class="col-4 px-1 align-self-center">
                                                        <div class="time-slot">10:30 AM</div>
                                                    </div>
                                                    <div class="col-4 px-1 align-self-center">
                                                        <div class="time-slot">11:00 AM</div>
                                                    </div>
                                                    <div class="col-4 px-1 align-self-center">
                                                        <div class="time-slot">12:00 PM</div>
                                                    </div>
                                                    <div class="col-4 px-1 align-self-center">
                                                        <div class="time-slot">12:30 PM</div>
                                                    </div>
                                                    <div class="col-4 px-1 align-self-center">
                                                        <div class="time-slot">1:00 PM</div>
                                                    </div>
                                                    <div class="col-4 px-1 align-self-center">
                                                        <div class="time-slot">1:30 PM</div>
                                                    </div>
                                                    <div class="col-4 px-1 align-self-center">
                                                        <div class="time-slot">2:00 PM</div>
                                                    </div>
                                                    <div class="col-4 px-1 align-self-center">
                                                        <div class="time-slot">2:30 PM</div>
                                                    </div>
                                                    <div class="col-4 px-1 align-self-center">
                                                        <div class="time-slot">3:00 PM</div>
                                                    </div>
                                                    <div class="col-4 px-1 align-self-center">
                                                        <div class="time-slot">3:30 PM</div>
                                                    </div>
                                                    <div class="col-4 px-1 align-self-center">
                                                        <div class="time-slot">4:00 PM</div>
                                                    </div>
                                                    <div class="col-4 px-1 align-self-center">
                                                        <div class="time-slot">4:30 PM</div>
                                                    </div>
                                                    <div class="col-4 px-1 align-self-center">
                                                        <div class="time-slot">5:00 PM</div>
                                                    </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="#f6893b" />
                                                    <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="#f6893b" />
                                                </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 col-md-6">

                                            <div class="row">

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

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

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

                                                    <input type="text" id="first_name" name="first_name" class="form-control" />

                                                </div>

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

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

                                                    <input type="text" id="last_name" name="last_name" class="form-control" />

                                                </div>

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

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

                                                    <input type="email" id="email" name="email" class="form-control" />

                                                </div>

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

                                                    <label for="phone_no" class="float-start">{{translate('Phone')}}</label>

                                                    <input type="tel" id="phone_no" name="phone_no" class="form-control" />

                                                </div>

                                                <div class="col-md-4 bookingForSomeoneElse">

                                                    <input type="checkbox" id="bookingForSomeoneElse">

                                                    <p class="m-0 ms-2">I'm booking for someone else</p>

                                                </div>

                                            </div>

                                            <div class="row bookingForSomeoneElseContainer">

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

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

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

                                                    <input type="text" id="first_name_booking" name="first_name_booking" class="form-control" />

                                                </div>

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

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

                                                    <input type="text" id="last_name_booking" name="last_name_booking" class="form-control" />

                                                </div>

                                            </div>

                                            <div class="row">

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

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

                                                    <textarea id="remark" name="remark" class="form-control" rows="3"></textarea>

                                                </div>

                                            </div>

                                        </div>

                                    </div>

                                </section>

                                <h3>Confirmation</h3>

                                <section>

                                    <div class="row mt-3">

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

                                            <div class="mb-3 appointment-confirmation">
                                                <p class="m-0 lh-sm booking_subtitle text-dark mb-2">Confirm Appointment</p>

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

                                                <p class="m-0 lh-sm mb-2">Please confirm your appointment details before proceeding.</p>

                                                <p class="m-0 lh-sm text-danger mb-2">*Each appointment is strictly for 1 pax only</p>
                                            </div>

                                            <div class="appointment-details">

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

                                                    <div class="col-md-4 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"></p>

                                                    </div>

                                                    <div class="col-md-4 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"></p>

                                                    </div>

                                                    <div class="col-md-4 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"></p>

                                                    </div>

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

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

                                                        <span class="booking_service"></span>

                                                    </div>

                                                    <div class="col-md-4 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"></p>

                                                    </div>
                                                </div>

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

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

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

                                                        <span class=" m-0 lh-sm fullNameConfirmed"></span>

                                                    </div>

                                                    <div class="col-md-4 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"></p>

                                                    </div>

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

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

                                                        <span class=" m-0 lh-sm email"></span>

                                                    </div>

                                                </div>

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

                                                    <div class="col-md-4 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"></p>

                                                    </div>

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

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

                                                        <p id="remark" 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
                                                <a id="updateBooking" href="">
                                                    EDIT
                                                </a>
                                                .
                                            </div>

                                        </div>

                                    </div>

                                </section>

                                <h3>Done</h3>

                                <section>

                                    <div class="row mb-3">

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

                                            <p class="m-0 lh-sm booking_subtitle text-dark mb-2">Appointment Pending Acceptance</p>

                                            <p class="m-0 lh-sm booking_subtitle text-dark mb-2">Booking No: <span>#3215867</span></p>

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

                                            <p class="m-0 lh-sm mb-2">Your appointment is pending acceptance from branch supervisor.</p>

                                            <p class="m-0 lh-sm mb-2">Please check your Email or Whatsapp for confirmation.</p>

                                            <div class="d-flex mt-2 justify-content-between align-items-center">
                                                <p class="m-0">Email</p>
                                                <p class="m-0">Whatsapp</p>
                                            </div>

                                        </div>

                                    </div>

                                </section>

                            </div>

                        </form>

                    </div>

                </div>

            </div>

        </div>

    </section>
</div>

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