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

{% block toolbar %}
	<a id="btn-filtros" class="btn btn-default btn-xs collapsed" data-toggle="collapse" href="#collapse-group2" data-popup="tooltip" title="" data-original-title="Buscar"><i class="icon-search4"></i></a>
	<a href="?excel=1" class="btn btn-default btn-xs" data-popup="tooltip" title="" data-original-title="Exportar Excel"><i class="icon-file-excel"></i></a>
	<a href="?pdf=1" target="_blank" class="btn btn-default btn-xs" data-popup="tooltip" title="" data-original-title="Exportar PDF"><i class="icon-file-pdf"></i></a>
	<a class="btn btn-success btn-xs" data-popup="tooltip" title="" data-original-title="Registrar" href="{% url 'registrar_persona' %}"><i class="icon-user-plus"></i></a>
{% endblock %}


{% block content %}
<!-- form busqueda -->
<div id="collapse-group2" class="panel-collapse collapse bg">
	<form method="get" name="consultar_personas_form">
		{{ form.non_field_errors }}	
		<input type="hidden" name="filtros" value="1">
		<div class="row">
			<div class="col-sm-5">
				<div class="form-group">
					<label>Filtro:</label>
					{{ form.filtro }}{{ form.errors.filtro }}
				</div>
			</div>
			<div class="col-sm-3">
				<div class="form-group">
					<label>Rol:</label>
					{{ form.rol }}{{ form.errors.rol }}
				</div>
			</div>
			<div class="col-sm-2">
				<div class="form-group">
					<label>Tipo:</label>
					{{ form.tipo }}{{ form.errors.tipo }}
				</div>
			</div>
			<div class="col-sm-2">
				<div class="form-group">
					<label>Estado:</label>
					{{ form.estado }}{{ form.errors.estado }}
				</div>
			</div>
		</div>
		<div class="row">
			<div class="col-sm-2">
				<button class="btn btn-primary btn-xs" type="submit"><i class="icon-search4"></i> Consultar</button>
			</div>
		</div>
	</form>
	<br>
</div>
<!-- /form busqueda -->
<!-- tabla personas -->
{% if personas %}
<div class="panel panel-flat">
	<div id="DataTables_Table_1_wrapper" class="dataTables_wrapper no-footer">
		<div class="datatable-scroll">
			<table class="table table-togglable table-condensed datatable-pagination">
				<thead>
					<tr class="bg-slate">
						<th class="text-center" data-hide="phone" width=100>Identificaci&oacute;n</th>
						<th class="text-center" data-toggle="true">Razon Social</th>
						<th class="text-center" data-hide="phone,tablet">Nombre Comercial</th>
						<th class="text-center" data-hide="phone,tablet">Email</th>
						<th class="text-center" data-hide="phone,tablet" width=60>Tipo</th>
						<th class="text-center" data-hide="phone,tablet" width=150>Estado</th>
						<th class="text-center" data-hide="phone" width=60>Acciones</th>
					</tr>
				</thead>
				<tbody>
					{% for p in personas %}
						<tr>
							<td>{{ p.get_identificacion }}</td>
							<td><a href="{% url 'consultar_persona' p.id %}">{{ p.razon_social }}</a></td>
							<td>{{ p.nombre_comercial }}</td>
							<td><a href="mailto:{{ p.email }}">{{ p.email }}</a></td>
							<td>{{ p.get_tipo_display }}</td>
							<td>
								{% if p.estado == 'A' %}
									Acti.: <span class="label label-success">Activo</span>
								{% else %}
									Acti: <span class="label label-default">Inactivo</span>
								{% endif %}
								<br>Disp.: <span class="label label-{{ p.get_clase_label_estado_sistema }}">{{ p.get_estado_sistema_display }}</span>
							</td>
							<td class="text-center">
								<ul class="icons-list">
									<li><a class="text-primary" href="{% url 'editar_persona' p.id %}" data-popup="tooltip" title="" data-original-title="Editar"><i class="icon-pencil7"></i></a></li>
									<li><a class="text-danger btn-eliminar-persona" data-url="{% url 'eliminar_persona' p.id %}" data-popup="tooltip" title="" data-original-title="Eliminar"><i class="icon-trash"></i></a></li>
								</ul>
							</td>
						</tr>
					{% endfor %}
				</tbody>
			</table>
		</div>
		<div class="datatable-footer">
			<div class="dataTables_info" id="DataTables_Table_1_info" role="status" aria-live="polite">Página {{ personas.number }} de {{ personas.paginator.num_pages }}</div>
			<div class="dataTables_paginate paging_simple" id="DataTables_Table_1_paginate">
				{% if usuarios.has_previous %}
					<a href="?pagina={{ personas.previous_page_number }}" onclick="return cambiarPagina({{ personas.previous_page_number }});" class="paginate_button previous {% if not personas.has_previous %} disabled {% endif %}" aria-controls="DataTables_Table_1" data-dt-idx="0" tabindex="0" id="DataTables_Table_1_previous">← Anterior</a>
				{% endif %}
				{% if usuarios.has_next %}
					<a href="?pagina={{ personas.next_page_number }}" onclick="return cambiarPagina({{ personas.next_page_number }});" class="paginate_button next {% if not personas.has_next %} disabled {% endif %}" aria-controls="DataTables_Table_1" data-dt-idx="1" tabindex="0" id="DataTables_Table_1_next">Siguiente →</a>
				{% endif %}
			</div>
		</div>
	</div>
</div>
{% else %}
	<h3 class="text-center"><small>Aun no hay personas registradas</small></h3>
{% endif %}
<!-- /tabla personas -->
{% endblock %}

{% block footer_js %}
<script type="text/javascript">
	$(function(){
		/* para los filtros */
		{% if request.GET.filtros == '1' %}
			$('#btn-filtros').trigger('click');
		{% endif %}
		/*/para los filtros */

		$('.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,
				confirmButtonColor: "#DD6B55",
				confirmButtonText: "Sí, eliminar",
				closeOnConfirm: true,
			}, function() {
				document.location.href = link;
			});
			return false;
		});
	});
	
</script>
{% endblock %}