198 lines
4.3 KiB
PHP
198 lines
4.3 KiB
PHP
@extends('layouts.landing')
|
|
|
|
@section('title',"show")
|
|
|
|
@section('content')
|
|
|
|
<div class="container-fluid">
|
|
|
|
<div class="card shadow mb-4">
|
|
|
|
<div class="card-header py-3 d-flex justify-content-between">
|
|
<h6 class="m-0 font-weight-bold text-primary">
|
|
Datos de los registros
|
|
</h6>
|
|
|
|
<a href="{{ route('code.index') }}" class="btn btn-sm btn-primary">
|
|
Regresar
|
|
</a>
|
|
</div>
|
|
|
|
<div class="card-body">
|
|
|
|
@foreach ($codes as $fecha => $registros)
|
|
|
|
<div class="card shadow mb-4">
|
|
|
|
<div class="card-header bg-primary text-white d-flex justify-content-between">
|
|
|
|
<h5 class="m-0">
|
|
📅 {{ \Carbon\Carbon::parse($fecha)->format('d/m/Y') }}
|
|
</h5>
|
|
|
|
<button class="btn btn-light btn-sm ver-ruta" data-registros='@json($registros)'>
|
|
<i class="fa-solid fa-circle-location-arrow fa-fade"></i>
|
|
Rastrear
|
|
</button>
|
|
|
|
</div>
|
|
|
|
<div class="card-body">
|
|
|
|
@foreach ($registros as $registro)
|
|
|
|
<div class="{{ !$loop->last ? 'border-bottom' : '' }} mb-2 pb-2">
|
|
<strong>Hora:</strong>
|
|
{{ $registro->registro->format('h:i A') }}
|
|
<br>
|
|
<strong>Código:</strong>
|
|
{{ $registro->codigo }}
|
|
</div>
|
|
|
|
@endforeach
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
@endforeach
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
<div id="mapOverlay"
|
|
style="
|
|
position:fixed;
|
|
top:0;
|
|
left:0;
|
|
width:100%;
|
|
height:100%;
|
|
background:rgba(0,0,0,.6);
|
|
z-index:9999;
|
|
display:none;
|
|
">
|
|
|
|
<div
|
|
style="
|
|
position:absolute;
|
|
top:50%;
|
|
left:50%;
|
|
transform:translate(-50%,-50%);
|
|
width:80%;
|
|
height:80%;
|
|
background:white;
|
|
border-radius:10px;
|
|
overflow:hidden;
|
|
">
|
|
|
|
<button id="cerrarMapa"
|
|
class="btn btn-danger btn-sm"
|
|
style="
|
|
position:absolute;
|
|
top:10px;
|
|
right:10px;
|
|
z-index:10;
|
|
">
|
|
✖
|
|
</button>
|
|
|
|
<div id="map"
|
|
style="width:100%;height:100%;"></div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
@endsection
|
|
|
|
|
|
|
|
@push('scripts')
|
|
|
|
{{-- GOOGLE MAPS --}}
|
|
<script src="https://maps.googleapis.com/maps/api/js?key={{ config('services.google_maps.key') }}"></script>
|
|
|
|
<script>
|
|
|
|
let map;
|
|
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
|
|
const overlay =
|
|
document.getElementById('mapOverlay');
|
|
|
|
const cerrar =
|
|
document.getElementById('cerrarMapa');
|
|
|
|
cerrar.onclick = () => {
|
|
overlay.style.display = 'none';
|
|
};
|
|
|
|
document.querySelectorAll('.ver-ruta')
|
|
.forEach(btn => {
|
|
|
|
btn.addEventListener('click', function () {
|
|
|
|
console.log("CLICK OK");
|
|
|
|
const registros =
|
|
JSON.parse(this.dataset.registros);
|
|
|
|
const puntos = registros.map(r => ({
|
|
lat: Number(r.latitud),
|
|
lng: Number(r.longitud)
|
|
}));
|
|
|
|
|
|
overlay.style.display = 'block';
|
|
|
|
setTimeout(() => {
|
|
|
|
const mapDiv = document.getElementById('map');
|
|
|
|
map = new google.maps.Map(mapDiv,{
|
|
zoom:15,
|
|
center:puntos[0]
|
|
});
|
|
|
|
const bounds = new google.maps.LatLngBounds();
|
|
|
|
puntos.forEach((p,i)=>{
|
|
|
|
new google.maps.Marker({
|
|
position:p,
|
|
map:map,
|
|
label:String(i+1)
|
|
});
|
|
|
|
bounds.extend(p);
|
|
});
|
|
|
|
new google.maps.Polyline({
|
|
path:puntos,
|
|
strokeWeight:4,
|
|
map:map
|
|
});
|
|
|
|
map.fitBounds(bounds);
|
|
|
|
// 🔥 recalculo REAL
|
|
google.maps.event.trigger(map,'resize');
|
|
map.fitBounds(bounds);
|
|
|
|
},400);
|
|
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
|
|
|
</script>
|
|
|
|
@endpush
|