'use strict';


// inputPhone('.form-input__phone', '.form-input-phone__icon', '.form-input-phone__code', '.form-input-phone__input', '.form-input-phone__list', 'form-input-phone-list__item', '.form-input-phone-list-item__icon', '.form-input-phone-list-item__code', 'form-input-phone-list__search');

// function inputPhone(main, mainFlag, mainCode, input, list, selects, selectIcon, selectCode, searchInput) {
//     let inputs = document.querySelectorAll(main);

//     inputs.forEach(e => {
//         let thisMainFlag = e.querySelector(mainFlag), 
//             thisMainCode  = e.querySelector(mainCode),
//             thisInput  = e.querySelector(input),
//             thisList  = e.querySelector(list),
//             thisSelects  = e.querySelectorAll(`.${selects}`),
//             thisSearchInput = e.querySelector(`.${searchInput}`);

//         thisInput.onblur = function (input) {
//             if (!(input.relatedTarget != null && (input.relatedTarget.classList.contains(searchInput) || input.relatedTarget.classList.contains(selects)))) {
//                 thisList.classList.remove('active');                 
//             }
//         }

//         e.onclick = function (event) {
//             if (!event.target.classList.contains(searchInput)) {
//                 if (thisList.classList.contains('active')) {
//                     thisList.classList.remove('active');
//                 }

//                 thisInput.focus();
//                 thisList.classList.add('active');
//             }
//         }

//         thisSelects.forEach(e => {
//             let newIcon = e.querySelector(selectIcon),
//                 newCode = e.querySelector(selectCode);

//             e.onclick = function (event) {
//                 event.preventDefault();
//                 thisMainFlag.style.cssText = `background-image:url("${newIcon.src}");`;
//                 thisMainCode.textContent = newCode.textContent;
                

//                 setTimeout(() => {
//                     thisList.classList.remove('active');
//                 }, 0);
//             }
            
//         })
//     })
// }

if (document.querySelector('.form-input-phone__input')) {
    checkPhone('.form-input-phone__input');
}

function checkPhone(input) {
    document.querySelector(input).addEventListener('input', function(event) {
        let text = event.target.value;
        let length = text.length;
        let newSymbol = event.data;

        if (!(/^\d+$/.test(text.replaceAll(' ', '')))) {
            event.target.value = text.slice(0, -1);
            return;
        }

        if (length == 4 || length == 8) {
            if (newSymbol != null) {
                event.target.value = text.slice(0, -1) + ' ' + newSymbol;
            }
        }
    })
}

inputTabs('.form-input__tabs', '.form-input-tabs__button');
inputTabs('.modal-map__control', '.modal-map-control__item');

function inputTabs(main, button) {
    let mains = document.querySelectorAll(main);

    mains.forEach(main => {
        let buttons = main.querySelectorAll(button);

        buttons.forEach(button => {
            button.onclick = function () {
                main.querySelector('.active').classList.remove('active');

                button.classList.add('active');
            }
        })
        
    })
}


// inputRadio('.form-input__radio', '.form-input-radio__item', '.form-input-radio__title', '.form-input-radio__input')

// function inputRadio(main ,item, textClass, input) {
//     let inputRadios = document.querySelectorAll(main);

//     inputRadios.forEach(inputRadio => {
//         let items = inputRadio.querySelectorAll(item),
//             thisInput = inputRadio.querySelector(input);

//         items.forEach(radio => {
//             let thisText = radio.querySelector(textClass).textContent;

//             radio.onclick = function (event) {
//                 event.preventDefault();

//                 if (inputRadio.querySelector(`${item}.active`)) {
//                     inputRadio.querySelector(`${item}.active`).classList.remove('active');
//                 }
//                 thisInput.value = thisText;
//                 radio.classList.add('active');
//             }
//         })
//     })
// }

// listInputRadio('.form-input__list' ,'.form-input-list__item', '.form-input-list-item__text', '.form-input-list__content', '.form-input-list__block-content');

