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


    <section class="testimonials" id="edit-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">
                            <h5 class="card-title">Editar Aviso</h5>

                                <form class="row p-4" method="POST" action="{{ route('salvarEdicaoAviso') }}" enctype="multipart/form-data">
                                    @csrf
                                    @method('PUT')
                                    <div class="row mb-3">
                                        <label for="inputText" class="col-sm-2 col-form-label">Título</label>
                                        <div class="col-sm-10">
                                            <input type="text" class="form-control" name="fieldTitle" id="fieldTitle" value="{{ $aviso->name_warning }}" required>
                                        </div>
                                    </div>

                                    <div class="row mb-3">
                                        <label for="inputPassword" class="col-sm-2 col-form-label">Aviso</label>
                                        <div class="col-sm-10">
                                            <div id="editor">
                                                {!! $aviso->description !!}
                                            </div>                                        
                                        </div>
                                    </div>

                                    <div class="row mb-3">
                                        <label for="inputText" class="col-sm-2 col-form-label">Link</label>
                                        <div class="col-sm-10">
                                            <input type="text" class="form-control" name="fieldLink" id="fieldLink" value="{{ $aviso->link }}">
                                            <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-sm-10">
                                            <input class="form-control" type="file" name="fieldAnexo[]" id="fieldAnexo" multiple accept="image/*, application/pdf">
                                        </div>
                                    </div>

                                    <input class="form-control" type="hidden" name="idAviso" id="idAviso" value="{{ $aviso->id }}">

                                    <div class="row mb-3">
                                        <label for="descricao-grupo" class="col-md-2 col-form-label">Exibição</label>
                                        <div class="col-sm-10">
                                            <select class="form-select" name="fieldExibicao" id="fieldExibicaoEdicao">
                                                @foreach($permissoes as $permissao)
                                                    <option value="{{ $permissao->id }}" @if( $permissao->id === $aviso->permission_id ) selected @endif>{{ $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-sm-10">
                                            <select class="form-select" name="importance" id="importance">
                                                <option value="0" @if( $aviso->important === 0 ) selected @endif>Normal</option>
                                                <option value="1" @if( $aviso->important === 1 ) selected @endif>Alta</option>
                                            </select>
                                        </div>
                                    </div>

                                    @if($aviso->statu_id == 1)
                                        <div class="row mb-3">
                                            <label for="inputNumber" class="col-sm-2 col-form-label">Status</label>
                                            <div class="col-sm-10">
                                                <select class="form-select" name="selectStatus" aria-label="Default select example">
                                                    <option value="1" selected>Ativo</option>
                                                    <option value="2">Inativo</option>
                                                </select>
                                            </div>
                                        </div>
                                    @endif

                                    @if($aviso->statu_id == 2)
                                        <div class="row mb-3">
                                            <label for="inputNumber" class="col-sm-2 col-form-label">Status</label>
                                            <div class="col-sm-10">
                                                <select class="form-select" name="selectStatus" aria-label="Default select example">
                                                    <option value="1">Ativo</option>
                                                    <option value="2" selected>Inativo</option>
                                                </select>
                                            </div>
                                        </div>
                                    @endif

                                    <div class="text-center">
                                        <button type="submit" class="btn btn-primary" id="btn-save-aviso">Salvar</button>
                                    </div>
                                </form>
                        </div>
                    </div>
                    <a href="/avisos-usuario" class="btn-voltar"><i class="bi bi-arrow-left-circle-fill"></i> Voltar</a>
                </div>
                @if ($aviso->images->isNotEmpty())
                <div class="col-md-4">
                        <div class="flex-row" style="display: flex; flex-wrap:wrap">
                            @foreach ( $aviso->images as $image)
                                    <div class="img-box-edit">
                                        <span class="close-img" data-bs-toggle="modal"
                                        data-bs-target="#modalExcluirAnexo" data-id="{{$image->id}}"><i class="fa-solid fa-circle-xmark"></i></span>
                                        <a href="{{ url('storage/' . $image->path) }}"
                                            data-fancybox="gallery" >
                                            @if (pathinfo($image->path, PATHINFO_EXTENSION) !== 'pdf')
                                                <img src="{{ url('storage/' . $image->path) }}" class="img-edit" alt="">
                                            @else
                                                <img src="/img/pdf-default.png" class="img-edit" alt="">
                                            @endif
                                        </a>
                                    </div>
                            @endforeach
                        </div>
                        
                    </div>
                @endif
            </div>
            
        </div>
    </section>
    
        <div class="modal fade" id="modalExcluirAnexo">
            <div class="modal-dialog modal-dialog-centered">
              <div class="modal-content">
                <div class="modal-header">
                  <h5 class="modal-title">Deseja excluir este anexo?</h5>
                  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    Atenção! Ao confirmar esta mensagem o anexo será excluido!
                </div>
                <form action="/remover-anexo" method="POST" id="removerAnexo">
                    @csrf
                    <input type="hidden" id="idAnexoRemove" name="idAnexoRemove" value="">
                    <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-bs-dismiss="modal">Não</button>
                    <button type="submit" class="btn btn-danger" data-bs-dismiss="modal">Sim</button>
                </form>
                </div>
              </div>
            </div>
        </div>
    
    <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>