@extends('layouts.app')

@section('content')

@component('shared.breadcrumbs')
    @slot('breadcrumbs')
        <ul>
            <li><a href="{{ route('home') }}">{{ __('Dashboard') }}</a></li>
            <li>&middot;</li>
            <li><a href="{{ route('admin.vacation') }}">{{ __('Vacation') }}</a></li>
        </ul>
    @endslot
@endcomponent

<main class="main-content" id="main-content">
    <div class="container">
        <div class="row">
            <div class="col">
                <div class="card">
                    <div class="card-body calendar-wrapper">
                        <div id="calendar"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="calendar-trash" class="calendar-trash d-none">
        <i class="fas fa-trash-alt"></i>
        <p><small>{{ __('Drag here to delete') }}</small></p>
    </div>
</main>

@endsection

@section('footer')
<script>
document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar');
    var calendar = new Calendar(calendarEl, {
        scrollTime: '{{ now()->format('H:00') }}',
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay,listWeek'
        },
        eventOverlap: false,
        eventTimeFormat: {
            hour: '2-digit',
            minute: '2-digit',
            hour12: false
        },
        firstDay: 1,
        editable: true,
        selectable: true,
        selectOverlap: false,
        selectMirror: true,
        selectMinDistance: 10,
        slotDuration: '00:15:00',
        slotLabelInterval: '01:00:00',
        slotLabelFormat: {
            hour: 'numeric',
            minute: '2-digit',
            omitZeroMinute: false,
            //meridiem: 'short',
            hour12: false
        },
        select: function(selection){
            //console.log('select', selection);

            let name = prompt('{{ __('Enter a name (optional)') }}');
            selection.title = name || '{{ __('Ferie') }}';
            selection.classNames = 'fc-event-secondary';

            axios.put('{{ route('admin.vacation.update') }}', {
                name: name,
                start: DateTime.fromJSDate(selection.start).toFormat('yyyy-MM-dd HH:mm:ss'),
                end: DateTime.fromJSDate(selection.end).toFormat('yyyy-MM-dd HH:mm:ss')
            }).then(({ data }) => {
                selection.id = data.data.id;
                calendar.addEvent(selection);
                toastr.success('{{ __('Vacation created') }}');
            }).catch(() => {
                toastr.error('{{ __('An error occurred') }}');
            }).finally(() => {
                calendar.unselect();
            });
        },
        eventDrop: function(dropInfo) {
            //console.log('eventDrop', dropInfo);

            axios.put('{{ route('admin.vacation.update') }}', {
                id: dropInfo.event.id,
                start: DateTime.fromJSDate(dropInfo.event.start).toFormat('yyyy-MM-dd HH:mm:ss'),
                end: DateTime.fromJSDate(dropInfo.event.end).toFormat('yyyy-MM-dd HH:mm:ss')
            }).then(() => {
                toastr.success('{{ __('Vacation updated') }}');
            }).catch(() => {
                toastr.error('{{ __('An error occurred') }}');
            });
        },
        eventResize: function(resizeInfo) {
            //console.log('eventResize', resizeInfo);

            axios.put('{{ route('admin.vacation.update') }}', {
                id: resizeInfo.event.id,
                start: DateTime.fromJSDate(resizeInfo.event.start).toFormat('yyyy-MM-dd HH:mm:ss'),
                end: DateTime.fromJSDate(resizeInfo.event.end).toFormat('yyyy-MM-dd HH:mm:ss')
            }).then(() => {
                toastr.success('{{ __('Vacation updated') }}');
            }).catch(() => {
                toastr.error('{{ __('An error occurred') }}');
            });
        },
        eventDragStart: function(dragInfo) {
            var trashEl = $('#calendar-trash');
            trashEl.removeClass('d-none');
        },
        eventDragStop: function(dragInfo) {
            var trashEl = $('#calendar-trash');
            var ofs = trashEl.offset();

            var x1 = ofs.left;
            var x2 = ofs.left + trashEl.outerWidth(true);
            var y1 = ofs.top;
            var y2 = ofs.top + trashEl.outerHeight(true);

            if (dragInfo.jsEvent.pageX >= x1 && dragInfo.jsEvent.pageX<= x2 &&
                dragInfo.jsEvent.pageY >= y1 && dragInfo.jsEvent.pageY <= y2) {
                axios.put('{{ route('admin.vacation.update') }}', {
                    id: dragInfo.event.id,
                    start: null,
                    end: null
                }).then(() => {
                    toastr.success('{{ __('Vacation removed') }}');
                }).catch(() => {
                    toastr.error('{{ __('An error occurred') }}');
                });

                dragInfo.event.remove();
            }

            trashEl.addClass('d-none');
        },
        eventSourceSuccess: function(content, xhr) {
            return content.data;
        },
        eventSources: [
            {
                id: 'vacation',
                url: '{{ route('admin.vacation.events') }}',
            },
        ],
    });

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