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

{% block title %}Configurator Cover{% endblock %}
{% block body_id %}cover--configurator{% endblock %}
{% block c4rg0_menuleft %}{% endblock %} 
{% block body_class %}cover-configurator cover-configurator-{{ bg_n }}{% endblock %}

{% block stylesheets %}
    {{ parent() }}
{% endblock %}
{% block quick_action %}
{% endblock %}

{% block stylesheets_last %}
    {{ parent() }}
    <link rel="stylesheet" href="{{ asset('static/configuratore/css/configuratore.css?v=202310111647') }}">
    <link rel="stylesheet" href="{{ asset('static/configuratore/css/cover.css?v=202310111647') }}">
{% endblock %}
{% block body %}

    <div class="container2">
  
        <!-- Card One -->
        <div class="item item-left col-lg-8 col-xl-8 col-md-8 col-12 col-sm-12 cover-configurator cover-configurator-left-{{ bg_n }}">

            <div class="items-head">
                <div class="col-md-6">
                    <div class="menu-block-head hidden-element" id="menu-info">
                    </div>
                </div>
            </div>

            <div class="items-card">
                <div class="col-md-4"> 			 
                    <div class="menu-block" id="menu-so">
                        <a href="{{ path('configuratore_so') }}">
                            <div class="tag-qty">{{ so_qty}}</div>
                            <section class="tile color transparent-black text-center">
                                <div class="tile-header">
                                    <span>
                                        <div class="menu-etichetta-0">{{ 'Predictive'|trans }}</div>                                    
                                        <div class="menu-etichetta-1">{{ 'SO'|trans }}</div>
                                        <div class="menu-etichetta-2">{{ 'Sales Order'|trans }}</div>
                                    </span>
                                </div>
                            </section>      
                        </a>
                    </div>
                </div>    

                <div class="col-md-4"> 			 
                    <div class="menu-block" id="menu-mo">
                        <a href="{{ path('configuratore_mo') }}">
                            <div class="tag-qty">{{ mo_qty}}</div>
                            <section class="tile color transparent-black text-center">
                                <div class="tile-header">
                                    <span>
                                        <div class="menu-etichetta-0">&nbsp;</div>                                    
                                        <div class="menu-etichetta-1">{{ 'MO'|trans }}</div>
                                        <div class="menu-etichetta-2">{{ 'Move Order'|trans }}</div>
                                    </span>
                                </div>
                            </section>      
                        </a>
                    </div>
                </div>    

                <div class="col-md-4"> 			 
                    <div class="menu-block" id="menu-do">
                        <a href="{{ path('configuratore_do') }}">
                            <div class="tag-qty">{{ do_qty }}</div>
                            <section class="tile color transparent-black text-center">
                                <div class="tile-header">
                                    <span>
                                        <div class="menu-etichetta-0">&nbsp;</div>                                    
                                        <div class="menu-etichetta-1">{{ 'DO'|trans }}</div>
                                        <div class="menu-etichetta-2">{{ 'Delivery Order'|trans }}</div>
                                    </span>
                                </div>
                            </section>      
                        </a>
                    </div>
                </div>    


                <!-- TOT PESO  OGGI -->				


            </div>
 


        </div>
        
        <!-- Card Two -->
        <div class="item item-right col-lg-4 col-xl-4 col-md-4 col-12 col-sm-12 cover-configurator cover-configurator-right">
            <div class="items-right-upper">
                
            </div>
            <div class="items-right-menu">
                <div class="col-md-6 col-lg-6 col-xl-6 col-6 col-sm-6 col-xs-6€">
                    <ul class="cover-menu">
                        <li class="cover-menu-item" id="menu-air">
                            {{ 'Air'|trans }}
                        </li>
                        <li class="cover-menu-item" id="menu-land">
                            {{ 'Land'|trans }}
                        </li>
                        <li class="cover-menu-item" id="menu-sea">
                            {{ 'Sea'|trans }}
                        </li>
                        <li class="cover-menu-item" id="menu-rail">
                            {{ 'Rail'|trans }}
                        </li>
                    </ul>
                </div>
                <div class="col-md-6 col-lg-6 col-xl-6 col-6 col-sm-6 col-xs-6">
                    <ul class="cover-submenu hidden-element">
                    </ul>
                </div>
                <div style="clear: both;">
                </div>
            </div>
            <div class="items-right-info col-md-12">
                <p>{{ 'Sostieni il Pianeta  con i DS-C4RGO 3D'|trans }}</p>
                <ul>
                    <li>
                        {{ 'Calcola in anticipo gli spazi e i mezzi di trasporto'|trans }}
                    </li>
                    <li>
                        {{ 'Verifica in sicurezza la portata degli imballi'|trans }}
                    </li>
                    <li>
                        {{ 'Trova l’imballo migliore per il tuo carico'|trans }}
                    </li>
                    <li>
                        {{ 'Riduci gli spazi vuoti del 30%'|trans }}
                    </li>
                    <li>
                        {{ 'Riduci il materiale di Imballo del 20%'|trans }}
                    </li>
                </ul>
            </div>
                <div class="col-md-12">
                    <div class="menu-block-head" id="menu-logo" style="text-align: center;">
                        <img src="{{ asset('static/images/loghi_aziende/DS-C4RGO-logo.png') }}">
                    </div>
                </div>

            <div class="items-right-bottom items-right-bottom-none">
                
            </div>
       </div>
        
    </div>


