@extends('frontend.layouts.app-cafe-alegria')
@section('title')
Grupo Alegria | Cafe Alegria
@endsection

@section('seo')
<meta property="og:locale"          content="en_US" />
<meta property="og:type"            content="website" />
<meta property="og:title"           content="Grupo Alegria | Cafe Alegria" />
<meta property="og:url"             content="{{ url('cafe-alegria-form') }}" />
<meta property="og:site_name"       content="Grupo Alegria" />
<meta property="og:image"           content="{{ asset('resources/web_thumbnail.jpg') }}" />
<meta property="og:thumbnail"       content="{{ asset('resources/web_thumbnail.jpg') }}" />
@endsection
@section('content')
    <section style="margin-top: 100px">
        <div class="container">
            <div class="d-flex justify-content-between align-items-center bg-dark text-white px-3 py-2"
                style="flex-wrap: wrap;">
                <p class="fw-bold mb-2 mb-sm-0">Schedule</p>
                <p class="mb-0">Home / Branches / Cafe Alegria / <span style="text-decoration: underline">Schedule</span></p>
            </div>
            <div class="mt-5">
                <h1 class="text-white mb-5 fw-semibold">RESERVATION DETAILS</h1>

                <div class="mb-5">
                    <span class="text-white">PREFERRED SCHEDULE</span>
                </div>

                <form id="myForm" action="{{ url('branchesForm') }}" method="POST" enctype="multipart/form-data">@csrf
                <input type="hidden" name="branch" value="Cafe Alegria">

                <div id="calendar" class="mb-5 bg-black p-3"></div>
                <input type="hidden" name="assigned_date" id="selected_date">
                
                <div class="mt-5 vstack gap-4">
                    <div class="row g-4">
                        <div class="col-lg-6">
                            <input class="form-control rounded-0" type="text" name="first_name" value="{{ old('first_name') }}" placeholder="FIRST NAME *" aria-label="default input example">

                            @error('first_name')
                            <span class="text-danger">
                                {{ $message }}
                            </span>
                            @enderror
                        </div>
                        <div class="col-lg-6">
                            <input class="form-control rounded-0" type="text" name="last_name" value="{{ old('last_name') }}" placeholder="LAST NAME *" aria-label="default input example">

                            @error('last_name')
                            <span class="text-danger">
                                {{ $message }}
                            </span>
                            @enderror
                        </div>
                    </div>
                    <div class="row g-4">
                        <div class="col-lg-6">
                            <select class="form-select rounded-0" name="assigned_time" aria-label="Default select example">
                                <option selected hidden disabled>PREFERRED TIME *</option>
                                <option value="08:00">08:00 AM</option>
                                <option value="08:30">08:30 AM</option>
                                <option value="09:00">09:00 AM</option>
                                <option value="09:30">09:30 AM</option>
                                <option value="10:00">10:00 AM</option>
                                <option value="10:30">10:30 AM</option>
                                <option value="11:00">11:00 AM</option>
                                <option value="11:30">11:30 AM</option>
                                <option value="12:00">12:00 PM</option>
                                <option value="12:30">12:30 PM</option>
                                <option value="13:00">01:00 PM</option>
                                <option value="13:30">01:30 PM</option>
                                <option value="14:00">02:00 PM</option>
                                <option value="14:30">02:30 PM</option>
                                <option value="15:00">03:00 PM</option>
                                <option value="15:30">03:30 PM</option>
                                <option value="16:00">04:00 PM</option>
                                <option value="16:30">04:30 PM</option>
                                <option value="17:00">05:00 PM</option>
                            </select>

                            @error('assigned_time')
                            <span class="text-danger">
                                {{ $message }}
                            </span>
                            @enderror
                        </div>
                        <div class="col-lg-6">
                            <input class="form-control rounded-0" type="text" name="email" value="{{ old('email') }}" placeholder="EMAIL *" aria-label="default input example">

                            @error('email')
                            <span class="text-danger">
                                {{ $message }}
                            </span>
                            @enderror
                        </div>
                    </div>
                    <div class="row g-4">
                        <div class="col-lg-6">
                            <input class="form-control rounded-0" type="number" name="pax" value="{{ old('pax') }}" placeholder="NO. OF PAX *" aria-label="default input example">

                            @error('pax')
                            <span class="text-danger">
                                {{ $message }}
                            </span>
                            @enderror
                        </div>
                        <div class="col-lg-6">
                        <input class="form-control rounded-0" type="text" name="contact" value="{{ old('contact') }}" placeholder="CONTACT NO. *" aria-label="default input example">

                        @error('contact')
                        <span class="text-danger">
                            {{ $message }}
                        </span>
                        @enderror
                        </div>
                    </div>
                    <div class="row g-4">
                        <div class="col-lg-6">
                            <input class="form-control rounded-0" type="text" name="occasion" value="{{ old('occasion') }}" placeholder="OCCASSIONS *" aria-label="default input example">
                        </div>
                    </div>
                    <div class="form-floating">
                        <textarea class="form-control rounded-0" name="notes" value="{{ old('notes') }}" placeholder="NOTES (OPTIONAL)" id="floatingTextarea2" style="height: 200px"></textarea>
                        <label for="floatingTextarea2">NOTES (OPTIONAL)</label>

                        @error('notes')
                        <span class="text-danger">
                            {{ $message }}
                        </span>
                        @enderror
                    </div>
                </div>

                <div class="d-flex justify-content-center" id="submit-button-container">
                    <button type="submit" class="btn btn-color mt-5 px-4 py-2">RESERVE NOW</button>
                </div>

                </form>

                <div class="modal fade" id="successModal" tabindex="-1" aria-labelledby="successModalLabel" aria-hidden="true">
                    <div class="modal-dialog modal-dialog-centered">
                        <div class="modal-content">
                            <div class="modal-header d-flex justify-content-end border-bottom-0">
                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                            </div>
                            <div class="text-center">
                                <i class="fas fa-check-circle fa-3x animate__animated animate__bounceIn text-success"></i>
                                <h5 class="mt-3 animate__animated animate__fadeInUp">Your reservation details has been set successfully.</h5>
                            </div>
                            <div class="modal-footer border-top-0">
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </section>
@endsection

