@php
    $title = $blade_data['title'];
    $routeLink = $blade_data['routesLink'];
@endphp

@extends('employee.layouts.app')
@section('page-title', $title)
@section('breadcrumb')
    <x-breadcrumb :blades="$blade_data" />
@endsection

@section('content')

    <div class=" ">
        <div class="card rounded-0 mb-2">
            <div class="card-body">
                <div id='loading'><img src="{{ asset('assets/loading.gif') }}" alt="loading..." /></div>
                <div id="ci-calendar" class="has-toolbar calendar"></div>
            </div>
        </div>
    </div>

@endsection


@push('scripts')
    <style>
        .fc-title {
            color: #FFF;
            font-size: 0.9rem;
        }
    </style>
    <script>
        $(document).ready(function() {
            $('#ci-calendar').fullCalendar({
                defaultView: 'month',
                eventRender: function(event, element) {
                    element.find('.fc-title').html(event.title);
                },
                editable: false,
                editable: false,
                eventLimit: true, // allow "more" link when too many events
                events: {
                    url: "{{ route($routeLink . '.getdata') }}",
                    error: function() {
                        $('#script-warning').show();
                    }
                },
                loading: function(bool) {
                    $('#loading').toggle(bool);
                },
                eventClick: function(eventObj) {
                    document.getElementById('app').dispatchEvent(new CustomEvent('open-me', {
                        detail: {
                            dates: eventObj.start._i
                        }
                    }));
                },
            });
        });
    </script>
@endpush