@foreach($atendimentos as $atendimento)
@if($atendimento->canal_id == 5)

<style>
    .arrow:first-letter{
        text-transform: uppercase;
    }
</style>

<div class="col-md-12" id="tabulacao"
    style="background-color: #f0f0f0;padding-bottom:20px;margin-bottom:6px">
    <div class="col-md-12" style="padding-left:40px">
        <div style="margin-top: 4px;font-size: 11px;"><span
                style="color: #999;">Data: {{ \Carbon\Carbon::parse($atendimento->data)->format('d/m/Y')}}</span><span
                style="margin-right:3px;margin-left: 3px;color: #999">|</span><span
                style="color: #999;">Hora: {{\Carbon\Carbon::parse($atendimento->data)->format('H:s:i') }}</span><span
                style="margin-right:3px;margin-left: 3px;color: #999">|</span>
            <span style="color: #999;">Protocolo: {{ $atendimento->final }}</span></div>
    </div>
    <div class="label label-sm " style="margin-right: 10px;font-size:20px;"><i
            class="fa fa-envelope" style="color: red;"></i></div><span
        class="task-title-sp"><span
    style="margin-right:3px;font-size: 12px">Motivo: {{$atendimento->motivo}}</span></span><span style="">|</span><span
        style="font-size: 12px"> Assunto: {{$atendimento->assunto}}</span>
    <div class="row" style="margin-top:7px;">
        <div class="col-md-12">
            <div class="col-md-7"><span
                    class="label label-sm label-danger bg-green-meadow"
                    id="status"
                    style="background-color:#426a9e!important;">Finalização: {{$atendimento->concluir}}</span></div>
            <div class="col-md-3" style="padding-left:0px"><a
                    class="accordion-toggle mostra-mensagens collapsed" id_chamada="{{$atendimento->id}}"
                    style="display: block;" data-toggle="collapse"
                    data-parent="" href="#atentimentowhats{{$atendimento->id}}"
                    aria-expanded="false"><span
                        class="label label-sm label-danger "
                        style="background-color:#999!important" id="status">
                        Visualizar Tratativa<i class="fa fa-angle-down"
                            style="margin-left:7px;padding-rigth:7px;"></i>
                    </span></a></div>
        </div>
        <div class="col-md-12" style="margin-top:10px;margin-left: 0px;">
            <div class="panel-collapse collapse" id="atentimentowhats{{$atendimento->id}}"
                aria-expanded="true" style="">
                <div class="panel-body"
                    style="background-color: #ddd; height:300px;overflow-y:scroll">
                    <ul class="chats">
                        @foreach($mensagens[$atendimento->protocolo_id] as $email)
                        @if($email->from == "customer")
                                    <div class="message">
                                    <span class="arrow" style="font-weight:bold;">Email: {!! $atendimento->contato_email!!}
                                    </span>
                                    <span class="body">
                                        {!! $email->mensagem !!}
                                        <br>
                                        <span class="datetime" style="margin-top:2%;">
                                        {{\Carbon\Carbon::parse($email->created_at)->format('d/m/Y H:s:i')}}
                                    </span>
                                </span>
                                
                                </div>
                            </li>
                            
                            <hr>
                        @else
                        
                                <div class="message" style="margin-top:50px;display:inline;">
                                    <span class="arrow" style="font-weight:bold;">Elev Tecnologia:</span>

                                    <span class="body">
                                        {!! $email->mensagem !!}
                                        <span class="datetime"style="margin:1%;">
                                        {{\Carbon\Carbon::parse($email->created_at)->format('d/m/Y H:s:i')}}
                                    </span>
                                    
                                </span>
                                </div>
                                
                            </li>
                            <hr>
                        @endif
                        @endforeach
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
@elseif($atendimento->canal_id == 9)
<div class="col-md-12" id="tabulacao" style="background-color: #f0f0f0;padding-bottom:20px;margin-bottom:6px">
    <div class="col-md-12" style="padding-left:40px">
        <div style="margin-top: 4px;font-size: 11px;">
            <span style="color: #999;">Data: {{ \Carbon\Carbon::parse($atendimento->data)->format('d/m/Y')}}</span>
            <span style="margin-right:3px;margin-left: 3px;color: #999">|</span>
            <span style="color: #999;">Hora: {{\Carbon\Carbon::parse($atendimento->data)->format('H:s:i') }}</span>
            <span style="margin-right:3px;margin-left: 3px;color: #999">|</span>
            <span style="color: #999;">Protocolo: {{ $atendimento->final }}</span>
        </div>
    </div>
    <div class="label label-sm " style="margin-right: 10px;font-size:20px;">
        <i class="fas fa-comment-dots" style="color:#2598d8"></i>
    </div>
    <span class="task-title-sp">
        <span style="margin-right:3px;font-size: 12px">Motivo: {{$atendimento->motivo}}</span>
    </span>
    <span style="">|</span>
    <span style="font-size: 12px"> Assunto: {{$atendimento->assunto}}</span>
    <div class="row" style="margin-top:7px;">
        <div class="col-md-12">
            <div class="col-md-7">
                <span class="label label-sm label-danger bg-green-meadow" id="status" style="background-color:#426a9e!important;">
                    Finalização: {{$atendimento->concluir}}
                </span>
            </div>
            <div class="col-md-3" style="padding-left:0px">
                <a class="accordion-toggle collapsed busca_tratativa_wc" id_chamada="{{$atendimento->id_chamada}}" style="display: block;" 
                    data-toggle="collapse" data-parent="" data-index="{{$atendimento->id_chamada}}" href="#atentimentowhats{{$atendimento->id_chamada}}">
                    <span class="label label-sm label-danger " style="background-color:#999!important" id="status">
                        Visualizar Tratativa
                        <i class="fa fa-angle-down" style="margin-left:7px;padding-rigth:7px;"></i>
                    </span>
                </a>
            </div>
        </div>
        <div class="col-md-12" style="margin-top: 10px; margin-left: 0px;">
            <div class="panel-collapse collapse" id="atentimentowhats{{$atendimento->id_chamada}}">
                <div class="panel-body" style="background-color: #ddd; height:300px;overflow-y:scroll">
                    <ul id="webchat{{$atendimento->id_chamada}}" class="chats">
                    @foreach($mensagens[$atendimento->protocolo_id] as $whats)
                    @if(json_decode($whats->mensagem)->how == "atendente")
                        <li class="out"><img class="avatar" alt=""
                            src='{{asset("pages/img/gestao/ux-base-atendimento-30x30.png")}}'
                            style="width: 30px;height: 30px;">
                            <div class="message"
                                style=" background-color:#426a9e;color:#fff;border-right: 2px solid #426a9e;margin-right:10%;border-radius: 5px!important; max-width: fit-content;box-shadow: 0 2px 5px #000;margin-left: auto;max-width: fit-content;width: 80%">
                                <span class="arrow" style="border-left:8px solid #426a9e"></span>
                                <span class="body" style="text-align:justify;display: flex;flex-direction: column;">
                                    {!! json_decode($whats->mensagem)->msg !!}<br>
                                    <span class="datetime" style="float:right;color:#fff;margin-left:10px;text-align: end;font-size:12px;font-size: 11px;font-weight: 700;">
                                        {{\Carbon\Carbon::parse($whats->created_at)->format('d/m/Y H:s:i')}}
                                    </span>
                                </span>
                            </div>
                        </li>
                    @else
                        <li class="in">
                            <img class="avatar" alt="" src='{{asset("pages/img/gestao/ux-base-30x30.png")}}' style="width: 30px;height: 30px;font-size:12px;">
                            <div class="message" style="background-color:#fff;color:#2f353b;border-left: 2px solid #fff;border-radius: 5px!important;max-width: fit-content;margin-right: 46px;box-shadow: 0 2px 5px #000;margin-left:10%;width: 80%;">
                                <span class="arrow" style="border-right:8px solid #fff"></span>
                                <span class="body" style="text-align:justify;display: flex;flex-direction: column;">
                                    {!! json_decode($whats->mensagem)->msg !!}<br>
                                    <span class="datetime" style="float:right;color:#2f353b;text-align: end;font-size: 11px;font-weight: 700;">
                                        {{\Carbon\Carbon::parse($whats->created_at)->format('d/m/Y H:s:i')}}
                                    </span>
                                </span>
                            </div>
                        </li>
                    @endif
                    @endforeach
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
@else
<div class="col-md-12" id="tabulacao" style="background-color: #f0f0f0;padding-bottom:20px;margin-bottom:6px">
    <div class="col-md-12" style="padding-left:40px">
        <div style="margin-top: 4px;font-size: 11px;"><span
                style="color: #999;">Data: {{ \Carbon\Carbon::parse($atendimento->data)->format('d/m/Y')}}</span><span
                style="margin-right:3px;margin-left: 3px;color: #999">|</span><span
                style="color: #999;">Hora: {{\Carbon\Carbon::parse($atendimento->data)->format('H:s:i') }}</span><span
                style="margin-right:3px;margin-left: 3px;color: #999">|</span>
            <span style="color: #999;">Protocolo: {{ $atendimento->final }}</span></div>
    </div>
    <div class="label label-sm " style="margin-right: 10px;font-size:20px;">
        <i class="fa fa-whatsapp" style="color: green;"></i>
    </div>
    <span class="task-title-sp">
        <span style="margin-right:3px;font-size: 12px">Motivo: {{$atendimento->motivo}}</span>
    </span>
    <span style="">|</span>
    <span style="font-size: 12px"> Assunto: {{$atendimento->assunto}}</span>
    <div class="row" style="margin-top:7px;">
        <div class="col-md-12">
            <div class="col-md-7">
                <span class="label label-sm label-danger bg-green-meadow"
                    id="status" style="background-color:#426a9e!important;">
                        Finalização: {{$atendimento->concluir}}
                </span>
            </div>
            <div class="col-md-3" style="padding-left:0px">
                <a class="accordion-toggle mostra-mensagens collapsed" id_chamada="{{$atendimento->id_chamada}}"
                    style="display: block;" data-toggle="collapse" data-parent=""
                    href="#atentimentowhats{{$atendimento->id_chamada}}" aria-expanded="false">
                    <span class="label label-sm label-danger" style="background-color:#999!important" id="status">
                        Visualizar Tratativa
                        <i class="fa fa-angle-down" style="margin-left:7px;padding-rigth:7px;"></i>
                    </span>
                </a>
            </div>
        </div>
        <div class="col-md-12" style="margin-top:10px;margin-left: 0px;">
            <div class="panel-collapse collapse" id="atentimentowhats{{$atendimento->id_chamada}}"
                aria-expanded="true" style="">
                <div class="panel-body"
                    style="background-color: #ddd; height:300px;overflow-y:scroll">
                    <ul class="chats">
                        @foreach($mensagens[$atendimento->protocolo_id] as $whats)
                        @if($whats->tipo == "1")
                            <li class="in">
                                <img class="avatar" alt="" src='{{asset("pages/img/gestao/ux-base-30x30.png")}}' style="width: 30px;height: 30px;font-size:12px;">
                                <div class="message" style="background-color:#fff;color:#2f353b;border-left: 2px solid #fff;border-radius: 5px!important;max-width: fit-content;margin-right: 46px;box-shadow: 0 2px 5px #000;margin-left:10%;width: 80%;">
                                    <span class="arrow" style="border-right:8px solid #fff"></span>
                                    <span class="body" style="text-align:justify;display: flex;flex-direction: column;">
                                        {!! $whats->mensagem !!}<br>
                                        <span class="datetime" style="float:right;color:#2f353b;text-align: end;font-size: 11px;font-weight: 700;">
                                            {{\Carbon\Carbon::parse($whats->created_at)->format('d/m/Y H:s:i')}}
                                        </span>
                                    </span>
                                </div>
                            </li>
                        @else
                            <li class="out"><img class="avatar" alt=""
                                src='{{asset("pages/img/gestao/ux-base-atendimento-30x30.png")}}'
                                style="width: 30px;height: 30px;">
                                <div class="message"
                                    style=" background-color:#426a9e;color:#fff;border-right: 2px solid #426a9e;margin-right:10%;border-radius: 5px!important; max-width: fit-content;box-shadow: 0 2px 5px #000;margin-left: auto;max-width: fit-content;width: 80%">
                                    <span class="arrow" style="border-left:8px solid #426a9e"></span>
                                    <span class="body" style="text-align:justify;display: flex;flex-direction: column;">
                                        {!! $whats->mensagem !!}<br>
                                        <span class="datetime" style="float:right;color:#fff;margin-left:10px;text-align: end;font-size:12px;font-size: 11px;font-weight: 700;">
                                            {{\Carbon\Carbon::parse($whats->created_at)->format('d/m/Y H:s:i')}}
                                        </span>
                                    </span>
                                </div>
                            </li>
                        @endif
                        @endforeach
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
@endif
@endforeach