@extends('layouts.admin-bloqueo-vista')

@section('titulo', 'Lista de Barrios')

@section('css')
	<style type="text/css">
		th{cursor:pointer}
	</style>
@endsection

@section('botonera')
	<li class="form-group">
		@if(strstr(Auth::user()->permisos['municipios'], 'c') || Auth::user()->id == 1)
			<a href="{!! URL::to('/barrio/create') !!}" class="btn btn-primary">Agregar un nuevo barrio</a>
		@endif
	</li>
	<li class="form-group">
		<a href="{!! URL::to('/admin') !!}" class="btn btn-warning btn-right">Salir</a>
	</li>
@endsection

@section('content')
	@include('alerts.request')
	<table class="table table-striped table-bordered table-hover table-condensed">
		<thead>
			<tr>
				<th id="departamentos.id">
					Id Dep
					<span class="glyphicon" aria-hidden="true"></span>
				</th>
				<th id="departamentos.nombre">
					<span class="glyphicon glyphicon-chevron-down" aria-hidden="true"></span>
					Dep Nombre
				</th>
				<th id="municipios.id">
					Id Mun
					<span class="glyphicon" aria-hidden="true"></span>
				</th>
				<th id="municipios.nombre">
					<span class="glyphicon" aria-hidden="true"></span>
					Mun Nombre
				</th>
				<th id="barrios.id">
					Id
					<span class="glyphicon" aria-hidden="true"></span>
				</th>
				<th id="barrios.nombre">
					<span class="glyphicon" aria-hidden="true"></span>
					Nombre
				</th>
				<td>Operaciones</td>
			</tr>
		</thead>
		<tbody>
			@include('barrio.forms.tbody')
		</tbody>
	</table>
@endsection

@section('scripts')
	<script type="text/javascript">
	$(document).ready(function(){
		var d='glyphicon-chevron-down';
		var u='glyphicon-chevron-up';
		var xhr=null;
		$('th').click(function(){
			var t=$(this);
			var s = t.find('span');
			t.siblings().find('span').removeClass(u + ' ' + d);
			if(s.hasClass(d)){
				s.removeClass(d).addClass(u);
				var o = 'desc';
			}
			else{
				s.removeClass(u).addClass(d);
				var o = 'asc';
			}
			if(xhr)xhr.abort();
			xhr=$.ajax({
				headers:{'X-CSRF-TOKEN':'{{ csrf_token() }}'},
				url:'barrio',
				data:{
					campo:t.attr('id'),
					orden:o,
				},
				beforeSend:function(){
					$('tbody').html('<tr><td colspan="7">Cargando ...</td></tr>');
				},
				success:function(r){
					$('tbody').html(r);
				}
			});

		});

		@include('componentes.script-mostrar-modal-request');
		
	});
	</script>
@endsection