@extends('layouts.truck', ['title' => 'Tracking '.$truck->name])

@section('body')
    <main class="min-h-screen bg-zinc-950 p-4 text-white sm:p-8">
        <div class="mx-auto max-w-3xl">
            <div class="mb-6">
                <p class="text-sm uppercase tracking-wide text-zinc-400">Tablet GPS tracking</p>
                <h1 class="text-3xl font-semibold">{{ $truck->name }}</h1>
            </div>

            <div id="https-warning" class="mb-4 hidden rounded-md border border-amber-400 bg-amber-100 px-4 py-3 text-sm text-amber-950">
                Browser GPS requires HTTPS except on localhost.
            </div>

            <div id="permission-warning" class="mb-4 hidden rounded-md border border-red-400 bg-red-100 px-4 py-3 text-sm text-red-950">
                GPS permission was denied. Allow location access for this tablet to track the truck.
            </div>

            <div class="rounded-lg border border-zinc-800 bg-zinc-900 p-6 shadow-xl">
                <div class="mb-6 flex items-center justify-between gap-4">
                    <div>
                        <div class="text-sm text-zinc-400">Status</div>
                        <div id="status" class="text-xl font-semibold">Starting GPS...</div>
                    </div>
                    <div id="wake-lock" class="rounded-full bg-zinc-800 px-3 py-1 text-xs text-zinc-300">Wake lock pending</div>
                </div>

                <dl class="grid gap-4 sm:grid-cols-2">
                    <div class="rounded-md bg-zinc-800 p-4">
                        <dt class="text-sm text-zinc-400">Latitude</dt>
                        <dd id="latitude" class="mt-1 text-2xl font-semibold">-</dd>
                    </div>
                    <div class="rounded-md bg-zinc-800 p-4">
                        <dt class="text-sm text-zinc-400">Longitude</dt>
                        <dd id="longitude" class="mt-1 text-2xl font-semibold">-</dd>
                    </div>
                    <div class="rounded-md bg-zinc-800 p-4">
                        <dt class="text-sm text-zinc-400">Speed</dt>
                        <dd id="speed" class="mt-1 text-2xl font-semibold">- km/h</dd>
                    </div>
                    <div class="rounded-md bg-zinc-800 p-4">
                        <dt class="text-sm text-zinc-400">Accuracy</dt>
                        <dd id="accuracy" class="mt-1 text-2xl font-semibold">- m</dd>
                    </div>
                </dl>

                <div class="mt-6 text-sm text-zinc-400">
                    Last sent: <span id="last-sent" class="text-zinc-200">Never</span>
                </div>
            </div>
        </div>
    </main>
@endsection

@push('scripts')
<script>
const token = @json($truck->token);
const endpoint = @json(url('/api/truck-location'));
const statusEl = document.getElementById('status');
const latitudeEl = document.getElementById('latitude');
const longitudeEl = document.getElementById('longitude');
const speedEl = document.getElementById('speed');
const accuracyEl = document.getElementById('accuracy');
const lastSentEl = document.getElementById('last-sent');
const wakeLockEl = document.getElementById('wake-lock');
let latestPosition = null;
let wakeLock = null;
let batteryLevel = null;

if (!window.isSecureContext && location.hostname !== 'localhost' && location.hostname !== '127.0.0.1') {
    document.getElementById('https-warning').classList.remove('hidden');
}

async function setupBattery() {
    if ('getBattery' in navigator) {
        const battery = await navigator.getBattery();
        const updateBattery = () => batteryLevel = Math.round(battery.level * 100);
        updateBattery();
        battery.addEventListener('levelchange', updateBattery);
    }
}

async function requestWakeLock() {
    if (!('wakeLock' in navigator)) {
        wakeLockEl.textContent = 'Wake lock unavailable';
        return;
    }

    try {
        wakeLock = await navigator.wakeLock.request('screen');
        wakeLockEl.textContent = 'Screen wake lock active';
        wakeLock.addEventListener('release', () => wakeLockEl.textContent = 'Wake lock released');
    } catch (error) {
        wakeLockEl.textContent = 'Wake lock blocked';
    }
}

document.addEventListener('visibilitychange', () => {
    if (document.visibilityState === 'visible') {
        requestWakeLock();
    }
});

function updateStatus(message) {
    statusEl.textContent = message;
}

async function sendPosition(position) {
    const coords = position.coords;
    latestPosition = position;

    latitudeEl.textContent = coords.latitude.toFixed(7);
    longitudeEl.textContent = coords.longitude.toFixed(7);
    speedEl.textContent = coords.speed === null ? '- km/h' : `${(coords.speed * 3.6).toFixed(1)} km/h`;
    accuracyEl.textContent = coords.accuracy === null ? '- m' : `${coords.accuracy.toFixed(1)} m`;

    try {
        const response = await fetch(endpoint, {
            method: 'POST',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                token,
                latitude: coords.latitude,
                longitude: coords.longitude,
                speed: coords.speed,
                heading: coords.heading,
                accuracy: coords.accuracy,
                battery_level: batteryLevel,
            }),
        });

        if (!response.ok) {
            throw new Error('Location rejected');
        }

        updateStatus('Tracking and sending');
        lastSentEl.textContent = new Date().toLocaleString();
    } catch (error) {
        updateStatus('GPS found, sending failed');
    }
}

function handleError(error) {
    if (error.code === error.PERMISSION_DENIED) {
        document.getElementById('permission-warning').classList.remove('hidden');
        updateStatus('GPS permission denied');
        return;
    }

    updateStatus(error.message || 'Waiting for GPS');
}

function startTracking() {
    if (!('geolocation' in navigator)) {
        updateStatus('Geolocation unavailable');
        return;
    }

    const options = { enableHighAccuracy: true, timeout: 15000, maximumAge: 0 };

    if ('watchPosition' in navigator.geolocation) {
        navigator.geolocation.watchPosition((position) => {
            latestPosition = position;
        }, handleError, options);

        setInterval(() => {
            if (latestPosition) {
                sendPosition(latestPosition);
            } else {
                navigator.geolocation.getCurrentPosition(sendPosition, handleError, options);
            }
        }, 5000);
        return;
    }

    setInterval(() => navigator.geolocation.getCurrentPosition(sendPosition, handleError, options), 5000);
}

setupBattery();
requestWakeLock();
startTracking();
</script>
@endpush