{% extends 'base.html.twig' %}
{% block body_id 'welcomeadmin' %}
{% block title %}{{ "C4rgo Roi Calculator"|trans }}{% endblock %}
{% block body_class %}bg-roi no-zoom{% endblock %}
{% block stylesheets %}
    {{ parent() }}
    
    <link rel='stylesheet' href='{{ asset('static/nouislider/css/nouislider.min.css?v=' ~ cacheupdate) }}'>
    <link rel="stylesheet" href="{{ asset('static/c4rgoroicalc/css/style.css?v=' ~ cacheupdate) }}">
    <link rel="stylesheet" href="{{ asset('static/c4rgoroicalc/css/page.css?v=' ~ cacheupdate) }}">

{% endblock %}
{% block modal %}
    {{ parent() }}
    {% include 'modal/dettaglio_roi.html.twig' %} 
    {% include 'modal/legenda_roi.html.twig' %} 
    <div class="md-overlay"></div>
{% endblock %}
{% block  menuleft %}
{% endblock %}
{% block head_img %}
 <div class="align-self-center" style="background-color: transparent; min-height: 100px;">
  </div>
  {% endblock %}
{% block body %}
<input type="hidden" id="fullname" name="fullname" value="{{ fullname }}" />
<input type="hidden" id="company" name="company" value="{{ company }}" />
<input type="hidden" id="email" name="email" value="{{ email }}" />
    <div id="wrap" class="inv-zoom">
            
        <div class="row">
                <div class="col-md-4 d-xl-flex calculator shadow rounded overflow-hidden area-left area-info" style="z-index: 100; height: 86vh;">
                    <div class="model-image">
					  <img class="main-roi-img w-100 mb-3 roi-blocco-testata top-page" src="/static/c4rgoroicalc/images/Top_Roi_pag.png" alt="ROI"/><br>
                      <img src="/static/c4rgoroicalc/ds_c4rgo_{{ modello }}.png" alt="{{ modello }}" width="100%">
                    </div>
                    <div class="bg-light-alpha col-xl-3 p-5 text-center d-flex blocco-info">
                        <div class="align-self-center">
                            <img class="main-img w-100 mb-3 blocco-testata hidden-element" src="/static/images/TOP-ROI_.png" alt="ROI"/>
                            <div id="roi-legenda-testata-cmd" class="roi-legenda-cmd blocco-testata-cmd" data-toggle="0">
                                <i class="fa fa-eye"></i>{{ 'Legenda'|trans }}
                            </div>
                            <div id="roi-risultati-testata-cmd" class="roi-risultati-cmd blocco-testata-cmd" data-toggle="0">
                                <i class="fa fa-eye"></i>{{ 'Dettaglio'|trans }}
                            </div>
                            <div id="roi-risultati-testata" class="roi-risultati-testata blocco-testata hidden-element" style="max-height: 26vh; overflow: overlay; padding: 1em;">
                            </div>
                            <strong class="text-primary d-block mb-0">Sistemi di rilevazione Peso-Volume Semi-Automatico  Fissi & Mobile &nbsp;&nbsp;</strong>
                            <a href="https://www.c4rgo.com" target="_blank" class="mt-4 btn btn-primary bg-secondary-green text-uppercase">Scopri  l'efficienza dell'Innovazione.</a>
<!--                            <div id="roi-risultati" class="roi-risultati" style="max-height: 52vh; overflow: overlay; padding: 1em;">
                            </div>
                            <div id="roi-risultati-2" class="roi-risultati roi-risultat-2" style="max-height: 52vh; overflow: overlay; padding: 1em;">
                            </div>-->

                            <button id="send-by-email" class="md-close btn btn-default btn-send-by-email" data-url="{{ path('api_send_mail_c4rgo_roi') }}" data-subject="{{ 'C4RGO ROI'|trans }}">{{ "Send by email"|trans }}</button>
                            <div id="send-email-response-ok" class="send-email-response send-ok hidden-element">{{ 'Email correctly sent'|trans }}</div>
                            <div id="send-email-response-err" class="send-email-response send-err hidden-element">{{ 'Something get wrong while sending the email'|trans }}</div>
                        </div>
                    </div>
                </div>
        
	<div id="content-2" class="col-md-8 area-slide">
                <div class="col-md-12 area-right">   
                    {% for _val in slide %}
                        <div class="row">
                            <div class="col-md-12">
                                <section class="tile transparent">
                                    <!-- tile widget -->
                                    <div class="tile-widget color transparent-black rounded-top-corners slide-container title-{{ _val.gruppo_classe }}">
                                        {{ _val.gruppo }}
                                    </div>
                                    <div class="blocco-slide" {{ _val.gruppo_classe }}>
                                        {% for _s in _val.items %}
                                            <div class="row">
                                                <div class="col-md-12">
                                                    <!-- tile widget -->
                                                        <div class="tile-widget color transparent-black rounded-top-corners slide-container">
                                                            <div class="col-xl-9 p-5">
                                                                <div class="col-md-2 bg-white valore-slide" id="valore-slide-{{ _s.tipo }}" data-valore="0">
                                                                    &nbsp;
                                                                </div>    
<!--                                                                <div class="col-md-1 " id="um-slide-{{ _s.tipo }}" data-valore="0">
                                                                    {{ _s.unitamisura_post|default('') }}
                                                                </div>    
-->                                                                <div class="col-md-10">
<!--/*                                                                <p class="lead fw-normal mt-0 mb-2">{{ _s.titolo }}</p>
*/-->                                                                <p class="sottotitolo">{{ _s.sottotitolo }} [ {{ _s.tipo }} ] </p>     
                                                                </div>
                                                                <div style="clear: both;"></div>
                                                                <div class="my-5 pb-2">
                                                                    <div class="form-group">
                                                                        <div class="slider-styled slider-c4rgo-roi-calc" id="slider-c4rgo-roi-calc-{{ _s.tipo }}" 
                                                                            data-tipo="{{ _s.tipo }}" 
                                                                            data-realmin="{{ _s.realmin|default(0) }}" 
                                                                            data-step="{{ _s.step }}"
                                                                            data-values="{{ _s.values }}"
                                                                            data-density="{{ _s.density }}"
                                                                            data-min="{{ _s.min }}"
                                                                            data-max="{{ _s.max }}"
                                                                            data-divisore="{{ _s.divisore|default(1) }}" 
                                                                            data-unitamisurapre="{{ _s.unitamisura_pre|default('') }}"
                                                                            data-unitamisurapost="{{ _s.unitamisura_post|default('') }}"
                                                                            data-descr="{{ _s.sottotitolo }}"
                                                                        ></div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                </div>
                                            </div>
                                        {% endfor %}
                                    </div>
                                </section>
                            </div>
                        </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>




{% endblock %}

{% block footer %}
{% endblock %}

{% block javascripts %}
    {{ parent() }}    
    <script type="text/javascript" src="{{ asset('static/js/base64.js') }}"></script>
    <script type="text/javascript" src="{{ asset('static/js/number_format.js') }}"></script>
    <script src='{{ asset('static/nouislider/js/nouislider.min.js?v=' ~ cacheupdate) }}'></script>
    <script src="{{ asset('static/c4rgoroicalc/js/script.js?v=' ~ cacheupdate) }}"></script>
    <script>
        $(function() {
            $('#roi-risultati-testata-cmd').on('click',
                function(v) {
                    showDettaglioROI('', '', null, null);
                }
            );
            $('#roi-legenda-testata-cmd').on('click',
                function(v) {
                    showLegendaROI('', '', null, null);
                }
            );
        });
    </script>

{% endblock %}