@extends('layouts.app')

@push('pageTitle')
    {{ __('labels.events') }}
@endpush

@push('css')
<link href='https://cdn.jsdelivr.net/npm/fullcalendar@5.11.3/main.min.css' rel='stylesheet' />
<style>
    #calendar {
        margin: 20px 0;
        padding: 20px;
        background: white;
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    .fc-event {
        cursor: pointer;
    }
    .fc-toolbar-title {
        font-size: 1.5em !important;
    }
    .event-status-published { border-left: 4px solid #28a745; }
    .event-status-draft { border-left: 4px solid #ffc107; }
    .event-response-accepted { background-color: #d4edda !important; border-color: #c3e6cb !important; }
    .event-response-rejected { background-color: #f8d7da !important; border-color: #f5c6cb !important; }
    .event-response-maybe { background-color: #fff3cd !important; border-color: #ffeaa7 !important; }

    .event-published { 
        background-color: #28a745 !important;
        border-color: #218838 !important;
    }
    .event-published,
    .event-published .fc-event-title,
    .event-published .fc-event-title span {
        color: #ffffff !important;
    }
    
    .event-draft { 
        background-color: #e9ecef !important;
        border-color: #dee2e6 !important;
    }
    .event-draft,
    .event-draft .fc-event-title,
    .event-draft .fc-event-title span {
        color: #6c757d !important;
    }
    
    /* Make sure all text elements are targeted */
    .fc-event .fc-event-title,
    .fc-event .fc-event-title * {
        color: inherit !important;
    }

</style>
@endpush

@section('content')
<div class="row">
    <div class="col-xl-12">
        <div class="row">
            @include('pages.events.templates.calendar.sort-buttons')
            @include('components.common.flush-message')

            <!-- Calendar Container -->
            <div class="col-12">
                <div id="calendar"></div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('js')
<script src='https://cdn.jsdelivr.net/npm/fullcalendar@5.11.3/main.min.js'></script>
<script src='https://cdn.jsdelivr.net/npm/fullcalendar@5.11.3/locales-all.min.js'></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Fetch events from your Laravel backend
    const events = @json($listresults ?? []);
    
    // Filter events to show only published ones or those with published_at date
    // const filteredEvents = events.filter(event => {
    //     // Check if event is published (based on published_at date)
    //     if (event.published_at) {
    //         const publishedDate = new Date(event.published_at);
    //         const now = new Date();
    //         return publishedDate <= now; // Show if published date is in past/present
    //     }
    //     return false; // Don't show if no published_at date
    // });
    
    // Initialize calendar
    const calendarEl = document.getElementById('calendar');
    const calendar = new FullCalendar.Calendar(calendarEl, {
        initialView: 'dayGridMonth',
        stickyHeaderDate: false,
        locale: '{{ app()->getLocale() }}',
        headerToolbar: {
            left: 'prev,next today',
            center: 'title',
            right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth'
        },
        buttonText: {
            today: '{{ __("labels.today") }}',
            month: '{{ __("labels.month") }}',
            week: '{{ __("labels.week") }}',
            day: '{{ __("labels.day") }}',
            list: '{{ __("labels.list") }}'
        },
        events: events.map(event => {

            const isPublished = event.published_at_iso && new Date(event.published_at_iso) <= new Date();

            // Determine event color based on status or response
            let className = isPublished ? 'event-published' : 'event-draft';

            // Add response class if user has responded
            if (event.user_response) {
                className += ' event-response-' + event.user_response.response;
            }



            
            // Simple: Different background colors only
            const backgroundColor = isPublished ? '#28a745' : '#e9ecef'; // Green vs Gray
            const textColor = isPublished ? '#ffffff' : '#6c757d'; // White vs Gray text
            const borderColor = isPublished ? '#218838' : '#dee2e6'; // Dark green vs Light gray
            
            
            
            return {
                id: event.id,
                title: event.title,
                start: event.started_at_iso,
                end: event.ended_at_iso,
                description: event.description,
                type: event.type,
                event_link: event.event_link,
                className: className,
                backgroundColor: backgroundColor,
                textColor: textColor,
                borderColor: borderColor,
                extendedProps: {
                    isPublished: isPublished,
                    description: event.description,
                    type: event.type,
                    link: `events/${event.id}`,
                    published: event.published_at,
                    responses: {
                        accepted: event.accepted_count,
                        rejected: event.rejected_count,
                        maybe: event.maybe_count,
                        total: event.total_responses
                    },
                    userResponse: event.user_response
                }
            };
        }),
        eventClick: function(info) {
            // Show event details in a modal
            showEventDetails(info.event);
        },
        eventDisplay: 'block',
        eventTimeFormat: {
            hour: '2-digit',
            minute: '2-digit',
            meridiem: false
        },
        height: 'auto',
        navLinks: true,
        editable: false,
        selectable: false,
        businessHours: true,
        nowIndicator: true,
        dayMaxEvents: true,
        views: {
            timeGrid: {
                dayMaxEventRows: 3
            }
        }
    });

    calendar.render();

    // Function to show event details
    function showEventDetails(event) {
        const props = event.extendedProps;
        
        const eventUrl = `/events/${event.id}`; // or use Laravel route
        // If you have named routes, use: const eventUrl = '{{ route("events.show", ":id") }}'.replace(':id', event.id);
    
        const modalHtml = `
            <div class="modal fade" id="eventModal" tabindex="-1">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title">
                                ${event.title}
                                ${!props.isPublished ? '<span class="badge bg-secondary ms-2">{{ __("labels.draft") }}</span>' : ''}
                            </h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                        </div>
                        <div class="modal-body">
                            ${!props.isPublished ? 
                                `<div class="alert alert-warning mb-3">
                                    <i class="fas fa-eye-slash me-2"></i>
                                    This event is not published yet and may not be visible to all users.
                                </div>` : ''
                            }
                            
                            <div class="row">
                                <div class="col-md-8">
                                    <div class="mb-3">
                                        <h6 class="text-muted">${'{{ __("labels.description") }}'}</h6>
                                        <p>${props.description || 'No description provided'}</p>
                                    </div>
                                    
                                    <div class="row mb-3">
                                        <div class="col-md-6">
                                            <h6 class="text-muted">${'{{ __("labels.type") }}'}</h6>
                                            <span class="badge bg-info">${props.type || '{{ __("labels.other") }}'}</span>
                                        </div>
                                        <div class="col-md-6">
                                            <h6 class="text-muted">${'{{ __("labels.status") }}'}</h6>
                                            ${props.isPublished ? 
                                                '<span class="badge bg-success">{{ __("labels.published") }}</span>' : 
                                                '<span class="badge bg-secondary">{{ __("labels.draft") }}</span>'
                                            }
                                        </div>
                                    </div>
                                    
                                    <div class="row mb-3">
                                        <div class="col-md-6">
                                            <h6 class="text-muted">${'{{ __("labels.starts_at") }}'}</h6>
                                            <p><i class="far fa-calendar-alt me-2"></i>${formatDate(event.start)}</p>
                                        </div>
                                        <div class="col-md-6">
                                            <h6 class="text-muted">${'{{ __("labels.ends_at") }}'}</h6>
                                            <p><i class="far fa-calendar-alt me-2"></i>${formatDate(event.end)}</p>
                                        </div>
                                    </div>
                                
                                </div>
                                
                                <div class="col-md-4">
                                    <div class="card">
                                        <div class="card-header">
                                            <h6 class="mb-0">${'{{ __("labels.response_statistics") }}'}</h6>
                                        </div>
                                        <div class="card-body">
                                            <div class="d-grid gap-2">
                                                <div class="d-flex justify-content-between align-items-center">
                                                    <span>${'{{ __("labels.accepted") }}'}</span>
                                                    <span class="badge bg-success">${props.responses.accepted || 0}</span>
                                                </div>
                                                <div class="d-flex justify-content-between align-items-center">
                                                    <span>${'{{ __("labels.rejected") }}'}</span>
                                                    <span class="badge bg-danger">${props.responses.rejected || 0}</span>
                                                </div>
                                                <div class="d-flex justify-content-between align-items-center">
                                                    <span>${'{{ __("labels.maybe") }}'}</span>
                                                    <span class="badge bg-warning">${props.responses.maybe || 0}</span>
                                                </div>
                                                <hr>
                                                <div class="d-flex justify-content-between align-items-center">
                                                    <strong>${'{{ __("labels.total") }}'}</strong>
                                                    <span class="badge bg-secondary">${props.responses.total || 0}</span>
                                                </div>
                                            </div>
                                            
                                            ${props.userResponse ? `
                                            <div class="mt-3 pt-3 border-top">
                                                <h6 class="text-muted">${'{{ __("labels.your_response") }}'}</h6>
                                                <div class="d-flex align-items-center">
                                                    <span class="badge ${getResponseBadgeClass(props.userResponse.response)} me-2">
                                                        ${getResponseText(props.userResponse.response)}
                                                    </span>
                                                    <small class="text-muted">${formatDate(new Date(props.userResponse.responded_at))}</small>
                                                </div>
                                                ${props.userResponse.reason ? `
                                                <div class="mt-2">
                                                    <small class="text-muted">{{ __('labels.reason') }}:</small>
                                                    <p class="mb-0">${props.userResponse.reason}</p>
                                                </div>
                                                ` : ''}
                                            </div>
                                            ` : ''}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <!-- Custom Button: View Details (Goes to event show page) -->
                            <a href="${eventUrl}" trage="_blank" class="btn btn-primary">
                                <i class="fas fa-external-link-alt me-2"></i>${'{{ __("labels.view_full_details") }}'}
                            </a>
                            
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                                ${'{{ __("labels.close") }}'}
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        `;
        
        // Remove existing modal if any
        const existingModal = document.getElementById('eventModal');
        if (existingModal) {
            existingModal.remove();
        }
        
        // Add modal to DOM and show it
        document.body.insertAdjacentHTML('beforeend', modalHtml);
        const modal = new bootstrap.Modal(document.getElementById('eventModal'));
        modal.show();
    }

    function getResponseBadgeClass(response) {
        switch(response) {
            case 'accepted': return 'bg-success';
            case 'rejected': return 'bg-danger';
            case 'maybe': return 'bg-warning';
            default: return 'bg-secondary';
        }
    }

    function getResponseText(response) {
        switch(response) {
            case 'accepted': return '{{ __("Accepted") }}';
            case 'rejected': return '{{ __("Rejected") }}';
            case 'maybe': return '{{ __("Maybe") }}';
            default: return '{{ __("No Response") }}';
        }
    }

    function formatDate(date) {
        if (!date) return 'N/A';
        return date.toLocaleString('{{ app()->getLocale() }}', {
            year: 'numeric',
            month: 'long',
            day: 'numeric',
            hour: '2-digit',
            minute: '2-digit'
        });
    }
});
document.addEventListener('DOMContentLoaded', function() {
    const stickyElements = document.querySelectorAll('.fc-scrollgrid-section-sticky');
    stickyElements.forEach(element => {
        element.classList.remove('fc-scrollgrid-section-sticky');
    });
});
</script>
@endpush