@extends('layouts.app') 
@section('content')
    <div class="row justify-content-center dashboard" >
        @if (isset($errors))
        <div class="col-sm-11 mb-4 text-center">
            <div class="alert alert-warning" role="alert">
                <p class="card-text">Ocorreu um erro na importação, favor informar ao desenvolvedor.</p>
            </div>
        </div> 
        @endif
        <div class="col-sm-4 mb-1 text-center">
            <div class="card dash pt-4 mb-2">
                <div class="flex justify-content-between px-5">
                    <div>
                        <h4>Importações</h4>
                    </div>
                    <div>
                        <a id="reload" class="btn flex" style="color: #8f8f8f;">
                            Atualizar
                            <i class="bi bi-arrow-repeat ml-2"></i>
                            
                        </a>
                    </div>
                </div>
                <div class="card-body" style="display: flex; flex-direction:column; justify-content:space-evenly;">
                    @if (isset($contacts))
                        @foreach ($contacts as $contact)

                            @if ($contact->data == date('d/m/Y', strtotime( date('Y-m-d'))))
                            <div class="flex justify-content-around p-2" style="align-items: center" >
                                    <p class="card-text"><strong>{{ $contact->total }} atendimentos</strong></p>
                                    <p class="card-text"><strong>{{ $contact->data }}</strong></p>       
                                    <p class="success-span">Importado</p>

                                </div>
                            @else
                            <div class="flex justify-content-around p-2" style="align-items: center" >
                                <p class="card-text">{{ $contact->total }} atendimentos</p>       
                                <p class="card-text">{{ $contact->data }}</p>       
                                <p class="success-span">Importado</p>

                            </div>
                            @endif
                        @endforeach
                    @endif   
                </div>
            </div>
            <span class="text-muted">Ultima atualização<br> <strong>{{$lastHour->hour}}</strong> </span>
        </div>
        <div class="col-sm-7 mb-1 text-center">
            <div class="card dash py-4">
                <div class="row justify-content-between">
                    <h4>Ultimos contatos</h4>
                </div>
                
                <div class="card-body" style="display: flex; flex-direction:column; justify-content:space-evenly;">
                    @if (isset($contacts_data))
                        @foreach ($contacts_data as $contact)
                            @if (isset($import)) @endif
                            <div class="flex justify-content-around pl-5">
                                <p class="col text-left"><i class="bi bi-person-fill mr-2" style="color: #a7a7a7"></i>
                                    {{ $contact->agentName }}</p>

                                <p class="col text-left"><i class="bi bi-telephone-inbound-fill mr-2" style="color: #0083d4"></i>
                                    {{ $contact->consumidor_chat }}
                                </p>

                                <p class="col">
                                    {{ date('d/m H:i' , strtotime($contact->contactStartedDate))}}</p>
                                <p class="col">
                                        
                                    @if ($contact->contactState == 'FINALIZADO')
                                        <i class="bi bi-record-fill" style="color: green"></i>
                                    @elseif($contact->contactState == 'NÃO ATENDIDO')
                                        <i class="bi bi-record-fill" style="color: rgb(203, 3, 3)"></i>

                                    @endif
                                </p>
                            </div>
                           
                        @endforeach
                    @endif   
                </div>
                <a href="/relatorios/geral" class="btn" style="color: #8f8f8f;">Ver Mais
                </a>
            </div>
        </div>
    </div>

@endsection