@extends('layout.app')
@section('content')

    <section class="custom-modal">
        <div class="container">
            <div class="row align-items-center justify-content-center">
                <div class="col-lg-12 col-sm-12 col-12 text-center">
                    <button type="button" class="themeBtn" data-toggle="modal" data-target="#myModal">
                        Schedule Now
                    </button>
                </div>
            </div>
        </div>
    </section>
    <div class="contact-modal">
        <div class="modal" id="myModal">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="wrapper">
                        <div class="table table-full align-center">
                            <div class="table-row h100">
                                <div class="table-cell v-align-bottom">
                                    <div class="relative">
                                        <div class="card">
                                            <ul class="ui-formSlide">
                                                <li data-step="1" class="active">
                                                    <div class="ui-step-content in">
                                                        <h4>
                                                            <img src="{{ asset('front/images/headericon.jpg') }}"
                                                                 alt=""> Joint Pain
                                                            Specialists
                                                        </h4>
                                                        <div class="main-body">
                                                            <h2>Please select service:</h2>
                                                            <div id="accordion">
                                                                @foreach($services as $service)
                                                                    <div class="card mt-4">
                                                                        <div class="card-header">
                                                                            <a class="card-link" data-toggle="collapse"
                                                                               href="#abc{{$service->id}}"
                                                                               aria-expanded="true"
                                                                               aria-controls="menuone">
                                                                                <div class="media">
                                                                                    <img
                                                                                        src="{{ asset($service->images) }}"
                                                                                        alt="John Doe"
                                                                                        style="width:80px;">
                                                                                    <div class="media-body">
                                                                                        <h4>{{ $service->name ?? '' }}</h4>
                                                                                        {{--<p>30 min</p>--}}
                                                                                    </div>
                                                                                </div>
                                                                                <span class="collapsed">
                                                                              <p>
                                                                                <i class="far fa-angle-down"></i>
                                                                              </p>
                                                                            </span>
                                                                                <span class="expanded"></span>
                                                                            </a>
                                                                        </div>
                                                                        <div id="abc{{ $service->id }}"
                                                                             class="collapse">
                                                                            <div class="card-body">
                                                                                <div class="d-flex">
                                                                              <span>
                                                                                <p>{{ $service->title ?? '' }}</p>
                                                                              </span>
                                                                                    <span>
                                                                                <a href="#" data-id="{{ $service->id }}"
                                                                                   class="themeBtn btnNext btn_book_this_service">Book this services</a>
                                                                              </span>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                @endforeach
                                                            </div>
                                                        </div>
                                                    </div>
                                                </li>
                                                <li data-step="1" class="">
                                                    <div class="row">
                                                        <div class="col-lg-12 col-sm-12 col-12">
                                                            <h4>
                                                                <a href="#" id="btnPrev">
                                                                    <i class="far fa-angle-left"></i>
                                                                </a>
                                                                <img src="{{ asset('front/images/headericon.jpg') }}"
                                                                     alt=""> Joint Pain
                                                                Specialists
                                                            </h4>
                                                        </div>
                                                    </div>
                                                    <div class="row">
                                                        <div class="col-lg-12 col-sm-12 col-12">
                                                            <div class="heading">
                                                                <h5>Select Date</h5>
                                                            </div>
                                                            {{--<div id="evoCalendar"></div>--}}
                                                            <div id="calendar"></div>
                                                            {{--<input type="hidden" id="booking_slot" name="booking_slot"
                                                                   value="">--}}
                                                        </div>
                                                    </div>
                                                    <div class="row ml-1">
                                                        <div class="col-lg-8 col-sm-8 col-12 p-0">
                                                            <div class="ui-step-content">
                                                                <div id="demo-timegrid"></div>
                                                            </div>
                                                        </div>
                                                        {{--<div class="col-lg-4 col-sm-4 col-12 p-0">
                                                            <div class="patient-card">
                                                                <h5>Booking summary</h5>
                                                                <figure>
                                                                    <img src="{{ asset('front/images/cardimg.jpg') }}"
                                                                         alt="">
                                                                </figure>
                                                                <h5>Soft Wave</h5>
                                                                <ul>
                                                                    <li>
                                                                        <a href="#">
                                                                            <i class="fas fa-clock"></i> 30 min </a>
                                                                    </li>
                                                                    <li>
                                                                        <a href="#">
                                                                            <i class="fas fa-user"></i> Miltoy </a>
                                                                    </li>
                                                                    <li>
                                                                        <a href="#">
                                                                            <i class="fas fa-calendar-alt"></i> Calender
                                                                        </a>
                                                                    </li>
                                                                </ul>
                                                                <a href="#" class="themebtn mt-4" id="btncontinue">Continue</a>
                                                            </div>
                                                        </div>--}}
                                                        <button class="themebtn my-5" id="btnCalendar">Next</button>
                                                    </div>
                                                </li>
                                                <li data-step="2">
                                                    <div class="row">
                                                        <div class="col-lg-12 col-sm-12 col-12">
                                                            <h4>
                                                                <a href="#" id="btnPrev2">
                                                                    <i class="far fa-angle-left"></i>
                                                                </a>
                                                                <img src="{{ asset('front/images/headericon.jpg') }}"
                                                                     alt="">
                                                                Joint Pain Specialists
                                                            </h4>
                                                        </div>
                                                    </div>
                                                    <div class="ui-step-content">
                                                        <div class="row">
                                                            <div class="col-lg-12 col-sm-12 col-12">
                                                                <div class="heading">
                                                                    <h5>Please fill out the details below</h5>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="row">
                                                            <div class="col-lg-8 col-sm-8 col-12">
                                                                <div class="patient-detail">
                                                                    <form action="{{ route('form.submit') }}"
                                                                          method="POST" enctype="multipart/form-data">
                                                                        @csrf

                                                                        <input type="hidden" id="booking_slot"
                                                                               name="booking_slot" value="">
                                                                        <input type="hidden" name="service_id"
                                                                               value="">
                                                                        <div class="row">
                                                                            <div class="col">
                                                                                <input type="text" name="first_name"
                                                                                       class="form-control"
                                                                                       placeholder="First Name"
                                                                                       required>
                                                                            </div>
                                                                            <div class="col">
                                                                                <input type="text" name="last_name"
                                                                                       class="form-control"
                                                                                       placeholder="Last Name" required>
                                                                            </div>
                                                                        </div>
                                                                        <div class="row">
                                                                            <div class="col">
                                                                                <input type="text"
                                                                                       name="billing_address"
                                                                                       class="form-control"
                                                                                       placeholder="Billing Address"
                                                                                       required>
                                                                            </div>
                                                                        </div>
                                                                        <div class="row">
                                                                            <div class="col">
                                                                                <input type="number" name="phone"
                                                                                       class="form-control"
                                                                                       placeholder="Phone" required>
                                                                            </div>
                                                                        </div>
                                                                        <div class="row">
                                                                            <div class="col">
                                                                                <input type="email" name="email"
                                                                                       class="form-control"
                                                                                       placeholder="Email" required>
                                                                            </div>
                                                                        </div>
                                                                        <div class="row">
                                                                            <div class="col">
                                                                                <input type="text"
                                                                                       name="reason_for_visit"
                                                                                       class="form-control"
                                                                                       placeholder="Reason for Visit"
                                                                                       required>
                                                                            </div>
                                                                        </div>
                                                                        <div class="row">
                                                                            <div class="col">
                                                                                <label for="">Select Your
                                                                                    Birthday</label>
                                                                                <input type="date" name="birthday"
                                                                                       class="form-control"
                                                                                       placeholder="Birthday"
                                                                                       value="" required>
                                                                            </div>
                                                                        </div>
                                                                        {{--<div class="row">
                                                                            <div class="col">
                                                                                <label for="">Booking Your Slot</label>
                                                                                <input type="date" name="booking_slot"
                                                                                       class="form-control"
                                                                                       placeholder="Booking Your Slot"
                                                                                       required>
                                                                            </div>
                                                                        </div>--}}
                                                                        <div class="row">
                                                                            <div class="col">
                                                                                <textarea name="message" id="" cols="30"
                                                                                          rows="6"
                                                                                          class="form-control"></textarea>
                                                                            </div>
                                                                        </div>
                                                                        <div class="row">
                                                                            <div class="col mb-5">
                                                                                <div class="bg">
                                                                                    <div>
                                                                                        <div class="chiller_cb">
                                                                                            <input id="myCheckbox"
                                                                                                   name="check"
                                                                                                   type="checkbox"
                                                                                                   checked>
                                                                                            <label for="myCheckbox">I
                                                                                                consent to receiving SMS
                                                                                                messages and/or
                                                                                                electronic marketing
                                                                                                messages from the
                                                                                                business listed above on
                                                                                                this site. You can
                                                                                                withdraw your consent at
                                                                                                any time. You can
                                                                                                contact us at the
                                                                                                address and/or telephone
                                                                                                number provide on this
                                                                                                website.</label>
                                                                                            <span></span>
                                                                                        </div>
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                        <div class="row">
                                                                            <div class="col">
                                                                                <button type="submit"
                                                                                        class="themebtn mt-4"
                                                                                        id="btncontinue">Continue
                                                                                </button>
                                                                            </div>
                                                                        </div>
                                                                    </form>
                                                                </div>
                                                            </div>
                                                            <div class="col-lg-4 col-sm-4 col-12">
                                                                <div class="patient-card">
                                                                    <h5>Booking summary</h5>
                                                                    <figure>
                                                                        <img
                                                                            src="{{ asset('front/images/cardimg.jpg') }}"
                                                                            alt="">
                                                                    </figure>
                                                                    <h5>Soft Wave</h5>
                                                                    <ul id="booking_detail" hidden>
                                                                        {{--<li>
                                                                            <a href="#">
                                                                                <i class="fas fa-clock"></i> 30 min
                                                                            </a>
                                                                        </li>--}}
                                                                        <li>
                                                                            <a href="#">
                                                                                <i class="fas fa-user"></i>
                                                                                {{ $user->name ?? 'Miltoy' }}
                                                                            </a>
                                                                        </li>
                                                                        {{--<li>
                                                                            <a href="#">
                                                                                <i class="fas fa-calendar-alt"
                                                                                   type="date"></i>
                                                                                Booking Slot </a>
                                                                        </li>--}}
                                                                        <li>
                                                                            <a href="#">
                                                                                <input
                                                                                    class="fas fa-calendar-alt"
                                                                                    type="date"
                                                                                    value="{{ $userService->booking_slot ?? '' }}"
                                                                                    disabled>
                                                                                Slot Booked
                                                                            </a>
                                                                        </li>
                                                                    </ul>
                                                                    {{--<a href="#" class="themebtn mt-4" id="btncontinue">Continue</a>--}}
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('script')
    <script>

        $(document).ready(function () {
            $('#btnCalendar').hide();
            uiFormSlide.init();
            let inpVal;

            $('.btnNext').on('click', function () {
                var serviceId = $(this).closest('.collapse').attr('id').substring(3);
                $('input[name="service_id"]').val(serviceId);
                inpVal = serviceId;
                localStorage.setItem("serviceId", inpVal);
                uiFormSlide.next();

                //calendar work
                var calendarEl = document.getElementById('calendar');
                var calendar = new FullCalendar.Calendar(calendarEl, {
                    initialView: 'dayGridMonth',
                    selectable: true,
                    dateClick: function (info) {
                        let bookingSlot = '{{ $userService ? $userService["booking_slot"] : "" }}';
                        let serviceId = localStorage.getItem('serviceId');
                        let userServiceId = '{{ $userService ? $userService["service_id"] : "" }}';

                        // Check if the selected date exists in the bookingSlot
                        if (serviceId == userServiceId) {
                            if (bookingSlot.includes(info.dateStr)) {
                                $(".fc-highlight").addClass("disabled");
                                alert("You have already booked slot on this day!");
                                return false;
                            }
                        }
                        // The selected date is valid, update the input field and continue with the logic
                        $('input[name="booking_slot"]').val(info.dateStr);
                        $('#booking_slot').val(info.dateStr);

                        // Show the button
                        $('#btnCalendar').show();
                    },
                });

                calendar.render();
            });
            $("#btncontinue").click(function () {
                uiFormSlide.next();
            });
            $("#btnCalendar").click(function () {
                uiFormSlide.next();
            });
            $("#btnPrev").click(function () {
                uiFormSlide.prev();
            });
            $("#btnPrev2").click(function () {
                uiFormSlide.prev();
            });
            onServiceChange();

            $('.btn_book_this_service').on('click', function () {
                onServiceChange();
            });

            function onServiceChange() {
                let js_serivice_id = localStorage.getItem('serviceId');
                let php_service_id = '{{ $userService ? $userService["service_id"] : "" }}';
                $('#booking_detail').prop('hidden', js_serivice_id != php_service_id);
            }
        });
    </script>
