{{-- Header --}}

<div id="kt_header" class="header {{ Metronic::printClasses('header', false) }}" {{ Metronic::printAttrs('header') }}>

    {{-- Container --}}
    <div class="container-fluid d-flex align-items-center justify-content-between">
        @if (config('layout.header.self.display'))

        @php
        $kt_logo_image = 'logo-light.png';
        @endphp

        @if (config('layout.header.self.theme') === 'light')
        @php $kt_logo_image = 'logo-dark.png' @endphp
        @elseif (config('layout.header.self.theme') === 'dark')
        @php $kt_logo_image = 'logo-light.png' @endphp
        @endif

        {{-- Header Menu --}}
        <div class="header-menu-wrapper header-menu-wrapper-left flex-fill" id="kt_header_menu_wrapper">
            <div id="agentId" data-agentId="{{ $_SESSION['agent_id'] }}" data-tableId="{{ $_SESSION['id'] }}" data-exten="{{ $_SESSION['exten'] }}"></div>
            @if(config('layout.aside.self.display') == false)
            <div class="header-logo">
                <a href="{{ url('/') }}">
                    <img alt="Logo" src="{{ asset('media/logos/'.$kt_logo_image) }}" />
                </a>
            </div>
            @endif


            @if (explode(".",Route::currentRouteName())[0] == 'agente')
            <div id="kt_header_menu" class="header-menu header-menu-mobile d-flex justify-content-start {{ Metronic::printClasses('header_menu', false) }}" {{ Metronic::printAttrs('header_menu') }}>
                <ul class="menu-nav {{ Metronic::printClasses('header_menu_nav', false) }}">
                    <!-- {{ Menu::renderHorMenu(config('menu_header.items')) }} -->
                    <li class="menu-item menu-item-submenu menu-item-rel">
                        <a href="" class="pl-3 pr-2 aside-toggle">
                            <span class="svg-icon menu-icon">
                                <!--begin::Svg Icon | path:media/svg/icons/Communication/Dotted-Hamburguer.svg-->
                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="14" viewBox="0 0 20 14">
                                    <g transform="translate(1 1)">
                                        <path id="line-1" d="M0,.5H13" transform="translate(5 -0.5)" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2"></path>
                                        <path id="line-2" data-name="Path" d="M0,.5H13" transform="translate(5 5.5)" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2"></path>
                                        <path id="line-3" data-name="Path" d="M0,.5H13" transform="translate(5 11.5)" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2"></path>
                                        <path data-name="Path" d="M.5.5h0" transform="translate(-0.5 -0.5)" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2"></path>
                                        <path data-name="Path" d="M.5.5h0" transform="translate(-0.5 5.5)" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2"></path>
                                        <path data-name="Path" d="M.5.5h0" transform="translate(-0.5 11.5)" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2"></path>
                                    </g>
                                </svg>
                                <!--end::Svg Icon-->
                            </span>
                            <span class="menu-text"></span>
                            <i class="menu-arrow"></i>
                        </a>
                    </li>
                </ul>

                @php

                $hide = false;

                $pausedMin = '00';
                $pausedSecs = '00';

                if ($isPaused['paused'] == true) {
                $hide = true;
                $pausedMin = date("i", strtotime($isPaused['time']));
                $pausedSecs = date("s", strtotime($isPaused['time']));
                }

                @endphp


                <ul class="menu-nav float-right {{ $hide ? 'd-none' : 'd-block' }} tooltip-primary" id="queues" data-toggle="tooltip" data-placement="bottom" data-original-title="Entre em uma fila!" title="Entre em uma fila!" data-trigger="manual">
                    <li class="menu-item menu-item-submenu menu-item-rel" data-menu-toggle="click" aria-haspopup="true">
                        <a href="#" class="pl-5 pr-4 menu-link menu-toggle">
                            <span class="menu-icon w-75">
                                <img src="{{ asset('/img/layout/icons/queues.png') }}" alt="" class="img-fluid w-75 rounded-circle">
                            </span>
                            <span class="ml-3 mr-10 menu-text" style="font-size: 15px;"> FILA</span>
                            <i class="ml-10 menu-arrow d-flex"></i>
                        </a>
                        <div class="menu-submenu menu-submenu-classic menu-submenu-left scroll-bar-limit" data-hor-direction="menu-submenu-left">
                            <ul class="menu-subnav">

                                @if (!empty($queues))
                                @foreach($queues as $key=> $queue)

                                @php

                                $queueActive = false;

                                if (in_array($queue->name, $queueAgentBelong)) {
                                $queueActive = true;
                                }

                                @endphp
                                <li data-queueId="{{$queue->id}}" data-queueName="{{$queue->name}}" class="{{ $queueActive ? 'active' : ' ' }} menu-item menu-item-submenu queueItem" data-menu-toggle="hover" aria-haspopup="true">
                                    <a href="#" data-val="{{$queue->id}}" class="menu-link menu-toggle">
                                        <span class="svg-icon menu-icon">
                                            <!--begin::Svg Icon | path:media/svg/icons/Communication/Add-user.svg-->
                                            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                                                <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                                    <polygon points="0 0 24 0 24 24 0 24"></polygon>
                                                    <path d="M18,8 L16,8 C15.4477153,8 15,7.55228475 15,7 C15,6.44771525 15.4477153,6 16,6 L18,6 L18,4 C18,3.44771525 18.4477153,3 19,3 C19.5522847,3 20,3.44771525 20,4 L20,6 L22,6 C22.5522847,6 23,6.44771525 23,7 C23,7.55228475 22.5522847,8 22,8 L20,8 L20,10 C20,10.5522847 19.5522847,11 19,11 C18.4477153,11 18,10.5522847 18,10 L18,8 Z M9,11 C6.790861,11 5,9.209139 5,7 C5,4.790861 6.790861,3 9,3 C11.209139,3 13,4.790861 13,7 C13,9.209139 11.209139,11 9,11 Z" fill="#000000" fill-rule="nonzero" opacity="0.3"></path>
                                                    <path d="M0.00065168429,20.1992055 C0.388258525,15.4265159 4.26191235,13 8.98334134,13 C13.7712164,13 17.7048837,15.2931929 17.9979143,20.2 C18.0095879,20.3954741 17.9979143,21 17.2466999,21 C13.541124,21 8.03472472,21 0.727502227,21 C0.476712155,21 -0.0204617505,20.45918 0.00065168429,20.1992055 Z" fill="#000000" fill-rule="nonzero"></path>
                                                </g>
                                            </svg>
                                            <!--end::Svg Icon-->
                                        </span>
                                        <span class="menu-text">{{$queue->name}}</span>
                                    </a>
                                </li>
                                @endforeach
                                @else

                                <li class="px-5 menu-item menu-item-submenu">
                                    <span class="mt-1 mr-5 menu-icon">
                                        <!--begin::Svg Icon | path:media/svg/icons/Communication/Add-user.svg-->
                                        <i class="fas fa-times text-primary"></i>
                                        <!--end::Svg Icon-->
                                    </span>
                                    <span class="menu-text" style="line-height: 1.8em;">Você não possui nenhuma fila</span>
                                </li>

                                @endif
                            </ul>
                        </div>
                    </li>
                </ul>

                <style>
                    .scroll-bar-limit {
                        overflow-y: scroll !important;
                        max-height: 35vh !important;
                    }

                    .scroll-bar-limit::-webkit-scrollbar {
                        width: 10px;
                    }

                    .scroll-bar-limit::-webkit-scrollbar-track {
                        background: #c6c6c6;
                        border-radius: 20px;
                    }

                    .scroll-bar-limit::-webkit-scrollbar-thumb {
                        background-color: #f03232;
                        border-radius: 20px;
                    }
                </style>

                <ul class="menu-nav float-right {{ $hide ? 'd-none' : 'd-block' }}" id="pauses">
                    <li class="menu-item menu-item-submenu menu-item-rel" data-menu-toggle="click" aria-haspopup="true">
                        <a href="#" class="pl-5 pr-4 menu-link menu-toggle">
                            <span class="menu-icon w-75">
                                <img src="{{ asset('/img/layout/icons/pause.png') }}" alt="" class="img-fluid w-75 rounded-circle">
                            </span>
                            <span class="ml-3 mr-10 menu-text" style="font-size: 15px;"> PAUSAS </span>
                            <i class="ml-10 menu-arrow d-flex"></i>
                        </a>
                        <div class="menu-submenu menu-submenu-classic menu-submenu-left scroll-bar-limit" data-hor-direction="menu-submenu-left">
                            <ul class="menu-subnav">
                                @foreach($pauses as $key=> $pause)

                                <li data-duration="{{$pause->minutes}}" data-pauseid="{{$pause->id}}" data-agent="{{$_SESSION['agent_id']}}" data-agentid="{{$_SESSION['id']}}" data-text="{{$pause->description}}" class="menu-item menu-item-submenu pause-dd" data-menu-toggle="hover" aria-haspopup="true">
                                    <a href="#" data-val="{{$pause->id}}" data-duration="{{$pause->minutes}}" class="menu-link menu-toggle">
                                        <span class="svg-icon menu-icon">
                                            <!--begin::Svg Icon | path:media/svg/icons/Communication/Add-user.svg-->
                                            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                                                <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                                    <polygon points="0 0 24 0 24 24 0 24"></polygon>
                                                    <path d="M18,8 L16,8 C15.4477153,8 15,7.55228475 15,7 C15,6.44771525 15.4477153,6 16,6 L18,6 L18,4 C18,3.44771525 18.4477153,3 19,3 C19.5522847,3 20,3.44771525 20,4 L20,6 L22,6 C22.5522847,6 23,6.44771525 23,7 C23,7.55228475 22.5522847,8 22,8 L20,8 L20,10 C20,10.5522847 19.5522847,11 19,11 C18.4477153,11 18,10.5522847 18,10 L18,8 Z M9,11 C6.790861,11 5,9.209139 5,7 C5,4.790861 6.790861,3 9,3 C11.209139,3 13,4.790861 13,7 C13,9.209139 11.209139,11 9,11 Z" fill="#000000" fill-rule="nonzero" opacity="0.3"></path>
                                                    <path d="M0.00065168429,20.1992055 C0.388258525,15.4265159 4.26191235,13 8.98334134,13 C13.7712164,13 17.7048837,15.2931929 17.9979143,20.2 C18.0095879,20.3954741 17.9979143,21 17.2466999,21 C13.541124,21 8.03472472,21 0.727502227,21 C0.476712155,21 -0.0204617505,20.45918 0.00065168429,20.1992055 Z" fill="#000000" fill-rule="nonzero"></path>
                                                </g>
                                            </svg>
                                            <!--end::Svg Icon-->
                                        </span>
                                        <span class="menu-text">{{$pause->description}}</span>
                                    </a>
                                </li>
                                @endforeach
                            </ul>
                        </div>
                    </li>
                </ul>


                <ul id="unpause" data-agent="{{$_SESSION['agent_id']}}" data-agentid="{{$_SESSION['id']}}" data-isPaused="{{ $hide ? 'true' : 'false' }}" data-pausedLimit="{{$isPaused['paused'] == true ? $isPaused['endTime'] : 0}}" class="menu-nav float-right {{ $hide ? 'd-flex' : 'd-none' }}">
                    <li class="menu-item menu-item-submenu menu-item-rel" data-menu-toggle="click" aria-haspopup="true">
                        <button class="pr-8 btn btn-primary btn-shadow font-weight-bold d-flex align-items-center">
                            <span class="svg-icon svg-icon-light svg-icon-2x">

                                <!--begin::Svg Icon | path:/var/www/preview.keenthemes.com/metronic/releases/2021-05-14-112058/theme/html/demo1/dist/../src/media/svg/icons/Media/Play.svg--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                                    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                        <rect x="0" y="0" width="24" height="24" />
                                        <path d="M9.82866499,18.2771971 L16.5693679,12.3976203 C16.7774696,12.2161036 16.7990211,11.9002555 16.6175044,11.6921539 C16.6029128,11.6754252 16.5872233,11.6596867 16.5705402,11.6450431 L9.82983723,5.72838979 C9.62230202,5.54622572 9.30638833,5.56679309 9.12422426,5.7743283 C9.04415337,5.86555116 9,5.98278612 9,6.10416552 L9,17.9003957 C9,18.1765381 9.22385763,18.4003957 9.5,18.4003957 C9.62084305,18.4003957 9.73759731,18.3566309 9.82866499,18.2771971 Z" fill="#000000" />
                                    </g>
                                </svg>
                                <!--end::Svg Icon-->
                            </span>
                            DESPAUSAR

                            <div id="pausedTimer" class="px-5 py-2 bg-white rounded text-dark font-size-h6 ml-7">
                                <span id="min">{{$pausedMin}}</span>:<span id="sec">{{$pausedSecs}}</span>
                            </div>
                        </button>
                    </li>

                </ul>

                <ul id="swapPause" data-isPaused="{{ $hide ? 'true' : 'false' }}" data-pausedLimit="{{$isPaused['paused'] == true ? $isPaused['endTime'] : 0}}" class="menu-nav float-right {{ $hide ? 'd-flex' : 'd-none' }}">
                    <li class="menu-item menu-item-submenu menu-item-rel swap-pause-dropdown" data-menu-toggle="click" aria-haspopup="true">
                        <a href="#" class="pl-5 pr-4 menu-link menu-toggle h-100 align-items-center">
                            <i class="fas fa-sync menu-text" style="font-weight: 900 !important"></i>
                            <span class="ml-3 mr-10 menu-text" style="font-size: 15px;"> TROCAR PAUSA </span>
                            <i class="ml-10 menu-arrow d-flex"></i>
                        </a>
                        <div class="menu-submenu menu-submenu-classic menu-submenu-left scroll-bar-limit" data-hor-direction="menu-submenu-left">
                            <ul class="menu-subnav">
                                @foreach($pauses as $key=> $pause)

                                <li data-duration="{{$pause->minutes}}" data-pauseid="{{$pause->id}}" data-agent="{{$_SESSION['agent_id']}}" data-agentid="{{$_SESSION['id']}}" data-text="{{$pause->description}}" class="menu-item menu-item-submenu swappause-dd" data-menu-toggle="hover" aria-haspopup="true">
                                    <a href="#" data-val="{{$pause->id}}" data-duration="{{$pause->minutes}}" class="menu-link menu-toggle">
                                        <span class="svg-icon menu-icon">
                                            <!--begin::Svg Icon | path:media/svg/icons/Communication/Add-user.svg-->
                                            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                                                <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                                    <polygon points="0 0 24 0 24 24 0 24"></polygon>
                                                    <path d="M18,8 L16,8 C15.4477153,8 15,7.55228475 15,7 C15,6.44771525 15.4477153,6 16,6 L18,6 L18,4 C18,3.44771525 18.4477153,3 19,3 C19.5522847,3 20,3.44771525 20,4 L20,6 L22,6 C22.5522847,6 23,6.44771525 23,7 C23,7.55228475 22.5522847,8 22,8 L20,8 L20,10 C20,10.5522847 19.5522847,11 19,11 C18.4477153,11 18,10.5522847 18,10 L18,8 Z M9,11 C6.790861,11 5,9.209139 5,7 C5,4.790861 6.790861,3 9,3 C11.209139,3 13,4.790861 13,7 C13,9.209139 11.209139,11 9,11 Z" fill="#000000" fill-rule="nonzero" opacity="0.3"></path>
                                                    <path d="M0.00065168429,20.1992055 C0.388258525,15.4265159 4.26191235,13 8.98334134,13 C13.7712164,13 17.7048837,15.2931929 17.9979143,20.2 C18.0095879,20.3954741 17.9979143,21 17.2466999,21 C13.541124,21 8.03472472,21 0.727502227,21 C0.476712155,21 -0.0204617505,20.45918 0.00065168429,20.1992055 Z" fill="#000000" fill-rule="nonzero"></path>
                                                </g>
                                            </svg>
                                            <!--end::Svg Icon-->
                                        </span>
                                        <span class="menu-text">{{$pause->description}}</span>
                                    </a>
                                </li>
                                @endforeach
                            </ul>
                        </div>
                    </li>
                </ul>

                <!-- <ul class="float-right menu-nav d-block">
                        <li class="menu-item menu-item-submenu menu-item-rel h-100" data-menu-toggle="click" aria-haspopup="true">
                            <button class="pr-8 btn btn-success btn-shadow font-weight-bold d-flex align-items-center h-100" id="unpauseAgent" data-agent="{{$_SESSION['agent_id']}}" data-agentid="{{$_SESSION['id']}}">
                                <span class="svg-icon svg-icon-light svg-icon-2x">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                                        <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                            <rect x="0" y="0" width="24" height="24" />
                                            <path d="M9.82866499,18.2771971 L16.5693679,12.3976203 C16.7774696,12.2161036 16.7990211,11.9002555 16.6175044,11.6921539 C16.6029128,11.6754252 16.5872233,11.6596867 16.5705402,11.6450431 L9.82983723,5.72838979 C9.62230202,5.54622572 9.30638833,5.56679309 9.12422426,5.7743283 C9.04415337,5.86555116 9,5.98278612 9,6.10416552 L9,17.9003957 C9,18.1765381 9.22385763,18.4003957 9.5,18.4003957 C9.62084305,18.4003957 9.73759731,18.3566309 9.82866499,18.2771971 Z" fill="#000000" />
                                        </g>
                                    </svg>
                    
                                </span>
                                RECONECTAR
                            </button>
                        </li>
                    </ul> -->


                @else

                <div id="kt_header_menu" class="header-menu header-menu-mobile d-flex justify-content-between {{ Metronic::printClasses('header_menu', false) }}" {{ Metronic::printAttrs('header_menu') }}>
                    <ul class="menu-nav {{ Metronic::printClasses('header_menu_nav', false) }}">
                        <!-- {{ Menu::renderHorMenu(config('menu_header.items')) }} -->
                        <li class="menu-item menu-item-submenu menu-item-rel">
                            <a href="" class="pl-3 pr-2 aside-toggle">
                                <span class="svg-icon menu-icon">
                                    <!--begin::Svg Icon | path:media/svg/icons/Communication/Dotted-Hamburguer.svg-->
                                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="14" viewBox="0 0 20 14">
                                        <g transform="translate(1 1)">
                                            <path id="line-1" d="M0,.5H13" transform="translate(5 -0.5)" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2"></path>
                                            <path id="line-2" data-name="Path" d="M0,.5H13" transform="translate(5 5.5)" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2"></path>
                                            <path id="line-3" data-name="Path" d="M0,.5H13" transform="translate(5 11.5)" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2"></path>
                                            <path data-name="Path" d="M.5.5h0" transform="translate(-0.5 -0.5)" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2"></path>
                                            <path data-name="Path" d="M.5.5h0" transform="translate(-0.5 5.5)" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2"></path>
                                            <path data-name="Path" d="M.5.5h0" transform="translate(-0.5 11.5)" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2"></path>
                                        </g>
                                    </svg>
                                    <!--end::Svg Icon-->
                                </span>
                                <span class="menu-text"></span>
                                <i class="menu-arrow"></i>
                            </a>
                        </li>
                    </ul>

                    <div class="flex mx-5 col w-100" id="queue-list" style="overflow: hidden;height: 36px;">
                        <div id="carousel-queues" class="row h-100 sliding-animation align-content-start">

                            <!-- Rendered on AJAX::headerDashAgent -->

                        </div>
                    </div>

                    <style>
                        #queue-list::before,
                        #queue-list::after {
                            background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 50%);
                            content: "";
                            height: 100px;
                            position: absolute;
                            width: 200px;
                            z-index: 2;
                            pointer-events: none;
                        }

                        #queue-list::after {
                            right: 0;
                            top: 0;
                            transform: rotateZ(180deg);
                        }

                        #queue-list::before {
                            left: 0;
                            top: 0;
                        }

                        .inner-item {
                            height: 36px;
                            background-color: #EEF0F8;
                        }

                        .queue-item {
                            /* transition: ease 100ms transform; */
                            cursor: default;
                        }

                        .overlay {
                            z-index: 1;
                            padding: 0;
                            border: none;
                            background: rgba(68, 68, 68, 0.5);
                        }

                        #carousel-queues {
                            width: max-content;
                        }

                        #carousel-queues:hover {
                            animation-play-state: paused;
                        }
                    </style>

                    @endif

                </div>
            </div>

            @else
            <div></div>
            @endif

            @include('layout.partials.extras._topbar')
        </div>
    </div>