(function ($) {
    $.field_calendardatetime = function (element, options) {
        var defaults = {
            field_name: ""
        };
        let plugin = this;
        plugin.settings = {};
        let $element = $(element);
        plugin.loadInitElement = function () {
            let $start_date_end_date = $element.find('#changeform .start-date-end-date');
            $start_date_end_date.find('#start-date').daterangepicker({
                singleDatePicker: true,
                autoUpdateInput: false,
                locale: {
                    cancelLabel: 'Clear',
                    format: 'YYYY-MM-DD'
                },
                minDate: new Date()
            });
            $start_date_end_date.find('#start-date').on('apply.daterangepicker', function(ev, picker) {
                $(this).val(picker.startDate.format('YYYY-MM-DD'));
            });
            $start_date_end_date.find('#start-time').timepicker({});
            let $start_date_end_date_recurring = $element.find('#changeform .start-date-end-date-recurring');
            $start_date_end_date_recurring.find('#start-date-recurring').daterangepicker({
                singleDatePicker: true,
                autoUpdateInput: false,
                locale: {
                    cancelLabel: 'Clear',
                    format: 'YYYY-MM-DD'
                },
                minDate: new Date()
            });
            $start_date_end_date_recurring.find('#start-date-recurring').on('apply.daterangepicker', function(ev, picker) {
                $(this).val(picker.startDate.format('YYYY-MM-DD'));
            });
            $start_date_end_date_recurring.find('#end-date-recurring').daterangepicker({
                singleDatePicker: true,
                autoUpdateInput: false,
                locale: {
                    cancelLabel: 'Clear',
                    format: 'YYYY-MM-DD'
                },
                minDate: new Date()
            });
            $start_date_end_date_recurring.find('#end-date-recurring').on('apply.daterangepicker', function(ev, picker) {
                $(this).val(picker.startDate.format('YYYY-MM-DD'));
            });

            $start_date_end_date_recurring.find('#start-time-recurring').timepicker({});
        };

        plugin.init = function () {
            plugin.settings = $.extend({}, defaults, options);
            plugin.loadInitElement();
            $element.find('input.month-of-year,input.repeat,input.day-of-month,input.day-of-week').iCheck({
                checkboxClass: 'icheckbox_minimal-red',
                radioClass: 'iradio_minimal-red',
                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');
            $not.find('input').on('ifChecked', function () {
                $element.find('.start-date-end-date-recurring').slideUp();
                $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("");
                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-red').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-red').removeClass('checked');

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

            let $daily = $element.find('.daily');
            $daily.find('input').on('ifChecked', function () {
                $element.find('input[name="start_date"]').val("");
                $element.find('input[name="start_time"]').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-red').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-red').removeClass('checked');
            });

            let $weekly = $element.find('.weekly');
            $weekly.find('input').on('ifChecked', function () {
                $element.find('.select-day-of-week').slideDown();
                $element.find('input[name="start_date"]').val("");
                $element.find('input[name="start_time"]').val("");
                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-red').removeClass('checked');
            });
            $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();
                $element.find('input[name="start_date"]').val("");
                $element.find('input[name="start_time"]').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-red').removeClass('checked');
            });
            $monthly.find('input').on('ifUnchecked', function () {
                $element.find('.select-day-of-month').slideUp();
            });
        };
        plugin.example_function = function () {
        };
        plugin.init();
    };

    $.fn.field_calendardatetime = function (options) {

        return this.each(function () {

            if (undefined === $(this).data('field_calendardatetime')) {
                var plugin = new $.field_calendardatetime(this, options);
                $(this).data('field_calendardatetime', plugin);
            }
        });
    }
})(jQuery);