var current_point;
current_point = "x1y1";


$(document).ready(function () {
    init_display();
    $(".consomable").each(function(){
        $("#"+$(this).attr("id")).click(function(){
            if($("#start").text()== "Start"){
                if ($("#"+$(this).attr("id")).hasClass("select")){
                    $("#"+$(this).attr("id")).removeClass("select").addClass("unselect")
                    $("#"+$(this).attr("id")).text("❌");
                    $("#"+$(this).attr("id")).attr("value","0");
                }else{
                    $("#"+$(this).attr("id")).removeClass("unselect").addClass("select")
                    $("#"+$(this).attr("id")).text($($(this)).attr("id").toUpperCase());
                    $("#"+$(this).attr("id")).attr("value","1");
                }
            }
        });
    });

    $("#manuel").click(function(){
        $("#modalman").show();
    });

    $("#start").click(function(){
        if ($("#start").hasClass("btn-success")){
            $("#start").removeClass("btn-success").addClass("btn-danger")
            $("#start").text("Pause");
            current_point=nextbp(current_point)
            console.log(current_point)
            $("#allcheck").attr("disabled", true)
            if(current_point!="end"){
                alert("Début de la calibration par : " + current_point)
            }else{
                console.log("end ")
            }
            
        }else{
            $("#start").removeClass("btn-danger").addClass("btn-success")
            $("#start").text("Start");
            $("#allcheck").attr("disabled", false)
        }
    });

    $('#allcheck ').change(function(){
        if ($("#allcheck").is(":checked")){
            $(".consomable").removeClass("select").addClass("unselect")
            $(".consomable").text("❌");
            $(".consomable").attr("value","0");
        }else{
            $(".consomable").removeClass("unselect").addClass("select")
            $(".consomable").attr("value","1");
            $(".consomable").each(function(){
                $("#"+$(this).attr("id")).text($($(this)).attr("id").toUpperCase());
                
            });
        }
    })
    
});

function nextbp(current_point){
    current =current_point.split('');
    console.log(current);
    x = parseInt(current[1]);
    y = parseInt(current[3]);
    while($("#x"+x+"y"+y).attr("value")==0){
        if(x<=3){
            x=x+1
        }else{
            if(y<=3){
                y=y+1
                x=1
            }else{
                alert("Fin de calibration")
                return("end");
            }
        }
        current_point="#x"+x+"y"+y
    }
     return(current_point);
}
        
function init_display(){
    Type = "Acsia";
    nbx=3;
    nby=3;

    h=`<h1><p class="deck_name">${Type}</p></h1>
        <div class="form-check" id="checkboxall">
            <input class="form-check-input" type="checkbox" id="allcheck" >
            <label class="form-check-label">Ckeck all</label>
        </div>
        `
        
    for (let y = 1; y <= 4; y++) {
        for (let x = 1; x <= 4; x++) {
            h+=`<div id="x${x}y${y}" class="x${x} y${y} rectangle select consomable" value="1">X${x}Y${y}</div>`;
            for (let i = 1; i <= nbx; i++) {
                for (let j = 1; j <= nby; j++) {
                    xx=(i-1)*100;
                    yy=(j-1)*100;
                    h+=`<div id="${y}${x}${i}${j}" class="x${x} y${y} heatmaprect" style="transform: translate(${yy}%, ${xx}%)"></div>`
                }
            }
        }
    }

    h+=`<div id ="P1" class="x2 poubelle select consomable" value="1">P1</div>
    <div id ="P8" class="x3 poubelle select consomable" value="1">P8</div>
    <div id="whiterect" class="behindpb"></div>`
    

    $("#plate").append(h);

}