@extends('layouts.app')
@section('content')
<style>
.gxr{--bg:#07111b;--card:#0b1926;--card2:#0d2030;--line:#1b3447;--txt:#eef7ff;--muted:#8196a8;--green:#12e979;max-width:1320px;margin:0 auto;padding:22px;color:var(--txt)}
.gxr *{box-sizing:border-box}.gxr h1{font-size:26px;font-weight:900;margin:0}.gxr .sub{color:var(--muted);margin:4px 0 18px}
.gxr-panel{background:linear-gradient(180deg,var(--card),#081521);border:1px solid var(--line);border-radius:14px;padding:18px;box-shadow:0 12px 32px rgba(0,0,0,.18)}
.gxr-grid{display:grid;grid-template-columns:1.05fr 1.95fr;gap:14px}.gxr label{font-size:12px;font-weight:800;color:#cfe0ed;margin-bottom:6px}
.gxr .form-control,.gxr .form-select{background:#102334!important;border:1px solid #27445a!important;color:#fff!important;min-height:42px}.gxr .form-select option{background:#102334;color:#fff}
.gxr-options{display:grid;grid-template-columns:1fr 1fr;gap:8px}.gxr-opt{display:flex;align-items:center;gap:9px;background:#0c1c29;border:1px solid #1e384c;border-radius:8px;padding:9px 10px;font-size:12px}
.gxr-opt input{accent-color:#12e979}.gxr-title{font-size:13px;font-weight:900;margin:16px 0 9px}.gxr-preview{min-height:540px;background:#07131e;border:1px solid #1d374a;border-radius:12px;padding:18px}
.gxr-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-bottom:14px}.gxr-kpi{background:#0d2130;border:1px solid #244459;border-radius:10px;padding:13px}.gxr-kpi b{display:block;font-size:22px}.gxr-kpi span{font-size:10px;color:#8ea5b6;text-transform:uppercase}
.gxr-doc{border:1px solid #29475a;border-radius:10px;background:linear-gradient(180deg,#0a1a27,#07131e);padding:22px;min-height:400px}.gxr-dochead{display:flex;justify-content:space-between;border-bottom:1px solid #315065;padding-bottom:14px}.gxr-dochead strong{font-size:22px}.gxr-dochead small{color:#89a0b2}.gxr-btn{background:#12c96b;border:1px solid #19ef80;color:#04140c;font-weight:900}.gxr-btn:hover{background:#19ef80;color:#04140c}
@media(max-width:950px){.gxr-grid{grid-template-columns:1fr}.gxr-kpis{grid-template-columns:1fr 1fr}}
</style>

<div class="gxr">
  <h1>RELATÓRIOS DE EVENTO</h1>
  <div class="sub">Gere um documento personalizado com os dados registrados no GIGAX Arena.</div>

  <form method="GET" action="{{ route('admin.event-reports.show') }}" id="gxrForm">
    <div class="gxr-grid">
      <section class="gxr-panel">
        <div class="gxr-title" style="margin-top:0">FILTROS DO RELATÓRIO</div>
        <div class="mb-3">
          <label>Evento / partida</label>
          <select name="event_id" class="form-select">
            <option value="">Todos os eventos</option>
            @foreach($events as $event)
              @php($label=$event['title']??$event['name']??('#'.($event['id']??'?')))
              <option value="{{ $event['id'] }}">#{{ $event['id'] }} — {{ $label }} {{ !empty($event['training_type']) ? ' | '.$event['training_type'] : '' }}</option>
            @endforeach
          </select>
        </div>
        <div class="mb-3"><label>Nome do relatório</label><input name="event_name" class="form-control" placeholder="Ex.: Season 1 — Relatório oficial"></div>
        <div class="row g-2">
          <div class="col-6"><label>Data inicial</label><input type="date" name="date_from" class="form-control"></div>
          <div class="col-6"><label>Data final</label><input type="date" name="date_to" class="form-control"></div>
        </div>

        <div class="gxr-title d-flex justify-content-between align-items-center"><span>INCLUIR NO DOCUMENTO</span><span><button type="button" class="btn btn-sm btn-outline-success" onclick="gxrToggleSections(true)">Marcar todas</button> <button type="button" class="btn btn-sm btn-outline-secondary" onclick="gxrToggleSections(false)">Desmarcar todas</button></span></div>
        <div class="gxr-options">
          @php($sectionOptions=['summary'=>'Resumo geral','players'=>'Jogadores','matches'=>'Partidas','queue'=>'Fila / Lobby','ready'=>'Ready-check','veto'=>'Vetos / Mapas','ac'=>'Anti-Cheat','ts3'=>'TeamSpeak','results'=>'Resultados','incidents'=>'Incidentes','admin'=>'Ações administrativas','timeline'=>'Linha do tempo'])
          @foreach($sectionOptions as $value=>$label)
          <label class="gxr-opt"><input class="gxr-section-check" type="checkbox" name="sections[]" value="{{ $value }}" checked> <span>{{ $label }}</span></label>
          @endforeach
        </div>

        <div class="d-grid gap-2 mt-3">
          <button class="btn gxr-btn btn-lg" type="submit">Gerar relatório</button>
          <a href="{{ url('/admin') }}" class="btn btn-outline-light">Voltar</a>
        </div>
      </section>

      <section class="gxr-panel">
        <div class="gxr-title" style="margin-top:0">PRÉ-VISUALIZAÇÃO</div>
        <div class="gxr-preview">
          <div class="gxr-kpis">
            <div class="gxr-kpi"><b>{{ count($events) }}</b><span>Eventos encontrados</span></div>
            <div class="gxr-kpi"><b>AC</b><span>Anti-Cheat</span></div>
            <div class="gxr-kpi"><b>TS3</b><span>TeamSpeak</span></div>
            <div class="gxr-kpi"><b>PDF</b><span>Documento oficial</span></div>
          </div>
          <div class="gxr-doc">
            <div class="gxr-dochead">
              <div><strong>GIGA PROTECTION</strong><br><small>RELATÓRIO DE EVENTO</small></div>
              <small>Documento administrativo<br>GIGAX Arena</small>
            </div>
            <div style="padding:28px 0;color:#8ea5b6">
              Selecione um evento ou período e clique em <b style="color:#fff">Gerar relatório</b>.<br><br>
              O documento mostrará partidas, jogadores, ações registradas, Anti-Cheat, TeamSpeak, ready-check, vetos, resultados e a linha do tempo.
            </div>
          </div>
        </div>
      </section>
    </div>
  </form>
</div>
<script>
function gxrToggleSections(v){document.querySelectorAll('.gxr-section-check').forEach(e=>e.checked=v);}
document.getElementById('gxrForm')?.addEventListener('submit',function(e){if(!document.querySelector('.gxr-section-check:checked')){e.preventDefault();alert('Selecione pelo menos uma seção.');}});
</script>
@endsection