{% extends "base/templates/base.html" %}

{% block breadcumb %}
	<ul class="breadcrumb">
		<li><a href="/"><i class="icon-home2 position-left"></i>Principal</a></li>
		<li class="active">Registrar Envío</li>
	</ul>
{% endblock %}

{% block content %}

	<form method="post" name="registrarEnvioForm" action="" enctype="multipart/form-data">
		{% csrf_token %}
		{{form.id}}{{form.errors.id}}
		{{ form.non_field_errors }}

		<div class="tab-content">
			<!-- informacion general -->
			<div class="tab-pane has-padding active" id="informacion_general">
				<div class="row">
					<div class="col-md-6 col-sm-12">
						<div class="row">
							<div class="col-md-6 col-sm-12">
								<div class="form-group">
									<label>OCE:</label>
									{{ form.oce }}{{ form.errors.oce }}
								</div>
							</div>
						</div>
						<div class="row">
							<div class="col-md-6 col-sm-12">
								<div class="form-group">
									<label>Fecha Apertura:</label>
									{{ form.fecha_apertura }}{{ form.errors.fecha_apertura }}
								</div>
							</div>
							<div class="col-md-6 col-sm-12 imp">
								<div class="form-group">
									<label>Fecha Arribo:</label>
									{{ form.fecha_arribo }}{{ form.errors.fecha_arribo }}
								</div>
							</div>
						</div>
						<div class="row">
							<div class="col-md-12 col-sm-12">
								<div class="form-group">
									<label>Cliente:</label>
									{{ form.cliente_id }}{{ form.errors.cliente_id }}
								</div>
							</div>
						</div>
						<div class="row">
							<div class="col-md-12 col-sm-12 imp">
								<div class="form-group">
									<label>Número Manifiesto:</label>
									{{ form.numero_manifiesto }}{{ form.errors.numero_manifiesto }}
								</div>
							</div>
						</div>
						<div class="row">
							<div class="col-md-12 col-sm-12">
								<div class="form-group">
									<label>Línea Naviera:</label>
									{{ form.linea_naviera_id }}{{ form.errors.linea_naviera_id }}
								</div>
							</div>
						</div>
						<div class="row">
							<div class="col-md-12 col-sm-12">
								<div class="form-group">
									<label>Agencia de Carga/Consolidadora:</label>
									{{ form.agencia_carga_id }}{{ form.errors.agencia_carga_id }}
								</div>
							</div>
						</div>
						<div class="row">
							<div class="col-md-12 col-sm-12">
								<div class="form-group">
									<label>Bodega:</label>
									{{ form.bodega_id }}{{ form.errors.bodega_id }}
								</div>
							</div>
						</div>
						<div class="row">
							<div class="col-md-12 col-sm-12">
								<div class="form-group">
									<label>Carga Contenedorizada:</label>
									{{ form.carga_contenedorizada }}{{ form.errors.carga_contenedorizada }}
								</div>
							</div>
						</div>
						<div class="row" id="info_carga_contenedorizada">
							<div class="col-md-6 col-sm-12">
								<div class="form-group">
									<label>Fecha Expiración Salida:</label>
									{{ form.fecha_expiracion_salida }}{{ form.errors.fecha_expiracion_salida }}
								</div>
							</div>
							<div class="col-md-6 col-sm-12">
								<div class="form-group">
									<label>Días Libres:</label>
									{{ form.dias_libres }}{{ form.errors.dias_libres }}
								</div>
							</div>
						</div>
						<div class="row">
							<div class="col-md-12 col-sm-12">
								<div class="form-group">
									<label>Número BL:</label>
									{{ form.numero_bl }}{{ form.errors.numero_bl }}
								</div>
							</div>
						</div>
						<div class="row">
							<div class="col-md-12 col-sm-12">
								<div class="form-group">
									<label>Número Master BL:</label>
									{{ form.numero_master_bl }}{{ form.errors.numero_master_bl }}
								</div>
							</div>
						</div>
						<div class="row">
							<div class="col-md-12 col-sm-12">
								<div class="form-group">
									<label>Ejecutivo:</label>
									{{ form.ejecutivo_id }}{{ form.errors.ejecutivo_id }}
								</div>
							</div>
						</div>
						{% if envio and envio.canal_aforo == envio.AFORO_FISICO_INTRUSIVO %}
							<div class="row">
								<div class="col-md-12 col-sm-12">
									<div class="form-group">
										<label>Inspector:</label>
										{{ form.inspector_id }}{{ form.errors.inspector_id }}
									</div>
								</div>
							</div>
						{% endif %}
						
						<!-- adionales para EXP -->
						<div class="row exp">
							<div class="col-md-12 col-sm-12">
								<div class="form-group">
									<label>Booking Reserva:</label>
									{{ form.booking_reserva }}{{ form.errors.booking_reserva }}
								</div>
							</div>
						</div>
						<div class="row exp">
							<div class="col-md-12 col-sm-12">
								<div class="form-group">
									<label>Cut Off F&iacute;sico:</label>
									{{ form.cut_off_fisico }}{{ form.errors.cut_off_fisico }}
								</div>
							</div>
						</div>
						<div class="row exp">
							<div class="col-md-12 col-sm-12">
								<div class="form-group">
									<label>Cut Off Documental:</label>
									{{ form.cut_off_documental }}{{ form.errors.cut_off_documental }}
								</div>
							</div>
						</div>
						<div class="row exp">
							<div class="col-md-12 col-sm-12">
								<div class="form-group">
									<label>Exonerado Pago Almacenaje:</label>
									{{ form.exonerado_pago_almacenaje }}{{ form.errors.exonerado_pago_almacenaje }}
								</div>
							</div>
						</div>
						<div class="row exp">
							<div class="col-md-12 col-sm-12">
								<div class="form-group">
									<label>Fecha Zarpe Tentativa:</label>
									{{ form.fecha_zarpe_tentativa }}{{ form.errors.fecha_zarpe_tentativa }}
								</div>
							</div>
						</div>
					</div>
					
					<!-- bloque de la derecha(con seguro) -->
					<div class="col-md-6 col-sm-12" >
						<div class="panel-heading ">
							<h6 class="panel-title">Con seguro {{ form.con_seguro }}{{ form.errors.con_seguro }}</h6>
						</div>
						<div class="panel panel-default" id="info_con_seguro">
							<div class="panel-body">
								<div class="row">
									<div class="col-sm-12">
										<div class="form-group">
											<label>Fecha Emisión Seguro</label>
											{{ form.fecha_emision_seguro }}{{ form.errors.fecha_emision_seguro }}
										</div>
									</div>
								</div>
								<div class="row">
									<div class="col-sm-12">
										<div class="form-group">
											<label>Aseguradora</label>
											{{ form.aseguradora_id }}{{ form.errors.aseguradora_id }}
										</div>
									</div>
								</div>
								<div class="row">
									<div class="col-sm-6">
										<div class="form-group">
											<label>Número Poliza</label>
											{{ form.numero_poliza }}{{ form.errors.numero_poliza }}
										</div>
									</div>
									<div class="col-sm-6">
										<div class="form-group">
											<label>Número Aplicación</label>
											{{ form.numero_aplicacion }}{{ form.errors.numero_aplicacion }}
										</div>
									</div>
								</div>
								<div class="row">
									<div class="col-sm-6">
										<div class="form-group">
											<label>Monto Aseguradora</label>
											{{ form.monto_aseguradora }}{{ form.errors.monto_aseguradora }}
										</div>
									</div>
									<div class="col-sm-6">
										<div class="form-group">
											<label>Prima Bruta</label>
											{{ form.prima_bruta }}{{ form.errors.prima_bruta }}
										</div>
									</div>
									<div class="col-sm-6">
										<div class="form-group">
											<label>Prima Neta</label>
											{{ form.prima_neta }}{{ form.errors.prima_neta }}
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- fin informacion general -->
		</div>

		<br/>
		
		<div class="tabbable tab-content-bordered">
			<ul class="nav nav-tabs nav-tabs-highlight">
				<li class="active"><a href="#contenedores" data-toggle="tab">Contenedores</a></li>
				<li><a href="#cargas" data-toggle="tab">Cargas Sueltas</a></li>
				<li><a href="#graneles" data-toggle="tab">Graneles</a></li>
			</ul>
			<div class="tab-content">
				<!-- contenedores -->
				<div class="tab-pane has-padding active" id="contenedores">
					<div class="table-responsive">
						<table class="table table-togglable table-hover tabla-menos-padding">
							<thead>
								<tr class="bg-slate">
									<th class="text-center">Tipo</th>
									<th class="text-center">Código</th>
									<th class="text-center">Valor Garantía</th>
									<th class="text-center">Peso Bruto Manifestado</th>
									<th class="text-center">Peso Neto Manifestado</th>
									<th class="text-center">Peso Bruto</th>
									<th class="text-center">Peso Neto</th>
									<th class="text-center">Tara</th>
									<th class="text-center">Descripción</th>
									<th></th>
								</tr>
							</thead>
							<tbody id="tdetalle_contenedor">
								<tr id="dtemplate_contenedor" class="hide">
									<td>{{ form.template_detalle_contenedor.tipo }}</td>
									<td>{{ form.template_detalle_contenedor.codigo }}</td>
									<td>{{ form.template_detalle_contenedor.valor_garantia }}</td>
									<td>{{ form.template_detalle_contenedor.peso_bruto_manifestado }}</td>
									<td>{{ form.template_detalle_contenedor.peso_neto_manifestado }}</td>
									<td>{{ form.template_detalle_contenedor.peso_bruto_recibido }}</td>
									<td>{{ form.template_detalle_contenedor.peso_neto_recibido }}</td>
									<td>{{ form.template_detalle_contenedor.tara_recibido }}</td>
									<td>{{ form.template_detalle_contenedor.descripcion }}</td>
									<td class="text-center"><a class="text-danger" href="javascript:;" onclick="envio.detalles_contenedores.eliminarDetalle(this); return false;"><span class="icon-trash"></span></a></td>
								</tr>
								{% for cont in form.detalles_contenedores %}
									<tr>
										<td class="text-center">{{ cont.id }}{{ cont.tipo }}{{ cont.errors.tipo }}</td>
										<td>{{ cont.codigo }}{{ cont.errors.codigo }}</td>
										<td>{{ cont.valor_garantia }}{{ cont.errors.valor_garantia }}</td>
										<td>{{ cont.peso_bruto_manifestado }}{{ cont.errors.peso_bruto_manifestado }}</td>
										<td>{{ cont.peso_neto_manifestado }}{{ cont.errors.peso_neto_manifestado }}</td>
										<td>{{ cont.peso_bruto_recibido }}{{ cont.errors.peso_bruto_recibido }}</td>
										<td>{{ cont.peso_neto_recibido }}{{ cont.errors.peso_neto_recibido }}</td>
										<td>{{ cont.tara_recibido }}{{ cont.errors.tara_recibido }}</td>
										<td>{{ cont.descripcion }}{{ cont.errors.descripcion }}</td>
										<td class="text-center"><a class="text-danger" href="javascript:;" onclick="envio.detalles_contenedores.eliminarDetalle(this); return false;"><span class="icon-trash"></span></a></td>
									</tr>
								{% endfor %}
							</tbody>
							<tfoot>
								<tr>
									<td colspan="10"><a class="btn btn-xs btn-flat" href="javascript:;" onclick="javascript:envio.detalles_contenedores.agregarDetalle();"><i class="icon-plus-circle2"></i> Agregar Contenedor</a></td>
								</tr>
							</tfoot>
						</table>
					</div>
				</div>
				<!-- fin contenedores -->
				<!-- cargas -->
				<div class="tab-pane has-padding" id="cargas">
					<div class="table-responsive">
						<table class="table table-togglable table-hover tabla-menos-padding">
							<thead>
								<tr class="bg-slate">
									<th class="text-center">Tipo</th>
									<th class="text-center">Cantidad</th>
									<th class="text-center">Embalaje</th>
									<th class="text-center">Peso Bruto</th>
									<th class="text-center">Peso Neto</th>
									<th class="text-center">Descripción</th>
									<th></th>
								</tr>
							</thead>
							<tbody id="tdetalle_carga">
								<tr id="dtemplate_carga" class="hide">
									<td>{{ form.template_detalle_carga.tipo }}</td>
									<td>{{ form.template_detalle_carga.cantidad }}</td>
									<td>{{ form.template_detalle_carga.embalaje }}</td>
									<td>{{ form.template_detalle_carga.peso_bruto_recibido }}</td>
									<td>{{ form.template_detalle_carga.peso_neto_recibido }}</td>
									<td>{{ form.template_detalle_carga.descripcion }}</td>
									<td class="text-center"><a class="text-danger" href="javascript:;" onclick="envio.detalles_cargas.eliminarDetalle(this); return false;"><span class="icon-trash"></span></a></td>
								</tr>
								{% for c in form.detalles_cargas %}
									<tr>
										<td>{{ c.id }}{{ c.tipo }}{{ c.errors.tipo }}</td>
										<td>{{ c.cantidad }}{{ c.errors.cantidad }}</td>
										<td>{{ c.embalaje }}{{ c.errors.embalaje }}</td>
										<td>{{ c.peso_bruto_recibido }}{{ c.errors.peso_bruto_recibido }}</td>
										<td>{{ c.peso_neto_recibido }}{{ c.errors.peso_neto_recibido }}</td>
										<td>{{ c.descripcion }}{{ c.errors.descripcion }}</td>
										<td class="text-center"><a class="text-danger" href="javascript:;" onclick="envio.detalles_cargas.eliminarDetalle(this); return false;"><span class="icon-trash"></span></a></td>
									</tr>
								{% endfor %}
							</tbody>
							<tfoot>
								<tr>
									<td colspan="10"><a class="btn btn-xs btn-flat" href="javascript:;" onclick="javascript:envio.detalles_cargas.agregarDetalle();"><i class="icon-plus-circle2"></i> Agregar Carga</a></td>
								</tr>
							</tfoot>
						</table>
					</div>
				</div>
				<!-- fin cargas-->
				<!-- graneles -->
				<div class="tab-pane has-padding" id="graneles">
					<div class="table-responsive">
						<table class="table table-togglable table-hover tabla-menos-padding">
							<thead>
								<tr class="bg-slate">
									<th class="text-center">Cantidad</th>
									<th class="text-center">Peso Bruto</th>
									<th class="text-center">Peso Neto</th>
									<th class="text-center">Descripción</th>
									<th></th>
								</tr>
							</thead>
							<tbody id="tdetalle_granel">
								<tr id="dtemplate_granel" class="hide">
									<td>{{ form.template_detalle_granel.cantidad }}</td>
									<td>{{ form.template_detalle_granel.peso_bruto_recibido }}</td>
									<td>{{ form.template_detalle_granel.peso_neto_recibido }}</td>
									<td>{{ form.template_detalle_granel.descripcion }}</td>
									<td class="text-center"><a class="text-danger" href="javascript:;" onclick="envio.detalles_graneles.eliminarDetalle(this); return false;;"><span class="icon-trash"></span></a></td>
								</tr>
								{% for g in form.detalles_graneles %}
									<tr>
										<td class="text-center">{{ g.id }}{{ g.cantidad }}{{ g.errors.cantidad }}</td>
										<td>{{ g.peso_bruto_recibido }}{{ g.errors.peso_bruto_recibido }}</td>
										<td>{{ g.peso_neto_recibido }}{{ g.errors.peso_neto_recibido }}</td>
										<td>{{ g.descripcion }}{{ g.errors.descripcion }}</td>
										<td class="text-center"><a class="text-danger" href="javascript:;" onclick="envio.detalles_graneles.eliminarDetalle(this); return false;"><span class="icon-trash"></span></a></td>
									</tr>
								{% endfor %}
							</tbody>
							<tfoot>
								<tr>
									<td colspan="10"><a class="btn btn-xs btn-flat" href="javascript:;" onclick="javascript:envio.detalles_graneles.agregarDetalle();"><i class="icon-plus-circle2"></i> Agregar Carga</a></td>
								</tr>
							</tfoot>
						</table>
					</div>
				</div>
				<!-- fin graneles -->
			</div>
		</div>
	</form>