@endsection
{{--<div class="card mt-4">
                                                                    <div class="card-header">
                                                                        <a class="card-link" data-toggle="collapse"
                                                                           href="#menutwo" aria-expanded="true"
                                                                           aria-controls="menutwo">
                                                                            <div class="media">
                                                                                <img
                                                                                    src="{{ asset('front/images/imgtag02.jpg') }}"
                                                                                    alt="John Doe" style="width:80px;">
                                                                                <div class="media-body">
                                                                                    <h4>Regenerative Medicine</h4>
                                                                                    <p>30 min</p>
                                                                                </div>
                                                                            </div>
                                                                            <span class="collapsed">
                                                                              <p>
                                                                                <i class="far fa-angle-down"></i>
                                                                              </p>
                                                                            </span>
                                                                            <span class="expanded"></span>
                                                                        </a>
                                                                    </div>
                                                                    <div id="menutwo" class="collapse">
                                                                        <div class="card-body">
                                                                            <div class="d-flex">
                                                                              <span>
                                                                                <p>Regenerative medicine injections</p>
                                                                              </span>
                                                                                <span>
                                                                                <a href="#" class="themeBtn"
                                                                                   id="#btnNext2">Book this services</a>
                                                                              </span>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <div class="card mt-4">
                                                                    <div class="card-header">
                                                                        <a class="card-link" data-toggle="collapse"
                                                                           href="#menuthree" aria-expanded="true"
                                                                           aria-controls="menuthree">
                                                                            <div class="media">
                                                                                <img
                                                                                    src="{{ asset('front/images/imgtag03.jpg') }}"
                                                                                    alt="John Doe" style="width:80px;">
                                                                                <div class="media-body">
                                                                                    <h4>Personal injuries</h4>
                                                                                    <p>30 min</p>
                                                                                </div>
                                                                            </div>
                                                                            <span class="collapsed">
                                                                              <p>
                                                                                <i class="far fa-angle-down"></i>
                                                                              </p>
                                                                            </span>
                                                                            <span class="expanded"></span>
                                                                        </a>
                                                                    </div>
                                                                    <div id="menuthree" class="collapse">
                                                                        <div class="card-body">
                                                                            <div class="d-flex">
                                                                              <span>
                                                                                <p>Car wreck injury</p>
                                                                              </span>
                                                                                <span>
                                                                                <a href="#" class="themeBtn"
                                                                                   id="#btnNext3">Book this services</a>
                                                                              </span>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <div class="card mt-4">
                                                                    <div class="card-header">
                                                                        <a class="card-link" data-toggle="collapse"
                                                                           href="#menufour" aria-expanded="true"
                                                                           aria-controls="menufour">
                                                                            <div class="media">
                                                                                <img
                                                                                    src="{{ asset('front/images/imgtag03.jpg') }}"
                                                                                    alt="John Doe" style="width:80px;">
                                                                                <div class="media-body">
                                                                                    <h4> Hormones</h4>
                                                                                    <p>30 min</p>
                                                                                </div>
                                                                            </div>
                                                                            <span class="collapsed">
                                                                              <p>
                                                                                <i class="far fa-angle-down"></i>
                                                                              </p>
                                                                            </span>
                                                                            <span class="expanded"></span>
                                                                        </a>
                                                                    </div>
                                                                    <div id="menufour" class="collapse">
                                                                        <div class="card-body">
                                                                            <div class="d-flex">
                                                                              <span>
                                                                                <p>Car wreck injury</p>
                                                                              </span>
                                                                                <span>
                                                                                <a href="#" class="themeBtn"
                                                                                   id="btnNext4">Book this services</a>
                                                                              </span>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>--}}