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

{% block header_js %}
<script type="text/javascript" src="{% url 'comextweb.helpers.utils.mediaurl' application='apps/frontend/persona' folder='media' %}js/persona.js?v={{settings.JS_VERSION}}"></script>
<script type="text/javascript" src="{% url 'comextweb.helpers.utils.mediaurl' application='apps/frontend/transporte' folder='media' %}js/gps.js?v={{settings.JS_VERSION}}"></script>
<script type="text/javascript" src="{% url 'comextweb.helpers.utils.mediaurl' application='apps/frontend/transporte' folder='media' %}js/vehiculo.js?v={{settings.JS_VERSION}}"></script>
{% endblock %}

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

{% block content %}
<div class="tabbable tab-content-bordered">
	<form id="registrar_vehiculo" method="post" name="RegistrarVehiculoForm">
		{% 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>
		</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-3">
						<div class="form-group">
							<label>Propiedad:</label>
							{{ form.propiedad }}{{ form.errors.propiedad }}
						</div>
					</div>
					<div class="col-sm-3">
						<div class="form-group">
							<label>Dispositivo GPS:</label>
							{{ form.gps_id }}{{ form.errors.gps_id }}
						</div>
					</div>
				</div>
				<div class="row">
					<div class="col-sm-6">
						<div class="form-group">
							<label>Transportista:</label>
							{{ form.transportista_id }}{{ form.errors.transportista_id }}
						</div>
					</div>
				</div>
				<div class="row">
					<div class="col-sm-3">
						<div class="form-group">
							<label>Placa:</label>
							{{ form.placa }}{{ form.errors.placa }}
						</div>
					</div>
					<div class="col-sm-3">
						<div class="form-group">
							<label>Marca:</label>
							{{ form.marca }}{{ form.errors.marca }}
						</div>
					</div>
				</div>
				<div class="row">
					<div class="col-sm-3">
						<div class="form-group">
							<label>Modelo:</label>
							{{ form.modelo }}{{ form.errors.modelo }}
						</div>
					</div>
					<div class="col-sm-3">
						<div class="form-group">
							<label>Año:</label>
							{{ form.anio }}{{ form.errors.anio }}
						</div>
					</div>
				</div>
				<div class="row">
					<div class="col-sm-3">
						<div class="form-group">
							<label>Color:</label>
							{{ form.color }}{{ form.errors.color }}
						</div>
					</div>
					<div class="col-sm-3">
						<div class="form-group">
							<label>Fecha Vencimiento Matricula::</label>
							{{ form.fecha_vencimiento_matricula }}{{ form.errors.fecha_vencimiento_matricula }}
						</div>
					</div>
				</div>
				<div class="row">
					<div class="col-sm-3">
						<div class="form-group">
							<label>Archivo Certificado Peso Dimensión:</label>
							{{ form.certificado_peso_dimension }}{{ form.errors.certificado_peso_dimension }}
						</div>
					</div>
				</div>
			</div>
			<!-- /informacion general -->
		</div>
		
		<br/>
		
		<div class="row">
			<div class="col-sm-2">
				<div class="form-group">
					<button class="btn btn-success btn-sm" onclick="registrarVehiculo(this);"><span class="icon-floppy-disk"></span> Guardar</button>
				</div>
			</div>
		</div>
	</form>
</div>
{% endblock %}
{% block footer_js %}
	{% load staticfiles %}
	<script type="text/javascript" src="{% static 'all/js/jquery.maskedinput.min.js' %}"></script>
	
	
	<script type="text/javascript">
		$(function(){
			new ObjectField($('#id_transportista_id'));
			new ObjectField($('#id_gps_id'));
			$('#id_placa').mask("aaa-9999",{autoclear: false});
		});
	</script>
{% endblock %}