{% extends 'base.html.twig' %}
{% block body_id 'configuratore' %}
{% block logo_cliente %}
<img class="c4rgo-logo" src="{{ asset('static/c4rg0_themes/assets/images/icons/DDP-ML_ICO.png') }}" alt="c4rgo logo">
{% endblock %}
		
{% block body_class %}bg-10{% endblock %}
{% block title %}{{ 'Configurator'|trans }}{% endblock %}

{% block quick_action %}{% endblock %}	
{% block  c4rg0_menuleft %}{% endblock %}


{% block stylesheets %}
    {{ parent() }}
    <style>
        

#configbutton, #zoominbutton, #zoomoutbutton, #exitbutton {
    display: none;


    #configbutton, #zoominbutton, #zoomoutbutton, #exitbutton {
        display: none;
    }

    #svgnest .button {
        background-color: #22beef !important;        border-color: #22beef !important;        color: black !important;
    }
#info_time {
    min-height: 40px;
}

        </style>



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

    <div id="content" class="col-md-12">
        <div id="wrap" class="col-md-12">
            <div class="row">
                <div id="content" class="col-md-12">
                    <div class="col-md-12">




                        <section class="tile transparent" id="id-search-block" style="margin-top: 55px;">
                            <!-- tile widget -->
                            <div class="tile-widget color transparent-black rounded-top-corners">
                                <div class="block-menu-filter menu-start">
                                    <div class="btn-group btn-w100" style="padding-right: 20px; width: unset; display: inline-block;">
                                        <a href="{{ path('configuratore_mo') }}">
                                            <h1>
                                                <img src="{{ asset('/static/c4rg0_themes/assets/images/icons/DDP-ML_ICO.png') }}" style="/* height: 90%; *//* margin-top: 10px; */width:  64px;" alt="">
                                                {{ 'Configurator'|trans }}
                                            </h1>
                                        </a>
                                    </div>
        
                                </div>
                                <div class="block-menu-filter menu-center">
                                    <div class="btn-group btn-w100">
                                    </div>
                                </div>
                                <div class="block-menu-filter menu-end">
                                    <div class="btn-group">
                                    </div>

                                    <div class="btn-group">
                                        <a class="on-close-btn" href="javascript:window.history.back();" title="Back"><div class="user-close"><i class="fas fa-chevron-circle-left"></i></div></a>
                                    </div>
                                </div>
                            </div>

                        </section>
                    </div> 
					<div>        
						<div class="col-md-2">
							<section class="tile transparent">



								<section id="search-result" class="tile transparent">

									<div class="{{ msgclass|raw }}">
										{{ msg|raw }}
									</div>

								</section>
											
								<section class="tile transparent" id="selected-items-list">
									<div class="tile-header color transparent-black rounded-corners">
										<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 class="tile-body color transparent-black rounded-corners">
										<div class="table-responsive">
										<div class="tile-body color transparent-black rounded-corners">
											<div class="tab-obj table-responsive">
												<div id="id-error-msg" class="error-red"></div>
												<table id="items-result" class="tab-order-items display search-result table-datatable master" style="width:100%">
													<thead>
														<tr data-src="0">
															<th width="80" class="sort-numeric" style="min-width: 10%; text-align: center;">
																<h3 style="vertical-align: bottom;">{{ 'ID'|trans }}</h3>
															</th>
															<th width="80" class="sort-alpha" style="min-width: 10%; text-align: center;">
																<h3>{{ 'Code'|trans }}</h3>
															</th>
															<th width="80" class="sort-alpha" style="min-width: 10%; text-align: center;">
																<h3>&nbsp;</h3>
															</th>
															<th width="80" class="sort-alpha" style="min-width: 10%; text-align: center;">
																<h3>&nbsp;</h3>
															</th>
															<th width="80" class="sort-numeric" style="min-width: 10%; text-align: center;">
																<h3>{{ 'Wreight'|trans }} {{ '[Kg]'|trans }}</h3>
															</th>
															<th width="80" class="sort-numeric" style="min-width: 10%; text-align: center;">
																<h3>{{ 'Volume'|trans }} {{ '[m3]'|trans }}</h3>
															</th>
															<th width="80" class="sort-numeric" style="min-width: 10%; text-align: center;">
																<h3>{{ 'L'|trans }} {{ '[m]'|trans }}</h3>
															</th>
															<th width="80" class="sort-numeric" style="min-width: 10%; text-align: center;">
																<h3>{{ 'W'|trans }} {{ '[m]'|trans }}</h3>
															</th>
															<th width="80" class="sort-alpha" style="min-width: 10%; text-align: center;">
																<h3>{{ 'Size'|trans }} {{ '[m]'|trans }}</h3>
															</th>
															<th width="80" class="sort-numeric" style="min-width: 10%; text-align: center;">
																<h3>{{ 'Qty'|trans }} {{ '[m]'|trans }}</h3>
															</th>
														</tr>
													</thead>
												</table>
											</div>
										</div>
										</div>
									</div>
								</section>                                    
							</section>
						</div>
						<div class="col-md-10">
							<section class="tile transparent">
								<section id="msg-result" class="tile transparent">
									<div class="{{ msgclass|raw }}">
										{{ msg|raw }}
									</div>
								</section>								
								<section class="tile transparent" id="selected-svg">

									<div class="tile-header color transparent-black rounded-corners">
										<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 class="tile-body color transparent-black rounded-corners">
										<div class="tile-widget color transparent-black rounded-top-corners">
											<div class="block-menu-filter menu-start">
												<div class="btn-group btn-w100" style="padding-right: 20px; width: unset; display: inline-block;">
													<div id="id-box-vol">
														<ul class="friend-list">
																<li class="box-vol box-vol-1 box-vol-inbound">
																	<div class="media">
																		<div class="media-body">
																			<a class="pull-left">
																				<img class="media-object " src="{{ asset('/static/c4rg0_themes/assets/images/icons/INBOUND_icoBNC_G.png') }}" alt="" width="47px">
																			</a>
																		</div>
																		<button data-id="1" type="button" class="btn-volume btn btn-hotpink margin-left-20">{{ 'IN BOUND'|trans }}</button>
																	</div>
																</li>
																<li class="box-vol box-vol-4 box-vol-v-shape ">
																	<div class="media">
																		<div class="media-body">
																			<a class="pull-left">
																				<img class="media-object " src="{{ asset('/static/c4rg0_themes/assets/images/icons/REALE_icoBNC_G.png') }}" alt="" width="47px">
																			</a>
																		</div>
																		<button data-id="4" type="button" class="btn-volume btn btn-greensea margin-left-20">{{ 'V - SHAPE'|trans }}</button>
																	</div>
																</li>
															</ul>
													</div>

												</div>
					
											</div>
											<div class="block-menu-filter menu-center">
												<div class="btn-group btn-w100">
												</div>
											</div>
											<div class="block-menu-filter menu-end">
											</div>
										</div>
										<div class="svg-responsive">
											<div class="tile-body color transparent-black rounded-corners">
												<div class="tab-obj svg-responsive">
													<div id="id-error-msg" class="error-red"></div>
													<div id="svg-riassuntivo"></div>
												</div>
											</div>
										</div>
									</div>
								</section>
							</section>
						</div>						
					</div>
				</div>
			</div>


			<div class="row hidden-element">        
				<div class="col-md-12">

				<!-- tile -->
					<section class="tile transparent">



						<section id="search-result" class="tile transparent">

							<div class="{{ msgclass|raw }}">
								{{ msg|raw }}
							</div>

						</section>
									
						<section class="tile transparent col-md-12" id="selected-items-list">
							<div class="tile-header color transparent-black rounded-corners">
								<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 class="tile-body color transparent-black rounded-corners">
								<div class="table-responsive">
								<div class="tile-body color transparent-black rounded-corners">
									<div class="tab-obj table-responsive">
										<div id="id-error-msg" class="error-red"></div>
										<table id="items-result-full" class="tab-order-items display search-result table-datatable master" style="width:100%">
											<thead>
												<tr data-src="0">
													<th width="80" class="sort-numeric" style="min-width: 10%; text-align: center;">
														<h3 style="vertical-align: bottom;">{{ 'ID'|trans }}</h3>
													</th>
													<th width="80" class="sort-alpha" style="min-width: 10%; text-align: center;">
														<h3>{{ 'Code'|trans }}</h3>
													</th>
													<th width="80" class="sort-alpha" style="min-width: 10%; text-align: center;">
														<h3>&nbsp;</h3>
													</th>
													<th width="80" class="sort-alpha" style="min-width: 10%; text-align: center;">
														<h3>&nbsp;</h3>
													</th>
													<th width="80" class="sort-numeric" style="min-width: 10%; text-align: center;">
														<h3>{{ 'Wreight'|trans }} {{ '[Kg]'|trans }}</h3>
													</th>
													<th width="80" class="sort-numeric" style="min-width: 10%; text-align: center;">
														<h3>{{ 'Volume'|trans }} {{ '[m3]'|trans }}</h3>
													</th>
													<th width="80" class="sort-numeric" style="min-width: 10%; text-align: center;">
														<h3>{{ 'L'|trans }} {{ '[m]'|trans }}</h3>
													</th>
													<th width="80" class="sort-numeric" style="min-width: 10%; text-align: center;">
														<h3>{{ 'W'|trans }} {{ '[m]'|trans }}</h3>
													</th>
													<th width="80" class="sort-numeric" style="min-width: 10%; text-align: center;">
														<h3>{{ 'Qty'|trans }} {{ '[m]'|trans }}</h3>
													</th>
												</tr>
											</thead>
										</table>
									</div>
								</div>
								</div>
							</div>
						</section>                                    
					</section>
				</div>
			</div>




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




