@extends('layouts.admin')

@section('content')
    <x-admin.page-hero
        title="Create Reservation"
        displayButton="no"
    />
    @if($errors->any())
        <div class="alert alert-danger" role="alert">
            <ul>
                @foreach($errors->all() as $error)
                    <li>
                        {{ $error }}
                    </li>
                @endforeach
            </ul>
        </div>
    @endif
    <section class="pageMain">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <form action="{{ route('admin.reservations.store') }}" method="post">
                        @csrf
                        <div class="row align-items-center">
                            <div class="col-md-4">
                                <label>
                                    What are you joining us for?
                                </label>
                                <select name="joining_for" id="joining_for" required>
                                    <option 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>
                                </select>
                            </div>
                            <div class="col-md-4">
                                <label for="">Table *</label>
                                <select name="table_id" id="table_id" required>
                                    @foreach($tables as $table)
                                        <option value="{{ $table->id }}" @if($loop->first) selected @endif>{{ $table->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-4">
                                <label for="">Table Location</label>
                                <select name="table_location" id="table_location">
                                    @foreach($tableLocations as $location)
                                        <option value="{{ $location->id }}">{{ $location->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="row align-items-baseline">
                            <div class="col-lg-4">
                                <label for="" 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') }}"
                                       placeholder="Select your date" readonly>
                                @error('reservation_date_time')
                                <div class="text-danger">
                                    {{ $message }}
                                </div>
                                @enderror

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

                                </select>
                            </div>
                            <div class="col-lg-4">
                                <label for="" 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', '7', '8'] as $g_number)
                                        <option value="{{ $g_number }}">{{ ucfirst($g_number) }}</option>
                                    @endforeach
                                </select>
                                @error('guest_number')
                                <div class="text-danger">
                                    {{ $message }}
                                </div>
                                @enderror
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <label for="">First Name *</label>
                                <input type="text" name="first_name" id="first_name" value="{{ old('first_name') }}" required>
                                @error('first_name')
                                <div class="text-danger">
                                    {{ $message }}
                                </div>
                                @enderror
                            </div>
                            <div class="col-md-6">
                                <label for="">Last Name *</label>
                                <input type="text" name="last_name" id="last_name" value="{{ old('last_name') }}" required>
                                @error('last_name')
                                <div class="text-danger">
                                    {{ $message }}
                                </div>
                                @enderror
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <label for="">Email Address *</label>
                                <input type="email" name="email" id="email" value="{{ old('email') }}" required>
                                @error('email')
                                <div class="text-danger">
                                    {{ $message }}
                                </div>
                                @enderror
                            </div>
                            <div class="col-md-6">
                                <label for="">Phone Number *</label>
                                <input type="tel" name="phone_number" id="phone_number" value="{{ old('phone_number') }}" required>
                                @error('phone_number')
                                <div class="text-danger">
                                    {{ $message }}
                                </div>
                                @enderror
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-12">
                                <label for="">Additional Information</label>
                                <textarea name="additional_info" id="additional_ino" cols="30" rows="10">{{ old('additional_info') }}</textarea>
                                @error('additional_info')
                                <div class="text-danger">
                                    {{ $message }}
                                </div>
                                @enderror
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-12">
                                <label for="">Dietary Information</label>
                                <textarea name="dietary_info" id="dietary_ino" cols="30" rows="10">{{ old('dietary_ino') }}</textarea>
                                @error('dietary_info')
                                <div class="text-danger">
                                    {{ $message }}
                                </div>
                                @enderror
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6 offset-md-6 d-flex justify-content-end">
                                <button class="solidGoldBtn">Save</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </section>
    <script>
        $(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('/reservations/blocked-dates')
                .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 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 the selected day in the form
                    $('#selected_day').val(selectedDay);

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

            // Function to update the table location
            function updateTableLocation() {
                var selected = $('#joining_for').val();
                if (selected === 'drinks_only') {
                    $('#table_location').val('3');
                } else if (selected === 'drinks_and_cigars') {
                    $('#table_location').val('2');
                } else if (selected === 'food_and_drinks') {
                    $('#table_location').val('1');
                }
            }

            // Function to initialize the date picker
            function initializeDatePicker(blockedDates) {
                $('#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) {
                            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);
                    }
                });
            }

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

            // Function to update reservation time based on the selected day
            function updateReservationTime(selectedDay) {
                var selectedJoiningFor = $('#joining_for').val();
                var timeOptions = '';

                if (selectedDay === 'Monday' || selectedDay === 'Tuesday' || selectedDay === 'Wednesday' || selectedDay === 'Thursday') {
                    timeOptions = '<option value="11:00">11:00</option>' +
                        '<option value="11:30">11:30</option>' +
                        '<option value="12:00">12:00</option>' +
                        '<option value="12:30">12:30</option>' +
                        '<option value="13:00">13:00</option>' +
                        '<option value="13:30">13:30</option>' +
                        '<option value="14:00">14:00</option>' +
                        '<option value="14:30">14:30</option>' +
                        '<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>' +
                        '<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 (selectedDay === 'Friday' || selectedDay === 'Saturday') {
                    timeOptions = '<option value="11:00">11:00</option>' +
                        '<option value="11:30">11:30</option>' +
                        '<option value="12:00">12:00</option>' +
                        '<option value="12:30">12:30</option>' +
                        '<option value="13:00">13:00</option>' +
                        '<option value="13:30">13:30</option>' +
                        '<option value="14:00">14:00</option>' +
                        '<option value="14:30">14:30</option>' +
                        '<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>' +
                        '<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="11:00">11:00</option>' +
                        '<option value="11:30">11:30</option>' +
                        '<option value="12:00">12:00</option>' +
                        '<option value="12:30">12:30</option>' +
                        '<option value="13:00">13:00</option>' +
                        '<option value="13:30">13:30</option>' +
                        '<option value="14:00">14:00</option>' +
                        '<option value="14:30">14:30</option>' +
                        '<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 (selectedJoiningFor === 'food_and_drinks' || selectedJoiningFor === 'food_drinks_and_cigars') {
                    if (selectedDay === 'Monday' || selectedDay === 'Tuesday' || selectedDay === 'Wednesday' || selectedDay === 'Thursday') {
                        timeOptions = '<option value="11:00">11:00</option>' +
                            '<option value="11:30">11:30</option>' +
                            '<option value="12:00">12:00</option>' +
                            '<option value="12:30">12:30</option>' +
                            '<option value="13:00">13:00</option>' +
                            '<option value="13:30">13:30</option>' +
                            '<option value="14:00">14:00</option>' +
                            '<option value="14:30">14:30</option>' +
                            '<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>' +
                            '<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 (selectedDay === 'Friday' || selectedDay === 'Saturday') {
                        timeOptions = '<option value="11:00">11:00</option>' +
                            '<option value="11:30">11:30</option>' +
                            '<option value="12:00">12:00</option>' +
                            '<option value="12:30">12:30</option>' +
                            '<option value="13:00">13:00</option>' +
                            '<option value="13:30">13:30</option>' +
                            '<option value="14:00">14:00</option>' +
                            '<option value="14:30">14:30</option>' +
                            '<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>' +
                            '<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="11:00">11:00</option>' +
                            '<option value="11:30">11:30</option>' +
                            '<option value="12:00">12:00</option>' +
                            '<option value="12:30">12:30</option>' +
                            '<option value="13:00">13:00</option>' +
                            '<option value="13:30">13:30</option>' +
                            '<option value="14:00">14:00</option>' +
                            '<option value="14:30">14:30</option>' +
                            '<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);
            }

            // Function to fetch and set booked dates based on the selected date
            function fetchBookedDates(blockedDates, selectedDate) {
                axios.get('/reservations/booked-dates', {
                    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);
                    });
            }
        });

    </script>
@endsection