<script>

var _cc = [['سنگال', 221],['سوئد', 46],['سوئیس', 41],['سودان',249],['german',49],['USA', 1],['UK', 44],['iran', 98]]
var _oplist = [[0920, 'Rightel']]
var _person=[]
var _result= []
$(function(){
   $('#zipcode').focusout(function(){
        $('#zipcode').css('border', '2px solid rgba(145, 145, 145, 0.329)')
        for(i=0;i< _cc.length; i++){

            var temp= ''

            if(_cc[i][1] == Number($('#zipcode').val()) || _cc[i][0] == $('#zipcode').val()){

                temp = _cc[i][0]
                _result[0] = '(' + _cc[i][1] + ')' + _cc[i][0]
                break
            }
        }

        if(temp == ''){
            $('#zipcode').css('border', '2px solid red')
            _result[0]= null
            $('#operator').attr('disabled', 'disabled')



        }else{
            $('#zipcode').val(temp)
            $('#zipcode').css('border', '2px solid green')
            $('#operator').removeAttr('disabled')
            
        }

   })
//*********************** end zip code***************

$('#zipadd>section>button:first-of-type').click(function(){
        var temp=[]

        if(Number($('#zipadd>section>input:first-of-type').val()) > 9  && $('#zipadd>section>input:last-of-type').val() != '' && Number($('#zipadd>section>input:first-of-type').val()) != 0 ){
            temp[1]= Number($('#zipadd>section>input:first-of-type').val())
            temp[0]= $('#zipadd>section>input:last-of-type').val()
            _cc.push(temp)
            console.log(_cc)

            $('#zipadd>section>input:first-of-type').val(null)
            $('#zipadd>section>input:last-of-type').val(null)
            $('#zipadd>section>input:first-of-type').focus()


        }else{
            $('#invalid').fadeIn(300)
            $('#invalid').delay(1500).fadeOut(300)
        }
    })
 

// ***********************end zipp add*********************
    $('#op>nav>button').click(function(){

        $('#opadd').fadeIn(500)
        $('main').css('filter', 'blur(5px)')

    })
    $('#zipp>nav>button').click(function(){

        $('#zipadd').fadeIn(500)
        $('main').css('filter', 'blur(5px)')

        })

    $('#opadd>section>button:last-of-type').click(function(){
            $('#opadd').fadeOut(500)
            $('main').css('filter', 'none')
    })

    $('#zipadd>section>button:last-of-type').click(function(){
            $('#zipadd').fadeOut(500)
            $('main').css('filter', 'none')
    })

    $('#operator').focus(function(){
        $('#oplist').fadeIn(300)
    })
    $('#operator').focusout(function(){
        $('#oplist').fadeOut(300)
    })

// ***********add operator *************

    $('#opadd>section>button:first-of-type').click(function(){
        var temp=[]

        if(Number($('#opadd>section>input:first-of-type').val()) > 9  && $('#opadd>section>input:last-of-type').val() != '' && Number($('#opadd>section>input:first-of-type').val()) != 0 ){
            temp[0]= Number($('#opadd>section>input:first-of-type').val())
            temp[1]= $('#opadd>section>input:last-of-type').val()
            _oplist.push(temp)
            $('#opadd>section>input:first-of-type').val(null)
            $('#opadd>section>input:last-of-type').val(null)
            $('#opadd>section>input:first-of-type').focus()
            console.log(_oplist)



        }else{
            $('#invalid').fadeIn(300)
            $('#invalid').delay(1500).fadeOut(300)
        }
    })
 
//  ****************end add op***************

$('#operator').focusout(function(){
        $('#operator').css('border', '2px solid rgba(145, 145, 145, 0.329)')
        for(i=0;i< _oplist.length; i++){

            var temp= ''

            if(_oplist[i][0] == Number($('#operator').val()) || _oplist[i][1] == $('#operator').val()){

                temp = _oplist[i][1]
                _result[1] = _oplist[i][1]
                _result[2] = _oplist[i][0]
                break
            }
        }

        if(temp == '' || _oplist == 0){
            $('#operator').css('border', '2px solid red')
            _result[1]= null
            $('#phone').attr('disabled','disabled')



        }else{
            $('#operator').val(temp)
            $('#operator').css('border', '2px solid green')
            $('#phone').removeAttr('disabled')
        }

   })

// *****************end operator***************

$('#phone').focusout(function(){

    if($('#phone').val() != '' && Number($('#phone').val()) >= 0 && $('#phone').val().length >= 6){

        $('#phone').css('border', '2px solid green')
        $('#pname').removeAttr('disabled')

        if($('#phone').val().length < 11){
            _result[2] += $('#phone').val()
            _result[2] = Number(_result[2])

        }else{
            _result[2] = $('#phone').val()
            _result[2] = Number(_result[2])

        }

    }else{
        $('#phone').css('border', '2px solid red')
        _result[2]= null
        $('#pname').attr('disabled','disabled')


    }

})

// *********************end number input*******************

$('#pname').focusout(function(){

if($('#pname').val() != '' &&  $('#pname').val().length >= 3){

    $('#pname').css('border', '2px solid green')
    _result[3]= $('#pname').val()


}else{
    $('#pname').css('border', '2px solid red')
    _result[3]= null
}

})

// ********************end name input*********************


$('#verify').click(function(){

    $('#zipcode').focusout()
    $('#operator').focusout()
    $('#phone').focusout()
    $('#pname').focusout()
    
    if(_result[0] == null || _result[1] == null || _result[2] == null || _result[3] == null){

        $('#invalid').fadeIn(300)
        $('#invalid').delay(1500).fadeOut(300)
        $('#zipcode').val(null)
        $('#operator').val(null)
        $('#phone').val(null)
        $('#pname').val(null)
        $('#zipcode').focusout()
        $('#operator').focusout()
        $('#phone').focusout()
        $('#pname').focusout()
        $('#zipcode').focus()

        _result=[]
    }else{

        _person.push(_result)
        _result=[]
        $('#phone').val(null)
        $('#pname').val(null)
        $('#phone').focus()

        alert('registery succeccfull')
    }


})

//************************ end registery************************

$('#finish').click(function(){

    $('#add').fadeOut(300)
    $('#search').fadeIn(500)

})
$('#add-more').click(function(){

$('#search').fadeOut(300)
$('#add').fadeIn(500)

})

// ******************search part**************************

$('#searching').click(function(){

        console.log($('#regsearch').val())
        console.log(_person)
        for(i=0;i< _person.length; i++){

        if(_person[i][2] == Number($('#regsearch').val())){
            $('#register').text('this number is registered')
            $('#register').css('color', 'green')
            $('#info>h4:nth-of-type(1)>strong').text(_person[i][0])
            $('#info>h4:nth-of-type(2)>strong').text(_person[i][1])
            $('#info>h4:nth-of-type(3)>strong').text(_person[i][3])
            break
        }else{
            $('#register').text('this number is not registered')
            $('#register').css('color', 'red')
            $('#info>h4:nth-of-type(1)>strong').text('')
            $('#info>h4:nth-of-type(2)>strong').text('')
            $('#info>h4:nth-of-type(3)>strong').text('')

        }
    }


})


})


