@extends('landing.layout.index')

@section('title')
    Kalender -
@endsection

@push('styles')
    <link href="https://cdn.jsdelivr.net/npm/@fullcalendar/core@4.2.0/main.min.css" rel="stylesheet"/>
    <style>
        .fc-day-header {
            padding-top: 12px!important;
            padding-bottom: 12px!important;
        }
        .fc-title {
            color: #fff;
            font-size: 11pt;
        }
    </style>
@endpush

@section('content')
    <div class="wrapper" style="background:#790000;height:100px"></div>

    <div class="wrapper light-wrapper">
        <div class="container inner">
            <div class="text-center mb-50">
                <h1 class="page-title mb-5">Kalender</h1>
                <p class="lead">Tahapan pelaksanaan ppdb online</p>
            </div>

            <div id="calendar"></div>
        </div>
    </div>
@endsection

@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/@fullcalendar/core@4.2.0/main.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@fullcalendar/daygrid@4.2.0/main.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@fullcalendar/interaction@4.2.0/main.js"></script>
    <script>
        var eventsArray = JSON.parse(`@json($events)`);

        document.addEventListener('DOMContentLoaded', function() {
            var calendarEl = document.getElementById('calendar');

            var calendar = new FullCalendar.Calendar(calendarEl, {
                height: 600,
                plugins: [ 'dayGrid', 'interaction' ],

                dateClick: function(info) {
                    alert('Clicked on: ' + info.dateStr);

                    eventsArray.push({
                        date: info.dateStr,
                        title: "test event added from click"
                    });

                    calendar.refetchEvents();
                },

                eventClick: function(info) {
                    alert(info.event.title)
                },

                events: function(info, successCallback, failureCallback) {
                    successCallback(eventsArray);
                }
            });

            calendar.render();
        });
    </script>
@endpush