{% extends 'base.html.twig' %}

{% block body_id 'cloudtools' %}

    {#
        the homepage is a special page which displays neither a header nor a footer.
        this is done with the 'trick' of defining empty Twig blocks without any content
    #}

    {% block stylesheets %}
        {{ parent() }}
        <link rel="stylesheet" href="{{ asset('static/css/3d_progress.css?v=20200415') }}">       
    {% endblock %}
    {% block header %}
    {% endblock %}

    {% block modal %}
        {% include 'modal/message.html.twig' %} 
        <div class="md-modal md-effect-10 md-hotpink colorize-overlay" id="id-msg-red">
            <div class="md-content">
                <h3>ERROR</h3>   
                <div id="id-msg-err" class="tile-body nopadding rounded-corners">
                </div>
                <button class="md-close btn btn-default">{{ "OK"|trans }}</button>
            </div>
        </div>
        <div class="md-modal md-effect-5 md-blue colorize-overlay" id="id-wait-dlg">
            <div class="md-content">
                <div class="row">
                    <!-- /col 6 -->
                    <section class="tile transparent mail-note">
                        <!-- tile widget -->
                        <div class="tile-widget color transparent-black rounded-top-corners">

                            <!-- /tile body -->
                            <div class="tile-body nopadding" >
                                <div class="dlg-message" id="dlg-wait-messag"></div>
                                <div class='wait-container'>
                                    <i class='layer'></i>
                                    <i class='layer'></i>
                                    <i class='layer'></i>
                                </div>                                
                            </div>
                            <!-- tile footer -->
                            <div class="tile-footer rounded-bottom-corners text-right">
                                <a class="submit font-slab submit-cancell" href="javascript: chiudi_msg();"><strong>{{ 'Cancel'|trans }}<i class="fa fa-close"></i></strong></a>
                            </div>
                        </div>
                        <!-- /tile footer -->
                    </section>
                </div>
            </div>
        </div>
    {% endblock %}

    {% block body %}

        <div class="md-overlay"></div><!-- the overlay element -->        
        <!-- Page content -->
        <div id="content" class="col-md-12">
            <!-- page header -->
            <div class="pageheader">
                <div class="breadcrumbs hidden-element">
                    <ol class="breadcrumb">
                        <li>You are here</li>
                        <li><a href="/en/home?step=2">C4RGO-Air</a></li>
                        <li class="active">cloud tools</li>
                    </ol>
                </div>
            </div>
            <!-- /page header -->
            <!-- tile -->











            <section class="tile transparent">
                <!-- tile header -->
                <div class="tile-header color transparent-black rounded-corners">

                    <div class="tile nopadding color transparent-black rounded-top-corners valign-center">
                        <!-- Nav tabs --> 
                        <ul class="nav nav-tabs tabdrop detail-nav">
                            <li class="active">

                                <a href=".AWB-tab" id="id-tab-menu-0" data-id="0" class="menu-tab" data-toggle="tab">
                                    {% if LogoVettore != "" %}<img src="{{ asset('static/images/CompagnieAereeFLAG/') }}{{ LogoVettore}}" alt="" style="height: 68px;" />{%  endif %}
                                    <strong>
                                        <span>
                                            <id class="color-cyan" text-left style="font-size:1.4vw">
                                                {% if awbexp != FALSE %}{{ awbexp.awb }}{% else %}{{ 'NOT FOUND'|trans }}{% endif %}
                                            </id>
                                        </span>
                                    </strong>
                                </a>
                            </li>
                        </ul>      
                        <a  class="on-3dlab-btn" href="{{ path('detail_page', {'aid':aid,'id':awbexp.awb,'prev':0,'next':0}) }}"><div class="detail-next detail-nav"><i class="fas fa-door-open"></i></div></a>
                        <div style="clear: both;"></div>
                        <!-- / Nav tabs -->
                    </div>
                    <div id="out-message" class="error-red"></div>
                    <div id="err-message" class="error-red"></div>
                    <div class="controls">
                        <a href="#" class="minimize"><i class="fa fa-chevron-down fa-2x"></i></a>
                        <a href="#" class="refresh"><i class="fa fa-refresh fa-2x"></i></a>
                    </div>        

                    {% if awbexp != FALSE %}
                    <div class="tile tab-content color transparent-black rounded-bottom-corners">
                        <div id="id-AWB-tab" class="tab-pane fade in active AWB-tab">
                            <div class="row">

                                <div id="id-box-3D" class="col-md-4" >
                                    <!-- 3D 1-->
                                    <section class="tile color transparent-black">
                                        <div id="id-3D-id-ref3D" class="tile-header">
                                            <h1>3D</h1>
                                            <div class="controls">
                                                <a href="#" class="minimize color-blue"><i class="fa fa-chevron-down fa-2x"></i></a>
                                                <a href="#" id="id-ref3D" class="refresh3D color-blue" data-id3d-cur="1"><i class="fa fa-download fa-2x"></i></a>
                                            </div>
                                        </div>                                                
                                        <div class="tile-body">
                                            <ul class="tile-navbar bg-transparent-black-3 select-3d"> 
                                                <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> 




                                                <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>                                            
                                            <div id="B3D-id-ref3D" class="tile-body" style="text-align: center;">
                                                <i class="material-icons">&#xe84d;</i>                                                        
                                            </div>



                                        </div>



                                    </section>
                                </div>
                                <br />

                                <div id="id-box-exec" class="col-md-8" >
                                    <!-- 3D 1-->
                                    <section class="tile color transparent-black">
                                        <div id="id-3D-id-ref3D" class="tile-header">
                                            <h1></h1>
                                            <div class="controls">
                                                <a href="#" class="minimize"><i class="fa fa-chevron-down fa-2x"></i></a>
                                                <a href="#" class="refresh"><i class="fa fa-refresh fa-2x"></i></a>
                                            </div>
                                        </div>                                                




                                        <div id="execution" class="tile-body">

                                            <ul class="friend-list" id="id-split-cmd">                                           
                                                <li>                                                                                                                                
                                                    <div class="media change-value">                                                                                                           
                                                        <label for="input" >{{ 'Split value'|trans }}</label>                                                                  
                                                        <input type="text" placeholder="{{ 'Split value in mm'|trans }}" class="allownumericwithdecimal form-control input-split"  id="id-split-val" value="" autocomplete="off">  
                                                    </div>                                                                                                                          
                                                </li>                                                                                                                                                                           
                                                <li class="filters">
                                                    <div class="col-md-3" style="padding-right: 10px; padding-top: 10px;"><a id="cmd-restore" class="btn btn-default cmd-execution" href="#" style="width: 100%;">{{ "Restore"|trans }}</a></div>
                                                    <div class="col-md-3" style="padding-right: 10px; padding-top: 10px;"><a id="cmd-cancel" class="btn btn-default cmd-execution" href="#" style="width: 100%;">{{ "Cancel"|trans }}</a></div>
                                                    <div class="col-md-3" style="padding-right: 5px; padding-left: 5px; padding-top: 10px;"><a id="cmd-test" class="btn btn-default cmd-execution" href="#" style="width: 100%;">{{ "Exceute"|trans }}</a></div>
                                                    <div class="col-md-3" style="padding-left: 10px; padding-top: 10px;"><a id="cmd-confirm" class="btn btn-default cmd-execution" href="#" style="width: 100%;">{{ "Confirm"|trans }}</a></div>
                                                </li> 


                                            </ul>                                            

                                        </div>
                                    </section>

                                    <section>

                                        <div id="id-tab-original" class="tab-obj tile transparent tab-content tab-pane fade in feed-tab-1 cur-tab">
                                            <!-- tile header -->
                                            <div class="tile-header color transparent-black rounded-corners">
                                                <h4>{{ 'Original'|trans }}:</h4>
                                                <div class="controls">
                                                    <a href="#" class="minimize"><i class="fa fa-chevron-down fa-2x"></i></a>
                                                    <a href="#" class="refresh"><i class="fa fa-refresh fa-2x"></i></a>
                                                </div>
                                            </div>
                                            <!-- /tile header -->

                                            <!-- tile body -->
                                            <div class="tile-body color transparent-black rounded-corners">

                                                <div class="table-responsive">
                                                    <table  class="table table-datatable table-custom tabella-dettaglio" id="id-tabella-dettaglio-1" data-nril="1" data-rilpos="1">

                                                        <!--end - Advanced table TOP-->


                                                        <thead>
                                                            <tr class="row-selected-detail">
                                                                <th class="sort-alpha" style="width: 110px;"><h3>{{ 'ID'|trans }}</h3></th>
                                                                <th class="sort-alpha" style="width: 100px;"><h4>[N.]<br><br>{{ 'Items'|trans }}</h4></th>
                                                                <th class="sort-numeric" style="min-width: 40px;"><h4>[Mc]<br><br>{{ 'Volume'|trans }}</h4></th>
                                                                <th class="sort-numeric" style="min-width: 40px;"><h4>[m]</h4><h3>{{ 'H'|trans }}</h3></th>
                                                                <th class="sort-numeric" style="min-width: 40px;"><h4>[m]</h4><h3>{{ 'L'|trans }}</h3></th>
                                                                <th class="sort-numeric" style="min-width: 40px;"><h4>[m]</h4><h3>{{ 'W'|trans }}</h3></th>
                                                            </tr>
                                                        </thead>
                                                        <tbody>
                                                            <tr class="row-selected-detail odd gradeX" id="rid_1" data-rid="1"
                                                                data-Inbound=""
                                                                data-RealVolume=""
                                                                data-RealVolumeSurface=""
                                                                data-InboundVolumeSurface=""
                                                                data-H=""
                                                                data-L=""
                                                                data-W=""
                                                                data-id=""
                                                                >
                                                                <td  id="obj-0" class="sel-obj text-center item-code-column btn-edit-column" title="{{ 'SELECT OBJECT'|trans }}">
                                                                    <i class="fas fa-box fa-2x index-col" style="display: inline-block; margin-left: 6px; vertical-align: top;"></i>
                                                                    <h4 style="display: inline-block; margin-left: 6px; vertical-align: top;">{{ awbexp.nrpackages }}</h4>
                                                                </td>
                                                                <td class="text-center ncolli-column btn-edit-column">
                                                                    <h4>
                                                                        {{ awbexp.ncolli }}
                                                                    </h4>
                                                                </td>
                                                                <td>
                                                                    <div style="text-align: right;" class="text-center class-vol-all class_vol_1 vol-type-{% if awbexp.volumeflag != null and awbexp.volumeflag >= 1 and awbexp.volumeflag <= 4 %}{{ awbexp.volumeflag }}{% else %}1{% endif %}">
                                                                        {% if awbexp.volumeflag == 1 %}
                                                                            {{ awbexp.inbound|number_format(2, ',', '.') }} {# Inbound #}
                                                                            <img id="volimg1_1"  style="margin: 8px;"
                                                                                 width="30px" alt="{{ 'IN BOUND'|trans }}" 
                                                                                 src="{{ asset('static/c4rg0_themes/assets/images/icons/INBOUND_icoBNC_G.png') }}"
                                                                                 >                                                                  

                                                                        {% elseif awbexp.volumeflag == 2 %}
                                                                            {{ awbexp.realvolume|number_format(2, ',', '.') }} {# Package #}
                                                                            <img id="volimg1_1" style="margin: 8px;" 
                                                                                 width="30px" alt="{{ 'PACKAGE'|trans }}" 
                                                                                 src="{{ asset('static/c4rg0_themes/assets/images/icons/Visualizza_3D_icoBNC.png') }}"
                                                                                 >                                                                  
                                                                        {% elseif awbexp.volumeflag == 3 %}
                                                                            {{ awbexp.realvolumesurface|number_format(2, ',', '.') }} {# V-Shape #}
                                                                            <img id="volimg1_1" style="margin: 8px;" 
                                                                                 width="30px" alt="{{ 'V-SHAPE'|trans }}" 
                                                                                 src="{{ asset('static/c4rg0_themes/assets/images/icons/V-SUPERFICIE_icoBNC.png') }}"
                                                                                 >                                                                  
                                                                        {% elseif awbexp.volumeflag == 4 %}
                                                                            {{ awbexp.inboundvolumesurface|number_format(2, ',', '.') }} {# Surface #}
                                                                            <img id="volimg1_1" style="margin: 8px;" 
                                                                                 width="30px" alt="{{ 'SURFACE'|trans }}" 
                                                                                 src="{{ asset('static/c4rg0_themes/assets/images/icons/REALE_icoBNC_G.png') }}"
                                                                                 >                                                                  
                                                                        {% else %}
                                                                            {{ awbexp.inbound|number_format(2, ',', '.') }} {# Inbound #}
                                                                            <img id="volimg1_1" style="margin: 8px;" 
                                                                                 width="30px" alt="{{ 'IN BOUND'|trans }}" 
                                                                                 src="{{ asset('static/c4rg0_themes/assets/images/icons/INBOUND_icoBNC_G.png') }}"
                                                                                 >                                                                  

                                                                        {% endif %}
                                                                    </div>
                                                                </td>
                                                                <td class="text-center"><h4>{{ awbexp.hpackage|number_format(2, ',', '.') }}</h4></td>
                                                                <td class="text-center"><h4>{{ awbexp.lpackage|number_format(2, ',', '.') }}</h4></td>
                                                                <td class="text-center"><h4>{{ awbexp.wpackage|number_format(2, ',', '.') }}</h4></td>
                                                            </tr>
                                                        </tbody>
                                                    </table>
                                                </div>

                                            </div>
                                        </div>                                                      
                                    </section>
                                    <section>
                                        <div id="id-tab-split" class="tab-obj tile transparent tab-content tab-pane fade in feed-tab-1 cur-tab">
                                        </div>                                                
                                    </section>
                                </div>
                            </div>
                        </div>
                    </div>    
                    {% endif %}
            </section>
            <!-- /tile -->
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
        </div>

        <!-- Page content end -->
    {% endblock %}
    {% block javascripts %}
        {{ parent() }}
        <script type="text/javascript" src="{{ asset('static/js/3d_progress.js') }}"></script>
        <script type="text/javascript">
            // https://stackoverflow.com/questions/2644299/jquery-removeclass-wildcard
            function removeClassStartingWith(node, begin) {
                node.removeClass(function (index, className) {
                    return (className.match(new RegExp("\\b" + begin + "\\S+", "g")) || []).join(' ');
                });
            }
            $(function () {
                removeClassStartingWith($('body'), 'bg-');
                $('body').addClass('bg-3dlab');
            });
        </script>        
        <script type="module">            
            import { start, changeView, changeObj } from '{{ asset('static/cloud.js/cloud.tools.js') }}';
            var errmsg = new Array();
            var container = document.getElementById("B3D-id-ref3D")
            var url = "{{ path('api_getcloud', {'id': parentId, 'type': 'pc'}) }}";       
            errmsg[1] = "{{ 'Error loading file'|trans }}";
            
            function fillSplitTable() {   
                $('#id-tab-split').html('<div id="id-tab-split" class="tab-obj tile transparent"><div id="page-wrapper"><div class="loading">Loading...</div></div></div>');
                $.ajax({
                    type: "GET",
                    url: "{{ path('cloudtools_ajax', {'parentId': parentId, 'awb': awbexp.awb})}}",
                    data: {}
                })
                .done(function (v) {
                    $("#id-tab-split").html(v);
                })
                .fail(function (err) {
                     $('#id-tab-split').html('<div id="id-tab-split" class="tab-obj tile transparent"></div>');
                 //   $("#err-message").html("{{ 'There was an error!'|trans }}");
                })
                .always(function () {
                });                  
            }
            function execution(cmd) {
                var splitval = $('#id-split-val').val();
                var id = {{ parentId }};
                var modalMsgNota = document.querySelector('#id-wait-dlg');
                var nsplitval = parseInt(splitval);  
                if (cmd !== 'cmd-test') {
                    splitval = '0';
                    nsplitval = 0;
                }
                if (splitval !== '' && !isNaN(nsplitval)) {                    
                    $("#dlg-wait-message").html('{{ "WAIT!"|trans }}');
                    classie.add(modalMsgNota, 'md-show');                
                  //  alert('1 a');
                    $.ajax({
                        type: "POST",
                        url: "{{ path('exec_split_cmd')}}",
                        data: {"id": id,"cmd":cmd,"split":splitval}
                    })
                    .done(function (v) {
                       // alert(v);
                     //   var o = JSON.parse(v);
                      //  alert(o.msg);
                    })
                    .fail(function (err) {
                        $("#err-message").html("{{ 'There was an error!'|trans }}");
                    })
                    .always(function () {
                        if (cmd === 'cmd-restore' || cmd === 'cmd-confirm') {
                            location.href = '{{ path('detail_page', {'aid':aid,'id':awbexp.awb,'prev':0,'next':0}) }}';
                        }
                        else { 
                            var modalMsgNota = document.querySelector('#id-wait-dlg');
                            classie.remove(modalMsgNota, 'md-show');  
                            while (container.hasChildNodes()) {
                                container.removeChild(container.lastChild);
                            } 
                            $(container).html('<i class="material-icons">&#xe84d;</i>');
                            fillSplitTable();
                        }
                    }); 
                }
                else {
                    showGenericMsg("{{ 'ERROR'|trans }}", "{{ 'Split value is mandatori'|trans }}", null)
                }
            } 
            function setView3D(v) {
                alert(v);
            //    changeView(v);
            }            
            function onComplete() {
            //   alert('OK');
            }            
            function onError(msg) {
                if (typeof errmsg[msg] !== 'undefined') {
                //  $('#progress').html(errmsg[msg]);                
                }
            }            
            function onProgress(v) {
                $('#progress').html(v);                 
                $(".bar").width(v + '%');
                $(".front .bar").text(v + '%');                
            }          
            $('ul.select-3d').on('click', '.choose-display',
                function (v) {                    
                    changeView(this.id);
                }
            )
            $('ul.select-3d').on('click', '.choose-obj',
                function (v) {                    
                    changeView(this.id);
                }
            )

            $('.tab-obj').on('click', '.sel-obj',
                function (v) {    
                    var v1 = this.id.replace('obj-', '');
                    if (changeObj(parseInt(v1))) {
                        $(this).parent().addClass('rowselected');
                    }
                    else {
                        $(this).parent().removeClass('rowselected');
                    }
                }
            )

            $('#execution').on('click', '.cmd-execution',
                function (v) {                    
                   execution(this.id);
                }
            )
            $(".refresh3D").off("click", ".refresh3D");
            $(".refresh3D").click(function (event) {
                event.preventDefault();
                var strid = $(this).attr('id');
                var aid = strid.split('-');
                while (container.hasChildNodes()) {
                    container.removeChild(container.lastChild);
                }                
                $(container).html('<div class="progressbar-wrapper"><div class="progressbar"><div class="side front"><div class="bar"></div></div><div class="side back"><div class="bar"></div></div><div class="side top"><div class="bar"></div></div><div class="side bottom"><div class="bar"></div></div><div class="side left"></div></div></div>');
                $(".bar").width('0%');
                $(".front .bar").text("0%");    
                changeObj(0);
                $('.tab-obj .sel-obj').parent().removeClass('rowselected');
              //  alert(url);
                start(url, container, onComplete, onError, onProgress);  
            });   
            
            $("#id-tab-split").on("click", ".actions.cmd-delete", function (event) {
                var num = $(this).data("num");
                var id = {{ parentId }};
                var modal = document.querySelector('#id-wait-dlg');                
                $("#dlg-wait-message").html('{{ "WAIT!"|trans }}');
                classie.add(modal, 'md-show');                 
                $.ajax({
                    type: "POST",
                    url: "{{ path('exec_split_cmd')}}",
                    data: {"id": id,"cmd":"cmd-delete-obj","split":num}
                })
                .done(function (v) {
                   // alert(v);
                 //   var o = JSON.parse(v);
                  //  alert(o.msg);
                })
                .fail(function (err) {
                    $("#err-message").html("{{ 'There was an error!'|trans }}");
                })
                .always(function () {
                    classie.remove(modal, 'md-show');  
                    while (container.hasChildNodes()) {
                        container.removeChild(container.lastChild);
                    } 
                    $(container).html('<i class="material-icons">&#xe84d;</i>');
                    fillSplitTable();
                }); 
                
                
                //alert($(this).data("num"));
            });
            fillSplitTable();
            
        </script>
    {% endblock %}

    {% block footer %}
    {% endblock %}