@extends('layouts.app')

@section('content')
<style>
    .card-header-jurado { background-color: #1a1a1a; border-bottom: 3px solid #C9A050; color: white; }
    .img-evaluacion { 
        width: 100%; height: auto; border-radius: 8px;
        box-shadow: 0 4px 15px rgba(0,0,0,0.1); transition: transform 0.3s;
    }
    .img-evaluacion:hover { transform: scale(1.01); }
    .seudonimo-box {
        background-color: #f8f9fa; border: 2px dashed #C9A050;
        padding: 20px; text-align: center; border-radius: 10px;
    }
    .label-jurado { font-weight: bold; color: #C9A050; text-transform: uppercase; font-size: 0.75rem; letter-spacing: 1px; }
    .detalle-foto { background: #fdfdfd; border-left: 3px solid #C9A050; padding: 15px; font-style: italic; line-height: 1.6; }
    
    /* Etiqueta de tipo de foto sobre la imagen */
    .badge-tipo-foto {
        position: absolute; top: 15px; left: 15px; z-index: 10;
        padding: 8px 15px; border-radius: 5px; font-weight: bold;
        box-shadow: 0 2px 8px rgba(0,0,0,0.3); font-size: 0.75rem;
    }

    /* Estilo del Botón Favorito */
    .btn-fav {
        position: absolute; top: 15px; right: 15px; z-index: 10;
        width: 50px; height: 50px; border-radius: 50%;
        background: white; border: 2px solid #C9A050;
        transition: all 0.3s ease; display: flex; align-items: center; justify-content: center;
        cursor: pointer;
    }
    .btn-fav:hover { transform: scale(1.1); box-shadow: 0 4px 10px rgba(0,0,0,0.2); }
    .btn-fav.active { background-color: #C9A050; }
    .btn-fav.active i { color: white !important; }

    /* Línea de tiempo / Info histórica */
    .info-historica-item { border-left: 2px solid #dee2e6; padding-left: 15px; margin-bottom: 15px; }
</style>

<div class="container py-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <a href="{{ route('jurado.index') }}" class="btn btn-outline-dark btn-sm shadow-sm">
            <i class="bi bi-arrow-left"></i> Volver al Panel
        </a>
        <div class="text-muted small">
            <i class="bi bi-shield-lock-fill text-warning"></i> Evaluación Confidencial
        </div>
    </div>

    <div class="row">
        {{-- Sidebar: Info del Postulante --}}
        <div class="col-md-4">
            <div class="card shadow-sm border-0 mb-4 sticky-top" style="top: 20px;">
                <div class="card-header card-header-jurado">
                    <h5 class="mb-0 small fw-bold">FICHA DEL POSTULANTE</h5>
                </div>
                <div class="card-body">
                    <div class="seudonimo-box mb-4">
                        <div class="label-jurado mb-1">Seudónimo</div>
                        <h3 class="fw-bold mb-0 text-dark">{{ $postulante->seudonimo }}</h3>
                    </div>

                    <div class="mb-4">
                        <div class="label-jurado">Participación en Concurso</div>
                        @if($postulante->categoria)
                            <div class="h6 mt-1 p-2 border rounded bg-light">
                                <i class="bi bi-trophy-fill text-warning me-2"></i>
                                {{ strtoupper($postulante->categoria) }}
                            </div>
                        @else
                            <div class="text-muted small italic mt-1">No participa en el certamen premiado.</div>
                        @endif
                    </div>

                    <div class="mb-4">
                        <div class="label-jurado">Convocatoria Histórica</div>
                        @if($postulante->participa_historica)
                            <div class="h6 mt-1 p-2 border rounded" style="background-color: #fff5e6; color: #7a2a1e;">
                                <i class="bi bi-clock-history me-2"></i> ARCHIVO DOCUMENTAL
                            </div>
                        @else
                            <div class="text-muted small mt-1">No aporta material histórico.</div>
                        @endif
                    </div>

                    <div class="alert alert-warning border-0 small mt-4">
                        <i class="bi bi-info-circle-fill me-1"></i> 
                        <strong>Criterio:</strong> Evalúe cada obra según su naturaleza (Técnica/Artística para concurso o Valor Testimonial para el archivo).
                    </div>
                </div>
            </div>
        </div>

        {{-- Galería de Obras --}}
        <div class="col-md-8">
            <h4 class="fw-bold mb-4">Obras a Evaluar</h4>
            
            @forelse($postulante->fotos as $index => $foto)
                @php 
                    $esFav = ($foto->favoritos ?? collect())->contains(Auth::id()); 
                    
                    // Lógica de color de etiqueta según el tipo
                    $colorTipo = 'bg-dark';
                    $textoTipo = 'CONCURSO';
                    if($foto->tipo == 3) {
                        $colorTipo = 'bg-secondary';
                        $textoTipo = 'HISTÓRICA / ARCHIVO';
                    }
                @endphp
                
                <div class="card shadow-sm border-0 mb-5 overflow-hidden">
                    <div class="card-body p-2 position-relative">
                        
                        {{-- ETIQUETA DE TIPO DE FOTO --}}
                        <span class="badge {{ $colorTipo }} text-white badge-tipo-foto">
                            {{ $textoTipo }}
                        </span>

                        {{-- BOTÓN DINÁMICO DE FAVORITO --}}
                        <button type="button" 
                            class="btn-fav {{ $esFav ? 'active' : '' }}" 
                            onclick="toggleFavorito(this, {{ $foto->id }})"
                            title="{{ $esFav ? 'Quitar de preselección' : 'Preseleccionar esta obra' }}">
                            <i class="bi {{ $esFav ? 'bi-star-fill' : 'bi-star text-muted' }} fs-4"></i>
                        </button>

                        <a href="{{ asset('storage/' . $foto->ruta_foto) }}" target="_blank">
                            <img src="{{ asset('storage/' . $foto->ruta_foto) }}" class="img-fluid img-evaluacion">
                        </a>
                        
                        <div class="p-3">
                            <div class="d-flex justify-content-between align-items-center mb-2">
                                <div class="label-jurado">
                                    {{ $foto->tipo == 3 ? 'Contexto Histórico' : 'Memoria Descriptiva' }}
                                </div>
                                <span class="badge-status-text small fw-bold text-warning">
                                    {{ $esFav ? 'PRESELECCIONADA' : '' }}
                                </span>
                            </div>
                            <div class="detalle-foto text-dark bg-light rounded">
                                "{{ $foto->detalle ?? 'Sin descripción disponible.' }}"
                            </div>
                        </div>
                    </div>
                    <div class="card-footer bg-white border-0 d-flex justify-content-between text-muted small">
                        <span><i class="bi bi-image me-1"></i> Obra {{ $index + 1 }}</span>
                        <span>Postulante ID: #{{ str_pad($postulante->id, 4, '0', STR_PAD_LEFT) }}</span>
                    </div>
                </div>
            @empty
                <div class="text-center py-5">
                    <i class="bi bi-camera-video-off fs-1 text-muted"></i>
                    <p class="mt-3">Este postulante no ha cargado imágenes aún.</p>
                </div>
            @endforelse
        </div>
    </div>
</div>

<script>
// Mantener tu función toggleFavorito tal cual, ya que funciona perfectamente.
function toggleFavorito(btn, fotoId) {
    const icon = btn.querySelector('i');
    const statusText = btn.closest('.card-body').querySelector('.badge-status-text');
    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 === 'added') {
            btn.classList.add('active');
            icon.classList.replace('bi-star', 'bi-star-fill');
            icon.classList.remove('text-muted');
            statusText.innerText = 'PRESELECCIONADA';
        } else {
            btn.classList.remove('active');
            icon.classList.replace('bi-star-fill', 'bi-star');
            icon.classList.add('text-muted');
            statusText.innerText = '';
        }
    })
    .catch(err => {
        console.error("Error:", err);
        alert("Error de conexión al guardar favorito.");
    });
}
</script>
@endsection