@extends('layouts.landing')

@section('title', $evaluacion->titulo)

@section('content')
<div class="container-fluid">

    @if(session('info'))
        <div class="alert alert-success alert-dismissible fade show">
            {{ session('info') }}
            <button type="button" class="close" data-dismiss="alert"><span>&times;</span></button>
        </div>
    @endif

    <!-- Header -->
    <div class="d-sm-flex align-items-center justify-content-between mb-3">
        <h5 class="m-0 font-weight-bold text-primary">
            <i class="fas fa-clipboard-list mr-1"></i> {{ $evaluacion->titulo }}
        </h5>
        <div>
            <a href="{{ route('evaluacion.edit', $evaluacion) }}" class="btn btn-sm btn-primary mr-1">
                <i class="fas fa-edit"></i> Editar
            </a>
            <a href="{{ route('evaluacion.index') }}" class="btn btn-sm btn-secondary">
                <i class="fas fa-arrow-left"></i> Regresar
            </a>
        </div>
    </div>

    <div class="row">
        <!-- Columna info general -->
        <div class="col-lg-4 mb-4">

            <!-- Tarjeta de info -->
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">Información general</h6>
                </div>
                <div class="card-body">
                    @if($evaluacion->descripcion)
                        <p class="text-muted">{{ $evaluacion->descripcion }}</p>
                        <hr>
                    @endif

                    <dl class="row mb-0">
                        <dt class="col-sm-5">Tipo</dt>
                        <dd class="col-sm-7">
                            @php $slug = $evaluacion->tipo?->slug; @endphp
                            @if($slug === 'docente')
                                <span class="badge badge-info">Docentes</span>
                            @elseif($slug === 'alumno')
                                <span class="badge badge-success">Alumnos</span>
                            @elseif($slug === 'administrativo')
                                <span class="badge badge-warning text-dark">Administrativos</span>
                            @endif
                        </dd>

                        <dt class="col-sm-5">Estado</dt>
                        <dd class="col-sm-7">
                            @if($evaluacion->status === 'activa')
                                <span class="badge badge-success">Activa</span>
                            @elseif($evaluacion->status === 'borrador')
                                <span class="badge badge-secondary">Borrador</span>
                            @else
                                <span class="badge badge-dark">Cerrada</span>
                            @endif
                        </dd>

                        <dt class="col-sm-5">Anónima</dt>
                        <dd class="col-sm-7">{{ $evaluacion->anonima ? 'Sí' : 'No' }}</dd>

                        <dt class="col-sm-5">Preguntas</dt>
                        <dd class="col-sm-7">{{ $evaluacion->preguntas->count() }}</dd>

                        <dt class="col-sm-5">Respuestas</dt>
                        <dd class="col-sm-7">{{ $evaluacion->submissions->count() }}</dd>

                        @if($evaluacion->fecha_inicio || $evaluacion->fecha_fin)
                        <dt class="col-sm-5">Inicio</dt>
                        <dd class="col-sm-7">{{ $evaluacion->fecha_inicio?->format('d/m/Y') ?? '—' }}</dd>
                        <dt class="col-sm-5">Fin</dt>
                        <dd class="col-sm-7">{{ $evaluacion->fecha_fin?->format('d/m/Y') ?? '—' }}</dd>
                        @endif
                    </dl>
                </div>
            </div>

            <!-- Planteles asignados -->
            @if($evaluacion->planteles->isNotEmpty())
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">Planteles</h6>
                </div>
                <div class="card-body py-2">
                    @foreach($evaluacion->planteles as $plantel)
                        <span class="badge badge-light border mr-1 mb-1">{{ $plantel->name }}</span>
                    @endforeach
                </div>
            </div>
            @endif

            <!-- Niveles asignados -->
            @if($evaluacion->niveles->isNotEmpty())
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">Niveles educativos</h6>
                </div>
                <div class="card-body py-2">
                    @foreach($evaluacion->niveles as $nivel)
                        <span class="badge badge-light border mr-1 mb-1">{{ $nivel->name }}</span>
                    @endforeach
                </div>
            </div>
            @endif

            <!-- Cambiar estado -->
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">Cambiar estado</h6>
                </div>
                <div class="card-body">
                    <form action="{{ route('evaluacion.toggleStatus', $evaluacion) }}" method="POST">
                        @csrf @method('PATCH')
                        <div class="form-group">
                            <select name="status" class="form-control form-control-sm">
                                <option value="borrador" {{ $evaluacion->status === 'borrador' ? 'selected' : '' }}>Borrador</option>
                                <option value="activa"   {{ $evaluacion->status === 'activa'   ? 'selected' : '' }}>Activa</option>
                                <option value="cerrada"  {{ $evaluacion->status === 'cerrada'  ? 'selected' : '' }}>Cerrada</option>
                            </select>
                        </div>
                        <button type="submit" class="btn btn-sm btn-outline-primary btn-block">
                            <i class="fas fa-sync-alt mr-1"></i> Actualizar estado
                        </button>
                    </form>
                </div>
            </div>
        </div>

        <!-- Columna preguntas -->
        <div class="col-lg-8 mb-4">
            <div class="card shadow">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">
                        Preguntas ({{ $evaluacion->preguntas->count() }})
                    </h6>
                </div>
                <div class="card-body">
                    @forelse($evaluacion->preguntas as $i => $pregunta)
                    <div class="card border-left-primary mb-3">
                        <div class="card-body py-2 px-3">
                            <div class="d-flex justify-content-between align-items-start">
                                <div class="flex-grow-1">
                                    <small class="text-muted font-weight-bold d-block mb-1">
                                        Pregunta {{ $i + 1 }}
                                        @if($pregunta->requerida)
                                            <span class="text-danger">*</span>
                                        @endif
                                    </small>
                                    <p class="mb-1 font-weight-bold">{{ $pregunta->texto }}</p>
                                    <small class="text-muted">{{ $pregunta->tipo?->nombre }}</small>
                                </div>
                            </div>

                            @if($pregunta->tipo?->slug === 'opcion_multiple' && $pregunta->opciones->isNotEmpty())
                                <ul class="mt-2 mb-0 pl-3">
                                    @foreach($pregunta->opciones as $opcion)
                                        <li><small>{{ $opcion->texto }}</small></li>
                                    @endforeach
                                </ul>
                            @elseif($pregunta->tipo?->slug === 'si_no')
                                <div class="mt-2">
                                    <span class="badge badge-outline-secondary border mr-1">Sí</span>
                                    <span class="badge badge-outline-secondary border">No</span>
                                </div>
                            @elseif($pregunta->tipo?->slug === 'escala_5')
                                <div class="mt-2">
                                    @for($k = 1; $k <= 5; $k++)
                                        <span class="badge badge-light border mr-1">{{ $k }}</span>
                                    @endfor
                                    <small class="text-muted">/ 5</small>
                                </div>
                            @elseif($pregunta->tipo?->slug === 'escala_10')
                                <div class="mt-2">
                                    @for($k = 1; $k <= 10; $k++)
                                        <span class="badge badge-light border mr-1">{{ $k }}</span>
                                    @endfor
                                    <small class="text-muted">/ 10</small>
                                </div>
                            @elseif($pregunta->tipo?->slug === 'texto_libre')
                                <div class="mt-2">
                                    <small class="text-muted font-italic">— Respuesta abierta —</small>
                                </div>
                            @endif
                        </div>
                    </div>
                    @empty
                        <p class="text-muted text-center py-3">Esta evaluación no tiene preguntas.</p>
                    @endforelse
                </div>
            </div>
        </div>
    </div>
</div>
@endsection