///////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////
/////////////////////////// Programacion de pagina web "Servicio de Ventas de Software" ///////////////////////////
///////////////////////////////////// Autor: Francisco Xavier Bermello López //////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////
window.addEventListener('load', function(){
    var usuarios = [["JUNIORCEDE","[email protected]","asde"]];
    var pos=0;
    var login = false;
    var array=[];
    var elementosyaescogidos=[];
    var agregar=0;
    var debes=0;
    var numero=0;

    ///////////////////////////////////////////////////////////////////////////////////////
    //////////////////////// Redirigir a la pagina de registro ////////////////////////////
    ///////////////////////////////////////////////////////////////////////////////////////
    document.querySelector('#registro').addEventListener('click', iniciaregistro);
    function iniciaregistro(){
            [].forEach.call(document.querySelectorAll('.paginas'), function(elemento){
                document.querySelector("#pagina"+elemento.id).style.display = 'none';
                document.querySelector('#co'+elemento.id).style.backgroundColor = "transparent";
            });

             [].forEach.call(document.querySelectorAll('.PB'), function(elemento){
                 if (document.querySelector("#pag"+elemento.id).style.display == 'block') {
                    document.querySelector("#pag"+elemento.id).style.display = 'none';
                 };
             });

            if (document.querySelector("#paginasinregistro").style.display == 'block') {
                    document.querySelector("#paginasinregistro").style.display = 'none';
                 };
            if (document.querySelector("#paginaregistro").style.display == 'block') {
                    document.querySelector("#paginaregistro").style.display = 'none';
                 };
        document.querySelector('#carga').style.display = 'block';
        setTimeout(function(){
        document.querySelector('#carga').style.display = 'none';
        document.querySelector('#paginaregistro').style.display = 'block';},2000);
    }
    ///////////////////////////////////////////////////////////////////////////////////////
    ///////////////////////////////////////////////////////////////////////////////////////

    ///////////////////////////////////////////////////////////////////////////////////////
    ///////////////////////////////////// Registro ////////////////////////////////////////
    ///////////////////////////////////////////////////////////////////////////////////////
    document.querySelector('#registrar').addEventListener('click', registrar);
    function registrar(){
        var registro=true
        var user = document.querySelector('#usuario').value;
        var pass = document.querySelector('#contraseña').value;
        var pass2 = document.querySelector('#repitecontraseña').value;
        var correo = document.querySelector('#correo').value;
        if (user!=""&&pass!=" "&&pass2!=""&&correo!=""&&pass==pass2) {
            for (var i = 0; i < usuarios.length; i++) {
                if (user==usuarios[i][0]||correo==usuarios[i][1]) {
                    registro=false
                }
            }
            if (registro == true) {
                usuarios[pos]=[user,correo,pass]
                pos++
                alert("Usuario Registrado con exito\nTu usuario registrado es: "+user+" Y tu contraseña es: "+pass);
                 [].forEach.call(document.querySelectorAll('.PB'), function(elemento){
                         if (document.querySelector("#pag"+elemento.id).style.display == 'block') {
                            document.querySelector("#pag"+elemento.id).style.display = 'none';
                         };
                     });

                    [].forEach.call(document.querySelectorAll('.paginas'), function(elemento){
                        document.querySelector("#pagina"+elemento.id).style.display = 'none';
                        document.querySelector('#co'+elemento.id).style.backgroundColor = "transparent";
                    });
                    document.querySelector('#paginaregistro').style.display = 'none';
                    document.querySelector('#carga').style.display = 'block';
                    setTimeout(function(){
                        document.querySelector("#pagina1").style.display = 'block';
                        document.querySelector('#co1').style.backgroundColor = "#0cede1";
                        document.querySelector('#carga').style.display = 'none';
                    },2000)
            }
            else {
                document.querySelector('#lerror').innerHTML="<b>El nombre de usuario ya exciste en nuestra base de datos</b>"
            }
        }
        else if (user==""||pass==""||pass2==""||correo=="") {
                document.querySelector('#lerror').innerHTML="<b>Por favor rellene todos los campos</b>"
            }
        else if (user!=""&&correo!=""&&pass!=pass2) {
            document.querySelector('#lerror').innerHTML="<b>Las contraseñas no coinciden</b>"
        };
    }
    ///////////////////////////////////////////////////////////////////////////////////////
    ///////////////////////////////////////////////////////////////////////////////////////

    ///////////////////////////////////////////////////////////////////////////////////////
    /////////////////////////////////////// Login /////////////////////////////////////////
    ///////////////////////////////////////////////////////////////////////////////////////
    document.querySelector('#log').addEventListener('click', logear);
    function logear() {
        var noex = false;
        var user = document.querySelector('#nombre').value;
        var pass = document.querySelector('#pass').value;
            for (var i = 0; i <usuarios.length; i++) {
                if ((usuarios[i][0] == user||usuarios[i][1]==user)&& usuarios[i][2] == pass) {
                    login=true
                }
                else {
                    noex=true;
                };
                if ((usuarios[i][0] == user||usuarios[i][1]==user)&& usuarios[i][2] != pass) {
                    noex=false;
                    login=false;
                };
            }
            if (noex==false) {
                if(login==true){
                    alert("Ingresaste correctamente a tu cuenta");
                    document.querySelector('#mostrarcompra').style.display = 'block';
                    document.querySelector('#login').style.display = 'none';
                    document.querySelector('#paginaregistro').style.display = 'none';
                    [].forEach.call(document.querySelectorAll('.PB'), function(elemento){
                         if (document.querySelector("#pag"+elemento.id).style.display == 'block') {
                            document.querySelector("#pag"+elemento.id).style.display = 'none';
                         };
                     });

                    [].forEach.call(document.querySelectorAll('.paginas'), function(elemento){
                        document.querySelector("#pagina"+elemento.id).style.display = 'none';
                        document.querySelector('#co'+elemento.id).style.backgroundColor = "transparent";
                    });

                    if (document.querySelector("#paginasinregistro").style.display == 'block') {
                            document.querySelector("#paginasinregistro").style.display = 'none';
                         };
                    document.querySelector('#carga').style.display = 'block';
                    setTimeout(function(){
                        document.querySelector("#pagina1").style.display = 'block';
                        document.querySelector('#co1').style.backgroundColor = "#0cede1";
                        document.querySelector('#carga').style.display = 'none';
                    },2000)
                }
                else {
                    document.querySelector("#textlogin").style.visibility="visible"
                    document.querySelector("#textlogin").innerHTML="<b>La contraseña no es correcta</b>";
                }
            }
            else{
                document.querySelector("#textlogin").style.visibility="visible"
                document.querySelector("#textlogin").innerHTML="<b>Este usuario no existe en nuestra base de datos</b>";
            }
    }
    ///////////////////////////////////////////////////////////////////////////////////////
    ///////////////////////////////////////////////////////////////////////////////////////

    ///////////////////////////////////////////////////////////////////////////////////////
    /////////////////////////// Navegacion de paginas seccion /////////////////////////////
    ///////////////////////////////////////////////////////////////////////////////////////
    [].forEach.call(document.querySelectorAll('.paginas'), function(elemento){
        elemento.addEventListener('click', function(){

            [].forEach.call(document.querySelectorAll('.paginas'), function(elemento){
                    document.querySelector("#pagina"+elemento.id).style.display = 'none';
                document.querySelector('#co'+elemento.id).style.backgroundColor = "transparent";
            });

             [].forEach.call(document.querySelectorAll('.PB'), function(elemento){
                 if (document.querySelector("#pag"+elemento.id).style.display == 'block') {
                    document.querySelector("#pag"+elemento.id).style.display = 'none';
                 };
             })

            if (document.querySelector("#paginaregistro").style.display == 'block') {
                    document.querySelector("#paginaregistro").style.display = 'none';
                };
            if (document.querySelector("#paginasinregistro").style.display == 'block') {
                    document.querySelector("#paginasinregistro").style.display = 'none';
                 };
            document.querySelector('#carga').style.display = 'block';
            document.querySelector('#co'+elemento.id).style.backgroundColor = "#0cede1";
            setTimeout(function(){
            document.querySelector('#carga').style.display = 'none';
            if (login==true) {
            document.querySelector('#pagina'+elemento.id).style.display = 'block';}
            else{
                if (elemento.id=="1") {
                    document.querySelector('#pagina'+elemento.id).style.display = 'block';
                }
                else{
                document.querySelector("#paginasinregistro").style.display = 'block';}
            }

            },2000);
        });
    });
    ///////////////////////////////////////////////////////////////////////////////////////
    ///////////////////////////////////////////////////////////////////////////////////////

    ///////////////////////////////////////////////////////////////////////////////////////
    ///////////////////////// Mostrar subpaginas de cada seccion //////////////////////////
    ///////////////////////////////////////////////////////////////////////////////////////
    [].forEach.call(document.querySelectorAll('.PB'), function(elemento){
        elemento.addEventListener('click', function(){
            [].forEach.call(document.querySelectorAll('.paginas'), function(elemento){
                document.querySelector("#pagina"+elemento.id).style.display = 'none';
            });
            document.querySelector('#carga').style.display = 'block';
            setTimeout(function(){
            document.querySelector('#carga').style.display = 'none';
            document.querySelector("#pag"+elemento.id).style.display = 'block';},2000);
        });
    });
    ///////////////////////////////////////////////////////////////////////////////////////
    ///////////////////////////////////////////////////////////////////////////////////////

    ///////////////////////////////////////////////////////////////////////////////////////
    //////////////////////// Mostrar y ocultar la barra de compras ////////////////////////
    ///////////////////////////////////////////////////////////////////////////////////////
    document.querySelector('#mostrarcompra').addEventListener('click',abrircompra);
    function abrircompra(){
        if (document.querySelector('#barrasdecompras').style.display=="block") {
            document.querySelector('#mostrarcompra').value="Presiona aqui para mostrar la lista de compras"
            document.querySelector('#barrasdecompras').style.display="none";
        }
        else{
            document.querySelector('#mostrarcompra').value="Presiona aqui para ocultar la lista de compras"
            document.querySelector('#barrasdecompras').style.display="block";
        }
    }
    ///////////////////////////////////////////////////////////////////////////////////////
    ///////////////////////////////////////////////////////////////////////////////////////

    ///////////////////////////////////////////////////////////////////////////////////////
    ///////////////////////// Agregar items a la barra de compras /////////////////////////
    ///////////////////////////////////////////////////////////////////////////////////////
    [].forEach.call(document.querySelectorAll('.ficha'), function(elemento){
        elemento.addEventListener('click', function(){
            var elementorepetido=false
            for (var i = 0; i < array.length; i++) {
                if (elemento.name==array[i][0]) {
                    elementorepetido=true
                    alert("Ya seleccionaste este programa")
                }
            }
            if (elementorepetido==false) {
                console.log("elemento agrgado")
                array[agregar]=[elemento.name,elemento.id,elemento.value]
                agregar++
                for (var i = 0; i < array.length; i++) {
                    if (elementosyaescogidos[i]!=array[i][0]) {
                    document.querySelector("#barrasdecompras").innerHTML += "<br>"+'<img class="aloh" src='+array[i][1]+">"+"<br>"+array[i][0]+"  $"+array[i][2]
                    elementosyaescogidos[i]=array[i][0]
                    numero+=parseFloat(array[i][2])
                    debes=numero.toFixed(2)
                    };
                };
            };
        });
    });
    ///////////////////////////////////////////////////////////////////////////////////////
    ///////////////////////////////////////////////////////////////////////////////////////

});