@extends('Admin.master_page')


@section('title')
    <h5 class="m-0 font-weight-bold text-primary" style="float: left;">Events</h5>

    {{-- <a href="{{ route('abouts.create') }}" style="float: right;"><i class="fas fa-plus-circle"></i></a> --}}
@endsection

@section('content')
    <div class="table-responsive">
        <div id='calendar'></div>

    </div>
@endsection


@push('style')
    <style>
        body {
            margin: 40px 10px;
            padding: 0;
            font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
            font-size: 14px;
        }

        #calendar {
            max-width: 1100px;
            margin: 0 auto;
        }
    </style>
@endpush

@section('script')
    <script src="{{ asset('fullcalendar/moment.js') }}"></script>
    <script src="{{ asset('fullcalendar/dist/index.global.min.js') }}"></script>
    <script>
        const token = "{{ csrf_token() }}"

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

            var calendar = new FullCalendar.Calendar(calendarEl, {
                headerToolbar: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'dayGridMonth,timeGridWeek,timeGridDay'
                },

                navLinks: true, // can click day/week names to navigate views
                selectable: true,
                selectMirror: true,

                select: function(arg) {
                    var title = prompt('Event Title:');
                    if (title) {
                        calendar.addEvent({
                            title: title,
                            start: arg.start,
                            end: arg.end,
                            allDay: arg.allDay
                        })
                        let start = FullCalendar.formatDate(arg.start, {
                            month: '2-digit',
                            year: 'numeric',
                            day: '2-digit',
                        });
                        let end = FullCalendar.formatDate(arg.end, {
                            month: '2-digit',
                            year: 'numeric',
                            day: '2-digit',
                        });
                        const start_date = moment(start).format('YYYY-MM-DD')
                        const end_date = moment(end).format('YYYY-MM-DD')
                        $.ajax({
                            url: "{{ route('events.eventAjax') }}",
                            type: 'POST',
                            data: {
                                _token: token,
                                title: title,
                                start: start_date,
                                end: end_date,
                                allDay: arg.allDay,
                                type: 'add'
                            },
                            success: function(res) {
                                console.log(res);
                            }
                        });
                    }
                    calendar.unselect()
                },
                eventClick: function(arg) {
                    if (confirm('Are you sure you want to delete this event?')) {
                        console.log(arg.event.id);
                        arg.event.remove()

                        $.ajax({
                            url: "{{ route('events.eventAjax') }}",
                            type: 'POST',
                            data: {
                                _token: token,
                                title: arg.event.title,
                                start: arg.event.start_date,
                                end: arg.event.end_date,
                                type: 'delete',
                                id: arg.event.id
                            },
                            success: function(res) {
                                console.log(res);
                            }
                        })
                    }
                },
                editable: true,
                dayMaxEvents: true, // allow "more" link when too many events
                events: @php echo $events @endphp
            });

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