"use strict";
(function ($) {
    $.view_list_calendar = function (element, options) {
        let defaults = {
            list_rate: []
        };
        let plugin = this;
        plugin.settings = {};
        let $element = $(element);
        plugin.up_event = function (id, start, end) {
            let data = {
                id: id,
                from: start,
                to: end,
                task: "orderdetailrate.save_change_time_order"
            };
            $.ajax({
                type: "POST",
                dataType: "json",
                url: wpbookingevent_root_url + wpbookingevent_api_task,
                data: data,
                beforeSend: function () {
                    $('body').loadingModal();
                },
                error: function (xhr) {
                    $.alert({
                        title: 'Error',
                        content: 'there are some error please contact admin !',
                    });
                },
                complete: function () {
                    $('body').loadingModal('destroy');
                },
                success: function (response) {
                    response = JSON.parse(response);
                    if (response.result === "success") {
                        $.alert({
                            title: 'Success',
                            content: 'update day success !',
                        });
                    } else {
                        $.alert({
                            title: 'Error',
                            content: response.msg
                        });
                    }
                }
            });
        };
        plugin.get_full_time = function (date) {
            let current_datetime = new Date(date);
            let formatted_date = current_datetime.getFullYear() + "-" + (current_datetime.getMonth() + 1) + "-" + current_datetime.getDate() + " " + current_datetime.getHours() + ":" + current_datetime.getMinutes() + ":" + current_datetime.getSeconds();
            return formatted_date;
        };
        plugin.create_Appointment = function (info) {
            let start = plugin.get_full_time(info.startStr);
            let end = plugin.get_full_time(info.endStr);
            let data = {
                from: start,
                to: end,
                task: "appointment.ajax_get_item"
            };
            $.ajax({
                type: "POST",
                dataType: "json",
                url: wpbookingevent_root_url + wpbookingevent_api_task,
                data: data,
                beforeSend: function () {
                    $('body').loadingModal();
                },
                error: function (xhr) {
                    $.alert({
                        title: 'Error',
                        content: 'there are some error please contact admin !',
                    });
                },
                complete: function () {
                    $('body').loadingModal('destroy');
                },
                success: function (response) {
                    response = JSON.parse(response);
                    if (response.result === "success") {
                    } else {
                        $.alert({
                            title: 'Error',
                            content: response.msg
                        });
                    }
                }
            });
        };
        plugin.filter_order_by_employee = function (employee_id) {
            let data = {
                id: employee_id,
                task: "calendar.get_order_by_employee_id"
            };
            $.ajax({
                type: "POST",
                dataType: "json",
                url: wpbookingevent_root_url + wpbookingevent_api_task,
                data: data,
                beforeSend: function () {
                    $('body').loadingModal();
                },
                error: function (xhr) {
                    $.alert({
                        title: 'Error',
                        content: 'there are some error please contact admin !',
                    });
                },
                complete: function () {
                    $('body').loadingModal('destroy');
                },
                success: function (response) {
                    response = JSON.parse(response);
                    if (response.result === "success") {
                        let list_rate = response.data;
                        let event_render = [];
                        $.each(list_rate,function (index, item) {
                            event_render.push({
                                id: item.id,
                                title: item.title,
                                start: item.start,
                                end: item.end,
                                description: item.description
                            })
                        });
                        var calendarEl = document.getElementById('calendar');
                        var calendar = new FullCalendar.Calendar(calendarEl, {
                            plugins: ['interaction', 'dayGrid', 'timeGrid', 'bootstrapPlugin', 'interactionPlugin', 'momentPlugin'],
                            selectable: true,
                            header: {
                                left: 'prev,next today',
                                center: 'title',
                                right: 'dayGridMonth,timeGridWeek,timeGridDay'
                            },
                            select: function (info) {
                                //plugin.create_Appointment(info);
                            },
                            droppable: true,
                            themeSystem: 'bootstrap',
                            events:list_rate,
                            color: 'yellow',
                            textColor: 'black',
                            editable: true,
                            eventLimit: true, // for all non-TimeGrid views
                            views: {
                                dayGrid: {
                                    eventLimit: 2 // adjust to 6 only for timeGridWeek/timeGridDay
                                }
                            },
                            eventDrop: function (info, delta, revertFunc) {
                                let id = info.event.id;
                                let start = plugin.get_full_time(info.event.start);
                                let end = plugin.get_full_time(info.event.end);
                                plugin.up_event(id, start, end);
                            },
                            eventResize: function (info) {
                                let id = info.event.id;
                                let start = plugin.get_full_time(info.event.start);
                                let end = plugin.get_full_time(info.event.end);
                                plugin.up_event(id, start, end);
                            },
                            eventClick:  function(event, jsEvent, view) {
                                $element.find('#calendarModal').modal();
                            },
                            eventRender: function (info) {
                                $(info.el).find('.fc-title').append('<p><i class="icon-nb-calendar"></i></p>')
                                $(info.el).find(".fc-content").append(`
                                    <p class="time-booking">${info.event._def.extendedProps.list_time_detail}</p>
                                    <div class="employee">
                                            <div class="img-box">
                                                <div>
                                                    <img src="${wpbookingevent_root_url_plugin}${info.event._def.extendedProps.employee_cover}" alt="">
                                                </div>
                                            </div>
                                            <span>${info.event._def.extendedProps.employee_fullname}</span>
                                    </div>
                                `
                                );
                                $(info.el).popover({
                                    html: true,
                                    content: function () {
                                        let $html = `
                                            <p class="time-booking"><i class="icon-nb-clock"></i> <span>${info.event._def.extendedProps.list_time_detail}</span></p>
                                            <p class="location-booking"><i class="icon-nb-pin"></i> <span>${info.event._def.extendedProps.location_address}</span></p>
                                            <p class="customer-booking"><i class="icon-nb-email"></i> <span>${info.event._def.extendedProps.customer_email}</span> </p>
                                            <div class="employee-booking">
                                                <div class="img-box">
                                                    <div>
                                                        <img src="${wpbookingevent_root_url_plugin}${info.event._def.extendedProps.employee_cover}" alt="">
                                                    </div>
                                                </div>
                                                <span>${info.event._def.extendedProps.employee_fullname}</span>
                                            </div>
                                           
                                        `;
                                        return $html;
                                    },
                                    title: function () {
                                        let $title = `
                                            <span>${info.event.title}</span>
                                        `;
                                        return $title;
                                    },
                                    delay: {"show": 500, "hide": 100},
                                    placement: "top",
                                    trigger: 'manual'
                                }).on('mouseenter', function () {
                                    var _this = this;
                                    $(this).popover('show');
                                    $('.popover').on('mouseleave', function () {
                                        $(_this).popover('hide');
                                    });
                                }).on('mouseleave', function () {
                                    var _this = this;
                                    setTimeout(function () {
                                        if (!$('.popover:hover').length) {
                                            $(_this).popover('hide');
                                        }
                                    }, 300);
                                });
                            },
                        });
                        calendar.render();
                    } else {
                        $.alert({
                            title: 'Error',
                            content: response.msg
                        });
                    }
                }
            });
        };
        plugin.filter_order_by_customer = function (customer_id) {
            let data = {
                id: customer_id,
                task: "calendar.get_order_by_customer_id"
            };
            $.ajax({
                type: "POST",
                dataType: "json",
                url: wpbookingevent_root_url + wpbookingevent_api_task,
                data: data,
                beforeSend: function () {
                    $('body').loadingModal();
                },
                error: function (xhr) {
                    $.alert({
                        title: 'Error',
                        content: 'there are some error please contact admin !',
                    });
                },
                complete: function () {
                    $('body').loadingModal('destroy');
                },
                success: function (response) {
                    response = JSON.parse(response);
                    if (response.result === "success") {
                        let list_rate = response.data;
                        let event_render = [];
                        $.each(list_rate,function (index, item) {
                            event_render.push({
                                id: item.id,
                                title: item.title,
                                start: item.start,
                                end: item.end,
                                description: item.description
                            })
                        });
                        var calendarEl = document.getElementById('calendar');
                        var calendar = new FullCalendar.Calendar(calendarEl, {
                            plugins: ['interaction', 'dayGrid', 'timeGrid', 'bootstrapPlugin', 'interactionPlugin', 'momentPlugin'],
                            selectable: true,
                            header: {
                                left: 'prev,next today',
                                center: 'title',
                                right: 'dayGridMonth,timeGridWeek,timeGridDay'
                            },
                            select: function (info) {
                                //plugin.create_Appointment(info);
                            },
                            droppable: true,
                            themeSystem: 'bootstrap',
                            events:list_rate,
                            color: 'yellow',
                            textColor: 'black',
                            editable: true,
                            eventLimit: true, // for all non-TimeGrid views
                            views: {
                                dayGrid: {
                                    eventLimit: 2 // adjust to 6 only for timeGridWeek/timeGridDay
                                }
                            },
                            eventDrop: function (info, delta, revertFunc) {
                                let id = info.event.id;
                                let start = plugin.get_full_time(info.event.start);
                                let end = plugin.get_full_time(info.event.end);
                                plugin.up_event(id, start, end);
                            },
                            eventResize: function (info) {
                                let id = info.event.id;
                                let start = plugin.get_full_time(info.event.start);
                                let end = plugin.get_full_time(info.event.end);
                                plugin.up_event(id, start, end);
                            },
                            eventClick:  function(event, jsEvent, view) {
                                $element.find('#calendarModal').modal();
                            },
                            eventRender: function (info) {
                                $(info.el).find('.fc-title').append('<i class="icon-nb-calendar"></i>')
                                $(info.el).find(".fc-content").append(`
                                    <p class="time-booking">${info.event._def.extendedProps.list_time_detail}</p>
                                    <div class="employee">
                                            <div class="img-box">
                                                <div>
                                                    <img src="${wpbookingevent_root_url_plugin}${info.event._def.extendedProps.employee_cover}" alt="">
                                                </div>
                                            </div>
                                            <span>${info.event._def.extendedProps.employee_fullname}</span>
                                    </div>
                                `
                                );
                                $(info.el).popover({
                                    html: true,
                                    content: function () {
                                        let $html = `
                                            <p class="time-booking"><i class="icon-nb-clock"></i> <span>${info.event._def.extendedProps.list_time_detail}</span></p>
                                            <p class="location-booking"><i class="icon-nb-pin"></i> <span>${info.event._def.extendedProps.location_address}</span></p>
                                            <p class="customer-booking"><i class="icon-nb-email"></i> <span>${info.event._def.extendedProps.customer_email}</span> </p>
                                            <div class="employee-booking">
                                                <div class="img-box">
                                                    <div>
                                                        <img src="${wpbookingevent_root_url_plugin}${info.event._def.extendedProps.employee_cover}" alt="">
                                                    </div>
                                                </div>
                                                <span>${info.event._def.extendedProps.employee_fullname}</span>
                                            </div>
                                           
                                        `;
                                        return $html;
                                    },
                                    title: function () {
                                        let $title = `
                                            <span>${info.event.title}</span>
                                        `;
                                        return $title;
                                    },
                                    delay: {"show": 500, "hide": 100},
                                    placement: "top",
                                    trigger: 'manual'
                                }).on('mouseenter', function () {
                                    var _this = this;
                                    $(this).popover('show');
                                    $('.popover').on('mouseleave', function () {
                                        $(_this).popover('hide');
                                    });
                                }).on('mouseleave', function () {
                                    var _this = this;
                                    setTimeout(function () {
                                        if (!$('.popover:hover').length) {
                                            $(_this).popover('hide');
                                        }
                                    }, 300);
                                });
                            },
                        });
                        calendar.render();
                    } else {
                        $.alert({
                            title: 'Error',
                            content: response.msg
                        });
                    }
                }
            });
        };
        plugin.loadInitElement = function () {
            let $start_date_end_date=$element.find('#calendarModal .start-date-end-date');
            $start_date_end_date.find('#start-date').datepicker({
                dateFormat: "yy-mm-dd"
            });
            $start_date_end_date.find('#end-date').datepicker({
                dateFormat: "yy-mm-dd"
            });
            $start_date_end_date.find('#start-time').timepicker({
                timeFormat:"%g:%i %A"
            });
            $start_date_end_date.find('#end-time').timepicker({
                timeFormat:"%g:%i %A"
            });
            let $start_date_end_date_recurring=$element.find('#calendarModal .start-date-end-date-recurring');
            $start_date_end_date_recurring.find('#start-date-recurring').datepicker({
                dateFormat: "yy-mm-dd"
            });
            $start_date_end_date_recurring.find('#end-date-recurring').datepicker({
                dateFormat: "yy-mm-dd"
            });
            $start_date_end_date_recurring.find('#start-time-recurring').timepicker({
                timeFormat:"%g:%i %A"
            });
            $start_date_end_date_recurring.find('#end-time-recurring').timepicker({
                timeFormat:"%g:%i %A"
            });

        };
        plugin.init = function () {
            plugin.settings = $.extend({}, defaults, options);
            var calendarEl = document.getElementById('calendar');
            let list_rate = plugin.settings.list_rate;
            let event_render = [];
            $.each(list_rate,function (index, item) {
                event_render.push({
                    id: item.id,
                    title: item.title,
                    start: item.start,
                    end: item.end,
                    description: item.description,
                })
            });
            plugin.loadInitElement();
            console.log('event_render',event_render);
            var calendar = new FullCalendar.Calendar(calendarEl, {
                plugins: ['interaction', 'dayGrid', 'timeGrid', 'bootstrapPlugin', 'interactionPlugin', 'momentPlugin'],
                selectable: true,
                header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'dayGridMonth,timeGridWeek,timeGridDay'
                },
                select: function (info) {
                    //plugin.create_Appointment(info);
                },
                droppable: true,
                themeSystem: 'bootstrap',
                events:list_rate,
                color: 'yellow',
                textColor: 'black',
                editable: true,
                eventLimit: true, // for all non-TimeGrid views
                views: {
                    dayGrid: {
                        eventLimit: 2 // adjust to 6 only for timeGridWeek/timeGridDay
                    }
                },
                eventDrop: function (info, delta, revertFunc) {
                    let id = info.event.id;
                    let start = plugin.get_full_time(info.event.start);
                    let end = plugin.get_full_time(info.event.end);
                    plugin.up_event(id, start, end);
                },
                eventResize: function (info) {
                    let id = info.event.id;
                    let start = plugin.get_full_time(info.event.start);
                    let end = plugin.get_full_time(info.event.end);
                    plugin.up_event(id, start, end);
                },
                eventClick:  function(calEvent,jsEvent, view) {
                    $element.find('#calendarModal').modal('toggle');
                    let event_id=calEvent.event.id;
                    let event_name=calEvent.event.title;
                    let event_start=calEvent.event.start;
                    let event_end=calEvent.event.end;
                    console.log("calEvent",calEvent);
                    let $start_date_end_date=$element.find('#calendarModal .start-date-end-date');
                    let $calendarModal=$element.find('#calendarModal');
                    let $start=moment(calEvent.event.start);
                    $start_date_end_date.find('#start-date').val($start.format('YYYY-MM-DD'));
                    $start_date_end_date.find('#start-time').val($start.format('hh:mm'));
                    let $end=moment(calEvent.event.end);
                    $start_date_end_date.find('#end-date').val($end.format('YYYY-MM-DD'));
                    $start_date_end_date.find('#end-time').val($end.format('hh:mm'));
                    $calendarModal.find('input[name="event_id"]').val(event_id);
                    $calendarModal.find('input[name="event_name"]').val(event_name);

                },
                eventRender: function (info) {
                    // console.log("info",info);
                    $(info.el).find('.fc-title').append('<i class="icon-nb-calendar"></i>')
                    $(info.el).find(".fc-content").append(`
                        <p class="time-booking">${info.event._def.extendedProps.list_time_detail}</p>
                        <div class="employee">
                                <div class="img-box">
                                    <div>
                                        <img src="${wpbookingevent_root_url_plugin}${info.event._def.extendedProps.employee_cover}" alt="">
                                    </div>
                                </div>
                                <span>${info.event._def.extendedProps.employee_fullname}</span>
                        </div>
                    `
                    );
                    $(info.el).tooltip();
                    $(info.el).popover({
                        html: true,
                        content: function () {
                            let $html = `
                                <p class="time-booking"><i class="icon-nb-clock"></i> <span>${info.event._def.extendedProps.list_time_detail}</span></p>
                                <p class="location-booking"><i class="icon-nb-pin"></i> <span>${info.event._def.extendedProps.location_address}</span></p>
                                <p class="customer-booking"><i class="icon-nb-email"></i> <span>${info.event._def.extendedProps.customer_email}</span> </p>
                                <div class="employee-booking">
                                    <div class="img-box">
                                        <div>
                                            <img src="${wpbookingevent_root_url_plugin}${info.event._def.extendedProps.employee_cover}" alt="">
                                        </div>
                                    </div>
                                    <span>${info.event._def.extendedProps.employee_fullname}</span>
                                </div>
                               
                            `;
                            return $html;
                        },
                        title: function () {
                            let $title = `
                                <span>${info.event.title}</span>
                            `;
                            return $title;
                        },
                        delay: {"show": 500, "hide": 500},
                        placement: "top",
                        trigger: 'manual'
                    }).on('mouseenter', function () {
                        var _this = this;
                        $(this).popover('show');
                        $('.popover').on('mouseleave', function () {
                            $(_this).popover('hide');
                        });
                    }).on('mouseleave', function () {
                        var _this = this;
                        setTimeout(function () {
                            if (!$('.popover:hover').length) {
                                $(_this).popover('hide');
                            }
                        }, 300);
                    });
                },
            });
            calendar.render();
            plugin.settings.current_calendar=calendar;
            $element.find('li.employee-item').on('click', function () {
                $element.find('li.employee-item').removeClass('active');
                $element.find('li.customer-item').removeClass('active');
                $(this).addClass('active');
                let employee_id = $(this).data('employee_id');
                $element.find('#calendar').empty();
                plugin.filter_order_by_employee(employee_id);

            });
            $element.find('li.customer-item').on('click', function () {
                $element.find('li.customer-item').removeClass('active');
                $element.find('li.employee-item').removeClass('active');
                $(this).addClass('active');
                let customer_id = $(this).data('customer_id');
                $element.find('#calendar').empty();
                plugin.filter_order_by_customer(customer_id);

            });

            document.getElementById("Inputemployee").onkeyup = function() {myFunctionemployee()};
            function myFunctionemployee() {
                var input, filter, ul, li, a, i, txtValue;
                input = document.getElementById("Inputemployee");
                filter = input.value.toUpperCase();
                ul = document.getElementById("employees");
                li = ul.getElementsByTagName("li");
                for (i = 0; i < li.length; i++) {
                    a = li[i].getElementsByTagName("p")[0];
                    txtValue = a.textContent || a.innerText;
                    if (txtValue.toUpperCase().indexOf(filter) > -1) {
                        li[i].style.display = "";
                    } else {
                        li[i].style.display = "none";
                    }
                }
            };
            document.getElementById("Inputcustomer").onkeyup = function() {myFunctioncustomer()};
            function myFunctioncustomer() {
                var input, filter, ul, li, a, i, txtValue;
                input = document.getElementById("Inputcustomer");
                filter = input.value.toUpperCase();
                ul = document.getElementById("customers");
                li = ul.getElementsByTagName("li");
                for (i = 0; i < li.length; i++) {
                    a = li[i].getElementsByTagName("p")[0];
                    txtValue = a.textContent || a.innerText;
                    if (txtValue.toUpperCase().indexOf(filter) > -1) {
                        li[i].style.display = "";
                    } else {
                        li[i].style.display = "none";
                    }
                }
            };
            $element.find('input.month-of-year,input.repeat,input.day-of-month,input.day-of-week').iCheck({
                checkboxClass: 'icheckbox_minimal',
                radioClass: 'iradio_minimal',
                increaseArea: '20%'
            });

            $element.find('.select-day-of-week').slideUp();
            $element.find('.select-day-of-month').slideUp();
            $element.find('.select-month-of-year').slideUp();

            let $not =$element.find('.not');
            $not.find('input').on('ifChecked', function () {
                $element.find('.start-date-end-date-recurring').slideUp();
            });
             $not.find('input').on('ifUnchecked', function () {
                $element.find('.start-date-end-date-recurring').slideDown();
            });

            let $daily = $element.find('.daily');

            let $weekly=$element.find('.weekly');
            $weekly.find('input').on('ifChecked', function () {
                $element.find('.select-day-of-week').slideDown();
            });
            $weekly.find('input').on('ifUnchecked', function () {
                $element.find('.select-day-of-week').slideUp();
            });

            let $monthly=$element.find('.monthly');
            $monthly.find('input').on('ifChecked', function () {
                $element.find('.select-day-of-month').slideDown();
            });
            $monthly.find('input').on('ifUnchecked', function () {
                $element.find('.select-day-of-month').slideUp();
            });

            $element.find("#changeform").on("submit", function(e) {
                var postData = $(this).serializeArray();
                var formURL = $(this).attr("action");
                $.ajax({
                    url: formURL,
                    type: "POST",
                    data: postData,
                    success: function(data, textStatus, jqXHR) {
                        $('#contact_dialog .modal-header .modal-title').html("Result");
                        $('#contact_dialog .modal-body').html(data);
                    },
                    error: function(jqXHR, status, error) {
                        console.log(status + ": " + error);
                    }
                });
                e.preventDefault();
            });


            $not.find('input').on('ifChecked', function () {
                $element.find('#btnSaveIt').on('click', function (e) {
                    let $modal=$element.find('#calendarModal');
                    let $footer =$(this).closest('.modal-footer');
                    let $body=$footer.prev('#modalBody');
                    let $form=$body.find('form[name="client-form"]');
                    let event_id=$modal.find('input[name="event_id"]').val();
                    let event_name=$modal.find('input[name="event_name"]').val();
                    let start_time=$modal.find('input[name="start_time"]').val();
                    let end_time=$modal.find('#end-time').val();
                    let start_date=$modal.find('#start-date').val();
                    let end_date=$modal.find('#end-date').val();
                    console.log("start_time",start_time);
                    console.log("end_time",end_time);
                    let current_calendar=plugin.settings.current_calendar;
                    current_calendar.addEvent({
                        id:event_id,
                        title:event_name,
                        allDay: false,
                        start: start_date,
                        end: end_date,
                    });
                    $form.submit();
                });

            });
            $daily.find('input').on('ifChecked', function () {
                $element.find('#changeform').validate({
                    rules: {
                        start_date_recurring: "required",
                        end_date_recurring: "required",
                        start_time_recurring: "required",
                        end_time_recurring: "required",
                    },
                    message:{

                    }
                });
                $element.find('#btnSaveIt').on('click', function (e) {
                    let $modal=$element.find('#calendarModal');
                    let $footer =$(this).closest('.modal-footer');
                    let $body=$footer.prev('#modalBody');
                    let $form=$body.find('form[name="client-form"]');
                    let event_id=$modal.find('input[name="event_id"]').val();
                    let event_name=$modal.find('input[name="event_name"]').val();
                    let start_date_recurring = $modal.find('input[name="start_date_recurring"]').val();
                    let end_date_recurring= $modal.find('input[name="end_date_recurring"]').val();
                    let start_time_recurring =$modal.find('input[name="start_time_recurring"]').val();
                    let end_time_recurring =$modal.find('input[name="end_time_recurring"]').val();
                    let current_calendar=plugin.settings.current_calendar;
                    current_calendar.addEvent({
                        id:event_id,
                        title:event_name,
                        allDay: false,
                        startTime:start_time_recurring,
                        endTime:end_time_recurring,
                        startRecur: start_date_recurring,
                        endRecur:end_date_recurring,
                    });
                    $form.submit();
                });

            });
            $weekly.find('input').on('ifChecked', function () {
                $element.find('#changeform').validate({
                    rules: {
                        start_date_recurring: "required",
                        end_date_recurring: "required",
                        start_time_recurring: "required",
                        end_time_recurring: "required",
                        day_of_week: "required",
                    },
                });
                $element.find('#btnSaveIt').on('click', function (e) {
                    let $modal=$element.find('#calendarModal');
                    let $footer =$(this).closest('.modal-footer');
                    let $body=$footer.prev('#modalBody');
                    let $form=$body.find('form[name="client-form"]');
                    let event_id=$modal.find('input[name="event_id"]').val();
                    let event_name=$modal.find('input[name="event_name"]').val();
                    let start_date_recurring = $modal.find('input[name="start_date_recurring"]').val();
                    let end_date_recurring= $modal.find('input[name="end_date_recurring"]').val();
                    let start_time_recurring =$modal.find('input[name="start_time_recurring"]').val();
                    let end_time_recurring =$modal.find('input[name="end_time_recurring"]').val();
                    let day_of_week=[];
                    $modal.find('input[name="day_of_week[]"]:checked').each(function() {
                        day_of_week.push(this.value);
                    });

                    console.log("day_of_week",day_of_week);
                    let current_calendar=plugin.settings.current_calendar;
                    current_calendar.addEvent({
                        id:event_id,
                        title:event_name,
                        allDay: false,
                        daysOfWeek: day_of_week ,
                        startTime:start_time_recurring,
                        endTime:end_time_recurring,
                        startRecur: start_date_recurring,
                        endRecur:end_date_recurring,
                    });
                    $form.submit();
                });

            });
            $monthly.find('input').on('ifChecked', function () {
                $element.find('#changeform').validate({
                    rules: {
                        start_date_recurring: "required",
                        end_date_recurring: "required",
                        start_time_recurring: "required",
                        end_time_recurring: "required",
                        day_of_month: "required",
                    },
                });
                $element.find('#btnSaveIt').on('click', function (e) {
                    let $modal=$element.find('#calendarModal');
                    let $footer =$(this).closest('.modal-footer');
                    let $body=$footer.prev('#modalBody');
                    let $form=$body.find('form[name="client-form"]');
                    let event_id=$modal.find('input[name="event_id"]').val();
                    let event_name=$modal.find('input[name="event_name"]').val();
                    let start_date_recurring = $modal.find('input[name="start_date_recurring"]').val();
                    let end_date_recurring= $modal.find('input[name="end_date_recurring"]').val();
                    let start_time_recurring =$modal.find('input[name="start_time_recurring"]').val();
                    let end_time_recurring =$modal.find('input[name="end_time_recurring"]').val();
                    let w_day =moment(start_date_recurring).day();
                    let list_working_day= $modal.find('.name-day-of-month');
                    let checked=list_working_day.find('.checked');
                    let day_of_month =  checked.find('input').val();
                    console.log("day_of_month",day_of_month);
                    let current_calendar=plugin.settings.current_calendar;
                    current_calendar.addEvent({
                        id:event_id,
                        title:event_name,
                        allDay: false,
                        daysOfWeek: [ w_day ],
                        startTime:start_time_recurring,
                        endTime:end_time_recurring,
                        startRecur: start_date_recurring,
                        endRecur:end_date_recurring,
                    });
                    $form.submit();
                });

            });

            $element.find("#btnRemoveIt").on('click', function (e) {
                let $modal=$element.find('#calendarModal');
                let event_id=$modal.find('input[name="event_id"]').val();
                let current_calendar=plugin.settings.current_calendar;
                let current_event = current_calendar.getEventById(event_id).remove()
            })
        };
        plugin.arr_diff = function (a1, a2) {
            let a = [], diff = [];
            if(a1.length > 0 && a2.length > 0) {
                for (let i = 0; i < a1.length; i++) {
                    a[a1[i]] = true;
                }
                for (let i = 0; i < a2.length; i++) {
                    if (a[a2[i]]) {
                        delete a[a2[i]];
                    } else {
                        a[a2[i]] = true;
                    }
                }
                for (let k in a) {
                    diff.push(k);
                }
            }
            return diff;
        };
        plugin.init();
    };

    $.fn.view_list_calendar = function (options) {
        return this.each(function () {
            if (undefined === $(this).data('view_list_calendar')) {
                let plugin = new $.view_list_calendar(this, options);
                $(this).data('view_list_calendar', plugin);
            }
        });
    }
})(jQuery);