@extends('layouts.admin')

@section('content')
<div class="max-w-7xl mx-auto h-full flex flex-col">
    <div class="mb-4 flex justify-between items-center">
        <div>
            <h1 class="text-3xl font-black text-gray-900 flex items-center gap-2">
                <i data-lucide="radar" class="text-blue-600"></i> Live Technician Tracking
            </h1>
            <p class="text-gray-500 font-bold mt-1">Real-time GPS locations of all on-duty technicians.</p>
        </div>
        <div class="flex gap-2">
            <span class="bg-green-100 text-green-700 px-3 py-1 rounded-full text-sm font-black flex items-center gap-2"><div class="w-2 h-2 bg-green-500 rounded-full animate-ping"></div> 12 Active</span>
            <span class="bg-gray-200 text-gray-700 px-3 py-1 rounded-full text-sm font-black">3 Offline</span>
        </div>
    </div>

    <div class="bg-white rounded-3xl shadow-md border border-gray-200 flex-1 relative overflow-hidden h-[600px]">
        <div id="tech-map" class="w-full h-full z-0"></div>
        
        <div class="absolute top-4 left-4 w-72 bg-white/90 backdrop-blur-md rounded-2xl shadow-2xl border border-gray-100 p-4 z-10 hidden md:block">
            <h3 class="text-sm font-black text-gray-900 uppercase tracking-wider mb-3">Nearby Units</h3>
            
            <div class="space-y-3">
                <div class="flex items-center gap-3 p-2 bg-blue-50 rounded-xl border border-blue-100 cursor-pointer hover:bg-blue-100 transition-colors">
                    <div class="w-10 h-10 rounded-full bg-blue-500 text-white flex items-center justify-center font-black">R</div>
                    <div>
                        <p class="text-sm font-black text-gray-900">Rahul Tech</p>
                        <p class="text-xs font-bold text-gray-500">Laxmi Nagar (Idle)</p>
                    </div>
                </div>
                
                <div class="flex items-center gap-3 p-2 hover:bg-gray-50 rounded-xl cursor-pointer transition-colors">
                    <div class="w-10 h-10 rounded-full bg-green-500 text-white flex items-center justify-center font-black">A</div>
                    <div>
                        <p class="text-sm font-black text-gray-900">Amit Kumar</p>
                        <p class="text-xs font-bold text-green-600">Geeta Colony (On Job)</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    // Asli Map Initialize karna (Free Leaflet API)
    document.addEventListener("DOMContentLoaded", function() {
        // Map center at Delhi (Laxmi Nagar area)
        var map = L.map('tech-map').setView([28.6304, 77.2773], 14);

        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            maxZoom: 19,
            attribution: '© Instafix24 Live Tracking'
        }).addTo(map);

        // Dummy Live Technicians Markers
        var tech1 = L.marker([28.6304, 77.2773]).addTo(map)
            .bindPopup("<b>Rahul Tech</b><br>Status: Waiting for Job<br>Battery: 85%");
            
        var tech2 = L.marker([28.6415, 77.2709]).addTo(map) // Geeta Colony
            .bindPopup("<b>Amit Kumar</b><br>Status: On Job (IFX-9021)<br>Battery: 42%");
            
        var tech3 = L.marker([28.6250, 77.2800]).addTo(map) // Nirman Vihar
            .bindPopup("<b>Vikash Tech</b><br>Status: Moving to Customer<br>Speed: 40 km/h");

        // Thoda animation (jaisa wo real-time mein chal rahe ho)
        setTimeout(() => { tech1.openPopup(); }, 1000);
    });
</script>
@endsection