@extends('layouts.layout')

@section('breadcrumb')
	<li class="breadcrumb-item"><a href="">Generales</a></li>
	<li class="breadcrumb-item active">Ciudades</li>
@endsection

@section('content')
	<div class="container">
		<div class="row justify-content-center">
			<div class="col-md-12">
				<div class="card">
					<div class="card-header">
						<div class="row">
							<div class="col-md-6 align-middle">
								{{ __('Visualización de Ciudades') }}
							</div>
							<div class="col-md-6" align="right">
								<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal"
								style="padding: 0.1em 0.4em">
									<i class="fas fa-plus fa-lg"></i>
								</button>
								<button type="button" class="btn btn-info" data-toggle="modal" data-target="#modalSearch"
								style="padding: 0.1em 0.4em">
									<i class="fas fa-search fa-lg"></i>
								</button>
								<button type="button" class="btn btn-warning" data-toggle="modal" data-target="#modalExport"
								style="padding: 0.1em 0.4em">
									<i class="fas fa-download fa-lg"></i>
								</button>
							</div>
						</div>
					</div>

					<div class="card-body">						
						<div class="form-group row justify-content-center">
							<div class="col-md-11">
								<table class="table table-sm table-border" style="background:white">
									<thead>
										<tr>
											<td align="left"><strong>Ciudad</strong></td>
											<td align="left"><strong>Estatal</strong></td>
											<td align="left" style="width:10em"><strong></strong></td>
										</tr>
									</thead>
									@if( isset($cities_unit[0]) )
										<tbody>
											@foreach( $cities_unit as $city )
												<tr>
													<td align="left" style="vertical-align:middle">{{ $city->city }}</td>
													<td align="left" style="vertical-align:middle">{{ $city->state }}</td>
													<td align="right" style="vertical-align:middle">
														<button type="button" class="btn btn-info active" 
														onclick="changeEdit('{{ $city->city }}','{{ $city->state_units_id }}','{{ $city->id }}')">
														<i class="fas fa-edit fa-lg"></i> </button>
														<button type="button" class="btn btn-danger"
														onclick="changeDelete('{{ $city->city }}','{{ $city->state_units_id }}','{{ $city->id }}')">
														<i class="fas fa-times fa-lg"></i> </button>
													</td>
												</tr>
											@endforeach
										</tbody>
									@endif
								</table>
							</div>
						</div>
						<div class="form-group row justify-content-center">
							<div class="col-11">
								{!! $cities_unit->render() !!}
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	
	<div class="modal fade text-xs-left" id="modal" tabindex="-1" role="dialog" aria-hidden="true">
		<div class="modal-dialog modal-sm" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<h4 class="modal-title" id="myModalLabel19">REGISTRO DE CIUDADES</h4>
				</div>
				{!! Form::open( [ 'route' => 'registerCitiesUnits', 'method' => 'POST'] ) !!}
				@csrf
				<div class="modal-body">					
					<h5>{!! Form::label( 'city', "Nombre de la Ciudad", ['class' => 'col-form-label'] ) !!}</h5>
					<input id="city" type="text" class="form-control" name="city" required autofocus>
					<h5>{!! Form::label( 'state_units_id', "Estado", ['class' => 'col-form-label'] ) !!}</h5>
					<select class="form-control" name="state_units_id" id="state_units_id" required>
						<option value="">-- Elige un valor --</option>
						@foreach($states_unit as $state)
							<option value="{{ $state['id'] }}">{{ $state['state'] }}</option>
						@endforeach
					</select>
					<hr/>
					<h5>Usuario: {{{ isset(Auth::user()->user) ? Auth::user()->user : Auth::user()->email }}}</h5>
					<h5>{!! Form::label( 'passwordUser', "Contraseña", ['class' => 'col-form-label'] ) !!}</h5>
					<input id="passwordUser" type="password" class="form-control" name="passwordUser" required autofocus>					
				</div>
				<div class="modal-footer">
					<button type="button" class="btn grey btn-outline-secondary" data-dismiss="modal">Cancelar</button>
					<button type="submit" class="btn btn-outline-primary">Registrar</button>
				</div>
				{!! Form::close() !!}
			</div>
		</div>
	</div>
	
	<div class="modal fade text-xs-left" id="modalEdit" tabindex="-1" role="dialog" aria-hidden="true">
		<div class="modal-dialog modal-sm" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<h4 class="modal-title" id="myModalLabel19">EDICION DE CIUDADES</h4>
				</div>
				{!! Form::open( [ 'route' => 'updateCitiesUnits', 'method' => 'PUT'] ) !!}
				@csrf
				<div class="modal-body">					
					<h5>{!! Form::label( 'city', "Nombre de la Ciudad", ['class' => 'col-form-label'] ) !!}</h5>
					<input id="cityEdit" type="text" class="form-control" name="city" autofocus>
					<h5>{!! Form::label( 'state_units_id', "Estado", ['class' => 'col-form-label'] ) !!}</h5>
					<select class="form-control" name="state_units_id" id="state_units_idEdit" >
						<option value="">-- Elige un valor --</option>
						@foreach($states_unit as $state)
							<option value="{{ $state['id'] }}">{{ $state['state'] }}</option>
						@endforeach
					</select>
					<hr/>
					<h5>Usuario: {{{ isset(Auth::user()->user) ? Auth::user()->user : Auth::user()->email }}}</h5>
					<h5>{!! Form::label( 'passwordUser', "Contraseña", ['class' => 'col-form-label'] ) !!}</h5>
					<input id="passwordUserEdit" type="password" class="form-control" name="passwordUser" required autofocus>
					<input id="idEdit" type="hidden" class="form-control" name="id">
				</div>
				<div class="modal-footer">
					<button type="button" class="btn grey btn-outline-secondary" data-dismiss="modal">Cancelar</button>
					<button type="submit" class="btn btn-outline-success">Actualizar</button>
				</div>
				{!! Form::close() !!}
			</div>
		</div>
	</div>
	
	<div class="modal fade text-xs-left" id="modalDelete" tabindex="-1" role="dialog" aria-hidden="true">
		<div class="modal-dialog modal-sm" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<h5 class="modal-title" id="myModalLabel19">ELIMINACION DE CIUDADES</h5>
				</div>
				{!! Form::open( [ 'route' => 'deleteCitiesUnits', 'method' => 'POST'] ) !!}
				@csrf
				<div class="modal-body">					
					<h5>Confirme la informaci&oacute;n de la ciudad y presione el bot&oacute;n para terminar la eliminaci&oacute;n </h5>
					<h5>{!! Form::label( 'city', "Nombre de la Ciudad", ['class' => 'col-form-label'] ) !!}</h5>
					<input id="cityDelete" type="text" class="form-control" name="city" disabled>
					<h5>{!! Form::label( 'state_units_id', "Estado", ['class' => 'col-form-label'] ) !!}</h5>
					<select class="form-control" name="state_units_id" id="state_units_idDelete" disabled>
						<option value="">-- Elige un valor --</option>
						@foreach($states_unit as $state)
							<option value="{{ $state['id'] }}">{{ $state['state'] }}</option>
						@endforeach
					</select>
					<hr/>
					<h5>Usuario: {{{ isset(Auth::user()->user) ? Auth::user()->user : Auth::user()->email }}}</h5>
					<h5>{!! Form::label( 'passwordUser', "Contraseña", ['class' => 'col-form-label'] ) !!}</h5>
					<input id="passwordUserDelete" type="password" class="form-control" name="passwordUser" required autofocus>
					<input id="idDelete" type="hidden" class="form-control" name="id">
				</div>
				<div class="modal-footer">
					<button type="button" class="btn grey btn-outline-secondary" data-dismiss="modal">Cancelar</button>
					<button type="submit" class="btn btn-outline-danger">Eliminar</button>
				</div>
				{!! Form::close() !!}
			</div>
		</div>
	</div>
	
	<div class="modal fade text-xs-left" id="modalExport" tabindex="-1" role="dialog" aria-hidden="true">
		<div class="modal-dialog modal-sm" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<h5 class="modal-title" id="myModalLabel19">EXPORTACION DE CIUDADES</h5>
				</div>
				{!! Form::open( [ 'route' => 'exportCitiesUnits', 'method' => 'POST', 'files' => true] ) !!}
				@csrf
				<div class="modal-body">	
					<h5>Usuario: {{{ isset(Auth::user()->user) ? Auth::user()->user : Auth::user()->email }}}</h5>
					<h5>{!! Form::label( 'passwordUser', "Contraseña", ['class' => 'col-form-label'] ) !!}</h5>
					<input id="passwordUserExport" type="password" class="form-control" name="passwordUser" required autofocus>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn grey btn-outline-secondary" data-dismiss="modal">Cancelar</button>
					<button type="submit" class="btn btn-outline-warning" onclick="closeExport()">Exportar</button>
				</div>
				{!! Form::close() !!}
			</div>
		</div>
	</div>
	
	<div class="modal fade text-xs-left" id="modalSearch" tabindex="-1" role="dialog" aria-hidden="true">
		<div class="modal-dialog modal-sm" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<h4 class="modal-title" id="myModalLabel19">BUSQUEDA DE CIUDADES</h4>
				</div>
				{!! Form::open( [ 'route' => 'searchCitiesUnits', 'method' => 'POST'] ) !!}
				@csrf
				<div class="modal-body">					
					<h5>{!! Form::label( 'wordSearch', "Texto a buscar", ['class' => 'col-form-label'] ) !!}</h5>
					<input id="wordSearch" type="text" class="form-control" name="wordSearch" required autofocus>
					<h5>{!! Form::label( 'fields', "Buscar en:", ['class' => 'col-form-label'] ) !!}</h5>
					<h5>
						<input type="checkbox" name="state" value="" checked> Estados<br>
						<input type="checkbox" name="city" value="" checked> Ciudades
					</h5>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn grey btn-outline-secondary" data-dismiss="modal">Cancelar</button>
					<button type="submit" class="btn btn-outline-info">Buscar</button>
				</div>
				{!! Form::close() !!}
			</div>
		</div>
	</div>
	
	<script>
		
		$( document ).ready(function() {
			if(document.getElementsByClassName("pagination").lenght > 0)
				document.getElementsByClassName("pagination")[0].classList.add('justify-content-end');
		});
		
		
		function changeEdit(city,state,id){
			//alert(state);
			document.getElementById('cityEdit').value = city;
			document.getElementById('state_units_idEdit').value = state;
			document.getElementById('idEdit').value = id;
			$("#modalEdit").modal();
		}
				
		function changeDelete(city,state,id){
			//alert(state+id);
			document.getElementById('cityDelete').value = city;
			document.getElementById('state_units_idDelete').value = state;
			document.getElementById('idDelete').value = id;
			$("#modalDelete").modal();
		}
		
		
		function closeExport() {
			$('#modalExport').modal('hide');
		}
		
	</script>
@endsection