@extends('layouts.frontend')
@push('page-title')
    Step One - Make Reservation
@endpush
@section('content')
    <style>
        .reservationBookingFormWrap .stepProgressBar .stepItem.stepOne {
            width: 50%;
        }
    </style>
    <section class="bookTablePageMain">
        <div class="container">
            <div class="row">
                <div class="col-md-10 offset-md-1">
                    <div class="reservationBookingFormWrap">
                        <h4>Make a reservation</h4>
                        <div class="stepProgressBar">
                            <div class="stepItem stepOne">
                                Step One
                            </div>
                        </div>
                        @if($errors->any())
                            <div class="text-danger errorsWrap">
                                <ul>
                                    @foreach($errors->all() as $error) <!-- Add ->all() here -->
                                    <li>{{ $error }}</li>
                                    @endforeach
                                </ul>
                            </div>
                        @endif
                        <form action="{{ route('reservations.step-one-store') }}" method="post" class="reservationBookingForm">
                            @csrf
                            <div class="row align-items-baseline">
                                <div class="col-12">
                                    <label for="" style="margin-bottom: 0;">
                                        What are you joining us for?
                                    </label>
                                    <select name="joining_for" id="joining_for" onchange="" required>
                                        <option selected disabled>--</option>
                                        <option value="food" @if(isset($reservation) && $reservation->joining_for == 'food') selected @endif>Food</option>
                                        <option value="cigars_and_drinks" @if(isset($reservation) && $reservation->joining_for == 'cigars_and_drinks') selected @endif>Cigars and Drinks</option>
                                    </select>
                                </div>
                            </div>
                            <div class="row foodTypeRow" style="@if(isset ($reservation) && $reservation->joining_for == 'food') display: block; @else display: none; @endif">
                                <div class="col-12">
                                    <label for="">Meal Type</label>
                                    <select name="meal_type" id="meal_type" onchange="">
                                        <option selected disabled>--</option>
                                        <option value="lunch" @if(isset($reservation) && $reservation->meal_type == 'lunch') selected @endif>Lunch</option>
                                        <option value="dinner" @if(isset($reservation) && $reservation->meal_type == 'dinner') selected @endif>Dinner</option>
                                    </select>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-12">
                                    <label for="reservation_date" style="margin-bottom: 0;">Choose your date *</label>

                                    <input type="text" name="reservation_date" id="reservation_date" class=""
                                           data-enable-time="false"
                                           value="{{ old('reservation_date', $reservation ? $reservation->reservation_date : '') }}"
                                           placeholder="Select your date" readonly>
                                    <input type="text" id="selected_day" name="selected_day">
                                    @error('reservation_date_time')
                                    <div class="text-danger">
                                        {{ $message }}
                                    </div>
                                    @enderror
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-12">
                                    <label for="reservation_time" style="margin-bottom: 0;">Timeslot *</label>
                                    <select name="reservation_time" id="reservation_time">

                                    </select>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-12">
                                    <label for="guest_number" style="margin-bottom: 0;">Number of guests *</label>
                                    <select name="guest_number" id="guest_number">
                                        <option disabled>Select number of guests</option>
                                        @foreach(['1', '2', '3', '4', '5', '6'] as $g_number)
                                            <option value="{{ $g_number }}" @if($g_number == session('guest_number')) selected @endif>{{ ucfirst($g_number) }}</option>
                                        @endforeach
                                    </select>
                                    <small style="margin-bottom: 15px;">For more than 6 guests, please contact us</small>
                                    @error('guest_number')
                                    <div class="text-danger">
                                        {{ $message }}
                                    </div>
                                    @enderror
                                </div>
                            </div>
                            <div class="row" style="display: none;">
                                <div class="col-12">
                                    <label for="table_location">table location</label>
                                    <input type="text" name="table_location" id="table_location" value="{{ old('reservation_date', $reservation ? $reservation->table_location : '') }}" readonly>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6"></div>
                                <div class="col-md-6">
                                    <button type="submit" class="solidGoldBtn" style="display: block; width: 100%;">Next <i class="fas fa-chevron-right"></i></button>
                                </div>
                            </div>
                        </form>
                    </div>

                </div>
            </div>
        </div>
    </section>

    <!-- updated JS Code below -->

    <script defer>
        document.addEventListener("DOMContentLoaded", function() {

            $(document).ready(function () {
                const tomorrow = new Date();
                tomorrow.setDate(tomorrow.getDate() + 1);
                let blockedDates = [];
                let selectedDate = '';

                // Initialize the date picker
                initializeDatePicker(blockedDates);

                // Fetch and set blocked dates from your backend to disable in the date picker
                axios.get('{{ route('reservations.blocked-dates-check') }}')
                    .then(response => {
                        blockedDates = response.data;
                        //console.log('Blocked Dates:', blockedDates);
                        updateDatePickerDisabledDates(blockedDates);
                    })
                    .catch(error => {
                        console.error('Error fetching blocked dates: ', error);
                    });

                //Watch for change on joining_for and show/hide the foodTypeRow
                $('#joining_for').change(function () {
                    var selected = $(this).val();
                    if (selected === 'food') {
                        //change show function to use jquery ui show slide down
                        $('.foodTypeRow').slideDown(1000);
                    } else {
                        $('.foodTypeRow').slideUp(1000);
                    }
                });

                // Watch for change on the joining_for table and adjust for the table
                $('#joining_for').change(function () {
                    updateTableLocation();
                    updateReservationTime($('#selected_day').val());
                    fetchBookedDates(blockedDates, selectedDate); // Fetch booked dates when joining_for changes
                });

                // Function to update the date picker with blocked dates
                function updateDatePickerDisabledDates(blockedDates) {
                    $('#reservation_date').datepicker("refresh"); // Refresh the datepicker to apply the new blocked dates
                    $('#reservation_date').datepicker('option', 'beforeShowDay', function (date) {
                        const dateString = $.datepicker.formatDate('yy-mm-dd', date);
                        const dateStringBackend = moment(date).format('YYYY-MM-DD'); // Backend format
                        const isDateBlocked = blockedDates.includes(dateString);
                        const dayOfWeek = date.getDay();
                        const today = new Date();

                        if (today > date || isDateBlocked) {
                            return [false];
                        }

                        // Update the hidden input field with dateStringBackend
                        $('#reservation_date_backend').val(dateStringBackend);

                        // Get the selected day of the week
                        const daysOfWeek = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
                        const selectedDay = daysOfWeek[dayOfWeek];  // Update this line

                        // Update the selected day in the form
                        $('#selected_day').val(selectedDay);

                        // Update the reservation time based on the selected date
                        updateReservationTime(selectedDay);  // Update this line
                        return [true];
                    });
                }

                // Function to update the table location
                function updateTableLocation() {
                    var selected = $('#joining_for').val();
                    if (selected === 'food') {
                        $('#table_location').val('5');
                    } else if (selected === 'cigars_and_drinks') {
                        $('#table_location').val('4');
                    }
                }

                // Function to initialize the date picker
                function initializeDatePicker(blockedDates) {
                    let selectedDay;
                    $('#reservation_date').datepicker({
                        dateFormat: 'dd/mm/yy',
                        minDate: 0,
                        beforeShowDay: function (date) {
                            const dateString = $.datepicker.formatDate('yy-mm-dd', date);
                            const dateStringBackend = moment(date).format('YYYY-MM-DD'); // Backend format
                            const isDateBlocked = blockedDates.includes(dateString);
                            const dayOfWeek = date.getDay();
                            const today = new Date();

                            if (today > date || isDateBlocked || (dayOfWeek !== 1 && dayOfWeek !== 2)) {
                                return [false];
                            }

                            // Update the hidden input field with dateStringBackend
                            $('#reservation_date_backend').val(dateStringBackend);
                        },
                        onSelect: function (dateText) {
                            // When the user selects a date, update the reservation_date field
                            $('#reservation_date').val(dateText);
                            $('#reservation_date_backend').val(moment(dateText, 'DD/MM/YY').format('YYYY-MM-DD'));
                            selectedDate = moment(dateText, 'DD/MM/YY').format('YYYY-MM-DD');

                            // Fetch and set booked dates based on the selected date
                            fetchBookedDates(blockedDates, selectedDate);

                            const selectedDateObj = new Date(inst.selectedYear, inst.selectedMonth, inst.selectedDay);

                            // Determine the selected day
                            selectedDay = $.datepicker.formatDate('DD', selectedDateObj);

                            console.log(selectedDay);

                            // Call updateReservationTime with selectedDay
                            updateReservationTime(selectedDay);
                        }
                    });
                }

                // Initialize table location on page load
                updateTableLocation();



                // Function to fetch and set booked dates based on the selected date
                function fetchBookedDates(blockedDates, selectedDate) {
                    axios.get('{{ route('reservations.blocked-dates-check') }}', {
                        params: {
                            reservation_date: selectedDate // Pass the selected date
                        }
                    })
                        .then(response => {
                            const isBlocked = response.data.blocked;
                            console.log('Blocked:', isBlocked);
                            initializeDatePicker(blockedDates, isBlocked);
                        })
                        .catch(error => {
                            console.error('Error fetching booked dates: ', error);
                        });
                }
            });
            // Function to update reservation time based on the selected day
            function updateReservationTime(selectedDay) {
                var selectedJoiningFor = $('#joining_for').val();
                var timeOptions = '';
                var selectedMeal = $('#meal_type').val();

                console.log(selectedDay);


                if (selectedJoiningFor === 'food') {
                    if(selectedMeal === 'lunch'){
                        if(selectedDay === 'Monday' || selectedDay === 'Tuesday' || selectedDay === 'Wednesday' || selectedDay === 'Thursday' || selectedDay === 'Friday' || selectedDay === 'Friday' || selectedDay === 'Saturday'){
                            timeOptions =
                                '<option value="12:00">12:00</option>' +
                                '<option value="12:15">12:15</option>' +
                                '<option value="12:30">12:30</option>' +
                                '<option value="12:45">12:45</option>' +
                                '<option value="13:00">13:00</option>' +
                                '<option value="13:15">13:15</option>' +
                                '<option value="13:30">13:30</option>' +
                                '<option value="13:45">13:45</option>' +
                                '<option value="14:00">14:00</option>' +
                                '<option value="14:15">14:15</option>' +
                                '<option value="14:30">14:30</option>' +
                                '<option value="14:45">14:45</option>' +
                                '<option value="15:00">15:00</option>';
                        }
                    }
                    if(selectedMeal === 'dinner') {
                        if(selectedDay === 'Monday' || selectedDay === 'Tuesday' || selectedDay === 'Wednesday' || selectedDay === 'Thursday'){
                            timeOptions =
                                '<option value="17:00">17:00</option>' +
                                '<option value="17:15">17:15</option>' +
                                '<option value="17:30">17:30</option>' +
                                '<option value="17:45">17:45</option>' +
                                '<option value="18:00">18:00</option>' +
                                '<option value="18:15">18:15</option>' +
                                '<option value="18:30">18:30</option>' +
                                '<option value="18:45">18:45</option>' +
                                '<option value="19:00">19:00</option>' +
                                '<option value="19:15">19:15</option>' +
                                '<option value="19:30">19:30</option>' +
                                '<option value="19:45">19:45</option>' +
                                '<option value="20:00">20:00</option>' +
                                '<option value="20:15">20:15</option>' +
                                '<option value="20:30">20:30</option>' +
                                '<option value="20:45">20:45</option>' +
                                '<option value="21:00">21:00</option>'
                            ;

                        }
                        else if(selectedDay === 'Friday' || selectedDay === 'Saturday'){
                            timeOptions =
                                '<option value="17:00">17:00</option>' +
                                '<option value="17:15">17:15</option>' +
                                '<option value="17:30">17:30</option>' +
                                '<option value="17:45">17:45</option>' +
                                '<option value="18:00">18:00</option>' +
                                '<option value="18:15">18:15</option>' +
                                '<option value="18:30">18:30</option>' +
                                '<option value="18:45">18:45</option>' +
                                '<option value="19:00">19:00</option>' +
                                '<option value="19:00">19:00</option>' +
                                '<option value="19:15">19:15</option>' +
                                '<option value="19:30">19:30</option>' +
                                '<option value="19:45">19:45</option>' +
                                '<option value="20:00">20:00</option>' +
                                '<option value="20:15">20:15</option>' +
                                '<option value="20:30">20:30</option>' +
                                '<option value="20:45">20:45</option>' +
                                '<option value="21:00">21:00</option>' +
                                '<option value="21:15">21:15</option>' +
                                '<option value="21:30">21:30</option>' +
                                '<option value="21:45">21:45</option>' +
                                '<option value="22:00">22:00</option>'
                            ;
                        }
                    }
                }
                else if (selectedJoiningFor === 'cigars_and_drinks') {
                    if (selectedDay === 'Monday' || selectedDay === 'Tuesday' || selectedDay === 'Wednesday' || selectedDay === 'Thursday') {
                        timeOptions =
                            '<option value="11:00">11:00</option>' +
                            '<option value="11:15">11:15</option>' +
                            '<option value="11:30">11:30</option>' +
                            '<option value="11:45">11:45</option>' +
                            '<option value="12:00">12:00</option>' +
                            '<option value="12:15">12:15</option>' +
                            '<option value="12:30">12:30</option>' +
                            '<option value="12:45">12:45</option>' +
                            '<option value="13:00">13:00</option>' +
                            '<option value="13:15">13:15</option>' +
                            '<option value="13:30">13:30</option>' +
                            '<option value="13:45">13:45</option>' +
                            '<option value="14:00">14:00</option>' +
                            '<option value="14:15">14:15</option>' +
                            '<option value="14:30">14:30</option>' +
                            '<option value="14:45">14:45</option>' +
                            '<option value="15:00">15:00</option>' +
                            '<option value="15:15">15:15</option>' +
                            '<option value="15:30">15:30</option>' +
                            '<option value="15:45">15:45</option>' +
                            '<option value="16:00">16:00</option>' +
                            '<option value="16:15">16:15</option>' +
                            '<option value="16:30">16:30</option>' +
                            '<option value="16:45">16:45</option>' +
                            '<option value="17:00">17:00</option>' +
                            '<option value="17:15">17:15</option>' +
                            '<option value="17:30">17:30</option>' +
                            '<option value="17:45">17:45</option>' +
                            '<option value="18:00">18:00</option>' +
                            '<option value="18:15">18:15</option>' +
                            '<option value="18:30">18:30</option>' +
                            '<option value="18:45">18:45</option>' +
                            '<option value="19:00">19:00</option>' +
                            '<option value="19:15">19:15</option>' +
                            '<option value="19:30">19:30</option>' +
                            '<option value="19:45">19:45</option>' +
                            '<option value="20:00">20:00</option>' +
                            '<option value="20:15">20:15</option>' +
                            '<option value="20:30">20:30</option>' +
                            '<option value="20:45">20:45</option>' +
                            '<option value="21:00">21:00</option>' +
                            '<option value="21:15">21:15</option>' +
                            '<option value="21:30">21:30</option>' +
                            '<option value="21:45">21:45</option>' +
                            '<option value="22:00">22:00</option>' +
                            '<option value="22:15">22:15</option>' +
                            '<option value="22:30">22:30</option>' +
                            '<option value="22:45">22:45</option>' ;
                    } else if (selectedDay === 'Friday' || selectedDay === 'Saturday') {
                        timeOptions =
                            '<option value="11:00">11:00</option>' +
                            '<option value="11:15">11:15</option>' +
                            '<option value="11:30">11:30</option>' +
                            '<option value="11:45">11:45</option>' +
                            '<option value="12:00">12:00</option>' +
                            '<option value="12:15">12:15</option>' +
                            '<option value="12:30">12:30</option>' +
                            '<option value="12:45">12:45</option>' +
                            '<option value="13:00">13:00</option>' +
                            '<option value="13:15">13:15</option>' +
                            '<option value="13:30">13:30</option>' +
                            '<option value="13:45">13:45</option>' +
                            '<option value="14:00">14:00</option>' +
                            '<option value="14:15">14:15</option>' +
                            '<option value="14:30">14:30</option>' +
                            '<option value="14:45">14:45</option>' +
                            '<option value="15:00">15:00</option>' +
                            '<option value="15:15">15:15</option>' +
                            '<option value="15:30">15:30</option>' +
                            '<option value="15:45">15:45</option>' +
                            '<option value="16:00">16:00</option>' +
                            '<option value="16:15">16:15</option>' +
                            '<option value="16:30">16:30</option>' +
                            '<option value="16:45">16:45</option>' +
                            '<option value="17:00">17:00</option>' +
                            '<option value="17:15">17:15</option>' +
                            '<option value="17:30">17:30</option>' +
                            '<option value="17:45">17:45</option>' +
                            '<option value="18:00">18:00</option>' +
                            '<option value="18:15">18:15</option>' +
                            '<option value="18:30">18:30</option>' +
                            '<option value="18:45">18:45</option>' +
                            '<option value="19:00">19:00</option>' +
                            '<option value="19:15">19:15</option>' +
                            '<option value="19:30">19:30</option>' +
                            '<option value="19:45">19:45</option>' +
                            '<option value="20:00">20:00</option>' +
                            '<option value="20:15">20:15</option>' +
                            '<option value="20:30">20:30</option>' +
                            '<option value="20:45">20:45</option>' +
                            '<option value="21:00">21:00</option>' +
                            '<option value="21:15">21:15</option>' +
                            '<option value="21:30">21:30</option>' +
                            '<option value="21:45">21:45</option>' +
                            '<option value="22:00">22:00</option>' +
                            '<option value="22:15">22:15</option>' +
                            '<option value="22:30">22:30</option>' +
                            '<option value="22:45">22:45</option>' +
                            '<option value="23:00">23:00</option>' +
                            '<option value="23:15">23:15</option>' +
                            '<option value="23:30">23:30</option>' +
                            '<option value="23:45">23:45</option>' +
                            '<option value="00:00">00:00</option>' +
                            '<option value="00:15">00:15</option>' +
                            '<option value="00:30">00:30</option>' +
                            '<option value="00:45">00:45</option>'  ;
                    } else {
                        timeOptions =
                            '<option value="12:00">12:00</option>' +
                            '<option value="12:15">12:15</option>' +
                            '<option value="12:30">12:30</option>' +
                            '<option value="12:45">12:45</option>' +
                            '<option value="13:00">13:00</option>' +
                            '<option value="13:15">13:15</option>' +
                            '<option value="13:30">13:30</option>' +
                            '<option value="13:45">13:45</option>' +
                            '<option value="14:00">14:00</option>' +
                            '<option value="14:15">14:15</option>' +
                            '<option value="14:30">14:30</option>' +
                            '<option value="14:45">14:45</option>' +
                            '<option value="15:00">15:00</option>' +
                            '<option value="15:15">15:15</option>' +
                            '<option value="15:30">15:30</option>' +
                            '<option value="15:45">15:45</option>' +
                            '<option value="16:00">16:00</option>' +
                            '<option value="16:15">16:15</option>' +
                            '<option value="16:30">16:30</option>' +
                            '<option value="16:45">16:45</option>' +
                            '<option value="17:00">17:00</option>' +
                            '<option value="17:15">17:15</option>' +
                            '<option value="17:30">17:30</option>' +
                            '<option value="17:45">17:45</option>' +
                            '<option value="18:00">18:00</option>' +
                            '<option value="18:15">18:15</option>' +
                            '<option value="18:30">18:30</option>' +
                            '<option value="18:45">18:45</option>' +
                            '<option value="19:00">19:00</option>' ;
                    }
                }

                // Update the HTML of the reservation_time select element
                $('#reservation_time').html(timeOptions);
            }

        });

    </script>
@endsection