@extends('layouts.app-admin')

@php
    use Carbon\Carbon;
    // Hacer disponibles las variables para las funciones
    $GLOBALS['video_result'] = $video_result ?? null;
    $GLOBALS['video_stats'] = $video_stats ?? null;
@endphp


    <link href="{{ asset('css/pages/results.css') }}" rel="stylesheet" type="text/css"/>


@section('content')

<div class="container my-4 no-fouc">
    <!-- Botón de navegación -->
    <a href="{{ $previous_url }}" class="btn btn-outline-primary mb-4">
        <i class="fas fa-arrow-left"></i> {{ __('all.back_to_players') }}
    </a>

    <!-- Encabezado -->
    <header class="bg-dark text-white p-4 rounded text-center mb-4">
        <h1 class="h2">{{ $user->first_name }} {{ $user->last_name }}</h1>
        <p class="mb-0">{{ __('all.club') }}: {{ $user->association ?? 'N/A' }}</p>
        <p class="mb-0">{{ __('all.group') }}: {{ $user->group ?? 'N/A' }}</p>
        <p>{{ __('all.subgroup') }}: {{ $user->subgroup ?? 'N/A' }}</p>
    </header>

    <!-- Si existe current_game, mostramos su fecha/hora -->
    @isset($current_game)
    <div class="alert alert-info text-center">
        {{ __('all.current_test') }}:
        <strong>
            {{ \Carbon\Carbon::parse($current_game->date_time_start)->format('d/m/Y H:i') }}
        </strong>
    </div>
    @endisset

    <!-- ELIMINADO: Aviso de tests inválidos -->

    <div class="table-wrapper">
        <form method="GET" action="{{ route('admin-games-results', ['user_id' => $user->id]) }}">
            <!-- Variables para el form -->
            <input type="hidden" name="current_game_id" value="{{ $current_game_id }}">
            <input type="hidden" name="last_period" value="{{ $last_period }}">
            <input type="hidden" name="last_game_id" value="{{ $last_game_id }}">
            <input type="hidden" name="last_game_date" value="{{ $last_game_date }}">
            <input type="hidden" name="current_date" id="current_date" value="{{ $current_date->format('Y-m-d') }}">

            @php
                $year = $current_date->year;
                $month = $current_date->month;
                $firstDay = \Carbon\Carbon::create($year,$month,1);
                $startWeekday = $firstDay->dayOfWeek; 
                // Convertir el día de la semana para que lunes sea 0 y domingo sea 6
                $startWeekday = $startWeekday === 0 ? 6 : $startWeekday - 1;
                $daysInMonth = $firstDay->daysInMonth;

                // Obtener el primer y último día del mes actual
                $firstDayOfMonth = Carbon::create($year, $month, 1)->startOfDay();
                $lastDayOfMonth = Carbon::create($year, $month, 1)->endOfMonth()->endOfDay();
                
                // Asegurarnos de que test_dates sea una colección
                $test_dates_collection = collect($test_dates ?? []);
                
                // Calcular meses con tests
                $months_with_tests = [];
                $years_with_tests = [];
                foreach($test_dates_collection as $test_date) {
                    $date = Carbon::parse($test_date);
                    if (!isset($months_with_tests[$date->year])) {
                        $months_with_tests[$date->year] = [];
                    }
                    $months_with_tests[$date->year][$date->month] = true;
                    $years_with_tests[$date->year] = true;
                }
                
                // Verificar si hay tests en el mes anterior
                $firstDayPrevMonth = $firstDayOfMonth->copy()->subMonth()->startOfMonth();
                $lastDayPrevMonth = $firstDayOfMonth->copy()->subMonth()->endOfMonth();
                $hasTestsPrevMonth = $test_dates_collection->filter(function($date) use ($firstDayPrevMonth, $lastDayPrevMonth) {
                    $d = Carbon::parse($date);
                    return $d->between($firstDayPrevMonth, $lastDayPrevMonth);
                })->isNotEmpty();
                
                // Verificar si hay tests en el mes siguiente
                $firstDayNextMonth = $lastDayOfMonth->copy()->addDay()->startOfDay();
                $lastDayNextMonth = $lastDayOfMonth->copy()->addMonth()->endOfDay();
                $hasTestsNextMonth = $test_dates_collection->filter(function($date) use ($firstDayNextMonth, $lastDayNextMonth) {
                    $d = Carbon::parse($date);
                    return $d->between($firstDayNextMonth, $lastDayNextMonth);
                })->isNotEmpty();
            @endphp

            <!-- Calendario y Selector -->
            <div class="row mb-4">
                <!-- Calendario -->
                <div class="col-6">
                    <div class="mini-calendar mx-auto">
                        <div class="d-flex justify-content-between align-items-center mb-2">
                            <button type="button" 
                                    class="btn btn-sm btn-primary"
                                    onclick="navigateMonth(-1)">
                                <i class="fas fa-chevron-left"></i>
                            </button>
                            <div class="d-flex align-items-center calendar-selectors">
                                <!-- Selector de meses para escritorio (se oculta en móvil) -->
                                <select id="desktopMonthSelect" class="form-control form-control-sm mr-2 d-none d-md-block" style="width: 130px;" 
                                        onchange="changeMonth(this.value)">
                                    @foreach(range(1, 12) as $num)
                                        <option value="{{ $num }}" 
                                            {{ $num == $current_date->month ? 'selected' : '' }}
                                            class="{{ isset($months_with_tests[$year][$num]) ? 'has-tests' : '' }}"
                                        >
                                            {{ __('all.months.' . $num) }}
                                        </option>
                                    @endforeach
                                </select>
                                
                                <!-- Selector personalizado para móvil -->
                                <div class="mobile-custom-select d-md-none" style="width: 130px;">
                                    <div id="mobileMonthDisplay" class="custom-select-display">
                                        {{ __('all.months.' . $current_date->month) }}
                                    </div>
                                    <div id="mobileMonthDropdown" class="custom-select-dropdown">
                                        @foreach(range(1, 12) as $num)
                                            <div class="custom-select-option {{ isset($months_with_tests[$year][$num]) ? 'has-tests-mobile' : '' }} {{ $num == $current_date->month ? 'selected' : '' }}"
                                                 data-value="{{ $num }}" onclick="selectMobileMonth(this)">
                                                {{ __('all.months.' . $num) }}
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                                
                                <!-- Selector de años para escritorio (se oculta en móvil) -->
                                <select id="yearSelect" class="form-control form-control-sm d-none d-md-block" style="width: 100px;" 
                                        onchange="changeYear(this.value)">
                                    @for($y = $current_date->year - 5; $y <= $current_date->year + 5; $y++)
                                        <option value="{{ $y }}" 
                                            {{ $y == $current_date->year ? 'selected' : '' }}
                                            class="{{ isset($years_with_tests[$y]) ? 'has-tests' : '' }}"
                                        >
                                            {{ $y }}
                                        </option>
                                    @endfor
                                </select>
                                
                                <!-- Selector personalizado para años en móvil -->
                                <div class="mobile-custom-select d-md-none" style="width: 100px;">
                                    <div id="mobileYearDisplay" class="custom-select-display">
                                        {{ $current_date->year }}
                                    </div>
                                    <div id="mobileYearDropdown" class="custom-select-dropdown">
                                        @for($y = $current_date->year - 5; $y <= $current_date->year + 5; $y++)
                                            <div class="custom-select-option {{ isset($years_with_tests[$y]) ? 'has-tests-mobile' : '' }} {{ $y == $current_date->year ? 'selected' : '' }}"
                                                 data-value="{{ $y }}" onclick="selectMobileYear(this)">
                                                {{ $y }}
                                            </div>
                                        @endfor
                                    </div>
                                </div>
                            </div>
                            <button type="button" 
                                    class="btn btn-sm btn-primary"
                                    onclick="navigateMonth(1)">
                                <i class="fas fa-chevron-right"></i>
                            </button>
                        </div>
                        <table class="mini-calendar-table">
                            <thead>
                                <tr>
                                    <th>{{ __('all.calendar_days.L') }}</th>
                                    <th>{{ __('all.calendar_days.M') }}</th>
                                    <th>{{ __('all.calendar_days.X') }}</th>
                                    <th>{{ __('all.calendar_days.J') }}</th>
                                    <th>{{ __('all.calendar_days.V') }}</th>
                                    <th>{{ __('all.calendar_days.S') }}</th>
                                    <th>{{ __('all.calendar_days.D') }}</th>
                                </tr>
                            </thead>
                            <tbody>
                                @php $cell=0; @endphp
                                <tr>
                                    @for($i=0;$i<$startWeekday;$i++)
                                        <td></td>
                                        @php $cell++; @endphp
                                    @endfor

                                    @for($day=1;$day<=$daysInMonth;$day++)
                                        @php
                                            $d = \Carbon\Carbon::create($year,$month,$day)->format('Y-m-d');
                                            $hasTest = $test_dates_collection->contains($d);
                                            $classes = $hasTest ? ' has-test ' : '';
                                            if($d == $current_date->format('Y-m-d')) $classes .= ' selected-day ';
                                        @endphp
                                        <td class="{{ $classes }}"
                                            onclick="
                                                document.getElementById('current_date').value='{{ $d }}';
                                                this.closest('form').submit();
                                            "
                                        >
                                            {{ $day }}
                                            @if($hasTest)
                                                @php
                                                    $dayTests = $tests_by_date[$d] ?? collect();
                                                @endphp
                                                @if($dayTests->isNotEmpty())
                                                    <div class="day-tests-popup">
                                                        @foreach($dayTests as $test)
                                                            <a href="#"
                                                               onclick="
                                                                  event.preventDefault();
                                                                  document.getElementById('current_date').value='{{ $d }}';
                                                                  document.getElementsByName('current_game_id')[0].value='{{ $test->id }}';
                                                                  this.closest('form').submit();
                                                               "
                                                            >
                                                                {{ \Carbon\Carbon::parse($test->date_time_start)->format('H:i') }}
                                                            </a>
                                                        @endforeach
                                                    </div>
                                                @endif
                                            @endif
                                        </td>
                                        @php
                                            $cell++;
                                            if($cell%7==0) echo '</tr><tr>';
                                        @endphp
                                    @endfor

                                    @while($cell%7!=0)
                                        <td></td>
                                        @php $cell++; @endphp
                                    @endwhile
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

                <!-- Selector de período -->
                <div class="col-6">
                    <div class="period-selector">
                        <select name="last_period" class="form-control form-control-sm mb-2" onchange="this.form.submit()">
                            <option value="anterior" {{ $last_period=='anterior'?'selected':'' }}>{{ __('all.previous') }}</option>
                            <option value="1week" {{ $last_period=='1week'?'selected':'' }}>{{ __('all.last_week') }}</option>
                            <option value="2weeks" {{ $last_period=='2weeks'?'selected':'' }}>{{ __('all.last_2_weeks') }}</option>
                            <option value="1month" {{ $last_period=='1month'?'selected':'' }}>{{ __('all.last_month') }}</option>
                        </select>

                        @if($last_period=='anterior')
                        <div class="test-selector">
                            <div class="form-group">
                                <label class="small">{{ __('all.previous_test_day') }}:</label>
                                <select name="last_game_date" class="form-control form-control-sm mb-2"
                                        onchange="this.form.submit()">
                                    <option value="">-- {{ __('all.select_day') }} --</option>
                                    @foreach($dates_previous_valid as $dpv)
                                        <option value="{{ $dpv }}" {{ $dpv==$last_game_date?'selected':'' }}>
                                            {{ \Carbon\Carbon::parse($dpv)->format('d/m/Y') }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="form-group">
                                <label class="small">{{ __('all.test_of_that_day') }}:</label>
                                <select name="last_game_id" class="form-control form-control-sm"
                                        onchange="this.form.submit()">
                                    <option value="">-- {{ __('all.select_test') }} --</option>
                                    @if(!empty($games_that_day))
                                        @foreach($games_that_day as $pg)
                                            <option value="{{ $pg->id }}"
                                                {{ $pg->id==$last_game_id?'selected':'' }}>
                                                #{{ $pg->id }} - {{ \Carbon\Carbon::parse($pg->date_time_start)->format('H:i') }}
                                            </option>
                                        @endforeach
                                    @endif
                                </select>
                            </div>
                        </div>
                        @endif
                        
                        <!-- ELIMINADO: Leyenda de tests inválidos -->
                    </div>
                </div>
            </div>

                        <style>
                /* Estilo personalizado para botones en header - no se muestra en esta sección */
                .header-metrics-button {
                    background-color: #212529 !important; /* Color oscuro para mantener estilo actual */
                    color: white !important;
                    border: none !important;
                    border-radius: 4px !important;
                    padding: 10px !important;
                    width: 100% !important;
                    text-align: center !important;
                }
                
                /* Estilo especial para el botón de PERFORMANCE */
                .header-performance-button {
                    background-color: transparent !important;
                    color: #212529 !important;
                    border: none !important;
                    font-weight: bold !important;
                    width: 100% !important;
                    text-align: center !important;
                }
            </style>
            
            <!-- Estructura de cabeceras con A vertical en el header -->
            <div class="row mb-3">
                <!-- Agregar la etiqueta A (Attention) vertical en esta sección -->
                <div class="col-1 d-flex align-items-center justify-content-center" style="
    height: 2px;
    opacity: 0;">
                    <div style="writing-mode: vertical-lr; transform: rotate(180deg); font-weight: bold; height: 100%;">
                        A
                    </div>
                </div>
                
                <div class="col-8">
                    <div class="row">
                        <div class="col-3 text-center">
                            <div class="header-metrics-button">{{ __('all.metrics') }}</div>
                        </div>
                        <div class="col-3 text-center">
                            <div class="header-metrics-button">{{ __('all.current') }}</div>
                        </div>
                        <div class="col-3 text-center">
                            <div class="header-metrics-button">{{ __('all.last') }}</div>
                        </div>
                        <div class="col-3 text-center">
                            <div class="header-metrics-button">{{ __('all.global') }}</div>
                        </div>
                    </div>
                </div>
                <div class="col-3 text-center">
                    <div class="header-performance-button">{{ __('all.performance') }}</div>
                </div>
            </div>

            <!-- Métricas -->
            <div class="metrics-results mt-4">
                <!-- Attention Block -->
                <div class="metrics-block">
                    <div class="metrics-block-label">
                        <span class="{{ getBlockClass('ATTENTION', $metrics_current, $metrics_global, $metrics_performance, $is_current_game_in_first_three) }}">Attention</span>
                    </div>

                    <!-- A1 - PROCESSING (VPS) -->
                    <div class="row mb-2 align-items-center">
                        <div class="col-9">
                            <div class="row">
                                <div class="col-3">
                                    <div class="metric-cell metric-name {{ getTitleClass('VPS', $metrics_current, $metrics_global, $metrics_performance['VPS'] ?? null, $is_current_game_in_first_three) }}">
                                        A1 - PROCESSING
                                    </div>
                                </div>
                                <div class="col-3">
                                    <div class="metric-cell">
                                        @if(isset($metrics_current['VPS']))
                                            {{ number_format($metrics_current['VPS'],2) }}%
                                        @else
                                            <span class="na-value-red">N/A</span>
                                        @endif
                                    </div>
                                </div>
                                <div class="col-3">
                                    <div class="metric-cell">
                                        @if(isset($metrics_last['VPS']))
                                            {{ number_format($metrics_last['VPS'],2) }}%
                                        @else
                                            N/A
                                        @endif
                                    </div>
                                </div>
                                <div class="col-3">
                                    <div class="metric-cell">
                                        @if($is_current_game_in_first_three)
                                            N/A
                                        @elseif(isset($metrics_global['VPS']))
                                            {{ number_format($metrics_global['VPS'],2) }}%
                                        @else
                                            N/A
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-3">
                            <div class="metric-cell">
                                @php
                                    $diffVPS = $metrics_performance['VPS'] ?? null;
                                @endphp
                                @if(!is_null($diffVPS) && !$is_current_game_in_first_three)
                                    <div class="performance-pill {{ getPerformancePillClass('VPS', $diffVPS) }}">
                                        <div class="performance-value">
                                            {{ number_format($diffVPS,2) }}%
                                            <span class="trend-indicator">
                                                <i class="fas fa-{{ $diffVPS > 0 ? 'arrow-up' : 'arrow-down' }}"></i>
                                            </span>
                                        </div>
                                    </div>
                                @else
                                    <div class="performance-pill">
                                        <div class="performance-value">
                                            N/A
                                        </div>
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>

                    <!-- A2 - PERIPHERAL (VRP) -->
                    <div class="row mb-2 align-items-center">
                        <div class="col-9">
                            <div class="row">
                                <div class="col-3">
                                    <div class="metric-cell metric-name {{ getTitleClass('VRP', $metrics_current, $metrics_global, $metrics_performance['VRP'] ?? null, $is_current_game_in_first_three) }}">
                                        A2 - PERIPHERAL
                                    </div>
                                </div>
                                <div class="col-3">
                                    <div class="metric-cell">
                                        @if(isset($metrics_current['VRP']))
                                            {{ number_format($metrics_current['VRP'],2) }}%
                                        @else
                                            <span class="na-value-red">N/A</span>
                                        @endif
                                    </div>
                                </div>
                                <div class="col-3">
                                    <div class="metric-cell">
                                        @if(isset($metrics_last['VRP']))
                                            {{ number_format($metrics_last['VRP'],2) }}%
                                        @else
                                            N/A
                                        @endif
                                    </div>
                                </div>
                                <div class="col-3">
                                    <div class="metric-cell">
                                        @if($is_current_game_in_first_three)
                                            N/A
                                        @elseif(isset($metrics_global['VRP']))
                                            {{ number_format($metrics_global['VRP'],2) }}%
                                        @else
                                            N/A
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-3">
                            <div class="metric-cell">
                                @php
                                    $perf = $metrics_performance['VRP'] ?? null;
                                @endphp
                                @if(!is_null($perf) && !$is_current_game_in_first_three)
                                    <div class="performance-pill {{ getPerformancePillClass('VRP', $perf) }}">
                                        <div class="performance-value">
                                            {{ number_format($perf,2) }}%
                                            <span class="trend-indicator">
                                                <i class="fas fa-{{ $perf > 0 ? 'arrow-up' : 'arrow-down' }}"></i>
                                            </span>
                                        </div>
                                    </div>
                                @else
                                    <div class="performance-pill">
                                        <div class="performance-value">
                                            N/A
                                        </div>
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>

                    <!-- A3 - CENTRAL (VRC) -->
                    <div class="row mb-2 align-items-center">
                        <div class="col-9">
                            <div class="row">
                                <div class="col-3">
                                    <div class="metric-cell metric-name {{ getTitleClass('VRC', $metrics_current, $metrics_global, $metrics_performance['VRC'] ?? null, $is_current_game_in_first_three) }}">
                                        A3 - CENTRAL
                                    </div>
                                </div>
                                <div class="col-3">
                                    <div class="metric-cell">
                                        @if(isset($metrics_current['VRC']))
                                            {{ number_format($metrics_current['VRC'],2) }}%
                                        @else
                                            <span class="na-value-red">N/A</span>
                                        @endif
                                    </div>
                                </div>
                                <div class="col-3">
                                    <div class="metric-cell">
                                        @if(isset($metrics_last['VRC']))
                                            {{ number_format($metrics_last['VRC'],2) }}%
                                        @else
                                            N/A
                                        @endif
                                    </div>
                                </div>
                                <div class="col-3">
                                    <div class="metric-cell">
                                        @if($is_current_game_in_first_three)
                                            N/A
                                        @elseif(isset($metrics_global['VRC']))
                                            {{ number_format($metrics_global['VRC'],2) }}%
                                        @else
                                            N/A
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-3">
                            <div class="metric-cell">
                                @php
                                    $perf = $metrics_performance['VRC'] ?? null;
                                @endphp
                                @if(!is_null($perf) && !$is_current_game_in_first_three)
                                    <div class="performance-pill {{ getPerformancePillClass('VRC', $perf) }}">
                                        <div class="performance-value">
                                            {{ number_format($perf,2) }}%
                                            <span class="trend-indicator">
                                                <i class="fas fa-{{ $perf > 0 ? 'arrow-up' : 'arrow-down' }}"></i>
                                            </span>
                                        </div>
                                    </div>
                                @else
                                    <div class="performance-pill">
                                        <div class="performance-value">
                                            N/A
                                        </div>
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>

                    <!-- V1 - POSE (STATIC) -->
                <div class="row mb-2 align-items-center">
                    <div class="col-9">
                        <div class="row">
                            <div class="col-3">
                                <div class="metric-cell metric-name {{ empty($video_result) || empty($video_result['images']['face'] ?? null) ? '' : getTitleClass('V1', $video_stats['current'], $video_stats['average'], null, $is_current_game_in_first_three) }}">
                                    V1 - POSE
                                </div>
                            </div>
                            <div class="col-3">
                                <div class="metric-cell">
                                        @if(empty($video_result) || empty($video_result['images']['face'] ?? null))
                                            <span class="na-value-red">N/A</span>
                                        @elseif(isset($video_stats['current']['static']))
                                            {{ number_format(100 - $video_stats['current']['static'],2) }}%
                                        @else
                                            <span class="na-value-red">N/A</span>
                                        @endif
                                    </div>
                                </div>
                                <div class="col-3">
                                    <div class="metric-cell">
                                        @if(isset($video_stats['week']['static']))
                                            {{ number_format(100 - $video_stats['week']['static'],2) }}%
                                        @else
                                            N/A
                                        @endif
                                    </div>
                                </div>
                                <div class="col-3">
                                    <div class="metric-cell">
                                        @if($is_current_game_in_first_three)
                                            N/A
                                        @elseif(isset($video_stats['average']['static']))
                                            {{ number_format(100 - $video_stats['average']['static'],2) }}%
                                        @else
                                            N/A
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-3">
                            <div class="metric-cell">
                                @if($is_current_game_in_first_three)
                                    <div class="performance-pill">
                                        <div class="performance-value">N/A</div>
                                    </div>
                                @else
                                    @php
                                        $current_inverted = isset($video_stats['current']['static']) ? (100 - $video_stats['current']['static']) : null;
                                        $average_inverted = isset($video_stats['average']['static']) ? (100 - $video_stats['average']['static']) : null;
                                        $diffValue = ($current_inverted !== null && $average_inverted !== null) ? round($current_inverted - $average_inverted, 2) : null;
                                    @endphp
                                    @if(!is_null($diffValue) && !empty($video_result) && !empty($video_result['images']['face'] ?? null))
                                        @php
                                            // ARREGLADO: V1 POSE solo rojo cuando es SUPERIOR (> 0)
                                            $poseClass = '';
                                            if ($diffValue > 0) {
                                                $poseClass = 'negative';
                                            }
                                        @endphp
                                        <div class="performance-pill {{ $poseClass }}">
                                            <div class="performance-value">
                                                {{ number_format($diffValue,2) }}%
                                                <span class="trend-indicator">
                                                    <i class="fas fa-{{ $diffValue > 0 ? 'arrow-up' : 'arrow-down' }}"></i>
                                                </span>
                                            </div>
                                        </div>
                                    @else
                                        <div class="performance-pill">
                                            <div class="performance-value">
                                                N/A
                                            </div>
                                        </div>
                                    @endif
                                @endif
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Tiredness Block -->
                <div class="metrics-block">
                    <div class="metrics-block-label">
                        <span class="{{ getBlockClass('TIREDNESS', $metrics_current, $metrics_global, $metrics_performance, $is_current_game_in_first_three) }}">Tiredness</span>
                    </div>

                    <!-- T1 - MEMORY (M) -->
                    <div class="row mb-2 align-items-center">
                        <div class="col-9">
                            <div class="row">
                                <div class="col-3">
                                    <div class="metric-cell metric-name {{ getTitleClass('M', $metrics_current, $metrics_global, $metrics_performance['M'] ?? null, $is_current_game_in_first_three) }}">
                                        T1 - MEMORY
                                    </div>
                                </div>
                                <div class="col-3">
                                    <div class="metric-cell">
                                        @if(isset($metrics_current['M']))
                                            {{ number_format($metrics_current['M'],2) }}%
                                        @else
                                            <span class="na-value-red">N/A</span>
                                        @endif
                                    </div>
                                </div>
                                <div class="col-3">
                                    <div class="metric-cell">
                                        @if(isset($metrics_last['M']))
                                            {{ number_format($metrics_last['M'],2) }}%
                                        @else
                                            N/A
                                        @endif
                                    </div>
                                </div>
                                <div class="col-3">
                                    <div class="metric-cell">
                                        @if($is_current_game_in_first_three)
                                            N/A
                                        @elseif(isset($metrics_global['M']))
                                            {{ number_format($metrics_global['M'],2) }}%
                                        @else
                                            N/A
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-3">
                            <div class="metric-cell">
                                @php
                                    $perf = $metrics_performance['M'] ?? null;
                                @endphp
                                @if(!is_null($perf) && !$is_current_game_in_first_three)
                                    <div class="performance-pill {{ getPerformancePillClass('M', $perf) }}">
                                        <div class="performance-value">
                                            {{ number_format($perf,2) }}%
                                            <span class="trend-indicator">
                                                <i class="fas fa-{{ $perf > 0 ? 'arrow-up' : 'arrow-down' }}"></i>
                                            </span>
                                        </div>
                                    </div>
                                @else
                                    <div class="performance-pill">
                                        <div class="performance-value">
                                            N/A
                                        </div>
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>

                    <!-- T2 - VALULESS (NOT VALUE) -->
                    <div class="row mb-2 align-items-center">
                        <div class="col-9">
                            <div class="row">
                                <div class="col-3">
                                    <div class="metric-cell metric-name {{ getTitleClass('SIN_VALOR', $metrics_current, $metrics_global, $metrics_performance['SIN_VALOR'] ?? null, $is_current_game_in_first_three) }}">
                                        T2 - VALULESS
                                    </div>
                                </div>
                                <div class="col-3">
                                    <div class="metric-cell">
                                        @if(isset($metrics_current['SIN_VALOR']))
                                            {{ number_format($metrics_current['SIN_VALOR'],2) }}%
                                        @else
                                            <span class="na-value-red">N/A</span>
                                        @endif
                                    </div>
                                </div>
                                <div class="col-3">
                                    <div class="metric-cell">
                                        @if(isset($metrics_last['SIN_VALOR']))
                                            {{ number_format($metrics_last['SIN_VALOR'],2) }}%
                                        @else
                                            N/A
                                        @endif
                                    </div>
                                </div>
                                <div class="col-3">
                                    <div class="metric-cell">
                                        @if($is_current_game_in_first_three)
                                            N/A
                                        @elseif(isset($metrics_global['SIN_VALOR']))
                                            {{ number_format($metrics_global['SIN_VALOR'],2) }}%
                                        @else
                                            N/A
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-3">
                            <div class="metric-cell">
                                @php
                                    $perf = $metrics_performance['SIN_VALOR'] ?? null;
                                @endphp
                                @if(!is_null($perf) && !$is_current_game_in_first_three)
                                    <div class="performance-pill {{ getPerformancePillClass('SIN_VALOR', $perf) }}">
                                        <div class="performance-value">
                                            {{ number_format($perf,2) }}%
                                            <span class="trend-indicator">
                                                <i class="fas fa-{{ $perf > 0 ? 'arrow-up' : 'arrow-down' }}"></i>
                                            </span>
                                        </div>
                                    </div>
                                @else
                                    <div class="performance-pill">
                                        <div class="performance-value">
                                            N/A
                                        </div>
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>

                    <!-- V2 - DCUE (VISION BBE) -->
                    <div class="row mb-2 align-items-center">
                        <div class="col-9">
                            <div class="row">
                                <div class="col-3">
                                    <div class="metric-cell metric-name {{ empty($video_result) || empty($video_result['images']['face'] ?? null) ? '' : getTitleClass('V2', $video_stats['current'], $video_stats['average'], null, $is_current_game_in_first_three) }}">
                                        V2 - DCUE
                                    </div>
                                </div>
                                <div class="col-3">
                                    <div class="metric-cell">
                                        @if(empty($video_result) || empty($video_result['images']['face'] ?? null))
                                            <span class="na-value-red">N/A</span>
                                        @elseif(isset($video_stats['current']['visio_bee']) && $video_stats['current']['visio_bee'] > 0)
                                            @php
                                                $circles_count = $video_stats['current']['visio_bee'];
                                            @endphp
                                            <span>
                                                @for ($i = 0; $i < 6; $i++)
                                                    @if ($i < $circles_count)
                                                        <span class="filled-circle">●</span>
                                                    @else
                                                        <span class="empty-circle">○</span>
                                                    @endif
                                                @endfor
                                            </span>
                                        @else
                                            <span class="na-value-red">N/A</span>
                                        @endif
                                    </div>
                                </div>
                                <div class="col-3">
                                    <div class="metric-cell">
                                        @if(isset($video_stats['week']['visio_bee']) && $video_stats['week']['visio_bee'] > 0)
                                            @php
                                                $circles_count = $video_stats['week']['visio_bee'];
                                            @endphp
                                            <span>
                                                @for ($i = 0; $i < 6; $i++)
                                                    @if ($i < $circles_count)
                                                        <span class="filled-circle">●</span>
                                                    @else
                                                        <span class="empty-circle">○</span>
                                                    @endif
                                                @endfor
                                            </span>
                                        @else
                                            N/A
                                        @endif
                                    </div>
                                </div>
                                <div class="col-3">
                                    <div class="metric-cell">
                                        @if($is_current_game_in_first_three)
                                            N/A
                                        @elseif(isset($video_stats['average']['visio_bee']) && $video_stats['average']['visio_bee'] > 0)
                                            @php
                                                $circles_count = $video_stats['average']['visio_bee'];
                                            @endphp
                                            <span>
                                                @for ($i = 0; $i < 6; $i++)
                                                    @if ($i < $circles_count)
                                                        <span class="filled-circle">●</span>
                                                    @else
                                                        <span class="empty-circle">○</span>
                                                    @endif
                                                @endfor
                                            </span>
                                        @else
                                            N/A
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-3">
                            <div class="metric-cell">
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Mental Fatigue Block -->
                <div class="metrics-block">
                    <div class="metrics-block-label">
                        <span class="{{ getBlockClass('MENTAL_FATIGUE', $metrics_current, $metrics_global, $metrics_performance, $is_current_game_in_first_three) }}">Mental fatigue</span>
                    </div>

                    <!-- MF1 - RESPONSIVNESS PR -->
                    <div class="row mb-2 align-items-center">
                        <div class="col-9">
                            <div class="row">
                                <div class="col-3">
                                    <div class="metric-cell metric-name {{ getTitleClass('MF1', $metrics_current, $metrics_global, $metrics_performance['CR'] ?? null, $is_current_game_in_first_three) }}">
                                        MF1 – RESPONSIVNESS PR
                                    </div>
                                </div>
                                <div class="col-3">
                                    <div class="metric-cell">
                                        @if(isset($metrics_current['CR_total_correct']) && isset($metrics_current['CR_total_incorrect']))
                                            {{ $metrics_current['CR_total_correct'] }} in 
                                            @if($metrics_current['CR_average_time'] !== null)
                                                {{ number_format($metrics_current['CR_average_time'], 3, ',', '') }}s
                                            @else
                                                <span class="na-value-red">&nbsp;N/A</span>
                                            @endif
                                        @else
                                            <span class="na-value-red">N/A</span>
                                        @endif
                                    </div>
                                </div>
                                <div class="col-3">
                                    <div class="metric-cell">
                                        @if(isset($metrics_last['CR_total_correct']) && isset($metrics_last['CR_total_incorrect']))
                                            {{ $metrics_last['CR_total_correct'] }} in 
                                            @if($metrics_last['CR_average_time'] !== null)
                                                {{ number_format($metrics_last['CR_average_time'], 3, ',', '') }}s
                                            @else
                                                N/A
                                            @endif
                                        @else
                                            N/A
                                        @endif
                                    </div>
                                </div>
                                <div class="col-3">
                                    <div class="metric-cell">
                                        @if($is_current_game_in_first_three)
                                            N/A
                                        @elseif(isset($metrics_global['CR_total_correct']) && isset($metrics_global['CR_total_incorrect']))
                                            {{ $metrics_global['CR_total_correct'] }} in 
                                            @if($metrics_global['CR_average_time'] !== null)
                                                {{ number_format($metrics_global['CR_average_time'], 3, ',', '') }}s
                                            @else
                                                N/A
                                            @endif
                                        @else
                                            N/A
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-3">
                            <div class="metric-cell">
                                @php
                                    $perfCR = $metrics_performance['CR'] ?? null;
                                    
                                    // Calcular diferencia absoluta para MF1
                                    $current_aciertos = $metrics_current['CR_total_correct'] ?? 0;
                                    $global_aciertos = $metrics_global['CR_total_correct'] ?? 0;
                                    $current_time = $metrics_current['CR_average_time'] ?? null;
                                    $global_time = $metrics_global['CR_average_time'] ?? null;
                                    
                                    $diff_aciertos = $current_aciertos - $global_aciertos;
                                    $diff_tiempo = $current_time !== null && $global_time !== null ? $current_time - $global_time : null;
                                    
                                    $sign_aciertos = $diff_aciertos >= 0 ? '+' : '';
                                    $sign_tiempo = $diff_tiempo !== null && $diff_tiempo >= 0 ? '+' : '';
                                    
                                    $diff_display = $current_time === null ? "N/A" : "{$sign_aciertos}{$diff_aciertos} in ({$sign_tiempo}" . number_format($diff_tiempo, 3) . ")s";
                                @endphp
                                @if(!is_null($perfCR) && isset($metrics_current['CR_total_correct']) && isset($metrics_global['CR_total_correct']))
                                    @php
                                        $mf1_data = [
                                            'diff_correct' => $diff_aciertos,
                                            'diff_time' => $current_time === null ? null : $diff_tiempo
                                        ];
                                        $titleClass = getTitleClass('MF1', $metrics_current, $metrics_global, $metrics_performance['CR'] ?? null, $is_current_game_in_first_three);
                                        $performanceClass = str_contains($titleClass, 'text-danger') ? 'negative' : getPerformancePillClass('MF1', $mf1_data);
                                    @endphp
                                    <div class="performance-pill {{ $performanceClass }}">
                                        <div class="performance-value">
                                            {{ $diff_display }}
                                            <span class="trend-indicator">
                                                <i class="fas fa-{{ $diff_aciertos > 0 ? 'arrow-up' : 'arrow-down' }}"></i>
                                            </span>
                                        </div>
                                    </div>
                                @else
                                    <div class="performance-pill">
                                        <div class="performance-value">
                                            N/A
                                        </div>
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>

                    <!-- MF2 - RESPONSIVNESS C -->
                    <div class="row mb-2 align-items-center">
                        <div class="col-9">
                            <div class="row">
                                <div class="col-3">
                                    <div class="metric-cell metric-name {{ getTitleClass('MF2', $metrics_current, $metrics_global, $metrics_performance['CR_PALABRAS'] ?? null, $is_current_game_in_first_three) }}">
                                        MF2 – RESPONSIVNESS C
                                    </div>
                                </div>
                                <div class="col-3">
                                    <div class="metric-cell">
                                        @if(isset($metrics_current['CR_PALABRAS_total_correct']) && isset($metrics_current['CR_PALABRAS_total_incorrect']))
                                            {{ $metrics_current['CR_PALABRAS_total_correct'] }} in 
                                            @if($metrics_current['CR_PALABRAS_average_time'] !== null)
                                                {{ number_format($metrics_current['CR_PALABRAS_average_time'], 3, ',', '') }}s
                                            @else
                                                <span class="na-value-red">&nbsp;N/A</span>
                                            @endif
                                        @else
                                            <span class="na-value-red">N/A</span>
                                        @endif
                                    </div>
                                </div>
                                <div class="col-3">
                                    <div class="metric-cell">
                                        @if(isset($metrics_last['CR_PALABRAS_total_correct']) && isset($metrics_last['CR_PALABRAS_total_incorrect']))
                                            {{ $metrics_last['CR_PALABRAS_total_correct'] }} in 
                                            @if($metrics_last['CR_PALABRAS_average_time'] !== null)
                                                {{ number_format($metrics_last['CR_PALABRAS_average_time'], 3, ',', '') }}s
                                            @else
                                                N/A
                                            @endif
                                        @else
                                            N/A
                                        @endif
                                    </div>
                                </div>
                                <div class="col-3">
                                    <div class="metric-cell">
                                        @if($is_current_game_in_first_three)
                                            N/A
                                        @elseif(isset($metrics_global['CR_PALABRAS_total_correct']) && isset($metrics_global['CR_PALABRAS_total_incorrect']))
                                            {{ number_format($metrics_global['CR_PALABRAS_total_correct'], 2) }} in 
                                            @if($metrics_global['CR_PALABRAS_average_time'] !== null)
                                                {{ number_format($metrics_global['CR_PALABRAS_average_time'], 3, ',', '') }}s
                                            @else
                                                N/A
                                            @endif
                                        @else
                                            N/A
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-3">
                            <div class="metric-cell">
                                @if($is_current_game_in_first_three)
                                    <div class="performance-pill">
                                        <div class="performance-value">N/A</div>
                                    </div>
                                @else
                                    @php
                                        $perfCRPalabras = $metrics_performance['CR_PALABRAS'] ?? null;
                                        
                                        // Calcular diferencia absoluta para MF2
                                        $current_aciertos = $metrics_current['CR_PALABRAS_total_correct'] ?? 0;
                                        $global_aciertos = $metrics_global['CR_PALABRAS_total_correct'] ?? 0;
                                        $current_time = $metrics_current['CR_PALABRAS_average_time'] ?? null;
                                        $global_time = $metrics_global['CR_PALABRAS_average_time'] ?? null;
                                        
                                        $diff_aciertos = $current_aciertos - $global_aciertos;
                                        $diff_tiempo = $current_time !== null && $global_time !== null ? $current_time - $global_time : null;
                                        
                                        $sign_aciertos = $diff_aciertos >= 0 ? '+' : '';
                                        $sign_tiempo = $diff_tiempo !== null && $diff_tiempo >= 0 ? '+' : '';
                                        
                                        $diff_display = $current_time === null ? "N/A" : "{$sign_aciertos}{$diff_aciertos} in ({$sign_tiempo}" . number_format($diff_tiempo, 3) . ")s";
                                    @endphp
                                    @if(!is_null($perfCRPalabras) && isset($metrics_current['CR_PALABRAS_total_correct']) && isset($metrics_global['CR_PALABRAS_total_correct']))
                                        @php
                                            $mf2_data = [
                                                'diff_correct' => $diff_aciertos,
                                                'diff_time' => $current_time === null ? null : $diff_tiempo
                                            ];
                                            $titleClass = getTitleClass('MF2', $metrics_current, $metrics_global, $metrics_performance['CR_PALABRAS'] ?? null, $is_current_game_in_first_three);
                                            $performanceClass = str_contains($titleClass, 'text-danger') ? 'negative' : getPerformancePillClass('MF2', $mf2_data);
                                        @endphp
                                        <div class="performance-pill {{ $performanceClass }}">
                                            <div class="performance-value">
                                                {{ $diff_display }}
                                                <span class="trend-indicator">
                                                    <i class="fas fa-{{ $diff_aciertos > 0 ? 'arrow-up' : 'arrow-down' }}"></i>
                                                </span>
                                            </div>
                                        </div>
                                    @else
                                        <div class="performance-pill">
                                            <div class="performance-value">
                                                N/A
                                            </div>
                                        </div>
                                    @endif
                                @endif
                            </div>
                        </div>
                    </div>

                    <!-- MF3 - RESPONSIVNESS PE -->
                    <div class="row mb-2 align-items-center">
                        <div class="col-9">
                            <div class="row">
                                <div class="col-3">
                                    <div class="metric-cell metric-name {{ getTitleClass('MF3', $metrics_current, $metrics_global, $metrics_performance['CR_FIGURAS'] ?? null, $is_current_game_in_first_three) }}">
                                        MF3 – RESPONSIVNESS PE
                                    </div>
                                </div>
                                <div class="col-3">
                                    <div class="metric-cell">
                                        @if(isset($metrics_current['CR_FIGURAS_total_correct']) && isset($metrics_current['CR_FIGURAS_total_incorrect']))
                                            {{ $metrics_current['CR_FIGURAS_total_correct'] }} in 
                                            @if($metrics_current['CR_FIGURAS_average_time'] !== null)
                                                @if($metrics_current['CR_FIGURAS_average_time'] > 1.5)
                                                    <span class="na-value-red">&nbsp;N/A</span>
                                                @else
                                                    {{ number_format($metrics_current['CR_FIGURAS_average_time'], 3, ',', '') }}s
                                                @endif
                                            @else
                                                <span class="na-value-red">&nbsp;N/A</span>
                                            @endif
                                        @else
                                            <span class="na-value-red">N/A</span>
                                        @endif
                                    </div>
                                </div>
                                <div class="col-3">
                                    <div class="metric-cell">
                                        @if(isset($metrics_last['CR_FIGURAS_total_correct']) && isset($metrics_last['CR_FIGURAS_total_incorrect']))
                                            {{ $metrics_last['CR_FIGURAS_total_correct'] }} in 
                                            @if($metrics_last['CR_FIGURAS_average_time'] !== null)
                                                @if($metrics_last['CR_FIGURAS_average_time'] > 1.5)
                                                    N/A
                                                @else
                                                    {{ number_format($metrics_last['CR_FIGURAS_average_time'], 3, ',', '') }}s
                                                @endif
                                            @else
                                                N/A
                                            @endif
                                        @else
                                            N/A
                                        @endif
                                    </div>
                                </div>
                                <div class="col-3">
                                    <div class="metric-cell">
                                        @if($is_current_game_in_first_three)
                                            N/A
                                        @elseif(isset($metrics_global['CR_FIGURAS_total_correct']) && isset($metrics_global['CR_FIGURAS_total_incorrect']))
                                            {{ $metrics_global['CR_FIGURAS_total_correct'] }} in 
                                            @if($metrics_global['CR_FIGURAS_average_time'] !== null)
                                                @if($metrics_global['CR_FIGURAS_average_time'] > 1.5)
                                                    N/A
                                                @else
                                                    {{ number_format($metrics_global['CR_FIGURAS_average_time'], 3, ',', '') }}s
                                                @endif
                                            @else
                                                N/A
                                            @endif
                                        @else
                                            N/A
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-3">
                            <div class="metric-cell">
                                @if($is_current_game_in_first_three)
                                    <div class="performance-pill">
                                        <div class="performance-value">N/A</div>
                                    </div>
                                @else
                                    @php
                                        $perfCRFiguras = $metrics_performance['CR_FIGURAS'] ?? null;
                                        
                                        // Calcular diferencia absoluta para MF3
                                        $current_aciertos = $metrics_current['CR_FIGURAS_total_correct'] ?? 0;
                                        $global_aciertos = $metrics_global['CR_FIGURAS_total_correct'] ?? 0;
                                        $current_time = $metrics_current['CR_FIGURAS_average_time'] ?? null;
                                        $global_time = $metrics_global['CR_FIGURAS_average_time'] ?? null;
                                        
                                        $diff_aciertos = $current_aciertos - $global_aciertos;
                                        $diff_tiempo = $current_time !== null && $global_time !== null ? $current_time - $global_time : null;
                                        
                                        $sign_aciertos = $diff_aciertos >= 0 ? '+' : '';
                                        $sign_tiempo = $diff_tiempo !== null && $diff_tiempo >= 0 ? '+' : '';
                                        
                                        $diff_display = ($current_time === null || $current_time > 1.5) ? "N/A" : "{$sign_aciertos}{$diff_aciertos} in ({$sign_tiempo}" . number_format($diff_tiempo, 3) . ")s";
                                    @endphp
                                    @if(!is_null($perfCRFiguras) && isset($metrics_current['CR_FIGURAS_total_correct']) && isset($metrics_global['CR_FIGURAS_total_correct']) && $current_time !== null && $current_time <= 1.5)
                                        @php
                                            $mf3_data = [
                                                'diff_correct' => $diff_aciertos,
                                                'diff_time' => $current_time === null ? null : $diff_tiempo
                                            ];
                                            $titleClass = getTitleClass('MF3', $metrics_current, $metrics_global, $metrics_performance['CR_FIGURAS'] ?? null, $is_current_game_in_first_three);
                                            $performanceClass = str_contains($titleClass, 'text-danger') ? 'negative' : getPerformancePillClass('MF3', $mf3_data);
                                        @endphp
                                        <div class="performance-pill {{ $performanceClass }}">
                                            <div class="performance-value">
                                                {{ $diff_display }}
                                                <span class="trend-indicator">
                                                    <i class="fas fa-{{ $diff_aciertos > 0 ? 'arrow-up' : 'arrow-down' }}"></i>
                                                </span>
                                            </div>
                                        </div>
                                    @else
                                        @php
                                            $titleClass = getTitleClass('MF3', $metrics_current, $metrics_global, $metrics_performance['CR_FIGURAS'] ?? null, $is_current_game_in_first_three);
                                            $performanceClass = str_contains($titleClass, 'text-danger') ? 'negative' : '';
                                        @endphp
                                        <div class="performance-pill {{ $performanceClass }}">
                                            <div class="performance-value">
                                                @if($current_time !== null && $current_time > 1.5)
                                                    N/A
                                                @else
                                                    N/A
                                                @endif
                                            </div>
                                        </div>
                                    @endif
                                @endif
                            </div>
                        </div>
                    </div>

                    <!-- MF4 - ERROR -->
                    <div class="row mb-2 align-items-center">
                        <div class="col-9">
                            <div class="row">
                                <div class="col-3">
                                    <div class="metric-cell metric-name {{ getTitleClass('ERROR', $metrics_current, $metrics_global, $metrics_performance['ERROR'] ?? null, $is_current_game_in_first_three) }}">
                                        MF4 - ERROR
                                    </div>
                                </div>
                                <div class="col-3">
                                    <div class="metric-cell">
                                        @if(isset($metrics_current['ERROR']))
                                            {{ number_format($metrics_current['ERROR'],2) }}%
                                        @else
                                            <span class="na-value-red">N/A</span>
                                        @endif
                                    </div>
                                </div>
                                <div class="col-3">
                                    <div class="metric-cell">
                                        @if(isset($metrics_last['ERROR']))
                                            {{ number_format($metrics_last['ERROR'],2) }}%
                                        @else
                                            N/A
                                        @endif
                                    </div>
                                </div>
                                <div class="col-3">
                                    <div class="metric-cell">
                                        @if($is_current_game_in_first_three)
                                            N/A
                                        @elseif(isset($metrics_global['ERROR']))
                                            {{ number_format($metrics_global['ERROR'],2) }}%
                                        @else
                                            N/A
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-3">
                            <div class="metric-cell">
                                @if($is_current_game_in_first_three)
                                    <div class="performance-pill">
                                        <div class="performance-value">N/A</div>
                                    </div>
                                @else
                                    @php
                                        $perf = $metrics_performance['ERROR'] ?? null;
                                    @endphp
                                    @if(!is_null($perf))
                                        <div class="performance-pill {{ getPerformancePillClass('ERROR', $perf) }}">
                                            <div class="performance-value">
                                                {{ number_format($perf,2) }}%
                                                <span class="trend-indicator">
                                                    <i class="fas fa-{{ $perf < 0 ? 'arrow-up' : 'arrow-down' }}"></i>
                                                </span>
                                            </div>
                                        </div>
                                    @else
                                        <div class="performance-pill">
                                            <div class="performance-value">
                                                N/A
                                            </div>
                                        </div>
                                    @endif
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- View Selector -->
            <div class="view-selector mb-4">
                <div class="btn-group w-100" role="group">
                    <button type="button" 
                            class="btn btn-outline-primary active" 
                            onclick="handleViewChange('cameraView')"
                            id="cameraViewBtn">
                        {{ __('all.camera_view') }}
                    </button>
                    <button type="button" 
                            class="btn btn-outline-primary" 
                            onclick="handleViewChange('intraweekView')"
                            id="intraweekViewBtn">
                        {{ __('all.intraweek_view') }}
                    </button>
                    <button type="button" 
                            class="btn btn-outline-primary" 
                            onclick="handleViewChange('intradayView')"
                            id="intradayViewBtn">
                        {{ __('all.intraday_view') }}
                    </button>
                </div>
            </div>

            <!-- Camera View -->
            <div id="cameraView">
                <div class="cam-view-section p-0">
                    <div class="camera-content">
                        @if(!empty($video_result))
                            <div class="modern-layout">
                                <!-- Sección de Video -->
                                @if(!empty($video_result['video']))
                                    <div class="video-section">
                                        <h4 class="mb-3 text-center">{{ __('all.camera_view') }}</h4>
                                        <video controls class="main-video">
                                            <source src="data:video/mp4;base64,{{ $video_result['video'] }}" type="video/mp4">
                                            {{ __('all.video_not_supported') }}
                                        </video>
                                    </div>
                                @endif

                                <!-- Sección de Imágenes -->
                                <div class="face-section">
                                    @if(!empty($video_result['images']) && !empty($video_result['images']['face']))
                                        <div class="face-wrapper">
                                            <img src="data:image/png;base64,{{ trim($video_result['images']['face']) }}" 
                                                 alt="Face" class="face-image">
                                        </div>
                                    @endif
                                </div>

                               
                                <!-- Video Stats -->
                                @if(isset($video_stats))
                                    <x-video-stats :stats="$video_stats" />
                                @endif
                            </div>
                        @else
                            <p class="no-data-message">{{ __('all.no_video_data_available') }}</p>
                        @endif
                    </div>
                </div>
            </div>

            <!-- Intraweek View -->
            <div id="intraweekView" style="display: none;">
                <div class="chart-container">
                    <canvas id="intraweekChart"></canvas>
                </div>
            </div>

            <!-- Intraday View -->
            <div id="intradayView" style="display: none;">
                <div class="chart-container">
                    <canvas id="intradayChart"></canvas>
                </div>
            </div>
        </form>
    </div>
</div>

@php
/**
 * colorVRtoM($key,$val):
 * Aplica color <70 => rojo, >=90 => verde, else => blanco
 * SOLO si $key está en [VRC,VRP,VPS,VPA,M].
 */
function colorVRtoM($key,$val){
    if(is_null($val)) return '';
    if(!in_array($key,['VRC','VRP','VPS','VPA','M'])) return '';
    if($val<=70) return 'bg-danger text-white'; 
    return '';
}

/**
 * colorPerformance($perf):
 * < -10 => rojo
 * > +10 => verde
 * else => sin color
 */
function colorPerformance($perf){
    if(is_null($perf)) return '';
    if($perf<=-10) return 'bg-danger text-white';
    return '';
}

/**
 * Determina si una métrica es del tipo ERROR o NOT VALUE
 * para los cuales la lógica de colores se invierte
 */
function isErrorOrNotValue($key) {
    return in_array(strtoupper($key), ['ERROR', 'NOT_VALUE', 'SIN_VALOR']);
}

/**
 * Determina la clase CSS para la píldora de rendimiento
 * según el tipo de métrica y el valor de rendimiento
 */
function getPerformancePillClass($key, $perf) {
    // Lógica específica para MF1, MF2, MF3
    if ($key == 'MF1' || $key == 'MF2' || $key == 'MF3') {
        if (is_array($perf) && isset($perf['diff_correct']) && isset($perf['diff_time'])) {
            $diff_correct = $perf['diff_correct'];
            $diff_time = $perf['diff_time'];
            
            // Si diff_time es null (current_time era null), mostrar en rojo
            if ($diff_time === null) {
                return 'negative';
            }
            
            // Rojo solo si: aciertos negativos (-) Y tiempo positivo (+)
            if ($diff_correct < 0 && $diff_time > 0) {
                return 'negative';
            }
            return '';
        }
        return '';
    }
    
    if ($key == 'ERROR') {
        // Para ERROR reglas específicas - Invertido porque mayor error es malo
        if ($perf > 4.99) return 'negative';
        if ($perf < -4.99) return '';
        return '';
    } else if ($key == 'SIN_VALOR') {
        // Para VALUELESS, umbral específico de 2.5% - Solo rojo, no verde
        if ($perf >= 2.5) return 'negative';
        return '';
    } else if (isErrorOrNotValue($key)) {
        // Para otros tipos NOT VALUE, la lógica se invierte (umbral 9.99%)
        if ($perf < -9.99) return 'negative';
        if ($perf > 9.99) return '';
        return '';
    } else if ($key == 'V1') {
        // Para POSE, si current > global en más de 10% = rojo (más movimiento = peor)
        if ($perf > 10) return 'negative';
        if ($perf < -10) return '';
        return '';
    } else {
        // Para el resto de métricas
        if ($perf < -9.99) return 'negative';
        if ($perf > 9.99) return '';
        return '';
    }
}

// ELIMINADO: Funciones complejas - usando condiciones inline directas

/**
 * Determina si el título de una métrica debe estar en rojo
 */
function getTitleClass($key, $metrics_current, $metrics_global, $perf, $is_in_first_three = false) {
    // NUEVA LÓGICA: Para primeros 3 tests, solo rojo si CURRENT muestra N/A o caso especial
    if ($is_in_first_three) {
        $video_result = $GLOBALS['video_result'] ?? null;
        $video_stats = $GLOBALS['video_stats'] ?? null;
        
        // Detectar casos donde CURRENT debe estar en rojo
        $shouldShowRed = false;
        
        // V1 - POSE: N/A cuando no hay video
        if ($key === 'V1') {
            $shouldShowRed = empty($video_result) || empty($video_result['images']['face'] ?? null) || !isset($video_stats['current']['static']);
        }
        // V2 - DCUE: N/A cuando no hay video o visio_bee
        elseif ($key === 'V2') {
            $shouldShowRed = empty($video_result) || empty($video_result['images']['face'] ?? null) || !isset($video_stats['current']['visio_bee']) || $video_stats['current']['visio_bee'] <= 0;
        }
        // MF1: N/A cuando no hay métricas CR o tiempo es null
        elseif ($key === 'MF1') {
            $shouldShowRed = !isset($metrics_current['CR_total_correct']) || !isset($metrics_current['CR_total_incorrect']) || $metrics_current['CR_average_time'] === null;
        }
        // MF2: N/A cuando no hay métricas CR_PALABRAS o tiempo es null
        elseif ($key === 'MF2') {
            $shouldShowRed = !isset($metrics_current['CR_PALABRAS_total_correct']) || !isset($metrics_current['CR_PALABRAS_total_incorrect']) || $metrics_current['CR_PALABRAS_average_time'] === null;
        }
        // MF3: N/A cuando tiempo > 1.5 o no hay métricas CR_FIGURAS
        elseif ($key === 'MF3') {
            $shouldShowRed = !isset($metrics_current['CR_FIGURAS_total_correct']) || !isset($metrics_current['CR_FIGURAS_total_incorrect']) || $metrics_current['CR_FIGURAS_average_time'] === null || $metrics_current['CR_FIGURAS_average_time'] > 1.5;
        }
        // Métricas básicas: N/A cuando la métrica no existe
        elseif (in_array($key, ['VPS', 'VRP', 'VRC', 'M', 'SIN_VALOR', 'ERROR'])) {
            $shouldShowRed = !isset($metrics_current[$key]);
        }
        
        if ($shouldShowRed) {
            return 'text-danger'; // CURRENT en rojo → título en rojo
        } else {
            return ''; // CURRENT normal → título normal
        }
    }
    
    if ($key == 'VPS' || $key == 'VRP' || $key == 'VRC') {
        // A1, A2, A3
        if ($perf < -9.99) return 'text-danger';
    } else if ($key == 'V1') {
        // ARREGLADO: V1 POSE solo rojo cuando es SUPERIOR (> 0) - misma lógica que el número
        $current_static = $metrics_current['static'] ?? null;
        $global_static = $metrics_global['static'] ?? null;
        
        if ($current_static !== null && $global_static !== null) {
            // Calcular diffValue igual que en la píldora de performance
            $current_inverted = 100 - $current_static;
            $global_inverted = 100 - $global_static;
            $diffValue = $current_inverted - $global_inverted;
            
            // Solo rojo cuando es SUPERIOR (> 0)
            if ($diffValue > 0) return 'text-danger';
        }
    } else if ($key == 'V2') {
        // V2 DCUE - Verificar que existan ambas métricas y que sean válidas
        $current_vb = $metrics_current['visio_bee'] ?? null;
        $global_vb = $metrics_global['visio_bee'] ?? null;
        if ($current_vb !== null && $global_vb !== null && $current_vb > $global_vb) return 'text-danger';
    } else if ($key == 'M') {
        // T1 - MEMORY
        if ($perf < -9.99) return 'text-danger';
    } else if ($key == 'SIN_VALOR') {
        // T2 - VALUELESS: mostrar en rojo si performance >= 2.5 (más VALUELESS es peor)
        if ($perf >= 2.5) return 'text-danger';
    } else if ($key == 'MF1' || $key == 'MF2' || $key == 'MF3') {
        // Mapear MF1->CR, MF2->CR_PALABRAS, MF3->CR_FIGURAS
        $prefix = ($key == 'MF1') ? 'CR' : (($key == 'MF2') ? 'CR_PALABRAS' : 'CR_FIGURAS');
        
        $current_correct = $metrics_current[$prefix.'_total_correct'] ?? 0;
        $current_time = $metrics_current[$prefix.'_average_time'] ?? null;
        $global_correct = $metrics_global[$prefix.'_total_correct'] ?? 0;
        $global_time = $metrics_global[$prefix.'_average_time'] ?? null;
        
        // Si no hay aciertos (tiempo es null) o si el desempeño es peor que el global, mostrar en rojo
        if ($current_time === null || ($current_correct < $global_correct && $current_time !== null && $global_time !== null && $current_time > $global_time)) {
            // Log para depuración
            \Log::debug('MF en rojo', [
                'key' => $key,
                'current_correct' => $current_correct,
                'current_time' => $current_time,
                'global_correct' => $global_correct,
                'global_time' => $global_time,
                'razon' => $current_time === null ? 'tiempo_null' : 'desempeno_inferior'
            ]);
            return 'text-danger';
        }
    } else if ($key == 'ERROR') {
        // Para ERROR, si el performance es > 4.99 (peor), mostramos en rojo
        if ($perf > 4.99) return 'text-danger';
    }
    
    return '';
}

/**
 * Determina si un bloque debe estar en rojo
 */
function getBlockClass($block, $metrics_current, $metrics_global, $metrics_performance, $is_in_first_three = false) {
    // NUEVA LÓGICA: Para primeros 3 tests, solo rojo si algún CURRENT del bloque está coloreado
    if ($is_in_first_three) {
        $video_result = $GLOBALS['video_result'] ?? null;
        $video_stats = $GLOBALS['video_stats'] ?? null;
        
        $hasRedCurrent = false;
        
        if ($block == 'ATTENTION') {
            // Verificar si A1, A2, A3 tienen N/A en CURRENT
            $hasRedCurrent = !isset($metrics_current['VPS']) || !isset($metrics_current['VRP']) || !isset($metrics_current['VRC']);
        } elseif ($block == 'TIREDNESS') {
            // Verificar si T1, T2 tienen N/A en CURRENT
            $hasRedCurrent = !isset($metrics_current['M']) || !isset($metrics_current['SIN_VALOR']);
        } elseif ($block == 'MENTAL_FATIGUE') {
            // Verificar si MF1, MF2, MF3, MF4 tienen N/A en CURRENT
            $mf1_na = !isset($metrics_current['CR_total_correct']) || !isset($metrics_current['CR_total_incorrect']) || $metrics_current['CR_average_time'] === null;
            $mf2_na = !isset($metrics_current['CR_PALABRAS_total_correct']) || !isset($metrics_current['CR_PALABRAS_total_incorrect']) || $metrics_current['CR_PALABRAS_average_time'] === null;
            $mf3_na = !isset($metrics_current['CR_FIGURAS_total_correct']) || !isset($metrics_current['CR_FIGURAS_total_incorrect']) || $metrics_current['CR_FIGURAS_average_time'] === null || $metrics_current['CR_FIGURAS_average_time'] > 1.5;
            $mf4_na = !isset($metrics_current['ERROR']);
            $hasRedCurrent = $mf1_na || $mf2_na || $mf3_na || $mf4_na;
        }
        
        if (!$hasRedCurrent) {
            return ''; // No hay valores rojos en CURRENT del bloque
        }
        
        // Para primeros 3 tests: SOLO contar N/A, no usar performance
        $count_na = 0;
        
        if ($block == 'ATTENTION') {
            // Contar N/A en A1, A2, A3
            if (!isset($metrics_current['VPS'])) $count_na++;
            if (!isset($metrics_current['VRP'])) $count_na++;  
            if (!isset($metrics_current['VRC'])) $count_na++;
        } elseif ($block == 'TIREDNESS') {
            // Contar N/A en T1, T2, V2
            if (!isset($metrics_current['M'])) $count_na++;
            if (!isset($metrics_current['SIN_VALOR'])) $count_na++;
            if (empty($video_result) || empty($video_result['images']['face'] ?? null) || !isset($video_stats['current']['visio_bee']) || $video_stats['current']['visio_bee'] <= 0) $count_na++;
        } elseif ($block == 'MENTAL_FATIGUE') {
            // Contar N/A en MF1, MF2, MF3, MF4
            if (!isset($metrics_current['CR_total_correct']) || !isset($metrics_current['CR_total_incorrect']) || $metrics_current['CR_average_time'] === null) $count_na++;
            if (!isset($metrics_current['CR_PALABRAS_total_correct']) || !isset($metrics_current['CR_PALABRAS_total_incorrect']) || $metrics_current['CR_PALABRAS_average_time'] === null) $count_na++;
            if (!isset($metrics_current['CR_FIGURAS_total_correct']) || !isset($metrics_current['CR_FIGURAS_total_incorrect']) || $metrics_current['CR_FIGURAS_average_time'] === null || $metrics_current['CR_FIGURAS_average_time'] > 1.5) $count_na++;
            if (!isset($metrics_current['ERROR'])) $count_na++;
        }
        
        // Para primeros 3 tests: título rojo SOLO si >= 3 elementos tienen N/A
        return ($count_na >= 3) ? 'text-danger' : '';
    }
    
    if ($block == 'ATTENTION') {
        // Si no hay video disponible, no mostramos en rojo
        // if (empty($GLOBALS['video_result']) || empty($GLOBALS['video_result']['images']['face'] ?? null)) {
        //     return '';
        // }
        
        // Contar cuántos títulos A están en rojo
        $count_red = 0;
        
        // Usar getTitleClass para verificar consistentemente si cada título estaría en rojo
        $a1_red = (getTitleClass('VPS', $metrics_current, $metrics_global, $metrics_performance['VPS'] ?? null, $is_in_first_three) == 'text-danger');
        $a2_red = (getTitleClass('VRP', $metrics_current, $metrics_global, $metrics_performance['VRP'] ?? null, $is_in_first_three) == 'text-danger');
        $a3_red = (getTitleClass('VRC', $metrics_current, $metrics_global, $metrics_performance['VRC'] ?? null, $is_in_first_three) == 'text-danger');
        
        if ($a1_red) $count_red++;
        if ($a2_red) $count_red++;
        if ($a3_red) $count_red++;
        
        // Log para diagnóstico
        \Log::debug('Verificación de Attention en rojo', [
            'a1_red' => $a1_red,
            'a2_red' => $a2_red, 
            'a3_red' => $a3_red,
            'count_red' => $count_red
        ]);
        
        if ($count_red >= 3) return 'text-danger';
    } else if ($block == 'TIREDNESS') {
        // Contar cuántos títulos T están en rojo (incluir V2)
        $count_red = 0;
        
        // Usar getTitleClass para verificar consistentemente si cada título estaría en rojo
        $t1_red = (getTitleClass('M', $metrics_current, $metrics_global, $metrics_performance['M'] ?? null, $is_in_first_three) == 'text-danger');
        $t2_red = (getTitleClass('SIN_VALOR', $metrics_current, $metrics_global, $metrics_performance['SIN_VALOR'] ?? null, $is_in_first_three) == 'text-danger');
        $v2_red = (getTitleClass('V2', $GLOBALS['video_stats']['current'] ?? [], $GLOBALS['video_stats']['average'] ?? [], null, $is_in_first_three) == 'text-danger');
        
        if ($t1_red) $count_red++;
        if ($t2_red) $count_red++;
        if ($v2_red) $count_red++;
        
        if ($count_red >= 3) return 'text-danger';
    } else if ($block == 'MENTAL_FATIGUE') {
        // Contar cuántos títulos MF están en rojo
        $count_red = 0;
        
        // Usar getTitleClass para verificar consistentemente si cada título estaría en rojo
        $mf1_red = (getTitleClass('MF1', $metrics_current, $metrics_global, $metrics_performance['CR'] ?? null, $is_in_first_three) == 'text-danger');
        $mf2_red = (getTitleClass('MF2', $metrics_current, $metrics_global, $metrics_performance['CR_PALABRAS'] ?? null, $is_in_first_three) == 'text-danger');
        $mf3_red = (getTitleClass('MF3', $metrics_current, $metrics_global, $metrics_performance['CR_FIGURAS'] ?? null, $is_in_first_three) == 'text-danger');
        $mf4_red = (getTitleClass('ERROR', $metrics_current, $metrics_global, $metrics_performance['ERROR'] ?? null, $is_in_first_three) == 'text-danger');
        
        if ($mf1_red) $count_red++;
        if ($mf2_red) $count_red++;
        if ($mf3_red) $count_red++;
        if ($mf4_red) $count_red++;
        
        if ($count_red >= 3) return 'text-danger';
    }
    
    return '';
}

/**
 * Calcula el número de bolas negras basado en el valor de darkness Z1 y Z1/Z2
 * @param float $darknessZ1 Valor de darkness Z1
 * @param float $z1z2 Valor de Z1/Z2
 * @return int|string Número de bolas (1-6) o 'n/a' si no aplica
 */
function calculateDarkCircles($darknessZ1, $z1z2) {
    if (is_null($darknessZ1) || is_null($z1z2) || !is_numeric($darknessZ1) || !is_numeric($z1z2)) {
        return 'n/a';
    }

    if ($darknessZ1 < 0) {
        // Para valores negativos (origen negativo)
        if ($z1z2 >= 0 && $z1z2 <= 9.99) return 6;
        if ($z1z2 >= 10 && $z1z2 <= 19.99) return 5;
        if ($z1z2 >= 20 && $z1z2 <= 29.99) return 4;
        if ($z1z2 >= 30 && $z1z2 <= 39.99) return 3;
        if ($z1z2 >= 40 && $z1z2 <= 49.99) return 2;
        if ($z1z2 >= 50) return 1;
    } else {
        // Para valores positivos (origen positivo)
        if ($z1z2 >= 0 && $z1z2 <= 9.99) return 1;
        if ($z1z2 >= 10 && $z1z2 <= 14.99) return 2;
        if ($z1z2 >= 15 && $z1z2 <= 19.99) return 3;
        if ($z1z2 >= 20 && $z1z2 <= 29.99) return 4;
        if ($z1z2 >= 30 && $z1z2 <= 39.99) return 5;
        if ($z1z2 >= 40) return 6;
    }
    
    return 'n/a';
}

/**
 * Genera el HTML para mostrar las bolas negras
 * @param int|string $count Número de bolas a mostrar o 'n/a'
 * @return string HTML con las bolas
 */
function renderDarkCircles($count) {
    if ($count === 'n/a' || !is_numeric($count)) {
        return 'n/a';
    }
    
    $html = '';
    for ($i = 0; $i < 6; $i++) {
        if ($i < $count) {
            $html .= '●'; // Bola llena (negra)
        } else {
            $html .= '○'; // Bola vacía
        }
    }
    return $html;
}
@endphp

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
// Inicializar datos necesarios para el script externo
window.appData = {
    intraweekStats: @json($intraweek_stats ?? []),
    intradayStats: @json($intraday_stats ?? []),
    monthsWithTests: @json($months_with_tests ?? []),
    yearsWithTests: @json($years_with_tests ?? []),
    translations: {
        weekdays: {
            monday: "{{ __('all.weekdays.monday') }}",
            tuesday: "{{ __('all.weekdays.tuesday') }}",
            wednesday: "{{ __('all.weekdays.wednesday') }}",
            thursday: "{{ __('all.weekdays.thursday') }}",
            friday: "{{ __('all.weekdays.friday') }}",
            saturday: "{{ __('all.weekdays.saturday') }}",
            sunday: "{{ __('all.weekdays.sunday') }}"
        },
        medianAciertos: "{{ __('all.median_aciertos') }} (%)"
    }
};
</script>
<script>
// Datos para depuración en consola
@if(isset($current_figure_debug))
    console.log('TEST ACTUAL - MF3 FIGURAS:', JSON.parse('{!! $current_figure_debug !!}'));
@endif

@if(isset($current_mentalspeed_debug))
    console.log('TEST ACTUAL - MF1 MENTAL SPEED:', JSON.parse('{!! $current_mentalspeed_debug !!}'));
@endif

@if(isset($current_wordgame_debug))
    console.log('TEST ACTUAL - MF2 WORD GAME:', JSON.parse('{!! $current_wordgame_debug !!}'));
@endif

@if(isset($debug_figure_data))
    console.log('DEPURACIÓN GLOBAL MF3 (CR_FIGURAS):', JSON.parse('{!! $debug_figure_data !!}'));
@endif

@if(isset($palabras_debug_data))
    console.log('DEPURACIÓN DETALLADA - MF2 (CR_PALABRAS) VALORES FORZADOS:', JSON.parse('{!! $palabras_debug_data !!}'));
@endif

@if(isset($figure_debug_data))
    console.log('DEPURACIÓN DETALLADA - MF3 (CR_FIGURAS) por juego:', JSON.parse('{!! $figure_debug_data !!}'));
@endif
</script>
<script>
// Script para ajustar las posiciones de los botones de cabecera
document.addEventListener('DOMContentLoaded', function() {
    // Obtener los botones/cabeceras existentes
    const headers = document.querySelectorAll('.row.mb-3 > div');
    if (headers.length >= 5) {
        // Ajustar las posiciones de los botones
        const currentButton = document.querySelector('.row.mb-3 div:nth-child(2)');
        if (currentButton) currentButton.style.paddingLeft = '15px';
        
        const lastButton = document.querySelector('.row.mb-3 div:nth-child(3)');
        if (lastButton) lastButton.style.paddingLeft = '15px';
        
        const globalButton = document.querySelector('.row.mb-3 div:nth-child(4)');
        if (globalButton) globalButton.style.paddingLeft = '15px';
    }
});
</script>

<script src="{{ asset('js/pages/results.js') }}?v={{ time() }}"></script>

@endsection