@extends('frontend.maintemplate.maintemplate')
@section('title', 'Calander' . ' :: AgeLess Institute')

@section('content')


    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.15/index.global.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

    <style>
       .courses-section-wrapper a {
            color: #56a888 !important;
            text-decoration: none;
        }

        .fc-daygrid-dot-event.fc-event-mirror,
        .fc-daygrid-dot-event {
            background: #4f9479;
        }

        .ri-close-line:before {
            color: white;
        }

        .fc-daygrid-dot-event.fc-event-mirror,
        .fc-daygrid-dot-event:hover {
            background: #4f9479;
        }
        .fc-daygrid-dot-event .fc-event-title {
            color: #fff;
        }
    </style>

<div class="courses-section-wrapper">

    <div class="container-fluid">




    <div class="container mt-4">
        <div id="calendar"></div>
    </div>
    <!-- Modal HTML -->
    <div id="modelRequiredModal" class="modal fade" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
            <h5 class="modal-title">Book Session</h5>
            <button type="button" class="close" onclick="$('#modelRequiredModal').modal('hide');" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>

            </div>
            <div class="modal-body">
            <form id="bookingForm">
                <div class="form-group">
                <label for="name">Model Name</label>
                <input type="text" id="name" class="form-control" required>
                <div class="invalid-feedback">Please enter your name.</div>
                </div>
                <div class="form-group">
                <label for="mobile">Model Mobile Number</label>
                <input type="text" id="mobile" class="form-control" required pattern="^[0-9]{10}$">
                <div class="invalid-feedback">Please enter a valid 10-digit mobile number.</div>
                </div>
                <div class="form-group">
                <label for="email">Model Email</label>
                <input type="email" id="email" class="form-control" required>
                <div class="invalid-feedback">Please enter a valid email address.</div>
                </div>
                <div class="form-group">
                <label for="address">Address</label>
                <input type="text" id="address" class="form-control" required>
                <div class="invalid-feedback">Please enter your address.</div>
                </div>
                <button type="button" id="bookSessionBtn" class="btn btn-primary">Book Session</button>
            </form>
            </div>
        </div>
        </div>
    </div>
</div>
</div>

    {{-- <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> --}}
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.15/index.global.min.js"></script>
    <script>

