@extends('layouts.main')
@section('title', 'PsicoSocial - Sociofamiliares')

@section('content')

@php
$modulos = ['estresse', 'assedio', 'deficiencia', 'acoes', 'sociofamiliares'];
$moduloAtual = 'sociofamiliares';
$user = Auth::user();
@endphp

@if (is_null($user->modulo5) || $user->modulo5 == 0)
<div class="container d-flex justify-content-center align-items-center">
    <div class="card shadow p-4" style="max-width: 600px; width: 100%;">
        <div class="text-center text-primary mt-1">
            <h6 class="mb-0">Módulo 05</h6>
            <h3>Aspectos Sociofamiliares</h3>
        </div>

        <div class="text-center mt-1 text-primary">
            <span id="contador-perguntas">Pergunta 1 de {{ count($perguntas) }}</span>
        </div>

        <div class="d-flex justify-content-center align-items-center mt-1 mb-4">
            <div id="progress-bar-perguntas" class="progress-bar-modulos d-flex gap-3"></div>
        </div>

        <div id="loading-pergunta" style="display: none; justify-content: center; align-items: center;">
            <div class="spinner-border text-primary" role="status" style="width: 2.5rem; height: 2.5rem;">
                <span class="visually-hidden">Carregando próxima pergunta...</span>
            </div>
        </div>

        <div id="pergunta-container" class="text-center"></div>

        <div id="navegacao-perguntas" class="d-flex justify-content-between mt-1 px-3" style="display: none;">
            <button class="btn btn-secondary btn-lg" onclick="voltarPergunta()">Voltar</button>
            <button class="btn btn-primary btn-lg" onclick="avancarPergunta()">Próxima</button>
        </div>

        <form id="form-respostas" method="POST" action="{{ route('responder.sociofamiliares') }}" style="display: none;">
            @csrf
            @for ($i = 1; $i <= count($perguntas); $i++)
                <input type="hidden" name="pergunta{{ $i }}" id="pergunta{{ $i }}">
            @endfor
        </form>
    </div>
</div>

<div class="text-center mb-3 mt-1">
    <button class="btn btn-danger btn-sm" data-bs-toggle="modal" data-bs-target="#modalDesistir">
        Desistir
    </button>
</div>

<!-- Modal de Confirmação -->
<div class="modal fade" id="modalConfirmarEnvio" tabindex="-1" aria-labelledby="modalConfirmarEnvioLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalConfirmarEnvioLabel">Confirmação</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fechar"></button>
            </div>
            <div class="modal-body">
                Deseja realmente enviar suas respostas?
            </div>
            <div class="modal-footer justify-content-center">
                <button type="button" class="btn btn-success" onclick="confirmarEnvio()">Salvar respostas</button>
            </div>
        </div>
    </div>
</div>

<script>
    const perguntas = @json($perguntas);

    const opcoes = [
        { valor: 0, texto: "Nunca" },
        { valor: 1, texto: "Quase nunca" },
        { valor: 2, texto: "Raramente" },
        { valor: 3, texto: "Às vezes" },
        { valor: 4, texto: "Quase sempre" },
        { valor: 5, texto: "Sempre" }
    ];

    let atual = 0;
    const respostas = {};

    function inicializarBolinhas() {
        const container = document.getElementById('progress-bar-perguntas');
        container.innerHTML = '';
        for (let i = 0; i < perguntas.length; i++) {
            const bolinha = document.createElement('div');
            bolinha.classList.add('progress-circle');
            bolinha.id = `bolinha-${i}`;
            container.appendChild(bolinha);
        }
        atualizarProgresso();
    }

    function atualizarProgresso() {
        document.getElementById('contador-perguntas').innerText = `Pergunta ${atual + 1} de ${perguntas.length}`;
        for (let i = 0; i < perguntas.length; i++) {
            const bolinha = document.getElementById(`bolinha-${i}`);
            bolinha.classList.toggle('filled', i <= atual);
        }
    }

    function renderizarPergunta() {
        const container = document.getElementById('pergunta-container');
        const pergunta = perguntas[atual];
        const respostaAnterior = respostas[`pergunta${atual + 1}`];

        container.innerHTML = `
            <div class="p-3">
                <div class="border p-4 mb-2 rounded" style="font-weight: bold; font-size: 20px;">
                    ${pergunta}
                </div>
                <p>Selecione uma alternativa e clique em "Próxima" para avançar.</p>
                <hr>
                ${opcoes.map(op =>
                    `<button class="btn mb-3 d-block w-100 rounded-pill ${respostaAnterior === op.valor ? 'btn-success' : 'btn-primary'}"
                        onclick="selecionarResposta(${op.valor})">${op.texto}</button>`
                ).join('')}
            </div>
        `;

        document.getElementById('navegacao-perguntas').style.display = 'flex';
        atualizarProgresso();
    }

    function selecionarResposta(valor) {
        respostas[`pergunta${atual + 1}`] = valor;
        renderizarPergunta();
    }

    function avancarPergunta() {
        if (atual < perguntas.length - 1) {
            mostrarLoading(() => {
                atual++;
                renderizarPergunta();
            });
        } else {
            const modal = new bootstrap.Modal(document.getElementById('modalConfirmarEnvio'));
            modal.show();
        }
    }

    function voltarPergunta() {
        if (atual > 0) {
            mostrarLoading(() => {
                atual--;
                renderizarPergunta();
            });
        }
    }

    function mostrarLoading(callback) {
        document.getElementById('pergunta-container').style.display = 'none';
        document.getElementById('navegacao-perguntas').style.display = 'none';
        document.getElementById('loading-pergunta').style.display = 'flex';

        setTimeout(() => {
            document.getElementById('loading-pergunta').style.display = 'none';
            document.getElementById('pergunta-container').style.display = 'block';
            callback();
        }, 500);
    }

    function enviarRespostas() {
        Object.entries(respostas).forEach(([key, value]) => {
            document.getElementById(key).value = value;
        });
        document.getElementById('form-respostas').submit();
    }

    function confirmarEnvio() {
        const modal = bootstrap.Modal.getInstance(document.getElementById('modalConfirmarEnvio'));
        modal.hide();
        enviarRespostas();
    }

    inicializarBolinhas();
    renderizarPergunta();
</script>
@else
<div class="container">
    <p>Obrigado por responder o módulo sociofamiliares, <a href="/modulos">clique aqui</a> para voltar e responder o próximo módulo</p>
</div>
@endif

@endsection