@extends('layouts.app')

@section('content')
<style>
    /* Estética COIRCO: Dorado y Negro */
    .card-header { border-bottom: 4px solid #C9A050 !important; }
    .badge-coirco { background-color: #C9A050; color: #000; font-weight: bold; }
    
    /* Estilos para el DataTable */
    .page-item.active .page-link {
        background-color: #C9A050 !important;
        border-color: #C9A050 !important;
        color: white !important;
    }
    .page-link { color: #212529; }
    table.dataTable.table-hover > tbody > tr:hover {
        background-color: rgba(201, 160, 80, 0.1) !important;
        transition: 0.2s;
    }
    .badge-historia { background-color: #f8f9fa; color: #7a2a1e; border: 1px solid #7a2a1e; }
</style>

<div class="container-fluid py-4">
    <div class="card shadow border-0">
        <div class="card-header bg-dark text-white d-flex justify-content-between align-items-center py-3">
            <div>
                <h5 class="mb-0 fw-bold" style="color: #C9A050;">
                    <i class="bi bi-person-lines-fill me-2"></i> ADMINISTRACIÓN DE POSTULANTES
                </h5>
            </div>
            <span class="badge badge-coirco p-2 px-3">
                {{ $postulantes->count() }} INSCRIPTOS
            </span>
        </div>
        
        <div class="card-body p-4">
            <div class="table-responsive">
                <table id="tablaPostulantes" class="table table-striped table-hover align-middle w-100">
                    <thead class="table-light">
                        <tr>
                            <th>ID</th>
                            <th>Postulante / Seudónimo</th>
                            <th>Categoría Concurso</th>
                            <th>¿Histórica?</th>
                            <th class="text-center">Fotos</th>
                            <th class="text-end pe-4">Acciones</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($postulantes as $p)
                        <tr>
                            <td class="text-muted">#{{ $p->id }}</td>
                            <td>
                                <div class="fw-bold">{{ $p->nombres }} {{ $p->apellidos }}</div>
                                <div class="small text-muted">
                                    <i class="bi bi-incognito"></i> {{ $p->seudonimo ?? 'Sin seudónimo' }} 
                                    <span class="mx-1">|</span> {{ $p->email }}
                                </div>
                            </td>
                            <td>
                                @if($p->categoria)
                                    <span class="badge bg-dark" style="color: #C9A050;">
                                        {{ strtoupper($p->categoria) }}
                                    </span>
                                @else
                                    <span class="text-muted small">No participa</span>
                                @endif
                            </td>
                            <td>
                                @if($p->participa_historica)
                                    <span class="badge badge-historia">
                                        <i class="bi bi-clock-history"></i> SÍ
                                    </span>
                                @else
                                    <span class="text-muted small">No</span>
                                @endif
                            </td>
                            <td class="text-center">
                                <span class="badge rounded-pill bg-secondary">
                                    {{ $p->fotos->count() }} <i class="bi bi-camera"></i>
                                </span>
                            </td>
                            <td class="text-end pe-4">
                                <div class="btn-group shadow-sm">
                                    <a href="{{ route('admin.show', $p->id) }}" class="btn btn-sm btn-outline-dark" title="Ver Detalle">
                                        <i class="bi bi-eye"></i> Ver Carpeta
                                    </a>
                                </div>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

{{-- Scripts necesarios --}}
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
<script src="https://cdn.datatables.net/1.13.7/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.7/js/dataTables.bootstrap5.min.js"></script>

<script>
$(document).ready(function() {
    $('#tablaPostulantes').DataTable({
        "order": [[ 0, "desc" ]],
        "pageLength": 10,
        "language": {
            "search": "Buscar:",
            "lengthMenu": "Mostrar _MENU_ registros",
            "info": "Mostrando _START_ a _END_ de _TOTAL_ inscriptos",
            "infoEmpty": "No hay registros disponibles",
            "infoFiltered": "(filtrado de _MAX_ totales)",
            "zeroRecords": "No se encontraron resultados",
            "emptyTable": "Ningún dato disponible en esta tabla",
            "paginate": {
                "first": "Primero",
                "last": "Último",
                "next": "Siguiente",
                "previous": "Anterior"
            }
        }
    });
});
</script>
@endsection