"use strict";
(function ($) {
    $.view_list_events = function (element, options) {
        let defaults = {

        };
        let plugin = this;
        plugin.settings = {}
        let $element = $(element);
        plugin.init = function () {
            plugin.settings = $.extend({}, defaults, options);
            $element.find('.wrapper-dropdown-item').slideToggle();
            $element.find('.slider-event-detail').slick({
                slidesToShow: 3,
                slidesToScroll: 1,
                infinite: true,
                arrows:false
            });
            $element.find('.button-prev').on('click', function (e) {
                $('.slider-event-detail').slick('slickPrev');
            });
            $element.find('.button-next').on('click', function (e) {
                $('.slider-event-detail').slick('slickNext');
            });
            $element.find('.slider-event-detail').slick('setPosition');
            $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;
                    }
                }
                if($tab_content_current.find('input[name="rate_id"]').length > 0) {
                    let rate_id = $tab_content_current.find('input[name="rate_id"]').val();
                    if(rate_id ==='') {
                        $.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',
                                }
                            }
                        });
                        is_ok=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('.btn-back').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 $currentTab = '';
                for(let i = 0; i <  $menu_item.length; i ++) {
                    if($($menu_item[i]).hasClass('active')) {
                        $currentTab = $menu_item[i];
                        break;
                    }
                }
                $($currentTab).removeClass('active');
                $($currentTab).removeClass('keep-attribute-tab');

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

            });

            $element.find('input[type="text"]').on('change', function (e) {
                let $block_input = $(this).closest('.block-input');
                $block_input.find('.notice-error-1').removeClass('active');
                $block_input.find('.notice-error-2').removeClass('active');
            });

            $element.find('.btn-cancel').on('click', function () {

                let $block_event_item = $(this).closest('.block-event-item');

                $block_event_item.find('input[name="employee_id"]').val('');
                $block_event_item.find('.wrapper-employee .selected').hide();
                $block_event_item.find('.wrapper-employee p').removeClass('active');
                $block_event_item.find('input[name="rate_id"]').val('');
                $block_event_item.find('.wrapper-rate').removeClass('active');
                $block_event_item.find('.block-input input[type="text"]').val('');
                $block_event_item.find('.wrapper-payment').removeClass('active');
                $block_event_item.find('input[name="payment_id"]').val('');
                $block_event_item.find('.each-event-list').removeClass('remove-border-bottom');
                $(this).closest('.wrapper-dropdown-item').slideToggle();
                $(window).trigger('resize');
            });

            $element.find('.btn-cancel-booking').on('click', function () {
                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 $currentTab = '';
                for(let i = 0; i <  $menu_item.length; i ++) {
                    if($($menu_item[i]).hasClass('active')) {
                        $currentTab = $menu_item[i];
                        break;
                    }
                }
                $($currentTab).removeClass('active');
                $menu_item.removeClass('keep-attribute-tab');

                $($menu_item[0]).addClass('active');
                $tab_content_current.removeClass('in active');
                $element.find('.tab-pane:first-child').addClass('in active');
                $(window).trigger('resize');

            });
            $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').addClass('remove-border-bottom');
                $(window).trigger('resize');


            });

           let width = window.screen.width
            if (width <= 993){
                $element.find('.btn-booknow').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').addClass('remove-border-bottom');
                    $(window).trigger('resize');
                })
            }

           $element.find('.price-heart-booknow .heart i.fa-heart').click(function () {
               let $parent = $(this);
               if (!$parent.hasClass('active')) {
                   $parent.addClass('active');
               }else {
                   $parent.removeClass('active');
               }
            });

        };

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