@extends('layouts.app')
@section('title', 'Operations Command Center')

@push('styles')
<link rel="stylesheet" href="{{ asset('assets/css/dashboard-final.css') }}">
<style>
    .sessions-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: 20px;
        margin-bottom: 32px;
    }
    .analytics-row {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 20px;
        margin-bottom: 32px;
    }
    .session-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 16px;
        padding-top: 12px;
        border-top: 1px solid var(--border-color);
    }
</style>
@endpush

@section('content')

@php
    $actionsHtml = '
        <div style="display: flex; gap: 12px; align-items: center;">
            <div class="live-indicator"><div class="live-dot"></div> LIVE MONITORING</div>
            <div class="h-6 w-px bg-[var(--border-color)] mx-2"></div>
            <button class="final-btn final-btn-secondary" style="font-size: 11px;"><i class="bi bi-arrow-clockwise"></i> Refresh Feed</button>
            <button class="final-btn final-btn-secondary" style="font-size: 11px; color: var(--accent-color); border-color: var(--accent-soft);"><i class="bi bi-camera"></i> Snapshot</button>
        </div>
    ';
@endphp

@include('components.page-header', [
    'title' => 'Real-Time Workforce Monitor',
    'description' => 'Monitor active employee sessions, live productivity metrics, running tasks, and operational efficiency in real time.',
    'breadcrumbs' => ['Home' => route('admin.dashboard'), 'Live Monitor' => '#'],
    'actions' => $actionsHtml
])

<!-- Live Analytics Summary -->
<div class="analytics-row">
    <div class="final-card">
        <div class="final-stat-label">Active Employees</div>
        <div class="final-stat-value" style="color: var(--accent-color)">{{ count($runningLogs) }}</div>
        <div class="final-secondary-text" style="font-size: 10px; font-weight: 700;">CURRENTLY TRACKING</div>
    </div>
    <div class="final-card">
        <div class="final-stat-label">Productivity Avg</div>
        <div class="final-stat-value">84%</div>
        <div class="final-progress-bg" style="height: 4px; margin-top: 8px;"><div class="final-progress-fill" style="width: 84%"></div></div>
    </div>
    <div class="final-card">
        <div class="final-stat-label">Idle Threshold</div>
        <div class="final-stat-value" style="color: var(--warning-color)">12%</div>
        <div class="final-secondary-text" style="font-size: 10px; font-weight: 700;">SYSTEM WIDE</div>
    </div>
    <div class="final-card">
        <div class="final-stat-label">Efficiency Score</div>
        <div class="final-stat-value" style="color: var(--info-color)">91.2</div>
        <div class="final-secondary-text" style="font-size: 10px; font-weight: 700;">TARGET: 90.0</div>
    </div>
</div>

<!-- Live Sessions Grid -->
<div class="sessions-grid">
    @forelse($runningLogs as $log)
    <div class="final-card monitoring-card">
        <div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 20px;">
            <div style="display: flex; align-items: center; gap: 12px;">
                <div class="final-avatar" style="width: 40px; height: 40px; border: 2px solid var(--accent-soft);">
                    {{ substr($log->user?->name ?? 'U', 0, 1) }}
                </div>
                <div>
                    <div style="font-weight: 800; font-size: 15px; color: var(--text-primary);">{{ $log->user?->name }}</div>
                    <div style="font-size: 10px; color: var(--accent-color); font-weight: 800; letter-spacing: 0.05em;">ACTIVE NOW</div>
                </div>
            </div>
            <div class="live-dot"></div>
        </div>

        <div style="margin-bottom: 20px;">
            <div class="final-stat-label" style="font-size: 10px; margin-bottom: 4px;">CURRENT ASSIGNMENT</div>
            <div style="font-weight: 700; font-size: 14px; line-clamp: 1; overflow: hidden; text-overflow: ellipsis;">{{ $log->task?->title ?? 'System Maintenance' }}</div>
            <div style="font-size: 11px; color: var(--text-secondary); margin-top: 2px;">Module: {{ $log->task?->module?->name ?? 'Core Engine' }}</div>
        </div>

        <div class="monitoring-timer" data-seconds="{{ $log->total_seconds }}" data-id="{{ $log->id }}">
            00:00:00
        </div>

        <div class="session-footer">
            <div style="font-size: 10px; color: var(--text-secondary); font-weight: 700;">
                <i class="bi bi-clock"></i> SINCE {{ $log->started_at->format('H:i') }}
            </div>
            <div style="display: flex; align-items: center; gap: 8px;">
                <span class="final-badge badge-whatsapp" style="font-size: 9px; padding: 2px 8px;">89% PROD</span>
            </div>
        </div>
    </div>
    @empty
    <div style="grid-column: 1 / -1;">
        <div class="final-card" style="text-align: center; padding: 60px;">
            <div class="final-empty-state">
                <i class="bi bi-radar" style="font-size: 48px; color: var(--accent-color); opacity: 0.2; margin-bottom: 20px;"></i>
                <p style="font-size: 14px;">No active workforce sessions detected on radar</p>
                <p class="final-secondary-text" style="text-transform: none; font-size: 12px; margin-top: 8px;">All employee terminals are currently in idle or offline state.</p>
            </div>
        </div>
    </div>
    @endforelse
