@extends('layouts.app')

@section('content')
	<div class="row justify-content-center" style="margin-top:1em">
		<div class="col-10">

			<div class="card shadow p-3 mb-5 bg-body rounded">
				<div class="row justify-content-center" style="margin-top:0em;margin-bottom:0em;padding:0em">
					<div class="col-12" align="center" style="color:#222222;font-family:Soho Std;font-size:2.2em">
						Gestión de Incidentes de Tránsito
					</div>
				</div>
				<hr/>
				<div class="card-body" style="padding:0em 2em 2em 2em">
					@if($type == "Administrador" || $type == "Capturista General"|| $type == "Subadministrador")
						<div class="row justify-content-center">
							<div class="col-12" style="" align="right">
								<a class="text-primary" href="{{route('traffic-incidents.register')}}" style="cursor: pointer;text-decoration: none;font-size:1.2em;font-weight:bold">
									Nuevo
								</a>
							</div>
						</div>
					@endif
					<div class="row justify-content-center" style="margin-top:0.2em">
						<div class="col-12 table-responsive">
							<table id="table_info"  class="table table-bordered" style="width:100%">
								<thead>
								<tr>
									<th>Incidente de tránsito</th>
									@if ($type == 'Administrador'|| $type == "Subadministrador")
										<th></th><th></th>
									@elseif($type == "Capturista General" || $type == "Capturista Medico" )
										<th></th>
									@endif
								</tr>
								</thead>
								<tbody>
									@foreach ($trafficIncidents as $id => $description )
                                    <tr>
											<th>{{ $description }}</th>
											@if($type == "Administrador" || $type == "Subadministrador" || $type == "Capturista General" || $type == "Capturista Medico"  )
											<th><a class="text-success" href="{{ route('traffic-incidents.edit', $id) }}"style='padding:0em 0.3em;text-decoration:none;font-weight:bold;'>Editar</a></th>
											@endif
											@if ($type == 'Administrador'|| $type == "Subadministrador")
											<th><a class="text-danger" href="{{ route('traffic-incidents.delete', $id) }}"style='padding:0em 0.3em;text-decoration:none;font-weight:bold;'>Eliminar</a></th>
											@endif
                                    </tr>
									@endforeach
								</tbody>
							</table>
						</div>
					</div>

				</div>
			</div>

		</div>
	</div>
@endsection

@section('js-files')

	<script type="text/javascript">

		$( document ).ready(function() {
			document.getElementById('myCollapse').setAttribute("aria-expanded", true);
			document.getElementById('layouts').classList.add("show");

			$('#table_info').DataTable( {
				language: {url: 'datatables/Spanish.json'},
				dom: 'Bfrtip',
				searching:true,
				paging:true,
				ordering:false,
				bLengthChange: false,
			} );


		});

	</script>

@endsection