{{-- Aside --}}

@php

$kt_logo_image = 'img/layout/logos/ezvoice.svg';
$kt_logo_image_min = 'img/layout/logos/ezvoice-min.svg';
$user_profile_photo = '';
$user_status = 'agent-online';
$user_first_letter = ucfirst(substr($_SESSION['name'], 0, 1));

@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('/'.$_SESSION['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('/'.$_SESSION['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" style="margin-left: 1px;">
            <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['name']; }}
                        </h6>

                        @if ($_SESSION["user_type"] == "agente")
                            <small class="agent-role ml-n3">{{ ucfirst($_SESSION['user_type']);}} - Nº {{ ucfirst($_SESSION['agent_id']);}}</small>
                            <small class="agent-role ml-n3">Ramal: {{ ucfirst($_SESSION['exten']);}}</small>
                        @else
                            <small class="agent-role ml-n3">{{ ucfirst($_SESSION['user_type']);}}</small>

                        @endif

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




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

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

                <li class="menu-section menu-section--first mt-0">
                    <h4 class="menu-text w-100">{{ 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 ($_SESSION["user_type"] == "agente")
                    @include('layout.partials.menu.agent')

                    @elseif ($_SESSION["user_type"] == "supervisor")
                    @include('layout.partials.menu.manager')

                    @endif

                </ul>
            </ul>

        </div>

        <div class="row help-link w-100 py-5 pl-5">
            <div class="col px-2 ml-1">
                <div class="text-center flex-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="font-weight-bold text-white text-hover-white"><i class="fas fa-question-circle fa-sm mr-1 text-white"></i> Ajuda</a>
                </div>
            </div>
        </div>

    </div>

</div>