


$(".calendario").on("scroll", function(){
    var left = $(this).scrollLeft();
    $(".calendario-left").css("left", left);
    var top = $(this).scrollTop();
    $(".calendario-top").css("top", top);
});

var casillaSelect = null;
var casillaFinal = null;
var elementsEventActive=null;
var reservaActual = null;



function initReserva(elemento, maxDist, minDist=1){                       //permite crear una reserva con un máximo de maxDistancia
    toggleNewOrSelect(true);
    $(".nueva-reserva").remove();
    casillaSelect = elemento;
    elemento.addClass("active");
    console.log("ninguno");
    elementsEventActive = new Array();
    reservaActual = elemento.append("<div class='nueva-reserva'> </div>").children(".nueva-reserva");
    var row = elemento.parent();
    if(elemento.attr("data-reserva") != "next"){
        for(var i = 1; i < maxDist+1; i++){
            var element = row.children().eq( elemento.index() + i );
            if(!element.hasClass("disabled") && element.attr("data-reserva") != "prev"){
                if(i < minDist) continue;
                elementsEventActive.push(element);
                element.addClass("selectable");
                element.on("mouseenter", function(){
                    casillaFinal = $(this);
                    var width = ($(this).index() - casillaSelect.index()) * 100;
                    reservaActual.css({"left" : "50%", "right" : "unset", "width" : width + "%"});
                });
            }else{
                break; //rompe el bucle para impedir que se puedan montar reservas unas encima de otras
            }
        }
    }
    if(elemento.attr("data-reserva") != "prev")
    for(var i =  1; i < maxDist+1; i++){
        var element = row.children().eq(elemento.index() - i);
        if(!element.hasClass("disabled") && elemento.index() - i >= 0 && element.attr("data-reserva") != "next"){
            if(i < minDist) continue;
            elementsEventActive.push(element);
            element.addClass("selectable");
            element.on("mouseenter", function(){
                casillaFinal = $(this);
                var width = (casillaSelect.index() - $(this).index()) * 100;
                reservaActual.css({"right" : "50%", "left" : "unset", "width": width + "%"});
            });
        }else{
            break;    //rompe el bucle para impedir que se puedan montar reservas unas encima de otras
        }
    }
}
function vaciarEventActive(){
    if(elementsEventActive==null) return;
    elementsEventActive.forEach(function(element){
        element.off("mouseenter");
        element.removeClass("selectable");
    });
}


function crearReserva(fecha, horaInicio, horaFinal, pista, apellidos, id){                              
    // console.log(fecha + "  " + horaInicio + "  " + horaFinal + "  " + pista + "  " + apellidos);
    var fechaoffset = 0;

    $(".row-dias").children().each(function(){
        if($(this).attr("data-reserva") == fecha){
            fechaoffset = parseInt( $(this).index()/2);
        }
    });

    var numero = fechaoffset*31 + (parseInt(horaInicio.split(":")[0]) - 8)*2 + (horaInicio.split(":")[1] == "30" ? 1 : 0) -1;
    var horas = fechaoffset*31 + (parseInt(horaFinal.split(":")[0]) - 8)*2 + (horaFinal.split(":")[1] == "30" ? 1 : 0) -1 - numero;
    var elementoInicial = $(".pista"+pista).children().eq(numero);
    if(elementoInicial.attr("data-reserva") == "prev"){
        elementoInicial.addClass("disabled");
    }else{
        elementoInicial.attr("data-reserva", "next");
    }
    reserva = elementoInicial.append("<div class='reserva' data-reserva="+id+"><p>"+ apellidos +"</p></div>").children(".reserva").css({"width": 100*horas + "%"});
    var today = new Date();
        
    if($_GET.modo != "bloquear" && apellidos != "Bloqueo"){
        reservaClickEvent(reserva);
        
    }else if($_GET.modo == "bloquear" && apellidos == "Bloqueo"){
        reservaClickEvent(reserva);
    }else{
        reserva.addClass("unselectable");
    }
    
    for (var i = 1; i < horas; i++){
        $(".pista"+pista).children().eq(numero + i).addClass("disabled");
    }
    if($(".pista"+pista).children().eq(numero + horas+1).hasClass("disabled"))
            $(".pista"+pista).children().eq(numero + horas).addClass("disabled");
    $(".pista"+pista).children().eq(numero+horas).attr("data-reserva", "prev");
}



