{% trans_default_domain 'configuratore' %}
    {# 
<div class="md-modal md-effect-5 md-blue colorize-overlay" id="item-info-dlg">
    <div class="md-content">
        <div class="row">
            <!-- /col 6 -->
            <section class="tile transparent">
                <!-- tile widget -->
                <div class="tile-widget color transparent-black rounded-top-corners">
                    <h2 style="display: inline-flex; width:  100%;">
                        <div id="dlg-title" style="width:  50%;"></div>
                        <div style="width: 50%; text-align: right;">
                            <a id="dlg-close" class="submit font-slab submit-quit" href="javascript: closeItemInfo();">
                                <strong><i class="fa fa-close"></i></strong>
                            </a>
                        </div>
                    </h2>
                    <!-- /tile body -->
                    <div class="tile-body nopadding">
                        <div class="dlg-message" id="dlg-message">

                            <div class="image-body col-md-4" id="main-block-im">
                                <div class="image-body col-md-6" id="block-im">
                                    <img src="" style="width: 100%;"/>
                                </div>
                                <div class="image-body col-md-6" id="block-3d">
                                </div>
                                <div class="image-body col-md-6" id="block-svg1">
                                </div>
                                <div class="image-body col-md-6" id="block-svg2">
                                </div>
                            </div>

                            <div class="detail-body col-md-8" id="block-detail">
                            </div>
                            <div style="clear: both;"></div>    
                        </div>
                    </div>
                    <!-- tile footer -->
                </div>
                <!-- /tile footer -->
            </section>
        </div>
    </div>
</div>
#}



<div class="modal fade" id="dettaglio-item" tabindex="-1" role="dialog" aria-labelledby="dettaglio-item-title" aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="dettaglio-item-title"></h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="tile-widget color transparent-black rounded-top-corners">
            <!-- /tile body -->
            <div class="tile-body nopadding">
                <div class="dlg-message" id="dlg-message">

                    <div class="image-body col-md-4" id="block-im">
                        <div class="row">
                            <div class="image-body col-md-6" id="block-im">
                                <img src="" style="width: 100%;"/>
                            </div>
							<section class="image-body col-md-6 block-3d" id="block-detail-3d">
								<div class="tile-body color transparent-black rounded-corners container-box-3D">
                                    {% if is_granted('ROLE_SUPERADMIN') and is_granted('ROLE_CHANGE_3D') %}
                                        <ul class="tile-navbar bg-transparent-black-3 select-3d">
                                            <li class="select-3d obj-type">
                                                <a id="id-point" class="btn btn-blue choose-obj" href="#">{{ "SHOW POINT"|trans }}</a>
                                            </li>

                                            <li class="select-3d obj-type">
                                                <a id="id-inbound" class="btn btn-hotpink choose-obj" href="#">{{ "IN BOUND"|trans }}</a>
                                            </li>
                                            <li class="select-3d obj-type">
                                                <a id="id-package" class="btn btn-dutch choose-obj" href="#">{{ "PACKAGE"|trans }}</a>
                                            </li>
                                            <li class="select-3d obj-type">
                                                <a id="id-surface" class="btn btn-blue choose-obj" href="#">{{ "SURFACE"|trans }}</a>
                                            </li>
                                            <li class="select-3d obj-type">
                                                <a id="id-v-shape" class="btn btn-greensea choose-obj" href="#">{{ "V - SHAPE"|trans }}</a>
                                            </li>
                                        </ul>
                                    {% endif %}
                                    {% if is_granted('ROLE_CHANGE_3D') %}
                                        <ul class="tile-navbar bg-transparent-black-3 select-3d">
                                            <li class="select-3d">
                                            <a id="id-view-top" href="#" class="page-menu-btn no-select choose-display" style=""></a>
                                            </li>
                                            <li class="select-3d">
                                                <a id="id-view-front" href="#" class="page-menu-btn no-select choose-display" style=""></a>
                                            </li>
                                            <li class="select-3d">
                                                <a id="id-view-back" href="#" class="page-menu-btn no-select choose-display" style=""></a>
                                            </li>
                                            <li class="select-3d">
                                                <a id="id-view-left" href="#" class="page-menu-btn no-select choose-display" style=""></a>
                                            </li>
                                            <li class="select-3d">
                                                <a id="id-view-right" href="#" class="page-menu-btn no-select choose-display" style=""></a>
                                            </li>
                                            <li class="select-3d">
                                                <a id="id-cube" href="#" class="page-menu-btn no-select choose-display" style="">
                                                    <i class="fa fa-cube" title="Isometric"></i>
                                                </a>
                                            </li>
                                            <li class="select-3d">
                                                <a id="id-camera1" href="#" class="page-menu-btn no-select choose-display" style="">
                                                    <i class="fa fa-camera" title="Isometric"></i>
                                                </a>
                                            </li>
                                            <li class="select-3d">
                                                <a id="id-camera2" href="#" class="page-menu-btn no-select choose-display" style="">
                                                    <i class="fa fa-camera-retro" title="Isometric"></i>
                                                </a>
                                            </li>
                                        </ul>
                                    {% endif %}
                                    <div id="obj-3D" class="box-obj-3D">
										<i class="material-icons refresh3D">&#xe84d;</i>
									</div>
								</div>
							</section>
                        </div>
                        <div class="row">
                            <div class="image-body col-md-6 block-svg" id="block-svg1">
                            </div>
                            <div class="image-body col-md-6 block-svg" id="block-svg2">
                            </div>
                        </div>
                    </div>

                    <div class="detail-body col-md-8 {% if not enablesave %}disble-click-all{% endif %}" id="block-detail">
                    </div>
                    
                    <div style="clear: both;"></div>    
                </div>
            </div>
            <!-- tile footer -->
        </div>


      </div>
      <div class="modal-footer form-group">
        <button type="button" id="btn-close" class="btn btn-secondary" data-dismiss="modal">{{ 'Close'|trans }}</button>
        {% if enablesave %}
            <button type="button" id="btn-save" class="btn btn-primary" onclick="javascript:closeAndConfirmItemInfo(1)">{{ 'Save Current'|trans }}</button>
            <button type="button" id="btn-savekeep" class="btn btn-primary" onclick="javascript:closeAndConfirmItemInfo(2)">{{ 'Save and Keep'|trans }}</button>
        {% endif %}
      </div>
    </div>
  </div>
</div>

<script type="text/javascript">
    var onconfirm = null;
    var _info = null;
    const dettaglio_module = {};

    function showItemInfo(title, uid, confirm) {
        var modal = document.querySelector('#item-info-dlg');
        $('#dettaglio-item').modal();
        _info = null;
        for (cc = 0; cc < info.length; ++cc) {
            if (info[cc].uid == uid) {
                _info = info[cc];
                break;
            }
        }
        $("#block-detail").html('<div class="spinner"></div>');
        $('#obj-3D').html('<i class="material-icons refresh3D">&#xe84d;</i>');
        $('#block-svg1').html('');
        $('#block-svg2').html('');
        $('#dettaglio-item #dettaglio-item-title').html(/*"{{'Item'|trans }}: " + */title);
        // $('#item-info-dlg #dlg-message').html(body);
        onconfirm = confirm;
      /*  if (onconfirm !== null && typeof onconfirm === "function") {
            $('#item-info-dlg #dlg-confirm').show();
        } else {
            $('#item-info-dlg #dlg-confirm').hide();
        }*/
       // classie.add(modal, 'md-show');
        if (typeof _info !== 'undefined' && _info !== null) {
            $('#block-im > img').hide();
            $('#block-svg1').hide();
            $('#block-svg2').hide();
            if (typeof _info.val !== 'undefined' && typeof _info.val.img[1] !== 'undefined') {
                $('#block-im > img').attr('src', _info.val.img[1].img);
                $('#block-im > img').show();
            }
            if (typeof _info.val !== 'undefined' && typeof _info.val.img3d[0] !== 'undefined') {
                $('#block-svg1').html(_info.val.img3d[0].img3d);
                $('#block-svg1').show();
            }
            if (typeof _info.val !== 'undefined') {
                let cc;
                for (cc = 0; cc < _info.val.img3d.length; ++cc) {
                    if (_info.val.img3d[cc].tipo == 5)  {
                        $('#block-svg2').html(_info.val.img3d[cc].img3d);
                        $('#block-svg2').show();
                        break;
                    }
                }
            }
            var request = $.ajax({
                url: _info.detail_url,
                method: "GET",
                dataType: "html"
            });
            request.done(function (msg) {
                $("#block-detail").html(msg);
                let vinfo = new Array();
                let _cloneInfo = Object.assign({}, _info);
                _cloneInfo.qty = 1;
                vinfo.push(_cloneInfo);
                dettaglio_module.init3D(vinfo);
    
            });
            request.fail(function (jqXHR, textStatus) {
                alert("Request failed: " + textStatus);
            });
        }
    }
  /*  function closeItemInfo() {
        var modal = document.querySelector('#dettaglio-item');
        classie.remove(modal, 'md-show');
    }*/
    function closeAndConfirmItemInfo(op) {
    //    var modal = document.querySelector('#dettaglio-item');
        $('#detail_item_funzione').val(op);
        $.ajax({
            url: _info.detail_url,
            type: 'post',
            dataType: 'json',
            data: $('form#item-detail-form').serializeObject()
        })
        .done(function(ev) {
  //          alert( "success" );

        if (onconfirm !== null && typeof onconfirm === "function") {
            onconfirm();
        }


        })
        .fail(function(ev) {
            alert( "error" );
        })
        .always(function(ev) {
//            alert( "complete" );
            $('#dettaglio-item').modal('hide');
        });



/*        var modal = document.querySelector('#item-info-dlg');
        classie.remove(modal, 'md-show');
        if (onconfirm !== null && typeof onconfirm === "function") {
            onconfirm();
        }*/
    }



</script>

<script type="module">
    
import {
        start,
        switchView,
        loadPCD,
        changeView,
        changeObj3D
    } from "{{ asset('static/cloud.js/viewer_3d.js') }}";	

    function myLog(s) {
        console.log(s);
    }

    $(function() {

        let container = null;
        let itemsCount = 0;
        let numDiv = 0;
        let maxL= -10000.0;

        dettaglio_module.init3D = function(_v) {
            container = document.getElementById("obj-3D");
            _v.forEach(function(_o) {
                let _L = parseFloat(_o.L);
                let _W = parseFloat(_o.W);
                if (!isNaN(_L)) {
                    maxL = (_L > maxL) ? _L : maxL;
                }
                if (!isNaN(_W)) {
                    maxL = (_W > maxL) ? _W : maxL;
                }
            });
            start(container, _v, maxL, numDiv, null, null, null, myLog, false);
        }

        $('.modale-3d').on('click', function(v) {
            showModal3d('3D');
        });
        $('ul.select-3d').on('click', '.choose-display', function(v) {
            changeView(this.id);
        });
        $('ul.select-3d').on('click', '.choose-obj', function(v) {
            changeView(this.id);
        });


    });
</script>