"use strict";
(function ($) {
    $.view_list_calendar = function (element, options) {
        let defaults = {
            list_rate: [],
            list_order: []
        };
        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.loadCalendar = function(array, event_render){
            $.each(array, function (index, item) {
                let day_of_week = [];
                if (item.re_sunday === "1") {
                    day_of_week.push(0);
                }
                if (item.re_monday === "1") {
                    day_of_week.push(1);
                }
                if (item.re_tuesday === "1") {
                    day_of_week.push(2);
                }
                if (item.re_wednesday === "1") {
                    day_of_week.push(3);
                }
                if (item.re_thursday === "1") {
                    day_of_week.push(4);
                }
                if (item.re_friday === "1") {
                    day_of_week.push(5);
                }
                if (item.re_saturday === "1") {
                    day_of_week.push(6);
                }

                let day_of_month = [];
                if (item.day_1 === "1") {
                    day_of_month.push(1);
                }
                if (item.day_2 === "1") {
                    day_of_month.push(2);
                }
                if (item.day_3 === "1") {
                    day_of_month.push(3);
                }
                if (item.day_4 === "1") {
                    day_of_month.push(4);
                }
                if (item.day_5 === "1") {
                    day_of_month.push(5);
                }
                if (item.day_6 === "1") {
                    day_of_month.push(6);
                }
                if (item.day_7 === "1") {
                    day_of_month.push(7);
                }
                if (item.day_8 === "1") {
                    day_of_month.push(8);
                }
                if (item.day_9 === "1") {
                    day_of_month.push(9);
                }
                if (item.day_10 === "1") {
                    day_of_month.push(10);
                }
                if (item.day_11 === "1") {
                    day_of_month.push(11);
                }
                if (item.day_12 === "1") {
                    day_of_month.push(12);
                }
                if (item.day_13 === "1") {
                    day_of_month.push(13);
                }
                if (item.day_14 === "1") {
                    day_of_month.push(14);
                }
                if (item.day_15 === "1") {
                    day_of_month.push(15);
                }
                if (item.day_16 === "1") {
                    day_of_month.push(16);
                }
                if (item.day_17 === "1") {
                    day_of_month.push(17);
                }
                if (item.day_18 === "1") {
                    day_of_month.push(18);
                }
                if (item.day_19 === "1") {
                    day_of_month.push(19);
                }
                if (item.day_20 === "1") {
                    day_of_month.push(20);
                }
                if (item.day_21 === "1") {
                    day_of_month.push(21);
                }
                if (item.day_22 === "1") {
                    day_of_month.push(22);
                }
                if (item.day_23 === "1") {
                    day_of_month.push(23);
                }
                if (item.day_24 === "1") {
                    day_of_month.push(24);
                }
                if (item.day_25 === "1") {
                    day_of_month.push(25);
                }
                if (item.day_26 === "1") {
                    day_of_month.push(26);
                }
                if (item.day_27 === "1") {
                    day_of_month.push(27);
                }
                if (item.day_28 === "1") {
                    day_of_month.push(28);
                }
                if (item.day_29 === "1") {
                    day_of_month.push(29);
                }
                if (item.day_30 === "1") {
                    day_of_month.push(30);
                }
                if (item.day_31 === "1") {
                    day_of_month.push(31);
                }

                if (item.not_recurring === "1") {
                    event_render.push({
                        id: item.id,
                        event_id: item.event_id,
                        title: item.title,
                        allDay: false,
                        start: item.start,
                        end: item.end,
                        description: item.description,
                        customer_id: item.customer_id,
                        customer_fullname: item.customer_fullname,
                        customer_email: item.customer_email,
                        list_time_detail: item.list_time_detail,
                        list_date_detail: item.list_date_detail,
                        employee_cover: item.employee_cover,
                        employee_fullname: item.employee_fullname,
                        location_address: item.location_address,
                        employee_id: item.employee_id,
                        location_id: item.location_id,
                        event_price: item.event_price,
                        payment_id: item.payment_id,
                        total: item.total,
                        order_id: item.order_id,
                        not_recurring: item.not_recurring,
                        daily: item.daily,
                        weekly: item.weekly,
                        monthly: item.monthly
                    });
                } else if (item.daily === "1") {
                    event_render.push({
                        id: item.id,
                        event_id: item.event_id,
                        title: item.title,
                        allDay: false,
                        startTime: item.startTime,
                        endTime: item.endTime,
                        startRecur: item.startRecur,
                        endRecur: item.endRecur,
                        color: item.color_event,
                        description: item.description,
                        customer_id: item.customer_id,
                        customer_fullname: item.customer_fullname,
                        customer_email: item.customer_email,
                        list_time_detail: item.list_time_detail,
                        list_date_detail: item.list_date_detail,
                        employee_cover: item.employee_cover,
                        employee_fullname: item.employee_fullname,
                        location_address: item.location_address,
                        employee_id: item.employee_id,
                        location_id: item.location_id,
                        event_price: item.event_price,
                        payment_id: item.payment_id,
                        total: item.total,
                        order_id: item.order_id,
                        not_recurring: item.not_recurring,
                        daily: item.daily,
                        weekly: item.weekly,
                        monthly: item.monthly,
                    });
                } else if (item.weekly === "1") {
                    event_render.push({
                        id: item.id,
                        event_id: item.event_id,
                        title: item.title,
                        allDay: false,
                        startTime: item.startTime,
                        endTime: item.endTime,
                        startRecur: item.startRecur,
                        endRecur: item.endRecur,
                        daysOfWeek: day_of_week,
                        color: item.color_event,
                        description: item.description,
                        customer_id: item.customer_id,
                        customer_fullname: item.customer_fullname,
                        customer_email: item.customer_email,
                        list_time_detail: item.list_time_detail,
                        list_date_detail: item.list_date_detail,
                        employee_cover: item.employee_cover,
                        employee_fullname: item.employee_fullname,
                        location_address: item.location_address,
                        employee_id: item.employee_id,
                        location_id: item.location_id,
                        event_price: item.event_price,
                        payment_id: item.payment_id,
                        total: item.total,
                        order_id: item.order_id,
                        not_recurring: item.not_recurring,
                        daily: item.daily,
                        weekly: item.weekly,
                        monthly: item.monthly
                    });
                } else if (item.monthly === "1") {
                    event_render.push({
                        id: item.id,
                        event_id: item.event_id,
                        title: item.title,
                        color: item.color_event,
                        rrule: {
                            freq: 'monthly',
                            dtstart: item.start_date,
                            until: item.end_date,
                            bymonthday: day_of_month,
                        },
                        description: item.description,
                        customer_id: item.customer_id,
                        customer_fullname: item.customer_fullname,
                        customer_email: item.customer_email,
                        list_time_detail: item.list_time_detail,
                        list_date_detail: item.list_date_detail,
                        employee_cover: item.employee_cover,
                        employee_fullname: item.employee_fullname,
                        location_address: item.location_address,
                        employee_id: item.employee_id,
                        location_id: item.location_id,
                        event_price: item.event_price,
                        payment_id: item.payment_id,
                        total: item.total,
                        order_id: item.order_id,
                        not_recurring: item.not_recurring,
                        daily: item.daily,
                        weekly: item.weekly,
                        monthly: item.monthly,
                        day_end: item.end_date
                    });
                } else {
                    event_render.push({
                        id: item.id,
                        event_id: item.event_id,
                        title: item.service_title,
                        allDay: false,
                        color:"#1b1313",
                        start: item.start,
                        end: item.end,
                        description: item.description,
                        customer_id: item.customer_id,
                        customer_fullname: item.customer_fullname,
                        customer_email: item.customer_email,
                        list_time_detail: item.list_time_detail,
                        list_date_detail: item.list_date_detail,
                        employee_cover: item.employee_cover,
                        employee_fullname: item.employee_fullname,
                        location_address: item.location_address,
                        employee_id: item.employee_id,
                        location_id: item.location_id,
                        event_price: item.event_price,
                        payment_id: item.payment_id,
                        total: item.total,
                        order_id: item.order_id,
                        not_recurring: item.not_recurring,
                        daily: item.daily,
                        weekly: item.weekly,
                        monthly: item.monthly,
                    });
                }
            });
        }
        plugin.pushday0fweek= function(array, arraypush){
            if(jQuery.inArray(0, array) !== -1){
                arraypush.push("Sun")
            }
            if($.inArray(1, array) !== -1){
                arraypush.push("Mon")
            }
            if($.inArray(2, array) !== -1){
                arraypush.push("Tue")
            }
            if($.inArray(3, array) !== -1){
                arraypush.push("Wed")
            }
            if($.inArray(4, array) !== -1){
                arraypush.push("Thur")
            }
            if($.inArray(5, array) !== -1){
                arraypush.push("Fri")
            }
            if($.inArray(6, array) !== -1){
                arraypush.push("Sat")
            }
        }
        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 = [];
                        plugin.loadCalendar(list_rate,event_render);
                        var calendarEl = document.getElementById('calendar');
                        var calendar = new FullCalendar.Calendar(calendarEl, {
                            plugins: ['interaction', 'dayGrid', 'timeGrid', 'bootstrapPlugin', 'interactionPlugin', 'momentPlugin', 'rrule'],
                            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: event_render,
                            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) {
                                console.log("calEvent", calEvent);
                                if(calEvent.event._def.extendedProps.not_recurring !=="0" || calEvent.event._def.extendedProps.daily !=="0" || calEvent.event._def.extendedProps.weekly !== "0" || calEvent.event._def.extendedProps.monthly !=="0" ){
                                    $element.find('#calendarModal').modal('toggle');
                                    let last_id = event_render.slice(-1)[0];
                                    let event_id = calEvent.event._def.extendedProps.event_id;
                                    let id = parseInt(last_id.id) +1;
                                    let order_detail_rate_id = calEvent.event.id;
                                    let event_name = calEvent.event.title;
                                    let employee_id = calEvent.event._def.extendedProps.employee_id;
                                    let location_id = calEvent.event._def.extendedProps.location_id;
                                    let customer_id = calEvent.event._def.extendedProps.customer_id;
                                    let employee_cover = calEvent.event._def.extendedProps.employee_cover;
                                    let employee_fullname = calEvent.event._def.extendedProps.employee_fullname;
                                    let customer_email = calEvent.event._def.extendedProps.customer_email;
                                    let customer_fullname = calEvent.event._def.extendedProps.customer_fullname;
                                    let event_price = calEvent.event._def.extendedProps.event_price;
                                    let location_address = calEvent.event._def.extendedProps.location_address;
                                    let payment_id = calEvent.event._def.extendedProps.payment_id;
                                    let total = calEvent.event._def.extendedProps.total;
                                    let order_id = calEvent.event._def.extendedProps.order_id;
                                    let $calendarModal = $element.find('#calendarModal');
                                    $calendarModal.find('input[name="event_id"]').val(event_id);
                                    $calendarModal.find('input[name="id"]').val(id);
                                    $calendarModal.find('input[name="event_name"]').val(event_name);
                                    $calendarModal.find('input[name="employee_id"]').val(employee_id);
                                    $calendarModal.find('input[name="location_id"]').val(location_id);
                                    $calendarModal.find('input[name="customer_id"]').val(customer_id);
                                    $calendarModal.find('input[name="event_price"]').val(event_price);
                                    $calendarModal.find('input[name="payment_id"]').val(payment_id);
                                    $calendarModal.find('input[name="total"]').val(total);
                                    $calendarModal.find('input[name="order_id"]').val(order_id);
                                    $calendarModal.find('input[name="employee_cover"]').val(employee_cover);
                                    $calendarModal.find('input[name="employee_fullname"]').val(employee_fullname);
                                    $calendarModal.find('input[name="customer_email"]').val(customer_email);
                                    $calendarModal.find('input[name="customer_fullname"]').val(customer_fullname);
                                    $calendarModal.find('input[name="order_detail_rate_id"]').val(order_detail_rate_id);
                                    $calendarModal.find('input[name="location_address"]').val(location_address);
                                }
                            },
                            eventRender: function (info) {
                                console.log("info", info);
                                if (typeof (info.event._def.recurringDef) !== "undefined" ){
                                    var day_of_weeks = info.event._def.recurringDef.typeData.daysOfWeek;
                                }
                                if(day_of_weeks !== []){
                                    var render_day_of_week = [];
                                    plugin.pushday0fweek(day_of_weeks,render_day_of_week);
                                }
                                $(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="id">
                                <span class="title-name">ID</span>
                                <span class="id-name">${info.event.id}</span>
                        </div>
                        <div class="employee">
                                <div class="img-box">
                                    <div>
                                        <img src="${wpbookingevent_root_url_plugin}${info.event._def.extendedProps.employee_cover}" alt="">
                                    </div>
                                </div>
                                <span class="employee-name">${info.event._def.extendedProps.employee_fullname}</span>
                        </div>
                        <div class="customer">
                             <div class="img-box">
                                    <div>
                                        <i class="icon-nb-user"></i>
                                    </div>
                                </div>
                                <span class="customer-name">${info.event._def.extendedProps.customer_fullname}</span>
                        </div>
                    `
                                );
                                $(info.el).tooltip();
                                if(info.event._def.extendedProps.weekly==1){
                                    $(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_date_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>               
                                <p>Day of week : ${render_day_of_week}</p>
                                
                            `;
                                            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);
                                    });
                                } else if(info.event._def.extendedProps.monthly==1){
                                    $(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_date_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>
                                <p>Day of month : ${info.event._def.recurringDef.typeData.origOptions.bymonthday}</p>
                            `;
                                            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);
                                    });
                                } else {
                                    $(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_date_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>
                            `;
                                            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;
                    } 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 = [];
                        plugin.loadCalendar(list_rate,event_render);
                        var calendarEl = document.getElementById('calendar');
                        var calendar = new FullCalendar.Calendar(calendarEl, {
                            plugins: ['interaction', 'dayGrid', 'timeGrid', 'bootstrapPlugin', 'interactionPlugin', 'momentPlugin', 'rrule'],
                            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: event_render,
                            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) {
                                console.log("calEvent", calEvent);
                                if(calEvent.event._def.extendedProps.not_recurring !=="0" || calEvent.event._def.extendedProps.daily !=="0" || calEvent.event._def.extendedProps.weekly !== "0" || calEvent.event._def.extendedProps.monthly !=="0" ){
                                    $element.find('#calendarModal').modal('toggle');
                                    let last_id = event_render.slice(-1)[0];
                                    let event_id = calEvent.event._def.extendedProps.event_id;
                                    let id = parseInt(last_id.id) +1;
                                    let order_detail_rate_id = calEvent.event.id;
                                    let event_name = calEvent.event.title;
                                    let employee_id = calEvent.event._def.extendedProps.employee_id;
                                    let location_id = calEvent.event._def.extendedProps.location_id;
                                    let customer_id = calEvent.event._def.extendedProps.customer_id;
                                    let employee_cover = calEvent.event._def.extendedProps.employee_cover;
                                    let employee_fullname = calEvent.event._def.extendedProps.employee_fullname;
                                    let customer_email = calEvent.event._def.extendedProps.customer_email;
                                    let customer_fullname = calEvent.event._def.extendedProps.customer_fullname;
                                    let event_price = calEvent.event._def.extendedProps.event_price;
                                    let location_address = calEvent.event._def.extendedProps.location_address;
                                    let payment_id = calEvent.event._def.extendedProps.payment_id;
                                    let total = calEvent.event._def.extendedProps.total;
                                    let order_id = calEvent.event._def.extendedProps.order_id;
                                    let $calendarModal = $element.find('#calendarModal');
                                    $calendarModal.find('input[name="event_id"]').val(event_id);
                                    $calendarModal.find('input[name="id"]').val(id);
                                    $calendarModal.find('input[name="event_name"]').val(event_name);
                                    $calendarModal.find('input[name="employee_id"]').val(employee_id);
                                    $calendarModal.find('input[name="location_id"]').val(location_id);
                                    $calendarModal.find('input[name="customer_id"]').val(customer_id);
                                    $calendarModal.find('input[name="event_price"]').val(event_price);
                                    $calendarModal.find('input[name="payment_id"]').val(payment_id);
                                    $calendarModal.find('input[name="total"]').val(total);
                                    $calendarModal.find('input[name="order_id"]').val(order_id);
                                    $calendarModal.find('input[name="employee_cover"]').val(employee_cover);
                                    $calendarModal.find('input[name="employee_fullname"]').val(employee_fullname);
                                    $calendarModal.find('input[name="customer_email"]').val(customer_email);
                                    $calendarModal.find('input[name="customer_fullname"]').val(customer_fullname);
                                    $calendarModal.find('input[name="order_detail_rate_id"]').val(order_detail_rate_id);
                                    $calendarModal.find('input[name="location_address"]').val(location_address);
                                }
                            },
                            eventRender: function (info) {
                                console.log("info", info);
                                if (typeof (info.event._def.recurringDef) !== "undefined" ){
                                    var day_of_weeks = info.event._def.recurringDef.typeData.daysOfWeek;
                                }
                                if(day_of_weeks !== []){
                                    var render_day_of_week = [];
                                    plugin.pushday0fweek(day_of_weeks,render_day_of_week);
                                }
                                $(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="id">
                                <span class="title-name">ID</span>
                                <span class="id-name">${info.event.id}</span>
                        </div>
                        <div class="employee">
                                <div class="img-box">
                                    <div>
                                        <img src="${wpbookingevent_root_url_plugin}${info.event._def.extendedProps.employee_cover}" alt="">
                                    </div>
                                </div>
                                <span class="employee-name">${info.event._def.extendedProps.employee_fullname}</span>
                        </div>
                        <div class="customer">
                             <div class="img-box">
                                    <div>
                                        <i class="icon-nb-user"></i>
                                    </div>
                                </div>
                                <span class="customer-name">${info.event._def.extendedProps.customer_fullname}</span>
                        </div>
                    `
                                );
                                $(info.el).tooltip();
                                if(info.event._def.extendedProps.weekly==1){
                                    $(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_date_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>               
                                <p>Day of week : ${render_day_of_week}</p>
                                
                            `;
                                            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);
                                    });
                                } else if(info.event._def.extendedProps.monthly==1){
                                    $(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_date_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>
                                <p>Day of month : ${info.event._def.recurringDef.typeData.origOptions.bymonthday}</p>
                            `;
                                            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);
                                    });
                                } else {
                                    $(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_date_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>
                            `;
                                            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;
                    } 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({});
            $start_date_end_date.find('#end-time').timepicker({});
            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({});
            $start_date_end_date_recurring.find('#end-time-recurring').timepicker({});

        };
        plugin.init = function () {
            plugin.settings = $.extend({}, defaults, options);
            var calendarEl = document.getElementById('calendar');
            let list_rate = plugin.settings.list_rate;
            let event_render = [];
            plugin.loadCalendar(list_rate,event_render);
            plugin.loadInitElement();
            var calendar = new FullCalendar.Calendar(calendarEl, {
                plugins: ['interaction', 'dayGrid', 'timeGrid', 'bootstrapPlugin', 'interactionPlugin', 'momentPlugin', 'rrule'],
                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: event_render,
                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) {
                    console.log("calEvent", calEvent);
                    if(calEvent.event._def.extendedProps.not_recurring !=="0" || calEvent.event._def.extendedProps.daily !=="0" || calEvent.event._def.extendedProps.weekly !== "0" || calEvent.event._def.extendedProps.monthly !=="0" ){
                        $element.find('#calendarModal').modal('toggle');
                        let last_id = event_render.slice(-1)[0];
                        let event_id = calEvent.event._def.extendedProps.event_id;
                        let id = parseInt(last_id.id) +1;
                        let order_detail_rate_id = calEvent.event.id;
                        let event_name = calEvent.event.title;
                        let employee_id = calEvent.event._def.extendedProps.employee_id;
                        let location_id = calEvent.event._def.extendedProps.location_id;
                        let customer_id = calEvent.event._def.extendedProps.customer_id;
                        let employee_cover = calEvent.event._def.extendedProps.employee_cover;
                        let employee_fullname = calEvent.event._def.extendedProps.employee_fullname;
                        let customer_email = calEvent.event._def.extendedProps.customer_email;
                        let customer_fullname = calEvent.event._def.extendedProps.customer_fullname;
                        let event_price = calEvent.event._def.extendedProps.event_price;
                        let location_address = calEvent.event._def.extendedProps.location_address;
                        let payment_id = calEvent.event._def.extendedProps.payment_id;
                        let total = calEvent.event._def.extendedProps.total;
                        let order_id = calEvent.event._def.extendedProps.order_id;
                        let $calendarModal = $element.find('#calendarModal');
                        $calendarModal.find('input[name="event_id"]').val(event_id);
                        $calendarModal.find('input[name="id"]').val(id);
                        $calendarModal.find('input[name="event_name"]').val(event_name);
                        $calendarModal.find('input[name="employee_id"]').val(employee_id);
                        $calendarModal.find('input[name="location_id"]').val(location_id);
                        $calendarModal.find('input[name="customer_id"]').val(customer_id);
                        $calendarModal.find('input[name="event_price"]').val(event_price);
                        $calendarModal.find('input[name="payment_id"]').val(payment_id);
                        $calendarModal.find('input[name="total"]').val(total);
                        $calendarModal.find('input[name="order_id"]').val(order_id);
                        $calendarModal.find('input[name="employee_cover"]').val(employee_cover);
                        $calendarModal.find('input[name="employee_fullname"]').val(employee_fullname);
                        $calendarModal.find('input[name="customer_email"]').val(customer_email);
                        $calendarModal.find('input[name="customer_fullname"]').val(customer_fullname);
                        $calendarModal.find('input[name="order_detail_rate_id"]').val(order_detail_rate_id);
                        $calendarModal.find('input[name="location_address"]').val(location_address);
                    }
                },
                eventRender: function (info) {
                    console.log("info", info);
                    if (typeof (info.event._def.recurringDef) !== "undefined" ){
                        var day_of_weeks = info.event._def.recurringDef.typeData.daysOfWeek;
                    }
                    if(day_of_weeks !== []){
                        var render_day_of_week = [];
                        plugin.pushday0fweek(day_of_weeks,render_day_of_week);
                    }
                    $(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="id">
                                <span class="title-name">ID</span>
                                <span class="id-name">${info.event.id}</span>
                        </div>
                        <div class="employee">
                                <div class="img-box">
                                    <div>
                                        <img src="${wpbookingevent_root_url_plugin}${info.event._def.extendedProps.employee_cover}" alt="">
                                    </div>
                                </div>
                                <span class="employee-name">${info.event._def.extendedProps.employee_fullname}</span>
                        </div>
                        <div class="customer">
                             <div class="img-box">
                                    <div>
                                        <i class="icon-nb-user"></i>
                                    </div>
                                </div>
                                <span class="customer-name">${info.event._def.extendedProps.customer_fullname}</span>
                        </div>
                    `
                    );
                    $(info.el).tooltip();
                    if(info.event._def.extendedProps.weekly==1){
                        $(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_date_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>               
                                <p>Day of week : ${render_day_of_week}</p>
                                
                            `;
                                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);
                        });
                    } else if(info.event._def.extendedProps.monthly==1){
                        $(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_date_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>
                                <p>Day of month : ${info.event._def.recurringDef.typeData.origOptions.bymonthday}</p>
                            `;
                                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);
                        });
                    } else {
                        $(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_date_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>
                            `;
                                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();
            $element.find('.start-date-end-date-recurring').slideUp();
            let $start_date_end_date = $element.find('#changeform .start-date-end-date');
            let $not = $element.find('.not');
            let $daily = $element.find('.daily');
            let $weekly = $element.find('.weekly');
            let $monthly = $element.find('.monthly');
            let $name_repeat= $element.find('.name-repeat');
            $not.find('input').on('ifChecked', function () {
                $element.find('.start-date-end-date-recurring').slideUp();
                $name_repeat.find('input').not(this).prop("checked",false);
                $start_date_end_date.slideDown();
                $element.find('input[name="start_date_recurring"]').val("");
                $element.find('input[name="end_date_recurring"]').val("");
                $element.find('input[name="start_time_recurring"]').val("");
                $element.find('input[name="end_time_recurring"]').val("");
                let day_of_week=$element.find('input[name="day_of_week[]"]');
                let name_day_of_week=day_of_week.closest('.name-day-of-week');
                day_of_week.prop("checked",false);
                name_day_of_week.find('.icheckbox_minimal').removeClass('checked');
                let day_of_month=$element.find('input[name="day_of_month[]"]');
                let name_day_of_month=day_of_month.closest('.name-day-of-month');
                day_of_month.prop("checked",false);
                name_day_of_month.find('.icheckbox_minimal').removeClass('checked');
            });
            $not.find('input').on('ifUnchecked', function () {
                $element.find('.start-date-end-date-recurring').slideDown();
                $element.find('.select-repeat').css({'border-top' : 'none'});
                $start_date_end_date.slideUp();
                $element.find('input[name="start_date"]').val("");
                $element.find('input[name="start_time"]').val("");
                $element.find('input[name="end_time"]').val("");
            });

            $daily.find('input').on('ifChecked', function () {
                let day_of_week=$element.find('input[name="day_of_week[]"]');
                let name_day_of_week=day_of_week.closest('.name-day-of-week');
                day_of_week.prop("checked",false);
                name_day_of_week.find('.icheckbox_minimal').removeClass('checked');
                let day_of_month=$element.find('input[name="day_of_month[]"]');
                let name_day_of_month=day_of_month.closest('.name-day-of-month');
                day_of_month.prop("checked",false);
                name_day_of_month.find('.icheckbox_minimal').removeClass('checked');
            });

            $weekly.find('input').on('ifChecked', function () {
                $element.find('.select-day-of-week').slideDown();
                let day_of_month=$element.find('input[name="day_of_month[]"]');
                let name_day_of_month=day_of_month.closest('.name-day-of-month');
                day_of_month.prop("checked",false);
                name_day_of_month.find('.icheckbox_minimal').removeClass('checked');
            });
            $weekly.find('input').on('ifUnchecked', function () {
                $element.find('.select-day-of-week').slideUp();
            });

            $monthly.find('input').on('ifChecked', function () {
                $element.find('.select-day-of-month').slideDown();
                let day_of_week=$element.find('input[name="day_of_week[]"]');
                let name_day_of_week=day_of_week.closest('.name-day-of-week');
                day_of_week.prop("checked",false);
                name_day_of_week.find('.icheckbox_minimal').removeClass('checked');
            });
            $monthly.find('input').on('ifUnchecked', function () {
                $element.find('.select-day-of-month').slideUp();
            });
            let $modal = $element.find('#calendarModal');
            $element.find('#btnSaveIt').on('click', function (e) {
                let event_id = $modal.find('input[name="event_id"]').val();
                let id = $modal.find('input[name="id"]').val();
                let event_name = $modal.find('input[name="event_name"]').val();
                let employee_id = $modal.find('input[name="employee_id"]').val();
                let location_id = $modal.find('input[name="location_id"]').val();
                let location_address = $modal.find('input[name="location_address"]').val();
                let customer_id = $modal.find('input[name="customer_id"]').val();
                let customer_email = $modal.find('input[name="customer_email"]').val();
                let customer_fullname = $modal.find('input[name="customer_fullname"]').val();
                let payment_id = $modal.find('input[name="payment_id"]').val();
                let event_price = $modal.find('input[name="event_price"]').val();
                let employee_cover = $modal.find('input[name="employee_cover"]').val();
                let employee_fullname = $modal.find('input[name="employee_fullname"]').val();
                let total = $modal.find('input[name="total"]').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 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;
                let $recurring = $element.find('input[name="repeat"]:checked').val();
                let $not_recurring =0;
                let $re_daily =0;
                let $re_weekly=0;
                let $re_monthly=0;
                let $color= "";
                let dtstart ="";
                let dtend ="";
                let list_time_detail="";
                let list_date_detail="";
                let day_of_week = [];
                let day_of_month = [];
                if($recurring==="does not repeat"){
                    $not_recurring =1;
                    dtstart = start_date + " " + start_time + ":00";
                    dtend = start_date + " " + end_time + ":00";
                    list_time_detail = start_time + " " + "-" + " " + end_time;
                    list_date_detail = start_date + " " + "-" + " " + start_date;
                    $color= "";
                    current_calendar.addEvent({
                        id: id,
                        title: event_name,
                        allDay: false,
                        start: dtstart,
                        end: dtend,
                        employee_cover: employee_cover,
                        employee_fullname: employee_fullname,
                        list_time_detail: list_time_detail,
                        list_date_detail: list_date_detail,
                        customer_email: customer_email,
                        customer_fullname: customer_fullname,
                        location_address: location_address
                    });
                } else if($recurring === "daily"){
                    $re_daily=1;
                    dtstart = start_date_recurring + " " + start_time_recurring + ":00";
                    dtend = end_date_recurring + " " + end_time_recurring + ":00";
                    let firstDate = new Date(start_date_recurring);
                    let secondDate = new Date(end_date_recurring);
                    let $number_day_recurring=Math.round(Math.abs((secondDate - firstDate) / (24 * 60 * 60 * 1000)));
                    total = event_price * $number_day_recurring;
                    list_time_detail = start_time_recurring + " " + "-" + " " + end_time_recurring;
                    list_date_detail = start_date_recurring + " " + "-" + " " + end_date_recurring;
                    $color ='green';
                    current_calendar.addEvent({
                        id: id,
                        title: event_name,
                        allDay: false,
                        startTime: start_time_recurring,
                        endTime: end_time_recurring,
                        startRecur: start_date_recurring,
                        endRecur: end_date_recurring,
                        color: $color,
                        employee_cover: employee_cover,
                        employee_fullname: employee_fullname,
                        list_time_detail: list_time_detail,
                        list_date_detail: list_date_detail,
                        customer_email: customer_email,
                        customer_fullname: customer_fullname,
                        location_address: location_address,
                    });

                } else if($recurring ==="weekly"){
                    $re_weekly =1;
                    dtstart = start_date_recurring + " " + start_time_recurring + ":00";
                    dtend = end_date_recurring + " " + end_time_recurring + ":00";
                    list_time_detail = start_time_recurring + " " + "-" + " " + end_time_recurring;
                    list_date_detail = start_date_recurring + " " + "-" + " " + end_date_recurring;
                    $color ='orange';
                    $modal.find('input[name="day_of_week[]"]:checked').each(function () {
                        day_of_week.push(this.value);
                    });
                    function getdayofWeekCountBetweenDates(startDate, endDate,$j){
                        let total = 0;
                        for (let i = startDate; i < endDate; i.setDate(i.getDate()+1)){
                            if (i.getDay() == $j) total++;
                        }
                        return total;
                    };
                    let $total_day_weekly=0;
                    $.each(day_of_week, function (index, value) {
                       let $total_day = getdayofWeekCountBetweenDates(new Date(start_date_recurring), new Date(end_date_recurring), value);
                        $total_day_weekly += $total_day;
                    });
                    total = event_price * $total_day_weekly;
                    current_calendar.addEvent({
                        id: 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,
                        color: $color,
                        employee_cover: employee_cover,
                        employee_fullname: employee_fullname,
                        list_time_detail: list_time_detail,
                        list_date_detail: list_date_detail,
                        customer_email: customer_email,
                        customer_fullname: customer_fullname,
                        location_address: location_address
                    });
                } else if($recurring ==="monthly"){
                    $re_monthly=1;
                    dtstart = start_date_recurring + " " + start_time_recurring + ":00";
                    dtend = end_date_recurring + " " + end_time_recurring + ":00";
                    list_time_detail = start_time_recurring + " " + "-" + " " + end_time_recurring;
                    list_date_detail = start_date_recurring + " " + "-" + " " + end_date_recurring;
                    $color ='purple';
                    let $total_day_monthly =0;
                    $modal.find('input[name="day_of_month[]"]:checked').each(function () {
                        let $value = parseInt(this.value);
                        day_of_month.push($value);
                    });
                    function getdayofMonthCountBetweenDates(startDate, endDate,$j){
                        let total = 0;
                        for (let i = startDate; i <= endDate; i.setDate(i.getDate()+1)){
                            if (i.getDate() == $j) total++;
                        }
                        return total;
                    };
                    $.each(day_of_month, function (index, value) {
                        let $total_day = getdayofMonthCountBetweenDates(new Date(start_date_recurring), new Date(end_date_recurring), value);
                        $total_day_monthly += $total_day;
                    });
                    total = event_price * $total_day_monthly;
                    current_calendar.addEvent({
                        id: id,
                        title: event_name,
                        employee_cover: employee_cover,
                        employee_fullname: employee_fullname,
                        list_time_detail: list_time_detail,
                        list_date_detail: list_date_detail,
                        location_address: location_address,
                        customer_email: customer_email,
                        customer_fullname: customer_fullname,
                        color: $color,
                        rrule: {
                            freq: 'monthly',
                            dtstart: dtstart,
                            until: dtend,
                            bymonthday: day_of_month,
                        },
                    });

                }
                $.ajax({
                    type: "POST",
                    dataType: "json",
                    url: wpbookingevent_root_url + wpbookingevent_api_task,
                    data: {
                        task: "calendar.save_schedule_event",
                        event_id: event_id,
                        event_name: event_name,
                        day_of_week: day_of_week,
                        day_of_month: day_of_month,
                        start_date: dtstart,
                        end_date: dtend,
                        employee_id: employee_id,
                        location_id: location_id,
                        customer_id: customer_id,
                        payment_id: payment_id,
                        event_price: event_price,
                        startTime: start_time_recurring,
                        endTime: end_time_recurring,
                        startRecur: start_date_recurring,
                        endRecur: end_date_recurring,
                        total: total,
                        monthly: $re_monthly,
                        weekly: $re_weekly,
                        daily: $re_daily,
                        not_recurring: $not_recurring,
                        color:$color
                    },
                    beforeSend: function () {
                    },
                    error: function (xhr) {
                        $.alert({
                            title: 'Error',
                            content: 'there are some error please contact admin !',
                        });
                    },
                    complete: function () {
                    },
                    success: function (response) {
                        response = JSON.parse(response);
                        console.log("response", response);
                        if (response.result === "success") {
                        }
                    }
                });

            });

            $element.find("#btnRemoveIt").on('click', function (e) {
                let $modal = $element.find('#calendarModal');
                let order_detail_rate_id = $modal.find('input[name="order_detail_rate_id"]').val();
                let order_id = $modal.find('input[name="order_id"]').val();
                let delete_customer_id=$modal.find('input[name="customer_id"]').val();
                let current_calendar = plugin.settings.current_calendar;
                let current_event = current_calendar.getEventById(order_detail_rate_id).remove();
                $.ajax({
                    type: "POST",
                    dataType: "json",
                    url: wpbookingevent_root_url + wpbookingevent_api_task,
                    data: {
                        task: "calendar.delete",
                        order_id: order_id,
                        customer_id:delete_customer_id
                    },
                    beforeSend: function () {
                    },
                    error: function (xhr) {
                        $.alert({
                            title: 'Error',
                            content: 'there are some error please contact admin !',
                        });
                    },
                    complete: function () {
                    },
                    success: function (response) {
                        response = JSON.parse(response);
                        console.log("response", response);
                        if (response.result === "success") {

                        }
                    }
                });
            })
        };
        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);