@extends('layouts.app')

@section('content')
<style>
    /* titulo */
    .title-home{background: #426a9e!important;color: #FFF!important;line-height: 50px;padding-left: 20px;font-weight: 600;}
    .title-home small{color: #FFF!important;font-weight: 500;}

    /* carousel */
    .carousel-home{height: 300px;}
    .carousel-home .item .active{height: 300px;}
    .carousel-home .item img{width: 100%;object-fit: cover;height: 300px;position: relative;}

    /* carousel conteudo */
    .carousel-home .conteudo{top: 0;height: 100%;display: block;position: absolute;width: 30%;color: #fff;}
    .carousel-home .conteudo h3{margin-top: 70px;margin-left: 50px;font-weight: 600;text-transform: capitalize;width: 90%;word-break: break-word;}
    .carousel-home .conteudo p{margin-top: 20px;margin-left: 50px;font-weight: 600;width: 90%;max-height: 50%;word-break: break-word;}

    /* carousel botao */
    .carousel-home .mais{position: absolute;display: inline-block;background-color: #426a9e!important;box-shadow: 0 2px 2px 0 rgb(0 0 0 / 14%), 0 1px 5px 0 rgb(0 0 0 / 12%), 0 3px 1px -2px rgb(0 0 0 / 20%);padding: 10px;text-transform: uppercase;color: #fff;font-weight: 500;margin-left: 50px;bottom: 50px;}
    .carousel-home .mais:hover{text-decoration: none;color: #fff;}

    /* carousel indicadores */
    .carousel-home .indicadores{position: absolute;bottom: 20px;left: 50%;z-index: 15;width: 60%;margin-left: -30%;padding-left: 0;list-style: none;text-align: center;}
    .carousel-home .indicadores i{font-size: 20px;margin-left: 5px;margin-right: 5px; color: #fff; box-shadow: 0 0 10px #000;}
    .carousel-home .indicadores i:hover{cursor:pointer;}

    /* tags */
    .tag{position: absolute;display: inline-block;box-shadow: 0 2px 2px 0 rgb(0 0 0 / 14%), 0 1px 5px 0 rgb(0 0 0 / 12%), 0 3px 1px -2px rgb(0 0 0 / 20%);padding: 10px;text-transform: uppercase;font-weight: 500;left: 0;top: 0;}

    /* tag novidade */
    .tag.novidade{background-color: #333!important;color: #fff!important;}
    
    /* tag em breve */
    .tag.breve{background-color: #d50000!important;color: #fff!important;}

    /* thumbnail */
    .thumbnail-home{height: 350px;position: relative;border: none;padding: 0!important;text-align: center;}
    .thumbnail-home .body{position: relative;box-shadow: 0 2px 2px 0 rgb(0 0 0 / 14%), 0 1px 5px 0 rgb(0 0 0 / 12%), 0 3px 1px -2px rgb(0 0 0 / 20%) !important;border:1px solid #ddd !important;height: 100% !important;}

    /* espaçamento entre os thumbnails */
    .thumbnail-home.left{padding-right: 5px!important;}
    .thumbnail-home.right{padding-left: 5px!important;}
    .thumbnail-home.center{padding-right: 2.5px!important;padding-left: 2.5px!important;}

    /* imagem thumbnail */
    .thumbnail-home img{width: 100%;height: 55%;object-fit: fill !important;}
    .thumbnail-home .body .header{background-color: #426a9e;top: 0;left: 0;position: relative;display: grid;padding: 20px;margin-bottom: 20px;color: #fff;height: 160px;}
    .thumbnail-home .body .header h2{font-size: 20px;}
    .thumbnail-home .body .header i{font-size: 80px; padding: 30px 0;}

    /* titulo thumbnail */
    .thumbnail-home h3{font-size: 15px;font-weight: 600;text-transform: capitalize;height: 10%;margin-top: 10px;padding: 0;}

    /* thumbanail texto */
    .thumbnail-home p{color: #6c757d!important;margin: 0px;}

    /* thumbnail botão */
    .thumbnail-home .mais{height: 10%;position: absolute;bottom: 20px;width: 100%;display: flex;}
    .thumbnail-home .mais a{background-color: #426a9e!important;box-shadow: 0 2px 2px 0 rgb(0 0 0 / 14%), 0 1px 5px 0 rgb(0 0 0 / 12%), 0 3px 1px -2px rgb(0 0 0 / 20%);padding: 8px;text-transform: uppercase;color: #fff;font-weight: 500;margin: 0 auto;position: relative;}
    .thumbnail-home .mais a:hover{text-decoration: none;color: #fff;}

    /* media query para tela menor */
    @media only screen and (max-width: 680px)
    {
        /* carousel conteudo */
        .carousel-home .conteudo{width: 100%;}
    }

    .swal-popup-top-center{
        height: 100%;
        width: 50% !important;
        font-size: 1.7rem;
    }
    .swal-popup-top-center hr{
        margin: 0 0 17px 0px;
        border-top: 2px solid #eee;
    }
</style>
<script>
    /*
    |--------------------------------------------------------------------------
    | função para ações do carousel
    | id: informar o id do carousel
    | acoes possiveis:
    |             valor | descrição
    |             prev  | slide anterior
    |             next  | próximo slide
    |             pause | parar apresentação
    |--------------------------------------------------------------------------
    */
    function carouselAction(id,acao)
    {        
        //verificar se o id foi inserido
        if(id != null)
        {
            //verificar se a acao foi inserida
            if(acao != null)
            {
                if(acao == 'prev')
                {
                    $(id).carousel('prev');
                }
                else if(acao == 'next')
                {
                    $(id).carousel('next');                    
                }
                else if(acao == 'pause')
                {
                    $(id).carousel('pause');
                }
            }
        }        
    }
    // montar array com informações do banner
    const listaCard = [
        {texto: 'Perfis de acesso', icone: 'icon-lock-open', tag: 'novidade', link: '/tutorial/detalhe/27', titulo: 'Como Cadastrar', mensagem: 'Configure quais conteúdos um determinado cargo/função tem permissão de acesso.'},
        {texto: 'Usuários', icone: 'icon-user', tag: 'novidade', link: '/tutorial/detalhe/64', titulo: 'Como Cadastrar', mensagem: 'Usuários são todas as pessoas que tem acesso ao sistema, independente do cargo ou função.'},
        {texto: 'Relatórios e Dashboards', icone: 'icon-bar-chart', tag: 'novidade', link: '/tutorial/detalhe/3', titulo: 'Dashboards do Atendimento', mensagem: 'Monitoramento híbrido para acompanhar a operação em tempo real.'},
        {texto: 'Visualizar Atendimentos', icone: 'icon-earphones-alt', tag: 'novidade', link: '/tutorial/detalhe/5', titulo: 'Como escutar o áudio de uma ligação', mensagem: 'É possível acompanhar o aúdio das tabulações realizadas pela equipe de atendimento.'}               
    ];
    // montar array com informações dos cards
    const listaBanner = [
        {imagem: '20210802162502.png', tag: 'novidade', link: '/tutorial/detalhe/1', titulo: 'Nova Tela</br>Omnichannel', mensagem: 'Prepare sua operação e aproveite para adicionar novos canais de comunicação.'},        
        {imagem: '20210803144101.png', tag: 'novidade', link: '/tutorial/detalhe/2', titulo: 'Whatsapp</br>Ativo', mensagem: 'É possível configurar para operação enviar mensagens ativas.'},
        {imagem: '20210803155301.png', tag: 'novidade', link: '/tutorial/detalhe/3', titulo: 'Dashboards do</br>Atendimento', mensagem: 'Monitoramento híbrido para acompanhar a operação em tempo real.'},
        {imagem: '20210803162701.png', tag: 'novidade', link: '/tutorial/detalhe/4', titulo: 'Transferência de</br>Chamadas', mensagem: 'É possível configurar para operação enviar mensagens ativas.'}        
    ];
    /*
    * Função para receber banners
    * Recebe array com objetos dos banner com campos de: imagem, tag, link, titulo, mensagem        
    * Recebe id da div dos banners, com # na frente, ex: #banner
    */
    function carregar_banner(array, id_banner)
    {        
        // criar html
        let div = '';
        for(let i=0; i < array.length; i++)
        {
            if(i == 0)
            {
                div += '<div class="item active">';
            }
            else
            {
                div += '<div class="item">';
            }
            // imagem
            div += '<img src="pages/img/home/banner/' + array[i].imagem + '" alt="' + array[i].titulo + '">';
            // conteudo
            div += '<div class="conteudo"><h3>' + array[i].titulo + '</h3><p>' + array[i].mensagem + '</p></div>';
            // ver mais
            div += '<a href="' + array[i].link + '" class="mais">ver mais</a>';
            // tag
            div += '<div class="tag ' + array[i].tag + '">' + array[i].tag + '</div></div>';
        }
        // inserir lista montada na div selecionada        
        document.getElementById(id_banner).innerHTML = div;
    }
    /*
    * Função para receber card
    * Recebe array com objetos dos cards com campos de: imagem, tag, link, titulo, mensagem        
    * Recebe id da div dos cards, com # na frente, ex: #banner
    */
    function carregar_card(array, qtd_por_linhas, id_card)
    {        
        // verificar quantas linhas serão necessárias
        let total = array.length;
        let linhas = Math.ceil(total / qtd_por_linhas);

        let count = 0;
        // criar html
        let div = '';
        for(let i=0; i < linhas; i++)
        {
            div += '<div class="row"><div class="col-md-12">';
            for(let j=0; j < qtd_por_linhas; j++)
            {
                //verificar se essa posição existe no array
                if (typeof array[count] !== 'undefined') {
                    //verificar o lado do card na linha
                    alinhamento = 'center';
                    if(j == 0)
                    {
                        alinhamento = 'left';
                    }
                    else if(j == (qtd_por_linhas - 1))
                    {
                        alinhamento = 'right';
                    }
                    //criar html do card
                    div += '<div class="col-sm-6 col-md-4 col-lg-' + (12/qtd_por_linhas) + ' thumbnail thumbnail-home ' + alinhamento + '">';
                        div += '<div class="body">';                        
                            div += '<div class="header"><i class="' + array[count].icone + '"></i><h2>' + array[count].texto + '</h2></div>';
                            div += '<h3>' + array[count].titulo + '</h3>';                            
                            div += '<p>' + array[count].mensagem + '</p>';
                            //tag
                            // div += '<div class="tag ' + array[count].tag + '">' + array[count].tag + '</div>';
                            div += '<div class="mais"><a href="' + array[count].link + '">Ver mais</a></div>'
                        div += '</div>';                                          
                    div += '</div>';
                }
                //atualizar contador geral
                count++;
            }
            div += '</div></div>';
        }
        // inserir lista montada na div selecionada
        $(id_card).append(div);    
    }    
    window.onload = function(){        
        // carregar_banner(listaBanner, 'banner-content');
        carregar_card(listaCard, 4, '#card')    
    }
</script>
<!-- BEGIN CONTENT -->
<div class="page-content-wrapper">
    <!-- BEGIN CONTENT BODY -->
    <div class="page-content">
        <!-- BEGIN PAGE HEADER-->
        <!-- BEGIN PAGE BAR -->
        <div class="page-bar">
            <ul class="page-breadcrumb">
                <li>
                    <a href="{{ url('/home') }}">Home</a>
                    <i class="fa fa-circle"></i>
                </li>
                <li>
                    <span>Guia Rápido</span>
                </li>
            </ul>
        </div>
        <!-- END PAGE BAR -->
        <!-- BEGIN PAGE TITLE-->
        <h1 class="page-title title-home"> HOME | 
            <small> Bem vindo a área do cliente, explore e gerencie o sistema do seu jeito.</small>
        </h1>
        <!-- END PAGE TITLE-->

        <!-- CAROUSEL -->
        <!-- <div class="row">
            <div class="col-md-12">
                <div id="carousel-atd" class="carousel slide carousel-home" data-ride="carousel">
                    //Indicators
                    <div class="indicadores">
                        <i class="fa fa-step-backward" onclick="carouselAction('#carousel-atd','prev')"></i>
                        <i class="fa fa-stop" onclick="carouselAction('#carousel-atd','pause')"></i>    
                        <i class="fa fa-step-forward" onclick="carouselAction('#carousel-atd','next')"></i>                                    
                    </div>

                    //Wrapper for slides
                    <div class="carousel-inner" role="listbox" id="banner-content">
                    </div>
                </div>                
            </div>
        </div> -->
        <!-- END CAROUSEL -->

        <!-- BEGIN CARD -->
        <div id="card" style="margin-top: 20px;">
        </div>
        <!-- END CARD -->

        <!-- VERIFICAR SE COMENTARIO ABAIXO PODE SER APAGADO APOS VALIDAÇÃO -->
        <!-- <div class="row">
            <div class="col-md-12">
                <h4 class="text-center" style="padding-bottom: 20px;font-weight: 600;color:#426a9e!important">Guia Rápido das Funcionalidades</h4>
            </div>
        </div>            
        <div class="row">
            <div class="col-md-4">
                <div class="portlet light portlet-fit bordered">
                    <div class="portlet-title" style="background-color: #2598d8; color: #FFF; padding-bottom: 0; margin-bottom: 0;">
                        <div class="row text-center">
                            <div class="col-md-12" style="height: 60px;">
                                <span style="font-size: 50px">
                                <i class="icon-settings"></i>
                                </span>
                            </div>
                        </div> 
                        <div class="row text-center">
                            <div class="col-md-12">
                                <h4>Configurações</h4>
                            </div>
                        </div>
                    </div>
                    <div class="portlet-body" style="padding-top: 0;">
                        <div class="mt-element-list">
                            <div class="mt-list-container list-news">
                                <ul>
                                    <li class="mt-list-item">        
                                        <div class="list-item-content" style="padding-right: 15px;">
                                            <div class="task " style="float: left;">
                                                <span>
                                                    <i class="icon-lock-open"></i>
                                                </span>
                                            </div>
                                            <div class="" style="padding: 0 0 0 35px;">
                                                <h4 class="uppercase bold task" style="margin-top: 0; font-size: 14px;">
                                                    <span>Perfis de Acesso</span>
                                                </h4>
                                                <p style="font-size: 13px;">Nesta área é possível gerenciar perfis de acesso com diferentes permissões liberando ou restringindo funcionalidades e/ou módulos dentro do sistema.</p>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="mt-list-item">
                                        <div class="list-item-content" style="padding-right: 15px;">
                                            <div class="task " style="float: left;">
                                                <i class="icon-user"></i>
                                            </div>
                                            <div class="" style="padding: 0 0 0 35px;">
                                                <h4 class="uppercase bold task" style="margin-top: 0; font-size: 14px;">
                                                    Usuários
                                                </h4>
                                                <p style="font-size: 13px;">Local para gerenciar o cadastro e acesso de usuários que utilizarão o sistema.</p>
                                            </div>
                                        </div>
                                    </li>
                                      <li class="mt-list-item">        
                                        <div class="list-item-content" style="padding-right: 15px;">
                                            <div class="task " style="float: left;">
                                                <span>
                                                    <i class="icon-earphones-alt"></i>
                                                </span>
                                            </div>
                                            <div class="" style="padding: 0 0 0 35px;">
                                                <h4 class="uppercase bold task" style="margin-top: 0; font-size: 14px;">
                                                    <span>Atendimento</span>
                                                </h4>
                                                <p style="font-size: 13px;">Gerencie todo o sistema de atendimento, adicionando manualmente tabulações, pausas, filas, prioridades, canais, etc, ou apenas verificar itens da integração.</p>
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>        
            </div>
            
            <div class="col-md-4">
                <div class="portlet light portlet-fit bordered">
                    <div class="portlet-title" style="background-color: #2598d8; color: #FFF; padding-bottom: 0; margin-bottom: 0;">
                        <div class="row text-center">
                            <div class="col-md-12" style="height: 60px;">
                                <span style="font-size: 50px">
                                <i class="icon-bar-chart"></i>
                                </span>
                            </div>
                        </div> 
                        <div class="row text-center">
                            <div class="col-md-12">
                                <h4>Relatórios</h4>
                            </div>
                        </div>
                    </div>
                    <div class="portlet-body" style="padding-top: 0;">
                        <div class="mt-element-list">
                            <div class="mt-list-container list-news">
                                <ul>
                                    <li class="mt-list-item">        
                                        <div class="list-item-content" style="padding-right: 15px;">
                                            <div class="task " style="float: left;">
                                                
                                                <i class="icon-earphones-alt"></i>
                                                
                                            </div>
                                            <div class="" style="padding: 0 0 0 35px;">
                                                <h4 class="uppercase bold task" style="margin-top: 0; font-size: 14px;">
                                                    Atendimento
                                                </h4>
                                                <p style="font-size: 13px;">Visualize os atendimentos realizados, podendo filtrar por termos e datas, além da opção de exportar as informações para excel, csv ou pdf.</p>
                                            </div>
                                        </div>
                                    </li>
                                 
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>        
            </div>
            <-- aq --
            
            <div class="col-md-4">
                <div class="portlet light portlet-fit bordered">
                    <div class="portlet-title" style="background-color: #2598d8; color: #FFF; padding-bottom: 0; margin-bottom: 0;">
                        <div class="row text-center">
                            <div class="col-md-12" style="height: 60px;">
                                <span style="font-size: 50px">
                                <i class="fa fa-question"></i>
                                </span>
                            </div>
                        </div> 
                        <div class="row text-center">
                            <div class="col-md-12">
                                <h4>Dicas de Navegação</h4>
                            </div>
                        </div>
                    </div>
                    <div class="portlet-body" style="padding-top: 0;">
                        <div class="mt-element-list">
                            <div class="mt-list-container list-news">
                                <ul>
                                    <li class="mt-list-item">        
                                        <div class="list-item-content" style="padding-right: 15px;">
                                            <div class="task " style="float: left;">
                                                <i class="fa fa-question-circle"></i>
                                            </div>
                                            <div class="" style="padding: 0 0 0 35px;">
                                                <h4 class="uppercase bold task" style="margin-top: 0; font-size: 14px;">
                                                    Ajuda
                                                </h4>
                                                <p style="font-size: 13px;">Toda vez que você encontrar este ícone ao navegar nas telas, ele poderá esclarecer e dar mais detalhes sobre funções e conteúdos.</p>
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>        
            </div>
          
        </div>
        <div class="row">
            <div class="col-md-4">
                <div class="portlet light portlet-fit bordered">
                    <div class="portlet-title" style="background-color: #2598d8; color: #FFF; padding-bottom: 0; margin-bottom: 0;">
                        <div class="row text-center">
                            <div class="col-md-12" style="height: 60px;">
                                <span style="font-size: 50px">
                                <i class="icon-earphones-alt"></i>
                                </span>
                            </div>
                        </div> 
                        <div class="row text-center">
                            <div class="col-md-12">
                                <h4>Gestão de Atendimento</h4>
                            </div>
                        </div>
                    </div>
                    <div class="portlet-body" style="padding-top: 0;">
                        <div class="mt-element-list">
                            <div class="mt-list-container list-news">
                                <ul>
                                    <li class="mt-list-item">        
                                        <div class="list-item-content" style="padding-right: 15px;">
                                            <div class="task " style="float: left;">
                                                
                                                <i class="icon-earphones-alt"></i>
                                                
                                            </div>
                                            <div class="" style="padding: 0 0 0 35px;">
                                                <h4 class="uppercase bold task" style="margin-top: 0; font-size: 14px;">
                                                       ATENDIMENTO
                                                </h4>
                                                <p style="font-size: 13px;">Este é o local para o atendente poder iniciar o seu atendimento, seja recebendo ou realizando ligações, respondendo mensagens, entrando em pausa e demais funções. </p>
                                            </div>
                                        </div>
                                    </li>
                                    
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>        
            </div>
             <div class="col-md-4">
                <div class="portlet light portlet-fit bordered">
                    <div class="portlet-title" style="background-color: #2598d8; color: #FFF; padding-bottom: 0; margin-bottom: 0;">
                        <div class="row text-center">
                            <div class="col-md-12" style="height: 60px;">
                                <span style="font-size: 50px">
                                <i class="icon-bubble"></i>
                                </span>
                            </div>
                        </div> 
                        <div class="row text-center">
                            <div class="col-md-12">
                                <h4>Gestão do Bot</h4>
                            </div>
                        </div>
                    </div>
                    <div class="portlet-body" style="padding-top: 0;">
                        <div class="mt-element-list">
                            <div class="mt-list-container list-news">
                                <ul>
                                    <li class="mt-list-item">        
                                        <div class="list-item-content" style="padding-right: 15px;">
                                            <div class="task " style="float: left;">
                                                
                                                <i class="icon-folder-alt"></i>
                                                
                                            </div>
                                            <div class="" style="padding: 0 0 0 35px;">
                                                <h4 class="uppercase bold task" style="margin-top: 0; font-size: 14px;">
                                                    Categorias
                                                </h4>
                                                <p style="font-size: 13px;">Organize o seu conteúdo por assuntos e utilize filtros para gestão das perguntas e respostas, além de facilitar a navegação dos clientes ao buscar conteúdos sobre o tema.</p>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="mt-list-item">
                                        <div class="list-item-content" style="padding-right: 15px;">
                                            <div class="task " style="float: left;">
                                                    <i class="icon-bubble"></i>
                                            </div>
                                            <div class="" style="padding: 0 0 0 35px;">
                                                <h4 class="uppercase bold task" style="margin-top: 0; font-size: 14px;">
                                                    Intenções
                                                </h4>
                                                <p style="font-size: 13px;">Gerencie todo conteúdo do bot com as Intenções (possíveis perguntas ou palavras-chave que os clientes possam fazer) e Respostas (como o bot deverá responder).</p>
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>        
            </div>
        </div> -->
        <!-- END PAGE HEADER-->
    </div>
    <!-- END CONTENT BODY -->
</div>



@if(Auth::user()->ramal != '' && Auth::user()->posicao == '') 
<div class="modal fade" id="ModalCadastroPosicao"  tabindex="-1" role="basic" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header" style="background:#2598d8;font-weight: 600;color: white; ">
                <!-- <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button> -->
                <h4 class="modal-title" style="font-weight: 600 !important">Posição de Atendimento</h4>
            </div>
            <div class="modal-body">
                <form action="{{ url('atualiza_posicao') }}" class="horizontal-form" method="post" id="formCadastroPosicao">
                    {{ csrf_field() }}
                    <div class="row">
                        <div class="col-md-12">

                            <div class="form-group">
                                <label class="control-label">Informar número da posição:</label>
                                <input type="text" required class="form-control" name="posicao" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');" />
                            </div>

                        </div>
                    </div>
            </div>
            <div class="modal-footer">
                <!-- <button type="button" class="btn dark btn-outline" data-dismiss="modal">Fechar</button> -->
                <button type="submit" class="btn blue" id="setCadastro">
                    <i class="fa fa-check"></i> Salvar
                </button>
            </div>
            <div class="erros" style="display: none;">
                <div class="alert alert-danger">
                    <ul>
                    </ul>
                </div>
            </div>
            <div class="success" style="display: none;">
                <div class="alert alert-success">
                    <ul>
                    </ul>
                </div>
            </div> 
            </form>    
        </div>
    </div>
</div>
@endif 

<!-- END CONTENT -->
<style type="text/css">
    .task{
        color: #2f353b;
    }
</style>
@endsection

@push('scripts')
<script src="{{ asset('global/plugins/sweetalert/sweetalert2.min.js') }}"></script>
<script>
    const limitDate = new Date('2025-01-28 23:59:59');
    const today = new Date();

    if (today.getTime() <= limitDate.getTime()){
        Swal.fire({
            position: "center",
            icon: null,
            html: `
            <strong style='font-size: 1.6em; margin-bottom: .4rem; display: block;'>Confira nossas novidades:</strong><hr>
            <p style='margin: 0; font-size: 1.3em;'>
                <a href="./novidades#novidade-omnimeta-template-ativo">
                    OmniMeta Criação de Template Ativo
                </a>
            </p>
            <p style='margin: 0; font-size: 1.3em;'>
                <a href="./novidades#novidade-config-historico-fila">
                    Configuração Histórico
                </a>
            </p>`,
            showConfirmButton: false,
            timer: 15000,

            backdrop: false,
            showCloseButton: true,
            customClass: {
                popup: 'swal-popup-top-center'
            }
        });
    }

   
</script>

@if(Auth::user()->ramal != '' && Auth::user()->posicao == '')
    <script type="text/javascript">
        $(window).load(function(){            
            $('#ModalCadastroPosicao').modal('show');
        });
        $(document).ready(function(){
            $('#ModalCadastroPosicao').modal({backdrop: 'static', keyboard: false});
        });

    </script>
@endif 

@endpush