{% 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 header_css %}
<style>
  #map {
    width:100%;
	height:400px;
  }
</style>
{% endblock %}

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

{% block content %}
	<form method="get" name="consultarOrdenEntregaForm" action="">
		
		<div class="tabbable tab-content-bordered">
			<div class="row">
				<div class="col-md-4 col-sm-12">
					<h4>
						<small>Orden Entrega:</small><br />
						{{ form.ordenentrega_id }}
					</h4>
				</div>
				<div class="col-md-4 col-sm-12">
					<h4>
						<br/>
						<button class="btn btn-primary btn-sm" onclick="consultarOrdenEntrega(this);"><span class="glyphicon glyphicon-search text-size-base"></span> Consultar</button>
					</h4>
				</div>
			</div>
		</div>
	</form>
	
	{% if orden_entrega %}
		<form method="post" name="notificarOrdenEntregaForm" action="" enctype="multipart/form-data">
			{% csrf_token %}
			<input name="ordenentrega_id" type="hidden" value="{{ orden_entrega.id }}">
			<input name="accion" id="accion" type="hidden">
				<hr >
				<!-- Informacion de la orden de entrega y envio -->
			
			<div class="row">	
				<div class="col-sm-6">
					<div class="tabbable tab-content-bordered">
						<div class="row">
							<div class="col-md-6 col-sm-12">
								<h4>
									<small>Cliente:</small><br />
									{{ orden_entrega.cliente }}
								</h4>
							</div>
						</div>
						<div class="row">
							<div class="col-md-6 col-sm-12">
								<h4>
									<small>Vehículo:</small><br />
									{{ orden_entrega.vehiculo }}
								</h4>
							</div>
						</div>
						<div class="row">
							<div class="col-md-6 col-sm-12">
								<h4>
									<small>Chofer:</small><br />
									{{ orden_entrega.chofer }}
								</h4>
							</div>
						</div>
						<div class="row">
							<div class="col-md-6 col-sm-12">
								<h4>
									<small>Descripci&oacute;n:</small><br />
									{{ orden_entrega.descripcion|default:'N/A' }}
								</h4>
							</div>
						</div>
						
						{% if orden_entrega.detalle_envio %}
							<div class="row">
								<div class="col-md-12 col-sm-12">
									<h4>
										<small># Manifiesto	:</small><br />
										{{ orden_entrega.detalle_envio.envio.numero_manifiesto|default:'N/A' }}
									</h4>
								</div>
							</div>
							<div class="row">
								<div class="col-md-12 col-sm-12">
									<h4>
										<small># Refrendo:</small><br />
										{{ orden_entrega.detalle_envio.envio.numero_refrendo|default:'N/A' }}
									</h4>
								</div>
							</div>
							<div class="row">
								<div class="col-md-12 col-sm-12">
									<h4>
										<small># Orden:</small><br />
										{{ orden_entrega.detalle_envio.envio.numero_orden|default:'N/A' }}
									</h4>
								</div>
							</div>
							<div class="row">
								<div class="col-md-12 col-sm-12">
									<h4>
										<small>Descripción del envío:</small><br />
										{{ orden_entrega.detalle_envio.envio.descripcion|default:'N/A' }}
									</h4>
								</div>
							</div>
						{% endif %}
					</div>
					<!-- Fin Informacion de la orden de entrega y envio -->
				</div>
				
				
				<!-- Informacion del mapa de vehiculo propio-->
				{% if orden_entrega.vehiculo.propiedad = orden_entrega.vehiculo.PROPIO %}
					<div class="col-sm-6">
						<div id="map"></div>
						{% if ultimo_registro %}
							<div id="leyenda">
								<strong>Fecha de Captura: </strong> {{ ultimo_registro.fecha_hora_captura }}</br>
								<strong>Estado Lectura GPS: </strong> {{ ultimo_registro.get_estado_senial_gps_display }}</br>
								<strong># Satélites: </strong>  {{ ultimo_registro.numero_satelites }}</br>
								<strong>Intensidad GSM : </strong> {{ ultimo_registro.intensidad_senial_gsm }}/31</br>
							</div>
						{% endif %}
					</div>
				{% endif %}
				<!-- Fin de Informacion del mapa -->
				
			</div>
				
				{% if orden_entrega.detalle_envio %}
					<hr />
					<div class="row">
						<div class="col-md-6 col-sm-12">
							<h3>
								{{ orden_entrega.detalle_envio.get_titulo_x_ordenentrega }}<br />
							</h3>
						</div>
					</div>
					
					<!-- Informacion del detalle de la orden de entrega -->
					<div class="tabbable tab-content-bordered">
						<div class="row">
							<div class="col-md-6 col-sm-12">
								<h4>
									<small>Embalaje:</small><br />
									{{ orden_entrega.cliente }}
								</h4>
							</div>
						</div>
						<div class="row">
							<div class="col-md-6 col-sm-12">
								<h4>
									<small>Descripción:</small><br />
									{{ orden_entrega.detalle_envio.descripcion }}
								</h4>
							</div>
						</div>
					</div>
					<!-- Fin Informacion del detalle de la orden de entrega -->
				{% endif %}
				
				<hr/>
				<div class="row">
					<div class="col-md-5 col-sm-12">
						<div class="form-group">
							<label>Descripci&oacute;n de la notificaci&oacute;n:</label>
							{{ form.descripcion }}{{ form.errors.descripcion }}
						</div>
					</div>
				</div>
				<div class="row">
					<div class="col-sm-12">
						<br/>
						<button class="btn btn-success btn-sm" onclick="notificarOrdenEntrega(this);"><span class="glyphicon glyphicon-bullhorn text-size-base"></span> Notificar</button>
					</div>
				</div>
				
				
				<hr />
				<div class="row">
					<div class="col-md-6 col-sm-12">
						<h4>
							<small>Historial de Notificaciones:</small><br />
						</h4>
					</div>
				</div>
				<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">Secuencia</th>
								<th class="text-center" data-toggle="true">Fecha/Hora</th>
								<th class="text-center" data-hide="phone,tablet">Descripción</th>
							</tr>
						</thead>
						<tbody>
							{% for notificacion in orden_entrega.get_notificaciones_desc %}
							<tr>
								<td>{{ notificacion.secuencia }}</td>
								<td>{{ notificacion.fecha_notificacion|date:"d/m/Y g:i:s A" }}</td>
								<td>{{ notificacion.descripcion }}</td>
							</tr>
							{% endfor %}
						</tbody>
					</table>
				</div>
				
				<hr />
				<div class="row">
					<div class="col-sm-12">
						<br>
						<button class="btn btn-info btn-sm" onclick="finalizarOrdenEntrega(this);"><span class="glyphicon glyphicon-ok text-size-base"></span> Finalizar Entrega</button>
					</div>
				</div>
		</form>
	{% endif %}
{% endblock %}


