var Booking = {
    _e: $('.get_schedule'),
    _tabs: null,
    _form: $('.ajax-form'),
    datePickerConfig: {
        format: 'dd/mm/yyyy',
        selectMonths: true,
        selectYears: 18,
        max: new Date()
    },
    setDatePicker: function () {
        var self = this;
        $('.date-picker').pickadate(self.datePickerConfig)
    },
    render: function (type, data) {
        var source = document.getElementById(type + "-template").innerHTML;
        return Handlebars.compile(source)(data);
    },
    reset: function () {
        var self = this;
        self._form[0].reset();
        $('.get_schedule').html('');
        $('#service_type_ajax').html('');
        self._e.html('');
        setTimeout(function () {
            $('.callout.success').hide();
        }, 5000);
    },
    reInitForm: function () {
        var self = this;
        Foundation.reInit('abide');
        self._form = $('.ajax-form');
        self._form.on('formvalid.zf.abide', function (ev, frm) {
            var url = ajax_object.wp_json + 'booking/v1/book';
            var btn = frm.find('[type="submit"]');
            self._form = frm;
            if (btn.hasClass('disabled')) {
                return;
            }


            var data = frm.serializeArray();


            btn.addClass('disabled');
            $.post(url, data).done(function (response) {
                if (response.success) {
                    $('.callout.success').show();
                    if (typeof callback == 'function') {
                        callback(response, data);
                    }

                    if (response.message) {
                        $('.success-msg').html(response.message)
                    }
                    self.reset();
                } else {
                    alert(response.message);
                }
                btn.removeClass('disabled');

            });
            ev.preventDefault();
        })
    },
    getPostData: function () {
        return this._form.serializeArray();
    },
    update: function(){
        this.setDatePicker();
    },
    init: function () {
        var self = this;


        self._form.on('submit', function (e) {
            e.preventDefault()
        });

        /*init form*/
        self.reInitForm();


        $("body").on('change', '[data-action="get_schedule"]', function (e) {
            var $this = $(this), option = $this.find(':selected'), json = option.attr('data-json'),
                terms_json = option.attr('data-terms'),
                type = $this.attr('data-type');
            self._e = $('.get_schedule');
            self._e.html('');


            if (json !== '') {

                var data = JSON.parse(json);
                var str = '';


                // $element.parents('.get_schedule__row thead').show();
                var tplData = {
                    data: data,
                    type: type
                };


                if (typeof terms_json !== 'undefined' && terms_json !== '') {
                    tplData.terms = JSON.parse(terms_json);
                }


                console.log(tplData)

                if (data) {
                    var html = self.render(type, tplData);
                    self._e.append(html);
                    self.reInitForm();
                    self.setDatePicker();

                }


            }
            e.preventDefault();
        });

        function checkBoxAction($checkbox) {
            if ($checkbox.is(':checked')) {
                $checkbox.prop("checked", false);
            } else {
                $checkbox.prop("checked", true);
            }
        }

        $("body").on('click', '.get_schedule__row .check', function (e) {
            let $checkbox = $(this).find('input[type="checkbox"]');

            checkBoxAction($checkbox)

            if ($checkbox.hasClass('type--full')) {
                $(this).parents('tr').find('input[type="checkbox"]').not('.type--full').prop('checked', $checkbox.prop('checked'));
            }

        })


        $("body").on('click', '#booking-tabs a:not(.add-more-new)', function (e) {
            $('#booking-tabs [aria-selected]').attr('aria-selected', false);
            $(this).attr('aria-selected', true);
            $('[data-tabs-content="booking-tabs"]').find('.tabs-panel.is-active').removeClass('is-active');
            $($(this).attr('href')).addClass('is-active');

            e.preventDefault();
        });
        $("body").on('click', '.fa-minus-circle', function (e) {
            var parent = $(this).parents('li'), id = parent.find('a').attr('href');
            parent.prev().find('a').trigger('click');
            $(id).remove();
            $(this).parents('li').remove();
            self.reInitForm();

        });
        $("body").on('click', '.add-more-new', function (e) {

            /*add tab content*/
            var cloned = $('.get_schedule .tabs-panel:last').removeClass('is-active').clone();
            var index = $('.get_schedule .tabs-panel').length + 1;
            for (var i = index; $('#child_' + i).length !== 0; i++){}
            index = i;

            var childIndex = 'child_' + index;

            cloned.find('input[type="text"],input[type="number"]').val('');
            cloned.find('input[type="checkbox"]').prop('checked', false);
            cloned.find('input').attr('name', function (i, name) {
                return name.replace('child_' + (index - 1), childIndex)
            });
            cloned.addClass('is-active').attr('id', childIndex);
            cloned.find('.select-swimming-level').attr('name', 'child['+childIndex+'][swimming_level]');
            $('.get_schedule .tabs-content').append(cloned);
            $('.get_schedule [aria-selected]').attr('aria-selected', false);
            $(this).parent().before('<li class="tabs-title">' +
                '<a href="#' + childIndex + '" aria-selected="true"><i class="fas fa-child"></i> Child ' + index + ' </a> <i class="fas fa-minus-circle"></i>' +
                '</li>');

            cloned.find('.date-picker').pickadate(self.datePickerConfig)
            self.reInitForm();


            e.preventDefault();
        });

        let get_schedule = $('[data-action="get_schedule"]');
        if (get_schedule.val() !== '') {
            get_schedule.trigger('change');
        }


    }
};