<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Reporte — {{ $evaluacion->titulo }}</title>
<style>
    * { box-sizing: border-box; margin: 0; padding: 0; }

    body {
        font-family: DejaVu Sans, Arial, sans-serif;
        font-size: 11px;
        color: #333;
        line-height: 1.5;
    }

    /* ── Header ── */
    .header {
        border-bottom: 3px solid #4e73df;
        padding-bottom: 10px;
        margin-bottom: 18px;
    }
    .header h1 {
        font-size: 17px;
        color: #4e73df;
        margin-bottom: 4px;
    }
    .header .meta {
        font-size: 10px;
        color: #666;
    }
    .header .descripcion {
        font-size: 11px;
        color: #555;
        margin-top: 4px;
        font-style: italic;
    }

    /* ── Summary boxes ── */
    .summary-row {
        width: 100%;
        margin-bottom: 18px;
    }
    .summary-row td {
        width: 25%;
        padding: 8px 6px;
        border: 1px solid #e3e6f0;
        background: #f8f9fc;
        text-align: center;
        border-radius: 4px;
    }
    .summary-row .label {
        font-size: 9px;
        color: #666;
        text-transform: uppercase;
        letter-spacing: .5px;
        font-weight: bold;
        display: block;
    }
    .summary-row .value {
        font-size: 16px;
        font-weight: bold;
        color: #4e73df;
    }

    /* ── Pregunta block ── */
    .pregunta-block {
        margin-bottom: 22px;
        page-break-inside: avoid;
    }
    .pregunta-header {
        background: #4e73df;
        color: white;
        padding: 6px 10px;
        font-size: 11px;
        font-weight: bold;
        border-radius: 4px 4px 0 0;
    }
    .pregunta-body {
        border: 1px solid #d1d3e2;
        border-top: none;
        padding: 10px;
        border-radius: 0 0 4px 4px;
        background: #fff;
    }
    .badge-info {
        background: #36b9cc;
        color: white;
        padding: 1px 6px;
        border-radius: 3px;
        font-size: 9px;
        font-weight: bold;
    }

    /* ── Stats ── */
    .stat-line {
        font-size: 10px;
        color: #666;
        margin-bottom: 4px;
    }
    .promedio {
        font-size: 20px;
        font-weight: bold;
        color: #4e73df;
    }
    .promedio-label {
        font-size: 10px;
        color: #666;
    }

    /* ── Chart image ── */
    .chart-img {
        display: block;
        width: 100%;
        max-width: 480px;
        margin: 6px auto;
    }
    .chart-error {
        color: #aaa;
        font-size: 10px;
        text-align: center;
        padding: 15px;
        border: 1px dashed #ccc;
        border-radius: 4px;
    }

    /* ── Texto libre ── */
    .texto-libre-item {
        background: #f8f9fc;
        border-left: 3px solid #4e73df;
        padding: 5px 10px;
        margin-bottom: 5px;
        font-size: 10px;
        color: #444;
    }

    /* ── Docente section ── */
    .docente-header {
        background: #e8f7fa;
        border-left: 4px solid #36b9cc;
        padding: 5px 8px;
        margin-bottom: 6px;
        font-size: 11px;
        font-weight: bold;
        color: #2c8fa0;
    }
    .docente-block {
        margin-bottom: 14px;
        page-break-inside: avoid;
    }
    .two-col-table { width: 100%; }
    .two-col-table td { width: 50%; vertical-align: top; padding: 0 5px; }
    .two-col-table td:first-child { padding-left: 0; }
    .two-col-table td:last-child { padding-right: 0; }

    /* ── Footer ── */
    .footer {
        margin-top: 30px;
        border-top: 1px solid #e3e6f0;
        padding-top: 8px;
        text-align: center;
        font-size: 9px;
        color: #aaa;
    }

    .no-data { color: #aaa; font-size: 10px; font-style: italic; }
</style>
</head>
<body>

{{-- ENCABEZADO --}}
<div class="header">
    <h1><span style="color:#4e73df;">&#9646;</span> {{ $evaluacion->titulo }}</h1>
    <div class="meta">
        <strong>Tipo:</strong> {{ $evaluacion->tipo?->nombre }}
        &nbsp;|&nbsp;
        <strong>Estado:</strong> {{ ucfirst($evaluacion->status) }}
        &nbsp;|&nbsp;
        <strong>Participantes:</strong> {{ $totalSubmissions }}
        &nbsp;|&nbsp;
        <strong>Generado:</strong> {{ now()->format('d/m/Y H:i') }}
        @if($evaluacion->fecha_inicio || $evaluacion->fecha_fin)
            &nbsp;|&nbsp;
            <strong>Vigencia:</strong>
            {{ $evaluacion->fecha_inicio?->format('d/m/Y') ?? '—' }}
            al
            {{ $evaluacion->fecha_fin?->format('d/m/Y') ?? '—' }}
        @endif
    </div>
    @if($evaluacion->descripcion)
        <div class="descripcion">{{ $evaluacion->descripcion }}</div>
    @endif
</div>

{{-- RESUMEN --}}
<table class="summary-row" cellspacing="4" cellpadding="0">
    <tr>
        <td>
            <span class="label">Participantes</span>
            <span class="value" style="color:#4e73df;">{{ $totalSubmissions }}</span>
        </td>
        <td>
            <span class="label">Preguntas</span>
            <span class="value" style="color:#36b9cc;">{{ count($datos) }}</span>
        </td>
        <td>
            <span class="label">Estado</span>
            <span class="value" style="font-size:13px; color:#1cc88a;">{{ ucfirst($evaluacion->status) }}</span>
        </td>
        <td>
            <span class="label">Tipo</span>
            <span class="value" style="font-size:13px; color:#f6c23e;">{{ $evaluacion->tipo?->nombre }}</span>
        </td>
    </tr>
</table>

@if($totalSubmissions === 0)
    <p class="no-data" style="text-align:center; padding:20px;">
        Esta evaluación aún no tiene respuestas registradas.
    </p>
@endif

{{-- PREGUNTAS --}}
@foreach($datos as $i => $item)
@php $pregunta = $item['pregunta']; @endphp

<div class="pregunta-block">

    <div class="pregunta-header">
        {{ $i + 1 }}. {{ $pregunta->texto }}
        @if($pregunta->es_docente)
            &nbsp;<span class="badge-info">Por docente</span>
        @endif
        <span style="float:right; font-weight:normal; font-size:9px;">
            {{ $pregunta->tipo?->nombre }}
        </span>
    </div>

    <div class="pregunta-body">

        {{-- Texto libre --}}
        @if($item['tipo'] === 'texto_libre')

            @if(!$item['es_docente'])
                @forelse($item['textos'] as $txt)
                    <div class="texto-libre-item">{{ $txt }}</div>
                @empty
                    <p class="no-data">Sin respuestas registradas.</p>
                @endforelse
            @else
                @foreach($item['por_docente'] as $pd)
                <div class="docente-block">
                    <div class="docente-header">
                        {{ $pd['docente_nombre'] }}
                        <span style="font-weight:normal; font-size:9px; color:#666;">
                            — {{ $pd['total'] }} respuesta(s)
                        </span>
                    </div>
                    @forelse($pd['textos'] as $txt)
                        <div class="texto-libre-item">{{ $txt }}</div>
                    @empty
                        <p class="no-data">Sin respuestas.</p>
                    @endforelse
                </div>
                @endforeach
            @endif

        {{-- Gráfica única --}}
        @elseif(!$item['es_docente'])

            @if($item['total'] > 0)
                <table style="width:100%;" cellpadding="0" cellspacing="0">
                    <tr>
                        <td style="width:70%; vertical-align:middle;">
                            @if(isset($item['chart_img']))
                                <img src="{{ $item['chart_img'] }}" class="chart-img" alt="Gráfica">
                            @else
                                <div class="chart-error">Gráfica no disponible</div>
                            @endif
                        </td>
                        <td style="width:30%; vertical-align:middle; text-align:center; padding-left:10px;">
                            <div class="stat-line">Respuestas</div>
                            <div class="promedio" style="font-size:24px;">{{ $item['total'] }}</div>
                            @if(isset($item['promedio']))
                                <div style="margin-top:10px;">
                                    <div class="stat-line">Promedio</div>
                                    <div class="promedio">{{ $item['promedio'] }}</div>
                                    <div class="promedio-label">/ {{ str_contains($item['tipo'], '10') ? '10' : '5' }}</div>
                                </div>
                            @endif
                        </td>
                    </tr>
                </table>
            @else
                <p class="no-data">Sin respuestas registradas.</p>
            @endif

        {{-- Gráficas por docente (tabla 2 columnas) --}}
        @else

            @if(empty($item['por_docente']))
                <p class="no-data">Sin respuestas registradas.</p>
            @else
                @php
                    $chunks = array_chunk($item['por_docente'], 2);
                @endphp
                @foreach($chunks as $pair)
                <table class="two-col-table" cellpadding="0" cellspacing="0" style="margin-bottom:10px;">
                    <tr>
                        @foreach($pair as $pd)
                        <td>
                            <div class="docente-block">
                                <div class="docente-header">
                                    {{ $pd['docente_nombre'] }}
                                    @if(isset($pd['promedio']))
                                        &nbsp;·&nbsp;
                                        <span style="font-size:9px; color:#36b9cc;">
                                            Prom: {{ $pd['promedio'] }}
                                        </span>
                                    @endif
                                </div>
                                @if($pd['total'] > 0)
                                    @if(isset($pd['chart_img']))
                                        <img src="{{ $pd['chart_img'] }}" style="width:100%; display:block;" alt="Gráfica">
                                    @else
                                        <div class="chart-error">Gráfica no disponible</div>
                                    @endif
                                    <p class="stat-line" style="text-align:center; margin-top:4px;">
                                        {{ $pd['total'] }} respuesta(s)
                                    </p>
                                @else
                                    <p class="no-data">Sin respuestas.</p>
                                @endif
                            </div>
                        </td>
                        @endforeach
                        @if(count($pair) === 1)
                        <td></td>
                        @endif
                    </tr>
                </table>
                @endforeach
            @endif

        @endif

    </div>
</div>
@endforeach

<div class="footer">
    Reporte generado el {{ now()->format('d/m/Y \a \l\a\s H:i') }} — Sistema Educativo
</div>

</body>
</html>
