@extends('admin.panel')

@section('head')
<meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="{{ asset('css/preguntas.css') }}">
@endsection

@section('contenido')
<div class="panel-contenido">
    <h2>Agregar preguntas a la encuesta: {{ $encuesta->titulo }}</h2>

    @if (session('success'))
        <div class="alerta-exito">{{ session('success') }}</div>
    @endif

    <!-- Formulario dinámico -->
    <form method="POST" action="{{ route('preguntas.store', $encuesta->id) }}">
        @csrf
        <input type="hidden" name="encuesta_id" value="{{ $encuesta->id }}">

        <div class="input-group">
            <label for="tipo_pregunta">Tipo de pregunta</label>
            <select id="tipo_pregunta" name="tipo_pregunta" required>
                <option value="">-- Selecciona --</option>
                <option value="uma">Pregunta UMA</option>
                <option value="opcion_multiple">Opción múltiple</option>
                <option value="abierta">Respuesta abierta</option>
                <option value="likert">Escala de Likert</option>
                <option value="condicional">Condicional</option>
                <option value="geografica">Pregunta Geográfica</option>
                <option value="prueba">prueba</option>
            </select>
        </div>

        <div id="contenedor-formulario" style="margin-top: 20px;"></div>

        <div class="modal-acciones">
            <button type="submit" class="btn-guardar">Guardar Pregunta</button>
        </div>
    </form>

    <!-- Lista de preguntas guardadas -->
    @if($preguntas->isNotEmpty())
    <hr>
    <h3>Preguntas guardadas</h3>
    <ul class="preguntas-ul">
    @php
        $preguntasOrdenadas = $preguntas->sortBy('orden')->values();
    @endphp

    @foreach($preguntasOrdenadas as $pregunta)
    <li class="pregunta-item" data-orden="{{ $pregunta->orden }}" id="li-pregunta-{{ $pregunta->id }}">
        <div class="pregunta-card" id="pregunta-vista-{{ $pregunta->id }}">
                <strong>{{ $loop->iteration }}. {{ $pregunta->texto }}</strong>
                @if($pregunta->condicion_pregunta_id)
                    <div style="font-size: 0.9em; color: #555; margin-top: 4px;">
                        🔁 Condicional (aparece si la pregunta <strong>
                        {{ $preguntas->firstWhere('id', $pregunta->condicion_pregunta_id)?->texto ?? 'desconocida' }}</strong> se responde con "<strong>{{ $pregunta->condicion_respuesta_valor }}</strong>")
                    </div>
                @endif

                @if($pregunta->tipo_pregunta === 'opcion_multiple' && $pregunta->opciones->count())
                    <ul style="margin-left: 20px; margin-top: 10px;">
                        @foreach($pregunta->opciones as $opcion)
                            <li>🔘 {{ $opcion->texto }}</li>
                        @endforeach
                    </ul>
                @endif

                @if($pregunta->tipo_pregunta === 'likert' && $pregunta->items)
                    <ul style="margin-left: 20px; margin-top: 10px;">
                        @foreach(json_decode($pregunta->items) as $item)
                            <li>📊 {{ $item }}</li>
                        @endforeach
                    </ul>
                @endif
                @if($pregunta->tipo_pregunta === 'geografica')
                    <ul style="margin-left: 20px; margin-top: 10px;">
                        <li>🌎 Selección por ubicación: Departamento / Provincia / Distrito</li>
                        @if($pregunta->permite_otra)
                            <li>✍️ Incluye campo de texto para extranjeros u 'Otros'</li>
                        @endif
                    </ul>
                @endif
                @if($pregunta->tipo_pregunta === 'uma' && $pregunta->opciones->count())
                    <ul style="margin-left: 20px; margin-top: 10px;">
                        @foreach($pregunta->opciones as $opcion)
                            <li>🔍 Campo: {{ $opcion->texto }}</li>
                        @endforeach
                    </ul>
                @endif


          
                <div style="margin-top: 10px;">
                <button type="button" class="btn-editar" onclick="mostrarFormularioEditar({{ $pregunta->id }})">✏️ Editar</button>
                <form method="POST" action="{{ route('preguntas.destroy', $pregunta->id) }}" style="display:inline;">
                        @csrf
                        @method('DELETE')
                        <button type="submit" class="btn-eliminar" onclick="return confirm('¿Eliminar esta pregunta?')">🗑 Eliminar</button>
                        </form>
                </div>
            </div>

