const container = document.getElementById('container')
const loading = document.getElementById("f-loading")
const btnSub = document.getElementById('btn-sub')
const phone = document.getElementById('phone')
const codmeli = document.getElementById("codmeli")
const errorPhone = document.getElementById("errorPhone")
const errorMeli = document.getElementById("errorMeli")
btnSub.style.width = phone.offsetWidth + 'px'

window.onload = function(){
    container.style.display = "block"
    loading.style.display = "none"
}

function changeType(){
    if(phone.value.length > 11){
        phone.value = phone.value.slice(0,11)
    }
    if(codmeli.value.length > 10){
        codmeli.value = codmeli.value.slice(0,10)
    }
    if(phone.value.length == "11" && codmeli.value.length == "10" && phone.value[0] + phone.value[1] == "09"){
        btnSub.setAttribute("type","submit")
    }else{
        btnSub.setAttribute("type","button")
    }
}

function erorHand(){

    if(phone.value.length != "11" || phone.value[0] + phone.value[1] != "09"){
        errorPhone.style.display = "block"
        btnSub.setAttribute("type","button")
    }else{
        errorPhone.style.display = "none"
    }

    if(codmeli.value.length != "10"){
        errorMeli.style.display = "block"
        btnSub.setAttribute("type","button")
    }else{
        errorMeli.style.display = "none"
    }
}

phone.addEventListener("input", changeType)
codmeli.addEventListener("input", changeType)
btnSub.addEventListener("click",erorHand)