@extends('layout.app')

@push('styles')
    <link rel="stylesheet" type="text/css" href="{{ asset('modern-admin/app-assets/vendors/css/calendars/fullcalendar.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('modern-admin/app-assets/vendors/css/calendars/daygrid.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('modern-admin/app-assets/vendors/css/calendars/timegrid.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('modern-admin/app-assets/css/plugins/calendars/fullcalendar.min.css') }}">
@endpush

@section('data_col', '2-columns')
@section('body_class', '2-columns menu-collapsed')

@section('content')
<div class="app-content content">
    <div class="content-overlay"></div>
    <div class="content-wrapper">
        <div class="content-body pb-5">
            <section>
                <div class="row">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-content collapse show">
                                <div class="card-body">
                                    <div id='fc-bg-events'></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    </div>
</div>
@endsection

@section('modals')

@endsection

@push('scripts')
    <script src="{{ asset('modern-admin/app-assets/vendors/js/extensions/fullcalendar.min.js') }}"></script>
    <script src="{{ asset('modern-admin/app-assets/vendors/js/extensions/interactions.min.js') }}"></script>
    <script src="{{ asset('modern-admin/app-assets/vendors/js/extensions/daygrid.min.js') }}"></script>
    <script src="{{ asset('modern-admin/app-assets/vendors/js/extensions/timegrid.min.js') }}"></script>
    <script src="{{ asset('modern-admin/app-assets/vendors/js/extensions/gcal.js') }}"></script>
    <script src="{{ asset('modern-admin/app-assets/vendors/js/extensions/locales-all.js') }}"></script>
    <script src="{{ asset('modern-admin/app-assets/vendors/js/extensions/moment.min.js') }}"></script>
    <script src="{{ asset('modern-admin/app-assets/vendors/js/extensions/moment-timezone.min.js') }}"></script>
    <script>
        $(document).ready((function() {
            var t = document.getElementById("fc-bg-events");
            new FullCalendar.Calendar(t, {
                header: {
                    left: "prev,next today",
                    center: "title",
                    right: "dayGridMonth,timeGridWeek,timeGridDay"
                },
                locale: "ar",
                buttonIcons: !1,
                defaultDate: "2016-06-12",
                navLinks: !0,
                businessHours: !0,
                plugins: ["dayGrid", "timeGrid", "interaction"],
                editable: !0,
                events: []
            }).render();
        }));
    </script>
@endpush