<!-- Formulario de edición -->
<div class="pregunta-card" id="pregunta-editar-{{ $pregunta->id }}" style="display: none;">
    <form method="POST" action="{{ route('preguntas.update', $pregunta->id) }}">
        @csrf
        @method('PUT')
        <input type="hidden" name="encuesta_id" value="{{ $encuesta->id }}">

        <div class="input-group">
            <label for="texto">Texto de la Pregunta</label>
            <input type="text" name="texto" value="{{ $pregunta->texto }}" required>
        </div>

        @if($pregunta->tipo_pregunta === 'opcion_multiple')
        <p style="font-size: 0.9em; color: #666; margin-bottom: 8px;">
                (Opciones actuales — solo lectura)
            </p>
            @foreach ($pregunta->opciones as $opcion)
                @if(strtolower(trim($opcion->texto)) !== 'otra')
                    <label class="opcion-label" style="opacity: 0.7;">
                        <input type="{{ $pregunta->multiple_respuestas ? 'checkbox' : 'radio' }}"
                            disabled
                            value="{{ $opcion->texto }}">
                        {{ $opcion->texto }}
                    </label>
                @endif
            @endforeach


            @if ($pregunta->permite_otra || $pregunta->opciones->contains(fn($op) => strtolower(trim($op->texto)) === 'otra'))
                <label class="opcion-label">
                    <input type="{{ $pregunta->multiple_respuestas ? 'checkbox' : 'radio' }}"
                        name="pregunta_{{ $pregunta->id }}{{ $pregunta->multiple_respuestas ? '[]' : '' }}"
                        value="otra"
                        data-pregunta-id="{{ $pregunta->id }}">
                    Otra:
                </label>
                <input type="text"
                    name="pregunta_{{ $pregunta->id }}_otra"
                    id="otra_input_{{ $pregunta->id }}"
                    class="input-otra"
                    placeholder="Especifica tu respuesta..."
                    style="display: none;">
            @endif
        @endif


        @if($pregunta->tipo_pregunta === 'likert')
            <div class="input-group">
                <label>Ítems de la escala Likert (uno por línea)</label>
                <textarea name="items" rows="4">{{ implode("\n", json_decode($pregunta->items ?? '[]')) }}</textarea>
            </div>
        @endif

        <div class="checkbox-group">
            @if(in_array($pregunta->tipo_pregunta, ['opcion_multiple', 'geografica']))
            <label>
                <input type="checkbox" name="opcion_otra" {{ $pregunta->permite_otra ? 'checked' : '' }}>
                Incluir opción 'Otra...'
            </label>
            @endif

            <label>
                <input type="checkbox" name="obligatoria" {{ $pregunta->obligatoria ? 'checked' : '' }}>
                ¿Es obligatoria?
            </label>
        </div>

        <div class="input-group">
            <label>
            <input type="checkbox" id="check-condicional-{{ $pregunta->id }}" onclick="toggleCondicionalById({{ $pregunta->id }})"
            {{ $pregunta->condicion_pregunta_id ? 'checked' : '' }}>
                ¿Esta pregunta es condicional?
            </label>
        </div>

        <div class="input-group" id="bloque-condicional-{{ $pregunta->id }}"
            style="margin-top: 15px; border: 1px dashed #aaa; padding: 10px; {{ $pregunta->condicion_pregunta_id ? '' : 'display: none;' }}">
            <label for="condicion_pregunta_id">Depende de la pregunta:</label>
            <select name="condicion_pregunta_id">
                <option value="">-- Ninguna --</option>
                @foreach($preguntas as $p)
                    @if($p->id !== $pregunta->id)
                        <option value="{{ $p->id }}" {{ $pregunta->condicion_pregunta_id == $p->id ? 'selected' : '' }}>
                            {{ $p->texto }}
                        </option>
                    @endif
                @endforeach
            </select>
            <label for="condicion_respuesta_valor" style="margin-top: 10px;">
                Mostrar si la respuesta es (una o más, separadas por coma):
            </label>
            <input type="text" name="condicion_respuesta_valor"
                value="{{ $pregunta->condicion_respuesta_valor }}"
                placeholder="Ej: Sí - Tal vez - Otra">


        </div>

        <div class="modal-acciones">
            <button type="submit" class="btn-guardar">💾 Guardar</button>
            <button type="button" onclick="cancelarEdicion({{ $pregunta->id }})" class="btn-cerrar">Cancelar</button>
        </div>
    </form>
