@extends('dashboard.layouts.app')

@section('title', 'Home Page')

@section('styles')
<script src='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.15/index.global.min.js'></script>

@endsection

@section('content')
   
<div class="row g-7">
    <div class="col-xl-12">
        <div class="card card-flush h-lg-100" id="kt_contacts_main">
            <div class="card-header pt-7" id="kt_chat_contacts_header">
                <div class="card-title">
                    <i class="ki-outline ki-calendar fs-1 me-2"></i>
                    <h2>{{ __('dashboard.Calendar') }}</h2>
                </div>
            </div>
            <div class="card-body pt-5">
                <div id="calendar"></div>
            </div>
        </div>
    </div>
</div>



<!-- Add Event Modal -->
<div class="modal fade" id="addEventModal" tabindex="-1" aria-labelledby="addEventModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="addEventModalLabel">Add Event</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="addEventForm">
                    <input type="hidden" name="user_id" value="{{ auth()->user()->id }}">
                    <div class="mb-3">
                        <label for="event-title" class="form-label">Event Title</label>
                        <input type="text" class="form-control" id="event-title" name="title" required>
                        <div class="invalid-feedback" id="add-event-title-error"></div>
                    </div>
                    <div class="mb-3">
                        <label for="event-start" class="form-label">Start Date & Time</label>
                        <input type="datetime-local" class="form-control" id="event-start" name="start" required>
                        <div class="invalid-feedback" id="add-event-start-error"></div>
                    </div>
                    <div class="mb-3">
                        <label for="event-end" class="form-label">End Date & Time</label>
                        <input type="datetime-local" class="form-control" id="event-end" name="end">
                        <div class="invalid-feedback" id="add-event-end-error"></div>
                    </div>
                    <div class="mb-3">
                        <label for="event-details" class="form-label">Event Details</label>
                        <textarea class="form-control" id="event-details" name="details"></textarea>
                        <div class="invalid-feedback" id="add-event-details-error"></div>
                    </div>
                    <button type="submit" class="btn btn-primary">Save Event</button>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- Edit Event Modal -->
<div class="modal fade" id="editEventModal" tabindex="-1" aria-labelledby="editEventModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="editEventModalLabel">Edit Event</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="editEventForm">
                    <input type="hidden" id="event-id" name="id">
                    <input type="hidden" name="user_id" value="{{ auth()->user()->id }}">
                    <div class="mb-3">
                        <label for="event-title" class="form-label">Event Title</label>
                        <input type="text" class="form-control" id="event-title" name="title" required>
                        <div class="invalid-feedback" id="edit-event-title-error"></div>
                    </div>
                    <div class="mb-3">
                        <label for="event-start" class="form-label">Start Date & Time</label>
                        <input type="datetime-local" class="form-control" id="event-start" name="start" required>
                        <div class="invalid-feedback" id="edit-event-start-error"></div>
                    </div>
                    <div class="mb-3">
                        <label for="event-end" class="form-label">End Date & Time</label>
                        <input type="datetime-local" class="form-control" id="event-end" name="end">
                        <div class="invalid-feedback" id="edit-event-end-error"></div>
                    </div>
                    <div class="mb-3">
                        <label for="event-details" class="form-label">Event Details</label>
                        <textarea class="form-control" id="event-details" name="details"></textarea>
                        <div class="invalid-feedback" id="edit-event-details-error"></div>
                    </div>
                    <button type="submit" class="btn btn-primary">Update Event</button>
                    <button type="button" id="deleteEventButton" class="btn btn-danger">Delete Event</button>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- View Event Modal -->
<div class="modal fade" id="viewEventModal" tabindex="-1" aria-labelledby="viewEventModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="viewEventModalLabel">Event Details</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p><strong>Title:</strong> <span id="view-event-title"></span></p>
                <p><strong>Start:</strong> <span id="view-event-start"></span></p>
                <p><strong>End:</strong> <span id="view-event-end"></span></p>
                <p><strong>Details:</strong> <span id="view-event-details"></span></p>
                <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#editEventModal">Edit Event</button>
            </div>
        </div>
    </div>
</div>


@endsection