// function listInputRadio(main ,item, textClass, input, content, block) {
//     let listInputRadios = document.querySelectorAll(main);

//     listInputRadios.forEach(listInputRadio => {
//         let thisInput = listInputRadio.querySelector(input),
//             items = listInputRadio.querySelectorAll(item),
//             thisContent = listInputRadio.querySelector(content),
//             thisBlock = listInputRadio.querySelector(block);

//         // thisInput.onclick = function () {
//         //     thisBlock.classList.add('active');
//         //     thisBlock.style.height = '192px';
//         // }


//         // thisInput.onblur = function(){
//         //     thisBlock.classList.remove('active');
//         //     thisBlock.style.height = '0px';
//         // };

//         items.forEach(item => {
//             item.onclick = function (event) {
//                 event.preventDefault();
//                 let newText = item.querySelector(textClass).textContent;

//                 thisInput.value = newText;
                
//                 if (thisContent.querySelector('.active')) {
//                     thisContent.querySelector('.active').classList.remove('active');
//                 }

//                 item.classList.add('active');
//             }
//         })
//     })
// }


// remoteControl('.form-input__remote-control', '.form-input-tabs__button');
// remoteControl('.modal-map__control', '.modal-map-control__item');

// function remoteControl(main, button) {
//     let mains = document.querySelectorAll(main);

//     console.log(mains);
    

//     mains.forEach(main => {
//         let subjectClass = main.dataset.content,
//             subject  = document.querySelector(`.${subjectClass}`),
//             buttons = Array.from(main.querySelectorAll(button));

            

//         main.addEventListener('mousedown', function (eventMain) {
//             setTimeout(() => {
//                 let indexActive = buttons.findIndex((button, index) => {
//                     if (button.classList.contains('active')) {
//                         return true;
//                     }
//                 });                

//                 subject.querySelector('.remote-control__item.active').classList.remove('active');
//                 subject.children[indexActive].classList.add('active');
//             }, 0);
//         })
//     })
// }

// formCheck('.modal-form__content', 'input[type=submit]');
// formCheck('.modal-map__form', 'input[type=submit]');

// function formCheck(form, submit) {
//     let forms = document.querySelectorAll(form);

//     forms.forEach(form => {
//         let thisSubmit = form.querySelector(submit);

//         thisSubmit.onclick = function () {
//             form.classList.add('check')
//         }
        
//     })
// }


jQuery('.form-input-list__item').on('click', function(){
    var value = jQuery(this).find('p').html()
    var content = jQuery(this).closest('.form-input-list__block-content')
    jQuery(content).prev().html(value)
    jQuery(content).removeClass('active').css('height', '0px')
})

jQuery('.form-input-list__input').on('click', function(){
    // jQuery(this).next().toggleClass('active')
    if(!jQuery(this).next().hasClass('active')){
        jQuery('.form-input-list__block-content').removeClass('active').css('height', '0px')
        jQuery(this).next().css('height', '192px').addClass('active')
    }
    else{
        jQuery(this).next().css('height', '0px').removeClass('active')
    }
    
})

