@extends('layouts.app')

@section('content')
<style>
    /* Estilo coherente con el panel de jurado */
    .card-fav { transition: all 0.3s ease; border: 1px solid #eee; }
    .card-fav:hover { transform: translateY(-8px); shadow: 0 10px 20px rgba(0,0,0,0.1); }
    
    .label-categoria-foto {
        position: absolute; top: 12px; left: 12px;
        padding: 5px 12px; border-radius: 4px;
        font-weight: bold; font-size: 0.7rem; z-index: 5;
        box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    }
    
    .btn-remove-fav {
        position: absolute; top: 12px; right: 12px;
        background: rgba(255,255,255,0.9); color: #dc3545;
        border: none; width: 35px; height: 35px; border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
        transition: all 0.2s; z-index: 5;
    }
    .btn-remove-fav:hover { background: #dc3545; color: white; }

    .autor-tag { color: #C9A050; font-family: 'Courier New', Courier, monospace; font-weight: bold; }
</style>

<div class="container py-4">
    <div class="d-flex justify-content-between align-items-end mb-4 border-bottom pb-3">
        <div>
            <h2 class="fw-bold text-dark mb-0">
                <i class="bi bi-star-fill text-warning me-2"></i>Mi Selección Final
            </h2>
            <p class="text-muted mb-0">Estas son las obras que has preseleccionado para el fallo definitivo.</p>
        </div>
        <a href="{{ route('jurado.index') }}" class="btn btn-dark shadow-sm">
            <i class="bi bi-arrow-left"></i> Volver a la Galería General
        </a>
    </div>

    @if($fotos->isEmpty())
        <div class="text-center py-5 bg-white rounded shadow-sm">
            <i class="bi bi-card-image text-light" style="font-size: 5rem;"></i>
            <h4 class="mt-3 text-muted">Tu lista de selección está vacía</h4>
            <p class="text-muted">Explora los postulantes y marca con una estrella las mejores obras.</p>
            <a href="{{ route('jurado.index') }}" class="btn btn-warning px-4 py-2 fw-bold">COMENZAR EVALUACIÓN</a>
        </div>
    @else
        <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4">
            @foreach($fotos as $foto)
                <div class="col" id="foto-card-{{ $foto->id }}">
                    <div class="card h-100 shadow-sm border-0 card-fav overflow-hidden">
                        
                        <div class="position-relative">
                            {{-- ETIQUETA DE CATEGORÍA DE LA FOTO --}}
                            @php
                                $isHistorica = $foto->tipo == 3;
                                $colorBg = $isHistorica ? '#7a2a1e' : '#1a1a1a';
                                $textLabel = $isHistorica ? 'ARCHIVO HISTÓRICO' : 'CONCURSO: ' . strtoupper($foto->postulante->categoria);
                            @endphp
                            
                            <span class="label-categoria-foto text-white" style="background-color: {{ $colorBg }};">
                                <i class="bi {{ $isHistorica ? 'bi-clock-history' : 'bi-trophy' }} me-1"></i>
                                {{ $textLabel }}
                            </span>

                            {{-- Botón rápido para quitar de favoritos --}}
                            <button class="btn-remove-fav shadow-sm" 
                                    onclick="quickRemove({{ $foto->id }})" 
                                    title="Quitar de mi selección">
                                <i class="bi bi-trash"></i>
                            </button>

                            <a href="{{ asset('storage/' . $foto->ruta_foto) }}" target="_blank">
                                <img src="{{ asset('storage/' . $foto->ruta_foto) }}" 
                                     class="card-img-top" 
                                     style="height: 220px; object-fit: cover;" 
                                     alt="Obra preseleccionada">
                            </a>
                        </div>
                        
                        <div class="card-body d-flex flex-column">
                            <div class="mb-2">
                                <small class="text-uppercase fw-bold text-muted d-block" style="font-size: 0.65rem; letter-spacing: 1px;">Seudónimo</small>
                                <span class="autor-tag fs-5">{{ $foto->postulante->seudonimo }}</span>
                            </div>
                            
                            <div class="detalle-preview p-2 rounded bg-light border-start border-3 border-warning flex-grow-1">
                                <p class="card-text small text-dark mb-0">
                                    "{{ Str::limit($foto->detalle, 120, '...') ?? 'Sin descripción.' }}"
                                </p>
                            </div>
                        </div>
                        
                        <div class="card-footer bg-white border-top-0 d-grid pb-3">
                            <a href="{{ route('jurado.show', $foto->postulante_id) }}" class="btn btn-sm btn-outline-dark">
                                <i class="bi bi-person-badge me-1"></i> Ver expediente completo
                            </a>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    @endif
</div>

<script>
/**
 * Permite al jurado limpiar su lista de favoritos sin recargar la página
 */
function quickRemove(fotoId) {
    if(!confirm('¿Quitar esta obra de tu selección personal?')) return;

    const url = "{{ route('jurado.foto.favorito', ':id') }}".replace(':id', fotoId);
    
    fetch(url, {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': '{{ csrf_token() }}',
            'Accept': 'application/json',
            'X-Requested-With': 'XMLHttpRequest'
        }
    })
    .then(res => res.json())
    .then(data => {
        if(data.status === 'removed') {
            const element = document.getElementById(`foto-card-${fotoId}`);
            element.style.opacity = '0';
            element.style.transform = 'scale(0.8)';
            setTimeout(() => {
                element.remove();
                if(document.querySelectorAll('.col').length === 0) location.reload();
            }, 300);
        }
    });
}
</script>
@endsection