@extends('frontend.layout.main')
@section('title','Book Appointment')
@section('main-section')
    {{-- Header  --}}
    <x-frontend.navbar></x-frontend.navbar>

    <!--  Preloader Start -->
    <x-frontend.preloader></x-frontend.preloader>

    <!--  Preloader End -->

    <!-- Theme Switcher Start -->
    <div class="switch-theme-mode">
        <label id="switch" class="switch">
            <input type="checkbox" onchange="toggleTheme()" id="slider">
            <span class="slider round"></span>
        </label>
    </div>
    <!-- Theme Switcher End -->

    <!-- Custom Cursor -->
    <div class="cursor style-one"></div>
    <div class="cursor-inner style-one"></div>

    <!-- Breadcrumb Section Start -->

    <!-- Breadcrumb Section End -->

    <!-- Appointment Section Start -->
    <div class="container style-one ptb-120">
        <div class="row">
            <div class="col-xl-8 pe-xxl-4">
                <div class="form-box style-two round-20">
                    <form action="{{ route('appointments.store') }}" method="POST" class="form-wrapper">
                        @csrf
                        <div class="row">
                            <div class="col-12">
                                <h3 class="fs-24 fw-extrabold text-title mb-20">Your Information:</h3>
                            </div>
                            {{-- Name --}}
                            <div class="col-md-6">
                                <div class="mb-25">
                                    <div class="form-group position-relative">
                                        <input type="text" class="w-100 ht-50 bg-ash round-10 text-para border-0"
                                            placeholder="Name" name="name">
                                    </div>
                                    @error('name')
                                        <span class="text-red-500">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>
                            {{-- Email --}}
                            <div class="col-md-6">
                                <div class="mb-25">
                                    <div class="form-group position-relative ">
                                        <input type="email" class="w-100 ht-50 bg-ash round-10 text-para border-0"
                                            placeholder="Email" name="email">
                                        <img src="{{ asset('images/mail-blue.svg ') }}" alt="Icoon">
                                    </div>
                                    @error('email')
                                        <span class="text-red-500">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>
                            {{--  --}}
                            <div class="col-md-6">
                                <div class="form-group position-relative mb-25">
                                    <label for="dob">DOB</label>
                                    <input type="date" id="dob" name="dob"
                                        class="w-100 ht-50 bg-ash round-10 text-para border-0">
                                </div>
                                @error('dob')
                                    <span class="text-red-500">{{ $message }}</span>
                                @enderror
                            </div>
                            {{--  Phone --}}
                            <div class="col-md-6">
                                <label for="phone_no"> Phone</label>

                                <div class="form-group position-relative mb-25">
                                    <input type="text" id="phone_no" name="phone"
                                        class="w-100 ht-50 bg-ash round-10 text-para border-0" placeholder="Phone Number">
                                    <img src="{{ asset('images/phone-blue.svg') }}" alt="Icoon">

                                </div>
                                @error('phone')
                                    <span class="text-red-500">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="col-12">
                                <div class="d-flex align-items-center mb-25">
                                    <span class="fs-20 fw-semibold text-title me-3">Gender</span>
                                    <ul class="filter-radio-group list-unstyled mb-0">
                                        <li class="checkbox style-four d-inline-block me-5 position-relative fs-xx-14 mb-0">
                                            <input type="radio" id="male" name="gender" checked value="male">
                                            <label for="male">Male</label>
                                        </li>
                                        <li class="checkbox style-four d-inline-block  position-relative fs-xx-14 mb-0">
                                            <input type="radio" id="female" name="gender" value="female">
                                            <label for="female">Female</label>
                                        </li>
                                    </ul>
                                </div>
                                @error('gender')
                                    <span class="text-red-500">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="col-12">
                                <div class="form-group mb-25">
                                    <select id="service-select" class="w-100 ht-50 bg-ash round-10 text-para border-0" name="service">
                                        <option value="" selected disabled> Select Service</option>
                                        @forelse ($services as $service)
                                            <option value="{{ $service->id }}">{{ $service->title }}</option>
                                        @empty
                                            <option disabled>No Service</option>
                                        @endforelse

                                    </select>
                                </div>
                                @error('service')
                                    <span class="text-red-500">{{ $message }}</span>
                                @enderror
                            </div>

                            <div class="col-md-6">
                                <div class="form-group position-relative mb-25">
                                    <label for="date">Appointment Date</label>
                                    <input type="date" id="date" name="appointment_date"
                                        class="w-100 ht-50 bg-ash round-10 text-para border-0">
                                    @error('appointment_date')
                                        <span class="text-red-500">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group position-relative mb-25">
                                    <label for="time">Appointment Time</label>
                                    <input type="time" id="time" name="appointment_time"
                                        class="w-100 ht-50 bg-ash round-10 text-para border-0">
                                    @error('appointment_time')
                                        <span class="text-red-500">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-12">
                                <div class="form-group mb-25">
                                    <textarea name="message" id="messages" cols="30" rows="10" placeholder="Note To The Doctor(Optional)"
                                        class="w-100 round-10 bg-ash text-para border-0 resize-0 ht-200"></textarea>
                                </div>
                                @error('message')
                                    <span class="text-red-500">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="col-12">
                                <div class="form-check checkbox style-two mb-25">
                                    <input name="gridCheck" value="I agree to the terms and privacy policy."
                                        class="form-check-input" type="checkbox" id="gridCheck" required>
                                    <label class="form-check-label" for="gridCheck">
                                        I accept <a href="{{ route('privacy-policy') }}" class="text_primary link-hover-primary">Privacy
                                            Policy</a> and <a href="{{ route('terms-and-conditions') }}" class="text_primary link-hover-primary">Terms
                                            &amp; Conditions</a>
                                    </label>
                                    <div class="help-block with-errors gridCheck-error"></div>
                                </div>
                                <button type="submit" class="btn style-two position-relative z-1 round-6 mb-10">
                                    <span>Book Appointment
                                        <img src="{{ asset('images/right-arrow-white.svg') }}" alt="Icon"
                                            class="transition icon-left">
                                    </span>
                                    <img src="{{ asset('images/right-arrow-white.svg') }}" alt="Icon"
                                        class="transition icon-right">
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <div class="col-xl-4">
                <aside class="sidebar me-xxl-3">
                    <div class="sidebar-widget category-widget round-20">
                        <h3 class="sidebar-widget-title fs-24 fw-extrabold text-title mb-22">Booking Summary</h3>
                        <ul class="booking-list list-unstyled">
                            <li class="d-flex flex-wrap align-items-center justify-content-between">
                                <span>Date</span>
                                <span id="summary-date">Not set</span>
                            </li>
                            <li class="d-flex flex-wrap align-items-center justify-content-between">
                                <span>Time</span>
                                <span id="summary-time">Not set</span>
                            </li>
                            <li class="d-flex flex-wrap align-items-center justify-content-between">
                                <span>Service</span>
                                <span id="summary-service">Not selected</span>
                            </li>
                            <li class="d-flex flex-wrap align-items-center justify-content-between">
                                <span class="fs-xxl-18 text-title fw-semibold">Price</span>
                                <span id="summary-price" class="fs-xxl-18 text-title fw-semibold">$0</span>
                            </li>
                        </ul>
                        <div class="mt-25">
                            <p class="fs-14 text-para">Please review your booking details before confirming. Our admin will contact you shortly after confirmation.</p>
                        </div>
                    </div>
                </aside>
            </div>
        </div>
    </div>
    <!-- Appointment Section End -->

    {{-- Footer --}}
    <x-frontend.footer></x-frontend.footer>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            // Update Date in Summary
            $('#date').on('change', function() {
                $('#summary-date').text($(this).val());
            });

            // Update Time in Summary
            $('#time').on('change', function() {
                $('#summary-time').text($(this).val());
            });

            // Update Service and Price in Summary via AJAX
            $('#service-select').on('change', function() {
                var serviceId = $(this).val();
                var serviceName = $(this).find('option:selected').text();
                
                $('#summary-service').text(serviceName);

                if (serviceId) {
                    $.ajax({
                        url: '/get-service-price/' + serviceId,
                        type: 'GET',
                        success: function(response) {
                            if (response.price) {
                                $('#summary-price').text('$' + response.price);
                            } else {
                                $('#summary-price').text('$0');
                            }
                        },
                        error: function() {
                            $('#summary-price').text('Error');
                        }
                    });
                }
            });
        });
    </script>
@endsection