@extends('layouts.app')

@section('title', 'Home')

@section('content')
<div class="min-h-screen pb-20 bg-gradient-to-b from-emerald-50 to-white">
    <!-- Header -->
    <div class="bg-white border-b border-slate-200 px-4 py-4">
        <div class="flex items-center justify-between">
            <div>
                <h1 class="text-xl font-bold text-slate-900">Welcome, {{ auth()->user()->name }}</h1>
                <p class="text-sm text-slate-500 mt-0.5">{{ now()->format('l, M d, Y') }}</p>
            </div>
            <form method="POST" action="{{ route('logout') }}" class="inline">
                @csrf
                <button type="submit" class="p-2 text-slate-400 hover:text-slate-600 transition-colors">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"></path>
                    </svg>
                </button>
            </form>
        </div>
    </div>

    <div class="px-4 py-6 space-y-6">
        <!-- Clock Status Card -->
        <div class="bg-white rounded-2xl border border-slate-200 shadow-lg overflow-hidden">
            @if($isClockedIn && $currentSite)
                <!-- Clocked In State -->
                <div class="bg-gradient-to-r from-emerald-500 to-emerald-600 p-6 text-white">
                    <div class="flex items-center justify-between mb-4">
                        <div class="flex items-center space-x-3">
                            <div class="w-12 h-12 bg-white/20 rounded-full flex items-center justify-center">
                                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
                                </svg>
                            </div>
                            <div>
                                <p class="text-sm font-medium opacity-90">Currently Clocked In</p>
                                <p class="text-lg font-bold">{{ $currentSite->name }}</p>
                            </div>
                        </div>
                        <div class="text-right">
                            <div class="w-3 h-3 bg-white rounded-full animate-pulse"></div>
                        </div>
                    </div>
                    <div class="flex items-center space-x-4 text-sm opacity-90">
                        <div class="flex items-center space-x-1.5">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                            </svg>
                            <span>Since {{ $lastClockEvent->occurred_at->format('H:i') }}</span>
                        </div>
                        <div class="flex items-center space-x-1.5">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
                            </svg>
                            <span>{{ $currentSite->client->name ?? 'N/A' }}</span>
                        </div>
                    </div>
                </div>
                <div class="p-6">
                    <form method="POST" action="{{ route('app.clock.store', [], false) }}" id="clockOutForm">
                        @csrf
                        <input type="hidden" name="type" value="out">
                        <input type="hidden" name="site_id" value="{{ $currentSite->id }}">
                        <input type="hidden" name="latitude" id="clockOutLat">
                        <input type="hidden" name="longitude" id="clockOutLng">
                        <button type="submit" class="w-full py-4 bg-red-600 text-white rounded-xl text-lg font-semibold hover:bg-red-700 transition-colors shadow-md flex items-center justify-center space-x-2">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                            </svg>
                            <span>Clock Out</span>
                        </button>
                    </form>
                </div>
            @else
                <!-- Clocked Out State -->
                <div class="bg-gradient-to-r from-slate-100 to-slate-200 p-6 text-slate-700">
                    <div class="flex items-center justify-between mb-4">
                        <div class="flex items-center space-x-3">
                            <div class="w-12 h-12 bg-slate-300 rounded-full flex items-center justify-center">
                                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                </svg>
                            </div>
                            <div>
                                <p class="text-sm font-medium">Currently Clocked Out</p>
                                <p class="text-lg font-bold">Ready to start?</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="p-6">
                    <button id="clockInBtn" onclick="handleClockIn()" class="w-full py-4 bg-emerald-600 text-white rounded-xl text-lg font-semibold hover:bg-emerald-700 transition-colors shadow-md flex items-center justify-center space-x-2 disabled:opacity-50 disabled:cursor-not-allowed">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
                        </svg>
                        <span>Clock In</span>
                    </button>
                    <p class="text-xs text-slate-500 text-center mt-3">You must be within a site's geofence to clock in</p>
                </div>
            @endif
        </div>

        <!-- Pending Inspections -->
        @if($isClockedIn && $pendingInspections->count() > 0)
            <div>
                <div class="flex items-center justify-between mb-4">
                    <h2 class="text-lg font-bold text-slate-900">Pending Inspections</h2>
                    <a href="{{ route('app.inspections.index') }}" class="text-sm text-emerald-600 font-medium">View All</a>
                </div>
                <div class="space-y-3">
                    @foreach($pendingInspections->take(3) as $inspection)
                        <a href="{{ route('app.inspections.show', $inspection) }}" class="block bg-white rounded-xl border border-slate-200 shadow-sm p-4 hover:shadow-md transition-shadow">
                            <div class="flex items-start justify-between">
                                <div class="flex-1">
                                    <div class="flex items-center space-x-2 mb-2">
                                        <div class="w-8 h-8 rounded-lg bg-amber-100 flex items-center justify-center flex-shrink-0">
                                            <svg class="w-4 h-4 text-amber-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"></path>
                                            </svg>
                                        </div>
                                        <p class="font-semibold text-slate-900">{{ $inspection->title }}</p>
                                    </div>
                                    <p class="text-sm text-slate-600 ml-10">{{ $inspection->site->name }}</p>
                                    @if($inspection->description)
                                        <p class="text-xs text-slate-500 mt-1 ml-10 line-clamp-2">{{ Str::limit($inspection->description, 60) }}</p>
                                    @endif
                                </div>
                                <svg class="w-5 h-5 text-slate-400 flex-shrink-0 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                                </svg>
                            </div>
                        </a>
                    @endforeach
                </div>
            </div>
        @elseif($isClockedIn && $pendingInspections->count() === 0)
            <div class="bg-white rounded-xl border border-slate-200 shadow-sm p-6 text-center">
                <div class="w-16 h-16 rounded-full bg-emerald-100 flex items-center justify-center mx-auto mb-3">
                    <svg class="w-8 h-8 text-emerald-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                    </svg>
                </div>
                <p class="text-slate-600 font-medium">No pending inspections</p>
                <p class="text-sm text-slate-500 mt-1">All inspections for this site are complete</p>
            </div>
        @endif

        <!-- Quick Actions -->
        <div>
            <h2 class="text-lg font-bold text-slate-900 mb-4">Quick Actions</h2>
            <div class="grid grid-cols-2 gap-3">
                <a href="{{ route('app.inspections.index') }}" class="bg-white rounded-xl border border-slate-200 shadow-sm p-4 hover:shadow-md transition-shadow">
                    <div class="flex items-center space-x-3">
                        <div class="w-10 h-10 rounded-lg bg-blue-100 flex items-center justify-center flex-shrink-0">
                            <svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"></path>
                            </svg>
                        </div>
                        <div>
                            <p class="font-semibold text-slate-900 text-sm">All Inspections</p>
                            <p class="text-xs text-slate-500">View & complete</p>
                        </div>
                    </div>
                </a>
            </div>
        </div>
    </div>

    <!-- Site Selection Modal -->
    <div x-data="{ open: false, sites: [], lat: null, lng: null, loading: false }" 
         x-show="open" 
         x-cloak
         class="fixed inset-0 z-50 flex items-end md:items-center justify-center p-4 bg-black bg-opacity-50"
         style="display: none;"
         @keydown.escape.window="open = false">
        <div class="bg-white rounded-t-2xl md:rounded-2xl w-full max-w-md max-h-[80vh] overflow-hidden flex flex-col" @click.stop>
            <div class="p-6 border-b border-slate-200 flex-shrink-0">
                <div class="flex items-center justify-between mb-2">
                    <h3 class="text-lg font-bold text-slate-900">Select Site</h3>
                    <button @click="open = false" class="text-slate-400 hover:text-slate-600">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                        </svg>
                    </button>
                </div>
                <p class="text-sm text-slate-500">Choose the site you're clocking in at</p>
            </div>
            <div class="flex-1 overflow-y-auto p-4">
                <div x-show="loading" class="text-center py-8">
                    <svg class="animate-spin h-8 w-8 text-emerald-600 mx-auto mb-2" fill="none" viewBox="0 0 24 24">
                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                    </svg>
                    <p class="text-sm text-slate-500">Finding nearby sites...</p>
                </div>
                <div x-show="!loading && sites.length === 0" class="text-center py-8">
                    <p class="text-slate-500 text-sm">No nearby sites found</p>
                    <p class="text-xs text-slate-400 mt-1">Please ensure you're within a site's geofence</p>
                </div>
                <div x-show="!loading && sites.length > 0" class="space-y-2" id="sitesList">
                    <!-- Sites will be populated here -->
                </div>
            </div>
        </div>
    </div>

    <!-- Location Settings Modal -->
    <div id="locationModal" class="hidden fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4">
        <div class="bg-white rounded-xl p-6 max-w-sm w-full space-y-4">
            <div class="flex items-center space-x-3 mb-2">
                <div class="w-10 h-10 rounded-full bg-amber-100 flex items-center justify-center flex-shrink-0">
                    <svg class="w-5 h-5 text-amber-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
                    </svg>
                </div>
                <h2 class="text-lg font-semibold text-slate-900">Location Required</h2>
            </div>
            <p class="text-sm text-slate-600">
                We need your location to clock in. Please enable location services for this app in your browser settings, then tap "Try again".
            </p>
            <ul class="text-xs text-slate-500 list-disc ml-5 space-y-1.5">
                <li><strong>Chrome (Android):</strong> Lock icon → Permissions → Location → "Allow"</li>
                <li><strong>Safari (iOS):</strong> Settings → Safari → Location → "Ask" or "Allow"</li>
                <li><strong>Chrome (Desktop):</strong> Lock icon → Site settings → Location → "Allow"</li>
            </ul>
            <div class="flex justify-end gap-3 pt-3 border-t border-slate-200">
                <button onclick="hideLocationModal()" class="px-4 py-2 text-sm font-medium text-slate-700 bg-white border border-slate-300 rounded-lg hover:bg-slate-50 transition-colors">
                    Close
                </button>
                <button onclick="retryLocation()" class="px-4 py-2 text-sm font-medium text-white bg-emerald-600 rounded-lg hover:bg-emerald-700 transition-colors">
                    Try again
                </button>
            </div>
        </div>
    </div>

    <!-- Location Error Modal -->
    <div id="locationErrorModal" class="hidden fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4">
        <div class="bg-white rounded-xl p-6 max-w-sm w-full space-y-4">
            <div class="flex items-center space-x-3 mb-2">
                <div class="w-10 h-10 rounded-full bg-red-100 flex items-center justify-center flex-shrink-0">
                    <svg class="w-5 h-5 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                    </svg>
                </div>
                <h2 class="text-lg font-semibold text-slate-900">Location Unavailable</h2>
            </div>
            <p class="text-sm text-slate-600" id="locationErrorMessage">
                We couldn't get your location. Please turn on Location Services and try again.
            </p>
            <div class="flex justify-end gap-3 pt-3 border-t border-slate-200">
                <button onclick="hideLocationErrorModal()" class="px-4 py-2 text-sm font-medium text-slate-700 bg-white border border-slate-300 rounded-lg hover:bg-slate-50 transition-colors">
                    Close
                </button>
                <button onclick="retryLocation()" class="px-4 py-2 text-sm font-medium text-white bg-emerald-600 rounded-lg hover:bg-emerald-700 transition-colors">
                    Try again
                </button>
            </div>
        </div>
    </div>
