@php
    $user_name = UserSessionHelper::name();
    $user_type = UserSessionHelper::user_type_name();
    $user_first_letter = ucfirst(substr($user_name, 0, 1));
@endphp

{{-- Header --}}
<div class="d-flex align-items-center justify-content-between flex-wrap p-5 bgi-size-cover bgi-no-repeat rounded-top"
    style="background-image: url('{{ asset('media/images/layout/ez-bg.png') }}')">
    <div class="d-flex align-items-center" style="gap: 0.6rem;">
        {{-- Symbol --}}
        <div class="symbol">
            <span class="symbol-label text-white font-weight-bold font-size-h4 bg-primary">
                {{ $user_first_letter }}
            </span>
        </div>

        {{-- Text --}}
        <div class="text-white m-0 flex-grow-1 d-inline-block text-truncate" style="width: 160px;">
            <span>
                {{ $user_name }}
            </span>
            @if ($user_type == 'agent')
                <div class="ramal-box-number">
                    <small class="agent-role">Ramal: {{ ucfirst(UserSessionHelper::exten()) }}</small>
                </div>
            @endif
        </div>
    </div>

    <span class="label label-primary label-lg font-weight-bold label-inline">Agente</span>
</div>

{{-- Nav --}}
<div class="navi navi-spacer-x-0">
    <!-- {{-- Item --}}
    <a href="#" class="navi-item px-8" id="kt_quick_user_toggle">
        <div class="navi-link">
            <div class="navi-icon mr-2">
                <i class="fas fa-calendar text-primary"></i>
            </div>
            <div class="navi-text">
                <div class="font-weight-bold">
                    Minha escala
                </div>
                <div class="text-muted">
                    Acompanhe sua escala semanal
                </div>
            </div>
        </div>
    </a>
    <a href="#" class="navi-item px-8 EditPerfil" id="kt_quick_user_toggle" data-toggle="modal" data-target="#modalEditProfile">
        <div class="navi-link">
            <div class="navi-icon mr-2">
                <i class="fas fa-user  text-primary"></i>
            </div>
            <div class="navi-text">
                <div class="font-weight-bold">
                    Perfil Usuario
                </div>
                <div class="text-muted">
                </div>
            </div>
        </div>
    </a>
    {{-- Footer --}}
    <div class="navi-separator mt-3"></div> -->
    <div class="navi-footer p-5">
        <a href="#" class="btn btn-light-success d-flex justify-content-center align-items-center"
            style="gap:0.5rem;font-size: 1rem;" id="redial" data-toggle="popover focus" tabindex="0"
            data-placement="bottom" data-trigger="manual" data-content="Discando...">
            <i class="fas fa-phone p-0"></i>
            <span>
                Reconectar
            </span>
        </a>
        @include('layout.partials.logoutButton.logoutButton')
    </div>
</div>