<%- include('./static/start.ejs',{name:proj_name,async:true}) %>
<%- include('./header.ejs') %>
<script src="/lib/interact.js"></script>
<script src="/lib/html2canvas.js"></script>
<style>
    .drag{
        height: 50px;
        width: 50px;
        position: absolute;
        text-align: center;
        margin: auto;
        z-index: 10;
    }

    #drags{
        position: absolute;
        margin: auto;
    }
    #drags img{
        object-fit: contain;
    }

    .zones{
        margin-block: 10px;
    }

    .wall {
        /* border: dashed 4px transparent; */
        border-radius: 4px;
        transition: background-color 0.3s;
        position: absolute;
        inset: 0px;
        margin: 5px auto;
        width: 400px;
        height: 200px;
        background-color: #fff;
        background-image: url("/img/bg1red.png");
        background-size: 200px;
        background-repeat: repeat;
        background-position: bottom 0px left 0px;
        border: 2px solid black;
        /* overflow: visible; */
        z-index: 2;
    }

    .createzone {
        background-color: #bfe4ff;
        border: dashed 4px transparent;
        border-radius: 4px;
        height: 22px;
        width: 22px;
        margin: 10px;
        margin-top: 0px;
        padding: 10px;
        transition: background-color 0.3s;
    }

    .trash {
        background-color: #bfe4ff;
        border: dashed 4px transparent;
        border-radius: 4px;
        /* margin: 10px auto 30px; */
        /* padding: 10px; */
        height: 50px;
        width: 50px;
        transition: background-color 0.3s;
        text-align: center;
        /* z-index: -1; */
    }
    .czones{
        display: flex;
        margin: 0px auto;
        /* justify-content: space-around; */
        flex-wrap: wrap;
        width: 75%;
        /* height: 100px; */
        /* overflow-x: auto; */
    }

    .drop-active {
        border-color: #aaa;
    }

    /* .drop-target {
        background-color: #29e;
        border-color: #fff;
        border-style: solid;
    } */

    #proj_top{
        margin: auto;
        width: 90%;
        display: flex;
        justify-content: space-around;
    }
    #proj_name{
        background-color: #aaa;
        border: 0px;
        text-align: center;
    }

    .inputs{
        display: flex;
        width: 80vw;
        margin: auto;
        padding-block: 20px;
        padding-bottom: 0px;
        margin-top: 50px;
    }
    #group{
        display: none;
        position: absolute;
        padding: 0px;
        margin: 0px;
    }
</style>


<div id="project_menu" class="cmenu">
    <button id='proj_csave_btn' onclick='save_proj()'>сохранить в облако</button> <br>
    <!-- <button id='proj_cload_btn' onclick='load_proj_cloud()'>загрузить из облака</button> <br> -->
    <!-- <button id='proj_lsave_btn' onclick='save_proj_local()'>сохранить на локальное хранилище</button> <br>
    <button id='proj_lload_btn' onclick='load_proj_local()'>загрузить из локальное хранилище</button> <br> -->
    <!-- <button id='proj_del_btn' onclick='del_proj()'>удалить проект</button> <br> -->
</div>

    
    <!-- <div class="dropzone"></div> -->

<div class="inputs">
    <div id="wall_input" style="display: flex;justify-content: space-between;width: 95%;margin-left: 20px;">
        <div style="display: flex;width: 150px;justify-content: space-between;">
            <label for="wall_height" style="margin: auto;">Высота стены</label>
            <input type="text" id="wall_height" style="width: 50px; text-align: center;" value="2" oninput="wall_size_change('height');resize_drags();"> 
        </div>
        <div style="display: flex;width: 150px;justify-content: space-between;">
            <label for="wall_width" style="margin: auto;">Длина стены</label>
            <input type="text" id="wall_width" style="width: 50px; text-align: center;" value="4" oninput="wall_size_change('width');resize_drags();"> 
        </div>
        <div style="display: flex;width: 150px;justify-content: space-between;">
            <label for="wall_color" style="margin: auto;">цвет стены</label>
            <input type="color" id="wall_color" style="width: 50px;" value="#000000" onchange="wall_color_change()"> 
        </div>
        <div style="display: flex;width: 15vw;justify-content: space-between; background-color: #aaa;">
            <input type="button" id="proj_cost" class="menu_btn" value="Расчет стоимости" onclick="cost_drop();open_menu();" style="width: 100%;"> 
            <style>
                #cost_list li{
                    display: flex;
                    justify-content: space-between;
                    width: 14vw;
                }
                #cost_list{
                    list-style-type: none;
                    padding-left: 0px;
                    margin-top: 59px;
                    position: absolute;
                    width: 14vw;
                    padding: 0.45vw;
                }
            </style>
            <ul id="cost_list" class="cmenu">
            </ul>
            <!-- <div style="display: flex;"><div id="proj_cost"></div>&nbsp;руб.</div> -->
        </div>
        <!-- <div style="display: flex;width: 150px;justify-content: space-between;">
            <label style="margin: auto;">Расчёт стоимости</label>
        </div> -->
    </div>
    <!-- <img class="trash" style="height: 100px; width: 100px;" src="/img/shadow-energy.gif" alt="чёрная дыра"> -->
</div>

<div class="zones" style="position: relative;">
    <div id="drags"></div>
    <div class="wall dropzone" id="wall"></div>
</div>

<div style="display:flex; justify-content: space-around;"></div>

<div class="inputs" style="display: flex;justify-content: space-between;">
    <div style="display: flex;justify-content: space-between; width: 20vw;">
        <div>copy</div>
        <div>back</div>
        <div>forw</div>
        <div>del</div>
    </div>
    <div style="display: flex;justify-content: space-between; width: 7vw;">
        <div><img src="/img/icon/save.svg" alt="" style="width: 30px;" onclick="save_proj()"></div>
        <div>load</div>
    </div>
