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

{% block content %}
<div class="tabbable tab-content-bordered">
	<form id="registrar_bodega" method="post" name="RegistrarBodegaForm">
		{% csrf_token %}
		{{form.id}}{{form.errors.id}}
		{{ form.non_field_errors }}
	
		
		<ul class="nav nav-tabs nav-tabs-highlight">
			<li class="active"><a href="#informacion_general" data-toggle="tab">Información General</a></li>
			<li><a href="#personas_contacto" data-toggle="tab">Personas de Contacto</a></li>
		</ul>
		<div class="tab-content">
			<!-- informacion general -->
			<div class="tab-pane has-padding active" id="informacion_general">
				<div class="row">
					<div class="col-sm-3">
						<div class="form-group">
							<label>Estado:</label>
							{{ form.estado }}{{ form.errors.estado }}
						</div>
					</div>
				</div>
				<div class="row">
					<div class="col-sm-6">
						<div class="form-group">
							<label>Código:</label>
							{{ form.codigo }}{{ form.errors.codigo }}
						</div>
					</div>
				</div>
				<div class="row">
					<div class="col-sm-6">
						<div class="form-group">
							<label>Nombre:</label>
							{{ form.nombre }}{{ form.errors.nombre }}
						</div>
					</div>
				</div>
				<div class="row">
					<div class="col-sm-6">
						<div class="form-group">
							<label>Dirección:</label>
							{{ form.direccion }}{{ form.errors.direccion }}
						</div>
					</div>
				</div>
				<div class="row">
					<div class="col-sm-3">
						<div class="form-group">
							<label>Teléfono:</label>
							{{ form.telefono }}{{ form.errors.telefono }}
						</div>
					</div>
					<div class="col-sm-3">
						<div class="form-group">
							<label>Email:</label>
							{{ form.email }}{{ form.errors.email }}
						</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" data-hide="phone,tablet">Notificar</th>
								<th 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-toggle="true" >Apellidos</th>
								<th data-hide="phone" >Email</th>
								<th data-hide="phone" width="80">Celular</th>
								<th data-hide="phone" width="80">Trabajo</th>
								<th class="text-center" data-hide="phone"><i class="icon-cog5"></i></th>
							</tr>
						</thead>
						<tbody id="tdetalle_personacontacto">
							<tr id="dtemplate_personacontacto" class="hide">
								<td class="text-center">{{ form.template_detalle_personacontacto.notificar }}</td>
								<td>{{ form.template_detalle_personacontacto.sufijo }}</td>
								<td>{{ form.template_detalle_personacontacto.cargo }}</td>
								<td>{{ form.template_detalle_personacontacto.area }}</td>
								<td>{{ form.template_detalle_personacontacto.nombres }}</td>
								<td>{{ form.template_detalle_personacontacto.apellidos }}</td>
								<td>{{ form.template_detalle_personacontacto.email }}</td>
								<td>{{ form.template_detalle_personacontacto.celular }}</td>
								<td>{{ form.template_detalle_personacontacto.trabajo }}</td>
								<td class="text-center"><a class="text-danger" href="javascript:;" onclick="javascript:persona_contacto.eliminarDetalle(this);"><span class="icon-trash"></span></a></td>
							</tr>
							{% for d in form.detalle_personacontacto %}
								<tr>
									<td class="text-center">{{ d.id }}{{ d.notificar }}{{ d.errors.notificar }}</td>
									<td>{{ d.sufijo }}{{ d.errors.sufijo }}</td>
									<td>{{ d.cargo }}{{ d.errors.cargo }}</td>
									<td>{{ d.area }}{{ d.errors.area }}</td>
									<td>{{ d.nombres }}{{ d.errors.nombres }}</td>
									<td>{{ d.apellidos }}{{ d.errors.apellidos }}</td>
									<td>{{ d.email }}{{ d.errors.email }}</td>
									<td>{{ d.celular }}{{ d.errors.celular }}</td>
									<td>{{ d.trabajo }}{{ d.errors.trabajo }}</td>
									<td class="text-center"><a class="text-danger" href="javascript:;" onclick="javascript:persona_contacto.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:agregarPersonaContacto(this);"><i class="icon-plus-circle2"></i> Agregar Contacto</a></td>
							</tr>
						</tfoot>
					</table>
				</div>
			</div>
			<!-- /personas contacto -->
		</div>
		
		<br/>
		
		<div class="row">
			<div class="col-sm-2">
				<div class="form-group">
					<button class="btn btn-success btn-sm" onclick="registrarBodega(this);"><span class="icon-floppy-disk"></span> Guardar</button>
				</div>
			</div>
		</div>
	</form>
</div>
{% endblock %}
{% block footer_js %}
	<script type="text/javascript" src="{% url 'comextweb.helpers.utils.mediaurl' application='apps/frontend/persona' folder='media' %}js/persona_contacto.js?v={{settings.JS_VERSION}}"></script>

	<script type="text/javascript">
		function agregarPersonaContacto(el){
			persona_contacto.agregarDetalle();
		}
	
		function registrarBodega(el){
			$(el).prop('disabled', true);
			$(el).html('<i class="icon-spinner3 spinner"></i>&nbsp;Guardando...');
			document.forms.RegistrarBodegaForm.submit();
		}
		
		$(function(){
			persona_contacto = new MasterDetail({ 
				'templateDetalle': $('#dtemplate_personacontacto'),
				'tableDetalle': $('#tdetalle_personacontacto'),
				'prefixDetalle': 'template',
				'funcCompDetalle': PersonaContactoForm.sonIguales,
				'klassDetalle': PersonaContactoForm 		
			});
		});
	</script>
{% endblock %}