function nuevaReserva(){                //rellena el formulario con la info
    $.ajax({
        type: "GET",
        url: "php/funcionesAjax.php",
        typedata: "html",
        data: {new_reserva : 1}
    })
    .done(function(result){
        $("#id").val("#" + result);
    });

    if(casillaSelect.index() > casillaFinal.index()){           //intercambia casillaSelect y casillaFinal
        
        var casProv = casillaSelect;
        casillaSelect = casillaFinal;
        casillaFinal = casProv;
    }

    
    var hora = indexToHour(casillaSelect.index());


    
    var fecha = $(".row-dias .celda").eq(parseInt(casillaFinal.index()/31)*2 + 1 ).attr("data-reserva");
    var pista = casillaSelect.parent().attr("data-pista");
    $(".reserva-group input").val('');
    $(".crear-reserva-form .fecha").val(fecha);
    $(".crear-reserva-form .hora-inicio").val(hora);
    $(".crear-reserva-form .pista").val(pista);

    var hora = indexToHour(casillaFinal.index());
    $(".crear-reserva-form .hora-fin").val(hora);
}

function indexToHour(index){
    var horae = (index - parseInt(index/31) * 31)+1;
    var hora = ("0" + Math.floor(horae/2 + 8)).slice(-2) + ((horae)%2 == 1 ? ":30" : ":00");
    console.log(horae);
    return hora;
}
function searchUser(apellido){
    $.ajax({
        type: "GET",
        url: "php/funcionesAjax.php",
        typedata: "html",
        data: {apellido : apellido, liga : ($_GET["modo"] == "reservarl")  }
    })
    .done(function(result){      
        console.log($_GET["modo"] == "reservarl");
        
                   console.log(result);
                   
        $(".select-users tbody *").remove();
        var userArray = $.parseJSON(result);
        var html = "";
        userArray.forEach(element => {
            html+= "<tr>";
            html+= "<td class='user-select-nombre'>"+ element["nombre"] +"</td>";
            html+= "<td class='user-select-apellidos'>"+ element["apellidos"] +"</td>";
            html+= "<td class='user-select-user'>"+ element["user"] +"</td>";
            html+= "</tr>";
        });


        $(".select-users tbody").html(html);
        $(".select-users tbody tr").on("click", function(){

            selectUser($(this));
        })
    });
}
function selectUser(row){
    row.addClass("selected");
    setTimeout(function(){
        row.removeClass("selected");
    }, 500);
    $("#apellidos").val( row.children(".user-select-apellidos").text());
    $("#nombre").text( row.children(".user-select-nombre").text());
    $("#user1").val( row.children(".user-select-user").text()).parent().children("p").text(row.children(".user-select-user").text());
    ajaxRequest("php/funcionesAjax.php", {"getUserInfo" : 1, "id" : row.children(".user-select-user").text()}, function(result){
        console.log(result);
        var datos = JSON.parse(result);
        
        $("#tel").text( datos.tel);
        $("#email").text(datos.email);
        $("#fecha_registro").text(datos.fecha_ingreso);
        if(datos.tipo == "S"){            
            $("#strikes").text(datos.strikes);
            $("#strikes").parent().removeClass("d-none");
            $("#bonos").text(datos.bonos);
            $("#bonos").parent().removeClass("d-none");
        }else{
            $("#bonos").parent().addClass("d-none");
            $("#strikes").parent().addClass("d-none");
        }

    });    
}
$("#apellidos").on("keyup", function(){
    console.log($(this).val());
    $(".select-users").removeClass("d-none");
    searchUser($(this).val());
});


