@extends('admin.layouts.app')
@section('title', 'Participantes — ' . $concurso->nombre)

@section('styles')
<style>
/* ── Tokens ── */
:root { --cc-blue:#1a237e; --cc-gold:#ffe082; }

/* ── Hero ── */
.part-hero {
    background: linear-gradient(135deg,#0d1b6e 0%,#1a237e 45%,#4527a0 100%);
    border-radius: 20px; padding: 22px 28px;
    margin-bottom: 24px; position: relative; overflow: hidden;
}
.part-hero::after {
    content:''; position:absolute; right:-50px; top:-50px;
    width:200px; height:200px; border-radius:50%;
    background:rgba(255,255,255,.04);
}

/* ── Stat chips ── */
.stat-strip { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:20px; }
.stat-chip {
    flex:1; min-width:130px;
    background:#fff;
    border:1.5px solid #e8edf5;
    border-radius:14px;
    padding:14px 18px;
    display:flex; align-items:center; gap:12px;
    box-shadow:0 2px 10px rgba(0,0,0,.05);
    transition:transform .18s;
}
.stat-chip:hover { transform:translateY(-2px); }
.chip-icon {
    width:40px; height:40px; border-radius:12px;
    display:flex; align-items:center; justify-content:center;
    font-size:18px; flex-shrink:0;
}
.chip-num { font-size:1.5rem; font-weight:800; line-height:1; }
.chip-lbl { font-size:.7rem; color:#94a3b8; font-weight:700; text-transform:uppercase; letter-spacing:.4px; margin-top:2px; }

/* ── Search + controls bar ── */
.controls-bar {
    background:#fff; border-radius:14px;
    border:1.5px solid #e2e8f0;
    padding:10px 16px;
    display:flex; align-items:center; gap:10px;
    margin-bottom:18px;
    box-shadow:0 2px 8px rgba(0,0,0,.04);
    flex-wrap:wrap;
}
.controls-bar input {
    border:none; outline:none; background:transparent;
    font-size:.88rem; flex:1; color:#334155; min-width:180px;
}

/* ── Tabla ── */
.tabla-wrap {
    background:#fff; border-radius:18px;
    border:1.5px solid #e8edf5;
    box-shadow:0 2px 16px rgba(0,0,0,.06);
    overflow:hidden;
}
.tabla-results {
    width:100%; border-collapse:collapse;
    font-size:12.5px;
}
.tabla-results thead th {
    background:var(--cc-blue); color:var(--cc-gold);
    padding:10px 8px; text-align:center;
    font-size:11px; font-weight:800; letter-spacing:.4px;
    white-space:nowrap; border:none;
}
.tabla-results thead th.th-left { text-align:left; }
.tabla-results tbody td {
    padding:8px 8px; text-align:center;
    border-bottom:1px solid #f1f5f9; vertical-align:middle;
}
.tabla-results tbody td.td-left { text-align:left; }
.tabla-results tbody tr:last-child td { border-bottom:none; }
.tabla-results tbody tr:hover { background:#fafbff; }
.tabla-results tbody tr.row-clas { background:#fffde7; }
.tabla-results tbody tr.row-clas:hover { background:#fff9c4; }

/* ── Celda nombre ── */
.nombre-cell { font-weight:700; color:#1a237e; }

/* ── Respuestas ── */
.resp-ok  { color:#16a34a; font-weight:800; font-size:12px; }
.resp-mal { color:#dc2626; font-weight:700; font-size:12px; }
.resp-none{ color:#c0cbd8; }

/* ── Nota pill ── */
.nota-pill {
    display:inline-block; padding:3px 10px; border-radius:50px;
    font-size:11.5px; font-weight:800; min-width:44px; text-align:center;
    color:#fff;
}

/* ── Rank badge ── */
.rank-1 { background:linear-gradient(135deg,#f9a825,#ff8f00); color:#fff; }
.rank-2 { background:#94a3b8; color:#fff; }
.rank-3 { background:#a1887f; color:#fff; }
.rank-badge {
    display:inline-flex; align-items:center; justify-content:center;
    width:26px; height:26px; border-radius:8px;
    font-size:11px; font-weight:800;
}

/* ── Sección gen badges ── */
.gen-f { color:#db2777; font-weight:800; }
.gen-m { color:#2563eb; font-weight:800; }

/* ── Acción btns ── */
.act-btn {
    display:inline-flex; align-items:center; justify-content:center;
    width:30px; height:30px; border-radius:8px;
    border:1.5px solid; text-decoration:none;
    transition:all .15s; cursor:pointer;
}

/* ── Empty ── */
.empty-row td { padding:48px 20px !important; }

/* ── Modal animaciones ── */
@keyframes spin { to { transform:rotate(360deg); } }
.modal-tab { transition:color .2s; }
</style>
@endsection


@section('content')

{{-- ═══════ HERO ═══════ --}}
<div class="part-hero">
    <div style="display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px;position:relative;z-index:1;">
        <div style="display:flex;align-items:center;gap:14px;">
            <a href="{{ route('admin.concursos.index') }}"
               style="width:40px;height:40px;border-radius:12px;background:rgba(255,255,255,.12);border:1.5px solid rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;color:#fff;text-decoration:none;transition:background .2s;flex-shrink:0;"
               onmouseover="this.style.background='rgba(255,255,255,.22)'" onmouseout="this.style.background='rgba(255,255,255,.12)'">
                <i class="bi bi-arrow-left"></i>
            </a>
            <div>
                <div style="font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:1.2px;color:rgba(255,255,255,.5);margin-bottom:4px;">
                    <i class="bi bi-trophy-fill me-1" style="color:var(--cc-gold);"></i>{{ $concurso->sigla ?? 'Concurso' }} · {{ $concurso->anio }}
                </div>
                <h1 style="color:#fff;font-size:1.35rem;font-weight:800;margin:0 0 2px;letter-spacing:-.4px;">
                    <i class="bi bi-people-fill me-2" style="color:var(--cc-gold);"></i>Participantes
                </h1>
                <p style="color:rgba(255,255,255,.6);margin:0;font-size:.82rem;">{{ $concurso->nombre }}</p>
            </div>
        </div>

        <div style="display:flex;gap:10px;flex-wrap:wrap;">
            @if($concurso->estado === 'borrador')
            {{-- Concurso en borrador: mostrar botón Publicar --}}
            <a href="javascript:void(0)"
               onclick="confirmarPublicar('{{ route('admin.concursos.publicar', $concurso) }}')"
               style="display:inline-flex;align-items:center;gap:7px;padding:10px 18px;background:rgba(74,222,128,.15);border:1.5px solid rgba(74,222,128,.35);color:#4ade80;border-radius:12px;font-weight:700;font-size:.85rem;text-decoration:none;transition:all .2s;"
               onmouseover="this.style.background='rgba(74,222,128,.25)'" onmouseout="this.style.background='rgba(74,222,128,.15)'">
                <i class="bi bi-megaphone-fill"></i> Publicar Resultados
            </a>
            @else
            {{-- Ya publicado: Ver resultado + botón para actualizar enlace --}}
            <a href="{{ route('resultado.show', $concurso->slug) }}" target="_blank"
               style="display:inline-flex;align-items:center;gap:7px;padding:10px 18px;background:rgba(74,222,128,.15);border:1.5px solid rgba(74,222,128,.35);color:#4ade80;border-radius:12px;font-weight:700;font-size:.85rem;text-decoration:none;transition:all .2s;">
                <i class="bi bi-eye-fill"></i> Ver Público
            </a>
            <a href="javascript:void(0)"
               onclick="confirmarActualizarEnlace('{{ route('admin.concursos.publicar', $concurso) }}')"
               style="display:inline-flex;align-items:center;gap:7px;padding:10px 16px;background:rgba(255,224,130,.1);border:1.5px solid rgba(255,224,130,.3);color:#ffe082;border-radius:12px;font-weight:700;font-size:.83rem;text-decoration:none;transition:all .2s;"
               onmouseover="this.style.background='rgba(255,224,130,.2)'" onmouseout="this.style.background='rgba(255,224,130,.1)'">
                <i class="bi bi-link-45deg"></i> Actualizar Enlace
            </a>
            @endif

            <button onclick="abrirModalMasivo()"
               style="display:inline-flex;align-items:center;gap:7px;padding:10px 18px;background:rgba(255,255,255,.12);border:1.5px solid rgba(255,255,255,.3);color:#fff;border-radius:12px;font-weight:700;font-size:.85rem;cursor:pointer;transition:all .2s;"
               onmouseover="this.style.background='rgba(255,255,255,.22)'" onmouseout="this.style.background='rgba(255,255,255,.12)'">
                <i class="bi bi-cloud-upload-fill"></i> Agregar Masivo
            </button>
            <a href="{{ route('admin.concursos.participantes.create', $concurso) }}"
               style="display:inline-flex;align-items:center;gap:7px;padding:10px 20px;background:linear-gradient(135deg,#ffe082,#ffca28);color:#1a237e;border-radius:12px;font-weight:800;font-size:.85rem;text-decoration:none;box-shadow:0 4px 16px rgba(255,202,40,.3);transition:all .2s;"
               onmouseover="this.style.transform='translateY(-2px)'" onmouseout="this.style.transform=''">
                <i class="bi bi-person-plus-fill"></i> Agregar Participante
            </a>
        </div>
    </div>
</div>

{{-- ═══════ STATS ═══════ --}}
@php
    $totalP     = $participantes->count();
    $clasif     = $participantes->where('clasificado', true)->count();
    $maxNota    = $participantes->max('nota_calculada') ?? 0;
    $notaMax    = $concurso->puntajeMaximo();
    $promedio   = $totalP > 0 ? round($participantes->avg('nota_calculada'), 1) : 0;
@endphp
<div class="stat-strip">
    <div class="stat-chip">
        <div class="chip-icon" style="background:#eff6ff;"><i class="bi bi-people-fill" style="color:#2563eb;"></i></div>
        <div>
            <div class="chip-num" style="color:#1d4ed8;">{{ $totalP }}</div>
            <div class="chip-lbl">Participantes</div>
        </div>
    </div>
    <div class="stat-chip">
        <div class="chip-icon" style="background:#fffbeb;"><i class="bi bi-star-fill" style="color:#d97706;"></i></div>
        <div>
            <div class="chip-num" style="color:#b45309;">{{ $clasif }}</div>
            <div class="chip-lbl">Clasificados</div>
        </div>
    </div>
    <div class="stat-chip">
        <div class="chip-icon" style="background:#f0fdf4;"><i class="bi bi-bar-chart-fill" style="color:#16a34a;"></i></div>
        <div>
            <div class="chip-num" style="color:#15803d;">{{ $maxNota }}</div>
            <div class="chip-lbl">Puntaje más alto</div>
        </div>
    </div>
    <div class="stat-chip">
        <div class="chip-icon" style="background:#fdf4ff;"><i class="bi bi-calculator-fill" style="color:#9333ea;"></i></div>
        <div>
            <div class="chip-num" style="color:#7e22ce;">{{ $notaMax }}</div>
            <div class="chip-lbl">Puntaje máximo</div>
        </div>
    </div>
    <div class="stat-chip">
        <div class="chip-icon" style="background:#fff7ed;"><i class="bi bi-graph-up" style="color:#ea580c;"></i></div>
        <div>
            <div class="chip-num" style="color:#c2410c;">{{ $promedio }}</div>
            <div class="chip-lbl">Promedio</div>
        </div>
    </div>
</div>

{{-- ═══════ CONTROLES ═══════ --}}
<div class="controls-bar">
    <i class="bi bi-search" style="color:#94a3b8;"></i>
    <input type="text" id="searchPart" placeholder="Buscar por nombre, sección..." oninput="filtrarParticipantes()">
    <select id="filtroClasif" class="fc-input" style="border:1.5px solid #e2e8f0;border-radius:8px;padding:5px 10px;font-size:.83rem;background:#fafcff;width:auto;min-width:150px;" onchange="filtrarParticipantes()">
        <option value="">Todos</option>
        <option value="clasif">Solo clasificados ⭐</option>
        <option value="no">No clasificados</option>
    </select>
    <span id="totalVisible" style="font-size:12px;color:#94a3b8;white-space:nowrap;margin-left:auto;"></span>
</div>

{{-- ═══════ TABLA ═══════ --}}
<div class="tabla-wrap">
    <div style="overflow-x:auto;">
        <table class="tabla-results" id="tablaParticipantes">
            <thead>
                <tr>
                    <th style="width:38px;">#</th>
                    <th class="th-left" style="min-width:200px;">Apellidos y Nombres</th>
                    <th>Secc.</th>
                    <th>Gén.</th>
                    @for($i = 1; $i <= $concurso->num_preguntas; $i++)
                    <th>
                        P{{ $i }}
                        <div style="font-size:9px;color:#ffe082;font-weight:600;margin-top:1px;">
                            {{ $concurso->preguntas->firstWhere('numero', $i)?->respuesta_correcta ?? '?' }}
                        </div>
                    </th>
                    @endfor
                    <th style="min-width:72px;">NOTA</th>
                    <th>Tiempo</th>
                    <th class="th-left" style="min-width:110px;">Observación</th>
                    <th style="min-width:90px;">Acciones</th>
                </tr>
            </thead>
            <tbody>
                @forelse($participantes as $rank => $p)
                @php
                    $respIndexed  = $p->respuestas->keyBy('pregunta_numero');
                    $preguntasMap = $concurso->preguntas->keyBy('numero');
                    $esClas       = $p->clasificado ?? false;
                    $nota         = $p->nota_calculada;
                    $pct          = $notaMax > 0 ? ($nota / $notaMax) * 100 : 0;
                    $notaColor    = $pct >= 80 ? '#1a237e' : ($pct >= 50 ? '#0288d1' : ($pct >= 30 ? '#00897b' : '#64748b'));
                @endphp
                <tr class="{{ $esClas ? 'row-clas' : '' }}" data-nombre="{{ strtolower($p->apellidos . ' ' . $p->nombres) }}" data-clasif="{{ $esClas ? 'clasif' : 'no' }}">

                    {{-- Ranking --}}
                    <td>
                        @if($rank === 0)
                            <span class="rank-badge rank-1">1</span>
                        @elseif($rank === 1)
                            <span class="rank-badge rank-2">2</span>
                        @elseif($rank === 2)
                            <span class="rank-badge rank-3">3</span>
                        @else
                            <span style="color:#94a3b8;font-size:12px;">{{ $rank + 1 }}</span>
                        @endif
                    </td>

                    {{-- Nombre --}}
                    <td class="td-left nombre-cell">
                        {{ strtoupper($p->apellidos) }} {{ $p->nombres }}
                        <div style="display:flex;flex-wrap:wrap;gap:3px;margin-top:3px;">
                            @if($esClas)
                            <span style="background:#fffde7;color:#f59e0b;border:1px solid #fde68a;padding:1px 6px;border-radius:50px;font-size:9px;font-weight:800;">
                                <i class="bi bi-star-fill"></i> Clas.
                            </span>
                            @endif
                            @if($p->clasificado_mujer ?? false)
                            <span style="background:#fdf2f8;color:#db2777;border:1px solid #fbcfe8;padding:1px 6px;border-radius:50px;font-size:9px;font-weight:800;">♀ Clas.</span>
                            @endif
                            @if($p->clasificado_varon ?? false)
                            <span style="background:#eff6ff;color:#2563eb;border:1px solid #bfdbfe;padding:1px 6px;border-radius:50px;font-size:9px;font-weight:800;">♂ Clas.</span>
                            @endif
                            @if($p->clasificado_general ?? false)
                            <span style="background:#f0fdf4;color:#16a34a;border:1px solid #bbf7d0;padding:1px 6px;border-radius:50px;font-size:9px;font-weight:800;">Gral.</span>
                            @endif
                        </div>
                    </td>

                    {{-- Sección --}}
                    <td>
                        <span style="background:#f1f5f9;color:#334155;border:1px solid #e2e8f0;padding:2px 8px;border-radius:6px;font-size:11px;font-weight:700;">
                            {{ $p->grado }}{{ $p->seccion }}
                        </span>
                    </td>

                    {{-- Género --}}
                    <td>
                        @if($p->genero === 'F') <span class="gen-f">♀</span>
                        @elseif($p->genero === 'M') <span class="gen-m">♂</span>
                        @else <span class="resp-none">—</span>
                        @endif
                    </td>

                    {{-- Respuestas --}}
                    @for($i = 1; $i <= $concurso->num_preguntas; $i++)
                    @php
                        $resp    = $respIndexed->get($i);
                        $corrPrg = $preguntasMap->get($i);
                        $alumVal = $resp ? trim((string)$resp->respuesta_alumno) : null;
                        $corrVal = $corrPrg ? trim((string)$corrPrg->respuesta_correcta) : null;
                        $esCorr  = ($alumVal !== null && $alumVal !== '' && $alumVal === $corrVal);
                    @endphp
                    <td>
                        @if($alumVal === null || $alumVal === '')
                            <span class="resp-none">—</span>
                        @elseif($esCorr)
                            <span class="resp-ok" title="Correcto">{{ $alumVal }} ✓</span>
                        @else
                            <span class="resp-mal" title="Correcto: {{ $corrVal }}">{{ $alumVal }} ✗</span>
                        @endif
                    </td>
                    @endfor

                    {{-- Nota --}}
                    <td>
                        <span class="nota-pill" style="background:{{ $notaColor }};">{{ $nota }}</span>
                        <div style="font-size:9px;color:#94a3b8;margin-top:2px;">/ {{ $notaMax }}</div>
                    </td>

                    {{-- Tiempo --}}
                    <td>
                        @if($p->tiempo)
                        <span style="font-size:11px;color:#64748b;"><i class="bi bi-clock me-1"></i>{{ substr($p->tiempo,0,5) }}</span>
                        @else <span class="resp-none">—</span>
                        @endif
                    </td>

                    {{-- Observación --}}
                    <td class="td-left" style="font-size:11px;color:#64748b;max-width:120px;word-break:break-word;">
                        {{ $p->observacion ?? '—' }}
                    </td>

                    {{-- Acciones --}}
                    <td>
                        <div style="display:flex;gap:5px;justify-content:center;">
                            <a href="{{ route('admin.concursos.participantes.edit', [$concurso, $p]) }}"
                               class="act-btn" style="color:#1d4ed8;border-color:#bfdbfe;background:#eff6ff;" title="Editar">
                                <i class="bi bi-pencil-fill" style="font-size:12px;"></i>
                            </a>
                            <form action="{{ route('admin.concursos.participantes.destroy', [$concurso, $p]) }}"
                                  method="POST" onsubmit="return confirm('¿Eliminar a {{ addslashes($p->nombres) }}?')">
                                @csrf @method('DELETE')
                                <button type="submit" class="act-btn" style="color:#dc2626;border-color:#fecaca;background:#fef2f2;" title="Eliminar">
                                    <i class="bi bi-trash3-fill" style="font-size:12px;"></i>
                                </button>
                            </form>
                        </div>
                    </td>
                </tr>
                @empty
                <tr class="empty-row">
                    <td colspan="{{ 9 + $concurso->num_preguntas }}" style="text-align:center;padding:48px 20px;">
                        <div style="width:72px;height:72px;border-radius:50%;background:#f1f5f9;display:flex;align-items:center;justify-content:center;margin:0 auto 16px;">
                            <i class="bi bi-person-x" style="font-size:32px;color:#94a3b8;"></i>
                        </div>
                        <div style="font-weight:700;color:#334155;margin-bottom:6px;">Sin participantes aún</div>
                        <a href="{{ route('admin.concursos.participantes.create', $concurso) }}"
                           style="color:#1d4ed8;font-weight:600;font-size:.87rem;">
                            <i class="bi bi-person-plus me-1"></i>Agregar el primero
                        </a>
                    </td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>

{{-- ══════════════════════ MODAL CARGA MASIVA ══════════════════════ --}}
<div id="modalMasivo" style="display:none;position:fixed;inset:0;z-index:9999;background:rgba(15,23,42,.65);backdrop-filter:blur(4px);overflow-y:auto;padding:24px 16px;">
  <div style="max-width:920px;margin:0 auto;background:#fff;border-radius:24px;box-shadow:0 24px 80px rgba(0,0,0,.25);overflow:hidden;">

    {{-- Header modal --}}
    <div style="background:linear-gradient(135deg,#0d1b6e,#1a237e,#4527a0);padding:20px 28px;display:flex;align-items:center;justify-content:space-between;">
      <div style="display:flex;align-items:center;gap:12px;">
        <div style="width:40px;height:40px;border-radius:12px;background:rgba(255,224,130,.15);border:1.5px solid rgba(255,224,130,.25);display:flex;align-items:center;justify-content:center;">
          <i class="bi bi-cloud-upload-fill" style="color:#ffe082;font-size:18px;"></i>
        </div>
        <div>
          <div style="color:#fff;font-weight:800;font-size:1.05rem;">Carga Masiva de Participantes</div>
          <div style="color:rgba(255,255,255,.6);font-size:.8rem;">{{ $concurso->nombre }}</div>
        </div>
      </div>
      <button onclick="cerrarModalMasivo()" style="width:36px;height:36px;border-radius:10px;background:rgba(255,255,255,.12);border:none;color:#fff;cursor:pointer;font-size:18px;display:flex;align-items:center;justify-content:center;">✕</button>
    </div>

    {{-- Steps bar --}}
    <div style="display:flex;border-bottom:1.5px solid #f1f5f9;">
      <div id="step-tab-1" class="modal-tab active-tab" onclick="irStep(1)" style="flex:1;padding:12px;text-align:center;font-size:.82rem;font-weight:700;color:#1a237e;border-bottom:3px solid #1a237e;cursor:pointer;">
        <i class="bi bi-1-circle-fill me-1"></i> Descargar Plantilla
      </div>
      <div id="step-tab-2" class="modal-tab" onclick="" style="flex:1;padding:12px;text-align:center;font-size:.82rem;font-weight:700;color:#94a3b8;cursor:default;">
        <i class="bi bi-2-circle me-1"></i> Subir &amp; Vista previa
      </div>
      <div id="step-tab-3" class="modal-tab" onclick="" style="flex:1;padding:12px;text-align:center;font-size:.82rem;font-weight:700;color:#94a3b8;cursor:default;">
        <i class="bi bi-3-circle me-1"></i> Confirmar y Guardar
      </div>
    </div>

    <div style="padding:24px 28px;">

      {{-- ──── STEP 1: Descargar plantilla ──── --}}
      <div id="step1">
        <div style="text-align:center;padding:16px 0 24px;">
          <div style="width:80px;height:80px;border-radius:24px;background:linear-gradient(135deg,#eff6ff,#dbeafe);display:flex;align-items:center;justify-content:center;margin:0 auto 16px;">
            <i class="bi bi-file-earmark-spreadsheet" style="font-size:40px;color:#1d4ed8;"></i>
          </div>
          <h3 style="font-weight:800;color:#1e293b;margin-bottom:8px;">Descarga la plantilla Excel</h3>
          <p style="color:#64748b;max-width:500px;margin:0 auto 24px;font-size:.9rem;">
            La plantilla incluye las columnas de datos básicos del participante y una columna por cada pregunta del concurso (P1 a P{{ $concurso->num_preguntas }}).
          </p>
          <a href="{{ route('admin.concursos.participantes.plantilla', $concurso) }}"
             style="display:inline-flex;align-items:center;gap:8px;padding:13px 28px;background:linear-gradient(135deg,#1a237e,#1565c0);color:#fff;border-radius:14px;font-weight:800;text-decoration:none;box-shadow:0 4px 16px rgba(26,35,126,.3);transition:all .2s;"
             onmouseover="this.style.transform='translateY(-2px)'" onmouseout="this.style.transform=''">
            <i class="bi bi-download"></i>
            Descargar Plantilla .xlsx
          </a>
        </div>

        <div style="background:#f8faff;border:1.5px solid #e8eaf6;border-radius:14px;padding:16px 20px;margin-bottom:24px;">
          <div style="font-weight:700;color:#1a237e;margin-bottom:10px;"><i class="bi bi-info-circle-fill me-2"></i>Instrucciones</div>
          <ul style="margin:0;padding-left:20px;color:#475569;font-size:.87rem;line-height:1.8;">
            <li>Completa los datos sin modificar los nombres de las columnas de la fila 1</li>
            <li><strong>genero:</strong> usa <code>M</code> para masculino y <code>F</code> para femenino</li>
            <li><strong>tiempo:</strong> formato HH:MM (ej: <code>01:15</code>)</li>
            <li>Las columnas <strong>P1, P2...</strong> son las respuestas del alumno a cada pregunta</li>
            <li>Deja la celda de respuesta vacía si el alumno no respondió</li>
          </ul>
        </div>

        <div style="text-align:right;">
          <button onclick="irStep(2)" style="display:inline-flex;align-items:center;gap:8px;padding:12px 24px;background:linear-gradient(135deg,#1a237e,#4527a0);color:#fff;border:none;border-radius:12px;font-weight:700;cursor:pointer;">
            Siguiente: Subir archivo <i class="bi bi-arrow-right"></i>
          </button>
        </div>
      </div>

      {{-- ──── STEP 2: Subir y preview ──── --}}
      <div id="step2" style="display:none;">
        <div id="upload-area" style="border:2.5px dashed #c7d2fe;border-radius:18px;padding:40px;text-align:center;background:#f8faff;cursor:pointer;transition:all .2s;margin-bottom:20px;position:relative;"
             onclick="document.getElementById('fileInput').click()"
             ondragover="event.preventDefault();this.style.borderColor='#1a237e';this.style.background='#eff6ff';"
             ondragleave="this.style.borderColor='#c7d2fe';this.style.background='#f8faff';"
             ondrop="handleDrop(event)">
          <input type="file" id="fileInput" accept=".xlsx,.xls,.csv" style="display:none" onchange="cargarArchivo(this.files[0])">
          <i class="bi bi-cloud-upload" style="font-size:48px;color:#7c3aed;margin-bottom:12px;display:block;"></i>
          <div style="font-weight:700;color:#1e293b;margin-bottom:4px;">Arrastra el archivo aquí o haz clic</div>
          <div style="color:#94a3b8;font-size:.85rem;">Formatos: .xlsx, .xls, .csv — Máx. 5 MB</div>
          <div id="file-name-display" style="margin-top:12px;font-size:.85rem;color:#7c3aed;font-weight:600;"></div>
        </div>

        {{-- Spinner --}}
        <div id="uploadSpinner" style="display:none;text-align:center;padding:24px;">
          <div style="display:inline-block;width:40px;height:40px;border:4px solid #e8eaf6;border-top-color:#1a237e;border-radius:50%;animation:spin .8s linear infinite;"></div>
          <div style="margin-top:12px;color:#64748b;">Procesando archivo...</div>
        </div>

        <div id="preview-error" style="display:none;background:#fef2f2;border:1.5px solid #fecaca;border-radius:10px;padding:12px 16px;color:#991b1b;font-size:.88rem;"></div>
      </div>

      {{-- ──── STEP 3: Preview tabla + confirmar ──── --}}
      <div id="step3" style="display:none;">
        <div id="preview-stats" style="display:flex;gap:12px;flex-wrap:wrap;margin-bottom:16px;"></div>

        <div style="overflow-x:auto;max-height:380px;border-radius:14px;border:1.5px solid #e8edf5;">
          <table style="width:100%;border-collapse:collapse;font-size:12.5px;">
            <thead>
              <tr>
                <th style="background:#1a237e;color:#ffe082;padding:9px 10px;text-align:center;font-size:11px;font-weight:800;white-space:nowrap;position:sticky;top:0;">Acción</th>
                <th style="background:#1a237e;color:#ffe082;padding:9px 10px;text-align:left;font-size:11px;font-weight:800;white-space:nowrap;position:sticky;top:0;">Apellidos</th>
                <th style="background:#1a237e;color:#ffe082;padding:9px 10px;text-align:left;font-size:11px;font-weight:800;white-space:nowrap;position:sticky;top:0;">Nombres</th>
                <th style="background:#1a237e;color:#ffe082;padding:9px 10px;text-align:center;font-size:11px;font-weight:800;white-space:nowrap;position:sticky;top:0;">Grado</th>
                <th style="background:#1a237e;color:#ffe082;padding:9px 10px;text-align:center;font-size:11px;font-weight:800;white-space:nowrap;position:sticky;top:0;">Secc.</th>
                <th style="background:#1a237e;color:#ffe082;padding:9px 10px;text-align:center;font-size:11px;font-weight:800;white-space:nowrap;position:sticky;top:0;">Gén.</th>
                <th style="background:#1a237e;color:#ffe082;padding:9px 10px;text-align:center;font-size:11px;font-weight:800;white-space:nowrap;position:sticky;top:0;">Estado</th>
              </tr>
            </thead>
            <tbody id="preview-tbody"></tbody>
          </table>
        </div>

        <div style="display:flex;align-items:center;justify-content:space-between;margin-top:18px;flex-wrap:wrap;gap:10px;">
          <button onclick="irStep(2)" style="display:inline-flex;align-items:center;gap:6px;padding:10px 18px;background:#f8faff;color:#64748b;border:1.5px solid #e2e8f0;border-radius:10px;font-weight:700;cursor:pointer;">
            <i class="bi bi-arrow-left"></i> Volver
          </button>
          <div style="display:flex;gap:10px;">
            <button onclick="accionTodos('omitir')" style="display:inline-flex;align-items:center;gap:6px;padding:10px 16px;background:#fff7ed;color:#c2410c;border:1.5px solid #fed7aa;border-radius:10px;font-weight:700;cursor:pointer;font-size:.83rem;">
              Omitir todos los duplicados
            </button>
            <button onclick="confirmarGuardar()" id="btnGuardar" style="display:inline-flex;align-items:center;gap:8px;padding:12px 24px;background:linear-gradient(135deg,#059669,#047857);color:#fff;border:none;border-radius:12px;font-weight:800;cursor:pointer;box-shadow:0 4px 16px rgba(5,150,105,.3);">
              <i class="bi bi-cloud-check-fill"></i> Guardar participantes
            </button>
          </div>
        </div>
      </div>

    </div>
  </div>
</div>

@endsection

@section('scripts')
<script>
// ── Datos del concurso ──────────────────────────────────
const CONCURSO_ID   = {{ $concurso->id }};
const NUM_PREGUNTAS = {{ $concurso->num_preguntas }};
const URL_PREVIEW   = '{{ route("admin.concursos.participantes.preview", $concurso) }}';
const URL_MASIVO    = '{{ route("admin.concursos.participantes.masivo", $concurso) }}';
const CSRF_TOKEN    = '{{ csrf_token() }}';

// ── Publicar resultados con SweetAlert2 ────────────────
function confirmarPublicar(url) {
    Swal.fire({
        title: '¿Publicar resultados?',
        html: `Se creará una <strong>noticia</strong> con enlace directo a los resultados del concurso en la sección pública.`,
        icon: 'question',
        showCancelButton: true,
        confirmButtonColor: '#059669',
        cancelButtonColor:  '#64748b',
        confirmButtonText:  '<i class="bi bi-megaphone-fill"></i> Sí, publicar',
        cancelButtonText:   'Cancelar',
        reverseButtons: true,
    }).then(result => {
        if (result.isConfirmed) {
            Swal.fire({
                title: 'Publicando...',
                html: 'Creando la noticia con el enlace a resultados.',
                allowOutsideClick: false,
                allowEscapeKey: false,
                didOpen: () => Swal.showLoading(),
            });
            window.location.href = url;
        }
    });
}

// ── Actualizar enlace en noticia existente ─────────────
function confirmarActualizarEnlace(url) {
    Swal.fire({
        title: '¿Actualizar enlace?',
        html: `Se actualizará el botón de la noticia con el enlace actual a los resultados.`,
        icon: 'info',
        showCancelButton: true,
        confirmButtonColor: '#1a237e',
        cancelButtonColor:  '#64748b',
        confirmButtonText:  '<i class="bi bi-link-45deg"></i> Actualizar',
        cancelButtonText:   'Cancelar',
        reverseButtons: true,
    }).then(result => {
        if (result.isConfirmed) {
            window.location.href = url;
        }
    });
}


// ── Estado global ──────────────────────────────────────
let previewData = [];

// ── Abrir / cerrar modal ───────────────────────────────
function abrirModalMasivo() {
    irStep(1);
    document.getElementById('modalMasivo').style.display = 'block';
    document.body.style.overflow = 'hidden';
}
function cerrarModalMasivo() {
    document.getElementById('modalMasivo').style.display = 'none';
    document.body.style.overflow = '';
}
document.addEventListener('keydown', e => { if (e.key === 'Escape') cerrarModalMasivo(); });

// ── Steps ──────────────────────────────────────────────
function irStep(n) {
    [1,2,3].forEach(i => {
        document.getElementById('step' + i).style.display = (i === n) ? '' : 'none';
        const tab = document.getElementById('step-tab-' + i);
        if (i === n) {
            tab.style.color = '#1a237e';
            tab.style.borderBottom = '3px solid #1a237e';
        } else {
            tab.style.color = '#94a3b8';
            tab.style.borderBottom = 'none';
        }
    });
}

// ── Drag & Drop ────────────────────────────────────────
function handleDrop(e) {
    e.preventDefault();
    const area = document.getElementById('upload-area');
    area.style.borderColor = '#c7d2fe';
    area.style.background  = '#f8faff';
    const file = e.dataTransfer.files[0];
    if (file) cargarArchivo(file);
}

// ── Cargar y parsear archivo ───────────────────────────
function cargarArchivo(file) {
    if (!file) return;
    document.getElementById('file-name-display').textContent = '📄 ' + file.name;
    document.getElementById('preview-error').style.display = 'none';
    document.getElementById('uploadSpinner').style.display = 'block';

    const formData = new FormData();
    formData.append('archivo', file);
    formData.append('_token', CSRF_TOKEN);

    fetch(URL_PREVIEW, {
        method: 'POST',
        headers: { 'Accept': 'application/json' },
        body: formData,
    })
        .then(r => r.json())
        .then(data => {
            document.getElementById('uploadSpinner').style.display = 'none';
            if (data.error) { mostrarError(data.error); return; }
            previewData = data.filas;
            renderPreview(data);
            irStep(3);
        })
        .catch(err => {
            document.getElementById('uploadSpinner').style.display = 'none';
            mostrarError('Error al procesar el archivo: ' + err.message);
        });
}

function mostrarError(msg) {
    document.getElementById('uploadSpinner').style.display = 'none';
    Swal.fire({
        icon: 'error',
        title: 'Error al procesar',
        text: msg,
        confirmButtonColor: '#1a237e',
        confirmButtonText: 'Entendido',
    });
}

// ── Renderizar tabla de preview ────────────────────────
function renderPreview(data) {
    const tbody = document.getElementById('preview-tbody');
    const stats = document.getElementById('preview-stats');

    const nuevos = data.filas.filter(f => !f._duplicado).length;
    const dupls  = data.filas.filter(f =>  f._duplicado).length;

    stats.innerHTML = `
      <div style="flex:1;min-width:120px;background:#f0fdf4;border:1.5px solid #bbf7d0;border-radius:10px;padding:10px 14px;text-align:center;">
        <div style="font-size:1.4rem;font-weight:800;color:#15803d;">${nuevos}</div>
        <div style="font-size:11px;color:#94a3b8;font-weight:700;">NUEVOS</div>
      </div>
      <div style="flex:1;min-width:120px;background:#fffbeb;border:1.5px solid #fde68a;border-radius:10px;padding:10px 14px;text-align:center;">
        <div style="font-size:1.4rem;font-weight:800;color:#b45309;">${dupls}</div>
        <div style="font-size:11px;color:#94a3b8;font-weight:700;">DUPLICADOS</div>
      </div>
      <div style="flex:1;min-width:120px;background:#eff6ff;border:1.5px solid #bfdbfe;border-radius:10px;padding:10px 14px;text-align:center;">
        <div style="font-size:1.4rem;font-weight:800;color:#1d4ed8;">${data.total}</div>
        <div style="font-size:11px;color:#94a3b8;font-weight:700;">TOTAL FILAS</div>
      </div>
    `;

    tbody.innerHTML = '';
    data.filas.forEach((fila, idx) => {
        const isDupl = fila._duplicado;
        const accion = fila._accion || (isDupl ? 'actualizar' : 'agregar');
        previewData[idx]._accion_actual = accion;

        const statusHtml = isDupl
            ? `<span style="background:#fffbeb;color:#b45309;border:1px solid #fde68a;padding:2px 8px;border-radius:50px;font-size:10px;font-weight:800;">⚠ Duplicado</span>`
            : `<span style="background:#f0fdf4;color:#15803d;border:1px solid #bbf7d0;padding:2px 8px;border-radius:50px;font-size:10px;font-weight:800;">✓ Nuevo</span>`;

        const accionSelect = isDupl
            ? `<select onchange="cambiarAccion(${idx}, this.value)" style="border:1.5px solid #e2e8f0;border-radius:7px;padding:3px 7px;font-size:11.5px;font-weight:600;cursor:pointer;">
                 <option value="actualizar" ${accion==='actualizar'?'selected':''}>🔄 Actualizar</option>
                 <option value="omitir"     ${accion==='omitir'    ?'selected':''}>⊘ Omitir</option>
               </select>`
            : `<span style="background:#dcfce7;color:#15803d;padding:3px 10px;border-radius:7px;font-size:11.5px;font-weight:700;">+ Agregar</span>`;

        const trBg = isDupl ? '#fffde7' : '#fff';
        tbody.innerHTML += `
          <tr style="background:${trBg};border-bottom:1px solid #f1f5f9;">
            <td style="padding:7px 10px;text-align:center;">${accionSelect}</td>
            <td style="padding:7px 10px;font-weight:700;color:#1a237e;">${fila.apellidos || ''}</td>
            <td style="padding:7px 10px;">${fila.nombres || ''}</td>
            <td style="padding:7px 10px;text-align:center;">${fila.grado || '—'}</td>
            <td style="padding:7px 10px;text-align:center;">${fila.seccion || '—'}</td>
            <td style="padding:7px 10px;text-align:center;">${fila.genero || '—'}</td>
            <td style="padding:7px 10px;text-align:center;">${statusHtml}</td>
          </tr>`;
    });
}

function cambiarAccion(idx, valor) {
    previewData[idx]._accion_actual = valor;
}

function accionTodos(accion) {
    previewData.forEach((f, idx) => {
        if (f._duplicado) {
            f._accion_actual = accion;
            // Actualizar select en la tabla
            const selects = document.querySelectorAll('#preview-tbody tr:nth-child(' + (idx+1) + ') select');
            selects.forEach(s => s.value = accion);
        }
    });
    // Re-renderizar selects
    document.querySelectorAll('#preview-tbody select').forEach((sel, i) => {
        if (previewData[i] && previewData[i]._duplicado) sel.value = previewData[i]._accion_actual;
    });
}

// ── Confirmar y guardar ────────────────────────────────
async function confirmarGuardar() {
    const total = previewData.length;
    const nuevos = previewData.filter(f => !f._duplicado).length;
    const dupls  = previewData.filter(f =>  f._duplicado).length;

    const confirm = await Swal.fire({
        title: '¿Guardar participantes?',
        html: `
            <div style="display:flex;gap:12px;justify-content:center;margin:12px 0;">
                <div style="background:#f0fdf4;border:1.5px solid #bbf7d0;border-radius:10px;padding:10px 18px;">
                    <div style="font-size:1.4rem;font-weight:800;color:#15803d;">${nuevos}</div>
                    <div style="font-size:11px;color:#94a3b8;font-weight:700;">NUEVOS</div>
                </div>
                <div style="background:#fffbeb;border:1.5px solid #fde68a;border-radius:10px;padding:10px 18px;">
                    <div style="font-size:1.4rem;font-weight:800;color:#b45309;">${dupls}</div>
                    <div style="font-size:11px;color:#94a3b8;font-weight:700;">DUPLICADOS</div>
                </div>
                <div style="background:#eff6ff;border:1.5px solid #bfdbfe;border-radius:10px;padding:10px 18px;">
                    <div style="font-size:1.4rem;font-weight:800;color:#1d4ed8;">${total}</div>
                    <div style="font-size:11px;color:#94a3b8;font-weight:700;">TOTAL</div>
                </div>
            </div>`,
        icon: 'question',
        showCancelButton: true,
        confirmButtonColor: '#059669',
        cancelButtonColor:  '#64748b',
        confirmButtonText:  '<i class="bi bi-cloud-check-fill"></i> Sí, guardar',
        cancelButtonText:   'Cancelar',
        reverseButtons: true,
    });

    if (!confirm.isConfirmed) return;

    const btn = document.getElementById('btnGuardar');
    btn.disabled = true;
    btn.textContent = 'Guardando...';

    const filas = previewData.map(f => ({
        apellidos:       f.apellidos || '',
        nombres:         f.nombres   || '',
        nivel:           f.nivel     || '',
        grado:           f.grado     || '',
        seccion:         f.seccion   || '',
        genero:          f.genero    || '',
        tiempo:          f.tiempo    || '',
        observacion:     f.observacion || '',
        respuestas:      f._respuestas || {},
        participante_id: f._participante_id || null,
        accion:          f._accion_actual || f._accion || 'agregar',
    }));

    // Mostrar spinner de carga
    Swal.fire({
        title: 'Guardando...',
        html: 'Por favor espera mientras se procesan los participantes.',
        allowOutsideClick: false,
        allowEscapeKey: false,
        didOpen: () => Swal.showLoading(),
    });

    fetch(URL_MASIVO, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'Accept':        'application/json',
            'X-CSRF-TOKEN':  CSRF_TOKEN,
        },
        body: JSON.stringify({ filas }),
    })
    .then(r => r.json())
    .then(res => {
        Swal.close();
        if (res.ok) {
            cerrarModalMasivo();
            Swal.fire({
                icon: 'success',
                title: '¡Carga completada!',
                html: `
                    <div style="display:flex;gap:12px;justify-content:center;margin:10px 0;">
                        <div style="background:#f0fdf4;border:1.5px solid #bbf7d0;border-radius:10px;padding:8px 16px;">
                            <div style="font-size:1.3rem;font-weight:800;color:#15803d;">${res.agregados}</div>
                            <div style="font-size:11px;color:#94a3b8;font-weight:700;">AGREGADOS</div>
                        </div>
                        <div style="background:#eff6ff;border:1.5px solid #bfdbfe;border-radius:10px;padding:8px 16px;">
                            <div style="font-size:1.3rem;font-weight:800;color:#1d4ed8;">${res.actualizados}</div>
                            <div style="font-size:11px;color:#94a3b8;font-weight:700;">ACTUALIZADOS</div>
                        </div>
                        <div style="background:#f8faff;border:1.5px solid #e2e8f0;border-radius:10px;padding:8px 16px;">
                            <div style="font-size:1.3rem;font-weight:800;color:#64748b;">${res.omitidos}</div>
                            <div style="font-size:11px;color:#94a3b8;font-weight:700;">OMITIDOS</div>
                        </div>
                    </div>`,
                confirmButtonColor: '#1a237e',
                confirmButtonText:  'Ver participantes',
                timer: 6000,
                timerProgressBar: true,
            }).then(() => window.location.reload());
        } else {
            btn.disabled = false;
            btn.innerHTML = '<i class="bi bi-cloud-check-fill"></i> Guardar participantes';
            Swal.fire({
                icon: 'error',
                title: 'Error al guardar',
                text: res.message || 'Ocurrió un error desconocido.',
                footer: res.file ? `<small>Archivo: ${res.file}</small>` : '',
                confirmButtonColor: '#1a237e',
            });
        }
    })
    .catch(err => {
        Swal.close();
        btn.disabled = false;
        btn.innerHTML = '<i class="bi bi-cloud-check-fill"></i> Guardar participantes';
        Swal.fire({
            icon: 'error',
            title: 'Error de conexión',
            text: err.message,
            confirmButtonColor: '#1a237e',
        });
    });
}

// ── Filtro de búsqueda (ya existía) ───────────────────
function filtrarParticipantes() {
    const q      = document.getElementById('searchPart').value.toLowerCase().trim();
    const filtro = document.getElementById('filtroClasif').value;
    const rows   = document.querySelectorAll('#tablaParticipantes tbody tr[data-nombre]');
    let visible  = 0;

    rows.forEach(row => {
        const nombre  = row.dataset.nombre || '';
        const clasif  = row.dataset.clasif || '';
        const matchQ  = q === '' || nombre.includes(q);
        const matchF  = filtro === '' || clasif === filtro;
        const show    = matchQ && matchF;
        row.style.display = show ? '' : 'none';
        if (show) visible++;
    });

    const tv = document.getElementById('totalVisible');
    if (tv) tv.textContent = visible + ' participante' + (visible !== 1 ? 's' : '');
}
// Inicializar contador
filtrarParticipantes();
</script>
@endsection