@extends('layouts.app')

@section('content')
    <div class="container">
        @if (Auth::user()->is_admin)
            <div class="row">
                <div class="col-sm-12">
                    <a href="/graficos" class="btn backbutton"><i class="fa-solid fa-angles-left"></i> Voltar</a>
                </div>
            </div>
        @endif

        <div class="row justify-content-center">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header card-header-fle color-back">
                        <div class="col-md-12 div-button">{{ $questionario->name }}</div>
                        <input type="hidden" id="iduser" value="{{ Auth::user()->id }}">
                        <input type="hidden" id="idquestionary" value="{{ $questionario->id }}">
                    </div>
                    <div class="card-body div-button">
                        <div class="col-md-12">
                            <table class="table table-striped">
                                <thead>
                                    <tr>
                                        <th scope="col">Descrição</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>{!! $questionario->description !!}</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <input type="hidden" id="id_usuario" value="{{ Auth::user()->id }}">
        <div class="containerDeEtapas">
            <div id="etapa_col" class="etapa_col col-md-12">
                @foreach ($questions as $question)
                    <div class="card space" id="card{{ $question->id }}">
                        <div class="card-header card card-header-fli">
                            <h6 class="text-white">
                                <div class="indicepergunta">
                                </div>
                                <dt>{!! $question->question !!}</dt>
                            </h6>
                        </div>
                        <div class="card-body">
                            Instrução:
                            {!! $question->description !!}
                            <hr>
                            @foreach ($question->options as $option)
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="answers[{{ $question->id }}][]"
                                        value="{{ $option->id }}" {{ $option->selected == true ? 'checked' : '' }}>
                                    <label class="form-check-label">{{ $option->description }}</label>
                                </div>
                            @endforeach
                        </div>
                    </div>
                @endforeach
            </div>

        </div>
        <button id="saveProgressBtn" class="btn btn-success"><i class="fa-regular fa-floppy-disk"></i> Salvar
            Progresso</button>
    </div>

    <meta name="csrf-token" content="{{ csrf_token() }}">
    <script type="text/javascript">
        $(document).ready(function() {
            // Configuração CSRF para AJAX no jQuery
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            $('#saveProgressBtn').on('click', function() {
                salvar();
            });

            function salvar() {
                var idUser = $('#id_usuario').val();
                var idQuestionary = {{ $questionario->id }};
                var answers = [];

                $('.card.space:not(.disabled-hidden)').each(function() {
                    var questionId = $(this).attr('id').replace('card', '');

                    $(this).find('input[type="radio"]:checked').each(function() {
                        var radioName = $(this).attr('name');
                        var answer = $(this).val();

                        if (radioName && answer !== undefined && answer !== "") {
                            answers.push({
                                questionId: questionId,
                                optionid: answer,
                                type: 'radio'
                            });
                        }
                    });
                });

                $.ajax({
                    url: '/save-answers-graph',
                    type: 'get',
                    data: {
                        idUser: idUser,
                        idQuestionary: idQuestionary,
                        answers: answers
                    },
                    success: function(response) {
                        if (response.success) {
                            toastr.success(response.success);
                        } else if (response.error) {
                            toastr.error(response.error);
                        }
                    },
                    error: function(xhr, status, error) {
                        toastr.error("Ocorreu um erro ao salvar as respostas.");
                    }
                });
            }
        });
    </script>


    @php
        session()->put('questionario', $questionario->id);
    @endphp


    <script>
        function updateQuestionNumbers() {
            $('.containerDeEtapas').each(function() {
                var questionNumber = 1;

                $(this).find('.card.space:not(.disabled-hidden), h3.etapa').each(function() {
                    var $element = $(this);
                    if ($element.is('h3.etapa')) {
                        console.log("Found etapa element: ", $element);
                        questionNumber = 1;
                    }
                    if ($element.is('.card.space:not(.disabled-hidden)')) {
                        $element.find('.indicepergunta').text(questionNumber);
                        questionNumber++;
                    }
                });
            });
        }

        $(document).ready(function() {
            updateQuestionNumbers();
        });
    </script>
    <script defer>
        window.onload = function() {
            function verificarECorrigirClasses(cardBody) {
                var inputs = cardBody.querySelectorAll('input, textarea');
                var cardHeader = cardBody.closest('.card.space').querySelector('.card-header.card.card-header-fli');
                var indicePergunta = cardBody.closest('.card.space').querySelector('.indicepergunta');

                if (!cardHeader || !indicePergunta) {
                    console.error('Um dos elementos necessários é nulo.', {
                        cardHeader,
                        indicePergunta
                    });
                    return;
                }

                var preenchido = Array.from(inputs).some(input => {
                    if (input.type === 'checkbox' || input.type === 'radio') {
                        return input.checked;
                    } else if (input.type === 'text' || input.tagName.toLowerCase() === 'textarea') {
                        return input.value.trim() !== '';
                    }
                    return false; // Adicionado para cobrir outros tipos de input
                });

                console.log('Verificando card:', {
                    cardBody,
                    cardHeader,
                    indicePergunta,
                    preenchido
                });

                if (preenchido) {
                    cardHeader.classList.add('card-header-background');
                    indicePergunta.classList.add('indicepergunta-background');
                } else {
                    cardHeader.classList.remove('card-header-background');
                    indicePergunta.classList.remove('indicepergunta-background');
                }
            }

            document.querySelectorAll('.card-body input, .card-body textarea').forEach(function(element) {
                element.addEventListener('change', function() {
                    verificarECorrigirClasses(element.closest('.card-body'));
                });
            });

            document.querySelectorAll('.card.space').forEach(function(card) {
                verificarECorrigirClasses(card.querySelector('.card-body'));
            });
        };
    </script>
    <style>
        .card-body ul li {
            list-style-type: disc;
        }

        h2.text-center.subtitulo {
            font-size: 40px !important;
            color: #000;
        }

        .card-header {
            background-color: #004071;
        }

        /* Adicione isso ao seu arquivo CSS */
        .card-header-background {
            background-color: #00964c !important;
        }

        .indicepergunta-background {
            background-color: #256f28 !important;
        }

        .etapa {
            text-align: center;
            margin-top: 20px;
        }

        .card-body h3 {
            font-weight: 900;
            font-size: 18px;
            font-family: sans-serif;
            margin-bottom: 10px;
            color: #ffffff !important;
            background-color: #00193d;
            padding: 5px 10px;
        }

        dt {
            margin-left: 1.7rem;
        }

        h6.text-white {
            margin-bottom: 0px;
            padding: 0.2rem;
        }

        .indicepergunta {
            background-color: #002d50;
            position: absolute;
            height: 3.2rem;
            width: 3.2rem;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            border-radius: 3rem;
            left: -1rem;
            top: -0.2rem;
            font-weight: 900;
        }

        button#saveProgressBtn {
            position: fixed;
            bottom: 1rem;
            right: 2rem;
            box-shadow: 4px 4px 5px 0px #000000b8;
        }

        button#etapasBtn {
            position: fixed;
            bottom: 1rem;
            left: 2rem;
            box-shadow: 4px 4px 5px 0px #000000b8;
        }

        td.tamanhopersonalizado {
            width: 75%;
        }

        #multipart {
            text-align: center;
        }

        .hidden {
            display: none;
        }
    </style>
@endsection