@extends('landing.smp.layout')

@section('title')
    Jadwal PPDB
@endsection

@section('content')
    <div class="card shadow-sm">
        <div class="card-body">
            <div id="kt_calendar"></div>
        </div>
    </div>
@endsection

@push('plugins')
    <link href="{{ asset('assets/plugins/custom/fullcalendar/fullcalendar.bundle.css') }}" rel="stylesheet" type="text/css" />
    <style>
        body {
            --fc-event-bg-color: #00B2FF!important;
            --fc-event-border-color: #00B2FF!important;
        }
        a.fc-more-link {
            color: #00B2FF;
        }
    </style>
@endpush

@push('scripts')
    <script src="{{ asset('assets/plugins/custom/fullcalendar/fullcalendar.bundle.js') }}"></script>
    <script>
        const element = document.getElementById("kt_calendar");

        let todayDate = moment().startOf("day");
        let YM = todayDate.format("YYYY-MM");
        let YESTERDAY = todayDate.clone().subtract(1, "day").format("YYYY-MM-DD");
        let TODAY = todayDate.format("YYYY-MM-DD");
        let TOMORROW = todayDate.clone().add(1, "day").format("YYYY-MM-DD");

        let calendarEl = document.getElementById("kt_calendar");
        let calendar = new FullCalendar.Calendar(calendarEl, {
            headerToolbar: {
                left: "prev,next today",
                center: "title",
                right: "dayGridMonth,timeGridWeek,timeGridDay,listMonth"
            },

            height: 800,
            contentHeight: 780,
            aspectRatio: 3,

            nowIndicator: true,
            now: TODAY + "T09:25:00",

            views: {
                dayGridMonth: { buttonText: "month" },
                timeGridWeek: { buttonText: "week" },
                timeGridDay: { buttonText: "day" }
            },

            initialView: "dayGridMonth",
            initialDate: TODAY,

            editable: true,
            dayMaxEvents: true, // allow "more" link when too many events
            navLinks: true,
            events: JSON.parse(`@json($data)`),

            eventContent: function (info) {
                let element = $(info.el);

                if (info.event.extendedProps && info.event.extendedProps.description) {
                    if (element.hasClass("fc-day-grid-event")) {
                        element.data("content", info.event.extendedProps.description);
                        element.data("placement", "top");
                    } else if (element.hasClass("fc-time-grid-event")) {
                        element.find(".fc-title").append('<div class="">' + info.event.extendedProps.description + "</div>");
                    } else if (element.find(".fc-list-item-title").lenght !== 0) {
                        element.find(".fc-list-item-title").append('<div class="">' + info.event.extendedProps.description + "</div>");
                    }
                }
            }
        });

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