"use strict";
(function ($) {
    $.view_list_events = function (element, options) {
        let defaults = {
            visiblePages: 5,
            total_record : 100,
            limit : 6,
            start : 0
        };
        let plugin = this;
        plugin.settings = {}
        let $element = $(element);
        plugin.init = function () {
            plugin.settings = $.extend({}, defaults, options);
            $element.find('select[name="location"]').select2();
            $element.find('select[name="eventtype"]').select2();
            $element.find('.wrapper-dropdown-item').slideToggle();
            $element.find('.div-link').on('click', function () {
                let $block_event_item = $(this).closest('.block-event-item');
                $block_event_item.find('.wrapper-dropdown-item').slideToggle();
                $block_event_item.find('.each-event-list').toggleClass('remove-border-bottom');
                $(window).trigger('resize');
            });
            $element.find('.border-full').on('click', function () {
                let $block_event_item = $(this).closest('.block-event-item');
                $block_event_item.find('.wrapper-dropdown-item').slideToggle();
                $block_event_item.find('.each-event-list').toggleClass('remove-border-bottom');
                $(window).trigger('resize');
            });
            $element.find('.event-name').on('click', function () {
                let $block_event_item = $(this).closest('.block-event-item');
                $block_event_item.find('.wrapper-dropdown-item').slideToggle();
                $block_event_item.find('.each-event-list').toggleClass('remove-border-bottom');
                $(window).trigger('resize');
            });
            $element.find('.btn-cancel').on('click', function () {
                let $block_event_item = $(this).closest('.block-event-item');
                $block_event_item.find('.each-event-list').toggleClass('remove-border-bottom');
                $(this).closest('.wrapper-dropdown-item').slideToggle();
                $(window).trigger('resize');
            });
            $element.find('.btn-cancel-booking-2').on('click', function () {
                let $block_event_item = $(this).closest('.block-event-item');
                $block_event_item.find('.wrapper-dropdown-item').slideToggle();
                $block_event_item.find('.each-event-list').toggleClass('remove-border-bottom');
                $(window).trigger('resize');
            });


            $element.find('.btn-booking-now-2').on('click', function () {
                let $check =$(this).closest('.style-2');
                let $check_employee = $check.find('.block-slide-expert');
                let $check_time = $check.find('.block-rate-time');
                let $check_detail = $check.find('.block-detail-inner');
                let $process_booking = $check_time.closest('.block-booking-process');
                let $menu_booking = $process_booking.find('.menu-booking-style-2');
                let $check_information_person = $check.find('.block-form-info');
                let $check_payment = $check.find('.block-payment-method');
                if($check_employee.find('input[name="employee_id"]').length >0){
                    let employee_id = $check_employee.find('input[name="employee_id"]').val();
                    if(employee_id ===''){
                        $.alert({
                            title: '',
                            content: `<div class="wrapper-alert">
                                        <span class="title-box">Check your information</span>
                                        <span class="content-box">Please select your expert</span>
                                   </div>
                                   <i class="icon-nb-hand"></i>`,
                            container:'.block-confirm',
                            buttons: {
                                formSubmit: {
                                    text: '<i class="icon-nb-close"></i>',
                                    btnClass: 'btn-red',
                                }
                            }
                        });
                    }
                }
                let $tab_content_current = $(this).closest('.style-2');
                let $recurring = $tab_content_current.find('input[name="repeat"]:checked').val();
                let $date = $tab_content_current.find('#start-date').val();
                let $time = $tab_content_current.find('#start-time').val();
                let $start_date_recurring = $tab_content_current.find('input[name="start_date_recurring"]').val();
                let $end_date_recurring = $tab_content_current.find('input[name="end_date_recurring"]').val();
                let $start_time_recurring = $tab_content_current.find('input[name="start_time_recurring"]').val();
                let day_of_week = [];
                $element.find('input[name="day_of_week[]"]:checked').each(function () {
                    day_of_week.push(this.value);
                });
                let day_of_month = [];
                $element.find('input[name="day_of_month[]"]:checked').each(function () {
                    let $value = parseInt(this.value);
                    day_of_month.push($value);
                });
                if($recurring === "does not repeat"){
                    if($date ==="" || $time ==="" ){
                        $.alert({
                            title:'',
                            content: `<div class="wrapper-alert">
                                        <span class="title-box">Check your information</span>
                                        <span class="content-box">Please select your time</span>
                                   </div>
                                   <i class="icon-nb-hand"></i>`,
                            container:'.block-confirm',
                            buttons: {
                                formSubmit: {
                                    text: '<i class="icon-nb-close"></i>',
                                    btnClass: 'btn-red',
                                }
                            }
                        });
                        return false;
                    }
                }
                if($recurring === "daily" || $recurring === "weekly" || $recurring === "monthly" ){
                    if($start_date_recurring ==="" || $end_date_recurring ==="" || $start_time_recurring ==="" ){
                        $.alert({
                            title:'',
                            content: `<div class="wrapper-alert">
                                    <span class="title-box">Check your information</span>
                                    <span class="content-box">Please select your Time</span>
                               </div>
                               <i class="icon-nb-hand"></i>`,
                            container:'.block-confirm',
                            buttons: {
                                formSubmit: {
                                    text: '<i class="icon-nb-close"></i>',
                                    btnClass: 'btn-red',
                                }
                            }
                        });
                        return false;
                    }
                }
                if($recurring === "weekly"){
                    if(day_of_week.length === 0){
                        $.alert({
                            title:'',
                            content: `<div class="wrapper-alert">
                                    <span class="title-box">Check your information</span>
                                    <span class="content-box">Please select day of week</span>
                               </div>
                               <i class="icon-nb-hand"></i>`,
                            container:'.block-confirm',
                            buttons: {
                                formSubmit: {
                                    text: '<i class="icon-nb-close"></i>',
                                    btnClass: 'btn-red',
                                }
                            }
                        });
                        return false;
                    }
                }
                if($recurring === "monthly"){
                    if(day_of_month.length === 0){
                        $.alert({
                            title:'',
                            content: `<div class="wrapper-alert">
                                    <span class="title-box">Check your information</span>
                                    <span class="content-box">Please select day of month</span>
                               </div>
                               <i class="icon-nb-hand"></i>`,
                            container:'.block-confirm',
                            buttons: {
                                formSubmit: {
                                    text: '<i class="icon-nb-close"></i>',
                                    btnClass: 'btn-red',
                                }
                            }
                        });
                        return false;
                    }
                }

                if($check_information_person.find('.block-input').length > 0) {
                    let first_name = $check_information_person.find('input[name="first_name"]').val();
                    let last_name = $check_information_person.find('input[name="last_name"]').val();
                    let email = $check_information_person.find('input[name="email"]').val();
                    let phone = $check_information_person.find('input[name="phone"]').val();
                    if(first_name === '' || last_name === '' || email === '' || phone ==='') {
                        $check_information_person.find('.block-input .notice-error-1').addClass('active');
                    }
                    if(first_name === '') {
                        $check_information_person.find('.input-first-name .notice-error-1').addClass('active');
                    } else if (/^[a-zA-Z\\s]*$/.test(first_name) === false) {
                        $check_information_person.find('.input-first-name .notice-error-1').removeClass('active');
                        $check_information_person.find('.input-first-name .notice-error-2').addClass('active');
                    } else {
                        $check_information_person.find('.input-first-name .notice-error-1').removeClass('active');
                        $check_information_person.find('.input-first-name .notice-error-2').removeClass('active');
                    }
                    if(last_name === '') {
                        $check_information_person.find('.input-last-name .notice-error-1').addClass('active');
                    } else if (/^[a-zA-Z\\s]*$/.test(last_name) === false) {
                        $check_information_person.find('.input-last-name .notice-error-1').removeClass('active');
                        $check_information_person.find('.input-last-name .notice-error-2').addClass('active');
                    } else {
                        $check_information_person.find('.input-last-name .notice-error-1').removeClass('active');
                        $check_information_person.find('.input-last-name .notice-error-2').removeClass('active');
                    }
                    if(email === '') {
                        $check_information_person.find('.input-email .notice-error-1').addClass('active');
                    } else if (/\S+@\S+\.\S+/.test(email) === false) {
                        $check_information_person.find('.input-email .notice-error-1').removeClass('active');
                        $check_information_person.find('.input-email .notice-error-2').addClass('active');
                    } else {
                        $check_information_person.find('.input-email .notice-error-1').removeClass('active');
                        $check_information_person.find('.input-email .notice-error-2').removeClass('active');
                    }
                    if(phone === '') {
                        $check_information_person.find('.input-phone .notice-error-1').addClass('active');
                    } else if (/([ 0-9]){10,16}$/.test(phone) === false) {
                        $check_information_person.find('.input-phone .notice-error-1').removeClass('active');
                        $check_information_person.find('.input-phone .notice-error-2').addClass('active');
                    } else {
                        $check_information_person.find('.input-phone .notice-error-1').removeClass('active');
                        $check_information_person.find('.input-phone .notice-error-2').removeClass('active');
                    }
                }
                if($check_payment.find('input[name="payment_id"]').length > 0) {
                    let payment_id = $check_payment.find('input[name="payment_id"]').val();
                    if(payment_id === '') {
                        $check_payment.find('.notice-error').addClass('active');
                    }
                }
            });
            $element.find('.block-expert-inner').on('click', function () {
                let $style_2=$(this).closest('.style-2');
                let booking_process=$style_2.closest('.block-booking-process');
                let $menu_booking=booking_process.find('.menu-booking-style-2');
                let employee =$(this).find('input[name="employee_id"]').val();
                if(employee !==''){
                    $menu_booking.find('.menu-item1').addClass('active')
                }else {
                    $menu_booking.find('.menu-item1').removeClass('active')
                }
            });
            $element.find('.block-time-inner').on('click',function () {
                let $style_2=$(this).closest('.style-2');
                let $recurring= $element.find('input[name="repeat"]:checked').val();
                let booking_process=$style_2.closest('.block-booking-process');
                let $menu_booking=booking_process.find('.menu-booking-style-2');
                let time_day =$(this).find('input[name="start_date"]').val();
                let time_time =$(this).find('input[name="start_time"]').val();
                let time_start_day=$(this).find('input[name="start_date_recurring"]').val();
                let time_end_day=$(this).find('input[name="end_date_recurring"]').val();
                let time_time_recurring=$(this).find('input[name="start_time_recurring"]').val();
                if($recurring ==='does not repeat'){
                    if (time_day === '' || time_time ===''){
                        $menu_booking.find('.menu-item2').removeClass('active')
                    }else {
                        $menu_booking.find('.menu-item2').addClass('active')
                    }
                } else {
                    if(time_start_day === '' || time_end_day === '' || time_time_recurring==='' ){
                        $menu_booking.find('.menu-item2').removeClass('active')
                    }else {
                        $menu_booking.find('.menu-item2').addClass('active')
                    }
                }

            });
            $element.find('.block-time-inner input[type="text"]').focus(function () {
                let $style_2=$(this).closest('.style-2');
                let booking_process=$style_2.closest('.block-booking-process');
                let $menu_booking=booking_process.find('.menu-booking-style-2');
                let time_day =$(this).find('input[name="start_date"]').val();
                if (time_day !== '' ){
                    $(this).blur(function (){
                        $menu_booking.find('.menu-item2').addClass('active')
                    });
                }else{
                    $menu_booking.find('.menu-item2').removeClass('active')
                }
            });
            $element.find('.block-detail-inner').on('click', function () {
                let $style_2=$(this).closest('.style-2');
                let booking_process=$style_2.closest('.block-booking-process');
                let $menu_booking = booking_process.find('.menu-booking-style-2');
                let first_name =$(this).find('input[name="first_name"]').val();
                let last_name =$(this).find('input[name="last_name"]').val();
                let email =$(this).find('input[name="email"]').val();
                let phone =$(this).find('input[name="phone"]').val();
                if(first_name !== '' && last_name !== '' && email !== '' && phone !== ''){
                    $menu_booking.find('.menu-item3').addClass('active')
                }else {
                    $menu_booking.find('.menu-item3').removeClass('active')
                }

            });
            $element.find('.block-payment-inner').on('click', function () {
                let $style_2=$(this).closest('.style-2');
                let booking_process=$style_2.closest('.block-booking-process');
                let $menu_booking=booking_process.find('.menu-booking-style-2');
                let payment =$(this).find('input[name="payment_id"]').val();
                if(payment !== ''){
                    $menu_booking.find('.menu-item4').addClass('active')
                }else{
                    $menu_booking.find('.menu-item4').removeClass('active')
                }

            });
            $element.find('form[name="form-booking"]').on('click',function () {
                let $style_2=$(this).closest('.style-2');
                let booking_process=$style_2.closest('.block-booking-process');
                let $menu_booking=booking_process.find('.menu-booking-style-2');
                let time =$(this).find('input[name="calendar"]').val();
                let first_name =$(this).find('input[name="first_name"]').val();
                let last_name =$(this).find('input[name="last_name"]').val();
                let email =$(this).find('input[name="email"]').val();
                let phone =$(this).find('input[name="phone"]').val();
                let employee =$(this).find('input[name="employee_id"]').val();
                let payment =$(this).find('input[name="payment_id"]').val();
                if(first_name !== '' && last_name !== '' && email !== '' && phone !== '' && payment !== '' && time !== '' && employee !== ''){
                    $menu_booking.find('.menu-item5').addClass('active')
                }else {
                    $menu_booking.find('.menu-item5').removeClass('active')
                }
            })


            $element.find('.btn-next').on('click', function (e) {
                let $block_event_item = $(this).closest('.block-event-item');
                let $menu_booking = $block_event_item.find('.menu-booking');
                let $menu_item = $menu_booking.find('.menu-item');
                let $tab_content_current = $(this).closest('.tab-pane');
                let is_ok = true;
                let $currentTab = '';
                for(let i = 0; i <  $menu_item.length; i ++) {
                    if($($menu_item[i]).hasClass('active')) {
                        $currentTab = $menu_item[i];
                        break;
                    }
                }
                if($tab_content_current.find('input[name="employee_id"]').length > 0) {
                    let employee_id = $tab_content_current.find('input[name="employee_id"]').val();
                    if(employee_id === '') {
                        $.alert({
                            title:'',
                            content: `<div class="wrapper-alert">
                                        <span class="title-box">Check your information</span>
                                        <span class="content-box">Please select your expert</span>
                                   </div>
                                   <i class="icon-nb-hand"></i>`,
                            container:'.block-confirm',
                            buttons: {
                                formSubmit: {
                                    text: '<i class="icon-nb-close"></i>',
                                    btnClass: 'btn-red',
                                }
                            }
                        });
                        is_ok=false;
                    }
                }
                let $recurring = $tab_content_current.find('input[name="repeat"]:checked').val();
                let $date = $tab_content_current.find('#start-date').val();
                let $time = $tab_content_current.find('#start-time').val();
                let $start_date_recurring = $tab_content_current.find('input[name="start_date_recurring"]').val();
                let $end_date_recurring = $tab_content_current.find('input[name="end_date_recurring"]').val();
                let $start_time_recurring = $tab_content_current.find('input[name="start_time_recurring"]').val();
                let day_of_week = [];
                $element.find('input[name="day_of_week[]"]:checked').each(function () {
                    day_of_week.push(this.value);
                });
                let day_of_month = [];
                $element.find('input[name="day_of_month[]"]:checked').each(function () {
                    let $value = parseInt(this.value);
                    day_of_month.push($value);
                });
                if($recurring === "does not repeat"){
                    if($date ==="" || $time ==="" ){
                        $.alert({
                            title:'',
                            content: `<div class="wrapper-alert">
                                        <span class="title-box">Check your information</span>
                                        <span class="content-box">Please select your time</span>
                                   </div>
                                   <i class="icon-nb-hand"></i>`,
                            container:'.block-confirm',
                            buttons: {
                                formSubmit: {
                                    text: '<i class="icon-nb-close"></i>',
                                    btnClass: 'btn-red',
                                }
                            }
                        });
                        return false;
                    }
                }
                if($recurring === "daily" || $recurring === "weekly" || $recurring === "monthly" ){
                    if($start_date_recurring ==="" || $end_date_recurring ==="" || $start_time_recurring ==="" ){
                        $.alert({
                            title:'',
                            content: `<div class="wrapper-alert">
                                    <span class="title-box">Check your information</span>
                                    <span class="content-box">Please select your Time</span>
                               </div>
                               <i class="icon-nb-hand"></i>`,
                            container:'.block-confirm',
                            buttons: {
                                formSubmit: {
                                    text: '<i class="icon-nb-close"></i>',
                                    btnClass: 'btn-red',
                                }
                            }
                        });
                        return false;
                    }
                }
                if($recurring === "weekly"){
                    if(day_of_week.length === 0){
                        $.alert({
                            title:'',
                            content: `<div class="wrapper-alert">
                                    <span class="title-box">Check your information</span>
                                    <span class="content-box">Please select day of week</span>
                               </div>
                               <i class="icon-nb-hand"></i>`,
                            container:'.block-confirm',
                            buttons: {
                                formSubmit: {
                                    text: '<i class="icon-nb-close"></i>',
                                    btnClass: 'btn-red',
                                }
                            }
                        });
                        return false;
                    }
                }
                if($recurring === "monthly"){
                    if(day_of_month.length === 0){
                        $.alert({
                            title:'',
                            content: `<div class="wrapper-alert">
                                    <span class="title-box">Check your information</span>
                                    <span class="content-box">Please select day of month</span>
                               </div>
                               <i class="icon-nb-hand"></i>`,
                            container:'.block-confirm',
                            buttons: {
                                formSubmit: {
                                    text: '<i class="icon-nb-close"></i>',
                                    btnClass: 'btn-red',
                                }
                            }
                        });
                        return false;
                    }
                }
                if($tab_content_current.find('.block-input').length > 0) {
                    let first_name = $tab_content_current.find('input[name="first_name"]').val();
                    let last_name = $tab_content_current.find('input[name="last_name"]').val();
                    let email = $tab_content_current.find('input[name="email"]').val();
                    let phone = $tab_content_current.find('input[name="phone"]').val();
                    if(first_name === '' || last_name === '' || email === '' || phone ==='') {
                        $tab_content_current.find('.block-input .notice-error-1').addClass('active');
                        is_ok= false;
                    }
                    if(first_name === '') {
                        $tab_content_current.find('.input-first-name .notice-error-1').addClass('active');
                        is_ok= false;
                    } else if (/^[a-zA-Z\\s]*$/.test(first_name) === false) {
                        $tab_content_current.find('.input-first-name .notice-error-1').removeClass('active');
                        $tab_content_current.find('.input-first-name .notice-error-2').addClass('active');
                        is_ok=false;
                    } else {
                        $tab_content_current.find('.input-first-name .notice-error-1').removeClass('active');
                        $tab_content_current.find('.input-first-name .notice-error-2').removeClass('active');
                    }
                    if(last_name === '') {
                        $tab_content_current.find('.input-last-name .notice-error-1').addClass('active');
                        is_ok= false;
                    } else if (/^[a-zA-Z\\s]*$/.test(last_name) === false) {
                        $tab_content_current.find('.input-last-name .notice-error-1').removeClass('active');
                        $tab_content_current.find('.input-last-name .notice-error-2').addClass('active');
                        is_ok=false;
                    } else {
                        $tab_content_current.find('.input-last-name .notice-error-1').removeClass('active');
                        $tab_content_current.find('.input-last-name .notice-error-2').removeClass('active');
                    }
                    if(email === '') {
                        $tab_content_current.find('.input-email .notice-error-1').addClass('active');
                        is_ok= false;
                    } else if (/\S+@\S+\.\S+/.test(email) === false) {
                        $tab_content_current.find('.input-email .notice-error-1').removeClass('active');
                        $tab_content_current.find('.input-email .notice-error-2').addClass('active');
                        is_ok=false;
                    } else {
                        $tab_content_current.find('.input-email .notice-error-1').removeClass('active');
                        $tab_content_current.find('.input-email .notice-error-2').removeClass('active');
                    }
                    if(phone === '') {
                        $tab_content_current.find('.input-phone .notice-error-1').addClass('active');
                        is_ok= false;
                    } else if (/([ 0-9]){10,16}$/.test(phone) === false) {
                        $tab_content_current.find('.input-phone .notice-error-1').removeClass('active');
                        $tab_content_current.find('.input-phone .notice-error-2').addClass('active');
                        is_ok=false;
                    } else {
                        $tab_content_current.find('.input-phone .notice-error-1').removeClass('active');
                        $tab_content_current.find('.input-phone .notice-error-2').removeClass('active');
                    }
                }
                if($tab_content_current.find('input[name="payment_id"]').length > 0) {
                    let payment_id = $tab_content_current.find('input[name="payment_id"]').val();
                    if(payment_id === '') {
                        $tab_content_current.find('.notice-error').addClass('active');
                        is_ok = false;
                    }
                }
                if(is_ok) {
                    $($currentTab).removeClass('active');
                    $($currentTab).addClass('keep-attribute-tab');

                    $($currentTab).next().addClass('active');
                    $tab_content_current.removeClass('in active');
                    $tab_content_current.next().addClass('in active');
                }
            });

            $element.find('.wrapper-slider').ready(function () {
                $(this).on('click',function (e) {
                    $element.find('.block-gallery-slider-large').slick('setPosition');
                    $element.find('.block-gallery-slider-large-mobile').slick('setPosition');
                })
            });
            $element.find('.block-expert-inner').ready(function () {
                $(this).on('click',function (e) {
                    $(this).find('.list-employee').slick('setPosition');
                })
            });
            $element.find('.block-gallery-slider-large').slick({
                infinite: true,
                rows:1,
                slidesToShow: 3,
                slidesToScroll: 1,
                speed: 300,
                autoplay:true,
                autoplaySpeed: 2000,
                arrows:false,
                asNavFor:".block-gallery-slider-large-mobile",
                prevArrow: ".button-prev",
                nextArrow: ".button-next",
                dots: false,
                responsive: [{
                    breakpoint: 992,
                    settings: {
                        rows: 1,
                        arrows: false,
                        dots: true,
                        slidesToShow: 2,
                        slidesToScroll: 1
                    }
                },
                    {
                        breakpoint: 577,
                        settings: {
                            rows: 1,
                            dots: true,
                            arrows: false,
                            slidesToShow: 1,
                            slidesToScroll: 1
                        }
                    }
                    ]

                });
                $element.find('.block-gallery-slider-large-mobile').slick({
                    infinite: true,
                    rows:1,
                    slidesToShow: 4,
                    slidesToScroll: 1,
                    asNavFor: ".block-gallery-slider-large",
                    prevArrow: ".button-prev",
                    nextArrow: ".button-next",
                    dots: false,
                    responsive: [{
                        breakpoint: 992,
                        settings: {
                            rows: 1,
                            arrows: false,
                            dots: false,
                            slidesToShow: 3,
                            slidesToScroll: 1
                        }
                    },
                        {
                            breakpoint: 577,
                            settings: {
                                rows: 1,
                                dots: true,
                                arrows: false,
                                slidesToShow: 1,
                                slidesToScroll: 1
                            }
                        }]
                });


            $element.find('input[name="datetimes"]').daterangepicker({
                showDropdowns: true,
                minYear: 1970,
                locale: {
                    format: 'DD/MM/YY'
                },
                maxYear: '+10',
                minDate: moment().format('DD/MM/YY')
            }, function (start, end, label) {
                var years = moment().diff(start, 'years');
            });
            $element.find('#slider-container-1').slider({
                range: true,
                min: 0,
                max: 10000,
                values: [0, 10000],
                create: function () {
                    $("#amount_1").val("$0 - $10000");
                },
                slide: function (event, ui) {
                    $("#amount_1").val("$" + ui.values[0] + " - $" + ui.values[1]);
                    var mi = ui.values[0];
                    var mx = ui.values[1];
                    plugin.filterSystem(mi, mx);
                },
                change: function(event, ui) {
                    var mi = ui.values[0];
                    var mx = ui.values[1];
                    let price_value=[];
                    price_value.push(mi);
                    price_value.push(mx);
                    $element.find(`input[name="price_search"]`).val(JSON.stringify(price_value));
                }
            });

            let total_record=plugin.settings.total_record;
            let limit=plugin.settings.limit;
            let start=plugin.settings.start;
            let $fist_show=true;
            if (total_record>limit && total_record % limit >0 ){
                $element.find('#pagination-events').twbsPagination({
                    totalPages: parseInt((total_record/limit) + 1),
                    visiblePages: 3,
                    startPage:(start/limit)+1,
                    onPageClick: function (event, page) {
                        if($fist_show===false) {
                            let $form = $(this).closest('form.list-events');
                            $element.find('input[name="start"]').val(page*limit-limit);
                            $form.submit();
                            console.log("Page", page);
                            $('#page-content').text('Page ' + page);
                        }
                        $fist_show=false;
                    }
                });
            } else if(total_record>limit && total_record % limit ==0){
                $element.find('#pagination-events').twbsPagination({
                    totalPages: parseInt(total_record/limit),
                    visiblePages: 3,
                    startPage:(start/limit)+1,
                    onPageClick: function (event, page) {
                        if($fist_show===false) {
                            let $form = $(this).closest('form.list-events');
                            $element.find('input[name="start"]').val(page*limit-limit);
                            $form.submit();
                            console.log("Page", page);
                            $('#page-content').text('Page ' + page);
                        }
                        $fist_show=false;
                    }
                });
            }
            else if(total_record<=limit && total_record>0) {
                $element.find('#pagination-events').twbsPagination({
                    totalPages: 1,
                    visiblePages: 1,
                    startPage:(start/limit)+1,
                    onPageClick: function (event, page) {
                        if($fist_show===false) {
                            let $form = $(this).closest('form.list-events');
                            $element.find('input[name="start"]').val(page*limit-limit);
                            $form.submit();
                            console.log("Page", page);
                            $('#page-content').text('Page ' + page);
                        }
                        $fist_show=false;
                    }
                });
            } else {
                $element.find('#pagination-events').hide();
            }


        };
        plugin.filterSystem = function (minPrice, maxPrice) {
            $("#computers div.system").hide().filter(function () {
                var price = parseInt($(this).data("price"), 10);
                return price >= minPrice && price <= maxPrice;
            }).show();
        }
        plugin.example_function = function () {
        };
        plugin.init();
    }
    $.fn.view_list_events = function (options) {
        return this.each(function () {
            if (undefined == $(this).data('view_list_events')) {
                let plugin = new $.view_list_events(this, options);
                $(this).data('view_list_events', plugin);
            }
        });
    }
})(jQuery);
