@extends('layouts.app')
@section('title', trans('settings.holidays_title'))

@section('content')
    @php $u = auth()->user(); @endphp
    <div class="content">
        <x-content.header title="{{ __('settings.holidays_title') }}" />
        <div id="holidays-calendar" class="w-full overflow-x-scroll no-scrollbar">

        </div>
    </div>
    @include('holiday::create')
    @include('holiday::edit')
@stop
@section('footer-script')
<script type="text/javascript">
    var canCreate = '{{auth()->user()->can("create holidays")}}' ?? false;
    var canEdit = '{{auth()->user()->can("edit holidays")}}' ?? false;
    isEdit = false;
    var modal = '#create-modal ';

    const calendarEl = document.getElementById('holidays-calendar')
    var calendar = new FullCalendar(calendarEl, {
        "headerToolbar": {
            "left": "prev,next today",
            "center": "title",
            "right": "multiMonthYear,dayGridMonth,dayGridWeek,dayGridDay"
        },
        buttonText: {
            today: '{{ trans("menu.today_title") }}',
            month: '{{ trans("title.month") }}',
            week: '{{ trans("title.week") }}',
            day: '{{ trans("forms.lbl_day") }}',
            year: '{{ trans("forms.lbl_year") }}'
        },
        selectable: canCreate, //this already denies access to select.This why select callback is not guarded
        selectOverlap: false,
        selectMinDistance: 1,
        plugins: [dayGridPlugin, interactionPlugin, timeGridPlugin, multiMonthPlugin],
        dateClick: function(info) {
            if (canCreate) {
                isEdit = false;
                createHoliday(false, info.dateStr);
            } else return false;
        },
        select: function(info) {
            createHoliday(true, info.startStr, info.endStr);
        },
        initialView: 'multiMonthYear',
        multiMonthMaxColumns: 2,
        editable: canEdit,
        displayEventTime: false,
        events: {
            url: 'holidays-by-date',
            type: 'get',
            error: function() {
                alert('there was an error while fetching events!');
            },
            overlap: false,
            display: 'block',
        },
        eventClick: function(info) {
            if (canEdit) {
                isEdit = true;
                editHoliday(info.event.extendedProps.is_range, info.event);
            } else return false;
        },
        eventDrop: function(info) {
            if (canEdit) {
                isEdit = true;
                editHoliday(info.oldEvent.extendedProps.is_range, info.event);
            } else return false;
        },
        eventDidMount: function(info) {
            $('body .tooltip').remove();
            var title = '<h6 class="text-white text-left">{{ trans("title.title") }}: ' + info.event.title + '</h6>';
            var desc = info.event.extendedProps.description == null ? '' : '<p class="text-white text-left">{{ trans("description") }}: ' + info.event.extendedProps.description + '</p>';
            $(info.el).tooltip({
                title: title + desc,
                container: 'body',
                html: true,
                template: '<div class="tooltip custom-tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>',
                delay: {
                    "show": 50,
                    "hide": 50
                }
            });
            var eventElement = document.createElement('div');
            eventElement.className = 'custom-event';
            eventElement.innerHTML = info.event.title;
        },
        height: 'auto',
        locale: '{{ app()->getLocale() }}',
    });
    calendar.render();
    $(".btn-save").on("click", function(event) {
        event.preventDefault();
        var eventID = $(modal + 'input[name="holiday_id"]').val();
        if (isEdit) {
            var url = `{{ url("settings/holidays") }}/${eventID} `;
            var type = 'PUT';
        } else {
            var url = '{{ route("settings.holidays.store") }}';
            var type = 'POST';
        }
        if ($(modal + "form").valid()) {
            data = $(modal + 'form').serialize();

            PDRequest({
                type: type,
                url: url,
                data: data,
                event: event
            }).then((response) => {
                calendar.refetchEvents();
                $(modal).modal('hide');
            });
        }
    });
    $("#btn-delete").on("click", function(event) {
        event.preventDefault();
        var eventID = $(modal + 'input[name="holiday_id"]').val();
        var url = `{{ url("settings/holidays") }}/${eventID} `;
        PDSimpleConfirm().then(response => {
            if (response) {
                PDRequest({
                    type: "DELETE",
                    url: url,
                }).then(function(response) {
                    calendar.refetchEvents();
                    $(modal).modal('hide');
                });
            }
        });
    });

    $("body").on("change", 'input[name="is_range"]', function(e) {
        isRangeChanged($(this).is(":checked"));
    });

    function isRangeChanged(value) {
        if (value) {
            $(modal + '.range').removeClass("hidden");
            $(modal + 'input[name="end_date"]').prop("required", true);
            if (!$(modal + 'input[name="end_date"]').val()) { // to suggest closest month...
                $(modal + 'input[name="end_date"]').val($(modal + 'input[name="start_date"]').val());
            }
        } else {
            $(modal + ".range").addClass("hidden");
            $(modal + 'input[name="end_date"]').prop("required", false);
        }
    }
    $("body").on("dp.change", 'input[name="start_date"]', function(e) {
        startDateChanged($(this).val());
    });

    function startDateChanged(startDate) {
        $(modal + 'input[name="end_date"]').data("DateTimePicker").minDate(startDate);
    }

    function createHoliday(isRange, startDate, endDate = null) {
        isEdit = false;
        modal = '#create-modal ';
        startDate = moment(startDate).format("{{getDateFormat()}}");
        endDate = isRange ? moment(endDate).subtract(1, 'days').format("{{getDateFormat()}}") : null;
        showModal(isRange, startDate, endDate);
    }

    function editHoliday(isRange, event) {
        isEdit = true;
        modal = '#edit-modal ';
        startDate = moment(event.startStr.substring(0, 10)).format("{{getDateFormat()}}");
        endDate = isRange ? moment(event.endStr.substring(0, 10)).format("{{getDateFormat()}}") : null;
        $('#edit-modal input[name="holiday_id"]').val(event.id);
        $('#edit-modal input[name="title"]').val(event.title);
        $('#edit-modal textarea[name="description"]').text(event.extendedProps.description);
        showModal(isRange, startDate, endDate);
    }

    function showModal(isRange, startDate, endDate) {
        $(modal + 'input[name="start_date"]').val(startDate);
        $(modal + 'input[name="end_date"]').val(endDate);
        startDateChanged(startDate);

        $(modal + 'input[name="is_range"]').prop('checked', isRange);
        isRangeChanged(isRange);

        $(modal + 'input').removeClass('form-control-danger');
        $(modal).modal('show');

        setTimeout(function() {
            $('body .tooltip').removeClass('show');
        }, 100);
    }
</script>
@stop