</div>




        </li>
        @endforeach
    </ul>
    @endif
</div>
@endsection
<script>
    const preguntasDisponibles = @json($preguntas);
    const camposUMA = @json($campos_vw_datalu);
</script>

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>

<script>
document.addEventListener('DOMContentLoaded', () => {
    const preguntasList = document.querySelector('.preguntas-ul');

    if (preguntasList) {
        Sortable.create(preguntasList, {
            animation: 150,
            handle: '.pregunta-card', // Solo podrás arrastrar haciendo clic en el área de la pregunta
            onEnd: function (evt) {
                // Cuando se termina de mover, actualizamos el orden
                actualizarOrdenPreguntas();
            }
        });
    }
});

function actualizarOrdenPreguntas() {
    const preguntas = document.querySelectorAll('.preguntas-ul .pregunta-item');
    const ordenData = [];

    preguntas.forEach((pregunta, index) => {
        const id = pregunta.querySelector('.pregunta-card').id.replace('pregunta-vista-', '');
        ordenData.push({
            id: id,
            orden: index + 1
        });
    });

    // Mandar por AJAX al servidor
    fetch('{{ route('preguntas.actualizarOrden') }}', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        },
        body: JSON.stringify({
            orden: ordenData
        })
    })
    .then(response => response.json())
    .then(data => {
        console.log('Orden actualizado', data);
    })
    .catch(error => {
        console.error('Error actualizando el orden:', error);
    });
}
</script>

<script>
document.addEventListener('DOMContentLoaded', () => {
    const tipoSelect = document.getElementById('tipo_pregunta');
    const contenedorFormulario = document.getElementById('contenedor-formulario');

    tipoSelect.addEventListener('change', () => {
        const tipo = tipoSelect.value;
        contenedorFormulario.innerHTML = '';

        if (tipo === 'opcion_multiple') {
    contenedorFormulario.innerHTML = `
        <div class="input-group">
            <label for="texto">Texto de la Pregunta</label>
            <input type="text" name="texto" required>
        </div>

        <div id="opciones-container">
            <label>Opciones:</label>
            <div id="opciones-list">
                <input type="text" name="opciones[]" placeholder="Opción 1" required>
                <input type="text" name="opciones[]" placeholder="Opción 2" required>
            </div>
            <button type="button" onclick="agregarOpcion()">+ Añadir opción</button>
        </div>

        <div class="checkbox-group">
            <label>
                <input type="checkbox" name="opcion_otra"> Incluir opción 'Otra...'
            </label>

            <label>
                <input type="checkbox" name="obligatoria"> ¿Es obligatoria?
            </label>
            <label>
                <input type="checkbox" name="multiple_respuestas">
                Permitir marcar varias opciones
            </label>
        </div>


    `;
}else if (tipo === 'likert') {
            contenedorFormulario.innerHTML = `
                <div class="input-group">
                    <label for="texto">Texto de la Pregunta</label>
                    <input type="text" name="texto" required>
                </div>

                <div class="input-group">
                    <label for="items_likert">Ítems de evaluación (uno por línea)</label>
                    <textarea name="items_likert" rows="4" placeholder="Ej: Claridad del docente\nAcceso a materiales\nParticipación en clase" required></textarea>
                </div>

                <div class="checkbox-group">
                    <label>
                        <input type="checkbox" name="opcion_otra"> Incluir opción 'Otra...'
                    </label>

                    <label>
                        <input type="checkbox" name="obligatoria"> ¿Es obligatoria?
                    </label>
                </div>

            `;
        } else if (tipo === 'geografica') {
            contenedorFormulario.innerHTML = `
                <div class="input-group">
                    <label for="texto">Texto de la Pregunta</label>
                    <input type="text" name="texto" required>
                </div>

                <div class="checkbox-group">
                    <label>
                        <input type="checkbox" name="opcion_otra"> Incluir opción 'Otra...'
                    </label>

                    <label>
                        <input type="checkbox" name="obligatoria"> ¿Es obligatoria?
                    </label>
                </div>

            `;
        } else if (tipo === 'uma') {
            let checkboxesUMA = camposUMA.map(campo => `
                <label><input type="checkbox" name="campos_uma[]" value="${campo}"> ${campo}</label><br>
            `).join('');

            contenedorFormulario.innerHTML = `
                <div class="input-group">
                    <label for="texto">Texto de la Pregunta (Ingrese su Código ó DNI)</label>
                    <input type="text" name="texto" value="Ingrese su Código ó DNI" readonly>
                </div>

                <div class="input-group">
                    <label>Selecciona los campos a consultar:</label>
                    <div id="campos-uma-list">
                      
                        @foreach(array_chunk($campos_vw_datalu, 10) as $bloque)
                            <div class="fila-campos">
                                @foreach($bloque as $campo)
                                    <label class="campo-item">
                                        <input type="checkbox" name="campos_uma[]" value="{{ $campo }}">
                                        {{ $campo }}
                                    </label>
                                @endforeach
                            </div>
                        @endforeach
                    </div>

                    </div>
                </div>
             <div class="checkbox-group">
                    <label>
                        <input type="checkbox" name="opcion_otra"> Incluir opción 'Otra...'
                    </label>

                    <label>
                        <input type="checkbox" name="obligatoria"> ¿Es obligatoria?
                    </label>
                </div>

            `;
        }else if (tipo !== '') {
            contenedorFormulario.innerHTML = `
                <div class="input-group">
                    <label for="texto">Texto de la Pregunta</label>
                    <input type="text" name="texto" required>
                </div>

                <div class="checkbox-group">
                    <label>
                        <input type="checkbox" name="opcion_otra"> Incluir opción 'Otra...'
                    </label>

                    <label>
                        <input type="checkbox" name="obligatoria"> ¿Es obligatoria?
                    </label>
                </div>

            `;
        }
    });
});

