{% extends "base/templates/base.html" %}
<script type="text/javascript" src="{% url 'comextweb.helpers.utils.mediaurl' application='apps/frontend/persona' folder='media' %}js/persona.js?v={{settings.JS_VERSION}}"></script>

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

{% block content %}
<form id="registrar_persona" method="post" name="RegistrarUsuarioForm">
	{% csrf_token %}
	{{form.id}}{{form.errors.id}}
	{{ form.non_field_errors }}
	
	<div class="row">
		<div class="col-md-12">
			<div class="tabbable tab-content-bordered">
				<ul class="nav nav-tabs nav-tabs-highlight">
					<li class="active"><a href="#bordered-tab1" data-toggle="tab">Información General</a></li>
					<li><a href="#bordered-tab2" data-toggle="tab">Permisos</a></li>
					{% if usuario %}
					<li><a class="{% if form.errores_bodegas %}text-danger{% endif %}" href="#bodegas" data-toggle="tab">{% if form.errores_bodegas %}* {% endif %}Bodegas</a></li>
					{% endif %}
				</ul>

				<div class="tab-content">
					<div class="tab-pane has-padding active" id="bordered-tab1">
						<div class="row">
							<div class="col-sm-3">
								<div class="form-group">
									<label>Estado:</label>
									{{ form.estado }}{{ form.errors.estado }}
								</div>
							</div>
							<div class="col-sm-3">
								<div class="form-group">
									<label>Rol:</label>
									{{ form.rol }}{{ form.errors.rol }}
								</div>
							</div>
						</div>
						<div class="row">
							<div class="col-sm-6">
								<div class="form-group">
									<label>Nombres:</label>
									{{ form.nombre }}{{ form.errors.nombre }}
								</div>
							</div>
						</div>
						<div class="row">
							<div class="col-sm-6">
								<div class="form-group">
									<label>Apellidos:</label>
									{{ form.apellidos }}{{ form.errors.apellidos }}
								</div>
							</div>
						</div>
						<div class="row">
							<div class="col-sm-6">
								<div class="form-group">
									<label>Email:</label>
									{{ form.email }}{{ form.errors.email }}
								</div>
							</div>
						</div>
						<div class="row">
							<div class="col-sm-3">
								<div class="form-group">
									<label>Usuario:</label>
									{{ form.usuario }}{{ form.errors.usuario }}
								</div>
							</div>
							<div class="col-sm-3">
								<div class="form-group">
									<label>Password:</label>
									{{ form.password }}{{ form.errors.password }}
								</div>
							</div>
						</div>
						<div class="row">
							<div class="col-sm-3">
								<label>Identificación:</label>
								{{ form.identificacion }}{{ form.errors.identificacion }}
							</div>
						</div>
						
						{% comment %}
						<div class="form-group">
							<label>Fecha Nacimiento:</label>
							{{ form.fecha_nacimiento }}{{ form.errors.fecha_nacimiento }}
						</div>
						{% endcomment %}
						
						{% comment %}
						<div class="row">
							<div class="col-sm-3">
								<label>Default select</label>
								<select class="bootstrap-select bs-select-hidden" data-width="100%">
									<option value="AK">Alaska</option>
									<option value="HI">Hawaii</option>
									<option value="CA">California</option>
									<option value="NV">Nevada</option>
									<option value="OR">Oregon</option>
								</select><div class="btn-group bootstrap-select" style="width: 100%;"><button type="button" class="btn dropdown-toggle btn-default" data-toggle="dropdown" title="Alaska" aria-expanded="false"><span class="filter-option pull-left">Alaska</span>&nbsp;<span class="caret"></span></button><div class="dropdown-menu open" style="max-height: 217px; overflow: hidden; min-height: 122px;"><ul class="dropdown-menu inner" role="menu" style="max-height: 205px; overflow-y: auto; min-height: 110px;"><li data-original-index="0" class="active"><a tabindex="0" class="" style="" data-tokens="null"><span class="text">Alaska</span><span class=" icon-checkmark3 check-mark"></span></a></li><li data-original-index="1"><a tabindex="0" class="" style="" data-tokens="null"><span class="text">Hawaii</span><span class=" icon-checkmark3 check-mark"></span></a></li><li data-original-index="2"><a tabindex="0" class="" style="" data-tokens="null"><span class="text">California</span><span class=" icon-checkmark3 check-mark"></span></a></li><li data-original-index="3"><a tabindex="0" class="" style="" data-tokens="null"><span class="text">Nevada</span><span class=" icon-checkmark3 check-mark"></span></a></li><li data-original-index="4"><a tabindex="0" class="" style="" data-tokens="null"><span class="text">Oregon</span><span class=" icon-checkmark3 check-mark"></span></a></li></ul></div></div>
							</div>
						</div>
						{% endcomment %}
					</div>

					<div class="tab-pane has-padding" id="bordered-tab2">
						<div class="table-responsive">
							<table class="table table-bordered table-lg">
								<tbody>
									<tr class="active">
										<th>Permisos</th>
										<td class="center">Consultar</td>
										<td class="center">Registrar</td>
										<td class="center">Modificar</td>
										<td class="center">Eliminar</td>
										<td class="center">Administrar</td>
									</tr>
									<tr>
										<td >Usuario</td>
										<td  class="center">{{ form.usu_consultar_usuario }}</td>
										<td>{{ form.usu_registrar_usuario }}</td>
										<td>{{ form.usu_modificar_usuario }}</td>
										<td>{{ form.usu_eliminar_usuario }}</td>
										<td></td>
									</tr>
									<tr>
										<td>Persona</td>
										<td>{{ form.per_consultar_persona }} </td>
										<td>{{ form.per_registrar_persona }}</td>
										<td>{{ form.per_modificar_persona }}</td>
										<td>{{ form.per_eliminar_persona }}</td>
										<td></td>
									</tr>
									<tr>
										<td>Bodega</td>
										<td>{{ form.bod_consultar_bodega }}</td>
										<td>{{ form.bod_registrar_bodega }}</td>
										<td>{{ form.bod_modificar_bodega }}</td>
										<td>{{ form.bod_eliminar_bodega }}</td>
										<td></td>
									</tr>
									<tr>
										<td>Envío</td>
										<td>{{ form.env_consultar_envio }}</td>
										<td>{{ form.env_registrar_envio }}</td>
										<td>{{ form.env_modificar_envio }}</td>
										<td>{{ form.env_eliminar_envio }}</td>
										<td>{{ form.env_administrar_envio }} </td>
									</tr>
									<tr>
										<td>Vehículo</td>
										<td>{{ form.veh_consultar_vehiculo }}</td>
										<td>{{ form.veh_registrar_vehiculo }}</td>
										<td>{{ form.veh_modificar_vehiculo }}</td>
										<td>{{ form.veh_eliminar_vehiculo }}</td>
										<td></td>
									</tr>
									<tr>
										<td>Orden Entrega</td>
										<td>{{ form.ord_entrega_consultar }}</td>
										<td>{{ form.ord_entrega_registrar }}</td>
										<td>{{ form.ord_entrega_modificar }}</td>
										<td>{{ form.ord_entrega_eliminar }}</td>
										<td>{{ form.ord_entrega_administrar }}</td>
									</tr>
									<tr>
										<td>Inspección</td>
										<td>{{ form.ins_registrar_inspeccion }}</td>
										<td>{{ form.ins_consultar_informe }}</td>
										<td></td>
										<td></td>
										<td></td>
									</tr>
									<tr>
										<td>Log de Actividades</td>
										<td>{{ form.log_consultar_logactividad }}</td>
										<td></td>
										<td></td>
										<td></td>
										<td></td>
									</tr>
								</tbody>
							</table>
						</div>
					</div>
				
					<div class="tab-pane has-padding" id="bodegas">
						<div class="table-responsive">
							<table class="table table-togglable table-hover tabla-menos-padding">
								<thead>
									<tr class="bg-slate">
										<th>Bodega</th>
										<th class="text-center" width="50"></th>
									</tr>
								</thead>
								<tbody id="tdetalle_usuariobodega">
									<tr id="dtemplate_usuariobodega" class="hide">
										<td>
											{{ form.template_detalle_usuariobodega.id }}
											{{ form.template_detalle_usuariobodega.bodega }}
										</td>
										<td class="text-center" width="50"><a class="text-danger" href="javascript:;" onclick="javascript:usuario_bodega.eliminarDetalle(this);"><span class="icon-trash"></span></a></td>
									</tr>
									{% for d in form.detalle_usuariobodega %}
										<tr>
											<td>{{ d.id }}{{ d.bodega }}{{ d.errors.bodega }}</td>
											<td class="text-center" width="50"><a class="text-danger" href="javascript:;" onclick="javascript:usuario_bodega.eliminarDetalle(this);"><span class="icon-trash"></span></a></td>
										</tr>
									{% endfor %}
								</tbody>
								<tfoot>
									<tr>
										<td colspan="10"><a class="btn btn-xs btn-flat" href="javascript:void(0);" onclick="javascript:usuario_bodega.agregarDetalle();"><i class="icon-plus-circle2"></i> Agregar Bodega</a></td>
									</tr>
								</tfoot>
							</table>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<br />
	<div class="row">
		<div class="col-sm-2">
			<div class="form-group">
				<button class="btn btn-success btn-sm" onclick="registrarUsuario(this);"><span class="icon-floppy-disk"></span> Guardar</button>
			</div>
		</div>
	</div>
</form>
{% endblock %}
{% block footer_js %}
	<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='apps/frontend/usuario' folder='media' %}js/usuario_bodega.js?v={{settings.JS_VERSION}}"></script>
	<script type="text/javascript">
		var usuario_bodega = null;
		function registrarUsuario(el){
			$(el).prop('disabled', true);
			$(el).html('<i class="icon-spinner3 spinner"></i>&nbsp;Guardando...');
			document.forms.RegistrarUsuarioForm.submit();
		}
		
		$(function(){
			usuario_bodega = new MasterDetail({ 
				'templateDetalle': $('#dtemplate_usuariobodega'),
				'tableDetalle': $('#tdetalle_usuariobodega'),
				'prefixDetalle': 'template',
				'funcCompDetalle': UsuarioBodegaForm.sonIguales,
				'klassDetalle': UsuarioBodegaForm 		
			});
		});
	</script>
{% endblock %}