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

<main>
<style>

.calendar-container {
    background: #fff;
    width: 450px;
    border-radius: 10px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
}

.calendar-container header {
    display: flex;
    align-items: center;
    padding: 25px 30px 10px;
    justify-content: space-between;
}

header .calendar-navigation {
    display: flex;
}

header .calendar-navigation span {
    height: 38px;
    width: 38px;
    margin: 0 1px;
    cursor: pointer;
    text-align: center;
    line-height: 38px;
    border-radius: 50%;
    user-select: none;
    color: #aeabab;
    font-size: 1.9rem;
}

.calendar-navigation span:last-child {
    margin-right: -10px;
}

header .calendar-navigation span:hover {
    background: #f2f2f2;
}

header .calendar-current-date {
    font-weight: 500;
    font-size: 1.45rem;
}

.selected-day {
    background-color: #ffcc00; /* Change this to your preferred color */
    color: white; /* Change the text color if needed */
}
</style>
    <!-- Inner Banner Html Start -->
    <div class="inner-ban">
        <img src="{{ asset('front/images/Inner-Bann.png') }}" class="img-fluid" alt="">
        <div class="overlay">
            <div class="container">
                <div class="row">
                    <div class="col-md-12">
                        <h2>Appointment</h2>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Inner Banner Html End -->


    <section class="contact-page">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div class="appointment-head">
                        <h2>Book an appointment</h2>
                        <p>Thank you for booking at Bellus! Can't wait to see you! Please plan to be on time and if
                            needed, reschedule at least 24 hours in advance :)
                            You can also text for any appointment questions <a href="">701-509-5614</a></p>
                    </div>
                    <form class="contact-form" action="{{ route('front.appointment-set') }}" method="POST">
                        @csrf
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <input type="text" name="name"  placeholder="Full Name">
                                </div>
                            </div>
                            <input type="hidden" name="date" id="selected_date">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <input type="text" name="email" placeholder="Email Address">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <input type="text" name="phone" placeholder="Cell phone*">
                                </div>
                            </div>
                            {{-- <div class="col-md-6">
                                <div class="form-group">
                                    <input type="date" class="form-control" name="date"
                                        placeholder=" Date of birth * (MM/DD/YYYY)*">
                                </div>
                            </div> --}}
                            <div class="col-md-6">
                                <div class="form-group">
                                    {{-- <select id="sub" name="services">
                                        <option value="">Select Services*</option>
                                        @if($selectedService)
                                        <option value="{{ $selectedService->id }}" selected>{{ $selectedService->name }}</option>
                                    @endif
                                    </select> --}}

                                    
                                    <select id="services" name="services">
                                        <option value="">Select Services*</option>
                                        @foreach ($services as $service)
                                            <option value="{{ $service->id }}" {{ $selectedService && $selectedService->id == $service->id ? 'selected' : '' }}>
                                                {{ $service->name }}
                                            </option>
                                        @endforeach
                                    </select>
                             
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <select id="providers" name="provider" onchange="fetchAvailability()">
                                        <option >Provider*</option>
                                        @foreach($providers as $provider)
                                            <option value="{{ $provider->id }}">{{ $provider->name }}</option>
                                        @endforeach

                                    </select>
                                </div>
                            </div>

                            <div class="col-md-6" id="calender_availablity" style="display: none;">
                                <div class="form-group">
                                    <div class="calendar-container">
                                        <header class="calendar-header">
                                            <p class="calendar-current-date"></p>
                                            <div class="calendar-navigation">
                                                <span id="calendar-prev"
                                                      class="material-symbols-rounded">
                                                    chevron_left
                                                </span>
                                                <span id="calendar-next"
                                                      class="material-symbols-rounded">
                                                    chevron_right
                                                </span>
                                            </div>
                                        </header>

                                        <div class="calendar-body">
                                            <ul class="calendar-weekdays">
                                                <li>Sun</li>
                                                <li>Mon</li>
                                                <li>Tue</li>
                                                <li>Wed</li>
                                                <li>Thu</li>
                                                <li>Fri</li>
                                                <li>Sat</li>
                                            </ul>
                                            <ul class="calendar-dates"></ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div id="availabilitySlots" class="col-md-6" style="display: none;">
                                <div class="form-group">
                                    <label for="appointment_time">Select Appointment Time*</label>
                                    <select id="appointment_time" name="appointment_time">
                                        <!-- Dynamically populated slots will go here -->
                                    </select>
                                </div>
                            </div>
                            {{-- <div class="col-md-6">
                                <div class="form-group">
                                    <select id="sub" name="appointment_time">
                                        <option >Appointment date *</option>

                                    </select>
                                </div>
                            </div> --}}
                            <div class="col-md-12">
                                <div class="form-group">
                                    <input type="text" class="form-control" name="additional_concerns"
                                        placeholder=" Additional concerns (Not Required)*">
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="btnappoint">
                                    <button class="apoint1">INFORM FACILITY</button>
                                    <button class="apoint2" type="submit">Confirm</button>
                                </div>
                            </div>
                            <div class="col-md-12 text-center">
                                <div class="appointment-head">

                                    <p>Thank you for booking at Bellus! Can't wait to see you! Please plan to be on time
                                        and if
                                        needed, reschedule at least 24 hours in advance :)
                                        You can also text for any appointment questions <a href="">701-509-5614</a></p>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </section>





