@extends('layouts.app')

@section('content')
<x-page-header title="Live Workforce Tracking" subtitle="Real-time monitoring of active work sessions">
    <x-slot name="actions">
        <div class="flex items-center gap-2">
            <span class="relative flex h-3 w-3">
                <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-[var(--accent-green)] opacity-75"></span>
                <span class="relative inline-flex rounded-full h-3 w-3 bg-[var(--accent-green)]"></span>
            </span>
            <span class="text-xs font-bold uppercase tracking-wider text-[var(--accent-green)]">Live Pulse</span>
        </div>
    </x-slot>
</x-page-header>

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
    @foreach($employees as $employee)
    <div class="bento-card p-5 relative overflow-hidden group">
        <!-- Status Indicator -->
        <div class="absolute top-0 right-0 p-2">
            @if($employee->current_timer)
                <x-badge color="success" text="Working" class="animate-pulse" />
            @else
                <x-badge color="secondary" text="Idle" />
            @endif
        </div>

        <div class="flex items-center gap-4 mb-6">
            <div class="w-12 h-12 rounded-2xl bg-[var(--accent-green)]/10 flex items-center justify-center text-[var(--accent-green)] font-bold text-xl">
                {{ substr($employee->name, 0, 1) }}
            </div>
            <div>
                <h3 class="font-bold text-[var(--text-primary)] group-hover:text-[var(--accent-green)] transition-colors">{{ $employee->name }}</h3>
                <p class="text-[10px] text-[var(--text-secondary)] uppercase tracking-tighter">{{ $employee->employeeProfile->department ?? 'General' }}</p>
            </div>
        </div>

        @if($employee->current_timer)
            <div class="space-y-4">
                <div class="bg-[var(--input-bg)] rounded-xl p-3">
                    <div class="text-[9px] text-[var(--text-secondary)] uppercase mb-1">Current Task</div>
                    <div class="text-xs font-semibold text-[var(--text-primary)] truncate">{{ $employee->current_timer->task->title }}</div>
                </div>
                
                <div class="flex justify-between items-end">
                    <div>
                        <div class="text-[9px] text-[var(--text-secondary)] uppercase">Session Time</div>
                        <div class="text-lg font-mono font-bold text-[var(--accent-green)]">
                            {{ $employee->current_timer->started_at->diff(now())->format('%H:%I:%S') }}
                        </div>
                    </div>
                    <i class="bi bi-activity text-2xl text-[var(--accent-green)] opacity-20"></i>
                </div>
            </div>
        @else
            <div class="flex flex-col items-center justify-center py-8 opacity-40">
                <i class="bi bi-clock-history text-3xl mb-2"></i>
                <span class="text-[10px] uppercase font-bold">No Active Timer</span>
            </div>
        @endif

        <div class="mt-6 pt-4 border-t border-[var(--border-color)] flex justify-between items-center">
            <div class="flex items-center gap-2">
                <i class="bi bi-lightning-charge-fill text-[var(--accent-green)] text-xs"></i>
                <span class="text-[10px] font-bold">{{ $employee->availabilityPercent() }}% Available</span>
            </div>
            <button class="p-2 text-[var(--text-secondary)] hover:text-[var(--accent-green)] transition-colors">
                <i class="bi bi-eye"></i>
            </button>
        </div>
    </div>
    @endforeach
</div>

@push('scripts')
<script>
    // Auto-refresh every 30 seconds
    setTimeout(() => {
        window.location.reload();
    }, 30000);
</script>
@endpush
@endsection