@section('scripts')
    <script>
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });
</script>
<script>

    document.addEventListener('DOMContentLoaded', function() {
        var calendarEl = document.getElementById('calendar');

        var calendar = new FullCalendar.Calendar(calendarEl, {
        initialView: 'dayGridMonth',
        headerToolbar: {
            left: 'prev,next today',
            center: 'title',
            right: 'dayGridMonth,timeGridWeek,timeGridDay'
        },
        selectable: true,
        editable: true,
        events: function(fetchInfo, successCallback, failureCallback) {
            $.ajax({
                url: '/events',
                type: 'GET',
                data: {
                    user_id: '{{ auth()->user()->id }}' 
                },
                success: function(response) {
                    successCallback(response); 
                },
                error: function() {
                    failureCallback();
                }
            });
        },
        eventClick: function(info) {
            let eventObj = info.event;

            $('#viewEventModal').modal('show');
            $('#viewEventModal #view-event-title').text(eventObj.title);
            $('#viewEventModal #view-event-start').text(eventObj.start.toISOString().slice(0, 16).replace('T', ' '));
            $('#viewEventModal #view-event-end').text(eventObj.end ? eventObj.end.toISOString().slice(0, 16).replace('T', ' ') : 'N/A');
            $('#viewEventModal #view-event-details').text(eventObj.extendedProps.details || 'No details provided');

            $('#editEventModal #event-id').val(eventObj.id);
            $('#editEventModal #event-title').val(eventObj.title);
            $('#editEventModal #event-start').val(eventObj.start.toISOString().slice(0, 16));
            $('#editEventModal #event-end').val(eventObj.end ? eventObj.end.toISOString().slice(0, 16) : '');
            $('#editEventModal #event-details').val(eventObj.extendedProps.details || '');
        },
        select: function(info) {
            $('#addEventModal').modal('show');
            $('#addEventModal #event-start').val(info.startStr.replace('Z', ''));
            $('#addEventModal #event-end').val(info.endStr ? info.endStr.replace('Z', '') : '');
        }
    });

    calendar.render();

        $('#addEventForm').on('submit', function(e) {
            e.preventDefault();
            $.ajax({
                url: '/events',
                type: 'POST',
                data: $(this).serialize(),
                success: function(response) {
                    calendar.addEvent({
                        id: response.id,
                        title: response.title,
                        start: response.start,
                        end: response.end,
                        extendedProps: {
                            details: response.details
                        }
                    });
                    $('#addEventModal').modal('hide');
                    alert('Event added successfully');
                },
                error: function(xhr) {
                    let errors = xhr.responseJSON.errors;
                    if (errors) {
                        if (errors.title) {
                            $('#event-title').addClass('is-invalid');
                            $('#add-event-title-error').text(errors.title[0]);
                        }
                        if (errors.start) {
                            $('#event-start').addClass('is-invalid');
                            $('#add-event-start-error').text(errors.start[0]);
                        }
                        if (errors.end) {
                            $('#event-end').addClass('is-invalid');
                            $('#add-event-end-error').text(errors.end[0]);
                        }
                        if (errors.details) {
                            $('#event-details').addClass('is-invalid');
                            $('#add-event-details-error').text(errors.details[0]);
                        }
                    } else {
                        alert('Error adding event');
                    }
                }
            });
        });

        $('#editEventForm').on('submit', function(e) {
            e.preventDefault();
            var eventId = $('#editEventModal #event-id').val();

            $.ajax({
                url: '/events/' + eventId,
                type: 'PUT',
                data: $(this).serialize(),
                success: function(response) {
                    var event = calendar.getEventById(eventId);
                    if (event) {
                        event.setProp('title', response.title);
                        event.setDates(response.start, response.end);
                        event.setExtendedProp('details', response.details);
                    }
                    $('#editEventModal').modal('hide');
                    alert('Event updated successfully');
                },
                error: function(xhr) {
                    let errors = xhr.responseJSON.errors;
                    if (errors) {
                        if (errors.title) {
                            $('#event-title').addClass('is-invalid');
                            $('#edit-event-title-error').text(errors.title[0]);
                        }
                        if (errors.start) {
                            $('#event-start').addClass('is-invalid');
                            $('#edit-event-start-error').text(errors.start[0]);
                        }
                        if (errors.end) {
                            $('#event-end').addClass('is-invalid');
                            $('#edit-event-end-error').text(errors.end[0]);
                        }
                        if (errors.details) {
                            $('#event-details').addClass('is-invalid');
                            $('#edit-event-details-error').text(errors.details[0]);
                        }
                    } else {
                        alert('Error updating event');
                    }
                }
            });
        });

        $('#deleteEventButton').off('click').on('click', function() {
            var eventId = $('#editEventModal #event-id').val();
            if (confirm("Are you sure you want to delete this event?")) {
                $.ajax({
                    url: '/events/' + eventId,
                    type: 'DELETE',
                    success: function(response) {
                        var event = calendar.getEventById(eventId);
                        if (event) {
                            event.remove();
                        }
                        $('#editEventModal').modal('hide');
                        $('#viewEventModal').modal('hide');
                        alert('Event deleted successfully');
                    },
                    error: function(xhr) {
                        alert('Error deleting event');
                    }
                });
            }
        });
    });

</script>

@endsection