</main>

@endsection
@push('script')
<script>
    let providerAvailability = {}; // To store availability data

    function fetchAvailability() {
        const providerId = document.getElementById('providers').value;

        if (providerId) {
            fetch(`{{ route('fetch.provider.availability', ['providerId' => '__PROVIDER_ID__']) }}`.replace('__PROVIDER_ID__', providerId))
                .then(response => response.json())
                .then(data => {
                    document.getElementById('calender_availablity').style.display = 'block';
                    // Highlight available weekdays on the calendar
                    const availableDays = data.days; // Array of weekdays
                    const calendarDates = document.querySelectorAll('.calendar-dates li');

                    calendarDates.forEach(dateElement => {
                        const dayIndex = new Date(year, month, parseInt(dateElement.innerText)).getDay();
                        const dayName = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'][dayIndex];

                        if (availableDays.includes(dayName)) {
                            dateElement.classList.add('available-day');
                        } else {
                            dateElement.classList.remove('available-day');
                        }
                    });

                    // Store provider availability slots globally for day-specific fetching
                    providerAvailability = data.slots; // { 'Monday': [{start_time, end_time}], ... }
                })
                .catch(error => {
                    show_toastr('error', 'Failed to fetch availability data.');
                });
        } else {
            providerAvailability = {}; // Reset availability
        }
    }

    let selectedDayElement = null;

    document.querySelector('.calendar-dates').addEventListener('click', function (event) {
        if (event.target.tagName === 'LI' && event.target.classList.contains('available-day')) {
            // Remove the selected class from the previously selected date, if any
            if (selectedDayElement) {
                selectedDayElement.classList.remove('selected-day'); // Assuming 'selected-day' is the class that changes the color
            }

            // Add the selected class to the clicked date
            selectedDayElement = event.target;
            selectedDayElement.classList.add('selected-day'); // Apply the color change class

            const selectedDate = new Date(year, month, parseInt(event.target.innerText)); // Get selected date

            // Adjust the selected date to avoid timezone issues
            const adjustedDate = new Date(selectedDate.getTime() - (selectedDate.getTimezoneOffset() * 60000));

            // Set the value in the hidden input field (in the correct format)
            document.getElementById('selected_date').value = adjustedDate.toISOString().split('T')[0];

            const dayOfWeek = adjustedDate.toLocaleDateString('en-US', { weekday: 'long' }); // Get weekday name

            // Get slots for the selected day
            const slots = providerAvailability[dayOfWeek] || [];
            populateSlots(slots, dayOfWeek);
        } else {
            show_toastr('info', 'No availability on the selected day.');
        }
    });


    function populateSlots(slots, dayOfWeek) {
    const slotsSelect = document.getElementById('appointment_time');
    slotsSelect.innerHTML = ''; // Clear existing options

    if (slots.length === 0) {
        slotsSelect.innerHTML = `<option>No slots available for ${dayOfWeek}</option>`;
    } else {
        slots.forEach(slot => {
            const startTime = new Date(`1970-01-01T${slot.start_time}:00`).toLocaleString('en-US', { hour: 'numeric', minute: 'numeric', hour12: true });
            const endTime = new Date(`1970-01-01T${slot.end_time}:00`).toLocaleString('en-US', { hour: 'numeric', minute: 'numeric', hour12: true });

            const option = document.createElement('option');
            option.value = `${slot.start_time}- ${slot.end_time}`;
            option.innerText = `${startTime} - ${endTime}`;
            slotsSelect.appendChild(option);
        });
    }

    // Show the slots dropdown
    document.getElementById('availabilitySlots').style.display = 'block';
}

    function show_toastr(type, message) {
        alert(`${type.toUpperCase()}: ${message}`); // Simple alert for demo purposes
    }


    const BASE_URL = "{{ url('') }}";
    document.addEventListener('DOMContentLoaded', function () {
        const servicesDropdown = document.getElementById('services');

        servicesDropdown.addEventListener('change', function () {
            const selectedServiceId = this.value;

            if (selectedServiceId) {
                // Make an AJAX request to check if the service has treatments
                fetch(`${BASE_URL}/services/${selectedServiceId}/has-treatments`) // No 'api' prefix
                    .then(response => response.json())
                    .then(data => {
                        if (!data.hasTreatmentInSession) {
                            // Redirect back to the front.services page if no treatments are available
                            window.location.href = `${BASE_URL}/service/${selectedServiceId}`;
                            toastr.error('Please select a treatment first!', 'Error');

                        }
                    })
                    .catch(error => console.error('Error:', error));
            }
        });
    });
</script>
<script src="{{ asset('front/js/calender.js') }}"></script>

@endpush