@extends('corpo')
@section('corpo')

@php 
$ok = 0; $tipo = "form";
@endphp
<div class="container">
    <h3 style="font-weight: bold; color: #0A246A;"> <i style="font-size: 25px; " class="fa fa-comments"></i> Mensagens</h3>
    <table class="table" id="users-table" style="margin-top: 20px">
        <thead  style="border:none; border-top:none; border-bottom:none; border:#f1f1f1 2px solid; padding: 0 0 0 0;">
        <tr style="border:#f1f1f1 2px solid; padding: 0 0 0 0;">
        </tr>
        </thead>
        <tbody>
        <div class="row" id="atualizar" style="height: 400px; overflow: auto; background-color: #f1f1f1;">
            @foreach(\App\Messagen::where('form_id',$form->id)->where('processo_tipo', $type)->orderBy('id','desc')->get() as $item)
                @if($item->tipo == 0)
                    <div class="col-md-12">
                        <div style="width: 50%; margin-left: 50%;margin-top: 20px;">
                            <div class="media" >
                                <div class="media-body" style=" margin-right: 20px; background-color: blue; color: white; padding: 10px;" >
                                    <h4 class="media-heading" style="font-size: 16px; ">{{$form->razao_nome }}</h4>
                                    <p style="text-align: justify-all;"> {{$item->messagem}}</p>
                                    <span class="pull-left" style="font-size: 12px;">{{ $item->processOrder->name }}</span>
                                    <span class="pull-right" style="font-size: 12px;">{{ $item->created_at->format('d/m/Y H:i') }}</span>

                                </div>
                            </div>
                        </div>
                    </div>
                @else
                    <div class="col-md-12 " >
                        <div style="width: 50%;margin-top: 20px; ">
                            <div class="media">
                                <div class="media-body" style=" margin-left: 20px; background-color: #C1C1C1; color: #000000; padding: 10px;" >
                                    <h4 class="media-heading" style="font-size: 16px; color: #000000;">{{ \App\UserAccount::find($item->usuario_id)->name }}</h4>
                                    <p style="text-align: justify-all; font-size: 13px;"> {{$item->messagem}}</p>
                                    <span class="pull-left" style="font-size: 12px;">{{ $item->processOrder->name }}</span>
                                    <span class="pull-right" style="font-size: 12px;">{{$item->created_at->format('d/m/Y H:i')}}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                @endif
            @endforeach
        </div>
        </tbody>
    </table>
    <form name="form2" action="{{routeTenant('site.enviar.messagem',[$form->id, $type])}}" method="post" enctype="multipart/form-data">
        <input value="{{csrf_token()}}" type="hidden" name="_token"  >
     <textarea name="messagem" rows="3" id="" class="form-control" required="required">
                          </textarea>
        <button class="btn btn-success pull-right" style="margin-top: 10px;" type="submit">Enviar Menssagem</button>
    </form>
</div>

</div>
</div>
</div>
@endsection
@section('script')
<script>
    $(function() {
        setTime();
        function setTime() {
            setTimeout(setTime, 10000);
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            $.ajax({
                type:'GET',
                url: '{{routeTenant("get.messagem", ["id" => $form->id, "tipo" => $type])}}',
                data:{},
                success:function(data){
                    if(localStorage.getItem('notifica') == data.form2.length){}else{
                        $('#atualizar').html('');
                        for (var i = 0; i < data.form2.length; i++) {
                            if(data.form2[i].tipo == 0) {
                                $('#atualizar').append('    <div class="col-md-12">\n' +
                                    '\n' +
                                    '                                                <div style="width: 50%; margin-left: 50%; margin-top: 20px;">\n' +
                                    '\n' +
                                    '                                                    <div class="media" >\n' +
                                    '                                                      \n' +
                                    '                                                        <div class="media-body" style=" margin-left: 20px; background-color: blue; color: white; padding: 10px;" >\n' +
                                    '                                                            <h4 class="media-heading" style="font-size: 16px; color: white;">'+data.form2[i].form_id+'</h4>\n' +
                                    '                                                            <p style="text-align: justify-all;"> '+data.form2[i].messagem+'</p>\n' +
                                    '                                                            \n' +
                                    '                                                            <span class="pull-left" style="font-size: 12px;">'+data.form2[i].processo_status+'</span>\n' +
                                    '                                                            <span class="pull-right" style="font-size: 12px;">'+data.form2[i].created_at+'</span>\n' +
                                    '\n' +
                                    '                                                        </div>\n' +
                                    '                                                    </div>\n' +
                                    '\n' +
                                    '\n' +
                                    '\n' +
                                    '\n' +
                                    '                                                </div>\n' +
                                    '                                            </div>');
                            }else{
                                $('#atualizar').append('  <div class="col-md-12 " >\n' +
                                    '                                                <div style="width: 50%;margin-top: 20px; ">\n' +
                                    '\n' +
                                    '                                                    <div class="media "   >\n' +
                                    '\n' +
                                    '                                                        <div class="media-body" style=" margin-right: 20px; background-color: #C1C1C1; color: #000; padding: 10px;" >\n' +
                                    '                                                            <h4 class="media-heading" style="font-size: 16px; color: #000;">'+data.form2[i].usuario_id+'</h4>\n' +
                                    '                                                            <p style="text-align: justify-all; font-size: 13px;"> '+data.form2[i].messagem+'</p>\n' +
                                    '                                                            \n' +
                                    '                                                            <span class="pull-left" style="font-size: 12px;">'+data.form2[i].processo_status+'</span>\n' +
                                    '                                                        <span class="pull-right" style="font-size: 12px;">'+data.form2[i].created_at+'</span>\n' +
                                    '                                                        </div>\n' +
                                    '                                                        \n' +
                                    '                                                    </div>\n' +
                                    '                                                </div>\n' +
                                    '                                            </div>');

                            }}
                    }
                    localStorage.setItem('notifica',data.form2.length);
                }
            });
        }
    });
</script>
@endsection