@extends('layouts.app')
@section('title','Relatório Final')
@section('content')
@include('components.seletor-contest')


<h2 style="margin-bottom:1rem">📊 Relatório Final de Contatos QSOs</h2>

{{-- Cards de totais --}}
<div class="stats-grid" style="max-width:580px;margin-bottom:1.5rem">
    <div class="stat-card stat-card-green">
        <div class="stat-number">{{ number_format($totalConfirmados) }}</div>
        <div class="stat-label">Contatos Confirmados</div>
    </div>
    <div class="stat-card stat-card-red">
        <div class="stat-number">{{ number_format($totalNaoConfirmados) }}</div>
        <div class="stat-label">Não Confirmados</div>
    </div>
    <div class="stat-card">
        <div class="stat-number">{{ number_format($totalGeral) }}</div>
        <div class="stat-label">Total Geral</div>
    </div>
</div>

{{-- Abas + Busca --}}
<form method="GET" action="{{ route('relatorios.relatorio-final') }}"
      style="display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin-bottom:1.25rem">

    {{-- Abas como botões --}}
    <div style="display:flex;border:1px solid #ddd;border-radius:var(--radius);overflow:hidden">
        <button type="submit" name="aba" value="confirmados"
                style="padding:.4rem 1rem;font-size:.88rem;border:none;cursor:pointer;
                       background:{{ $aba==='confirmados' ? 'var(--blue)' : '#f5f5f5' }};
                       color:{{ $aba==='confirmados' ? '#fff' : '#333' }}">
            ✅ Confirmados ({{ number_format($totalConfirmados) }})
        </button>
        <button type="submit" name="aba" value="nao_confirmados"
                style="padding:.4rem 1rem;font-size:.88rem;border:none;cursor:pointer;
                       border-left:1px solid #ddd;
                       background:{{ $aba==='nao_confirmados' ? '#C62828' : '#f5f5f5' }};
                       color:{{ $aba==='nao_confirmados' ? '#fff' : '#333' }}">
            ❌ Não Confirmados ({{ number_format($totalNaoConfirmados) }})
        </button>
    </div>

    <input type="text" name="q" value="{{ $busca }}"
           placeholder="Buscar call sent ou call rcvd..."
           style="padding:.4rem .7rem;border:1px solid #ddd;border-radius:var(--radius);
                  font-size:.88rem;min-width:240px">
    <button type="submit" class="btn btn-secondary" style="padding:.4rem .9rem">Buscar</button>
    @if($busca)
        <a href="{{ route('relatorios.relatorio-final', ['aba' => $aba]) }}"
           class="btn btn-secondary" style="padding:.4rem .9rem">✕ Limpar</a>
    @endif
</form>

@if(count($grupos) === 0)
    <p style="color:#aaa;text-align:center;padding:2rem">Nenhum contato encontrado.</p>
@else

@php
    $totalAba = 0;
    foreach ($grupos as $regs) { $totalAba += count($regs); }
@endphp
<p style="font-size:.85rem;color:var(--muted);margin-bottom:1rem">
    Exibindo <strong>{{ number_format($totalAba) }}</strong> registro(s) —
    {{ $aba === 'confirmados' ? 'Contatos Confirmados' : 'Contatos Não Confirmados' }}
    @if($busca) para <strong>{{ $busca }}</strong> @endif
</p>

@foreach($grupos as $callSent => $regs)
<div style="margin-bottom:1.75rem">
    <div style="background:{{ $aba==='confirmados' ? '#2E7D32' : '#C62828' }};color:#fff;
                padding:.45rem .75rem;font-weight:bold;font-size:.88rem;
                border-radius:var(--radius) var(--radius) 0 0;
                display:flex;justify-content:space-between">
        <span>Call Sent: {{ $callSent }}</span>
        <span style="font-weight:normal;opacity:.85;font-size:.8rem">{{ count($regs) }} contato(s)</span>
    </div>
    <table style="width:100%;border-collapse:collapse;font-size:.79rem">
        <thead>
            <tr style="background:#f0f0f0">
                <th style="padding:.3rem .5rem;border:1px solid #ccc">ID</th>
                <th style="padding:.3rem .5rem;border:1px solid #ccc">Call Sent</th>
                <th style="padding:.3rem .5rem;border:1px solid #ccc">Call Rcvd</th>
                <th style="padding:.3rem .5rem;border:1px solid #ccc">Exch Sent</th>
                <th style="padding:.3rem .5rem;border:1px solid #ccc">Exch Rcvd</th>
                <th style="padding:.3rem .5rem;border:1px solid #ccc;white-space:nowrap">Data/Hora</th>
                <th style="padding:.3rem .5rem;border:1px solid #ccc">Potência</th>
                <th style="padding:.3rem .5rem;border:1px solid #ccc">Banda</th>
                <th style="padding:.3rem .5rem;border:1px solid #ccc">Modo</th>
                <th style="padding:.3rem .5rem;border:1px solid #ccc">Frequência</th>
                <th style="padding:.3rem .5rem;border:1px solid #ccc">Motivo</th>
            </tr>
        </thead>
        <tbody>
            @foreach($regs as $r)
            <tr style="background:#fff">
                <td style="padding:.25rem .5rem;border:1px solid #e8e8e8;color:#aaa">{{ $r->id }}</td>
                <td style="padding:.25rem .5rem;border:1px solid #e8e8e8"><strong>{{ $r->call_sent }}</strong></td>
                <td style="padding:.25rem .5rem;border:1px solid #e8e8e8">{{ $r->call_rcvd }}</td>
                <td style="padding:.25rem .5rem;border:1px solid #e8e8e8">{{ $r->exch_sent }}</td>
                <td style="padding:.25rem .5rem;border:1px solid #e8e8e8">{{ $r->exch_rcvd }}</td>
                <td style="padding:.25rem .5rem;border:1px solid #e8e8e8;white-space:nowrap">{{ $r->date_time }}</td>
                <td style="padding:.25rem .5rem;border:1px solid #e8e8e8">{{ $r->category_power }}</td>
                <td style="padding:.25rem .5rem;border:1px solid #e8e8e8">{{ $r->band }}</td>
                <td style="padding:.25rem .5rem;border:1px solid #e8e8e8">{{ $r->category_mode }}</td>
                <td style="padding:.25rem .5rem;border:1px solid #e8e8e8">{{ $r->frequency }}</td>
                <td style="padding:.25rem .5rem;border:1px solid #e8e8e8;font-size:.72rem;
                    color:{{ $r->confirmado ? '#2E7D32' : '#C62828' }}">
                    {{ $r->motivo ?? 'CONFIRMED' }}
                </td>
            </tr>
            @endforeach
        </tbody>
        <tfoot>
            <tr style="background:#f5f5f5;font-weight:bold">
                <td colspan="11" style="padding:.35rem .5rem;border:1px solid #ddd;font-size:.8rem">
                    Total de contatos para {{ $callSent }}: {{ count($regs) }}
                </td>
            </tr>
        </tfoot>
    </table>
</div>
@endforeach

<div style="background:#e8eef7;border-radius:var(--radius);padding:.75rem 1rem;
            font-weight:bold;font-size:.9rem;margin-top:.5rem;color:var(--blue)">
    Total geral absoluto de contatos (Confirmados + Não Confirmados):
    <strong>{{ number_format($totalGeral) }}</strong>
</div>

@endif
@endsection