@props([
    'id' => 'calendar_' . Str::random(8),
    'events' => [], // Array de objetos FullCalendar
    'height' => 'auto',
])

@pushonce('css')
    <link href="https://cdn.jsdelivr.net/npm/fullcalendar@5.11.3/main.min.css" rel="stylesheet">
    <style>
        .fc-toolbar-title { font-size: 1.25rem !important; font-weight: bold; }
        .fc .fc-button-primary { background-color: #007bff; border-color: #007bff; }
        .fc .fc-button-primary:hover { background-color: #0056b3; border-color: #0056b3; }
        .fc-event { cursor: pointer; transition: transform 0.1s; }
        .fc-event:hover { transform: scale(1.02); }
    </style>
@endpushonce

<div class="card shadow-sm border-0">
    <div class="card-body p-0">
        <div id="{{ $id }}"></div>
    </div>
</div>

@pushonce('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/es.js"></script>
@endpushonce

@push('js')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const calendarEl = document.getElementById('{{ $id }}');
    const calendar = new FullCalendar.Calendar(calendarEl, {
        initialView: 'dayGridMonth',
        locale: 'es',
        height: '{{ $height }}',
        headerToolbar: {
            left: 'prev,next today',
            center: 'title',
            right: 'dayGridMonth,timeGridWeek,timeGridDay'
        },
        events: {!! json_encode($events) !!},
        editable: true,
        selectable: true,
        eventClick: function(info) {
            const event = new CustomEvent('calendar-event-click', {
                detail: { event: info.event }
            });
            calendarEl.dispatchEvent(event);
        },
        eventDrop: function(info) {
            const event = new CustomEvent('calendar-event-moved', {
                detail: { event: info.event, oldEvent: info.oldEvent }
            });
            calendarEl.dispatchEvent(event);
        },
        dateClick: function(info) {
             const event = new CustomEvent('calendar-date-click', {
                detail: { date: info.dateStr }
            });
            calendarEl.dispatchEvent(event);
        }
    });
    calendar.render();
});
</script>
@endpush