</div>

@include('app.partials.bottom-nav')

@push('scripts')
<script>
// Define routes as relative paths for PWA compatibility
const nearbyRoute = @json(route('app.clock.nearby', [], false));
const clockStoreRoute = @json(route('app.clock.store', [], false));

/**
 * Request user location with proper permission handling
 */
async function requestUserLocation() {
    if (!('geolocation' in navigator)) {
        throw new Error('Geolocation is not supported on this device.');
    }

    // Check current permission state
    let state = 'prompt';
    if (navigator.permissions) {
        try {
            const status = await navigator.permissions.query({ name: 'geolocation' });
            state = status.state; // 'granted' | 'prompt' | 'denied'
        } catch (e) {
            // Some browsers don't support this, just ignore
        }
    }

    // If already denied, don't spam the browser – show our own UI instead
    if (state === 'denied') {
        const error = new Error('denied');
        error.code = 1; // PERMISSION_DENIED
        throw error;
    }

    return new Promise((resolve, reject) => {
        navigator.geolocation.getCurrentPosition(
            position => resolve({
                lat: position.coords.latitude,
                lng: position.coords.longitude
            }),
            err => reject(err),
            {
                enableHighAccuracy: true,
                timeout: 10000,
                maximumAge: 0,
            }
        );
    });
}

