@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