@extends('admin.panel')

@section('head')
<link rel="stylesheet" href="{{ asset('css/diseño_reporte.css') }}">

@endsection

@section('contenido')
<div class="contenedor-tabla">
    <h2 class="titulo-reporte">Diseñar Reporte de la Encuesta: <strong>{{ $encuesta->titulo }}</strong></h2>

    <form method="POST" action="{{ route('encuestas.reporte.diseñar.guardar', $encuesta->id) }}">
        @csrf

        <table class="tabla-simple">
            <thead>
                <tr>
                    <th>#</th>
                    <th>Pregunta</th>
                    <th>Tipo</th>
                    <th>Tipo de Gráfica</th>
                </tr>
            </thead>
            <tbody>
                @foreach($preguntas as $pregunta)
                <tr>
                    <td>{{ $pregunta->orden ?? $pregunta->id }}</td>
                    <td class="col-pregunta">{{ $pregunta->texto }}</td>
                    <td><span class="badge-tipo">{{ ucfirst($pregunta->tipo_pregunta ?? 'No definido') }}</span></td>
                    <td>
                        <select name="graficas[{{ $pregunta->id }}]" class="grafica-select">
                            <option value="">-- Selecciona --</option>
                            <option value="barra" {{ $pregunta->tipo_grafica === 'barra' ? 'selected' : '' }}>📊 Barras</option>
                            <option value="barra_horizontal" {{ $pregunta->tipo_grafica === 'barra_horizontal' ? 'selected' : '' }}>📊 Barras horizontal</option>
                            <option value="torta" {{ $pregunta->tipo_grafica === 'torta' ? 'selected' : '' }}>🥧 Torta</option>
                            <option value="linea" {{ $pregunta->tipo_grafica === 'linea' ? 'selected' : '' }}>📈 Línea</option>
                            <option value="uma" {{ $pregunta->tipo_grafica === 'uma' ? 'selected' : '' }}>🌄 UMA</option>
                            <option value="radar" {{ $pregunta->tipo_grafica === 'radar' ? 'selected' : '' }}>🕸️ Radar</option>
                            <option value="heatmap" {{ $pregunta->tipo_grafica === 'heatmap' ? 'selected' : '' }}>🔥 Mapa de calor</option>
                            <option value="embudo" {{ $pregunta->tipo_grafica === 'embudo' ? 'selected' : '' }}>🔻 Embudo</option>
                            <option value="nube_palabras" {{ $pregunta->tipo_grafica === 'nube_palabras' ? 'selected' : '' }}>☁️ Nube de palabras</option>
                            <option value="conteo_total" {{ $pregunta->tipo_grafica === 'conteo_total' ? 'selected' : '' }}>🔢 Conteo total</option>
                        </select>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>

        <div class="guardar-fijo">
            <button class="btn-guardar" type="submit">💾 Guardar Diseño</button>
        </div>
    </form>
</div>
@endsection