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

{% block extra_head %}
<style type="text/css">
	ul.errorlist{
		list-style: none;
	    margin: 0;
	    color: red;
	    padding: 0;
	}
	.bootstrap-datetimepicker-widget{
		width:310px;
	}
	.datepicker-days table{
		width:300px;
	}
	.bootstrap-datetimepicker-widget td.day{
		line-height: 14px;
	}
	.table-condensed>tbody>tr>td, .table-condensed>thead>tr>th{
		padding: 10px 10px;
	}
</style>
{% endblock %}

{% block main_content %}
<div class="table-responsive">
	<form method="post" action="{% url 'detalle_dudaobs' %}" name="formDetalle">
		<table class="table table-togglable table-hover tabla-menos-padding">
			<thead>
				<tr class="bg-slate">
					<th width="200">Fecha</th>
					<th>Descripci&oacute;n</th>
					<th width="50"></th>
				</tr>
			</thead>
			<tbody id="">
				{% for d in detalles %}
					<tr>
						<td>{{ d.fecha|date:'d/m/Y H:i' }}</td>
						<td>{{ d.descripcion }}</td>
						<td class="text-center"><a class="text-danger" href="javascript:void(0);" data-href="{% url 'detalle_dudaobs' %}?id={{d.id}}&envio={{envio_id}}&envio_campo={{envio_campo_id}}&tipo={{tipo}}&eliminar=1" onclick="javascript:eliminarDetalle(this);"><span class="glyphicon glyphicon-trash"></span></a></td>
					</tr>
				{% endfor %}
			</tbody>
			<tfoot>
				<tr>
					<td>
						{% csrf_token %}
						{{ form.fecha }}{{ form.errors.fecha }}
						<input type="hidden" name="envio" value="{{envio_id}}" />
						<input type="hidden" name="envio_campo" value="{{envio_campo_id}}" />
						<input type="hidden" name="tipo" value="{{tipo}}" />
					</td>
					<td>{{ form.descripcion }}{{ form.errors.descripcion }}</td>
					<td></td>
				</tr>
				<tr>
					<td colspan="10"><a class="btn btn-xs btn-success" href="javascript:;" onclick="agregarDetalle(this);"><i class="glyphicon glyphicon-floppy-disk"></i> Guardar Detalle</a></td>
				</tr>
			</tfoot>
		</table>
	</form>
</div>
<script type="text/javascript">
	function agregarDetalle(e){
		e.onclick = null;
		document.forms.formDetalle.submit();
	}
	
	function eliminarDetalle(e){
		if(confirm("Esta seguro de eliminar el detalle?")){
			location.href = $(e).attr('data-href');
		}
		return false;
	}
	
	$(function(){
		$('.datetimepicker').datetimepicker({ pick12HourFormat: false, useCurrent: false, autoClose: true, format: 'DD/MM/YYYY HH:mm' });
	})
</script>
{% endblock %}