@extends('layouts.admin')

@section('content')
<div class="container-fluid">
    <!-- Page Heading -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1 class="h3 mb-0 text-gray-800">Events Calendar</h1>
        <div class="d-flex gap-2">
            <a href="{{ route('events.index') }}" class="btn btn-outline-primary">
                <i class="fas fa-list"></i> List View
            </a>
            <a href="{{ route('events.create') }}" class="btn btn-primary">
                <i class="fas fa-plus"></i> Add New Event
            </a>
        </div>
    </div>

    <!-- Alert Messages -->
    @if(session('success'))
        <div class="alert alert-success alert-dismissible fade show" role="alert">
            {{ session('success') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif

    @if(session('error'))
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            {{ session('error') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif

    <!-- Calendar Legend -->
    <div class="card shadow mb-4">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary">Legend</h6>
        </div>
        <div class="card-body">
            <div class="row">
                <div class="col-md-3">
                    <div class="d-flex align-items-center">
                        <div class="legend-color me-2" style="background-color: #007bff; width: 20px; height: 20px; border-radius: 3px;"></div>
                        <span>Upcoming</span>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="d-flex align-items-center">
                        <div class="legend-color me-2" style="background-color: #28a745; width: 20px; height: 20px; border-radius: 3px;"></div>
                        <span>In Progress</span>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="d-flex align-items-center">
                        <div class="legend-color me-2" style="background-color: #6c757d; width: 20px; height: 20px; border-radius: 3px;"></div>
                        <span>Completed</span>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="d-flex align-items-center">
                        <div class="legend-color me-2" style="background-color: #dc3545; width: 20px; height: 20px; border-radius: 3px;"></div>
                        <span>Cancelled</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Calendar Card -->
    <div class="card shadow mb-4">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary">Events Calendar</h6>
        </div>
        <div class="card-body">
            <div id="calendar"></div>
        </div>
    </div>
</div>

<!-- Event Details Modal -->
<div class="modal fade" id="eventModal" tabindex="-1" aria-labelledby="eventModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="eventModalLabel">Event Details</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-6">
                        <h6><strong>Event ID:</strong></h6>
                        <p id="modalEventId"></p>
                    </div>
                    <div class="col-md-6">
                        <h6><strong>Client:</strong></h6>
                        <p id="modalClient"></p>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <h6><strong>Venue:</strong></h6>
                        <p id="modalVenue"></p>
                    </div>
                    <div class="col-md-6">
                        <h6><strong>Type:</strong></h6>
                        <p id="modalType"></p>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <h6><strong>Status:</strong></h6>
                        <p id="modalStatus"></p>
                    </div>
                    <div class="col-md-6">
                        <h6><strong>Manager:</strong></h6>
                        <p id="modalManager"></p>
                    </div>
                </div>
                <div class="row">
                    <div class="col-12">
                        <h6><strong>Notes:</strong></h6>
                        <p id="modalNotes"></p>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <a href="#" id="modalViewLink" class="btn btn-info">View Details</a>
                <a href="#" id="modalEditLink" class="btn btn-primary">Edit Event</a>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<!-- FullCalendar CSS -->
<link href="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.10/index.global.min.css" rel="stylesheet">

<!-- FullCalendar JS -->
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.10/index.global.min.js"></script>

<script>
document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar');
    
    // Base URLs for events
    var eventsBaseUrl = '{{ url("/events") }}';
    
    var calendar = new FullCalendar.Calendar(calendarEl, {
        initialView: 'dayGridMonth',
        headerToolbar: {
            left: 'prev,next today',
            center: 'title',
            right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth'
        },
        events: {!! json_encode($calendarEvents) !!},
        eventClick: function(info) {
            var event = info.event;
            var props = event.extendedProps;
            
            // Populate modal with event details
            document.getElementById('eventModalLabel').textContent = event.title;
            document.getElementById('modalEventId').textContent = props.event_id || 'N/A';
            document.getElementById('modalClient').textContent = props.client_name || 'N/A';
            document.getElementById('modalVenue').textContent = props.venue || 'N/A';
            document.getElementById('modalType').textContent = props.type || 'N/A';
            document.getElementById('modalManager').textContent = props.assigned_manager || 'N/A';
            document.getElementById('modalNotes').textContent = props.notes || 'No notes available';
            
            // Set status with appropriate styling
            var statusElement = document.getElementById('modalStatus');
            var statusText = props.status || 'N/A';
            var statusClass = '';
            
            switch(statusText) {
                case 'upcoming':
                    statusClass = 'badge bg-info';
                    break;
                case 'in_progress':
                    statusClass = 'badge bg-warning';
                    break;
                case 'completed':
                    statusClass = 'badge bg-success';
                    break;
                case 'cancelled':
                    statusClass = 'badge bg-danger';
                    break;
                default:
                    statusClass = 'badge bg-secondary';
            }
            
            statusElement.innerHTML = '<span class="' + statusClass + '">' + statusText.charAt(0).toUpperCase() + statusText.slice(1).replace('_', ' ') + '</span>';
            
            // Set modal links
            var eventId = event.id;
            document.getElementById('modalViewLink').href = eventsBaseUrl + '/' + eventId;
            document.getElementById('modalEditLink').href = eventsBaseUrl + '/' + eventId + '/edit';
            
            // Show modal
            var modal = new bootstrap.Modal(document.getElementById('eventModal'));
            modal.show();
        },
        height: 'auto',
        expandRows: true,
        dayMaxEvents: true,
        eventDisplay: 'block',
        eventTextColor: '#ffffff',
        eventBorderColor: 'transparent',
        eventMouseEnter: function(info) {
            info.el.style.cursor = 'pointer';
        },
        eventMouseLeave: function(info) {
            info.el.style.cursor = 'default';
        }
    });
    
    calendar.render();
});
</script>
@endsection