{% 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">Inspeccion</li>
	</ul>
{% endblock %}

{% block toolbar %}

{% endblock %}

{% block content %}
<div class="row">
	<div class="col-md-12 col-sm-12">
		<div class="row">
			<div class="col-md-6 col-sm-12">
				<h5>
					<small>OCE:</small><br />
					{{ inspeccion.envio.get_oce_display }}
				</h5>
			</div>
			<div class="col-md-6 col-sm-12">
				<h5>
					<small>Cliente:</small><br />
					{{ inspeccion.envio.cliente.razon_social }}
				</h5>
			</div>
		</div>
		<div class="row">
			<div class="col-md-6 col-sm-12">
				<h5>
					<small>Fecha Apertura:</small><br />
					{{ inspeccion.envio.fecha_apertura|date:'d/m/Y' }}
				</h5>
			</div>
			<div class="col-md-6 col-sm-12">
				<h5>
					<small>Fecha Arribo/Salida:</small><br />
					{% if inspeccion.envio.oce == 'IMP' %}
						{{ inspeccion.envio.fecha_arribo|date:'d/m/Y' }}
					{% endif %}
					{% if inspeccion.envio.oce == 'EXP' %}
						{{ inspeccion.envio.fecha_salida|date:'d/m/Y' }}
					{% endif %}
				</h5>
			</div>
		</div>
		<div class="row">
			<div class="col-md-6 col-sm-12">
				<h5>
					<small>Agencia Naviera:</small><br />
					{{ inspeccion.envio.linea_naviera.razon_social|default:'N/A' }}
				</h5>
			</div>
			<div class="col-md-6 col-sm-12">
				<h5>
					<small># Manifiesto:</small><br />
					{{ inspeccion.envio.numero_manifiesto|default:'N/A' }}
				</h5>
			</div>
		</div>
		<div class="row">
			<div class="col-md-6 col-sm-12">
				<h5>
					<small>Agencia de Carga/Consolidadora:</small><br />
					{{ inspeccion.envio.agencia_carga.razon_social|default:'N/A' }}
				</h5>
			</div>
			<div class="col-md-6 col-sm-12">
				<h5>
					<small># Refrendo:</small><br />
					{{ inspeccion.envio.numero_refrendo|default:'N/A' }}
				</h5>
			</div>
		</div>
		<div class="row">
			<div class="col-md-6 col-sm-12">
				<h5>
					<small>Bodega:</small><br />
					{{ inspeccion.envio.bodega.nombre|default:'N/A' }}
				</h5>
			</div>
			<div class="col-md-6 col-sm-12">
				<h5>
					<small># Orden:</small><br />
					{{ inspeccion.envio.numero_orden|default:'N/A' }}
				</h5>
			</div>
		</div>
		<div class="row">
			<div class="col-md-6 col-sm-12">
				<h5>
					<small>Descripci&oacute;n:</small><br />
					{{ inspeccion.envio.descripcion|default:'N/A' }}
				</h5>
			</div>
		</div>
	</div>
</div>
<hr>
<div class="tabbable tab-content-bordered">
	<ul class="nav nav-tabs nav-tabs-highlight">
		{% if contenedores.count > 0 %}
		<li class="{% if solo_contenedores or informe_contenedor %}active{% endif %}"><a class="" href="#contenedores" data-toggle="tab">Contenedores (FCL)</a></li>
		{% endif %}
		{% if cargas.count > 0 %}
		<li class="{% if solo_cargas or informe_carga %}active{% endif %}"><a class="" href="#cargas" data-toggle="tab">Cargas Sueltas (LCL)</a></li>
		{% endif %}
		{% if graneles.count > 0 %}
		<li class="{% if solo_granel or informe_granel %}active{% endif %}"><a class="" href="#graneles" data-toggle="tab">Granel (GLC)</a></li>
		{% endif %}
	</ul>
	<div class="tab-content ">
		{% if contenedores.count > 0 %}
		<!--inicio tab contenedores-->
		<div class="tab-pane has-padding {% if solo_contenedores or informe_contenedor %}active{% endif %}" id="contenedores">
			<div class="row">
				<div class="col-sm-3">
					<div class="list-group">
						{% for c in contenedores %}
						<a class="list-group-item {% if detalle_envio and detalle_envio.id == c.id %}active{% endif %}" href="{% url 'inpeccionar_detalle_envio' inspeccion.id c.id %}" class="list-group-item">
							{% if c.es_inspeccionable %}
								{% if c.tiene_informe_finalizado %}
									<i class="text-success icon-checkmark-circle"></i>
								{% else %}
									<i class="text-muted icon-checkmark-circle"></i>
								{% endif %}
							{% else %}
								<i class="text-primary icon-checkmark-circle"></i>
							{% endif %}&nbsp;
							{{ c.codigo }}
						</a>
						{% endfor %}
						<div class="list-group-item">
						{% if not inspeccion.tiene_detalles_pendientes %}
							<a class="btn btn-success btn-sm" href="{% url 'finalizar_inspeccion' inspeccion.id %}"><i class="icon-checkmark3"></i> Finalizar Inspecci&oacute;n</a>
						{% else %}
							<a class="btn btn-default btn-sm" href="javascript:void(0);"><i class="icon-checkmark3"></i> Finalizar Inspecci&oacute;n</a>
							<span class="text-muted text-size-small">Requiere completar el informe</span>
						{% endif %}
						</div>
					</div>
				</div>
				<div class="col-sm-9">
					{% if informe_contenedor %}
						{% include "inspeccion/templates/_inspeccionar.html" %}
					{% else %}
						<h4><span class="text-muted">Seleccione el Contenedor para Inspeccionar</span></h4>
					{% endif %}
				</div>
			</div>
		</div>
		<!--fin tab contenedores-->
		{% endif %}
		<!--inicio tab cargas-->
		<div class="tab-pane has-padding {% if solo_cargas or informe_carga %}active{% endif %}" id="cargas">
			<div class="row">
				<div class="col-sm-3">
					<div class="list-group">
						{% for c in cargas %}
						<a class="list-group-item {% if detalle_envio and detalle_envio.id == c.id %}active{% endif %}" href="{% url 'inpeccionar_detalle_envio' inspeccion.id c.id %}" class="list-group-item">
							{% if c.es_inspeccionable %}
								{% if c.tiene_informe_finalizado %}
									<i class="text-success icon-checkmark-circle"></i>
								{% else %}
									<i class="text-muted icon-checkmark-circle"></i>
								{% endif %}
							{% else %}
								<i class="text-primary icon-checkmark-circle"></i>
							{% endif %}&nbsp;
							{{ c.id }}
						</a>
						{% endfor %}
						<div class="list-group-item">
						{% if not inspeccion.tiene_detalles_pendientes %}
							<a class="btn btn-success btn-sm" href="{% url 'finalizar_inspeccion' inspeccion.id %}"><i class="icon-checkmark3"></i> Finalizar Inspecci&oacute;n</a>
						{% else %}
							<a class="btn btn-default btn-sm" href="javascript:void(0);"><i class="icon-checkmark3"></i> Finalizar Inspecci&oacute;n</a>
							<span class="text-muted text-size-small">Requiere completar el informe</span>
						{% endif %}
						</div>
					</div>
				</div>
				<div class="col-sm-9">
					{% if informe_carga %}
						{% include "inspeccion/templates/_inspeccionar.html" %}
					{% else %}
					<h4><span class="text-muted">Seleccione la Carga para Inspeccionar</span></h4>
					{% endif %}
				</div>
			</div>
		</div>
		<!--fin tab cargas-->
		<!--inicio tab graneles-->
		<div class="tab-pane has-padding {% if solo_granel or informe_granel %}active{% endif %}" id="graneles">
			<div class="row">
				<div class="col-sm-3">
					<div class="list-group">
						{% for g in graneles %}
						<a class="list-group-item {% if detalle_envio and detalle_envio.id == g.id %}active{% endif %}" href="{% url 'inpeccionar_detalle_envio' inspeccion.id g.id %}" class="list-group-item">
							{% if g.es_inspeccionable %}
								{% if g.tiene_informe_finalizado %}
									<i class="text-success icon-checkmark-circle"></i>
								{% else %}
									<i class="text-muted icon-checkmark-circle"></i>
								{% endif %}
							{% else %}
								<i class="text-primary icon-checkmark-circle"></i>
							{% endif %}&nbsp;
							{{ g.id }}
						</a>
						{% endfor %}
						<div class="list-group-item">
						{% if not inspeccion.tiene_detalles_pendientes %}
							<a class="btn btn-success btn-sm" href="{% url 'finalizar_inspeccion' inspeccion.id %}"><i class="icon-checkmark3"></i> Finalizar Inspecci&oacute;n</a>
						{% else %}
							<a class="btn btn-default btn-sm" href="javascript:void(0);"><i class="icon-checkmark3"></i> Finalizar Inspecci&oacute;n</a>
							<span class="text-muted text-size-small">Requiere completar el informe</span>
						{% endif %}
						</div>
					</div>
				</div>
				<div class="col-sm-9">
					{% if informe_granel %}
						{% include "inspeccion/templates/_inspeccionar.html" %}
					{% else %}
					<h4><span class="text-muted">Seleccione el Granel para Inspeccionar</span></h4>
					{% endif %}
				</div>
			</div>
		</div>
		<!--fin tab graneles-->
	</div>
</div>
<!-- modal para las firmas -->
<div id="modal-firma" class="modal bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="" aria-hidden="true">
	<div class="modal-dialog modal-lg">
		<div class="modal-content">
			<div class="modal-body" style="min-width:300px;min-height:300px;background-color: #ccc;">
				<div id="signature-pad" class="m-signature-pad">
					<div class="m-signature-pad--body">
						<canvas id="canvas-firma"></canvas>
					</div>
				</div>
			</div>
			<div class="modal-footer" style="padding: 10px 15px 10px;margin-top: 0;background-color: #ccc;">
				<span id="modal-footer" class=""></span>
		        <button id="cancela-firma" type="button" class="btn btn-sm btn-default" data-dismiss="modal">Cancelar</button>
		        {% if informe and informe.estado != informe.FINALIZADO %}
		        <button id="clear-firma" type="button" class="btn btn-sm btn-danger">Borrar Firma</button>
		        <form id="form-firma" class="form-inline pull-right" style="margin:0;margin-left:10px;" action="{% url 'firmar_informe' %}" method="post">
		        	<div class="form-group">
			        	<input type="hidden" id="id_firma_imagen" name="id_firma_imagen" />
			        	<input type="hidden" id="id_firma_informe" name="id_firma_informe" />
			        	<input type="hidden" id="id_firma_firma" name="id_firma_firma" />
			        	<button id="send-firma" type="submit" class="btn btn-sm btn-success">Guardar Firma</button>
			        </div>
	        	</form>
		        {% endif %}
		    </div>
		</div>
	</div>
</div>
<!-- /modal para las firmas -->
{% endblock %}

{% block footer_js %}
<script type="text/javascript">
	var button_click=null, id_actual=0;
	var data_submit = null;
	var data_submit_all = null;
	var button_related = null;
	var csrf = Cookies.get('csrftoken');
	
	//ulr's ajax para manipular los detalles
	var url_registrar_detalle = '{% url "crear_actividad_detalle" %}';
	var url_actualizar_detalle = '{% url "actualizar_actividad_detalle" %}';
	var url_eliminar_detalle = '{% url "eliminar_actividad_detalle" %}';
</script>
<script type="text/javascript" src="{% url 'comextweb.helpers.utils.mediaurl' application='apps/frontend/inspeccion' folder='media' %}js/archivos_inspeccion.js?v={{settings.JS_VERSION}}"></script>
<script type="text/javascript" src="{% url 'comextweb.helpers.utils.mediaurl' application='apps/frontend/inspeccion' folder='media' %}js/firma/signature_pad.min.js?v={{settings.JS_VERSION}}"></script>
<script type="text/javascript" src="{% url 'comextweb.helpers.utils.mediaurl' application='apps/frontend/inspeccion' folder='media' %}js/firma/firmar_informes.js?v={{settings.JS_VERSION}}"></script>
<script type="text/javascript">
	$(function(){
		//para el modal de las firmas
		$('#modal-firma').on('show.bs.modal', function(e){
			button_related = $(e.relatedTarget);
			$('#id_firma_informe').val(button_related.data('informe'));
			$('#id_firma_firma').val(button_related.data('firma'));
			var urlFirma = button_related.data('url');
			if(urlFirma){
				convertImgToBase64(urlFirma, function(base64Img){
					signaturePad.fromDataURL(base64Img);
			    });
			}
		});
		$('#modal-firma').on('shown.bs.modal', function(e){
			// if(window.innerHeight > window.innerWidth){
				// bootbox.alert("Debe estar en modo horizontal");
				// $('#modal-firma').modal('hide');
				// return ;
			// }
			resizeCanvas();
		});
		//esconde el modal
		$('#modal-firma').on('hide.bs.modal', function(e){
			resizeCanvas();
			//reinicio el form
			$('#id_firma_imagen').val('');
			$('#id_firma_informe').val('');
			$('#id_firma_firma').val('');
			
			button_related = null;
			
			//elimino los mensajes
			$('#modal-footer').html('');
		});
	})
</script>
{% endblock %}