{% endblock %}
{% block javascripts %}
    {{ parent() }}

    <script type="text/javascript">
    $('.items-right-menu').on('mouseover', '.cover-menu-item', function() {
        if (!$(this).parent().is($("[class*='items-selected-menu-']"))) {
            $(".items-right-bottom").removeClass (function (index, className) {
                return (className.match (/(^|\s)items-right-bottom-\S+/g) || []).join(' ');
            });  
            $(".items-right-bottom").addClass('items-right-bottom-' + $(this).attr('id'));          
        }
    });

    $('.items-right-menu').on('mouseleave', function() {
        if (!$(this).find('ul.cover-menu').is($("[class*='items-selected-menu-']"))) {
            $(".items-right-bottom").removeClass (function (index, className) {
                return (className.match (/(^|\s)items-right-bottom-\S+/g) || []).join(' ');
            });  
            $(".items-right-bottom").addClass('items-right-bottom-none');      
        }
    });    

    $('.items-right-menu').on('click', '.cover-menu .cover-menu-item', function() {
        let _id = $(this).attr('id');
        let _classId = 'items-selected-' + _id;
        let _hasClass = $(this).parent().hasClass(_classId);
        let _subMenuStructure = {
            'menu-air': [{"label":"{{ 'Aerial Pallet'|trans }}", "id":"menu-aerial-pallet","enabled":false}
            , {"label":"{{ 'ULD'|trans }}", "id":"menu-uld","enabled":false}
            , {"label":"{{ 'Wooden Crates'|trans }}", "id":"menu-wooden-crates","enabled":false}],
            'menu-land': [{"label":"{{ 'Box'|trans }}", "id":"menu-box","enabled":true}
            , {"label":"{{ 'Pallet'|trans }}", "id":"menu-pallet","enabled":false}
            , {"label":"{{ 'Wooden Case'|trans }}", "id":"menu-wooden-case","enabled":true}
            , {"label":"{{ 'Container'|trans }}", "id":"menu-container","enabled":false}],
            'menu-sea': [{"label":"{{ 'Container'|trans }}", "id":"menu-container","enabled":false}
            , {"label":"{{ 'Wooden Crates'|trans }}", "id":"menu-wooden-crates","enabled":false}],
            'menu-rail': [{"label":"{{ 'Freight wagon'|trans }}", "id":"menu-freight-wagon","enabled":false}
            , {"label":"{{ 'Container'|trans }}", "id":"menu-container","enabled":false}],
        };
        $(this).parent().removeClass(function (index, className) {
            return (className.match (/(^|\s)items-selected-\S+/g) || []).join(' ');
        });  
        $('.cover-submenu li.cover-menu-item').removeClass('submenu-enabled');
        $('.cover-submenu').addClass('hidden-element');

        $('.cover-submenu').empty();
        if (!_hasClass) {
            $(this).parent().addClass(_classId);   
            $(".items-right-bottom").removeClass (function (index, className) {
                return (className.match (/(^|\s)items-right-bottom-\S+/g) || []).join(' ');
            });  
            $(".items-right-bottom").addClass('items-right-bottom-' + _id);  

            _subMenuStructure[_id].forEach(function(v) {
                $('<li class="cover-menu-item ' + ((v.enabled) ? 'submenu-enabled' : '')+ '" id="' + v.id + '">' + v.label + '</li>').appendTo('.cover-submenu');
            });
            $('.cover-submenu').removeClass('hidden-element');
        }
    });


    </script>
{% endblock %}