@extends('backend.admin.layouts.master')
@section('content')
    <div class="content d-flex flex-column flex-column-fluid" id="kt_content">
        <div class="pt-6 pb-4">
            <div class="container d-flex justify-content-between flex-stack">
                <div class="d-flex align-items-center me-3">
                    <span class="h-20px border-gray-200 border-start mx-2"></span>
                    <ul class="breadcrumb breadcrumb-separatorless  fs-7 my-1">
                        <li class="breadcrumb-item">
                            <a href="/admin" class="text-dark">Dashboard</a>
                        </li>
                        <li class="breadcrumb-item text-dark">{{ $heading }}</li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="container">
            <div class="card">
                <div class="card-body">
                    <div id="calendar"></div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('before_css')
    <script src="/assets/calendar/index.global.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            var SITEURL = "{{ url('/') }}";
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            var calendarEl = document.getElementById('calendar');

            var calendar = new FullCalendar.Calendar(calendarEl, {
                headerToolbar: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'dayGridMonth,timeGridWeek,timeGridDay'
                },
                initialDate: '{{ date('Y-m-d') }}',
                navLinks: true, // can click day/week names to navigate views
                selectable: true,
                selectMirror: true,
                select: function(arg) {
                    var title = prompt('Event Title:');
                    //                    $.ajax({
                    //                        type: "POST",
                    //                        url: SITEURL + "/admin/calendar/events/ajax",
                    //                        data: {
                    //                            title: title,
                    //                            start: arg.start,
                    //                            end: arg.end,
                    //                            type: 'add'
                    //                        },
                    //                        success: function (data) {
                    //                            calendar.unselect()
                    //                        }
                    //                    });
                    if (title) {

                        calendar.addEvent({
                            title: title,
                            start: arg.start,
                            end: arg.end,
                            allDay: arg.allDay
                        })
                    }
                    calendar.unselect()
                },
                eventClick: function(arg) {
                    var eventDelete = confirm("Are you sure?");
                    if (eventDelete) {
                        $.ajax({
                            type: "POST",
                            url: SITEURL + '/admin/calendar/events/ajax',
                            data: {
                                id: arg.id,
                                type: 'delete'
                            }
                        });
                    }
                },
                editable: true,
                dayMaxEvents: true, // allow "more" link when too many events
                events: SITEURL + "/admin/calendar/events/get_event",
            });

            calendar.render();
        });
    </script>
@endsection
@section('scripts')
@endsection