@section('style')
<link rel="stylesheet" href="{{ asset('css/frontend/branches/style.css') }}">
<link rel="stylesheet" href="{{ asset('css/frontend/branches/gallery.css') }}">
<link rel="stylesheet" href="{{ asset('css/frontend/branches/cafe-alegria.css') }}">
@endsection

@section('script')
    <script src='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.8/index.global.min.js'></script>
    <script src="{{ asset('js/frontend/script.js') }}"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            var calendarEl = document.getElementById('calendar');
            var calendar = new FullCalendar.Calendar(calendarEl, {
                initialView: 'dayGridMonth',
                selectable: true,
                select: function(info) {
                    var selectedStartDate = info.startStr;
                    var selectedEndDate = info.endStr;
                    
                    if (isFullyBooked(selectedStartDate)) {
                        alert("The selected date is already fully booked. Please select other dates that are available."); // Display an alert message
                        return;
                    }
                    
                    document.getElementById('selected_date').value = selectedStartDate;
                    toggleSubmitButton(); // Toggle the submit button visibility
                },
                unselect: function() {
                    toggleSubmitButton(); // Toggle the submit button visibility when unselecting a date
                },
                eventColor: '#f05129',
                events: [
                    @foreach($fullybookers as $fullybooker)
                        {
                            title: 'Fully Booked',
                            start: '{{$fullybooker}}',
                            display: 'background',
                            selectable: false // Disable selection for fully booked dates
                        },
                    @endforeach
                ],
            });
            calendar.render();
            
            function isFullyBooked(date) {
                var fullyBookedDates = @json($fullybookers);
                var selectedDate = new Date(date).toISOString().slice(0, 10);
                return fullyBookedDates.includes(selectedDate);
            }
            
            function toggleSubmitButton() {
                var selectedDate = document.getElementById('selected_date').value;
                var submitButtonContainer = document.getElementById('submit-button-container');
                
                if (selectedDate && @json($fullybookers).includes(selectedDate)) {
                    submitButtonContainer.style.display = 'none'; // Hide the submit button
                } else {
                    submitButtonContainer.style.display = 'flex'; // Show the submit button
                }
            }
            
            toggleSubmitButton(); // Initial toggle of submit button visibility
        });

        // $(document).ready(function() {
        //     $('#myForm').submit(function(e) {
        //     e.preventDefault();
        //     $.ajax({
        //         url: $(this).attr('action'),
        //         type: $(this).attr('method'),
        //         data: new FormData(this),
        //         processData: false,
        //         contentType: false,
        //         success: function(response) {
        //         $('#successModal').modal('show');
        //         setTimeout(function() {
        //             $('#successModal').modal('hide');
        //             $('.modal-backdrop').remove();
        //             $('.animate__animated').removeClass('animate__animated animate__zoomIn');
        //         }, 3000);
        //         }
        //     });
        //     });
        // });
    </script>
    
    
@endsection