@extends('painel-admin.menu')
@section('title', 'Cadastro da FAQ')
@section('content')
    <form method="POST" id="formEnvioDados" action="{{route('FAQs.store')}}" enctype="multipart/form-data">
        @if ($errors->any())
            <div class="alert alert-danger">
                <ul>
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif
        @if(session('error'))
            <div class="alert alert-danger">
                {{ session('error') }}
            </div>
        @endif
        @method('POST')
        @csrf
        <div class="row">
            <div class="col-md-6">
                <h2 class="mb-2"><i>Cadastro da FAQ</i></h2>
            </div>
            <div class="col-md-6 text-md-right">
                <a href="{{ route('FAQs.index') }}" class="btn btn-danger btn">Voltar</a>
                <button type="button" class="btn btn-primary" id="btnSalvar">Cadastrar</button>
            </div>
        </div>
        <hr>
        <div class="row">
            <div class="col-md-12">
                <label for="grupo" class="form-label">Grupo</label>
                <select class="form-control col-12" id="grupo" name="grupo[]" multiple="multiple" required>
                    <option value="1">Sistema</option>
                    <option value="2">Cadastros Auxiliares</option>
                    <option value="3">Controles</option>
                    <option value="4">Relatórios</option>
                    <option value="5">Notícia</option>
                </select>
            </div>
        </div>
        <div class="row mt-2">
            <div class="col-md-12">
                <div id="grupo-selecionado" class="selected-items">

                </div>
            </div>
        </div>

        <div class="row mt-3">
            <div class="col-md-12">
                <label for="subgrupo" class="form-label">Subgrupo</label>
                <select class="form-control col-12" id="subgrupo" name="subgrupo[]" multiple="multiple"  required>
                    <option value="1">administração</option>
                    <option value="2">Estoque</option>
                    <option value="3">Faturamento</option>
                    <option value="4">Financeiro</option>
                    <option value="5">Serviço</option>
                </select>
            </div>
        </div>
        <div class="row mt-2">
            <div class="col-md-12">
                <div id="subgrupo-selecionado" class="selected-items"></div>
            </div>
        </div>


        <div class="row mt-2">
            <div class="col-md-12">
                <label>Pergunta</label>
                <input type="text" class="form-control" id="pergunta" name="pergunta" value="{{ old('pergunta') }}">
                @if ($errors->has('pergunta'))
                    <p class="text-danger">{{ $errors->first('pergunta') }}</p>
                @endif
            </div>
        </div>
        <div class="row mt-2">
            <div class="col-md-12">
                <label>Resposta</label>
                <div id="toolbar-container"></div>
                <div id="resposta" name="resposta" required style="border: 1px solid #ccc; padding: 5px;">{{ old('resposta') }}</div>
                <input type="hidden" id="resposta_input" name="resposta" value="{{ old('resposta') }}">
                @if ($errors->has('resposta'))
                    <p class="text-danger">{{ $errors->first('resposta') }}</p>
                @endif
            </div>
        </div>
        <div class="row mb-3">
            <div class="col-md-12">
                <label>Palavras Chaves</label>
                <div class="input-group">
                    <input type="text" class="form-control" id="chave" placeholder="Adicione uma palavra-chave">
                    <div class="input-group-append">
                        <button class="btn btn-outline-secondary" id="addChave" type="button">Adicionar</button>
                    </div>
                </div>
                @if ($errors->has('chave'))
                    <p class="text-danger">{{ $errors->first('chave') }}</p>
                @endif
                <div id="chaveList" class="mt-2"></div>
                <input type="hidden" id="palavras_chaves" name="palavras_chaves[]" value="{{ old('palavras_chaves') }}">
            </div>
        </div>    
    </form>
   
    <style>
        .ck-editor__editable_inline {
            min-height: 400px;
        }

        .select2-container {
            width: 100% !important;
        }

        .select2-selection {
            height: auto !important;
            padding: 8px;
            border-radius: 4px;
        }

        .selected-items {
            display: flex;
            flex-wrap: wrap;
            margin-top: 10px;
        }

        .selected-item {
            display: inline-block;
            margin-right: 10px;
            margin-bottom: 10px;
        }

        .selected-item .remove-item {
            margin-left: 5px;
            cursor: pointer;
            color: #fff;
        }
        
        #resposta ul {
        list-style-type: disc;
        margin-left: 20px;
        }
        
        #resposta ol {
            list-style-type: decimal;
            margin-left: 20px;
        }
    </style>
    <!-- CKEDITOR -->
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script src="https://cdn.ckeditor.com/ckeditor5/41.4.2/decoupled-document/ckeditor.js"></script>
    <script src="https://cdn.ckeditor.com/ckeditor5/41.4.2/decoupled-document/translations/pt.js"></script>

    <!-- select2 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet" />

    
    <script>
         DecoupledEditor
        .create(document.querySelector('#resposta'), {
            language: 'pt',
            placeholder: 'Escreve a responta da Pergunta',
            ckfinder: {
                uploadUrl: '/update-xml'
            }
        })
        .then(editor => {
            const toolbarContainer = document.querySelector('#toolbar-container');
            toolbarContainer.appendChild(editor.ui.view.toolbar.element);

            // Obter o conteúdo antigo do campo
            const oldContent = document.querySelector('#resposta_input').value;

            // Definir o conteúdo antigo no editor CKEditor
            editor.setData(oldContent);

            // Atualizar o campo de entrada oculto sempre que o conteúdo do editor mudar
            editor.model.document.on('change:data', () => {
                const respostaInput = document.querySelector('#resposta_input');
                respostaInput.value = editor.getData();
            });
        })
        .catch(error => {
            console.error(error);
        });

        // Ativando o select2 para permitir múltiplas seleções
        $('#grupo, #subgrupo').select2({
            placeholder: "Selecione um ou mais itens",
            allowClear: true
        });

     

        // Função para remover o item ao clicar no "x"
        $(document).on('click', '.remove-item', function () {
            let valor = $(this).closest('button').data('value');
            let selectId = $(this).closest('div').attr('id') === 'grupo-selecionado' ? '#grupo' : '#subgrupo';
        
            // Remove o item do select
            let selectedOptions = $(selectId).val();
            let updatedOptions = selectedOptions.filter(function (item) {
                return item != valor;
            });

            $(selectId).val(updatedOptions).trigger('change'); // Atualiza o select2
        });

        //Função para adicionar as palavras chaves
        document.addEventListener('DOMContentLoaded', function () {
            const chaveInput = document.getElementById('chave');
            const addChaveButton = document.getElementById('addChave');
            const chaveList = document.getElementById('chaveList');
            const palavrasChavesInput = document.getElementById('palavras_chaves');

            let palavrasChaves = [];

            function addChave() {
                const chaveValue = chaveInput.value.trim();
                if (chaveValue !== '' && !palavrasChaves.includes(chaveValue)) {
                    palavrasChaves.push(chaveValue);
                    AtualizaChave();
                    chaveInput.value = ''; // Limpa o campo de entrada
                }
            }

            // Adiciona palavra-chave ao clicar no botão
            addChaveButton.addEventListener('click', addChave);

            // Adiciona palavra-chave ao pressionar Enter
            chaveInput.addEventListener('keydown', function (event) {
                if (event.key === 'Enter') {
                    event.preventDefault(); // Evita o envio do formulário
                    addChave();
                }
            });

            // Atualiza a lista de palavras-chave
            function AtualizaChave() {
                chaveList.innerHTML = ''; // Limpa a lista existente
                palavrasChaves.forEach((chave, index) => {
                    const chaveItem = document.createElement('div');
                    chaveItem.className = 'badge badge-primary mr-2 mb-2';
                    chaveItem.textContent = chave;
                    chaveItem.style.display = 'inline-block';
                    chaveItem.innerHTML += `<button class="btn btn-primary btn-sm ml-2" onclick="removeChave(${index})">x</button>`;
                    chaveList.appendChild(chaveItem);
                });

                // Atualiza o valor do input oculto
                palavrasChavesInput.value = palavrasChaves.join('/');
            }

            // Remove uma palavra-chave
            window.removeChave = function (index) {
                palavrasChaves.splice(index, 1);
                AtualizaChave();
            };
        });

        var currentItemId = 'faq-link';

        document.getElementById('btnSalvar').addEventListener('click', function(event) {
            event.preventDefault();

            Swal.fire({
                title: 'Confirmação',
                text: 'Deseja realmente gravar essa FAQ?',
                icon: 'question',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Confirmar',
                cancelButtonText: 'Cancelar'
            }).then((result) => {
                if (result.isConfirmed) {
                    document.getElementById('formEnvioDados').submit();
                }
            });  
        });
    </script>

@endsection