@extends('public.resultados.layout')
@section('title', 'Resultado por Categoria')
@section('content')

<div class="stats">
    <div class="stat">
        <div class="stat-num">{{ number_format($totalOps) }}</div>
        <div class="stat-lbl">Operadores</div>
    </div>
    <div class="stat">
        <div class="stat-num">{{ number_format($totalCategorias) }}</div>
        <div class="stat-lbl">Categorias</div>
    </div>
    <div class="stat green">
        <div class="stat-num">{{ number_format(count($grupos)) }}</div>
        <div class="stat-lbl">Categorias exibidas</div>
    </div>
</div>

<div class="card">
    <form method="GET" action="{{ route('public.resultados.resultado') }}" class="search-bar">
        <input type="text" name="q" value="{{ $busca }}"
               placeholder="Buscar callsign, nome ou clube..."
               oninput="filtrarTabela(this.value)">
        <select name="categoria" onchange="this.form.submit()">
            <option value="">— Todas as categorias —</option>
            @foreach($categorias as $cat)
                <option value="{{ $cat }}" {{ $categoria === $cat ? 'selected' : '' }}>{{ $cat }}</option>
            @endforeach
        </select>
        <button type="submit">🔍 Filtrar</button>
        @if($busca || $categoria)
            <a href="{{ route('public.resultados.resultado') }}"
               style="padding:.45rem .8rem;color:#666;text-decoration:none;font-size:.88rem">✕ Limpar</a>
        @endif
    </form>

    @forelse($grupos as $cat => $rows)
        <div class="cat-header">
            <span>{{ $cat }}</span>
            <span>{{ count($rows) }} operador(es)</span>
        </div>
        <table>
            <thead>
                <tr>
                    <th style="width:40px">RK</th>
                    <th>Callsign</th>
                    <th>Nome</th>
                    <th>Clube</th>
                    <th style="text-align:right">QSOs</th>
                    <th style="text-align:right">Pontos</th>
                    <th style="text-align:right">Multi</th>
                    <th style="text-align:right">Final Score</th>
                    <th style="text-align:right">Redução</th>
                </tr>
            </thead>
            <tbody>
                @foreach($rows as $r)
                    <tr class="{{ $r->rk == 1 ? 'ouro' : ($r->rk == 2 ? 'prata' : ($r->rk == 3 ? 'bronze' : '')) }}">
                        <td class="rk">
                            {{ $r->rk == 1 ? '🥇' : ($r->rk == 2 ? '🥈' : ($r->rk == 3 ? '🥉' : $r->rk)) }}
                        </td>
                        <td class="call">
                            <a href="{{ route('public.resultados.callsign', ['callsign' => $r->callsign]) }}"
                               style="color:#1B4F8C;text-decoration:none">{{ $r->callsign }}</a>
                        </td>
                        <td>{{ $r->nome }}</td>
                        <td>{{ $r->club }}</td>
                        <td style="text-align:right">{{ number_format($r->total_qsos_validos) }}</td>
                        <td style="text-align:right">{{ number_format($r->total_pontos) }}</td>
                        <td style="text-align:right">{{ ($r->total_multi_um + $r->total_multi_dois + $r->total_multi_tres) }}</td>
                        <td class="score">{{ number_format($r->final_score) }}</td>
                        <td style="text-align:right;color:{{ $r->percentual_reducao > 10 ? '#c62828' : '#555' }}">
                            {{ number_format($r->percentual_reducao, 1) }}%
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>
        <div style="margin-bottom:1.5rem"></div>
    @empty
        <p style="color:#888;text-align:center;padding:2rem">Nenhum resultado encontrado.</p>
    @endforelse
</div>

@push('scripts')
<script>
function filtrarTabela(termo) {
    // Filtro ao vivo por callsign/nome nas linhas da tabela
    const lower = termo.toLowerCase();
    document.querySelectorAll('tbody tr').forEach(tr => {
        const txt = tr.textContent.toLowerCase();
        tr.style.display = (!lower || txt.includes(lower)) ? '' : 'none';
    });
}
</script>
@endpush
@endsection