@extends('layouts.app')

@section('titulo', 'Participantes — Sorteos FEL')

@section('contenido')
<div class="d-flex justify-content-between align-items-center mb-4">
    <div>
        <h2 class="fw-bold mb-0"><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">
        <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 shadow-sm border-0">
            <div class="card-header border-0 py-3" style="background-color:#1a3a6b">
                <h6 class="text-white mb-0 fw-bold"><i class="bi bi-upload"></i> Cargar participantes CSV</h6>
            </div>
            <div class="card-body p-4">
                <p class="text-muted small">El archivo debe tener columnas: <strong>nombre, zona, documento, boleta</strong></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>
                    </div>
                    <button type="submit" class="btn btn-fel w-100">
                        <i class="bi bi-cloud-upload"></i> Cargar CSV
                    </button>
                </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 class="fs-1 fw-bold" style="color:#1a3a6b">{{ $participantes->count() }}</div>
                    <div class="text-muted small">Total participantes</div>
                </div>
            </div>
            <div class="col-6">
                <div class="card border-0 shadow-sm text-center p-3">
                    <div class="fs-1 fw-bold text-danger">{{ $participantes->where('baneado', true)->count() }}</div>
                    <div class="text-muted small">Baneados</div>
                </div>
            </div>
        </div>
    </div>
</div>

@if($participantes->isNotEmpty())
<div class="card shadow-sm border-0">
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-hover mb-0">
                <thead style="background-color:#f8f9fa">
                    <tr>
                        <th>Boleta</th>
                        <th>Nombre</th>
                        <th>Documento</th>
                        <th>Zona</th>
                        <th>Estado</th>
                        <th>Acción</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($participantes as $p)
                    <tr class="{{ $p->baneado ? 'table-danger' : '' }}">
                        <td>{{ $p->boleta }}</td>
                        <td>{{ $p->nombre }}</td>
                        <td>{{ $p->documento }}</td>
                        <td>{{ $p->zona }}</td>
                        <td>
                            @if($p->baneado)
                                <span class="badge bg-danger">Baneado</span>
                            @else
                                <span class="badge bg-success">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 btn-success">Habilitar</button>
                                </form>
                            @else
                                <form method="POST" action="{{ route('participantes.banear', $p) }}" class="d-inline">
                                    @csrf
                                    <button class="btn btn-sm btn-danger">Banear</button>
                                </form>
                            @endif
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
</div>
@endif
@endsection