@extends('website.layout.master')

@section('title')
    Appointment
@endsection

@section('content')

    <!-- Start Page Title -->
    <div class="page-title-area">
        <div class="container">
            <div class="page-title-content">
                <h2>Appointment</h2>
                <ul>
                    <li><a href="{{route('home')}}">Home</a></li>
                    <li>Appointment</li>
                </ul>
            </div>
        </div>
    </div>
    <!-- End Page Title -->

    <!-- Start Checkout Area -->
    <section class="checkout-area ptb-100">
        <div class="container">


            <form action="{{ route('save_bookings') }}" method="post">
                @csrf
                <div class="row justify-content-center">
                    <div class="col-lg-6 col-md-12">
                        <div class="billing-details">
                            <h3 class="title">Appointment Details</h3>
                            @include('website.layout.laravel_errors')
                            <div class="row justify-content-center">

                                <div class="col-lg-6 col-md-6">
                                    <div class="form-group">
                                        <label>Voornaam <span class="required">*</span></label>
                                        <input type="text" class="form-control" name="fname" required
                                               placeholder="Voornaam">
                                    </div>
                                </div>

                                <div class="col-lg-6 col-md-6">
                                    <div class="form-group">
                                        <label>Achternaam <span class="required">*</span></label>
                                        <input type="text" class="form-control" name="lname" required
                                               placeholder="Achternaam">
                                    </div>
                                </div>

                                <div class="col-lg-12 col-md-12">
                                    <div class="form-group">
                                        <label>E-mail <span class="required">*</span></label>
                                        <input type="email" name="email" required class="form-control"
                                               placeholder="E-mail">
                                    </div>
                                </div>

                                <div class="col-lg-12 col-md-12">
                                    <div class="form-group">
                                        <label>Telefoon <span class="required">*</span></label>
                                        <input type="text" name="phone" required class="form-control"
                                               placeholder="Telefoon">
                                    </div>
                                </div>
                                <div class="col-lg-6 col-md-6">
                                    <div class="form-group">
                                        <label>Datum <span class="required">*</span></label>
                                        <input type="text" class="form-control" name="date" required
                                               placeholder="Datum" id="datepicker" onchange="GetTime(this.value)">
                                    </div>
                                </div>
                                <div class="col-lg-6 col-md-6" id="TimeDiv">

                                </div>

                                <div class="col-lg-12 col-md-12">
                                    <div class="form-group">
                                        <label>Afspraaknotities</label>
                                        <textarea name="message" required id="notes" cols="30" rows="5"
                                                  placeholder="Afspraaknotities" class="form-control"></textarea>
                                    </div>
                                </div>
                                <div class="col-lg-12 col-md-12" style="text-align: center">
                                    <button class="default-btn" type="submit">Book Now</button>
                                </div>

                            </div>

                        </div>
                    </div>

                </div>
            </form>
        </div>
    </section>
    <!-- End Checkout Area -->


    <!-- Start Facility Area -->
    <section class="facility-area ">
        <div class="container">
            <div class="facility-slides owl-carousel owl-theme">
                <div class="single-facility-box">
                    <div class="icon">
                        <i class='flaticon-tracking'></i>
                    </div>
                    <h3>Free Shipping</h3>
                </div>

                <div class="single-facility-box">
                    <div class="icon">
                        <i class='flaticon-return'></i>
                    </div>
                    <h3>Easy Online Booking</h3>
                </div>

                <div class="single-facility-box">
                    <div class="icon">
                        <i class='flaticon-shuffle'></i>
                    </div>
                    <h3>Authentic Moroccan Styles</h3>
                </div>

                <div class="single-facility-box">
                    <div class="icon">
                        <i class='flaticon-sale'></i>
                    </div>
                    <h3>Flexible Rental Options</h3>
                </div>

                <div class="single-facility-box">
                    <div class="icon">
                        <i class='flaticon-credit-card'></i>
                    </div>
                    <h3>Expert Style Assistance</h3>
                </div>

                <div class="single-facility-box">
                    <div class="icon">
                        <i class='flaticon-location'></i>
                    </div>
                    <h3>Quality Guarantee Assured</h3>
                </div>

                <div class="single-facility-box">
                    <div class="icon">
                        <i class='flaticon-customer-service'></i>
                    </div>
                    <h3>Seamless Return Process</h3>
                </div>
            </div>
        </div>
    </section>
    <!-- End Facility Area -->

@endsection

@section('script')

    <script>

        $("#datepicker").flatpickr({
            minDate: "today",
            maxDate: new Date().fp_incr(30)
        });
        $("#timepicker").flatpickr({
            enableTime: true,
            noCalendar: true,
            dateFormat: "H:i",
            time_24hr: true
        });

        function GetTime(date) {
            $.ajax({
                url: `{{ route("gettime") }}?date=${encodeURIComponent(date)}`,
                type: "GET",
                beforeSend: function () {
                    ShowLoader();
                },
                success: function (result) {
                    HideLoader();
                    $("#TimeDiv").empty();
                    $("#TimeDiv").append(result);
                },
                error: function (xhr, status, error) {
                    HideLoader();
                    console.error("Error:", error); // Optional: Handle errors
                }
            });
        }


    </script>
@endsection