@extends('layouts.loggedin')
@section('content')
    <div class="mainContainer">
        <div class="top-searchbar">
            <form action="{{ route('get.parkingspot') }}" method="GET">
                <input type="text" placeholder="{{ __('Enter the district') }}" id="quartier" name="quartier">
                <input type="hidden" name="stype" value="Payant">
                <button type="submit">Search</button>
            </form>
        </div>
        @if(session('renting-results'))
            <div class="alert alert-success custom-alert" id="autoDismissAlert">
                <span class="alert-icon">&#x2714;</span>
                <strong>{{__(" Success ")}}</strong>
                <br>
                <div>{{ session('renting-results') }}</div>
            </div>
        @elseif(session('renting-results-bad'))
            <div class="alert alert-success custom-alert-bad" id="autoDismissAlertFail">
                <span class="alert-icon">&#x274C</span>
                <strong>{{__(" Fail ")}}</strong>
                <br>
                <div>{{ session('renting-results-bad') }}</div>
            </div>
        @endif
        <div class="dashboard">
            <x-sidebar>     
            </x-sidebar>
            <div class=>
            <div class="main-content">
                
                <div class="scrollable">
                    <h2 class="calendar-title">{{ __('Parking spot:') }} {{ $parking }}</h2>
                    <div id='calendar'>
                    </div>
                </div>
                    
                
                <div id="appointmentModal" class="modal">
                    <div class="modal-content">
                        <span class="close">&times;</span>
                        <h2>Create Appointment</h2>
                        <form id="appointmentForm" method="POST" action="{{ route('post.new.reservation')}}">
                            @csrf

                            <label for="start">{{__("Begin")}}:</label>
                            <select name="start" id="start">
                                    
                            </select>
                            <label for="end">{{__("End")}}:</label>
                            <select name="end" id="end">
                                    
                            </select>
                            <label for="vehicules">{{__("Vehicles")}}:</label>
                            <select name="vehicules" id="vehicules">
                                @foreach($vehicles as $vehicle)
                                    <option value="{{ $vehicle->registration_number }}">{{ $vehicle->registration_number }}</option>
                                @endforeach
                            </select>
                            <input type="text" name="datechoisie" id="datechoisie">
                            <p>
                                {{ __('Parking spot:') }} {{ $parking }}
                            </p>
                            <input type="hidden" name="parking" value={{$parking}}>
                            <button type="submit">{{__("Set appointment")}}</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div> 
@endsection

@push('scripts')
        <script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.11.3/main.min.js"></script>
        <script>
            document.addEventListener('DOMContentLoaded', function () {
                var calendarEl = document.getElementById('calendar');
                var events = @json($events);
                console.log(events);
                var calendar = new FullCalendar.Calendar(calendarEl, {
                    initialView: 'timeGridWeek',
                    slotMinTime: '06:00:00',
                    slotMaxTime: '17:00:00',
                    events: events,
                    dateClick: function(info) {
                                    var date=info.date;
                                    var beginning=date.getHours();
                                    var year = date.getFullYear();
                                    var month = String(date.getMonth() + 1).padStart(2, '0');
                                    var day = String(date.getDate()).padStart(2, '0');
                                    var mysqlFormattedDate = `${year}-${month}-${day}`;

                                    document.getElementById('start').value = beginning;
                                    
                                    populateBeginTimes(beginning);
                                    populateEndTimes(beginning);
                                    document.getElementById('appointmentModal').style.display = 'block';
                                    document.getElementById('datechoisie').value=mysqlFormattedDate;
                                }
                });
                calendar.render();
                var modal = document.getElementById("appointmentModal");
                            var span = document.getElementsByClassName("close")[0];

                            span.onclick = function() {
                                modal.style.display = "none";
                            }

                            window.onclick = function(event) {
                                if (event.target == modal) {
                                    modal.style.display = "none";
                                }
                            }
            });

                function populateEndTimes(startHour) {
                    var endSelect = document.getElementById('end');
                    endSelect.innerHTML = '';

                    for (var hour = startHour + 1; hour <= 17; hour++) {
                        var option = document.createElement('option');
                        option.value = hour + ':00';
                        option.text = hour + ':00';
                        endSelect.appendChild(option);
                    }
                }
                function populateBeginTimes(startHour) {
                    var endSelect = document.getElementById('start');
                    endSelect.innerHTML = '';

                    for (var hour = startHour; hour <= 17; hour++) {
                        var option = document.createElement('option');
                        option.value = hour + ':00';
                        option.text = hour + ':00';
                        endSelect.appendChild(option);
                    }
                }
            
        </script>
@endpush