</div>
<div class="inputs" style="display: flex;justify-content: space-between;margin-top: 0px;">
    <div id="obj_group" style="display: flex;justify-content:space-evenly; width: 100vw;">
        <!-- <button name="" id="group_drop" >Помехи на стене</button> -->
        <button name="" id="group_drop" class="menu_btn" onclick="group_drop();open_menu();" style="width: 15vw;padding: 2px;">Оборудование</button>
        <button name="" id="group_drop" class="menu_btn" onclick="group_drop();open_menu();" style="width: 15vw;padding: 2px;">помехи</button>
        <ul id="group" class="cmenu"></ul>
    </div>
</div>
<div class="czones" style="height: 500px;"></div>


<script src="/lib/inter.js"></script>
<script>
    let proj_name = "<%= proj_name %>";

    function group_drop(){
        let e = document.getElementById("group_drop")
        setTimeout(()=>{
            document.getElementById("group").style.display = "block";
            // document.getElementById("group").style.left = document.getElementById("group_drop").getBoundingClientRect().left;
            let childs = document.getElementById("group").getElementsByTagName("input");
            let i = 0;
            Object.entries(childs).forEach(([key,value]) => {
                console.log(key,value);
                if(value.checked == true){
                    get_objs(value)
                    i++;
                }
                if (i==0){
                    document.getElementsByClassName("czones")[0].innerHTML = "";
                    drag_start()
                    // e.removeChild(e.getElementsByClassName(value))
                }
            });
        },1)
    }
    
    function cost_drop(id){
        // let e = document.getElementById("cost")
        // setTimeout(()=>{
        //     document.getElementById("group").style.display = "block";
        //     // document.getElementById("group").style.left = document.getElementById("group_drop").getBoundingClientRect().left;
        //     let childs = document.getElementById("group").getElementsByTagName("input");
        //     let i = 0;
        //     Object.entries(childs).forEach(([key,value]) => {
        //         console.log(key,value);
        //         if(value.checked == true){
        //             get_objs(value)
        //             i++;
        //         }
        //         if (i==0){
        //             document.getElementsByClassName("czones")[0].innerHTML = "";
        //             drag_start()
        //             // e.removeChild(e.getElementsByClassName(value))
        //         }
        //     });
        // },1)
    }

    function wall_color_change(){
        let wall = document.getElementById("wall")
        let color = document.getElementById("wall_color")
        wall.style.backgroundColor = color.value;
    }

    function get_groups(callback){
        let select = document.getElementById("group");
        // let name = select.options[select.selectedIndex].text;
        $.post( "/get_groups")
        .done(function( res ) {
            if(res["out"] == "good"){
                select.innerHTML = "";
                res["body"].forEach(group => {
                    console.log(group);
                    let gd = document.createElement("div");
                    let group_div = document.createElement("input");
                    let label = document.createElement("label");
                    group_div.setAttribute("type","checkbox");
                    group_div.setAttribute("onchange","group_drop()");
                    label.setAttribute("for",`obj_group_${group["id"]}`);
                    label.innerText = group["name"].replace("$"," ");
                    // gd.innerText = group["name"].replace("$"," ");
                    group_div.setAttribute("group_count",group["count"]);
                    group_div.setAttribute("gid",group["id"]);
                    group_div.id = `obj_group_${group["id"]}`;
                    gd.append(group_div);
                    gd.append(label);
                    select.append(gd);
                    // select.append(label);
                    if(group["id"] == res["body"].at(-1)["id"]){
                        if(callback)callback();
                    }
                });
            }
            // callback(res);
        });
    }
    get_groups(()=>{
        // get_objs();
        load_proj_cloud();
    });
    function get_objs(group){
        document.getElementsByClassName("czones")[0].innerHTML = "";
        load_objs((data)=>{
            data.forEach(value => {
                let czones = document.getElementsByClassName("czones")[0];
                let czone =  document.createElement('div');
                czone.classList.add(value["name"]);
                czone.classList.add("createzone");
                czones.append(czone)    
            });
            drag_start()
        },group.getAttribute("gid"))
    }

    // function del_proj(){
    //     let del = confirm(`удалить проект ${proj_name}?`);
    //     if(del == true){
    //         $.post( "/proj/delete",{name:proj_name})
    //         .done(function( res ) {
    //             if(res["out"] == "good"){
    //                 goto("/main")
    //             }
    //         })
    //     }
    // }

    // console.log(proj_name);
    // let menu = document.getElementById("project_menu");
    // document.getElementById("top_panel_left").innerHTML = `<div id='proj_menu' class="menu_btn">настройки проекта</div>`;
    

    function save_proj(){
        // document.getElementById('top_panel_center').innerHTML=`сохранение ${proj_name}`;
        save((res)=>{
            // document.getElementById('top_panel_center').innerHTML=`сохранено ${proj_name} в облако`;
            alert("saved")
            setTimeout((res)=>{
                // document.getElementById("top_panel_center").innerText = `${proj_name} (облако)`;

            },3000)
        })
    }

    function save_proj_local(){
        // document.getElementById('top_panel_center').innerHTML=`сохранение ${proj_name}`;
        save_local();
        // document.getElementById('top_panel_center').innerHTML=`сохранено ${proj_name} в локальное хранилище`;
        setTimeout((res)=>{
            // document.getElementById("top_panel_center").innerText = `${proj_name} (локальное хранилище)`;
        },3000)
    }
    
    // drag_start();
    // console.log(px_ratio);
    $(window).resize(function(){isZooming();});

    function isZooming(){
        resize_drags();
    }
</script>
<%- include('./static/end.ejs',{soc:true}) %>