/**
 * Handle clock in button click
 */
async function handleClockIn() {
    const btn = document.getElementById('clockInBtn');
    if (!btn) return;
    
    btn.disabled = true;
    const originalText = btn.innerHTML;
    btn.innerHTML = '<svg class="animate-spin w-5 h-5 mr-2" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg> Getting location...';

    try {
        const { lat, lng } = await requestUserLocation();
        
        const modal = document.querySelector('[x-data*="open"]');
        if (!modal || !modal._x_dataStack) {
            btn.disabled = false;
            btn.innerHTML = originalText;
            return;
        }
        
        const alpineData = modal._x_dataStack[0];
        alpineData.loading = true;
        alpineData.open = true;
        alpineData.lat = lat;
        alpineData.lng = lng;
        
        // Check for nearby sites
        let sites = [];
        try {
            const url = `${nearbyRoute}?latitude=${lat}&longitude=${lng}`;
            console.log('Fetching nearby sites from:', url);
            
            const response = await fetch(url, {
                method: 'GET',
                headers: {
                    'Accept': 'application/json',
                    'X-Requested-With': 'XMLHttpRequest',
                },
                credentials: 'same-origin'
            });
            
            console.log('Response status:', response.status, response.statusText);
            console.log('Response headers:', Object.fromEntries(response.headers.entries()));
            
            if (!response.ok) {
                const errorText = await response.text();
                console.error('Response error:', errorText);
                throw new Error(`HTTP error! status: ${response.status} - ${errorText.substring(0, 100)}`);
            }
            
            const contentType = response.headers.get('content-type');
            if (!contentType || !contentType.includes('application/json')) {
                const text = await response.text();
                console.error('Expected JSON but got:', contentType, text.substring(0, 200));
                throw new Error('Server returned non-JSON response');
            }
            
            sites = await response.json();
            console.log('Nearby sites received:', sites);
        } catch (error) {
            console.error('Error fetching nearby sites:', error);
            alpineData.loading = false;
            alpineData.sites = [];
            btn.disabled = false;
            btn.innerHTML = originalText;
            showLocationErrorModal('Failed to load nearby sites: ' + (error.message || 'Please check your connection and try again.'));
            return;
        }
        
        alpineData.loading = false;
        alpineData.sites = sites;
        
        if (sites.length === 0) {
            btn.disabled = false;
            btn.innerHTML = originalText;
            return; // Modal will show "no sites" message
        }
        
        if (sites.length === 1) {
            // Auto-select single site
            submitClockIn(sites[0].id, lat, lng);
            alpineData.open = false;
        } else {
            // Show site selection
            showSiteSelection(sites, lat, lng);
        }
        
        btn.disabled = false;
        btn.innerHTML = originalText;
    } catch (error) {
        btn.disabled = false;
        btn.innerHTML = originalText;
        
        // Geolocation-style error (has numeric code or our 'denied' flag)
        if (error.message === 'denied' || typeof error.code === 'number') {
            if (error.message === 'denied' || error.code === 1) {
                showLocationModal();
            } else {
                let message = 'We couldn\'t get your location. Please turn on Location Services and try again.';
                if (error.code === 2) {
                    message = 'Location information is unavailable. Please check your device settings.';
                } else if (error.code === 3) {
                    message = 'Location request timed out. Please check your connection and try again.';
                }
                showLocationErrorModal(message);
            }
        } else {
            // Non-geo error (e.g. fetch failed / network / mixed content)
            showLocationErrorModal('We got your location, but failed to load nearby sites. Please check your connection and try again.');
        }
    }
}