jQuery(document).mouseup(function(e){
    var container = jQuery(".modal-form-content-line__element");
    if(!container.is(e.target) && container.has(e.target).length === 0){
        jQuery('.form-input-list__block-content').removeClass('active').css('height', '0px')
    }
  });



    
        jQuery('#add-pet-form').on('submit', function(e) {
            e.preventDefault(); // предотвращаем стандартное поведение формы
            var data = jQuery(this).serialize()
            jQuery(this).find('button[type="submit"]').addClass('loading').attr('disabled', true)
            jQuery.ajax({
                type: 'POST',
                url: woocommerce_params.ajax_url,
                data: data, // отправляем данные формы
                complete: function(response) {
                    location.reload(true)
                }
            });
        });

        jQuery('.edit-pet-form').on('submit', function(e) {
            e.preventDefault(); // предотвращаем стандартное поведение формы
            var data = jQuery(this).serialize()
            jQuery(this).find('button[type="submit"]').addClass('loading').attr('disabled', true)
            jQuery.ajax({
                type: 'POST',
                url: woocommerce_params.ajax_url,
                data: data, // отправляем данные формы
                complete: function(response) {
                    location.reload(true)
                }
            });
        });
        jQuery('.form-input-list__item').on('click', function(){
            jQuery(this).closest('.form-input-list__content').find('.form-input-list__item').removeClass('active')
            jQuery(this).addClass('active')
        })
        jQuery('.form-input-radio__item').on('click', function(){
            jQuery(this).closest('.form-input__radio').find('.form-input-radio__item').removeClass('active')
            jQuery(this).addClass('active')
        })


        jQuery('.cabinet-card__block-add-pets').on('click', function(){
           
            jQuery('#pet_add_form').addClass('active')
        })
// jQuery('#pet-form-submit').on('click', function(e) {
//     jQuery(this).closest('form').submit()
// });


jQuery('.popup-wrap, .modal-form__close, .modal-form__button-close').on('click', function(e){
    if (e.target == this){
        jQuery(this).closest('.modalProfile').removeClass('active')
    }
  })
  jQuery('.close-btn').on('click', function(e){
    jQuery(this).closest('.modalProfile').removeClass('active')
  })

  jQuery('input[name="pet"]').on('change', function(
    
  ){
    var block = jQuery(this).closest('form').find('.sterilized')
    if (jQuery(this).val() == 'cat'){
        jQuery(block).show()
        jQuery(this).closest('form').find('input[name="sterilized"]').attr('required', true)
    }
    else{
        jQuery(block).hide()
        jQuery(this).closest('form').find('input[name="sterilized"]').attr('required', false)
    }
  })


  jQuery('[data-edit]').on('click', function(){
    jQuery('#pet_edit_'+jQuery(this).data('edit')).addClass('active')
  })



//   const reset = () => {
//     input.classList.remove("error");
//     errorMsg.innerHTML = "";
//     errorMsg.classList.add("hide");
//     validMsg.classList.add("hide");
//   };
  
//   const showError = (msg) => {
//     input.classList.add("error");
//     errorMsg.innerHTML = msg;
//     errorMsg.classList.remove("hide");
//   };


jQuery('.user-edit-form').on('submit', function(e) {
    e.preventDefault(); // предотвращаем стандартное поведение формы
    jQuery('.form-input__phone').removeClass('error')


        var data = jQuery(this).serialize()
        jQuery(this).find('button[type="submit"]').addClass('loading').attr('disabled', true)
        jQuery.ajax({
            type: 'POST',
            url: woocommerce_params.ajax_url,
            data: data, // отправляем данные формы
            complete: function(response) {
                location.reload(true)
            }
        });
    

});

jQuery('.email_approve_form, .foodSub').on('submit', function(e) {
    e.preventDefault(); // предотвращаем стандартное поведение формы
    var data = jQuery(this).serialize()
    jQuery(this).find('button[type="submit"]').addClass('loading').attr('disabled', true)
    jQuery.ajax({
        type: 'POST',
        url: woocommerce_params.ajax_url,
        data: data, // отправляем данные формы
        complete: function(response) {
            location.reload(true)
        }
    });
});

jQuery('.user-edit-open').on('click', function(){
    jQuery('#user_edit').addClass('active')
})

jQuery('[data-rm]').on('click', function(){
    var rm  = jQuery(this).closest('.rm')
    jQuery(rm).find('[data-rmcont]').removeClass('active').find('input').attr('required', false)
    jQuery(rm).find('[data-rmcont="'  + jQuery(this).data('rm') +  '"]').addClass('active').find('input').attr('required', true)
})


jQuery('.form-sub__btn').on('click', function(){
    jQuery('#subForm').addClass('active')
})