function agregarOpcion() {
    const container = document.getElementById('opciones-list');
    const input = document.createElement('input');
    input.type = "text";
    input.name = "opciones[]";
    input.placeholder = "Nueva opción";
    container.appendChild(input);
}

function mostrarFormularioEditar(id) {
    document.getElementById('pregunta-vista-' + id).style.display = 'none';
    document.getElementById('pregunta-editar-' + id).style.display = 'block';
}

function cancelarEdicion(id) {
    document.getElementById('pregunta-editar-' + id).style.display = 'none';
    document.getElementById('pregunta-vista-' + id).style.display = 'block';
}

function getCondicionalHTML() {
    if (!preguntasDisponibles || preguntasDisponibles.length === 0) {
        return `
            <div style="margin-top: 15px; padding: 10px; border: 1px dashed #ccc; color: #555;">
                <strong>ℹ️ Para activar la opción condicional, primero debes crear al menos una pregunta.</strong>
            </div>
        `;
    }

    let opciones = `<option value="">-- Selecciona --</option>`;
    preguntasDisponibles.forEach(p => {
        opciones += `<option value="${p.id}">${p.texto}</option>`;
    });

    return `
        <div id="condicional-config" style="margin-top: 20px; border: 1px dashed #ccc; padding: 10px;">
            <label>
                <input type="checkbox" id="es_condicional" onchange="toggleCondicionalCheckbox(this)">
                ¿Esta pregunta es condicional?
            </label>

            <div id="condicional-campos" style="display: none;">
                <div class="input-group">
                    <label for="condicion_pregunta_id">Depende de la pregunta:</label>
                    <select name="condicion_pregunta_id">${opciones}</select>
                </div>

                <div class="input-group">
                    <label for="condicion_respuesta_valor">
                        Mostrar si la respuesta es (una o más, separadas por guion):
                    </label>
                    <input type="text" name="condicion_respuesta_valor" placeholder="Ej: Sí - Tal vez">
                </div>
            </div>
        </div>
    `;
}


function toggleCondicionalCheckbox(checkbox) {
    const div = document.getElementById('condicional-campos');
    if (div) div.style.display = checkbox.checked ? 'block' : 'none';
}

function toggleCondicionalById(id) {
    const check = document.getElementById(`check-condicional-${id}`);
    const bloque = document.getElementById(`bloque-condicional-${id}`);

    if (check.checked) {
        bloque.style.display = 'block';
    } else {
        bloque.style.display = 'none';
        
        // Limpia valores para evitar que se envíen al servidor
        const select = bloque.querySelector('select[name="condicion_pregunta_id"]');
        const input = bloque.querySelector('input[name="condicion_respuesta_valor"]');
        
        if (select) select.value = '';
        if (input) input.value = '';
    }
}


</script>
@endpush