@extends('layouts.basico')
@section('content')
    <title>Criar Aviso - CDA</title>

    <section class="testimonials" id="criar-aviso-testimonials">
        <div class="container" data-aos="fade-up" id="cards-avisos">
            <div class="row">
                <div class="col-md-8" id="criar-avisos">
                    <div class="card">
                        <div class="card-body">
                            <form action="{{ route('salvarAviso') }}" class="row" method="POST" action="" enctype="multipart/form-data">
                                @csrf
                                <div class="row p-4">
                                        <div class="row mb-3">
                                        <label for="inputText" class="col-sm-2 col-form-label">Título</label>
                                        <div class="col">
                                            <input type="text" class="form-control" name="fieldTitle" id="fieldTitle" required>
                                        </div>
                                    </div>

                                    <div class="row mb-3">
                                        <label for="aviso" class="col-sm-2 col-form-label">Aviso</label>
                                        <div class="col">
                                            <div id="editor">
                                                <p><strong>Ola!</strong></p>
                                                <p>Escreva aqui seu texto aqui!</p>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row mb-3">
                                        <label for="inputText" class="col-sm-2 col-form-label">Link</label>
                                        <div class="col">
                                            <input type="text" class="form-control" name="fieldLink" id="fieldLink">
                                            <span class="badge border-danger border-1 text-danger" id="aviso-valida-link" type="hidden" style="display: none;"><i class="bi bi-check-circle me-1"></i>Link Inválido!</span>
                                        </div>
                                    </div>

                                    <div class="row mb-3">
                                        <label for="inputNumber" class="col-sm-2 col-form-label">Anexo</label>
                                        <div class="col">
                                            <input class="form-control" type="file" name="fieldAnexo[]" id="fieldAnexo" multiple accept="image/*,application/pdf">
                                        </div>
                                    </div>

                                    <div class="row mb-3">
                                        <label for="descricao-grupo" class="col-md-2 col-form-label">Exibição</label>
                                        <div class="col">
                                            <select class="form-select" name="fieldExibicao" id="fieldExibicao">
                                                @foreach($permissoes as $permissao)
                                                    <option value="{{ $permissao->id }}">{{ $permissao->permission }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="row mb-3">
                                        <label for="importance" class="col-md-2 col-form-label">Importancia</label>
                                        <div class="col">
                                            <select class="form-select" name="importance" id="importance">
                                                <option value="0">Normal</option>
                                                <option value="1">Alta</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col mt-4">
                                        <button type="submit" class="btn btn-primary" style="float: inline-end;" id="btn-save-aviso">Publicar</button>
                                    </div>
                                </div>
                                
                                
                            </form>
                        </div>
                    </div>
                    <a href="{{ route('acessoAvisosUsuarioLogado') }}" class="btn-voltar"><i class="bi bi-arrow-left-circle-fill"></i> Voltar</a>
                </div>
            </div>
        </div>
    </section>
    <script>
        $(document).ready(function() {
            // Inicializa o editor Quill
            const toolbarOptions = [
                ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
                ['blockquote', 'code-block'],
                [{ 'list': 'ordered'}, { 'list': 'bullet' }, { 'list': 'check' }],
                [{ 'indent': '-1'}, { 'indent': '+1' }],          // outdent/indent
                [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
                [{ 'color': [] }, { 'background': [] }],          
                [{ 'align': [] }],
                ['clean']                                       
            ];

            const quill = new Quill('#editor', {
                modules: {
                    toolbar: toolbarOptions
                },
                theme: 'snow'
            });

            // Envia o formulário por AJAX
            $('#criar-avisos form').on('submit', function(event) {
                event.preventDefault(); // Previne o envio padrão do formulário

                // Coleta os dados do formulário
                var formData = new FormData(this);
                var description = quill.root.innerHTML;

                // Adiciona o conteúdo do editor Quill ao FormData
                formData.append('fieldDescription', description);
                
                $.ajax({
                    type: 'POST',
                    url: $(this).attr('action'),
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function(response) {
                        // Exibe uma mensagem de sucesso
                        $('#alert').html(
                            '<div id="alert">'+
                                '<div class="alert-div success-alert">'+
                                    '<i class="bi bi-check-circle-fill"></i>'+
                                    '<p><strong>Seu aviso foi publicado com sucesso!</strong></p>'+
                                '</div>'+
                            '</div>'
                        );
                        // Redireciona ou limpa o formulário conforme necessário
                        window.location.href = "{{ route('acessoAvisosUsuarioLogado') }}";
                    },
                    error: function(xhr) {
                        // Exibe uma mensagem de erro
                        $('#alert').html(
                            '<div id="alert">'+
                                '<div class="alert-div error-alert">'+
                                    '<i class="bi bi-exclamation-circle-fill"></i>'+
                                    '<p><strong>Erro ao publicar o aviso!</strong></p>'+
                                '</div>'+
                            '</div>'
                        );
                    }
                });
            });
        });
        
    </script>
@endsection

<script src="https://code.jquery.com/jquery-3.6.3.min.js"
    integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/quill.js"></script>