@extends('frontend.layouts.main')
@push('page-title')
    Step One - Make Reservation
@endpush
@section('content')
    <section class="bookTablePageMain">
        <div class="container">
            <div class="row">
                <div class="col-md-10 offset-md-1">
                    <div class="resFormWrap">
                        <div class="row">
                            <div class="col-12" style="margin-top: 200px;">
                                <div class="reservationBookingForWrap">
                                    <h4>Make a reservation</h4>
                                    <div class="stepProgressBar">
                                        <div class="stepOne">
                                            Step One
                                        </div>
                                    </div>
                                    @if($errors->any())
                                        <div class="flex flex-row alert alert-danger">
                                            <ul>
                                                @foreach($errors->all() as $error)
                                                    <li>{{ $error }}</li>
                                                @endforeach
                                            </ul>
                                        </div>
                                    @endif
                                    <form action="{{ route('reservations.store.step.one') }}" method="post" class="reservationBookingForm">
                                        @csrf
                                        <div class="row">
                                            <div class="col-12">
                                                <label for="" style="margin-bottom: 0;">
                                                    What are you joining us for?
                                                </label>
                                                <select name="joining_for" id="joining_for" required>
                                                    <option selected disabled>--</option>
                                                    <option value="drinks_only">Drinks only</option>
                                                    <option value="drinks_and_cigars">Drinks and Cigars</option>
                                                    <option value="food_and_drinks">Food and Drinks</option>
                                                    <option value="food_drinks_and_cigars">Food, Drinks and Cigars</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="row align-items-baseline">
                                            <div class="col-md-4">
                                                <label for="" style="margin-bottom: 0;">Choose your date *</label>

                                                <input type="date" name="reservation_date" id="reservation_date" class="" data-enable-time="false" min="{{ $min_date->format('Y-m-d') }}" max="{{ $max_date->addMonths(6)->format('Y-m-d') }}" value="{{ old('reservation_date_time', $reservation ? $reservation->reservation_date : '') }}">


                                                <small style="margin-bottom: 5px;">For bookings longer than 2 hours please contact us</small>
                                                @error('reservation_date_time')
                                                <div class="text-danger">
                                                    {{ $message }}
                                                </div>
                                                @enderror

                                            </div>
                                            <div class="col-md-4">
                                                <label for="" style="margin-bottom: 0;">Timeslot *</label>
                                                <select name="reservation_time" id="reservation_time">

                                                </select>
                                            </div>
                                            <div class="col-md-4">
                                                <label for="" style="margin-bottom: 0;">Number of guests *</label>

                                                <select name="guest_number" id="guest_number">
                                                    <option selected disabled>Select number of guests</option>
                                                    @foreach(['1', '2', '3', '4'] 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 4 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</label>
                                                <input type="text" name="table_location" id="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>
                </div>
            </div>
        </div>
    </section>

    <script>
        $(document).ready(function () {
            //Watch for change on the joining for table and adjust for the table
            $('#joining_for').change(function () {
                var selected = $(this).val();
                if (selected === 'drinks_only') {
                    $('#table_location').val('Bar');
                } else if (selected === 'drinks_and_cigars') {
                    $('#table_location').val('Cigar');
                } else if (selected === 'food_and_drinks') {
                    $('#table_location').val('Restaurant');
                } else {
                    $('#table_location').val('Cigar');
                }
            });

            // Get the current date
            var currentDate = new Date();
            var currentDay = currentDate.getDay();
            // Calculate the date 6 months from now
            var sixMonthsFromNow = new Date();
            sixMonthsFromNow.setMonth(sixMonthsFromNow.getMonth() + 6);

            // Fetch and set blocked dates from your backend to disable in the date picker
            $.ajax({
                url: '{{ route('admin.blocked_dates.fetch') }}',
                type: 'GET',
                success: function (response) {
                    var blockedDates = response.data;

                    // Create an array to store blocked dates
                    var blockedDatesArray = [];

                    blockedDates.forEach(function (blockedDate) {
                        blockedDatesArray.push(blockedDate.date); // Use the 'date' column
                    });

                    // Handle form submission
                    $('form.reservationBookingForm').on('submit', function (event) {
                        var selectedDate = $('#reservation_date').val();

                        // Check if the selected date is in the blockedDatesArray
                        if ($.inArray(selectedDate, blockedDatesArray) !== -1) {
                            event.preventDefault(); // Prevent the form from submitting

                            // Use SweetAlert for the confirmation dialog
                            Swal.fire({
                                title: 'Date Blocked',
                                text: 'This date is unavailable for booking.  Please select a different date',
                                icon: 'warning',
                                showCancelButton: true,
                                showConfirmButton: false,
                                cancelButtonText: "Ok",
                            }).then((result) => {
                                if (result.isConfirmed) {
                                    // User confirmed, allow form submission
                                    $(this).off('submit'); // Remove the submit event handler to allow submission
                                    $(this).submit(); // Trigger the form submission again
                                }
                            });
                        }
                    });
                },
                error: function () {
                    console.log('Error fetching blocked dates');
                }
            });
        });

        $(document).ready(function(){
            var selectedJoiningFor = '';
            var selectedDay = '';

            $('#joining_for').change(function(){
                selectedJoiningFor = $(this).val();
                updateReservationTime(selectedDay, selectedJoiningFor);
            });

            $('#reservation_date').change(function(){
                var selectedDate = $(this).val();
                var date = new Date(selectedDate);
                var dayIndex = date.getDay();
                var daysOfWeek = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
                selectedDay = daysOfWeek[dayIndex];

                updateReservationTime(selectedDay, selectedJoiningFor);
            });

            function updateReservationTime(day, joiningFor) {
                var timeOptions = '';

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

                if(joiningFor === 'food_and_drinks' || joiningFor === 'food_drinks_and_cigars') {
                    if (day === 'Monday' || day === 'Tuesday' || day === 'Wednesday' || day === 'Thursday') {
                        timeOptions =
                            '<option value="17:00">17:00</option>' +
                            '<option value="17:30">17:30</option>' +
                            '<option value="18:00">18:00</option>' +
                            '<option value="18:30">18:30</option>' +
                            '<option value="19:00">19:00</option>' +
                            '<option value="19:30">19:30</option>' +
                            '<option value="20:00">20:00</option>' +
                            '<option value="20:30">20:30</option>' +
                            '<option value="21:00">21:00</option>';
                    } else if (day === 'Friday' || day === 'Saturday') {
                        timeOptions =
                            '<option value="17:00">17:00</option>' +
                            '<option value="17:30">17:30</option>' +
                            '<option value="18:00">18:00</option>' +
                            '<option value="18:30">18:30</option>' +
                            '<option value="19:00">19:00</option>' +
                            '<option value="19:30">19:30</option>' +
                            '<option value="20:00">20:00</option>' +
                            '<option value="20:30">20:30</option>' +
                            '<option value="21:00">21:00</option>';
                    } else {
                        timeOptions =
                            '<option value="15:00">15:00</option>' +
                            '<option value="15:30">15:30</option>' +
                            '<option value="16:00">16:00</option>' +
                            '<option value="16:30">16:30</option>' +
                            '<option value="17:00">17:00</option>' +
                            '<option value="17:30">17:30</option>' +
                            '<option value="18:00">18:00</option>' +
                            '<option value="18:30">18:30</option>' +
                            '<option value="19:00">19:00</option>';
                    }
                }

                // Update the HTML of the reservation_time select element
                $('#reservation_time').html(timeOptions);
            }
        });
    </script>
@endsection