{{-- Extends layout --}}
@extends('layout.default')

{{-- Content --}}
@section('content.extended')

{{-- Dashboard Manager --}}

<div class="row">
    <div class="col">
        <div class="card card-custom {{ @$class }} shadow-none bg-transparent">
            <div class="card-header align-items-center border-0 mt-4">
                <h3 class="card-title align-items-start flex-row"></h3>
                <div class="card-toolbar row mb-5">
                    <!--begin::Menu-->
                    <select class="form-control selectpicker mb-5 mr-5 col" data-style="btn-light-danger" id="queueActive">
                        <option value="All" data-queueID="0">Geral</option>
                        @foreach($queues as $key=> $queue)
                        <option value="{{$queue->name}}" data-queueId="{{$queue->id}}">{{$queue->name}}</option>
                        @endforeach
                    </select>

                    <select class="form-control selectpicker mb-5 col" data-style="btn-light-danger" id="statusFilter">
                        <option value="Todos">Todos</option>
                        <option value="Disponível">Disponível</option>
                        <option value="Em Atendimento">Em Atendimento</option>
                        <option value="Sem Fila">Sem Fila</option>
                        <option value="Pausado">Pausado</option>
                    </select>

                    <style>
                        button[data-id='queueActive'] {
                            min-width: 100px;
                        }

                        .dropdown-menu.show {
                            left: unset !important;
                            right: 0px !important;
                        }

                        .spy {
                            background-image: url("{{asset('/img/icon/spy.png')}}");
                            background-size: contain;
                        }

                        .whisper {
                            background-image: url("{{asset('/img/icon/ear.png')}}");
                            background-size: contain;
                        }

                        .swap {
                            background-image: url("{{asset('/img/icon/swap.png')}}");
                            background-size: contain;
                        }

                        .add {
                            background-image: url("{{asset('/img/icon/plus-solid.svg')}}");
                            background-size: contain;
                            filter: invert(66%) sepia(59%) saturate(466%) hue-rotate(86deg) brightness(94%) contrast(86%) !important;
                            background-position: center;
                            background-repeat: no-repeat;
                        }

                        .remove {
                            background-image: url("{{asset('/img/icon/trash-can-solid.svg')}}");
                            background-size: contain;
                            filter: invert(51%) sepia(85%) saturate(7460%) hue-rotate(347deg) brightness(101%) contrast(88%) !important;
                            background-position: center;
                            background-repeat: no-repeat;
                        }
                    </style>
                    <!--end::Menu-->
                </div>
            </div>

            <div style="display: none; position: absolute; left:50%; top:50%;" class="align-items-center loading-table row p-5">
                <div class="spinner spinner-primary py-3 pl-4 pr-5"></div>
                Carregando...
            </div>

            <div id="allAgents" class="card-body pt-3">
                <div class="cardContainer row">
                    <!-- card listing all agents-->


                </div>

                <style>


                    .agent-blf .infos {
                        top: 0;
                        transition: top ease 400ms;
                    }

                    .agent-blf:hover .infos,
                    .agent-blf:focus .infos {
                        top: -100%;
                    }


                    .agent-blf .buttons {
                        bottom: -100%;
                        transition: bottom ease 400ms;
                    }

                    .agent-blf:hover .buttons,
                    .agent-blf:focus .buttons {
                        bottom: 0;
                    }


                    .symbol-label,
                    .symbol-circle {
                        transition: all 350ms ease-out !important;
                    }

                    .agent-blf {
                        opacity: 1;
                        transition: all 350ms ease-out !important;
                    }

                    /* Status classes by color */

                    /* Deslogado */
                    .agent-blf.grey {
                        opacity: 0.5 !important;
                    }
                    .grey {
                        pointer-events: none !important;
                    }
                    
                    .grey .agentStatus {
                        margin-top: 1rem !important;
                        margin-bottom: 1rem !important;
                    }

                    .grey .symbol-circle {
                        border: 6px solid #D2D2D2;
                        margin-top: -60px;
                        filter: drop-shadow(0px 0px 10px rgba(208, 208, 208, 0.47));
                    }

                    .grey .symbol-label {
                        background: 
                        linear-gradient(180deg, rgba(217, 217, 217, 0) 54.17%, 
                        rgba(213, 213, 213, 0.8) 100%),
                        url("{{asset('img/layout/icons/audio-placeholder.jpg')}}");

                        background-size: cover;
                    }
                    
                    .grey .agentStatus::before {
                        content: '';
                        width: 6px;
                        height: 6px;
                        top: 35%;
                        right: -14px;
                        position: absolute;
                        background-color: #D2D2D2;
                        border-radius: 999px;
                        bottom: 50%;
                    }

                    /* Nenhuma Fila */
                    .orange .symbol-circle {
                        border: 6px solid #f9b648;
                        margin-top: -60px;
                        filter: drop-shadow(0px 0px 10px rgba(249, 182, 72, 0.47));
                    }

                    .orange .symbol-label {
                        background: 
                        linear-gradient(180deg,rgba(249, 182, 72, 0) 54.17%, 
                        rgba(249, 182, 72, 0.8) 100%),
                        url("{{asset('img/layout/icons/audio-placeholder.jpg')}}");
                        background-size: cover;
                    }
                    
                    .orange .agentStatus::before {
                        content: '';
                        width: 6px;
                        height: 6px;
                        top: 35%;
                        right: -14px;
                        position: absolute;
                        background-color: #f9b648;
                        border-radius: 999px;
                        bottom: 50%;
                    }

                    .orange .symbol-circle {
                        filter: drop-shadow(0px 0px 10px rgba(249, 182, 72, 0.47));
                    }

                    .orange .symbol-circle>span {
                        filter: drop-shadow(0px 8px 25px rgba(249, 182, 72, 0.3));
                    }

                    .orange .btn-blf {
                        background-color: rgba(249, 182, 72, 0.15);
                    }
                    .orange .btn-blf:active,
                    .orange .btn-blf:focus {
                        background-color: rgba(249, 182, 72, 0.15) !important;
                        border-color: #f9b648 !important;

                        box-shadow: 0 0.5rem 1.5rem 0.5rem rgba(249, 182, 72, 0.075) !important;
                    }
                    .orange .btn-blf:active .blf-icon,
                    .orange .btn-blf:focus .blf-icon {
                        filter: invert(72%) sepia(90%) saturate(417%) hue-rotate(333deg) brightness(101%) contrast(95%) !important;
                    }
                    .orange .btn-blf:hover {
                        background-color: rgb(249, 182, 72);
                    }

                    .orange .btn-blf .blf-icon {
                        filter: invert(72%) sepia(90%) saturate(417%) hue-rotate(333deg) brightness(101%) contrast(95%);
                    }

                    /* Disponivel */
                    .green .symbol-circle {
                        border: 6px solid #6AD49A;
                        margin-top: -60px;
                        filter: drop-shadow(0px 0px 10px rgba(106, 212, 154, 0.47));
                    }

                    .green .symbol-label {
                        background: 
                        linear-gradient(180deg,rgba(106, 212, 154, 0) 54.17%, 
                        rgba(106, 212, 154, 0.8) 100%),
                        url("{{asset('img/layout/icons/audio-placeholder.jpg')}}");
                        background-size: cover;
                    }
                    
                    .green .agentStatus::before {
                        content: '';
                        width: 6px;
                        height: 6px;
                        top: 35%;
                        right: -14px;
                        position: absolute;
                        background-color: #6AD49A;
                        border-radius: 999px;
                        bottom: 50%;
                    }

                    .green .symbol-circle {
                        filter: drop-shadow(0px 0px 10px rgba(106, 212, 154, 0.47));
                    }

                    .green .symbol-circle>span {
                        filter: drop-shadow(0px 8px 25px rgba(106, 212, 154, 0.3));
                    }

                    .green .btn-blf {
                        background-color: rgba(106, 212, 154, 0.15);
                    }
                    .green .btn-blf:active,
                    .green .btn-blf:focus {
                        background-color: rgba(106, 212, 154, 0.15) !important;
                        border-color: #6AD49A !important;

                        box-shadow: 0 0.5rem 1.5rem 0.5rem rgba(106, 212, 154, 0.075) !important;
                    }
                    .green .btn-blf:active .blf-icon,
                    .green .btn-blf:focus .blf-icon {
                        filter: invert(76%) sepia(43%) saturate(416%) hue-rotate(93deg) brightness(91%) contrast(90%) !important;
                    }
                    .green .btn-blf:hover {
                        background-color: rgb(106, 212, 154);
                    }

                    .green .btn-blf .blf-icon {
                        filter: invert(76%) sepia(43%) saturate(416%) hue-rotate(93deg) brightness(91%) contrast(90%);
                    }



                    /* Pausado */
                    .yellow .symbol-circle {
                        border: 6px solid #FFCF26;
                        margin-top: -60px;
                        filter: drop-shadow(0px 0px 10px rgba(255, 207, 38, 0.47));
                    }

                    .yellow .symbol-label {
                        background: 
                        linear-gradient(180deg,rgba(255, 207, 38, 0) 54.17%, 
                        rgba(255, 207, 38, 0.8) 100%),
                        url("{{asset('img/layout/icons/audio-placeholder.jpg')}}");
                        background-size: cover;
                    }
                    
                    .yellow .agentStatus::before {
                        content: '';
                        width: 6px;
                        height: 6px;
                        top: 35%;
                        right: -14px;
                        position: absolute;
                        background-color: #FFCF26;
                        border-radius: 999px;
                        bottom: 50%;
                    }

                    .yellow .symbol-circle {
                        filter: drop-shadow(0px 0px 10px rgba(255, 207, 38, 0.47));
                    }

                    .yellow .symbol-circle>span {
                        filter: drop-shadow(0px 8px 25px rgba(255, 207, 38, 0.3));
                    }

                    .yellow .btn-blf {
                        background-color: rgba(255, 207, 38, 0.15);
                    }
                    .yellow .btn-blf:active,
                    .yellow .btn-blf:focus {
                        background-color: rgba(255, 207, 38, 0.15) !important;
                        border-color: #FFCF26 !important;

                        box-shadow: 0 0.5rem 1.5rem 0.5rem rgba(255, 207, 38, 0.075) !important;
                    }
                    .yellow .btn-blf:active .blf-icon,
                    .yellow .btn-blf:focus .blf-icon {
                        filter: invert(75%) sepia(74%) saturate(482%) hue-rotate(353deg) brightness(100%) contrast(102%) !important;
                    }
                    .yellow .btn-blf:hover {
                        background-color: rgb(255, 207, 38);
                    }

                    .yellow .btn-blf .blf-icon {
                        filter: invert(75%) sepia(74%) saturate(482%) hue-rotate(353deg) brightness(100%) contrast(102%);
                    }




                    /* Atendimento */
                    .red .symbol-circle {
                        border: 6px solid #F35D81;
                        margin-top: -60px;
                        filter: drop-shadow(0px 0px 10px rgba(243, 93, 129, 0.47));
                    }

                    .red .symbol-label {
                        background: 
                        linear-gradient(180deg,rgba(243, 93, 129, 0) 54.17%, 
                        rgba(243, 93, 129, 0.8) 100%),
                        url("{{asset('img/layout/icons/audio-placeholder.jpg')}}");
                        background-size: cover;
                    }
                    
                    .red .agentStatus::before {
                        content: '';
                        width: 6px;
                        height: 6px;
                        top: 35%;
                        right: -14px;
                        position: absolute;
                        background-color: #F35D81;
                        border-radius: 999px;
                        bottom: 50%;
                    }

                    .red .symbol-circle {
                        filter: drop-shadow(0px 0px 10px rgba(243, 93, 129, 0.47));
                    }

                    .red .symbol-circle>span {
                        filter: drop-shadow(0px 8px 25px rgba(243, 93, 129, 0.3));
                    }

                    .red .btn-blf {
                        background-color: rgba(243, 93, 129, 0.15);
                    }
                    .red .btn-blf:active,
                    .red .btn-blf:focus {
                        background-color: rgba(243, 93, 129, 0.15) !important;
                        border-color: #F35D81 !important;

                        box-shadow: 0 0.5rem 1.5rem 0.5rem rgba(243, 93, 129, 0.075) !important;
                    }
                    .red .btn-blf:active .blf-icon,
                    .red .btn-blf:focus .blf-icon {
                        filter: invert(47%) sepia(68%) saturate(1134%) hue-rotate(312deg) brightness(99%) contrast(93%) !important;
                    }
                    .red .btn-blf:hover {
                        background-color: rgb(243, 93, 129);
                    }

                    .red .btn-blf .blf-icon {
                        filter: invert(47%) sepia(68%) saturate(1134%) hue-rotate(312deg) brightness(99%) contrast(93%);
                    }



                    .loaded-card {
                        transform: scale(0);
                        opacity: 0;
                        animation: scale-n-fade 300ms cubic-bezier(.17,.84,.44,1) forwards;
                    }
                    .remove-card {
                        animation: scale-n-fade 300ms cubic-bezier(.17,.84,.44,1) forwards reverse;
                    }

                    @-webkit-keyframes scale-n-fade {
                        0% {
                            transform: scale(0);
                            opacity: 0;
                        }

                        100% {
                            transform: scale(1);
                            opacity: 1;
                        }
                    }

                    .symbol-circle {
                        padding: 5px;
                        background-clip: content-box;
                        /* support: IE9+ */
                        /* animation: pulsate 3s ease-out infinite; */
                    }

                    .cardContainer .symbol-label {
                        width: 110px !important;
                        height: 110px !important;
                    }

                    /* 
                    @-webkit-keyframes pulsate {
                        0% {
                            filter: drop-shadow(0px 0px 10px rgba(106, 212, 154, 0));
                        }

                        50% {
                            filter: drop-shadow(0px 0px 10px rgba(106, 212, 154, 0.5));
                        }

                        100% {
                            filter: drop-shadow(0px 0px 10px rgba(106, 212, 154, 0));
                        }
                    } */

                    .blf-icon {
                        filter: invert(51%) sepia(85%) saturate(7460%) hue-rotate(347deg) brightness(101%) contrast(88%);
                        max-width: 100%;
                        max-height: 100%;
                        background-position: center;
                        background-repeat: no-repeat;
                    }

                    .btn-blf {
                        border: solid 2px transparent;
                        width: 42px;
                        height: 42px;
                        transform: scale(0.8);
                    }

                    .btn-blf:hover .blf-icon {
                        filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(226deg) brightness(101%) contrast(102%);
                    }

                    .btn-blf:active .blf-icon,
                    .btn-blf:focus .blf-icon {
                        filter: invert(51%) sepia(85%) saturate(7460%) hue-rotate(347deg) brightness(101%) contrast(88%);
                    }

                    .btn-blf:active,
                    .btn-blf:focus {
                        background-color: #ffe1e1 !important;
                        border-color: #f03232 !important;
                        box-shadow: 0 0.5rem 1.5rem 0.5rem rgba(240, 50, 50, 0.075) !important;
                    }

                    /* Chrome, Safari, Edge, Opera */
                    input::-webkit-outer-spin-button,
                    input::-webkit-inner-spin-button {
                        -webkit-appearance: none;
                        margin: 0;
                    }

                    /* Firefox */
                    input[type=number] {
                        -moz-appearance: textfield;
                    }

                    .pe-none {
                        pointer-events: none !important;
                    }
                </style>
            </div>
        </div>
    </div>