$('#modelRequiredModal').modal('hide');

    document.addEventListener('DOMContentLoaded', function() {
        var calendarEl = document.getElementById('calendar');
        var baseUrl = "{{ url('/') }}";
        var topicId = "{{ $topic_id }}";

        var bookedSessions = @json($bookedSessions);

        var modelRequired = @json($practicalSession->model_required);
        var calendar = new FullCalendar.Calendar(calendarEl, {
            initialView: 'dayGridMonth',
            eventContent: function(arg) {
                var eventEl = document.createElement('div');
                eventEl.classList.add('fc-event', 'fc-event-start', 'fc-event-end', 'fc-event-past', 'fc-daygrid-event', 'fc-daygrid-dot-event');

                var titleEl = document.createElement('div');
                titleEl.classList.add('fc-event-title');
                titleEl.innerHTML = `<center><strong>${arg.event.title}</strong></center>`;

                titleEl.addEventListener('click', function() {
                    var sessionId = "{{ $id }}";
                    var date = arg.event.start.toISOString().split('T')[0];
                    var slotId = arg.event.extendedProps.slot_id;

                    // if (modelRequired === 1) {
                    //     $('#modelRequiredModal').modal('show');

                    //     document.getElementById('bookSessionBtn').onclick = function() {
                    //         var name = document.getElementById('name').value;
                    //         var mobileNumber = document.getElementById('mobile').value;
                    //         var email = document.getElementById('email').value;
                    //         var address = document.getElementById('address').value;


                    //         var form = document.getElementById('bookingForm');
                    //         if (form.checkValidity() === false) {
                    //             form.classList.add('was-validated');
                    //             return;
                    //         }

                    //         if (confirm('Are you sure you want to book this session?')) {
                    //             $.ajax({
                    //                 url: `${baseUrl}/student/practicalsession`,
                    //                 type: 'POST',
                    //                 data: {
                    //                     modelRequired: modelRequired,
                    //                     session_id: sessionId,
                    //                     slot_id: slotId,
                    //                     topic_id: topicId,
                    //                     date: date,
                    //                     name: name,
                    //                     mobile: mobileNumber,
                    //                     email: email,
                    //                     address: address,
                    //                     _token: "{{ csrf_token() }}"
                    //                 },
                    //                 success: function(response) {
                    //                     if (response.success) {
                    //                         alert('Session booked successfully!');
                    //                         location.reload();
                    //                     } else {
                    //                         alert('Failed to book session: ' + response.message);
                    //                     }
                    //                 },
                    //                 error: function(xhr) {
                    //                     alert('An error occurred while booking the session. Error: ' + xhr.statusText);
                    //                 }
                    //             });
                    //         }
                    //     };

                    // } else {
                        if (confirm('Are you sure you want to book this session?')) {
                            $.ajax({
                                url: `${baseUrl}/student/practicalsession`,
                                type: 'POST',
                                data: {
                                    session_id: sessionId,
                                    slot_id: slotId,
                                    topic_id: topicId,
                                    date: date,
                                    _token: "{{ csrf_token() }}"
                                },
                                success: function(response) {
                                    if (response.success) {
                                        alert('Session booked successfully!');
                                        location.reload();
                                    } else {
                                        alert('Failed to book session: ' + response.message);
                                    }
                                },
                                error: function(xhr) {
                                    alert('An error occurred while booking the session. Error: ' + xhr.statusText);
                                }
                            });
                        }
                    // }
                });

                // Check if the event's date and slot ID are in the bookedSessions
                var date = arg.event.start.toISOString().split('T')[0];
                var slotId = arg.event.extendedProps.slot_id;

                if (bookedSessions[date] && bookedSessions[date][slotId]) {
                    var cancelButtonEl = document.createElement('button');
                    cancelButtonEl.innerHTML = '<i class="fas fa-times"></i>';
                    cancelButtonEl.classList.add('btn', 'btn-danger', 'btn-sm');
                    cancelButtonEl.style.marginTop = '2px';
                    cancelButtonEl.addEventListener('click', function(event) {
                        event.stopPropagation();
                        var sessionId = "{{ $id }}";

                        if (confirm('Are you sure you want to cancel this session?')) {
                            var url = `${baseUrl}/student/practicalsession/cancel`;

                            $.ajax({
                                url: url,
                                type: 'POST',
                                data: {
                                    modelRequired: modelRequired,
                                    session_id: sessionId,
                                    slot_id: slotId,

                                    _token: "{{ csrf_token() }}"
                                },
                                success: function(response) {
                                    if (response.success) {
                                        alert('Session canceled successfully!');
                                        location.reload();
                                    } else {
                                        alert('Failed to cancel session: ' + response.message);
                                    }
                                },
                                error: function(xhr) {
                                    alert('An error occurred while canceling the session. Error: ' + xhr.statusText);
                                }
                            });
                        }
                    });

                    eventEl.appendChild(cancelButtonEl);
                }

                eventEl.appendChild(titleEl);
                return { domNodes: [eventEl] };
            },
            eventDidMount: function(info) {
                info.el.classList.remove('fc-daygrid-dot-event');
            },
            events: function(fetchInfo, successCallback, failureCallback) {
                $.ajax({
                    url: baseUrl + '/student/practicalsession/create',
                    type: 'GET',
                    dataType: 'json',
                    data: {
            topic_id: topicId // Pass topic_id to the server
        },
                    success: function(response) {
                        var events = [];
                        if (response.result) {
                            response.result.forEach(function(event) {
                                events.push({
                                    id: event.id,
                                    title: event.title,
                                    start: event.start,
                                    end: event.end,
                                    extendedProps: {
                                        slot_id: event.slot_id,
                                        model_required: event.model_required
                                    }
                                });
                            });
                        }
                        successCallback(events);
                    },
                    error: function(xhr) {
                        failureCallback();
                    }
                });
            }
        });

        calendar.render();
    });



    </script>

@endsection