@extends('../welcome')
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.2/fullcalendar.min.css" />

@section('content')
    <div id="calendar"></div>

    <!-- Modal -->
    <div class="modal fade" id="reservationModal" tabindex="-1" role="dialog" aria-labelledby="reservationModalLabel"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="reservationModalLabel">Reservation Details</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p><strong>Name:</strong> <span id="reservationName"></span></p>
                    <p><strong>Email:</strong> <span id="reservationTitle"></span></p>
                    <p><strong>Phone:</strong> <span id="reservationPhone"></span></p>
                    <p><strong>Salary:</strong> <span id="reservationSalary"></span></p>
                    <p><strong>Car Type:</strong> <span id="reservationcarType"></span></p>
                    <p><strong>Unit:</strong> <span id="reservationUnit"></span></p>
                    <p><strong>Date:</strong> <span id="reservationDate"></span></p>
                    <p><strong>Time:</strong> <span id="reservationTime"></span></p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.2/fullcalendar.min.js"></script>

    <script>
        var events = [];
        @foreach ($events as $event)
            var event = {
                name: '{{ $event['name'] }}',
                email: '{{ $event['email'] }}',
                phone: '{{ $event['phone'] }}',
                salary: '{{ $event['salary'] }}',
                carType: '{{ $event['carType'] }}',
                unit: '{{ $event['unit'] }}',
                start: '{{ $event['date'] }}' + 'T' + '{{ $event['time'] }}',
            };
            events.push(event);
        @endforeach
        console.log(events);

        $('#calendar').fullCalendar({
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,agendaWeek,agendaDay'
            },
            defaultView: 'agendaWeek',
            minTime: "10:00:00",
            maxTime: "15:00:00",
            events: events,
            timezone: 'UTC',
            theme: true,
            themeSystem: 'bootstrap3',
            eventClick: function(info) {
                var dateTimeString = info.start['_i'];
                var dateTime = new Date(dateTimeString);
                $('#reservationName').text(info.name);
                $('#reservationTitle').text(info.email);
                $('#reservationUnit').text(info.unit);
                $('#reservationPhone').text(info.phone);
                $('#reservationSalary').text(info.salary);
                $('#reservationcarType').text(info.carType);

                $('#reservationDate').text(dateTime.toLocaleDateString());
                $('#reservationTime').text(dateTime.toLocaleTimeString());
                $('#reservationModal').modal('show');
            }
        });
    </script>
@endsection