$(document).ready(function(){

    $(".menu").siblings().hide();
    $("#submit").show();

    //$("input[type='submit']").show();
    //$("input[type='file']").show();
    $("#gallery").show();
    //$('.menu, .submenu, .scarpe').val('select');

    $(".menu, .submenu1, .submenu2, .misure_magliette").on("change", function(){
        val = $(this).val();
        console.log(val);
        $("."+val).show();


        console.log($(this).attr("class"));
        if($(this).attr("class") == "menu"){

            $("."+val).show();

            $("."+val).siblings().hide();
            $("#submit").show();
            $(".menu").show();
            console.log("ok")


        }

        if($(this).attr("class") == "submenu1" || $(this).attr("class") == "submenu2"){
            $("#gallery").show();

        }


        //    $("."+val).val('select');
        //    $("."+val).siblings().hide();

    });


    $("input[type='number']").mouseout(function(){
        console.log($(this).val());
    })

    $("input[type='submit']").mouseover(function(){

    })


    //var fileInput = document.getElementById('file_input');
    //fileInput = $(".file_input");
    cont =0;
    rotate = 0;
/*-----------------------------------------------------------------------------------*/


    fileInput = document.getElementsByClassName("file_input");

    function main(){

    fileInput[cont].addEventListener("change", ()=>{


    //    $(".file_input").eq(cont).on("change", () => {
        //cont++;
        //rotate -= 90;


        div = document.createElement("div");

        for(let file of fileInput[cont].files) {
            var image = file
            if (image) {
                var imageElement = new Image();
                imageElement.src = URL.createObjectURL(image);
                imageElement.width = 100;


                var imageElement2 = new Image();
                imageElement2.src = "https://img.icons8.com/material-two-tone/24/000000/rotate-left.png";

                //imageElement2.width = 100;

                var imageElement3 = new Image();
                imageElement3.src="https://img.icons8.com/material-rounded/24/000000/rotate-right.png";

                var imageElement4 = new Image();
                imageElement4.src="https://img.icons8.com/material-two-tone/24/000000/remove-image.png";

                document.getElementById('gallery').appendChild(div);
                div.appendChild(imageElement2);

                div.appendChild(imageElement3);
                div.appendChild(imageElement4);
                div.appendChild(imageElement);

                $(imageElement2).click(function(){
                    rotate = rotate - 90;
                    //    rrotate = rotate + 90;


                    console.log(7)
                    $(imageElement).css("transform", "rotate("+rotate+"deg)");
                    // $(imageElement).css("transform", "rotate("+lrotate+"deg)");

                });

                $(imageElement3).click(function(){
                    // lrotate = rotate - 90;
                    rotate = rotate + 90;


                    console.log(7)
                    // $(imageElement).css("transform", "rotate("+lrotate+"deg)");
                    $(imageElement).css("transform", "rotate("+rotate+"deg)");

                });

                $(imageElement4).click(()=>{
                    $(imageElement).css("display","none");
                })


            }
        }
        $("img").click(function(){
            console.log(4);
        })
        console.log(cont)
    cont++
    console.log(cont)

    });

    }
    //cont=0;
    $("#addimg").click(()=>{
        //  cont++
        $(".file_input").eq(cont).click();
        main();
    })


form = document.forms[0];

botonSubmit = document.getElementById("submit");
botonSubmit.addEventListener("click", (e)=>{
    e.preventDefault();
    dati = new FormData(form);
 //   console.log(dati.get("product"));

    if(dati.get("product") == "scarpe"){
        console.log(dati.get("product"));

        console.log(dati.get("scarpe_genere"));
        console.log(dati.get("scarpe_num"));


    }
    else if(dati.get("product")=="magliette"){
        console.log(dati.get("product"));

        console.log(dati.get("sesso_magliette"));

        console.log(dati.get("misure_magliette"));


    }

    fetch("output2.php", {
        method:'POST',
        body: dati
    })







})




})