{% block footer_js %}
	<script type="text/javascript" src="{% url 'comextweb.helpers.utils.mediaurl' application='apps/frontend/logistica' folder='media' %}js/ordenentrega.js?v={{settings.JS_VERSION}}"></script>
	<script src="https://maps.googleapis.com/maps/api/js"></script>
	
	<script type="text/javascript">
		
		$(function(){

			ordenentregafield = new ObjectField($('#id_ordenentrega_id'));
			urlordenentregafield = ordenentregafield.dlgUrl;
			ordenentregafield.dlgUrl = urlordenentregafield + '?solo_confirmadas=1';
			
			
			google.maps.event.addDomListener(window, 'load', initialize);

		});
		
		function initialize() {
	  			{% if ultimo_registro %}
		  			latitud = '{{ ultimo_registro.latitud }}';
		  			latitud = parseFloat(latitud.replace(',', '.'));
		  			longitud = '{{ ultimo_registro.longitud }}';
		  			longitud = parseFloat(longitud.replace(',', '.'));
				{% else %}
					latitud = 0;
					longitud = 0;
				{% endif %}

				var myLatLng = {lat: latitud, lng: longitud};
		
				var map = new google.maps.Map(document.getElementById('map'), {
					zoom: 15,
					center: myLatLng
				});
			
				var marker = new google.maps.Marker({
					position: myLatLng,
					map: map,
					title: 'Ubicación Actual'
				});
		  }
		
		function consultarOrdenEntrega(el){
			$(el).prop('disabled', true);
			$(el).html('<i class="icon-spinner4 text-size-base spinner"></i>&nbsp;Consultando...');
			document.forms.consultarOrdenEntregaForm.submit();
		}
		
		function notificarOrdenEntrega(el){
			$(el).prop('disabled', true);
			$(el).html('<i class="icon-spinner4 text-size-base spinner"></i>&nbsp;Notificando...');
			$('#accion').val('N');
			document.forms.notificarOrdenEntregaForm.submit();
		}
		
		function finalizarOrdenEntrega(el){
			$(el).prop('disabled', true);
			$(el).html('<i class="icon-spinner4 text-size-base spinner"></i>&nbsp;Finalizando...');
			$('#id_descripcion').val('-');
			$('#accion').val('F');
			document.forms.notificarOrdenEntregaForm.submit();
		}
		
	</script>
{% endblock %}