@extends('layout.app')

@section('title', 'Tracking')
@section('page_title', 'Suivi des trajets & Visites')

@section('content')

<h2>Tracking {{ $user->name }}</h2>

{{-- ✅ KPI PAR TYPE (DÉJÀ FILTRÉ DANS CONTROLLER) --}}
@if($kpiByListingType->count() > 0)
<div style="background:#eef3f9;padding:15px;border-radius:10px;margin-bottom:20px;">
    <strong>Visites par type d'établissement :</strong><br>
    @foreach($kpiByListingType as $type => $items)
        <span class="badge bg-primary" style="margin-right:8px;">
            {{ $type }} : {{ $items->count() }}
        </span>
    @endforeach
</div>
@endif

<!-- ✅ RÉSUMÉ -->
<div style="background:#f4f6f9; padding:15px; border-radius:10px; margin-bottom:20px;">
    <strong>Début :</strong> {{ $startTime ?? '—' }} |
    <strong>Fin :</strong> {{ $endTime ?? '—' }} |
    <strong>Durée :</strong> {{ $durationFormatted ?? '—' }} |
    <strong>Total points :</strong> {{ count($locations) }} |
    <strong>Arrêts :</strong> {{ count($disconnects) }} |
    <strong>Total visites :</strong> {{ count($visits) }}
</div>

<!-- ✅ FILTRES RAPIDES -->
<div style="margin-bottom:15px; display:flex; gap:10px; flex-wrap:wrap;">
    <a href="?period=today" class="btn btn-sm {{ $period=='today'?'btn-primary':'btn-outline-primary' }}">Aujourd'hui</a>
    <a href="?period=yesterday" class="btn btn-sm {{ $period=='yesterday'?'btn-secondary':'btn-outline-secondary' }}">Hier</a>
    <a href="?period=before_yesterday" class="btn btn-sm {{ $period=='before_yesterday'?'btn-warning':'btn-outline-warning' }}">Avant-hier</a>
    <a href="?period=this_week" class="btn btn-sm {{ $period=='this_week'?'btn-success':'btn-outline-success' }}">Cette semaine</a>
    <a href="?period=all" class="btn btn-sm {{ $period=='all'?'btn-dark':'btn-outline-dark' }}">Tout</a>
</div>

<!-- ✅ FILTRE PERSONNALISÉ -->
<form method="GET" action="" style="margin-bottom:25px; display:flex; gap:10px; flex-wrap:wrap;">
    <input type="datetime-local" name="start" value="{{ optional($start)->format('Y-m-d\TH:i') }}" class="form-control">
    <input type="datetime-local" name="end" value="{{ optional($end)->format('Y-m-d\TH:i') }}" class="form-control">
    <button type="submit" class="btn btn-primary">Filtrer</button>
</form>

<!-- ✅ MAP -->
<div id="map" style="height:650px; border-radius:14px; margin-bottom:30px;"></div>

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA8s-gvwvwZCq3ekeQyH3xQKzHBf-SE7jg&libraries=visualization"></script>

<script>

const locations = @json($locations);
const disconnects = @json($disconnects);
const visits = @json($visits);

let map;
let dynamicElements = [];

function initMap() {

    map = new google.maps.Map(document.getElementById("map"), {
        zoom: 13,
        center: locations.length > 0 ? {
            lat: parseFloat(locations[0].latitude),
            lng: parseFloat(locations[0].longitude)
        } : { lat: 33.5731, lng: -7.5898 }
    });

    if (locations.length === 0) return;

    const bounds = new google.maps.LatLngBounds();
    const pathCoordinates = [];
    const heatmapData = [];
    const infoWindow = new google.maps.InfoWindow();

    // TRAJET
    locations.forEach((loc, index) => {

        const position = new google.maps.LatLng(
            parseFloat(loc.latitude),
            parseFloat(loc.longitude)
        );

        bounds.extend(position);
        pathCoordinates.push(position);
        heatmapData.push(position);

        let color = "#1565C0";
        if (index === 0) color = "#2E7D32";
        if (index === locations.length - 1) color = "#C62828";

        const marker = new google.maps.Marker({
            position,
            map,
            icon: {
                path: google.maps.SymbolPath.CIRCLE,
                scale: 5,
                fillColor: color,
                fillOpacity: 1,
                strokeColor: "#ffffff",
                strokeWeight: 2
            }
        });

        marker.addListener("click", () => {
            infoWindow.setContent(`
                <div style="font-size:13px;">
                    ${new Date(loc.recorded_at).toLocaleString('fr-FR')}
                </div>
            `);
            infoWindow.open(map, marker);
        });
    });

    new google.maps.Polyline({
        path: pathCoordinates,
        strokeColor: "#1E88E5",
        strokeOpacity: 0.85,
        strokeWeight: 4,
        map
    });

    new google.maps.visualization.HeatmapLayer({
        data: heatmapData,
        radius: 35
    }).setMap(map);

    // ARRÊTS
    disconnects.forEach(stop => {

        const stopTime = new Date(stop.from);

        const stopLocation = locations.find(l =>
            new Date(l.recorded_at).getTime() === stopTime.getTime()
        );

        if (!stopLocation) return;

        const marker = new google.maps.Marker({
            position: {
                lat: parseFloat(stopLocation.latitude),
                lng: parseFloat(stopLocation.longitude)
            },
            map,
            icon: "http://maps.google.com/mapfiles/ms/icons/orange-dot.png"
        });

        marker.addListener("click", () => {
            infoWindow.setContent(`
                <div style="font-size:13px;">
                    <strong>Arrêt</strong><br>
                    De: ${new Date(stop.from).toLocaleString('fr-FR')}<br>
                    À: ${new Date(stop.to).toLocaleString('fr-FR')}<br>
                    Durée: ${stop.duration} min
                </div>
            `);
            infoWindow.open(map, marker);
        });
    });

    map.fitBounds(bounds);
}