</div>

<!-- Daily Productivity Reports Table -->
<div class="final-card">
    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px;">
        <h3 class="final-card-title" style="margin-bottom: 0;"><i class="bi bi-clipboard-data"></i> Workforce Productivity Intelligence</h3>
        <span class="final-secondary-text" style="font-size: 10px; font-weight: 800; letter-spacing: 0.1em;">AUDITED HISTORICAL RECORDS</span>
    </div>

    <div class="final-table-container">
        <table class="final-table">
            <thead>
                <tr>
                    <th>Employee</th>
                    <th>Reference Date</th>
                    <th>Tracked</th>
                    <th>Idle Time</th>
                    <th>Net Productive</th>
                    <th>Efficiency</th>
                    <th style="text-align: right;">Status</th>
                </tr>
            </thead>
            <tbody>
                @forelse($dailyLogs as $log)
                <tr>
                    <td>
                        <div style="display: flex; align-items: center; gap: 10px;">
                            <div class="final-avatar" style="width: 28px; height: 28px; font-size: 10px;">{{ substr($log->user?->name ?? 'U', 0, 1) }}</div>
                            <span style="font-weight: 800;">{{ $log->user?->name }}</span>
                        </div>
                    </td>
                    <td><div style="font-weight: 700; color: var(--text-secondary);">{{ $log->work_date->format('M d, Y') }}</div></td>
                    <td><span class="final-badge badge-low">{{ gmdate('H:i:s', $log->total_tracked_seconds) }}</span></td>
                    <td><span style="color: var(--danger-color); font-weight: 700;">{{ gmdate('H:i:s', $log->total_idle_seconds) }}</span></td>
                    <td><span style="color: var(--accent-color); font-weight: 700;">{{ gmdate('H:i:s', $log->productive_seconds) }}</span></td>
                    <td>
                        <div style="display: flex; align-items: center; gap: 12px;">
                            <div class="final-progress-bg" style="width: 80px; height: 4px;">
                                <div class="final-progress-fill" style="width: {{ $log->productivity_score }}%"></div>
                            </div>
                            <span style="font-weight: 800; font-size: 12px;">{{ $log->productivity_score }}%</span>
                        </div>
                    </td>
                    <td style="text-align: right;">
                        @php
                            $statusClass = $log->productivity_score >= 80 ? 'badge-whatsapp' : ($log->productivity_score >= 50 ? 'badge-email' : 'badge-low');
                            $statusText = $log->productivity_score >= 80 ? 'High' : ($log->productivity_score >= 50 ? 'Medium' : 'Critical');
                        @endphp
                        <span class="final-badge {{ $statusClass }}">{{ $statusText }}</span>
                    </td>
                </tr>
                @empty
                <tr><td colspan="7" class="text-center"><div class="final-empty-state"><p>No productivity data found</p></div></td></tr>
                @endforelse
            </tbody>
        </table>
    </div>
    
    <div style="margin-top: 32px;">
        {{ $dailyLogs->links() }}
    </div>
</div>

<script>
function formatTime(seconds) {
    const h = String(Math.floor(seconds / 3600)).padStart(2, '0');
    const m = String(Math.floor((seconds % 3600) / 60)).padStart(2, '0');
    const s = String(seconds % 60).padStart(2, '0');
    return `${h}:${m}:${s}`;
}

function updateTimers() {
    document.querySelectorAll('.monitoring-timer').forEach(timer => {
        let seconds = parseInt(timer.getAttribute('data-seconds'));
        seconds += 1;
        timer.setAttribute('data-seconds', seconds);
        timer.textContent = formatTime(seconds);
    });
}

document.addEventListener('DOMContentLoaded', () => {
    // Initial format
    document.querySelectorAll('.monitoring-timer').forEach(timer => {
        const seconds = parseInt(timer.getAttribute('data-seconds'));
        timer.textContent = formatTime(seconds);
    });
    
    // Update every second
    setInterval(updateTimers, 1000);
});
</script>

@endsection