
<h1>Attributes for {{params.title}}</h1>
<div style="
    position: absolute;
    top: 38px;
    right:100px;
"><button onclick="window.location.href='/models/variation/{{params.id}}'">Create Copy</button></div>
<div id="trinity_window" class="ltvs-window">
    <div id="trinity_container" class="window3d">
        <div id="trinity_cameras" class="ltvs-menu-holder" style="left: 548px;
    position: absolute;
    width: 200px;
    display: flex;
    flex-direction: column;">

            <h3>Camera</h3>


            <div class="camera_angle" id="camera_angle_holder">
                
            </div>
            <div style="margin-top: 36px;">
                <lable for="model">Name</lable><br>
                <input type="text" id="camera_name" name="camera_name" value="">
                <button onclick="addCamera()">Save Camera Angle</button><span id="saving_camera"></span>


            </div>
            <div style="margin-top: 36px;">
                <button class="button button-danger" onclick="deleteCamera()">Delete Current Angle</button>
            </div>

        </div>


    </div>
</div>
<div id="parameter-column" class="parameter-column">
    <div>
        <table>
            <tr>
                <td style="display: flex; flex-direction: column; align-items: center;">
                    <a href="/clients/preview/{{params.id}}"><img class="thumb-prev" id="thumbprev"
                            src="/thumbs/models/{{params.id}}.png" /></a><br>
                            <button class="button button-secondary" onclick="setProductImage()">Set as Product Image</button>
                </td>
                <td style="padding-right: 10px;">
                    <button class="button button-secondary" onclick="addThumb()">Save Thumbnail</button><span id="saving"></span>
                </td>

                <td style="padding-left: 20px;">

                    <lable for="textupload">Upload Thumbnail (153 x 153 pixels)</lable><br>
                    <form name="texupload" action="/models/uploadthumb" enctype="multipart/form-data" method="post"
                        onsubmit="return validateUpload()">
                        <input type="file" id="thumb-to-upload" name="file-to-upload" accept="image/png"
                            onchange="setImageReady()">
                        <input type="hidden" id="modelid" name="modelid" value="{{params.id}}"> <br><br>
                        <button class="button button-primary" type="submit">Upload</button>
                    </form>
                </td>
            </tr>
        </table>

        <div style="left: 529px; top: -128px;" name="thumbnails" class="help-icon" onclick="showHelp(event)">?</div>
    </div>
    <br>
    <form action="/models/updatemodel" method="post">
        <div class="default-accessories">
            <label for="default_accessories">Start Up Accessories:</label><br>
            <select style="display:none" name="default_accessories" id="default_accessories" multiple
                placeholder="Select">
            </select>
            <div style="left: 505px;top: 20px;" name="default_accessories" class="help-icon" onclick="showHelp(event)">?
            </div>
        </div>
        <br>
        <div>
            <lable for="model">Model id</lable><br>
            <input type="text" id="id" name="id" value="{{params.id}}" readonly>
            <div style="left: 363px;top: -34px;" name="model_id" class="help-icon" onclick="showHelp(event)">?</div>
        </div>

        <div>
            <lable for="model">Model</lable><br>
            <input type="text" id="model" name="model" value="{{params.model}}">
            <div style="left: 363px;top: -34px;" name="model" class="help-icon" onclick="showHelp(event)">?</div>
        </div>
        <div>
            <lable for="product_id">Product ID</lable><br>
            <input type="text" id="product_id" name="product_id" value="{{params.product_id}}">
        </div>
        <div>
            <label for="model_class">Model Class</label>

            <select name="model_class" id="model_class">

                {{#each classList }}

                <option value="{{name}}" {{selected}}>{{name}}</option>

                {{/each}}
            </select>
            <div style="left: 248px;top: -18px;" name="model_class" class="help-icon" onclick="showHelp(event)">?</div>
        </div>
        <div>
            <lable for="title">Title</lable><br>
            <input type="text" id="title" name="title" value="{{params.title}}" required>
            <div style="left: 363px;top: -34px;" name="title" class="help-icon" onclick="showHelp(event)">?</div>
        </div>
        <div>
            <lable for="sku">SKU</lable><br>
            <input type="text" name="sku" id="sku" value="{{params.sku}}" required>
            <div style="left: 363px;top: -34px;" name="sku" class="help-icon" onclick="showHelp(event)">?</div>
        </div>
        <div>
            <lable for="snap">Snap Target</lable><br>
            <input type="text" name="snap" id="snap" value="{{params.snap}}"><br>
            <input type="radio" name="snap_type" id="single" value="single" {{radioCheck params.snap_type 'single' }}>
            <label for="single">Single</label>
            <input type="radio" name="snap_type" id="extreme" value="extreme" {{radioCheck params.snap_type 'extreme'
                }}>
            <label for="extreme">Extreme</label>
            <input type="radio" name="snap_type" id="environment" value="environment" {{radioCheck
                params.snap_type 'environment' }}>
            <label for="extreme">Environment</label>
            <input type="radio" name="snap_type" id="all" value="all" {{radioCheck params.snap_type 'all' }}> <label
                for="all">All</label>
            <input type="radio" name="snap_type" id="surface" value="surface" {{radioCheck params.snap_type 'surface'
                }}> <label for="surface">Surface</label>
            <div style="left: 363px;top: -34px;" class="help-icon" name="snap_target" onclick="showHelp(event)">?</div>
        </div>
        <div>
            <lable for="exclude">Exclude</lable><br>
            <input type="text" name="exclude" id="exclude" value="{{params.exclude}}">
            <div style="left: 363px;top: -34px;" class="help-icon" name="exclude" onclick="showHelp(event)">?</div>
        </div>
        <div>
            <lable for="include">Include</lable><br>
            <input type="text" name="include" id="include" value="{{params.include}}">
            <div style="left: 363px;top: -34px;" class="help-icon" name="include" onclick="showHelp(event)">?</div>
        </div>
        <hr>
        <div class="allcategories">
            <label for="categories">Choose categories:</label><br>
            <select style="display:none" name="categories" id="categories" multiple placeholder="Select"> </select>
            <div style="left: 505px;top: 20px;" class="help-icon" name="categories" onclick="showHelp(event)">?</div>
        </div>
        <br>
        <div class="allaccessorygroups">
            <label for="accessory_groups">Compatible Accessory Groups:</label><br>
            <select style="display:none" name="accessory_groups" id="accessory_groups" multiple placeholder="Select">
            </select>
            <div style="left: 505px;top: 20px;" class="help-icon" name="accessory_groups" onclick="showHelp(event)">?
            </div>
        </div>
        <br>
        <div class="allmaterials">
            <label for="materials">Material Variations: (material variations you will be able to choose between in the
                designer)</label><br>
            <select style="display:none" name="materials" id="materials" multiple placeholder="Select">
            </select>
            <div style="left: 505px;top: 20px;" class="help-icon" name="material_variations" onclick="showHelp(event)">?
            </div>
        </div>
        <br>
        <div class="variants">
            <label for="variants">Physical Variants: (physical variations you will be able to choose between in the
                designer)</label><br>
            <select style="display:none" name="variants" id="variants" multiple placeholder="Select">
            </select>
            <div style="left: 505px;top: 20px;" class="help-icon" name="physical_variations" onclick="showHelp(event)">?
            </div>
        </div>
        <hr>
        <div class="default_material">
            <label for="default_material">Default Material: (the material automatically assigned to this
                model)</label><br>
            <select oninput="applyMaterial()" style="display:none" name="default_material" id="default_material"
                placeholder="Select">
            </select>
            <div style="left: 505px;top: 20px;" class="help-icon" name="default_material" onclick="showHelp(event)">?
            </div>
        </div>
        <div>
            <p></p>
            <lable for="default_material_key">Default Material Key:</lable><br>
            <input oninput="applyMaterial()" type="text" id="default_material_key" name="default_material_key"
                maxlength="4" value="{{params.default_material_key}}">
            <div style="left: 363px;top: -34px;" class="help-icon" name="default_material_key"
                onclick="showHelp(event)">?</div>
        </div>
        <div>
            <lable for="metadata">Metadata (string)</lable><br>
            <input type="text" name="metadata" id="metadata" value="{{params.metadata}}">
            <div style="left: 363px;top: -34px;" class="help-icon" name="metadata" onclick="showHelp(event)">?</div>
        </div>
        <div>

            <input type="checkbox" id="mirror" name="mirror" value="{{params.mirror}}" {{checked params.mirror}}><label
                for="mirror">Can be mirrored</label><br>
            <div style="left: 129px; top: -16px;" class="help-icon" name="mirror" onclick="showHelp(event)">?</div>
        </div>



        <div>
            <input type="checkbox" id="menu" name="menu" value="{{params.menu}}" {{checked params.menu}}>
            <label for="menu">Show in Menu</label><br>
            <div style="left: 201px;top: -16px;" class="help-icon" name="roomplanner_menu" onclick="showHelp(event)">?
            </div>
        </div>
        <div>
            <input type="checkbox" id="addtocart" name="addtocart" value="{{params.addtocart}}" {{checked
                params.addtocart}}>
            <label for="addtocart">Add this item to cart</label><br>
        </div>
        <hr>

        <div>
            <input type="checkbox" id="updatecopies" name="updatecopies" value="0">
            <label for="updatecopies">Update all copies of same model</label><br>
            <div style="left: 227px; top: -16px;" class="help-icon" name="updatecopies" onclick="showHelp(event)">?
            </div>
        </div>
        <div class="submit-bt">
            <button type="submit" name="submit">
                Update
            </button>
        </div>
        {{>translations}}
    </form>
    <div class="bottomButs">
        <form action="/models/deletemodel/" method="POST"
            onsubmit="return confirm('Are you sure you want to permanently delete this model?')">
            <input type="hidden" id="id" name="id" value="{{params.id}}">
            <input type="hidden" id="model" name="model" value="{{params.model}}">
            <button class="button button-danger" type="submit"><span class="material-icons">delete</span>Delete</button>
        </form>
        <!--<button class="warn" onclick="deletemodel()">Delete</button>-->
        <button class="button button-secondary" onclick="window.location.href='/models'"><span class="material-icons">cancel</span> Cancel</button>
    </div>
</div>
<script>
    const trinity__source = '';
    const trinity__lang = 'none';
    let helptexts;
    function startup() {

        DT2024.loadModel({{ params.id }}, "none", false);
       
    }
    $('input[type="checkbox"]').change(function () {
        this.value = (Number(this.checked));
    });
    function registerSnaps(points) {

    }
    let previewLoaded = false;
    function setImageReady() {
        previewLoaded = true;
    }
    function validateUpload(event) {


        if (previewLoaded) {
            return true;
            console.log("send");
        } else {
            alert("Please select an image from your hard drive");
            return false;
        }

    }
    function createList() { };
    function registerTargets(targets) {
        console.log(targets);
    }
    function applyMaterial() {
        var matid = document.getElementById("default_material").value;
        var assignTo = document.getElementById("default_material_key").value;
        DT2024.assignMaterial(matid, assignTo, '00');

    }
    function addThumb() {
        document.getElementById("saving").innerHTML = " Saving....";
        var t = DT2024.grabScreenshot();
        $('#thumbprev').attr("src", t);
        var _id = '{{params.id}}';
        var _sku = '{{params.sku}}';
        $.ajax({
            type: "POST",
            url: "/models/thumb",
            data: {
                imgBase64: t,
                id: _id,
                sku: _sku
            }
        }).done(function (o) {
            console.log('saved');
            document.getElementById("saving").innerHTML = " Thumbnail saved";
            return true;
        });
    }
    function addCamera() {
        document.getElementById("saving_camera").innerHTML = " Saving....";


        var _name = document.getElementById("camera_name").value;
        var _pose = JSON.stringify(DT2024.getCameraPose());
        console.log(_pose);
        $.ajax({
            type: "POST",
            url: "/models/updatecamera",
            data: {
                name: _name,
                pose: _pose
            }
        }).done(function (o) {
            console.log('saved');
            document.getElementById("saving_camera").innerHTML = " Camera Angle saved";
            updateCameras();
            return true;
        });
    }
    function setCamera() {
        var _id = document.getElementById("camera_angle").value;
        if (_id == 0) {
            return;
        }
        document.getElementById("camera_name").value = document.getElementById("camera_angle").options[document.getElementById("camera_angle").selectedIndex].text;
        $.ajax({
            type: "POST",
            url: "/models/getcamera",
            data: {
                id: _id
            }
        }).done(function (o) {
            DT2024.setCameraPose(JSON.parse(o.pose));
            return true;
        });
            
    }

    
            
    function deleteCamera() {
        var _id = document.getElementById("camera_angle").value;
        if (_id == 0) {
            return;
        }
        $.ajax({
            type: "POST",
            url: "/models/deletecamera",
            data: {
                id: _id
            }
        }).done(function (o) {
            console.log('saved');
            document.getElementById("saving_camera").innerHTML = " Camera Angle deleted";
            updateCameras();
            return true;
        });
    }



    const selectedArray = [{{ params.categories }}];
    const accessoryArray = [{{ params.accessory_groups }}];
    const materialArray = [{{ params.materials }}];
    const defaultMaterial = {{ params.default_material }};
    const defaultAccessories = [{{ params.default_accessories }}];
    const variants = [{{ params.variants }}];

    fetch('/categories/all')
        .then(response => response.json())
        .then(data => {
            var i;
            for (i = 0; i < data.length; i++) {
                data[i].name = data[i].title;
                data[i].value = data[i].id;
                if (selectedArray.includes(data[i].id)) {
                    data[i].selected = true;
                }
            }

            $('.allcategories').dropdown({
                data: data,
                limitCount: 40,
                multipleMode: 'label',
                input: '<input type="text" maxLength="20" placeholder="Search">',
                choice: function () {
                    //getlist();
                }
            });
        });


    fetch('/accessories/all')
        .then(response => response.json())
        .then(data => {
            var i;
            for (i = 0; i < data.length; i++) {
                data[i].name = data[i].title;
                data[i].value = data[i].id;

                if (accessoryArray.includes(data[i].id)) {
                    data[i].selected = true;
                }
            }

            $('.allaccessorygroups').dropdown({
                data: data,
                limitCount: 40,
                multipleMode: 'label',
                input: '<input type="text" maxLength="20" placeholder="Search">',
                choice: function () {
                    //  assignDraggable();
                }
            });
        });
    fetch('/materials/all')
        .then(response => response.json())
        .then(data => {
            let dataCopy = JSON.parse(JSON.stringify(data));
            console.log("original", data);
            // assign to material chooser
            var i;
            for (i = 0; i < data.length; i++) {
                data[i].name = data[i].title;
                data[i].value = data[i].id;
                if (materialArray.includes(data[i].id)) {
                    data[i].selected = true;
                }
            }
            $('.allmaterials').dropdown({
                data: data,
                limitCount: 40,
                multipleMode: 'label',
                input: '<input type="text" maxLength="20" placeholder="Search">',
                choice: function () {
                    //getlist();
                }
            });

            // assign to default material
            for (i = 0; i < dataCopy.length; i++) {
                dataCopy[i].name = dataCopy[i].title;
                dataCopy[i].value = dataCopy[i].id;
                if (defaultMaterial == (dataCopy[i].id)) {
                    dataCopy[i].selected = true;
                }
            }
            console.log("COPY", dataCopy);
            $('.default_material').dropdown({
                data: dataCopy,
                limitCount: 40,
                input: '<input type="text" maxLength="20" placeholder="Search">',
                choice: function () {
                    applyMaterial();
                }
            });

        });

    fetch('/models/all')
        .then(response => response.json())
        .then(data => {
            let dataCopy = JSON.parse(JSON.stringify(data));
            //startup accessories
            var i;
            for (i = 0; i < data.length; i++) {

                data[i].name = data[i].title;
                data[i].value = data[i].id;
                if (defaultAccessories.includes(data[i].id)) {
                    data[i].selected = true;
                }

            }

            $('.default-accessories').dropdown({
                data: data,
                limitCount: 40,
                multipleMode: 'label',
                input: '<input type="text" maxLength="20" placeholder="Search">',
                choice: function () {
                    //dev__reset();
                    let defaultAccs = data.filter(itemIncludes);
                    var mc = $('#model_class').find(":selected").text();
                    console.log(defaultAccs);

                    DT2024.loadGroup(mc, '{{params.id}}', '{{params.model}}', '{{params.default_material}}', '{{params.default_material_key}}', '{{params.sku}}', defaultAccs);
                }
            });
            // physical variants
            for (i = 0; i < dataCopy.length; i++) {

                dataCopy[i].name = dataCopy[i].title;
                dataCopy[i].value = dataCopy[i].id;
                if (variants.includes(dataCopy[i].id)) {
                    dataCopy[i].selected = true;
                }
            }
            $('.variants').dropdown({
                data: dataCopy,
                limitCount: 40,
                multipleMode: 'label',
                input: '<input type="text" maxLength="20" placeholder="Search">',
                choice: function () {
                    // do nothing
                }
            });
        });


    fetch('/docs/help.models.json')
        .then((response) => response.json())
        .then((json) => helptexts = json);

    function itemIncludes(member) {
        var values = $('#default_accessories').val();
        if (values == null || values.length < 1) return false;
        var id = String(member.id);
        return values.includes(id);
    }
    let camdrop = null;
    function updateCameras() {

        document.getElementById('camera_angle_holder').innerHTML = '<label for="camera_angle">Camera Angle</label><select name="camera_angle" id="camera_angle" oninput="setCamera()" placeholder="Select"></select>';

    fetch('/models/getcameras', { method: 'POST' })
        .then(response => response.json())
        .then(data => {

            var i;
            for (i = 0; i < data.length; i++) {

                data[i].name = data[i].name;
                data[i].value = data[i].id;
                data[i].data = data[i].pose;

            }
            console.log("camera angles", data)

           
                $('.camera_angle').dropdown({
                data: data,
                limitCount: 40,
                input: '<input type="text" maxLength="20" placeholder="Search">',
                choice: function () {
                    //dev__reset();
                    setCamera();


                }
            });
           
          
        });
}
updateCameras();

function setProductImage() {
    
    const productid = '{{params.product_id}}';
    const id = '{{params.id}}';

    $.ajax({
        url: '/products/setproductimage',
        type: 'POST',
        data: {
            productid: productid,
            id: id  
        }
    })
    .done(function(data) {
        alert("Product image set");
    });
}


</script>



{{>modelpreview}}