// CLEAN VISITE
function clearDynamic() {
    dynamicElements.forEach(el => el.setMap(null));
    dynamicElements = [];
}

// SHOW VISITE
function showVisit(visitId) {

    const visit = visits.find(v => v.id === visitId);
    if (!visit || !visit.listing || !visit.poslat || !visit.poslong) return;

    clearDynamic();

    const nominal = new google.maps.LatLng(
        parseFloat(visit.listing.lat),
        parseFloat(visit.listing.lng)
    );

    const real = new google.maps.LatLng(
        parseFloat(visit.poslat),
        parseFloat(visit.poslong)
    );

    const nominalMarker = new google.maps.Marker({
        position: nominal,
        map,
        icon: "http://maps.google.com/mapfiles/ms/icons/red-dot.png"
    });

    const realMarker = new google.maps.Marker({
        position: real,
        map,
        icon: "http://maps.google.com/mapfiles/ms/icons/blue-dot.png"
    });

    dynamicElements.push(nominalMarker, realMarker);

    const line = new google.maps.Polyline({
        path: [nominal, real],
        strokeColor: visit.distance_meters > 100 ? "#FF0000" : "#2E7D32",
        strokeWeight: 3,
        map
    });

    dynamicElements.push(line);

    const visitTime = new Date(visit.date_visit);

    const before = locations
        .filter(l => new Date(l.recorded_at) < visitTime)
        .sort((a,b) => new Date(b.recorded_at) - new Date(a.recorded_at))[0];

    const after = locations
        .filter(l => new Date(l.recorded_at) > visitTime)
        .sort((a,b) => new Date(a.recorded_at) - new Date(b.recorded_at))[0];

    if (before) {
        dynamicElements.push(new google.maps.Marker({
            position: { lat: parseFloat(before.latitude), lng: parseFloat(before.longitude) },
            map,
            icon: "http://maps.google.com/mapfiles/ms/icons/purple-dot.png"
        }));
    }

    if (after) {
        dynamicElements.push(new google.maps.Marker({
            position: { lat: parseFloat(after.latitude), lng: parseFloat(after.longitude) },
            map,
            icon: "http://maps.google.com/mapfiles/ms/icons/green-dot.png"
        }));
    }

    const bounds = new google.maps.LatLngBounds();
    bounds.extend(nominal);
    bounds.extend(real);
    map.fitBounds(bounds);
}

initMap();

</script>

<!-- ✅ ARRÊTS -->
@if(count($disconnects) > 0)
<h4>Arrêts détectés</h4>
<table class="table table-bordered">
    <thead>
        <tr>
            <th>Début</th>
            <th>Fin</th>
            <th>Durée (minutes)</th>
        </tr>
    </thead>
    <tbody>
        @foreach($disconnects as $d)
        <tr>
            <td>{{ $d['from'] }}</td>
            <td>{{ $d['to'] }}</td>
            <td>{{ $d['duration'] }}</td>
        </tr>
        @endforeach
    </tbody>
</table>
@endif

<!-- ✅ VISITES -->
@if(count($visits) > 0)
<h4>Visites réalisées</h4>
<table class="table table-bordered">
    <thead>
        <tr>
            <th>Date</th>
            <th>Établissement</th>
            <th>Type</th>
            <th>Distance</th>
            <th>Statut</th>
            <th>Action</th>
        </tr>
    </thead>
    <tbody>
        @foreach($visits as $visit)
        <tr>
            <td>{{ $visit->date_visit }}</td>
            <td>{{ $visit->listing->name ?? '-' }}</td>
            <td>{{ $visit->listing->type ?? '-' }}</td>
            <td>
                @if($visit->distance_meters && $visit->distance_meters > 100)
                    <span class="badge bg-danger">{{ $visit->distance_meters }} m</span>
                @else
                    <span class="badge bg-success">{{ $visit->distance_meters ?? 0 }} m</span>
                @endif
            </td>
            <td>{{ $visit->status }}</td>
            <td>
                <button class="btn btn-sm btn-primary"
                    onclick="showVisit({{ $visit->id }})">
                    Voir
                </button>
            </td>
        </tr>
        @endforeach
    </tbody>
</table>
@endif

@endsection