@foreach($comentarios->data as $comentario)

    @if($comentario->arquivo != null)

        <div class="row">
            <div class="col offset-s1 s4">
                <div class="col s12 card z-depth-2 orange border-radius-10 padding-2" style="margin: 0;">
                    <div class="card-image waves-effect waves-block waves-light">
                        <img title="Clique para visualizar mais detalhes"
                             src="{{ custom_system('API_URL') }}/{{ $comentario->arquivo }}" alt="office"
                             style="object-fit: cover;"
                             onclick="window.open('{{ custom_system('API_URL') }}/{{ $comentario->arquivo }}');">
                    </div>
                </div>
            </div>
        </div>

    @endif

    <div class="row">
        <div class="col offset-s1 s5">
            <div class="col s12 card z-depth-2 orange border-radius-10" style="margin: 0;">
                <p class="font-weight-500 white-text">{{ $comentario->texto }}</p>
                <p class="white-text">{{ \Carbon\Carbon::parse($comentario->created_at)->format('d/m/Y H:i') }}</p>
            </div>
        </div>
    </div>

    <br><br>

@endforeach

<br><br>

<form id="formComentario" method="post">
    {{ csrf_field() }}

    <input hidden name="id" value="{{ $data['data'] }}">

    <div class="position-fixed width-100" style="position: fixed; bottom: 10px; z-index: 10018">
        <div class="row card z-depth-4">

            <div id="conteudoComentarioTexto">
                <div style="display: flex; flex-direction: row; padding: 20px; overflow-x: scroll;">
                    @foreach($templates as $template)
                        <div onclick="setTemplate('{{$template->template}}')"
                             style="cursor: pointer; border-style: solid; border-color: #0b0b0b; border-radius: 10px; margin-right: 10px; text-align: center; padding: 10px;">
                            {{$template->template}}
                        </div>
                    @endforeach
                </div>

                <div class="col offset-s2 s7">
                    <textarea type="text" id="texto" name="texto" class="materialize-textarea"
                              placeholder="Escreva uma mensagem aqui"
                              style="margin-bottom: 0px; min-height: 0; padding: 0;max-height: 100px; overflow: auto;"></textarea>
                </div>

                <div class="col s1" style="margin-top: 20px;">
                    <i id="iconImagem" onclick="contudoAnexarImagem()" class="material-icons" style="cursor: pointer;">insert_photo</i></a>
                </div>

                <div class="col s2" style="margin-top: 15px;">
                    <a onclick="enviarFormComentario()" class="btn waves-effect orange white-text">Enviar</a>
                </div>

            </div>

            <div hidden id="conteudoComentarioImagem">
                <div class="col offset-s4 s4">

                    <div class="file-field input-field">
                        <div class="btn">
                            <span>@lang('Imagens')</span>
                            <input hidden type="text" id="file-base64" name="file-base64">
                            <input onchange="encodeImagetoBase64(this)" id="pic" name="pic" type="file">
                        </div>
                        <div class="file-path-wrapper">
                            <input name="file_imagens_txt" class="file-path validate" type="text" placeholder="Imagens">
                        </div>
                    </div>

                </div>

                <div class="col s2" style="margin-top: 15px;">
                    <a onclick="conteudoComentarioTexto()" class="btn-flat orange-text waves-effect">Anexar Imagem</a>
                </div>

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

<script type="text/javascript"
        src="{{ \Tooleks\LaravelAssetVersion\Facades\Asset::get('/js/script-custom/encode-base64.js') }}"></script>
<script>

    function contudoAnexarImagem() {

        $('#conteudoComentarioTexto').attr('hidden', 'hidden');
        $('#conteudoComentarioImagem').removeAttr('hidden', 'hidden');

    }

    function conteudoComentarioTexto() {

        $('#conteudoComentarioTexto').removeAttr('hidden', 'hidden');
        $('#conteudoComentarioImagem').attr('hidden', 'hidden');

        if ($('#file-base64').val() != '') {
            $('#iconImagem').addClass('green-text');
        }

    }

    function setTemplate(value) {
        $('#texto').text(value);
    }

    function enviarFormComentario() {

        $.ajax({
            type: 'POST',
            dataType: 'html',
            url: '/gerenciar/ocorrencia/chat/salvar/comentario',
            data: $('#formComentario').serialize(),
            beforeSend: function () {

                $('#conteudoChat').empty();
                $('#conteudoChat').append(conteudoLoadParaComponente);
                $('#modalChat').modal('open');
            },
            success: function (data) {

                Materialize.toast('Comentaria salvo', 4000);

                $('.loadParaComponenteAtendimento').empty();
                $('#modalChat').modal('close');

            },
            error: function (xhr) {

            }
        });

    }

</script>