@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">
						Visualización de Datos Generales (Falta Administrativa)
					</div>
				</div>
				<hr/>
				<div class="card-body" style="padding:0em 2em 2em 2em">

					<div class="row justify-content-center">
						<div class="col-12">
							<a href="{{route('datos-generales')}}" style="cursor: pointer;text-decoration: none;color:darkslateblue;font-size:1.1em">
								<strong>
									<i class="fas fa-arrow-left"></i> Volver
								</strong>
							</a>
						</div>
					</div>

          @include('general_data_fault.dataGeneralDataFault')

				</div>
			</div>

		</div>
	</div>
@endsection

@section('js-files')

	<script type="text/javascript">

		mapboxgl.accessToken = 'pk.eyJ1IjoiZGdzcG0yMDciLCJhIjoiY2t3M3Mwd292MDAyZTJ0cDhtNHE2M2NrNCJ9.P9jCFPM1mov2NkTkzeYFPg';

		var map = null;
		var marker = null;

		$( document ).ready(function() {

			document.getElementById('offenseCollapse').setAttribute("aria-expanded", true);
			document.getElementById('offense').classList.add("show");

			map = new mapboxgl.Map({
				container: 'map',
				style: 'mapbox://styles/mapbox/streets-v11',
				center: [ "{{$data->lng}}", "{{$data->lat}}" ],
				zoom: 13
			});

			marker = new mapboxgl.Marker({
				draggable: false
			})
			.setLngLat([ "{{$data->lng}}", "{{$data->lat}}" ])
			.addTo(map);

		});

	</script>

@endsection