@extends('layout.master')

@section('content')
<div class="row">
  <div class="col-md-12">
    <div class="card">
      <div class="card-body">
        <div id='fullcalendar'></div>
      </div>
    </div>
  </div>
</div>

<!-- PPM Details Modal -->
<div class="modal fade" id="ppmModal" tabindex="-1" aria-labelledby="ppmModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="ppmModalLabel">PPM File Details</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body" id="ppmModalBody">
        <!-- Content will be loaded here -->
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

<!-- Report Details Modal -->
<div class="modal fade" id="reportModal" tabindex="-1" aria-labelledby="reportModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="reportModalLabel">Schedule Reports</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body" id="reportModalBody">
        <!-- Content will be loaded here -->
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

<!-- Toast container -->
<div id="toast-container" style="position: fixed; top: 20px; right: 20px; z-index: 9999"></div>
@endsection

@push('plugin-scripts')
  <script src="{{ asset('assets/plugins/moment/moment.min.js') }}"></script>
  <script src="{{ asset('assets/plugins/fullcalendar/index.global.min.js') }}"></script>
  <script src="{{ asset('assets/plugins/sweetalert2/sweetalert2.min.js') }}"></script>
@endpush

@push('custom-scripts')
  <script>
document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('fullcalendar');
    var ppmModal = new bootstrap.Modal(document.getElementById('ppmModal'));
    var reportModal = new bootstrap.Modal(document.getElementById('reportModal'));
    
    // Initialize calendar
    var calendar = new FullCalendar.Calendar(calendarEl, {
        initialView: 'dayGridMonth',
        headerToolbar: {
            left: 'prev,next today',
            center: 'title',
            right: 'dayGridMonth,timeGridWeek,timeGridDay'
        },
        nowIndicator: true,
        events: [
            {
                url: '{{ route("calendar.events") }}',
                method: 'GET'
            },
            {
                url: '{{ route("ppm.calendar.events") }}',
                method: 'GET'
            }
        ],
        eventSources: [
            {
                url: '{{ route("calendar.events") }}',
                method: 'GET',
                failure: function(error) {
                    console.error('Error loading calendar events:', error);
                    showToast('Error loading calendar events', 'danger');
                }
            },
            {
                url: '{{ route("ppm.calendar.events") }}',
                method: 'GET',
                failure: function(error) {
                    console.error('Error loading PPM events:', error);
                    showToast('Error loading PPM file events', 'danger');
                }
            }
        ],
        eventContent: function(arg) {
            let content = document.createElement('div');
            
            // Custom styling based on event type
            if (arg.event.extendedProps.type === 'report') {
                content.innerHTML = `
                    <div class="d-flex align-items-center">
                        <span class="badge me-2" style="background-color:#28a745">
                            <i class="fas fa-file-alt"></i>
                        </span>
                        <div class="text-truncate">
                            ${arg.event.title}
                        </div>
                    </div>
                `;
            } else if (arg.event.extendedProps.type === 'ppm_file') {
                content.innerHTML = `
                    <div class="d-flex align-items-center">
                        <span class="badge me-2" style="background-color:#ffc107">
                            <i class="fas fa-file-upload"></i>
                        </span>
                        <div class="text-truncate">
                            ${arg.event.title}
                        </div>
                    </div>
                `;
            } else {
                content.innerHTML = `
                    <div class="d-flex align-items-center">
                        <span class="badge me-2" style="background-color:${arg.event.backgroundColor}">
                            <i class="fas fa-calendar"></i>
                        </span>
                        <div class="text-truncate">
                            ${arg.event.title}
                        </div>
                    </div>
                `;
            }
            
            return { domNodes: [content] };
        },
        eventDidMount: function(arg) {
            // Add tooltips for all events
            let tooltipContent = `
                <strong>${arg.event.title}</strong><br>
                <small>${moment(arg.event.start).format('LL')}</small>
            `;
            
            if (arg.event.extendedProps.description) {
                tooltipContent += `<br>${arg.event.extendedProps.description}`;
            }
            
            $(arg.el).tooltip({
                title: tooltipContent,
                html: true,
                placement: 'top'
            });
        },
        eventClick: function(info) {
            info.jsEvent.preventDefault();
            
            if (info.event.extendedProps.type === 'report') {
                showReportDetails(info.event);
            } else if (info.event.extendedProps.type === 'ppm_file') {
                showPpmDetails(info.event);
            } else if (info.event.extendedProps.editable) {
                // Handle editable calendar events if needed
                console.log('Editable event clicked', info.event);
            }
        },
        editable: true, // Enable drag-and-drop for editable events
        eventDrop: function(info) {
            // Handle event rescheduling if editable
            if (info.event.extendedProps.editable) {
                updateEvent(info.event);
            }
        }
    });
    
    calendar.render();

    function showPpmDetails(event) {
        // Set modal content and show
        document.getElementById('ppmModalBody').innerHTML = event.extendedProps.description;
        document.getElementById('ppmModalLabel').textContent = `PPM File Uploads - ${moment(event.start).format('LL')}`;
        ppmModal.show();
    }

    function showReportDetails(event) {
        // Set modal content and show
        document.getElementById('reportModalBody').innerHTML = event.extendedProps.description;
        document.getElementById('reportModalLabel').textContent = `Schedule Reports - ${moment(event.start).format('LL')}`;
        reportModal.show();
    }

    function updateEvent(event) {
        // AJAX call to update event
        $.ajax({
            url: `/calendar-events/${event.id}`,
            method: 'PUT',
            data: {
                start: event.start.toISOString(),
                end: event.end ? event.end.toISOString() : null,
                _token: '{{ csrf_token() }}'
            },
            success: function() {
                showToast('Event updated successfully');
            },
            error: function(error) {
                console.error('Error updating event:', error);
                showToast('Error updating event', 'danger');
                // Revert the event's changes
                event.revert();
            }
        });
    }

    function showToast(message, type = 'success') {
        const toast = $(`
            <div class="toast align-items-center text-white bg-${type} border-0" role="alert" aria-live="assertive" aria-atomic="true">
                <div class="d-flex">
                    <div class="toast-body">
                        ${message}
                    </div>
                    <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
                </div>
            </div>
        `);
        
        $('#toast-container').append(toast);
        toast.toast({ delay: 3000 }).toast('show');
        
        toast.on('hidden.bs.toast', function() {
            toast.remove();
        });
    }
});
  </script>
@endpush