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

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

{% block toolbar %}

{% endblock %}

{% block content %}
<div class="tabbable tab-content-bordered">
	<ul class="nav nav-tabs nav-tabs-highlight">
		<li class="active"><a href="#informacion_general" data-toggle="tab">Informaci&oacute;n General</a></li>
		<li><a href="#personas_contacto" data-toggle="tab">Personas de Contacto</a></li>
		<li><a href="#personas_destino" data-toggle="tab">Destinos</a></li>
		{% if persona.es_chofer %}
		<li><a href="#persona_chofer" data-toggle="tab">Informaci&oacute;n del Chofer</a></li>
		{% endif %}
	</ul>
	<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">
							<h4>
								<small>Estado:</small><br />
								{{ persona.get_estado_display }}
							</h4>
						</div>
						<div class="col-md-6 col-sm-12">
							<h4>
								<small>Tipo:</small><br />
								{{ persona.get_tipo_display }}
							</h4>
						</div>
					</div>
					<div class="row">
						<div class="col-md-12 col-sm-12">
							<h4>
								<small>Razon Social:</small><br />
								{{ persona.razon_social }}
							</h4>
						</div>
					</div>
					<div class="row">
						<div class="col-md-12 col-sm-12">
							<h4>
								<small>Nombre Comercial:</small><br />
								{{ persona.nombre_comercial }}
							</h4>
						</div>
					</div>
					<div class="row">
						<div class="col-md-6 col-sm-12">
							<h4>
								<small>C&eacute;dula:</small><br />
								{{ persona.cedula }}
							</h4>
						</div>
						<div class="col-md-6 col-sm-12">
							<h4>
								<small>Ruc:</small><br />
								{{ persona.ruc }}
							</h4>
						</div>
					</div>
					<div class="row">
						<div class="col-md-6 col-sm-12">
							<h4>
								<small>Email:</small><br />
								{{ persona.email }}
							</h4>
						</div>
						<div class="col-md-6 col-sm-12">
							<h4>
								<small>Tel&eacute;fonos:</small><br />
								{{ persona.telefonos }}
							</h4>
						</div>
					</div>
					<div class="row">
						<div class="col-md-12 col-sm-12">
							<h4>
								<small>Direcci&oacute;n:</small><br />
								{{ persona.direccion }}
							</h4>
						</div>
					</div>
				</div>
				<div class="col-md-6 col-sm-12">
					<div class="panel panel-default">
						<div class="panel-heading ">
							<h6 class="panel-title">Rol de la Persona</h6>
						</div>
						<div class="panel-body">
							<div class="row">
								<div class="col-sm-12">
									<label>
										{% if persona.es_cliente %}
											<i class="icon-checkbox-checked"></i>
										{% else %}
											<i class="icon-checkbox-unchecked"></i>
										{% endif %}
										Es Cliente
									</label>
								</div>
							</div>
							<div class="row">
								<div class="col-sm-12">
									<label>
										{% if persona.es_empleado %}
											<i class="icon-checkbox-checked"></i>
										{% else %}
											<i class="icon-checkbox-unchecked"></i>
										{% endif %}
										Es Empleado
									</label>
								</div>
							</div>
							<div class="row">
								<div class="col-sm-12">
									<label>
										{% if persona.es_linea_naviera %}
											<i class="icon-checkbox-checked"></i>
										{% else %}
											<i class="icon-checkbox-unchecked"></i>
										{% endif %}
										Es Linea Naviera
									</label>
								</div>
							</div>
							<div class="row">
								<div class="col-sm-12">
									<label>
										{% if persona.es_agencia_carga %}
											<i class="icon-checkbox-checked"></i>
										{% else %}
											<i class="icon-checkbox-unchecked"></i>
										{% endif %}
										Es Agencia de Carga/Consolidadora
									</label>
								</div>
							</div>
							<div class="row">
								<div class="col-sm-12">
									<label>
										{% if persona.es_transportista %}
											<i class="icon-checkbox-checked"></i>
										{% else %}
											<i class="icon-checkbox-unchecked"></i>
										{% endif %}
										Es Transportista
									</label>
								</div>
							</div>
							<div class="row">
								<div class="col-sm-12">
									<label>
										{% if persona.es_funcionario_aduana %}
											<i class="icon-checkbox-checked"></i>
										{% else %}
											<i class="icon-checkbox-unchecked"></i>
										{% endif %}
										Es Funcionario de Aduana
									</label>
								</div>
							</div>
							<div class="row">
								<div class="col-sm-12">
									<label>
										{% if persona.es_aseguradora %}
											<i class="icon-checkbox-checked"></i>
										{% else %}
											<i class="icon-checkbox-unchecked"></i>
										{% endif %}
										Es Aseguradora
									</label>
								</div>
							</div>
							<div class="row">
								<div class="col-sm-12">
									<label>
										{% if persona.es_chofer %}
											<i class="icon-checkbox-checked"></i>
										{% else %}
											<i class="icon-checkbox-unchecked"></i>
										{% endif %}
										Es Chofer
									</label>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- /informacion general -->
		<!-- personas contacto -->
		<div class="tab-pane has-padding" id="personas_contacto">
			<div class="table-responsive">
				<table class="table table-togglable table-hover tabla-menos-padding">
					<thead>
						<tr class="bg-slate">
							<th class="text-center" width="30" data-hide="phone,tablet">Notificar</th>
							<th width="50" data-hide="phone" >Sufijo</th>
							<th data-hide="phone">Cargo</th>
							<th data-hide="phone">Area</th>
							<th data-toggle="true">Nombres</th>
							<th data-hide="phone" >Email</th>
							<th data-hide="phone" width="80">Convencional</th>
							<th data-hide="phone" width="80">Celular</th>
							<th data-hide="phone" width="80">Trabajo</th>
						</tr>
					</thead>
					<tbody>
						{% for d in persona.personacontacto_set.all %}
							<tr>
								<td class="text-center">
									{% if d.notificar %}
										<i class="icon-checkbox-checked"></i>
									{% else %}
										<i class="icon-checkbox-unchecked"></i>
									{% endif %}
								</td>
								<td>{{ d.get_sufijo_display }}</td>
								<td>{{ d.cargo }}</td>
								<td>{{ d.area }}</td>
								<td>{{ d.nombres }}</td>
								<td>{{ d.email }}</td>
								<td>{{ d.convencional }}</td>
								<td>{{ d.celular }}</td>
								<td>{{ d.trabajo }}</td>
							</tr>
						{% endfor %}
					</tbody>
				</table>
			</div>
		</div>
		<!-- /personas contacto -->
		<!-- personas destino -->
		<div class="tab-pane has-padding" id="personas_destino">
			<div class="table-responsive">
				<table class="table table-togglable table-hover tabla-menos-padding">
					<thead>
						<tr class="bg-slate">
							<th data-toggle="true">Nombres</th>
							<th data-toggle="true">Apellidos</th>
							<th data-hide="phone" width="200">Email</th>
							<th data-hide="phone" width="80">Celular</th>
							<th data-hide="phone" width="80">Trabajo</th>
							<th data-hide="phone" width="">Direccion</th>
							<th data-hide="phone" width="80">Ubicaci&oacute;n</th>
						</tr>
					</thead>
					<tbody>
						{% for d in persona.personadestino_set.all %}
							<tr>
								<td>{{ d.nombres }}</td>
								<td>{{ d.apellidos }}</td>
								<td>{{ d.email }}</td>
								<td>{{ d.celular }}</td>
								<td>{{ d.trabajo }}</td>
								<td>{{ d.direccion }}</td>
								<td class="text-center">
									{% if d.latitud and d.longitud %}
										<a class="btn btn-link btn-xs text-success" href="javascript:;" onclick="mostrarDestinoMapa(this);" data-interaccion="false" data-latitud="{{ d.latitud }}" data-longitud="{{ d.longitud }}"><i class="icon-location4"></i></a>
									{% endif %}
								</td>
							</tr>
						{% endfor %}
					</tbody>
				</table>
			</div>
		</div>
		<!-- /personas destino -->
		<!-- persona chofer -->
		<div class="tab-pane has-padding" id="persona_chofer">
			<div class="row">
				<div class="col-md-6 col-sm-12">
					<h4>
						<small>Fecha de Vencimiento de Licencia:</small><br />
						{{ persona.fecha_vencimiento_licencia|date:"d/m/Y" }}
					</h4>
				</div>
			</div>
			<div class="row">
				<div class="col-md-4 col-sm-6">
					<h4>
						<small>Foto de Licencia:</small><br />
						{% if persona.chofer_licencia_imagen %}
							<a href="{{ persona.chofer_licencia_imagen.url }}" data-popup="lightbox" title="Foto de Licencia" rel="gallery" class="btn border-white text-white btn-flat btn-icon btn-rounded">
								<img alt="licencia" src="{% thumbnail persona.chofer_licencia_imagen 150x150 crop %}">
							</a>
						{% endif %}
					</h4>
				</div>
				<div class="col-md-4 col-sm-6">
					<h4>
						<small>Foto de C&eacute;dula:</small><br />
						{% if persona.chofer_cedula_imagen %}
							<a href="{{ persona.chofer_cedula_imagen.url }}" data-popup="lightbox" title="Foto de Cedula" rel="gallery" class="btn border-white text-white btn-flat btn-icon btn-rounded">
								<img alt="cedula" src="{% thumbnail persona.chofer_cedula_imagen 150x150 crop %}">
							</a>
						{% endif %}
					</h4>
				</div>
				<div class="col-md-4 col-sm-6">
					<h4>
						<small>Foto de Papeleta de Votaci&oacute;n:</small><br />
						{% if persona.chofer_votacion_imagen %}
							<a href="{{ persona.chofer_votacion_imagen.url }}" data-popup="lightbox" title="Foto de Papeleta de Votacion" rel="gallery" class="btn border-white text-white btn-flat btn-icon btn-rounded">
								<img alt="licencia" src="{% thumbnail persona.chofer_votacion_imagen 150x150 crop %}">
							</a>
						{% endif %}
					</h4>
				</div>
			</div>
		</div>
		<!-- /persona chofer -->
	</div>