{% endblock %}

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


	
	<script type="text/javascript" src="{{ asset('static/c4rg0_themes/assets/js/vendor/justgage/justgage.js') }}"></script>
	<script type="text/javascript" src="{{ asset('static/c4rg0_themes/assets/js/vendor/parsley/parsley.min.js') }}"></script>
	<script type="text/javascript" src="{{ asset('static/DataTables-1.11/datatables.min.js') }}"></script>
	<script type="text/javascript" src="{{ asset('static/DataTables/dataTables.fixedHeader.min.js') }}"></script>
	<script type="text/javascript" src="{{ asset('static/js/moment/moment.min.js') }}"></script>
	<script type="text/javascript" src="{{ asset('static/js/datetime.js') }}"></script>
	<script type="text/javascript" src="{{ asset('bundles/pugxautocompleter/js/autocompleter-jqueryui.js') }}"></script>
	<script type="text/javascript" src="{{ asset('/static/js/jquery.dataTables.rowReordering.js') }}"></script>

    <script type="text/javascript" src="{{ asset('static/js/fabric.min.js') }}"></script>


    <script>
		// UI-specific stuff, button clicks go here
		function ready(fn){
			if (document.readyState != 'loading'){
				fn();
			}
			else {
				document.addEventListener('DOMContentLoaded', fn);
			}
		}
		
		ready(function(){

			table2 = $('#items-result').DataTable({
				"ajax": {
					"type": "GET",
					"url": "{{ path('api_configuratore', {'tipocodice': tipocodice,'codice': codice,'tipo': tipo}) }}",
					"dataSrc": function(json) {
						$('#search #search-result .error-red').html('');
						$('#search #search-result .error-red').hide();
						if (json.err === 0) {	
							if (json.container.length > 0) {	
								$('#svg-riassuntivo').html(json.container[0].svg_completo_ch)
							}
							return json.data;
						} else {
							$('#search #search-result .error-red').html(json.errmsg);
							$('#search #search-result .error-red').show();
							return [];
						}
					}
				},
				"paging": false,
				"searching": false, 
				"dom": '<"toolbar">frtip',
				"language": {
					"search": "{{ 'Filter records'|trans }}:"
				},
				"fixedHeader": false,
				"lengthMenu": [
					25,
					50,
					100,
					200,
					500
				],
				"language": {"infoEmpty": "{{ 'No records available'|trans }}","info": "{{ 'Showing _TOTAL_ entries'|trans }}"},
				"deferRender": true,
				"columns": [
					{"data": 'cid'},
					{"data": "cobj_code"},
					{"data": null, "className": 'dt-svg'},
					{"data": null, "className": 'dt-svg'},
					{"data": 'NetWeight'},
					{"data": 'Volume'},
					{"data": 'LPackage'},
					{"data": 'WPackage'},
					{"data": null},
					{"data": 'quantity'}
				],
				"order": [
						[0, "asc"]
				],			
				"columnDefs": [
					{
						"visible": false,
						"targets":0
					},
					{
						"render": function(data, type, row) {
							if (row.svg_completo_ch === false) {
								return "";
							}
							else {
								return row.svg_completo_ib;
							}
						},
						"visible": false,
						"targets": 2
					},
		
					{
						"render": function(data, type, row) {
							if (row.svg_completo_ch === false) {
								return "";
							}
							else {
								return row.svg_completo_ch;
							}
						},
						"visible": false,
						"targets": 3
					},				
					{
						"visible": false,
						"targets": 4
					},
					{
						"visible": false,
						"targets": 5
					},
					{
						"visible": false,
						"targets": 6
					},
					{
						"visible": false,
						"targets": 7
					},
					{
						"render": function(data, type, row) {
							return row.LPackage + "x" + row.WPackage;
						},
						"className": 'text-center',
						"targets": 8
					}

				],
				"drawCallback": function () {
				}, 
				"draw": function() {
				},
				"createdRow": function(row, data, index) {
					$(row).attr('id', 'item-id-' +  data.box_id + '-' + data.cid);
				}
		});
			
		
		$('#svg-riassuntivo').on("click", ".svg-global",
			function(s) {
				//alert($(this).attr("id"));
				$(".svg-global").each(function( index ) {
					this.classList.remove("selected");
				});				
				this.classList.add("selected");
				let id = $(this).data('itemid');
				$('#items-result tr').removeClass('selected');
				$('#items-result tr#' + id).addClass('selected');
			}

		)

		$('#selected-svg').on("click", "#id-box-vol button",
			function selectVolumeType() {
				let id = $(this).data('id');
				switch(id) {
					case 1:
					location.href = "{{ path('page_configuratore', {'codice':codice, 'tipo':'I'}) }}";
					break;
					case 4:
					location.href = "{{ path('page_configuratore', {'codice':codice, 'tipo':'R'}) }}";
					break;
					default:
					location.href = "{{ path('page_configuratore', {'codice':codice, 'tipo':'I'}) }}";
					break;
				}
			}
		)


		});
		</script>    

{% endblock %}