@extends('layouts.admin')
@section('css')
    <style>
        .event_label {
            display: flex;
            gap: 15px;
            margin: 15px 0;
        }

        .box {
            float: left;
            height: 15px;
            width: 15px;
            border: 1px solid black;
            clear: both;
            margin-right: 7px;
        }
        </style>
    @endsection
@section('content')
    <div class="page-header text-uppercase">
        <ul class="list-unstyled space-list m-0">
            <li>
                <p>{{ __('calendar.title') }}</p>

            </li>
            <li>
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">{{ __('common.home') }}</a></li>
                        <li class="breadcrumb-item active" aria-current="page">{{ __('calendar.title') }}</li>
                    </ol>
                </nav>
            </li>
        </ul>
    </div>
    <div class="admin-area-col">
        <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                <div class="round-white-bg box-shadow">
                    <div class="event_label">
                        @foreach($eventsLabel as $key => $lb)
                           <div class="labels d-flex align-items-center"> <span class="box" style="background-color:{!! scheduledColor($key) !!};"></span>{!! $lb !!}</div>
                            @endforeach
                    </div>
                    <div id="calendar">
                    </div>
                </div>
            </div>

        </div>
    </div>
@endsection
@section('script')
    <script>
        $(document).ready(function() {
            const start = moment().startOf('month').format('YYYY-MM-DD');
            const end = moment().endOf('month').format("YYYY-MM-DD");
            displayEvents(start,end);
        }); //end document.ready block

        function displayEvents(start,end) {
            var events = new Array();
            $.ajax({
                        url: "{!! route('admin.calendar.get-events') !!}",
                        type: 'GET',
                        dataType: 'json',
                        data: {
                            start: start,
                            end: end
                        },
                        success: function (response) {
                            var result = response;
                            $.each(result, function (i, item) {
                                events.push({
                                    id: result[i].id,
                                    title: result[i].title,
                                    start: result[i].start,
                                    end: result[i].end,
                                    color: result[i].color,
                                });
                            })
                            generateCalendar(events);
                        },
                        error: function(xhr, status) {
                            alert(response);
                        }
                    }
            )
        }
        function generateCalendar(events){
            var calendarEl = document.getElementById('calendar');
            var calendar = new FullCalendar.Calendar(calendarEl, {
                initialView: 'dayGridMonth',
                initialDate: new Date(),
                headerToolbar: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'dayGridMonth,timeGridWeek,timeGridDay'
                },
                events: events,
                viewRender: function(view, element) {
                    var b = $('#calendar').fullCalendar('getDate');
                    alert(b.format('L'));
                }
            });
            calendar.render();
        }
    </script>
@endsection