@extends('layouts.app')

@section('content')
    <script src="{{ asset('tinymce/js/tinymce.min.js') }}" referrerpolicy="origin"></script>

    <script src="{{ asset('js/Tiny_questionario.js') }}"></script>
    <div class="container">
        <div class="row">
            <div class="col-sm-12">
                <a href="/questionarys" class="btn backbutton"><i class="fa-solid fa-angles-left"></i> Voltar</a>
            </div>
        </div>

        <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">Editar Formulário</div>
                    </div>
                    <div class="card-body">
                        <div class="container">
                            <form action="{{ route('questionary.update', $questionario->id) }}" method="POST">
                                @csrf
                                @method('PUT')
                                <div class="row">
                                    <div class="col-sm-4">
                                        <div class="form-group">
                                            <label for="status">Status</label>
                                            <select name="status" id="status" class="form-control">
                                                <option value="active"
                                                    {{ $questionario->status == 'active' ? 'selected' : '' }}>
                                                    Ativo</option>
                                                <option value="inactive"
                                                    {{ $questionario->status == 'inactive' ? 'selected' : '' }}>Inativo
                                                </option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-sm-4">
                                        <div class="form-group">
                                            <label for="type">Tipo</label>
                                            <select name="type" id="type" class="form-control">
                                                <option value="mixed"
                                                    {{ $questionario->type == 'mixed' ? 'selected' : '' }}>Misto
                                                </option>
                                                <option value="multiple"
                                                    {{ $questionario->type == 'multiple' ? 'selected' : '' }}>
                                                    Múltipla Escolha
                                                </option>
                                                <option value="direct"
                                                    {{ $questionario->type == 'direct' ? 'selected' : '' }}>
                                                    Resposta Direta</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-sm-4">
                                        <div class="form-group">
                                            <label>
                                                <input type="checkbox" id="multipart" name="multipart"
                                                    {{ $questionario->multipart == '1' ? 'checked' : '' }}>
                                                Aceita mais de uma resposta?
                                            </label>
                                        </div>
                                    </div>
                                    <div class="col-sm-12">
                                        <div class="form-group">
                                            <label for="name">Nome</label>
                                            <input type="text" name="name" id="name" class="form-control"
                                                value="{{ $questionario->name }}" required>
                                        </div>
                                    </div>
                                    <div class="col-sm-12">
                                        <div class="form-group">
                                            <label for="description">Descrição</label>
                                            <textarea name="description" id="description" class="form-control">{{ $questionario->description }}</textarea>
                                        </div>
                                    </div>

                                </div>
                                <p class="text-center margi">
                                    <input class="btn btn-success" type="submit" value="Atualizar">
                                </p>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {{--                 @php
        dd($questionario);
        @endphp --}}
        <div class="draggable-questions">
            @foreach ($questionario->questions as $question)
                <div class="card question space" data-id="question{{ $question->id }}">
                    <div class="card-header card-header-fle color-back-1">
                        <div class="col-md-12 div-butto">
                            <h6>{!! $question->content !!}</h6>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="col-md-12">
                            <div class="draggable-questions">
                                @foreach ($question->options as $option)
                                    <div class="card option" data-id="option{{ $option->id }}"
                                        data-question-id="{{ $question->id }}">
                                        <div class="card-body">
                                            {{ $option->content }}
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                            <div class="draggable-questions">
                                <div class="card manualquestion" data-id="manual{{ $question->id }}">
                                    <div class="card-body">
                                        @if (isset($question->questoes))
                                            @foreach ($question->questoes as $questoes)
                                                <div class="form-group">
                                                    <label>{!! $questoes->content !!}</label>
                                                    <input class="form-control imputation"
                                                        value="{{ !empty($questoes->resposta) ? $questoes->resposta : '' }}"
                                                        name="{{ $questoes->id }}">
                                                </div>
                                            @endforeach
                                        @else
                                            {!! $question->instruction !!}
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>

        <script>
            $(function() {

                $(".draggable-questions").sortable({
                    update: function(event, ui) {
                        var movedElementId = ui.item.data('id');
                        var newPosition = ui.item.index();
                        var questionId = ui.item.data('question-id');
                        console.log(movedElementId, newPosition, questionId);


                        //verifica se o item movido é uma pergunta ou um option
                        if (movedElementId.includes("question")) {
                            typeofElement = 'questions';
                        } else if (movedElementId.includes("option")) {
                            typeofElement = 'options';
                        }

                        //se for options faz a opção de salvar a posição
                        if (typeofElement == 'options') {
                            var element = document.querySelector('[data-id="question' + questionId + '"]');
                            element.querySelectorAll('.card.option.ui-sortable-handle').forEach(function(
                                item, index) {
                                let dataId = item.dataset.id;
                                //remove a palavra option do data-id
                                dataId = dataId.replace('option', '');
                                let dataQuestionId = item.dataset.questionId;

                                console.log('index: ', index, ', data-id: ', dataId,
                                    ', data-question-id: ', dataQuestionId);
                                // Call AJAX to save new position
                                $.ajax({
                                    url: '/saveorder/options/' + dataId + '/' + index +
                                        '/' + dataQuestionId,
                                    type: 'GET',
                                    success: function(response) {
                                        console.log(response);
                                    }
                                });

                            }); /*  */
                        }

                        if (typeofElement == 'questions') {
                            if (typeofElement == 'questions') {
                                $('.draggable-questions .card.question').each(function(index, item) {
                                    let dataId = $(item).data('id');
                                    //remove a palavra question do data-id
                                    dataId = dataId.replace('question', '');

                                    console.log('index: ', index, ', data-id: ', dataId);
                                    // Call AJAX to save new position
                                    $.ajax({
                                        url: '/saveorder/questions/' + dataId + '/' + index,
                                        type: 'GET',
                                        success: function(response) {
                                            console.log(response);
                                        }
                                    });
                                });
                            }

                        }

                        //pegar os dados do elemento

                    }
                });

                $(".draggable-questions").disableSelection();

            });
        </script>
        <style type="text/css">
            .tox .tox-statusbar__right-container {
                display: none !important;
            }
        </style>
    </div>
@endsection