@section('title', 'Meeting Full Board')
@section('styles')
    @if (count($events))
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar@5/main.min.css">
        <link rel="stylesheet" href="{{ asset('assets/admin/vendor/libs/fullcalendar/fullcalendar.css') }}">
        <link rel="stylesheet" href="{{ asset('assets/admin/vendor/css/pages/app-calendar.css') }}">
        <script src="https://cdn.jsdelivr.net/npm/fullcalendar@5/main.min.js"></script>
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                var calendarEl = document.getElementById('calendar');
                var calendar = new FullCalendar.Calendar(calendarEl, {
                    initialDate: '{{ $latestSchedule }}',
                    initialView: 'dayGridMonth',
                    locale: 'id',
                    events: {!! str_replace('&quot;', '', json_encode($events)) !!},
                });
                calendar.render();
            });
        </script>
        <style>
            table {
                width: 100% !important;
            }

            .fc-daygrid-event.fc-daygrid-dot-event.fc-event.fc-event-start.fc-event-end.fc-event-past {
                color: red !important;
            }

            .fc-daygrid-event.fc-daygrid-dot-event.fc-event.fc-event-start.fc-event-end.fc-event-past:hover {
                background-color: rgba(255, 0, 0, 0.178) !important;
            }

            .fc-daygrid-day-frame.fc-scrollgrid-sync-inner {
                width: 100% !important;
            }

            .fc-daygrid-body.fc-daygrid-body-unbalanced {
                width: 100% !important;
            }

            .fc-scrollgrid-sync-table {
                width: 100% !important;
                height: 600px !important;
            }
        </style>
    @endif
@endsection
<div>
    <div wire:loading wire:target="export">
        @include('layouts.admin.loading-screen')
    </div>
    <div class="row g-3 mb-3">
        <div class="col-8">
            <h3 class="fw-semibold mb-0">Meeting Full Board</h3>
        </div>
    </div>
    <hr class="my-3">
    <div class="card">
        <div class="card-body pb-0">
            @if (count($events))
                <div id="calendar"></div>
            @else
                <div class="text-center mb-3">
                    Tidak Ada Data
                </div>
            @endif
        </div>
    </div>
</div>
@push('scripts')
    @if (count($events))
        <script src="https://cdn.jsdelivr.net/npm/fullcalendar@5/locales-all.min.js"></script>
    @endif
@endpush