@php
$page_title = Route::currentRouteName();
@endphp

<div class="card card-custom bg-white {{ @$class }} border-15 shadow">
    {{-- Body --}}
    <div class="card-body d-flex align-items-center flex-column p-8">
        <div class="d-flex flex-center flex-column mx-auto my-10 text-center">
            <h1 class="display-6 font-weight-bold">Informações Ligação</h1>
        </div>


        <div class="d-flex flex-center flex-row mx-auto mb-10 text-center">
            <img class="rounded-circle mt-n1 d-xl-none d-xxl-block" src="{{ asset('img/icon/call.png') }}" alt="Call icon" draggable="false" style="height: 44px;">

            <h1 id="card-counter-atendimento" class="display-3 font-weight-bold ml-5 ml-xl-0 ml-xxl-5">
                @if ($page_title == 'agente.index')
                <span id="duration">00:00:00</span>
                @else
                <span class="hour">00</span>:<span class="min">00</span>:<span class="sec">00</span>
                @endif
            </h1>

        </div>

        <div class="d-flex flex-column my-5 text-left w-100 px-10">
            <span class="font-size-h6 mb-7" style="line-height: 1.3em;">
                <span class="font-weight-bold font-size-h3">Tipo Atendimento</span><br>
                <span id="destination">Carregando...</span>
            </span>
            <span class="font-size-h6 mb-7" style="line-height: 1.3em;">
                <span class="font-weight-bold font-size-h3">Número Telefone</span><br>

                <div class="my-1">
                    <span class="label label-sm label-rounded mr-2 label-primary"><i class="fas fa-arrow-right icon-sm text-white"></i></span><span id="callerPhone">Carregando...</span>
                </div>

                <div class="my-1">
                    <span class="label label-sm label-rounded mr-2">1</span><span id="BeneFone1">Carregando...</span>
                </div>

                <div>
                    <span class="label label-sm label-rounded mr-2">2</span><span id="BeneFone2">Carregando...</span>
                </div>


            </span>
            <span class="font-size-h6 from-queue" style="line-height: 1.3em;">
                <span class="font-weight-bold font-size-h3">Fila Atendimento</span><br>
                <span id="queue">Carregando...</span>
            </span>
        </div>
    </div>
</div>