@extends('layouts.app')

@section('titulo', 'Participantes — Sorteos FEL')
@section('breadcrumb')
    <a href="{{ route('inicio') }}" style="color:var(--primary,#1D3D8E)">Inicio</a>
    <span style="margin:0 6px;color:var(--border)">›</span>
    <a href="{{ route('eventos.index') }}" style="color:var(--primary,#1D3D8E)">Eventos</a>
    <span style="margin:0 6px;color:var(--border)">›</span>
    <span style="color:var(--text)">{{ $evento->nombre }} · Participantes</span>
@endsection

@section('contenido')
<div class="d-flex justify-content-between align-items-center mb-4">
    <div>
        <h2 class="fw-bold mb-0" style="font-family:'DM Serif Display',serif;font-weight:400;color:#0F172A">
            <i class="bi bi-people"></i> Participantes
        </h2>
        <small class="text-muted">{{ $evento->nombre }}</small>
    </div>
    <a href="{{ route('eventos.index') }}" class="btn btn-outline-secondary btn-sm">
        <i class="bi bi-arrow-left"></i> Volver
    </a>
</div>

<div class="row g-4 mb-4">
    <div class="col-md-5">
        <div class="card border-0 shadow-sm">
            <div class="card-header border-0 py-3" style="background:var(--primary,#1D3D8E)">
                <h6 class="text-white mb-0 fw-bold"><i class="bi bi-upload"></i> Cargar participantes</h6>
            </div>
            <div class="card-body p-4">
                <p class="text-muted small mb-3">
                    Archivo con columnas: <strong>nombre, documento, boleta, segmento</strong>
                    <br>
                    </p>

                <form method="POST" action="{{ route('participantes.csv', $evento) }}" enctype="multipart/form-data">
                    @csrf
                    <div class="mb-3">
                        <input type="file" name="archivo" class="form-control" accept=".csv,.txt" required>
                        <small class="text-muted" style="font-size:11px">Formatos: CSV, XLS, XLSX</small>
                    </div>

                    <div class="d-flex gap-2">
                        <button type="submit" class="btn btn-primary flex-fill">
                            <i class="bi bi-cloud-upload"></i> Cargar archivo
                        </button>
                        <a href="{{ route('participantes.plantilla', $evento) }}"
                           class="btn btn-outline-secondary"
                           title="Descargar plantilla">
                            <i class="bi bi-download"></i> Plantilla
                        </a>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="col-md-7">
        <div class="row g-3">
            <div class="col-6">
                <div class="card border-0 shadow-sm text-center p-3">
                    <div style="font-family:'DM Serif Display',serif;font-size:42px;font-weight:400;color:var(--primary,#1D3D8E);line-height:1">
                        {{ $participantes->count() }}
                    </div>
                    <div class="text-muted small mt-2">Total participantes</div>
                </div>
            </div>
            <div class="col-6">
                <div class="card border-0 shadow-sm text-center p-3">
                    <div style="font-family:'DM Serif Display',serif;font-size:42px;font-weight:400;color:#DC2626;line-height:1">
                        {{ $participantes->where('baneado', true)->count() }}
                    </div>
                    <div class="text-muted small mt-2">Baneados</div>
                </div>
            </div>
        </div>
    </div>
</div>

@if($participantes->isNotEmpty())
<div class="card border-0 shadow-sm">
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-hover mb-0">
                <thead style="background-color:#F8FAFC">
                    <tr>
                        <th>Boleta</th>
                        <th>Nombre</th>
                        <th>Documento</th>
                        <th>Segmento</th>
                        <th>Estado</th>
                        <th>Acción</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($participantes as $p)
                    <tr class="{{ $p->baneado ? 'text-muted' : '' }}" style="{{ $p->baneado ? 'opacity:.75' : '' }}">
                        <td><code style="background:var(--primary-soft, rgba(29,61,142,.08));color:var(--primary,#1D3D8E);padding:1px 6px;border-radius:4px;font-size:12px">{{ $p->boleta }}</code></td>
                        <td>{{ $p->nombre }}</td>
                        <td>{{ $p->documento }}</td>
                        <td>{{ $p->segmento ?? '—' }}</td>
                        <td>
                            @if($p->baneado)
                                <span class="badge" style="background:#FEF2F2;color:#991B1B;border:1px solid #FECACA">Baneado</span>
                            @else
                                <span class="badge" style="background:#F0FDF4;color:#166534;border:1px solid #BBF7D0">Activo</span>
                            @endif
                        </td>
                        <td>
                            @if($p->baneado)
                                <form method="POST" action="{{ route('participantes.desbanear', $p) }}" class="d-inline">
                                    @csrf
                                    <button class="btn btn-sm" style="background:var(--secondary,#8BBF2B);color:#fff;border:none;font-size:12px">Habilitar</button>
                                </form>
                            @else
                                <form method="POST" action="{{ route('participantes.banear', $p) }}" class="d-inline">
                                    @csrf
                                    <button class="btn btn-sm btn-danger" style="font-size:12px">Banear</button>
                                </form>
                            @endif
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
</div>
@endif
@endsection