</script>

<body>
    <section id="invalid">
        <h2>invalid input</h2>
    </section>
    <section id="opadd">
        <section>
             <input type="text" placeholder="aperator number">
             <input type="text" placeholder="aperator name">
             <button>aDD</button>
             <button>finish</button>
        </section>
    </section>

    <section id="zipadd">
        <section>
             <input type="text" placeholder="zip code">
             <input type="text" placeholder="country ">
             <button>aDD</button>
             <button>finish</button>
        </section>
    </section>
    <main>
        
        <section id="add">
            <section>
                 <div id="zipp">
                       <nav>
                        <input type="text" placeholder="zip code" id="zipcode" >
                         <button><i class="fa fa-plus" aria-hidden="true"></i></button>
                        </nav>
                
                 </div>
                 <div id="op">
                    <nav>
                    <input type="text" placeholder="operator" id="operator" disabled>
                    <button><i class="fa fa-plus" aria-hidden="true"></i></button>
                    <ul id="oplist">
                    </ul>
                    </nav>
                
                </div>
                <input type="text" placeholder="phone number" id="phone" disabled>
                 <input type="text" placeholder="name" id="pname" disabled>

                <button id="verify">add number</button>
                <button id="finish">finish</button>
            </section>
        </section>             

        <section id="search">
            <section>
                 <input type="text" placeholder="enter number" id="regsearch">
                 <button id="searching">search</button>
                 <button id="add-more">add more</button>
                 <section id="info">
                      <h3 id="register"></h3>
                      <h4>country: <strong></strong></h4>
                      <h4>operator: <strong></strong></h4>
                       <h4>registered name: <strong></strong></h4>
                 </section>
             </section>
        </section>

        <section id="checklist"></section>



    </main>