/**
 * Legacy function name for compatibility
 */
async function clockIn() {
    await handleClockIn();
}

function showSiteSelection(sites, lat, lng) {
    const list = document.getElementById('sitesList');
    list.innerHTML = '';
    
    sites.forEach(site => {
        const btn = document.createElement('button');
        btn.className = 'w-full text-left p-4 border border-slate-200 rounded-xl hover:bg-slate-50 transition-colors';
        btn.innerHTML = `
            <div class="flex items-start justify-between">
                <div class="flex-1">
                    <p class="font-semibold text-slate-900">${site.name}</p>
                    <p class="text-sm text-slate-500 mt-1">${site.address}</p>
                    <p class="text-xs text-emerald-600 font-medium mt-1">${site.distance}m away</p>
                </div>
                <svg class="w-5 h-5 text-slate-400 flex-shrink-0 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                </svg>
            </div>
        `;
        btn.onclick = () => {
            submitClockIn(site.id, lat, lng);
            const modal = document.querySelector('[x-data*="open"]');
            if (modal && modal._x_dataStack) {
                modal._x_dataStack[0].open = false;
            }
        };
        list.appendChild(btn);
    });
}

async function submitClockIn(siteId, lat, lng) {
    // Show loading state
    const btn = document.getElementById('clockInBtn');
    if (btn) {
        btn.disabled = true;
        btn.innerHTML = '<svg class="animate-spin w-5 h-5 mr-2" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg> Clocking in...';
    }
    
    try {
        // Use fetch to submit the clock-in
        const formData = new FormData();
        formData.append('_token', '{{ csrf_token() }}');
        formData.append('type', 'in');
        formData.append('site_id', siteId);
        formData.append('latitude', lat);
        formData.append('longitude', lng);
        
        const response = await fetch(clockStoreRoute, {
            method: 'POST',
            body: formData,
            headers: {
                'X-Requested-With': 'XMLHttpRequest',
            }
        });
        
        if (response.ok) {
            const data = await response.json();
            // Force a full page reload to update the UI
            window.location.href = @json(route('app.home', [], false)) + '?t=' + Date.now();
        } else {
            // Handle error - check if response is JSON
            let errorMessage = 'Failed to clock in. Please try again.';
            const contentType = response.headers.get('content-type');
            if (contentType && contentType.includes('application/json')) {
                try {
                    const data = await response.json();
                    if (data.message) {
                        errorMessage = data.message;
                    } else if (data.errors) {
                        // Laravel validation errors
                        const errors = Object.values(data.errors).flat();
                        errorMessage = errors.join(', ');
                    }
                } catch (e) {
                    console.error('Error parsing JSON response:', e);
                }
            } else {
                // Response is HTML (shouldn't happen with AJAX, but handle it)
                errorMessage = 'Server returned an error. Please check your connection and try again.';
            }
            alert(errorMessage);
            if (btn) {
                btn.disabled = false;
                btn.innerHTML = '<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg><span>Clock In</span>';
            }
        }
    } catch (error) {
        console.error('Clock in error:', error);
        let errorMessage = 'Failed to clock in. Please try again.';
        if (error.message) {
            errorMessage = error.message;
        }
        alert(errorMessage);
        if (btn) {
            btn.disabled = false;
            btn.innerHTML = '<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg><span>Clock In</span>';
        }
    }
}

