"use strict";
(function ($) {
    $.view_event_detail = function (element, options) {
        let defaults = {
            person:1,
            event_item:[]
        }
        let plugin = this;
        plugin.settings = {}
        let $element = $(element);
        plugin.init = function () {
            plugin.settings = $.extend({}, defaults, options);
            let event_item=plugin.settings.event_item;
            let $gallery_large = $element.find('.block-gallery-slider-large');
            $gallery_large.slick({
                infinite: true,
                rows:1,
                slidesToShow: 4,
                slidesToScroll: 1,
                prevArrow: ".arrow-prev",
                nextArrow: ".arrow-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
                        }
                    }]
            });
            let person=plugin.settings.person;
            $element.find('form[name="client-form"]').each(function (e) {
                $(this).validate({
                    ignore: ""
                });
            });
            let $employee_input = $element.find('input[name=employee_id]');
            $employee_input.on('change', function () {
                let employee_id= $(this).val();
                let list_employee = event_item.list_employee;
                let employee_choosen = list_employee.find(function (employee) {
                    if(employee.id == employee_id) {
                        return employee;
                    }
                });
                $element.find('.trainer-info').text(`${employee_choosen.first_name} ${employee_choosen.last_name}`)
            });
            $element.find('#start-date , #start-date-recurring').on('apply.daterangepicker', function () {
                let value = $(this).val();
                let date_book=moment(value).format('YYYY-MM-DD');
                if(value !== '') {
                    $element.find('.date-info').text(date_book);
                } else {
                    $element.find('.date-info').text('');
                }
            });
            $element.find('#start-time, #start-time-recurring').on('change', function () {
                let start_time = $(this).val();
                let end_time = moment($(this).val(), "HH:mm").add(event_item.duration,'hour').format('HH:mm');
                if(start_time !==''){
                    $element.find('.local-time').text(`${start_time} - ${end_time}`);
                } else {
                    $element.find('.local-time').text('');
                }
            });
            $element.find('#end-date-recurring').on('apply.daterangepicker' ,function () {
                let end_date= $(this).val();
                let gach = " - ";
                let _end_date= gach.concat(end_date);
                if(end_date !==""){
                    $element.find('.recurring-date-info').text(_end_date);
                }else {
                    $element.find('.recurring-date-info').text('');
                }
            });


            $element.find('.btn-book-now').click(function (e) {
                let $form = $(this).closest('form[name="client-form"]');
                let employee_id = $form.find('input[name="employee_id"]').val();
                if (employee_id === "") {
                    $('body,html').animate({
                        scrollTop: $element.find('.block-booking-information').offset().top
                    },500,"linear");
                    $.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-alert',
                        buttons: {
                            formSubmit: {
                                text: '<i class="icon-nb-close"></i>',
                                btnClass: 'btn-red',
                            }
                        }
                    });
                    return false;
                }
                let $recurring = $element.find('input[name="repeat"]:checked').val();
                let $date = $element.find('#start-date').val();
                let $time = $element.find('#start-time').val();
                let $start_date_recurring = $element.find('input[name="start_date_recurring"]').val();
                let $end_date_recurring = $element.find('input[name="end_date_recurring"]').val();
                let $start_time_recurring = $element.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 ==="" ){
                        $('body,html').animate({
                            scrollTop: $element.find('.select-time').offset().top
                        },500,"linear");
                        $.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-alert',
                            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 ==="" ){
                        $('body,html').animate({
                            scrollTop: $element.find('.select-time').offset().top
                        },500,"linear");
                        $.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-alert',
                            buttons: {
                                formSubmit: {
                                    text: '<i class="icon-nb-close"></i>',
                                    btnClass: 'btn-red',
                                }
                            }
                        });
                        return false;
                    }
                }
                if($recurring === "weekly"){
                    if(day_of_week.length === 0){
                        $('body,html').animate({
                            scrollTop: $element.find('.select-time').offset().top
                        },500,"linear");
                        $.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-alert',
                            buttons: {
                                formSubmit: {
                                    text: '<i class="icon-nb-close"></i>',
                                    btnClass: 'btn-red',
                                }
                            }
                        });
                        return false;
                    }
                }
                if($recurring === "monthly"){
                    if(day_of_month.length === 0){
                        $('body,html').animate({
                            scrollTop: $element.find('.select-time').offset().top
                        },500,"linear");
                        $.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-alert',
                            buttons: {
                                formSubmit: {
                                    text: '<i class="icon-nb-close"></i>',
                                    btnClass: 'btn-red',
                                }
                            }
                        });
                        return false;
                    }
                }
                if (!$form.valid()) {
                    $('body,html').animate({
                        scrollTop: $element.find('.wrapper-block-check-out').offset().top
                    },500,"linear");
                    return false;
                }
                $form.submit();
            });
            $element.find('form[name="reviewer-form"]').each(function (e) {
                $(this).validate({
                    ignore: ""
                });
            });
            $element.find('.btn-add-review').click(function (e) {
                let $form = $(this).closest('form[name="reviewer-form"]');
                $form.find('input[name="task"]').val('review.add_review_event');
                let rating_event = $form.find('input[name="rating_event"]').val();
                $form.submit();
            });



        };
        plugin.formatNumber = function (num) {
            return num.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,')
        };
        plugin.example_function = function () {
        };
        plugin.init();
    }
    $.fn.view_event_detail = function (options) {
        return this.each(function () {
            if (undefined == $(this).data('view_event_detail')) {
                let plugin = new $.view_event_detail(this, options);
                $(this).data('view_event_detail', plugin);
            }
        });
    }
})(jQuery);
