{{-- Aside --}}

@php

    $kt_logo_image = 'media/images/layout/logos/ezvoice.svg';
    $kt_logo_image_min = 'media/images/layout/logos/ezvoice-min.svg';
    $user_profile_photo = '';
    $user_status = 'agent-online';
    $user_first_letter = ucfirst(substr(UserSessionHelper::name(), 0, 1));

    $userTypeName = UserSessionHelper::user_type_name();

    $userType = UserSessionHelper::user_type();

    switch ($userTypeName) {
        case 'agent':
            $userTypeName = 'Agente';
            break;
        case 'exten':
            $userTypeName = 'Ramal';
            break;
        case 'supervisor':
            $userTypeName = 'Supervisor';
            break;
        case 'admin':
            $userTypeName = 'Administrador';
            break;
        default:
            $userTypeName = ucfirst($userTypeName);
    }

@endphp

<div class="aside aside-left {{ Metronic::printClasses('aside', false) }} d-flex flex-column flex-row-auto"
    id="kt_aside">

    {{-- Brand --}}
    <div class="brand brand justify-content-center mt-8 {{ Metronic::printClasses('brand', false) }}" id="kt_brand">
        <div class="brand-logo">
            <a href="{{ url('/' . UserSessionHelper::user_type()) }}">
                <img alt="{{ config('app.name') }}" src="{{ asset($kt_logo_image) }}" class="logo-anim" />
            </a>
        </div>
    </div>


    {{-- Aside menu --}}
    <div class="aside-menu-wrapper flex-column-fluid" id="kt_aside_menu_wrapper">

        <div class="brand-logo-minimize aside-full mb-7">
            <a href="{{ url('/' . UserSessionHelper::user_type()) }}">
                <img alt="{{ config('app.name') }}" src="{{ asset($kt_logo_image_min) }}"
                    class="d-flex justify-content-center w-75 mx-2" />
            </a>
        </div>

        <div class="brand-logo-minimize aside-full px-5 mt-10">
            <div class="symbol">
                <span class="symbol symbol-lg-35 symbol-25 symbol-primary">
                    <span class="symbol-label font-size-h5 font-weight-bold">
                        {{ $user_first_letter }}
                    </span>
                </span>

                {{--
                        Change CSS class depending on Agent Status (On, Off, AFK)
                        
                        agent-online --> Agent is Online
                        agent-offline --> Agent is Offline
                        agent-afk --> Agent is AFK
                    --}}

                <i class="symbol-badge agent-status agent-online border-0 {{ $user_status }}"></i>
            </div>
        </div>



        <div class="p-7 pb-0 aside-full">
            <div class="card card-custom gutter-b bg-white-o-10 m-0">
                <div class="card-body row p-3 d-flex align-content-center">
                    <div class="col-4 d-flex align-content-center justify-content-center">
                        <div class="symbol mr-5 align-self-start align-self-xxl-center pl-5">
                            <span class="symbol symbol-lg-35 symbol-25 symbol-primary">
                                <span class="symbol-label font-size-h5 font-weight-bold">
                                    {{ $user_first_letter }}
                                </span>
                            </span>

                            {{--
                            Change CSS class depending on Agent Status (On, Off, AFK)
                            
                            agent-online --> Agent is Online
                            agent-offline --> Agent is Offline
                            agent-afk --> Agent is AFK
                        --}}

                            <i class="symbol-badge agent-status agent-online border-0 {{ $user_status }}"></i>
                        </div>
                    </div>
                    <div class="col d-flex flex-column justify-content-center">
                        <h6 class="agent-title m-0 ml-n3 text-white ff-roboto">
                            {{ Session::get('name') }}
                        </h6>

                        @if (Session::get('user_type') == 3 || Session::get('user_type') == 4)
                            <small class="agent-role ml-n3">
                                {{ $userTypeName }} - Nº {{ ucfirst(UserSessionHelper::operator_id()) }}
                            </small>
                            <small class="agent-role ml-n3">
                                Ramal: {{ ucfirst(Session::get('exten')) }}
                            </small>
                        @else
                            <small class="agent-role ml-n3">
                                {{ ucfirst(Auth::user()['user_type_name']) }}
                            </small>
                        @endif

                    </div>
                </div>
            </div>
        </div>




        <div id="kt_aside_menu" class="aside-menu {{ Metronic::printClasses('aside_menu', false) }}">

            <ul class="menu-nav pt-0 {{ Metronic::printClasses('aside_menu_nav', false) }}"
                style="position: relative;height: 95vh;">

                <li class="menu-section menu-section--first mt-0">
                    <h4 class="menu-text w-100" style="font-weight: 400 !important;">{{ env('APP_DESCRIPTION') }}</h4>
                </li>

                <ul id="aside-menu-items" class="menu-nav pt-0 mt-4 scroll scroll-pull" data-scroll="true"
                    data-wheel-propagation="true">
                    {{-- Menu::renderVerMenu(config('menu_aside.items')) --}}

                    @if ($userType == 3)
                        @include('layout.partials.menu.agent')
                    @elseif ($userType == 1 || $userType == 2)
                        @include('layout.partials.menu.manager')
                    @endif

                </ul>
            </ul>

        </div>

        <div class="help-link w-100 py-5">
            <div class="w-100">
                <div class="d-flex align-items-center justify-content-center">
                    <a target="_blank" href="https://ezvoice.com.br/manuais/Manual-ezAgent.pdf" data-container="body"
                        data-toggle="tooltip" data-theme="dark" title="Baixar Manual"
                        class="text-white text-hover-white aside-minimize-help-desk d-flex align-items-center justify-content-center"
                        style="gap: 0.5rem;font-size: 0.8rem;">
                        <i class="fas fa-question-circle fa-sm text-white"></i>
                        Ajuda
                    </a>
                </div>
            </div>
        </div>

    </div>

</div>

<style>
    .aside-minimize .aside-minimize-help-desk {
        flex-direction: column;
        gap: 0;
    }
</style>