</body>

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
main{
    width: 100%;
    height: 100vh;
    float: left;
    background-image: url(../img/bg.jpeg);
    background-size: cover;
    background-position: center;
    position: relative;

}
#invalid{
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.699);
    position: absolute;
    display: none;
    z-index: 1001;
}
#invalid>h2{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: red;
    font-size: 30px;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    text-transform: uppercase;
}

#opadd, #zipadd{
    width: 300px;
    height: 300px;
    position: absolute;
    left: calc(50% - 150px);
    top: calc(50% - 150px);
    background-color: rgba(133, 10, 10, 0.692);
    border-radius: 6px;
    z-index: 100;
    display: none;

}
#opadd>section, #zipadd>section{
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    align-content: center;
}

#add, #search{
    width: 450px;
    height: 350px;
    position: absolute;
    left: calc(50% - 225px);
    top: calc(50vh - 175px);
    background-color: rgba(66, 123, 209, 0.781);
    border-radius: 6px;
    box-shadow: 0 0 10px 3px rgb(0, 0, 0);


}
#add>section, #search>section{
    width: 100%;
    height: 100%;
    display: flex;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-content: space-around;
    border-radius: 6px;

}


::placeholder{
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    text-transform: capitalize;
    color: whitesmoke;
}

#add>section>input, #op>nav>input, #opadd>section>input, #search>section>input, #zipp>nav>input, #zipadd>section>input{
    width: 180px;
    height: 30px;
    border: 2px solid rgba(145, 145, 145, 0.329);
    background-color: rgba(255, 255, 255, 0);
    padding: 0 5px;
    color: whitesmoke;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    text-transform: capitalize;
    transition: .4s;
    -webkit-transition: .4s;
    -moz-transition: .4s;
    -ms-transition: .4s;
    -o-transition: .4s;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;

}

#add>section>input:focus, #zipp>nav>input:focus, #op>nav>input:focus, #opadd>section>input:focus, #search>section>input:focus, #zipadd>section>input:focus{
    border: 2px solid rgb(233, 233, 233);

}


#op, #zipp{
    width: 120px;
    height: 30px;
    display: flex;
    flex-wrap: wrap;
}
#op>nav, #zipp>nav{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    position: relative;

}
#op>nav>input, #zipp>nav>input{
    width: 65%;

}

#oplist{
    width: 87%;
    max-height: 100px;
    position: absolute;
    overflow-y: scroll;
    top: 100%;
    display: none;

}
#oplist>li{
    width: 100%;
    height: 25px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: center;
    color: whitesmoke;
    text-transform: capitalize;
    font-size: 13px;
    list-style: none;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    border-bottom: 1px solid rgba(255, 255, 255, 0.616);
}

#add>section>button, #op>nav>button, #opadd>section>button, #search>section>button, #zipp>nav>button, #zipadd>section>button{
    width: 115px;
    height: 35px;
    border-radius: 3px;
    border: 2px solid rgba(255, 255, 255, 0.568);
    text-transform: capitalize;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 16px;
    cursor: pointer;
    background-color: rgba(255, 255, 255, 0);
    color: white;
    line-height: 35px;
    transition: .4s;
    -webkit-transition: .4s;
    -moz-transition: .4s;
    -ms-transition: .4s;
    -o-transition: .4s;
    font-weight: 550;
}
#add>section>button:hover, #op>nav>button:hover,#search>section>button:hover, #zipp>nav>button:hover{
    color: rgba(66, 123, 209, 0.781);
    background-color: #fff;
}
#opadd>section>button:hover, #zipadd>section>button:hover{
    color: rgba(133, 10, 10, 0.692);
    background-color: #fff;


}
#search>section>button:hover{
    color: rgba(7, 94, 100, 0.815);
}

#op>nav>button, #zipp>nav>button{
    width: 20%;
    border-radius: 2px;
    line-height: 30px;
    height: 30px;
    margin-left: 3px;
    
}

#search{
    display: none;
    background-color: rgba(7, 94, 100, 0.815);
    flex-direction: column;
    align-items: center;
}

#info{
    width: 100%;
    height: 40%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-content: space-around;
    padding: 10px;
}
#info>*{
    color: whitesmoke;
    text-transform: uppercase;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;

}
#info>h4>strong{
    color: yellowgreen;
    margin-left: 10px;
}