// Clock out location
document.getElementById('clockOutForm')?.addEventListener('submit', async function(e) {
    e.preventDefault(); // Always prevent default to get location first
    
    const form = this;
    const submitButton = form.querySelector('button[type="submit"]');
    
    // Disable button and show loading
    if (submitButton) {
        submitButton.disabled = true;
        const originalText = submitButton.innerHTML;
        submitButton.innerHTML = '<svg class="animate-spin -ml-1 mr-2 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg> Clocking out...';
        
        try {
            const { lat, lng } = await requestUserLocation();
            document.getElementById('clockOutLat').value = lat;
            document.getElementById('clockOutLng').value = lng;
            
            // Now submit the form
            form.submit();
        } catch (error) {
            submitButton.disabled = false;
            submitButton.innerHTML = originalText;
            
            // Permission explicitly denied
            if (error.message === 'denied' || error.code === 1) {
                showLocationModal();
            } else {
                // GPS off / unavailable / timeout
                let message = 'Unable to get your location for clock out. Please enable location services.';
                if (error.code === 2) {
                    message = 'Location request timed out. Please check your connection and try again.';
                } else if (error.code === 3) {
                    message = 'Location information is unavailable. Please check your device settings.';
                }
                showLocationErrorModal(message);
            }
        }
    }
});

// Location modal functions
function showLocationModal() {
    document.getElementById('locationModal').classList.remove('hidden');
}

function hideLocationModal() {
    document.getElementById('locationModal').classList.add('hidden');
}

function showLocationErrorModal(message) {
    const errorMsg = document.getElementById('locationErrorMessage');
    if (errorMsg) {
        errorMsg.textContent = message;
    }
    document.getElementById('locationErrorModal').classList.remove('hidden');
}

function hideLocationErrorModal() {
    document.getElementById('locationErrorModal').classList.add('hidden');
}

async function retryLocation() {
    hideLocationModal();
    hideLocationErrorModal();
    // Small delay to ensure modals are closed
    setTimeout(() => {
        const btn = document.getElementById('clockInBtn');
        if (btn) {
            handleClockIn();
        }
    }, 100);
}

// Close modals on outside click
document.getElementById('locationModal')?.addEventListener('click', function(e) {
    if (e.target === this) {
        hideLocationModal();
    }
});

document.getElementById('locationErrorModal')?.addEventListener('click', function(e) {
    if (e.target === this) {
        hideLocationErrorModal();
    }
});
</script>
@endpush
@endsection