@extends('layouts.layout')

@section('breadcrumb')
	<li class="breadcrumb-item"><a href="">Generales</a></li>
	<li class="breadcrumb-item"><a href="{{route('viewPlots')}}">Puntos</a></li>
	<li class="breadcrumb-item active">Visualizacion</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 Puntos') }}
						</div>
						<div class="col-md-6" align="right">
							<button type="button" class="btn btn-warning" data-toggle="modal" data-target="#modalExport"
							style="padding: 0.1em 0.4em" onclick="openExport()">
								<i class="fas fa-download fa-lg"></i>
							</button>
						</div>
					</div>
				</div>

				<div class="card-body">						
					<div class="form-group row justify-content-$modelGps">
						<div class="col-md-12">
							<table class="table table-sm table-border" style="background:white;margin-right: 10em">
								<thead>
									<tr>
										<td align="center" class="align-middle"><strong>GPS</strong></td>
										<td align="center" class="align-middle"><strong>Latitud</strong></td>
										<td align="center" class="align-middle"><strong>Longitud</strong></td>
										<td align="center" class="align-middle"><strong>Fecha</strong></td>
										<td align="center" class="align-middle"><strong>Hora</strong></td>
										<td align="center" class="align-middle"><strong>Comando</strong></td>
									</tr>
								</thead>
								@if( isset($plots[0]) )
									<tbody>
										@foreach( $plots as $plot )
											<tr>
												<td align="center" style="vertical-align:middle">{{ $plot->name }}</td>
												<td align="center" style="vertical-align:middle">{{ $plot->lat }}</td>
												<td align="center" style="vertical-align:middle">{{ $plot->lng }}</td>
												<td align="center" style="vertical-align:middle">{{ $plot->date }}</td>
												<td align="center" style="vertical-align:middle">{{ $plot->time }}</td>
												<td align="center" style="vertical-align:middle">{{ $plot->command }}</td>
											</tr>
										@endforeach
									</tbody>
								@endif
							</table>
						</div>
					</div>
					<div class="form-group row justify-content-center">
						<div class="col-11">
							{!! $plots->render() !!}
						</div>
					</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 PUNTOS</h5>
						</div>
						{!! Form::open( [ 'route' => 'exportPlots', '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>
	</div>
</div>

	<script>
		
		$( document ).ready(function() {
			if(document.getElementsByClassName("pagination").lenght > 0)
				document.getElementsByClassName("pagination")[0].classList.add('justify-content-end');
		});
		
		function closeExport() {
			
			$('#modalExport').modal('hide');
		}
		
		function openExport() {
			document.getElementById('passwordUserExport').value = '';
		}
		
		
	</script>


@endsection