</div>

<!-- Modals -->

<div class="modal fade" id="modal-spy" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="staticBackdrop" aria-hidden="true" style="backdrop-filter: blur(2px);">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <span class="agentLabel symbol symbol-50 mr-7">
                </span>
                <h5 class="modal-title flex-fill"></h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <i aria-hidden="true" class="ki ki-close"></i>
                </button>
            </div>
            <div class="modal-body">

                <label>Digite o seu ramal:</label>
                <input class="form-control form-control-solid form-control-sm" id="spyRamalSupervisor" />

            </div>
            <div class="modal-footer">
                <button id="confirmSpy" type="button" class="btn btn-light-success font-weight-bold" data-dismiss="modal">Confirmar</button>
                <button type="button" class="btn btn-primary font-weight-bold" data-dismiss="modal">Cancelar</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="modal-whisper" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="staticBackdrop" aria-hidden="true" style="backdrop-filter: blur(2px);">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <span class="agentLabel symbol symbol-50 mr-7">
                    <span class="symbol-label border-15">
                        <i class="fas icon-xl"></i>
                    </span>
                </span>
                <h5 class="modal-title flex-fill"></h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <i aria-hidden="true" class="ki ki-close"></i>
                </button>
            </div>
            <div class="modal-body">

                <label>Digite o seu ramal:</label>
                <input type="number" class="form-control form-control-solid form-control-sm" id="soproRamalSupervisor" />

            </div>
            <div class="modal-footer">
                <button id="confirmWhisper" type="button" class="btn btn-light-success font-weight-bold" data-dismiss="modal">Confirmar</button>
                <button type="button" class="btn btn-primary font-weight-bold" data-dismiss="modal">Cancelar</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="modal-swap" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="staticBackdrop" aria-hidden="true" style="backdrop-filter: blur(2px);">

    <div style="max-width: 950px;" class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="agentLabel modal-title"></h5>
                <div class="flex-fill">
                    <span class="label label-danger ml-2" data-trigger="hover" data-toggle="popover" data-content="Clique no ícone + nas Filas Disponíveis para a respectiva fila ser adicionada ao agente, ou, clique na lixeira das Filas Já Adicionadas para remover o agente da respectiva fila." data-placement="top">?</span>
                </div>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <i aria-hidden="true" class="ki ki-close"></i>
                </button>
            </div>

            <style>
                .queueTittle {
                    color: #c1c1c1;
                    font-size: 14px;
                    letter-spacing: 0.6px;
                }
            </style>

            <div class="modal-body mx-4">

                <div class="row">
                    <div class="col">
                        <h5 class='queueTittle text-success'>Filas disponíveis</h5>
                    </div>
                    <div class="col">
                        <h5 class='queueTittle'>Filas já adicionadas</h5>
                    </div>
                </div>
                <div class="row">
                    <div style='background-color: #f5f5f5;' class="col mr-2 rounded pt-3 border border-success">
                        <div class="queueAvailable">
                        </div>
                    </div>
                    <div style='background-color: #f5f5f5;' class="col ml-2 rounded pt-3">
                        <div class="queueAdicionadas">
                        </div>
                    </div>
                </div>

            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-light-primary font-weight-bold" data-dismiss="modal">Cancelar</button>
                <button id="toggleConfirm" type="button" class="btn btn-success font-weight-bold" data-dismiss="modal">Confirmar</button>
            </div>
        </div>
    </div>
</div>

<style>
    #queueAvailable {
        padding: 20px;
        background: #eee;
        margin-bottom: 20px;
        z-index: 1;
        border-radius: 10px;
    }

    #queueAdicionadas {
        padding: 20px;
        background: #eee;
        margin-bottom: 20px;
        z-index: 0;
        border-radius: 10px;
    }
</style>

@endsection
{{-- Scripts Section --}}
@section('scripts')
<script src="{{ asset('js/pages/widgets.js') }}" type="text/javascript"></script>
<script src="{{ asset('js/custom/gestor/blfmon/index.js') }}" type="text/javascript"></script>
<script src="{{ asset('plugins/custom/draggable/draggable.bundle.js') }}" type="text/javascript"></script>
@endsection