@extends('layouts.tech')

@section('content')
<div class="min-h-screen bg-gray-950 flex flex-col font-sans pb-28 w-full overflow-hidden text-white relative">

    <div id="dutyStatusBar" class="hidden bg-gray-900/95 backdrop-blur-md px-5 py-4 flex justify-between items-center border-b border-gray-800 shadow-lg z-50 sticky top-0 transition-all duration-300">
        <div class="flex items-center gap-3">
            <div class="relative flex items-center justify-center">
                <div class="w-3 h-3 bg-[#109E38] rounded-full animate-ping absolute"></div>
                <div class="w-3 h-3 bg-[#109E38] rounded-full relative z-10 shadow-[0_0_10px_#109E38]"></div>
            </div>
            <span class="font-black text-sm tracking-widest text-white">ON DUTY</span>
            <span class="bg-[#109E38]/20 text-[#109E38] px-2 py-0.5 rounded text-[10px] font-black flex items-center gap-1 border border-[#109E38]/30 ml-2">
                <i data-lucide="map-pin" class="w-3 h-3"></i> < 5 KM
            </span>
        </div>
        <button onclick="goOffline()" class="bg-red-500/10 hover:bg-red-500 text-red-500 hover:text-white border border-red-500/30 px-4 py-2 rounded-xl text-xs font-black transition-all shadow-sm">
            GO OFFLINE
        </button>
    </div>

    <main class="flex-1 w-full max-w-md mx-auto flex flex-col items-center justify-center relative px-6 h-full">
        
        <div id="offDutyScreen" class="flex flex-col items-center justify-center w-full min-h-[70vh] transition-opacity duration-300">
            
            <button onclick="goOnline()" class="relative w-56 h-56 rounded-full flex flex-col items-center justify-center gap-4 transition-all duration-500 shadow-[0_10px_40px_rgba(0,0,0,0.5)] border-4 bg-gray-900 border-gray-800 hover:border-[#109E38] hover:shadow-[0_0_60px_rgba(16,158,56,0.3)] hover:scale-[1.02] group z-10 overflow-hidden">
                <div class="absolute inset-0 bg-gradient-to-b from-[#109E38]/10 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
                
                <i id="powerIcon" data-lucide="power" class="w-20 h-20 text-gray-600 group-hover:text-[#109E38] transition-colors duration-300 relative z-10"></i>
                <span id="powerText" class="font-black text-xl text-gray-500 group-hover:text-[#109E38] tracking-widest transition-colors duration-300 relative z-10">GO ONLINE</span>
            </button>
            
            <p class="text-gray-500 text-sm font-bold mt-10 text-center leading-relaxed">
                You are currently <span class="text-red-400 font-black">Offline</span>. <br>Tap the button and enable GPS to start receiving jobs.
            </p>
        </div>

        <div id="searchingScreen" class="hidden flex-col items-center justify-center w-full min-h-[70vh] relative transition-opacity duration-300">
            
            <div class="absolute w-[350px] h-[350px] border border-[#109E38]/10 rounded-full animate-ping" style="animation-duration: 3s;"></div>
            <div class="absolute w-[250px] h-[250px] border border-[#109E38]/30 rounded-full animate-ping" style="animation-duration: 3s; animation-delay: 1s;"></div>
            <div class="absolute w-[150px] h-[150px] border border-[#109E38]/50 rounded-full animate-ping" style="animation-duration: 3s; animation-delay: 2s;"></div>
            
            <div class="relative bg-gray-900 p-6 rounded-full shadow-[0_0_50px_rgba(16,158,56,0.4)] border-2 border-[#109E38] z-10 animate-pulse">
                <i data-lucide="radar" class="w-12 h-12 text-[#109E38]"></i>
            </div>
            
            <div class="text-center mt-12 z-10">
                <h2 class="text-2xl font-black text-white tracking-wide">Scanning Area</h2>
                <p class="text-gray-400 font-bold text-sm mt-2 flex items-center justify-center gap-2">
                    Finding jobs near you...
                </p>
                <div class="mt-4 bg-[#109E38]/10 text-[#109E38] text-xs font-black px-4 py-2 rounded-full border border-[#109E38]/20 inline-block">
                    GPS Locked
                </div>
            </div>
        </div>

    </main>

    <script>
        // Make sure Icons load correctly
        if (typeof lucide !== 'undefined') {
            lucide.createIcons();
        }

        function goOnline() {
            const powerText = document.getElementById('powerText');
            const powerIcon = document.getElementById('powerIcon');
            
            // 1. Initial Click State
            powerText.innerText = "LOCATING...";
            powerText.classList.replace('text-gray-500', 'text-[#109E38]');
            powerIcon.classList.replace('text-gray-600', 'text-[#109E38]');
            powerIcon.classList.add('animate-pulse');
            
            // 2. Transition to Radar Screen
            setTimeout(() => {
                powerIcon.classList.remove('animate-pulse');
                
                // Hide Offline Screen
                document.getElementById('offDutyScreen').classList.add('hidden');
                document.getElementById('offDutyScreen').classList.remove('flex');
                
                // Show Status Bar
                document.getElementById('dutyStatusBar').classList.remove('hidden');
                document.getElementById('dutyStatusBar').classList.add('flex');
                
                // Show Radar Screen
                document.getElementById('searchingScreen').classList.remove('hidden');
                document.getElementById('searchingScreen').classList.add('flex');
                
            }, 1000);
        }

        function goOffline() {
            // Hide Status Bar & Radar
            document.getElementById('dutyStatusBar').classList.add('hidden');
            document.getElementById('dutyStatusBar').classList.remove('flex');
            document.getElementById('searchingScreen').classList.add('hidden');
            document.getElementById('searchingScreen').classList.remove('flex');
            
            // Show Offline Screen
            document.getElementById('offDutyScreen').classList.remove('hidden');
            document.getElementById('offDutyScreen').classList.add('flex');
            
            // Reset Power Button
            const powerText = document.getElementById('powerText');
            const powerIcon = document.getElementById('powerIcon');
            
            powerText.innerText = "GO ONLINE";
            powerText.classList.replace('text-[#109E38]', 'text-gray-500');
            powerIcon.classList.replace('text-[#109E38]', 'text-gray-600');
        }
    </script>
</div>
@endsection