<div class="row">
	<div class="col-sm-12">
		<br>
		<button class="btn btn-success btn-sm" onclick="registrarEnvio(this);"><span class="icon-floppy-disk text-size-base"></span> Guardar</button>
	</div>
</div>
{% endblock %}



{% block footer_js %}
	<script type="text/javascript" src="{% url 'comextweb.helpers.utils.mediaurl' application='apps/frontend/persona' folder='media' %}js/persona.js?v={{settings.JS_VERSION}}"></script>
	<script type="text/javascript" src="{% url 'comextweb.helpers.utils.mediaurl' application='apps/frontend/bodega' folder='media' %}js/bodega.js?v={{settings.JS_VERSION}}"></script>
	<script type="text/javascript" src="{% url 'comextweb.helpers.utils.mediaurl' application='base' folder='media' %}js/usuario.js?v={{settings.JS_VERSION}}"></script>
	<script type="text/javascript" src="{% url 'comextweb.helpers.utils.mediaurl' application='apps/frontend/envio' folder='media' %}js/envio.js?v={{settings.JS_VERSION}}"></script>
	<script type="text/javascript" src="{% url 'comextweb.helpers.utils.mediaurl' application='apps/frontend/envio' folder='media' %}js/contenedor.js?v={{settings.JS_VERSION}}"></script>
	<script type="text/javascript" src="{% url 'comextweb.helpers.utils.mediaurl' application='apps/frontend/envio' folder='media' %}js/carga.js?v={{settings.JS_VERSION}}"></script>
	<script type="text/javascript" src="{% url 'comextweb.helpers.utils.mediaurl' application='apps/frontend/envio' folder='media' %}js/granel.js?v={{settings.JS_VERSION}}"></script>
	
	<script type="text/javascript">
		
		$(function(){

			new ObjectField($('#id_cliente_id'));
			new ObjectField($('#id_linea_naviera_id'));
			new ObjectField($('#id_agencia_carga_id'));
			new ObjectField($('#id_bodega_id'));
			new ObjectField($('#id_ejecutivo_id'));
			new ObjectField($('#id_inspector_id'));
			new ObjectField($('#id_aseguradora_id'));

			var data_detalle_contenedores = {
				'templateDetalle': $('#dtemplate_contenedor'),
				'tableDetalle': $('#tdetalle_contenedor'),
				'prefixDetalle': 'template',
				'funcCompDetalle': DetalleEnvioContenedorForm.sonIguales,
				'klassDetalle': DetalleEnvioContenedorForm
			};
			
			var data_detalle_cargas = {
				'templateDetalle': $('#dtemplate_carga'),
				'tableDetalle': $('#tdetalle_carga'),
				'prefixDetalle': 'template',
				'funcCompDetalle': DetalleEnvioCargaForm.sonIguales,
				'klassDetalle': DetalleEnvioCargaForm 
			};
			
			var data_detalle_graneles = {
				'templateDetalle': $('#dtemplate_granel'),
				'tableDetalle': $('#tdetalle_granel'),
				'prefixDetalle': 'template',
				'funcCompDetalle': DetalleEnvioGranelForm.sonIguales,
				'klassDetalle': DetalleEnvioGranelForm
			};
			
			envio = new RegistrarEnvioForm(data_detalle_contenedores,data_detalle_cargas,data_detalle_graneles);
			
			
			$('#id_con_seguro').bind('click', mostrarInfoConSeguro);
			$('#id_carga_contenedorizada').bind('click', mostrarInfoCargaContenedorizada);
			$('#id_oce').bind('change',mostrarInfoOCE);

			
			mostrarInfoOCE();
			mostrarInfoConSeguro();
			mostrarInfoCargaContenedorizada();
		});
		
		function registrarEnvio(el){
			$(el).prop('disabled', true);
			$(el).html('<i class="icon-spinner4 text-size-base spinner"></i>&nbsp;Guardando...');
			document.forms.registrarEnvioForm.submit();
		}
		
		function mostrarInfoConSeguro() {
			if ($('#id_con_seguro').is(':checked')) {
				$('#info_con_seguro').show();
			} else {
				$('#info_con_seguro').hide();
			}
		}
		
		function mostrarInfoCargaContenedorizada() {
			if ($('#id_carga_contenedorizada').is(':checked')) {
				$('#info_carga_contenedorizada').show();
			} else {
				$('#info_carga_contenedorizada').hide();
			}
		}
		
		function mostrarInfoOCE(){
			if ($('#id_oce').val() == 'IMP') {
				mostrarInfoImportacion();
			}else if($('#id_oce').val() == 'EXP') {
				mostrarInfoExportacion();
			}
		}
		
		function mostrarInfoImportacion() {
			if ($('#id_oce').val() == 'IMP') {
				$('.exp').hide();
				$('.imp').show();
			} else {
				$('.imp').hide();
			}
		}
		
		function mostrarInfoExportacion() {
			if ($('#id_oce').val() == 'EXP') {
				$('.imp').hide();
				$('.exp').show();
			} else {
				$('.exp').hide();
			}
		}

	</script>
{% endblock %}