@extends('layouts.admin')
@section('content')
    @push('page-title')
        Edit {{ $reservation->first_name }} {{ $reservation->last_name }}'s booking - Admin
    @endpush
    <section class="pageHero">
        <div class="container">
            <div class="inner">
                <div class="row">
                    <div class="col-md-8">
                        <h1>Edit {{ $reservation->first_name }} {{ $reservation->last_names }}'s booking </h1>
                    </div>
                    <div class="col-md-4 d-flex justify-content-end">
                        <a href="{{ route('admin.reservations.index') }}" class="solidGoldBtn">All Reservations</a>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="pageMain">
        <div class="container">
            <div class="inner">
                <form action="{{ route('admin.reservations.update', $reservation->id) }}" method="POST">
                    @csrf
                    @method("PUT")
                    <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", $reservation->first_name) }}" >
                            @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', $reservation->last_name) }}" >
                            @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', $reservation->email) }}" >
                            @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', $reservation->phone_number) }}" >
                            @error('phone_number')
                            <div class="text-danger">
                                {{ $message }}
                            </div>
                            @enderror
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-4">
                            <label for="" style="margin-bottom: 0;">Reservation Date</label>
                            <input type="date" name="reservation_date" id="reservation_date" value="{{ old('reservation_date_time', $reservation->reservation_date) }}" >
                            @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>
                            <input type="time" name="reservation_time" id="reservation_time" value="{{ $reservation->reservation_time }}">
                        </div>
                        <div class="col-md-4">
                            <label for="" style="margin-bottom: 0;">Reservation end time</label>
                            <input type="time" name="reservation_time_end" id="reservation_time_end" value="{{ $reservation->reservation_time_end }}">
                        </div>
                        {{--<div class="col-md-4">
                            <label for="">Reservation End Date & Time</label>
                            <input type="datetime-local" name="reservation_end_date_time" id="reservation_end_date_time" value="{{ old('reservation_end_date_time', $reservation->reservation_end_date_time) }}">
                            @error('reservation_end_date_time')
                                <div class="text-danger">
                                    {{ $message }}
                                </div>
                            @enderror
                        </div>--}}
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <label for="">Number of guests *</label>
                            <input type="number" name="guest_number" id="guest_number" value="{{ old('guest_number', $reservation->guest_number) }}" >
                            @error('guest_number')
                            <div class="text-danger">
                                {{ $message }}
                            </div>
                            @enderror
                        </div>
                        <div class="col-md-6">
                            <label for="">Table *</label>
                            <select name="table_id" id="table_id"   >
                                @foreach($table as $table)
                                    <option value="{{ $table->id }}" @if($table->id == $reservation->table_id) selected @endif>{{ $table->name }} - {{ $table->table_location }} - {{ $table->no_of_seats }}</option>
                                @endforeach
                            </select>
                            @error('table_id')
                            <div class="text-danger">
                                {{ $message }}
                            </div>
                            @enderror
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12">
                            <label for="">Service</label>
                            <select name="joining_for" id="joining_for" required>
                                <option value="drinks_only" @if($reservation->joining_for == 'drinks_only') selected @endif>Drinks only</option>
                                <option value="drinks_and_cigars" @if($reservation->joining_for == 'drinks_and_cigars') selected @endif>Drinks and Cigars</option>
                                <option value="food_and_drinks" @if($reservation->joining_for == 'food_and_drinks') selected @endif>Food and Drinks</option>
                                <option value="food_drinks_and_cigars" @if($reservation->joining_for == 'food_drinks_and_cigars') selected @endif>Food, Drinks and Cigars</option>
                                <option value="masterclass" @if($reservation->joining_for == 'masterclass') selected @endif>Masterclass</option>
                            </select>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12">
                            <button type="submit" class="solidGoldBtn">Update</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </section>

    <script>
        $(document).ready(function() {
            $('#reservation_date_time').on('change', function() {
                var reservationDateTime = $(this).val();
                var carbonDateTime = moment(reservationDateTime);
                var modifiedDateTime = carbonDateTime.add(2, 'hours').format('YYYY-MM-DD HH:mm:ss');

                $('#reservation_end_date_time').val(modifiedDateTime);
            });
        });
    </script>
    <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);
        });

        $(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