@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=1.111307') }}?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 -->

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

<!-- end banner section -->



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

        <div class="container">

            <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" data-isupdate="{{ $UpdateBooking ?? '' }}">

                            <div id="serviceRescheduleStep">

                                <h3>Reschedule</h3>

                                <section id="step1">


                                    <div class="row mt-4">

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

                                            <div class="mb-3 appointment-confirmation">
                                                @if(isset($bookingService))

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

                                                @else
                                                <input type="checkbox" name="is_checked" id="bookingForSomeoneElse" class="display:block">
                                                @endif

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

                                                <p class="m-0 lh-sm mb-2">Dear <span id="fullName">{{ $bookingService->customer ?? '' }}</span>,</p>

                                                <p class="m-0 lh-sm mb-2" style="font-weight: 400;">You can reschedule or cancel the appointment.</p>

                                            </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" name="serviceBookingId" 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">{{ !empty($bookingService->remarks) ? $bookingService->remarks : '-' }}

                                                                </p>

                                                            </div>
                                                        </div>

                                                    </div>

                                                </div>

                                            </div>

                                        </div>

                                </section>

                                <h3>Edit</h3>

                                <section id="step2">

                                    <input type="hidden" name="serviceBookingId" value="{{ $bookingService->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">{{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>
                                                @else
                                                <select id="cmn_branch_id" name="cmn_branch_id" class="cmn_branch_id">
                                                    @foreach($branchs as $branch)
                                                    <option value="{{ $branch->id }}">{{ $branch->decoded_name }}</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">{{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">
                                                    @foreach($services as $service)
                                                    <option value="{{ $service->id }}" @if($bookingService->sch_service_id == $service->id) selected @endif>{{ $service->title }}</option>
                                                    @endforeach
                                                </select>
                                                @else
                                                <select id="sch_service_category_id" name="sch_service_category_id" class="serviceInput form-control">
                                                    @foreach($services as $service)
                                                    <option value="{{ $service->id }}">{{ $service->title }}</option>
                                                    @endforeach
                                                </select>
                                                @endif
                                            </div>

                                        </div>

                                    </div>


                                    <div class="row mb-2">
                                        <div class="col-12 col-md-6 mb-4">
                                            <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="guideMsg d-flex align-items-center d-none">
                                                <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">

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

                                        </div>

                                    </div>

                                    <div class="lh-sm mt-2 mb-4 booking_extra_details d-flex justify-content-start pb-3 border-bottom">
                                        <img src="{{ asset('/img/note-icon.svg') }}" class="me-2" />
                                        <a>We will send you by Email and Whatsapp</a>
                                    </div>

                                </section>

                                <h3>Confirmation</h3>

                                <section id="step3">

                                    <div class="row mt-4">

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

                                            <div class="mb-3 appointment-confirmation">
                                                <p class="m-0 lh-sm booking_subtitle text-dark mb-2">Please confirm appointment details to reschedule</p>

                                                <p class="m-0 lh-sm mb-2">Dear <span id="fullName">{{ $bookingService->customer ?? '' }}</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-desktop d-flex flex-column justify-content-center align-items-center">
                                                <div class="appointment-details">

                                                    <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_pending" 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_date1" 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_time1" 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_service1" 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_location1" 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" 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 class="col-12 booking_details pb-2 mb-2">

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

                                                            <p id="booking_remark1" class="m-0 lh-sm text-break">{{ !empty($bookingService->remarks) ? $bookingService->remarks : '-' }}

                                                            </p>

                                                        </div>

                                                        <div class="lh-sm mt-2 booking_extra_details">
                                                            If you have any changes in your appointment details, please click
                                                            <a id="myLink" href="{{route('site.appoinment.reschedule-mog', ['serviceBookingId' => $bookingService->id  ?? ''])}}">EDIT</a>
                                                            .
                                                        </div>
                                                    </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="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">Appointment rescheduled, pending confirmation from our branch. Kindly allow 24 hours for confirmation.</p>

                                            </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">{{ !empty($bookingService->remarks) ? $bookingService->remarks : '-' }}

                                                                </p>

                                                            </div>
                                                        </div>


                                                    </div>

                                                </div>

                                            </div>

                                        </div>
                                    </div>

                                </section>

                            </div>


                        </form>

                    </div>

                </div>

            </div>

        </div>


    </section>
</div>

<script>
    // Display mobile menu when click hamburger icon
    $(".oceanwp-mobile-menu-icon").on("click", function(e) {
      e.preventDefault();
      $("#mobile-fullscreen").toggleClass("active");
    });

    // Hide mobile menu when click close icon
    $(".close-icon-wrap").on("click", function(e) {
      e.preventDefault();
      $("#mobile-fullscreen").toggleClass("active");
    });
</script>

<div id="customModal" class="modal w-100">
  <div class="modal-content">
    <img src="../img/warning-icon.svg" alt="" />
    <h4 class="custom-title-class">Cancel this appointment?</h4>
    <p class="custom-content-class">Do you really want to cancel this appointment? This process can’t be undone.</p>
    <div class="modal-footer border-0">
      <button id="confirmButton" class="custom-confirm-btn">Yes</button>
      <button id="cancelButton" class="custom-cancel-btn">No</button>
    </div>
  </div>
</div>


<div id="restrictModal" class="modal w-100">
  <div class="modal-content">
    <img src="../img/warning-icon.svg" alt="" />
    <h4 id="restrictTitle" class="custom-title-class"></h4>
    <p id="restrictContent" class="custom-content-class"></p>
    <div class="modal-footer justify-content-center border-0">
      <button id="restrictConfirmButton" class="custom-confirm-btn">Okay</button>
    </div>
  </div>
</div>


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