$(document).ready(function(){
    //          -----------------Cargar las reservas
    var fechaIn = $(".row-dias th:nth-child(2)").attr("data-reserva");
    var fechaOut = $(".row-dias th:last-child").attr("data-reserva");

    ajaxRequest("php/funcionesAjax.php", {"getSQLArray" : 1, "sql" : "SELECT reserva.id, reserva.fecha, reserva.hora_inicio, reserva.hora_fin, reserva.pista, usuario.apellidos FROM reserva reserva, usuario usuario WHERE reserva.fecha >= '" + fechaIn + "' and reserva.fecha <= '" + fechaOut + "' and reserva.id_user = usuario.user"}, function(result){
        console.log(result);
        
        var reservas =  $.parseJSON(result);
        if(reservas[0] != null){
            reservas.forEach(function(row){
                crearReserva(row["fecha"], row["hora_inicio"], row["hora_fin"], row["pista"], row["apellidos"], row["id"]);
            });
        }
    });
    setTimeout(function(){                                           //evento de cada casilla del calendario
        $(".celda:not(.disabled, .not-event)").on("click", function(){
            var pista = $(this).parent().attr("data-pista");
            if(casillaSelect==null){                            // si no hay ninguna casilla seleccionada
                
                switch ($_GET.modo) {
                    case "bloquear": 
                        initReserva($(this), 20, 1);
                        break;
                    case "reservarl": 
                        initReserva($(this), 4, 4);
                        break;
                    case "reservarp": 
                        initReserva($(this), 2, 1);
                        break;
                    default:
                        break;
                }

            }else if(casillaSelect[0] == $(this)[0]){           //si se vuelve a pulsar la misma casilla
                casillaSelect= null;
                reservaActual.remove();   reservaActual = null;

                $(this).removeClass("active");
                vaciarEventActive();
            }
            else if(pista != casillaSelect.parent().attr("data-pista")){        //si se selecciona una casilla de otra row
                vaciarEventActive();
                reservaActual.remove();    reservaActual = null;
                casillaSelect.removeClass("active");
                switch ($_GET.modo) {
                    case "bloquear": 
                        initReserva($(this), 20, 1);
                        break;
                    case "reservarl": 
                        initReserva($(this), 4, 4);
                        break;
                    case "reservarp": 
                        initReserva($(this), 2, 1);
                        break;
                
                    default:
                        break;
                }


            }else if(casillaFinal != null){
                nuevaReserva();
                casillaSelect.removeClass("active");
                casillaFinal.removeClass("active");
                casillaSelect = null;
                vaciarEventActive();
            }
        });
    },500);
});


// Seleccionar una reserva del calendario
var reservaSelect = null;

function toggleNewOrSelect(nueva){
    if(nueva){
        $(".texto-intercambiable").removeClass("pos2");
        if(reservaSelect!=null) reservaSelect.removeClass("selected");
        reservaSelect = null;
        $("#btn-borrar-reserva").slideUp();
        $("#btn-guardar-reserva").slideDown();
        $(".select-users").slideDown();
        $("#apellidos").removeAttr("readonly");
        $("#liga").removeAttr("disabled");

    }else{
        $(".texto-intercambiable").addClass("pos2");
        $("#btn-borrar-reserva").slideDown();
        $("#btn-guardar-reserva").slideUp();
        $(".select-users").slideUp();
        $("#apellidos").attr("readonly", "true");
        $("#liga").attr("disabled", "true");
        $(".nueva-reserva").remove();
        if(casillaSelect!=null) casillaSelect.removeClass("active");
        casillaSelect = null;
        casillaFinal = null;
        vaciarEventActive();
    }
}

function reservaClickEvent(reserva){
    reserva.on("click", function(e){
        if(reservaSelect != null){
            reservaSelect.removeClass("selected");
        }
        reservaSelect = $(this);
        reservaSelect.addClass("selected");
        e.stopPropagation();                      //impide que se dispare el evento de la casilla padre (las reservas estan anidadas dentro de su primera casilla)
        toggleNewOrSelect(false);

        var reservaID = $(this).attr("data-reserva");
        ajaxRequest("php/funcionesAjax.php", {"getSQLArray" : 1, "sql" : "SELECT * from reserva where id = '" + reservaID + "' "}, function(result){
            var reserva = JSON.parse(result)[0];
            
            //rellenar RESERVA
            $(" #id").val(reserva.id);
            $(" .pista").val(reserva.pista);
            $(" .fecha").val(reserva.fecha);
            $(" .hora-inicio").val(reserva.hora_inicio);
            $(" .hora-fin").val(reserva.hora_fin);
            $(" #fecha-registro").val(reserva.fecha_registro);
            $(" #liga").val(reserva.liga);

            ajaxRequest("php/funcionesAjax.php", {"getUserInfo" : 1, "id" : reserva.id_user}, function(result){
                var usuario = JSON.parse(result);
                console.log(usuario);
                
                $("#apellidos").val( usuario.apellidos);
                $("#nombre").text( usuario.nombre);
                $("#user1").val( usuario.user).parent().children("p").text(usuario.user);
                
                

                $("#tel").text( usuario.tel);
                $("#email").text(usuario.email);
                $("#fecha_registro").text(usuario.fecha_ingreso);
                if(usuario.tipo == "S"){
                    $("#strikes").text(usuario.strikes);
                    $("#strikes").parent().removeClass("d-none");
                    $("#bonos").text(usuario.bonos); 
                    $("#bonos").parent().removeClass("d-none");
                }else{
                    $("#bonos").parent().addClass("d-none");
                    $("#strikes").parent().addClass("d-none");
                }
            });
        });
    });
}