</div>
<div class="row">
	<div class="col-sm-12">
		<br>
		<a class="btn btn-primary btn-sm" href="{% url 'editar_persona' persona.id %}"><span class="icon-pencil7 text-size-base"></span> Modificar</a>
		<a class="btn btn-danger btn-sm btn-eliminar-persona" href="javascript:;" data-url="{% url 'eliminar_persona' persona.id %}"><span class="icon-trash text-size-base"></span> Eliminar</a>
	</div>
</div>
<div id="modalMapa" class="modal fade" style="">
	<div class="modal-dialog modal-lg">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal">×</button>
				<h5 class="modal-title text-center text-primary">Click para Agregar Ubicaci&oacute;n</h5>
			</div>
			<div class="modal-body" style="padding:0px;">
				<div id="map-canvas">///</div>
			</div>
			<div class="modal-footer" style="padding:10px;">
			</div>
		</div>
	</div>
</div>
{% endblock %}

{% block footer_js %}
	<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBS53fWEJGaH9ZaAzzZRjDXyyQMbgQWOUw"></script>
	<script type="text/javascript" src="{% url 'comextweb.helpers.utils.mediaurl' application='apps/frontend/persona' folder='media' %}js/mapa_destino.js?v={{settings.JS_VERSION}}"></script>
	<script type="text/javascript">
		function registrarPersona(el){
			$(el).prop('disabled', true);
			$(el).html('<i class="icon-spinner4 text-size-base spinner"></i>&nbsp;Guardando...');
			document.forms.registrar_persona_form.submit();
		}
		$(function(){
			$('.btn-eliminar-persona').click(function(){
				var link = $(this).attr('data-url');
				swal({
					title: "Eliminar Persona",
					text: "¿Está seguro que desea eliminar la persona?",
					type: "warning",
					showCancelButton: true,
					cancelButtonText: "Cancelar",
					confirmButtonColor: "#DD6B55",
					confirmButtonText: "Sí, eliminar",
					closeOnConfirm: true,
				}, function() {
					document.location.href = link;
				});
				return false;
			});
		});
	</script>
{% endblock %}