@extends('layouts.app')

@section('content')
<style>
    .card-header { border-bottom: 4px solid #C9A050 !important; }
    .badge-seudonimo { background-color: #f8f9fa; color: #333; border: 1px solid #C9A050; font-weight: bold; font-family: 'Courier New', Courier, monospace; }
    
    /* Botón de favoritos destacado */
    .btn-favoritos-panel {
        background-color: #1a1a1a; color: #C9A050; border: 1px solid #C9A050;
        transition: all 0.3s ease; font-weight: bold;
    }
    .btn-favoritos-panel:hover {
        background-color: #C9A050; color: #1a1a1a; transform: translateY(-2px);
    }

    /* Estilo para la estrella en la fila */
    .star-active { color: #C9A050; filter: drop-shadow(0 0 2px rgba(201, 160, 80, 0.5)); }
    .star-inactive { color: #dee2e6; }

    .badge-historica-jurado { background-color: #fff5e6; color: #7a2a1e; border: 1px solid #7a2a1e; font-size: 0.7rem; }
    
    /* DataTable Custom */
    .page-item.active .page-link { background-color: #C9A050 !important; border-color: #C9A050 !important; }
    .page-link { color: #212529; }
</style>

<div class="container py-4">
    
    <div class="row mb-4">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center p-3 bg-white shadow-sm rounded-3 border-start border-4 border-warning">
                <div>
                    <h6 class="mb-1 fw-bold text-dark">Mi Selección Personal</h6>
                    <p class="text-muted small mb-0">Revisa las fotos que has marcado para la etapa final.</p>
                </div>
                <a href="{{ route('jurado.favoritos') }}" class="btn btn-favoritos-panel px-4 py-2 shadow-sm">
                    <i class="bi bi-star-fill me-2"></i> VER MIS PRESELECCIONADAS 
                    <span class="badge bg-warning text-dark ms-2">{{ auth()->user()->favoritos()->count() }}</span>
                </a>
            </div>
        </div>
    </div>

    <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-gavel me-2"></i> PANEL DE EVALUACIÓN
                </h5>
            </div>
            <span class="badge bg-outline-light border p-2 px-3">
                {{ $postulantes->count() }} REGISTROS
            </span>
        </div>
        
        <div class="card-body p-4">
            <div class="table-responsive">
                <table id="tablaJurado" class="table table-hover align-middle w-100">
                    <thead class="table-light">
                        <tr>
                            <th style="width: 50px;"></th> {{-- Columna para la estrella --}}
                            <th>Seudónimo</th>
                            <th>Categoría Concurso</th>
                            <th>Aporte Histórico</th>
                            <th class="text-center">Fotos</th>
                            <th class="text-end pe-4">Acciones</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($postulantes as $p)
                        @php
                            // Verificamos si el jurado actual tiene alguna foto de este postulante en favoritos
                            $tieneFavoritos = auth()->user()->favoritos()
                                ->whereIn('foto_id', $p->fotos->pluck('id'))
                                ->exists();
                        @endphp
                        <tr>
                            <td class="text-center">
                                @if($tieneFavoritos)
                                    <i class="bi bi-star-fill fs-5 star-active" title="Tiene obras preseleccionadas"></i>
                                @else
                                    <i class="bi bi-star fs-5 star-inactive"></i>
                                @endif
                            </td>
                            <td>
                                <span class="badge badge-seudonimo px-3 py-2">
                                    {{ $p->seudonimo }}
                                </span>
                            </td>
                            <td>
                                @if($p->categoria)
                                    <span class="badge bg-dark text-white text-uppercase" style="font-size: 0.7rem;">
                                        {{ $p->categoria }}
                                    </span>
                                @else
                                    <span class="text-muted small italic">No participa</span>
                                @endif
                            </td>
                            <td>
                                @if($p->participa_historica)
                                    <span class="badge badge-historica-jurado">
                                        <i class="bi bi-clock-history"></i> ARCHIVO
                                    </span>
                                @else
                                    <span class="text-muted small">No</span>
                                @endif
                            </td>
                            <td class="text-center">
                                <div class="d-flex flex-column align-items-center">
                                    <span class="fw-bold">{{ $p->fotos->count() }}</span>
                                    <small class="text-muted" style="font-size: 0.65rem;">ARCHIVOS</small>
                                </div>
                            </td>
                            <td class="text-end pe-4">
                                <a href="{{ route('jurado.show', $p->id) }}" class="btn btn-sm btn-dark shadow-sm" style="border-left: 3px solid #C9A050;">
                                    Ver Galería <i class="bi bi-arrow-right ms-1"></i>
                                </a>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<script>
$(document).ready(function() {
    $('#tablaJurado').DataTable({
        "order": [[ 0, "desc" ]], // Ordena por la estrella (favoritos arriba)
        "pageLength": 10,
        "language": {
            "search": "Buscar:",
            "lengthMenu": "Mostrar _MENU_ registros",
            "info": "Mostrando _START_ a _END_ de _TOTAL_ postulantes",
            "infoEmpty": "No hay datos",
            "zeroRecords": "No se encontraron resultados",
            "paginate": {
                "next": "Sig.",
                "previous": "Ant."
            }
        }
    });
});
</script>
@endsection