@extends('layouts.app')
@section('content')
    <style type="text/css">
        .text-right {
            text-align: right;
        }

        .message .body b,
        .message .body i,
        .message .body code {
            display: contents !important;
        }

        .message {
            display: table;
            min-width: 20%;
        }

        .message iframe {
            max-width: 400px;
            max-height: 300px;
        }

        .chats {
            width: 550px;
        }

        .print-button {
            background: #e9e9e9;
            padding: 3px 12px;
            color: #000;
            border: 1px solid #999;
            cursor: pointer;
            font-weight: 400;
            margin-left: 5px;
            font-size: 12px;
            user-select: none;
        }

        .modal-body {
            display: grid;
        }

        .imprimir {
            left: 0;
            top: 0;
            position: absolute;
            width: 100%;
            display: none;
            z-index: 2;
        }

        .imprimir.imprimir-whatsapp .modal-content,
        .imprimir.imprimir-telefonia .modal-content {
            width: 100% !important;
            position: relative !important;
            left: unset !important;
            display: table;
        }

        .imprimir.imprimir-chat .modal-content,
        .imprimir.imprimir-email .modal-content {
            width: 100% !important;
            position: relative !important;
            display: table;
        }

        .imprimir .modal-header {
            border-bottom: 1px solid #EFEFEF;
            padding: 15px;
            background-color: #426a9e !important;
            color: #fff;
            -webkit-print-color-adjust: exact;
        }

        .imprimir .modal-header .print-button {
            background: #e9e9e9;
            padding: 3px 12px;
            color: #000;
            border: 1px solid #999;
            cursor: pointer;
            font-weight: 400;
            margin-left: 5px;
            font-size: 12px;
            -webkit-print-color-adjust: exact;
        }

        .imprimir .chats li {
            list-style: none;
            padding: 5px 0;
            margin: 10px auto;
            font-size: 12px;
        }

        .imprimir .chats li .message {
            display: block;
            padding: 5px;
            position: relative;
        }

        .imprimir .chats li.out .avatar {
            float: right;
            margin-left: 10px;
        }

        .imprimir .chats li.in .avatar {
            float: left;
            margin-right: 10px;
        }

        .imprimir audio {
            -webkit-print-color-adjust: exact;
        }

        @media print {

            /* esconder tudo */
            body * {
                visibility: hidden;
            }

            /* exibir somente o que tem na div para imprimir */
            .imprimir,
            .imprimir * {
                visibility: visible;
                display: block;
            }

            /* estilização de links */
            a::after {
                display: none;
            }

            /* estilização da página */
            .imprimir .modal-header span {
                color: #fff !important;
                -webkit-print-color-adjust: exact;
            }

            .imprimir .modal-header .print-button {
                background: #e9e9e9 !important;
                color: #000 !important;
                -webkit-print-color-adjust: exact;
                display: inline-block;
            }

            .imprimir .modal-body {
                background-color: #ddd !important;
                -webkit-print-color-adjust: exact;
                overflow-y: hidden !important;
                height: max-content !important;
                overflow-x: hidden !important;
            }

            .imprimir .modal-body ul.chats {
                height: auto !important;
                width: 100% !important;
                overflow-y: hidden !important;
            }

            .imprimir.imprimir-whatsapp .modal-body ul.chats span,
            .imprimir.imprimir-chat .modal-body ul.chats span,
            .imprimir.imprimir-telefonia .modal-body ul.chats span {
                background-color: #426AB4 !important;
                color: #fff !important;
                -webkit-print-color-adjust: exact;
            }

            .imprimir.imprimir-email .modal-body ul.chats span {
                background-color: transparent !important;
                color: #000 !important;
                -webkit-print-color-adjust: exact;
            }

            .imprimir .modal-body ul.chats .out .atendente_nome span {
                background: transparent !important;
                color: #000 !important;
                -webkit-print-color-adjust: exact;
            }

            .imprimir .modal-body ul.chats .out .message,
            .imprimir .modal-body ul.chats .out .message nome {
                background-color: #426a9e !important;
                color: #fff !important;
                border-right: 2px solid #426a9e !important;
                padding: 5px;
                -webkit-print-color-adjust: exact;
            }

            .imprimir .modal-body ul.chats .out .message,
            .imprimir .modal-body ul.chats .out .message nome {
                color: #fff !important;
            }

            .imprimir .modal-body ul.chats .out .message .arrow,
            .imprimir .modal-body ul.chats .in .message .arrow {
                background-color: transparent !important;
            }

            .imprimir .modal-body ul.chats .in .message {
                background-color: #fff !important;
                color: #000 !important;
                border-left: 2px solid #fff !important;
                padding: 5px;
                box-shadow: 0 2px 5px #000 !important;
                -webkit-print-color-adjust: exact;
            }

            .imprimir .modal-body ul.chats .in .message .body {
                background-color: #fff !important;
                color: #000 !important;
                -webkit-print-color-adjust: exact;
            }

            .imprimir .modal-body ul.chats .in .message .body .datetime {
                background-color: #fff !important;
                color: #000 !important;
                -webkit-print-color-adjust: exact;
            }

            .imprimir .chats li.in .message .arrow,
            .imprimir .chats li.out .message .arrow {
                display: block;
                position: absolute;
                top: 5px;
                border-top: 8px solid transparent;
                border-bottom: 8px solid transparent;
                right: -8px;
                -webkit-print-color-adjust: exact;
            }

            .imprimir .chats li.in .message .arrow {
                left: -8px;
                width: 0;
                height: 0;
                -webkit-print-color-adjust: exact;
            }
        }

        /* atualizar modal de email */
        /* #detailsModal .modal-body,#detailsModal .modal-body .col-md-12{padding-right: 0px;}
        #detailsModal .modal-body .chats{width: 100%;}* /

        /* ajuste options value */
        #canal.multiselect-container>li,
        #tipo_atendimento.multiselect-container>li {
            padding-left: 16px;
        }

        .multiselect-all,
        .multiselect-group b {
            color: #426a9e !important;
        }

        .multiselect-all,
        .multiselect-group {
            padding-left: 0 !important;
        }

        .select-option {
            padding-left: 16px !important;
        }

        /* tooltip atender */
        .tooltip-atender {
            position: relative;
            display: inline-block;
        }

        .tooltip-atender .tooltiptext {
            visibility: hidden;
            width: 120px;
            background-color: #757575;
            color: #fff;
            text-align: center;
            padding: 5px 0;
            border-radius: 6px !important;
            position: absolute;
            z-index: 1;
            bottom: 125%;
            left: 50%;
            margin-left: -60px;
            opacity: 0;
            transition: opacity 0.3s;
            user-select: none;
            padding: 10px;
            box-shadow: 0 8px 17px 2px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2);
            text-align: left;
        }

        .tooltip-atender .tooltiptext hr {
            border-color: rgba(255, 255, 255, .3);
            margin-top: 10px;
            margin-bottom: 10px;
        }

        .tooltip-atender .tooltiptext::after {
            content: "";
            position: absolute;
            top: 100%;
            left: 50%;
            margin-left: -5px;
            border-width: 5px;
            border-style: solid;
            border-color: #757575 transparent transparent transparent;
        }

        .tooltip-atender:hover .tooltiptext {
            visibility: visible;
            opacity: 1;
        }

        /* message answer */
        .message-answer {
            width: 100%;
            min-height: 30px;
            border-radius: 5px !important;
            border-left: 5px solid;
            cursor: pointer;
            user-select: none;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            max-height: 100px;
            font-size: 10px;
            font-family: inherit;
            padding: 1px 5px 5px 5px;
            position: relative;
            max-width: 350px;
            margin-bottom: 10px;
        }

        .in .message-answer {
            background-color: rgba(0, 0, 0, .15);
            border-color: #426a9e;
        }

        .out .message-answer {
            background-color: rgba(255, 255, 255, .15);
            border-color: #ffffff;
        }

        .message-answer label {
            display: block;
            width: 100%;
            margin: 5px 0;
            padding: 0;
            font-weight: 900;
            cursor: pointer;
        }

        .message-answer p {
            position: relative;
            padding-bottom: 5px;
            display: inline;
            height: 100%;
            margin: 0;
            word-break: break-word;
            width: 100%;
        }

        .message-answer .file {
            display: block;
            width: 50px;
            height: 50px;
            margin: 0;
            font-size: 45px;
            padding: 0;
        }

        #chat_whtas .chats {
            overflow-y: hidden !important;
            position: relative;
        }

        #chat_whtas .chats .whatsBox {
            height: 100%;
            overflow-x: hidden;
            width: 100%;
            position: absolute;
        }

        #mdl_message_answer .chats {
            display: block;
            overflow-x: hidden;
            width: 100%;
            padding: 0 15px;
        }

        /* evitar sobreposição de historico de emails */
        blockquote .inbox-view {
            height: auto !important;
        }

        @keyframes atender-shorting-loading {
            from {
                transform: scaleX(1);
            }

            to {
                transform: scaleX(0);
            }
        }
    </style>

    <!-- BEGIN CONTENT -->
    <div class="page-content-wrapper">
        <div class="page-content">
            <!--1-->
            <div class="page-bar">
                <ul class="page-breadcrumb">
                    <li>
                        <a href="{{ url('/home') }}">Home</a>
                        <i class="fa fa-circle"></i>
                    </li>
                    <li>
                        <span>Relatório</span>
                    </li>
                </ul>
            </div>
            <h1 class="page-title nova-faixa"> Relatório de Login/Pausas
                <div class="pull-right">
                    <i class="nova-faixa-icon fas fa-pause" style="padding-right:20px; "></i>
                </div>
            </h1>
            {{-- <h4>
                <small class="pull-right">
                    <span class="ajuda" data-toggle="confirmation" data-popout="true" data-trigger="hover"
                        data-placement="left" data-original-title="" title="" id="ajuda">
                        Ajuda <i class="fa fa-question-circle" aria-hidden="true"></i>
                    </span>
                </small>
            </h4> --}}
            <!-- <a href="{{URL::to('relatorio')}}" style="cursor: not-allowed;" disabled='disabled'><button style="cursor: not-allowed;" disabled='disabled' class="btn blue" style="margin-top: 1.0%;">Visualizar Resultados</button></a> -->

            <div class="col-md-12" style="margin-top:1.5%;margin-bottom: 2.5%;">
                <form method="post" id="formPesquisa" onKeyPress="return submitenter(this,event)">
                    {{ csrf_field() }}
                    <div class="row">
                        <div class="form-group">
                            <style type="text/css">
                                .label-error {
                                    color: #e7505a;
                                }

                                .form-error {
                                    border: 2px solid #e7505a;
                                }
                            </style>

                            <div class="col-md-12" style="padding-left: 0px;">
                                <div class="col-md-4">
                                    <label class="control-label" id="init_label"><i
                                            class="glyphicon glyphicon-calendar"></i> Data Inicio<span
                                            style=" display: none; padding-left: 40px;">Data Inicial é Obrigatorio</span>
                                    </label>
                                    <div class="input-group date date-picker margin-bottom-5" id='form_init'
                                        data-date-format="dd/mm/yyy:" style="width: 100%">
                                        <input type="text" class="form-control form-filter input-sm" min="{{$data_min}}"
                                            name="data_init" id="datainit" autocomplete="off" placeholder="data"
                                            value="{{$data_inicial}}">
                                        <span class="input-group-btn">
                                            <button class="btn btn-sm default" type="button">
                                                <i class="fa fa-calendar"></i>
                                            </button>
                                        </span>
                                    </div>
                                </div>

                                <div class="col-md-4">
                                    <label class="control-label" id="fim_label"><i class="glyphicon glyphicon-calendar"></i>
                                        Data Final <span style=" padding-left: 40px;display: none;">Data Final é
                                            Obrigatorio</span> </label>
                                    <div class="input-group date date-picker margin-bottom-5" id="form-fim"
                                        data-date-format="dd/mm/yyyy" style="width: 100%">
                                        <input type="text" class="form-control form-filter input-sm" name="data_fim"
                                            id="datafinal" autocomplete="off" placeholder="data" value="{{$data_final}}">
                                        <span class="input-group-btn">
                                            <button class="btn btn-sm default" type="button">
                                                <i class="fa fa-calendar"></i>
                                            </button>
                                        </span>
                                    </div>
                                </div>

                                <div class="col-sm-4" style="top:24px;">
                                    <button type="button" class="btn blue" id="getRelatorioCampanha"
                                        style="display: inline-block;">
                                        <i class="fa fa-search"></i> Pesquisar</button>

                                    <span style="width: 10px; padding-left: 10px;" title="Link Externo">
                                        <a id="limpa_campo" title="Limpar Filtros" class="acoes btn btn-circle btn-default"
                                            tabindex="0"
                                            style="padding-left: 4px;padding-right: 4px;padding-bottom: 2px;padding-top: 2px;"><i
                                                class="fa fa-eraser"></i></a>
                                    </span>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-12" style="padding-left: 0px;">
                            <div class="col-md-4">
                                <label class="control-label"><i class="fa fa-phone"></i> Ramal</label>
                                <select class="form-control" name="ramal" id="ramal">
                                    <option value="">Todos</option>
                                    @foreach($ramais as $ramal)
                                        <option value="{{$ramal}}">{{$ramal}}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-4">
                                <label class="control-label"><i class="fa fa-desktop"></i> Posição</label>
                                <select class="form-control" name="posicao" id="posicao">
                                    <option value="">Todas</option>
                                    @foreach($posicoes as $posicao)
                                        <option value="{{$posicao}}">{{$posicao}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <div class="col-md-12" style="padding-left: 0px;">
                            <div class="col-md-4">
                                <label class="control-label" id="fim_label"><i class="glyphicon glyphicon-user"></i>
                                    Atendente</label>

                                <select class="bs-select form-control" name="atendentes[]" id="atendentes"
                                    multiple="multiple" size="1">
                                    @foreach($atendentes as $at)
                                        <option value="{{$at->id}}" class="select-option" selected>{{$at->name}}</option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="col-md-2">
                                <label class="control-label" id="init_label"><i class="glyphicon glyphicon-time"></i> T.
                                    Atendimento</label>
                                <div class="radio-group">
                                    <label class="radio-inline">
                                        <input type="radio" name="period" value="hours" checked> Horas
                                    </label>
                                    <label class="radio-inline">
                                        <input type="radio" name="period" value="minutes"> Minutos
                                    </label>
                                    {{-- <label class="radio-inline">
                                        <input type="radio" name="period" value="percent"> Percentual
                                    </label> --}}
                                </div>
                            </div>

                            <div class="col-md-2">
                                <label class="control-label" id="init_label"><i class="fa fa-object-group"></i> Agrupar por
                                    Data</label>
                                <div class="radio-group">
                                    <label class="radio-inline">
                                        <input type="radio" name="group" value="sim" checked> Sim
                                    </label>
                                    <label class="radio-inline">
                                        <input type="radio" name="group" value="nao"> Não
                                    </label>
                                    {{-- <label class="radio-inline">
                                        <input type="radio" name="period" value="percent"> Percentual
                                    </label> --}}
                                </div>
                            </div>
                        </div>

                        <style type="text/css">
                            #cinza {
                                background-color: #e1e5ec !important;
                                border-color: #e1e5ec !important;
                                transition: 1s;
                            }

                            #cinza:hover {
                                border-color: #e1e5ec !important;
                            }

                            i.fa.fa-paper-plane-o {
                                margin-right: 5px;
                            }
                        </style>

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

            <div class="row">
                <div class='col-md-12'>
                    <div class="portlet box blue">
                        <div class="portlet-title">
                            <div class="caption">
                                <i class="glyphicon glyphicon-list-alt"></i>Relatório - Visualização de Login/Pausas
                            </div>

                            <div class="tools">
                                @can('relatorio-atendimento-pausa-exportar')
                                    <button id="downloadCSVButton"
                                        style="background-color: #e9e9e9; color:black;">Exportar</button>
                                @endcan
                            </div>

                            <div id="buttommenu" style="top: 2px;">
                            </div>
                        </div>

                        <style type="text/css">
                            .centralizar {
                                text-align: center;
                            }

                            .dt-buttons {
                                float: right !important;
                                margin-top: 3px;
                            }
                        </style>
                        <!-- inicio tabela-->
                        <div class="portlet-body">
                            <div class="table-responsive">
                                <table
                                    class="table table-striped table-bordered table-advance table-hover order-column display"
                                    id="sample_1" style="width: 98%!important">
                                    <thead>
                                        <style type="text/css">
                                            .center-bold th {
                                                text-align: center;
                                                font-weight: 20 !important;
                                            }

                                            th,
                                            td {
                                                white-space: nowrap;
                                            }

                                            div.dataTables_wrapper {
                                                width: 100%;
                                                margin: 0 auto;
                                            }

                                            div.dataTables_scrollHead {
                                                overflow: scroll;
                                                width: 98% !important;
                                            }

                                            div.dataTables_scrollBody {
                                                width: 98% !important;
                                            }
                                        </style>
                                        <tr class="center-bold" style="width: 98%!important">
                                            <th class="text-center"
                                                style="font-weight: 60!important; vertical-align: middle;"><i
                                                    class="fas fa-sign-in-alt" style="margin-right: 3px"></i>
                                                <span>Login</span> </th>
                                            <th class="text-center"
                                                style="font-weight: 60!important; vertical-align: middle;"><i
                                                    class="fas fa-sign-out-alt" style="margin-right: 3px"></i>
                                                <span>Logout</span> </th>
                                            <th class="text-center"
                                                style="font-weight: 60!important; vertical-align: middle;"><i
                                                    class="fa fa-sort-numeric-up" style="margin-right: 3px"></i> <span>Qtd
                                                    Logins</span> </th>
                                            <th class="text-center"
                                                style="font-weight: 60!important; vertical-align: middle;"><i
                                                    class="fa fa-phone" style="margin-right: 3px"></i> <span>Ramal</span>
                                            </th>
                                            <th class="text-center"
                                                style="font-weight: 60!important; vertical-align: middle;"><i
                                                    class="fa fa-desktop" style="margin-right: 3px"></i>
                                                <span>Posição</span> </th>
                                            <th class="text-center"
                                                style="font-weight: 60!important; vertical-align: middle;"><i
                                                    class="fas fa-headset" style="margin-right: 3px"></i>
                                                <span>Atendente</span> </th>
                                            <th class="text-center"
                                                style="font-weight: 60!important; vertical-align: middle;"><i
                                                    class="far fa-pause-circle" style="margin-right: 3px"></i>
                                                <span>Pausas</span></th>
                                            <th class="text-center"
                                                style="font-weight: 60!important; vertical-align: middle;"><i
                                                    class="fas fa-user-clock" style="margin-right: 3px"></i>
                                                <span>Pausado</span></th>
                                            <th class="text-center"
                                                style="font-weight: 60!important; vertical-align: middle;"><i
                                                    class="fas fa-user-check" style="margin-right: 3px"></i>
                                                <span>Disponível</span> </th>
                                            <th class="text-center"
                                                style="font-weight: 60!important; vertical-align: middle;"><i
                                                    class="fas fa-cog" style="margin-right: 3px"></i> <span>Ações</span>
                                            </th>
                                        </tr>

                                    </thead>
                                    <tbody>

                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>

                    <div class="alert alert-danger relatorio" style="display:none;">
                        <ul>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <style type="text/css">
            th i {
                margin-right: 5px;
                font-size: 13px;
            }
        </style>

        <!-- Modals -->
        <div class="col-md-12">
            <div class="modal fade" id="detailsModal" tabindex="-1" role="basic" aria-hidden="true">
                <div class="modal-dialog modal-md" style="height: 400px;">
                    <div class="modal-content"
                        style="background-color: #ddd;width: 1000px;position: absolute; left: 50%; transform: translate(-50%, 0%);">
                        <div class="modal-header" style="background-color:#36c6d3 ">
                            <div class="col-md-12 text-rigth">
                                <span class="caption  bold" id="data_hora_chat"
                                    style="float: right; font-size: 12px; color: white;"></span>
                                <span class="caption  bold" style=" font-size: 12px; color: white;"
                                    id="titulo_chasts">Chats</span>
                            </div>
                        </div>

                        <div class="modal-body" style="height: 470px;">

                            <div class="col-md-12">
                                <div class="col-md-12">
                                    <ul class="chats" style="height: 450px;overflow-y: scroll;padding-right: 2%;">

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

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

        <div class="col-md-12">
            <div class="modal fade" id="downloadModal" tabindex="-1" role="dialog" aria-labelledby="downloadModalLabel"
                aria-hidden="true">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="downloadModalLabel" style="color:white; font-weight:bold">Exportação
                            </h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>

                        <div class="modal-body">
                            <div class="form-check form-check-inline">
                                <label class="control-label" id="init_label"> Agrupar</label>

                                <input class="form-check-input" type="radio" name="exportar_agrupado" id="exportacao_sim"
                                    value="sim" checked>
                                <label class="form-check-label" for="exportacao_sim">Sim</label>

                                <input class="form-check-input" type="radio" name="exportar_agrupado" id="exportacao_nao"
                                    value="nao">
                                <label class="form-check-label" for="exportacao_nao">Não</label>
                            </div>
                            <br />
                            <div class="form-check form-check-inline">
                                <button class="btn btn-primary" id="download_csv_modal">Exportar</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>


    </div>


    <!-- END CONTENT -->

    <!-- <link href="{{ asset('global/plugins/bootstrap-wysihtml5/bootstrap-wysihtml5.css') }}" rel="stylesheet" type="text/css" /> -->
    <link href="{{ asset('global/plugins/bootstrap-datepicker/css/bootstrap-datepicker3.min.css') }}" rel="stylesheet"
        type="text/css" />
    <!-- <link href="{{ asset('global/plugins/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css') }}" rel="stylesheet" type="text/css" /> -->

    @push('scripts')

        <!-- BEGIN PAGE LEVEL PLUGINS -->
        <link href="{{ asset('global/plugins/bootstrap-multiselect-master/dist/css/bootstrap-multiselect.css') }}"
            rel="stylesheet" type="text/css" />
        <script src="{{ asset('global/plugins/bootstrap-multiselect-master/dist/js/bootstrap-multiselect.js') }}"
            type="text/javascript"></script>

        <script src="{{ asset('global/scripts/datatable.js') }}" type="text/javascript"></script>
        <script src="{{ asset('global/plugins/datatables/datatables.min.js') }}" type="text/javascript"></script>
        <script src="{{ asset('global/plugins/datatables/plugins/bootstrap/datatables.bootstrap.js') }}"
            type="text/javascript"></script>
        <script src="{{ asset('global/plugins/bootstrap-timepicker/js/bootstrap-timepicker.min.js') }}"
            type="text/javascript"></script>

        <!-- END PAGE LEVEL PLUGINS -->
        <script src="{{ asset('pages/scripts/funcoes/funcoes.js') }}" type="text/javascript"></script>
        {{--
        <script src="{{ asset('pages/scripts/relatorioatendimento/initrelatorio.js') }}" type="text/javascript"></script> --}}

        <script src="{{ asset('global/plugins/bootstrap-datepicker/js/bootstrap-datepicker.min.js') }}"
            type="text/javascript"></script>
        <script src="{{ asset('pages/scripts/components-date-time-pickers.js') }}" type="text/javascript"></script>
        <script src="{{ asset('global/plugins/moment/moment.min.js')}}" type="text/javascript"></script>

        <script type="text/javascript">
            var buttons = {{ auth()->user()->can('relatorio-atendimento-pausa-exportar') ? 'true' : 'false' }};

            $(document).ready(function () {
                // Initialize datepicker for form_init
                $('#form_init .date-picker').datepicker({
                    format: 'dd/mm/yyyy',
                    startDate: "{{ $data_min }}",
                    autoclose: true,
                    todayHighlight: true
                });

                $('#hora_init').timepicker('showWidget');
                $('#hora_fim').timepicker('showWidget');

                $('#limpa_campo').click(function () {
                    $("#datainit").val('');
                    $("#datafinal").val('');
                    $('#atendente').val('');
                    $('#pesquisa').val('');
                });

                $('#atendentes').multiselect({
                    allSelectedText: 'Todos selecionados',
                    nonSelectedText: 'Selecionar',
                    nSelectedText: "Selecionados",
                    numberDisplayed: 10,
                    maxHeight: 200,
                    buttonWidth: '100%',
                    enableCaseInsensitiveFiltering: true,
                    selectAllText: 'Selecionar Todos',
                    includeSelectAllOption: true
                });
            });

            var table = $('#sample_1');
            var reload = false;
            var dataModalDownload;
            var headersModalDonwload;


            $("#getRelatorioCampanha").click(function () {
                let formulario = $("#formPesquisa").serializeArray();

                // Função para buscar valor pelo name
                function getValueByName(arr, name) {
                    let obj = arr.find(function (item) { return item.name === name; });
                    return obj ? obj.value : '';
                }

                // Obtém o elemento <select>
                const atendentes = document.getElementById('atendentes');
                const atendentesOptions = Array.from(atendentes.selectedOptions);
                if (atendentesOptions.length < 1) {
                    $(".alert.alert-danger.relatorio ul").empty();
                    $(".alert.alert-danger.relatorio ").css('display', '');
                    $(".alert.alert-danger.relatorio ul").append('<li> É necessária a seleção de pelo menos um atendente.</li>');
                    goTo($(".alert.alert-danger.relatorio ul"));
                    console.log('error');
                    return false;
                }

                // Buscar datas pelo name
                var dataInicial = getValueByName(formulario, 'data_init');
                var dataFinal = getValueByName(formulario, 'data_fim');
                var range = rangeDatas(dataInicial, dataFinal);
                if (range.status == false) {
                    $(".alert.alert-danger.relatorio ul").empty();
                    $(".alert.alert-danger.relatorio ").css('display', '');
                    $(".alert.alert-danger.relatorio ul").append('<li>' + range.message + '</li>');
                    goTo($(".alert.alert-danger.relatorio ul"));
                    console.log('error');
                    return false;
                } else {
                    $(".alert.alert-danger.relatorio ul").empty();
                    $(".alert.alert-danger.relatorio ").css('display', 'none');

                    jQuery.fn.DataTable.Api.register('buttons.exportData()', function (options) {
                        if (this.context.length) {
                            var jsonResult = $.ajax({
                                url: "/relatorio/pausas/search",
                                headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
                                type: 'post',
                                data: {
                                    _token: '{{ csrf_token() }}',
                                    data_inicial: $("#datainit").val(),
                                    data_final: $("#datafinal").val(),
                                    agrupar: $("input[name='group']:checked").val(),
                                    atendentes: $("#atendentes").val(),
                                },
                                dataType: 'json',
                                success: function (result) {
                                    // Do nothing
                                },
                                error: function (xhr, status, error) {
                                    console.log("AJAX Error:", status, error);
                                },
                                async: false
                            });

                            if (jsonResult.responseJSON) {
                                return ({
                                    body: Object.values(jsonResult.responseJSON).map(el => [
                                        el.login_at,
                                        el.logout_at,
                                        el.quantidade,
                                        el.ramal,
                                        el.posicao,
                                        el.nome,
                                        el.total_pausa,
                                        formataTimeStamp(el.tempo_pausado),
                                        formataTimeStamp(el.tempo_logado_seg),
                                        '' // Ações
                                    ]),
                                    header: [
                                        'Login',
                                        'Logout',
                                        'Qtd Logins',
                                        'Ramal',
                                        'Posição',
                                        'Atendente',
                                        'Pausas',
                                        'Pausado',
                                        'Disponível',
                                        'Ações'
                                    ]
                                });
                            } else {
                                console.log("No responseJSON in JSON Result");
                                return {
                                    body: [],
                                    header: []
                                };
                            }
                        }
                    });

                    if (!reload) {
                        reload = true;

                        table.dataTable({
                            "processing": true,
                            "ajax": {
                                'headers': { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
                                'url': "/relatorio/pausas/search",
                                'data': function (d) {
                                    d._token = '{{ csrf_token() }}';
                                    d.data_inicial = $("#datainit").val();
                                    d.data_final = $("#datafinal").val();
                                    d.agrupar = $("input[name='group']:checked").val();
                                    d.atendentes = $("#atendentes").val();
                                    d.ramal = $("#ramal").val();
                                    d.posicao = $("#posicao").val();
                                },
                                'type': 'POST',
                                'dataSrc': function (json) {
                                    console.log("RETORNO JSON ", json);
                                    return json;
                                }
                            },
                            "searching": false,
                            "language": {
                                "sEmptyTable": "Nenhum registro encontrado",
                                "sInfo": "Mostrando de _START_ até _END_ de _TOTAL_ registros",
                                "sInfoEmpty": "Mostrando 0 até 0 de 0 registros",
                                "sInfoFiltered": "(Filtrados de _MAX_ registros)",
                                "sInfoPostFix": "",
                                "sInfoThousands": ".",
                                "sLengthMenu": "",
                                "sLoadingRecords": "Carregando...",
                                "sProcessing": "Processando...",
                                "sZeroRecords": "Nenhum registro encontrado",
                                "sSearch": "Pesquisar",
                                "oPaginate": {
                                    "sNext": "Próximo",
                                    "sPrevious": "Anterior",
                                    "sFirst": "Primeiro",
                                    "sLast": "Último"
                                },
                                "oAria": {
                                    "sSortAscending": ": Ordenar colunas de forma ascendente",
                                    "sSortDescending": ": Ordenar colunas de forma descendente"
                                }
                            },
                            "pageLength": 10,
                            "pagingType": "bootstrap_full_number",
                            'columns': [
                                { data: 'login_at', name: 'login_at', "render": function (data, type, row, meta) { return (data == '' || data == null) ? '-' : formataTimeStamp(data); } },
                                { data: 'logout_at', name: 'logout_at', "render": function (data, type, row, meta) { return (data == '' || data == null) ? '-' : formataTimeStamp(data); } },
                                { data: 'quantidade', name: 'quantidade', "render": function (data, type, row, meta) { return (data == '' || data == null) ? '-' : data; } },
                                { data: 'ramal', name: 'ramal', "render": function (data, type, row, meta) { return (data == '' || data == null) ? '-' : data; } },
                                { data: 'posicao', name: 'posicao', "render": function (data, type, row, meta) { return (data == '' || data == null) ? '-' : data; } },
                                { data: 'nome', name: 'nome', "render": function (data, type, row, meta) { return (data == '' || data == null) ? '-' : data; } },
                                { data: 'total_pausa', name: 'total_pausa', "render": function (data, type, row, meta) { return (data == '' || data == null) ? '-' : data; } },
                                { data: 'tempo_pausado', name: 'tempo_pausado', "render": function (data, type, row, meta) { return (data == '' || data == null) ? '-' : formatTime(data); } },
                                { data: 'tempo_logado_seg', name: 'tempo_logado_seg', "render": function (data, type, row, meta) { return (data == '' || data == null) ? '-' : formatTime(data); } },
                                { data: 'dados_pausa', name: 'dados_pausa' }
                            ],
                            "columnDefs": [
                                {
                                    'orderable': false,
                                    "searchable": false,
                                    "className": "dt-center",
                                    "targets": [9],
                                    "render": function (data, type, row) {
                                        return pausas_modal(data, row);
                                    }
                                }
                            ],
                            "order": [
                                [0, "desc"]
                            ],
                            //scrollCollapse: true,
                            paginate: true,
                            "searching": false,
                            //"sScrollX": "100%",
                            //"scrollX": true,
                            buttons: [
                                //{ extend: 'csvHtml5' },
                            ],
                            dom: "lBfrtip",
                        });

                        table.DataTable().ajax.reload();

                        var buttons = new $.fn.dataTable.Buttons(table, {
                            buttons: [
                                //{ extend: 'csvHtml5', footer: true },
                            ]
                        }).container().appendTo($('#buttommenu'));

                    } else {
                        table.DataTable().ajax.reload();
                    }
                }
            });

            // Event listener for CSV download button
            $("#downloadCSVButton").click(function () {
                if (buttons === true) downloadCSVTabela();
            });

            function downloadCSVTabela() {
                if ($("input[name='group']:checked").val() == "sim") {
                    csvGrouped();
                } else {
                    ungroupedCsv();
                }
            }

            function csvGrouped() {
                // Define headers for the CSV
                var headers = [
                    'Login',
                    'Logout',
                    'Qtd Logins',
                    'Ramal',
                    'Posição',
                    'Atendente',
                    'Pausas',
                    'Pausado',
                    'Disponível'
                ];

                // Get data from the DataTable
                var data = table.DataTable().data().toArray();

                var formatted = formattedData(data);

                // Call the downloadCSV function with the formatted data and headers
                downloadCSV(formatted, headers);
            }
            function ungroupedCsv() {
                // Define headers for the CSV
                var headers = [
                    'Login',
                    'Logout',
                    'Qtd Logins',
                    'Ramal',
                    'Posição',
                    'Atendente',
                    'Pausas',
                    'Pausado',
                    'Disponível',
                    'Inicio',
                    'Termino',
                    'Motivo',
                    'Tempo',
                    'Limite',
                    'Excedido'
                ];

                // Get data from the DataTable
                var data = table.DataTable().data().toArray();

                var formatted = formattedDataDetails(data);

                // Call the downloadCSV function with the formatted data and headers
                downloadCSV(formatted, headers);
            }

            function formattedData(data) {
                return data.map(function (row) {
                    return {
                        'Login': row.login_at,
                        'Logout': row.logout_at,
                        'Qtd Logins': row.quantidade,
                        'Ramal': row.ramal,
                        'Posição': row.posicao,
                        'Atendente': row.nome,
                        'Pausas': row.total_pausa,
                        'Pausado': formatTime(row.tempo_pausado),
                        'Disponível': formatTime(row.tempo_logado_seg)
                    };
                });
            }

            function formattedDataDetails(data) {
                let formatted = [];

                data.forEach(function (row) {
                    // Adiciona linhas separadas para cada pausa
                    if (row.dados_pausa.length === 0) {

                        formatted.push({
                            'Login': row.login_at,
                            'Logout': row.logout_at,
                            'Qtd Logins': row.quantidade,
                            'Ramal': row.ramal,
                            'Posição': row.posicao,
                            'Atendente': row.nome,
                            'Pausas': row.total_pausa,
                            'Pausado': 0,
                            'Disponível': formatTime(row.tempo_logado_seg),

                            'Inicio': 0,
                            'Termino': 0,
                            'Motivo': '',
                            'Tempo': 0,
                            'Limite': 0,
                            'Excedido': 0,
                        });

                    }
                    else {
                        row.dados_pausa.forEach(function (pausa) {

                            formatted.push({
                                'Login': row.login_at,
                                'Logout': row.logout_at,
                                'Qtd Logins': row.quantidade,
                                'Ramal': row.ramal,
                                'Posição': row.posicao,
                                'Atendente': row.nome,
                                'Pausas': row.total_pausa,
                                'Pausado': formatTime(row.tempo_pausado),
                                'Disponível': formatTime(row.tempo_logado_seg),

                                'Inicio': pausa.inicio || '',
                                'Termino': pausa.termino || '',
                                'Motivo': pausa.nome || '',
                                'Tempo': formatTime(pausa.tempo_pausado),
                                'Limite': formatTime(pausa.limite || 0),
                                'Excedido': formatTime(pausa.tempo_excedido || 0),
                            });
                        });
                    }
                });

                return formatted;
            }



            function formatTime(seconds) {
                var selectedPeriod = document.querySelector('input[name="period"]:checked');

                if (selectedPeriod.value == 'hours') {
                    var hours = Math.floor(seconds / 3600);
                    var minutes = Math.floor((seconds % 3600) / 60);
                    var remainingSeconds = seconds % 60;

                    return `${('0' + hours).slice(-2)}:${('0' + minutes).slice(-2)}:${('0' + remainingSeconds).slice(-2)}`;
                } else if (selectedPeriod.value == 'minutes') {
                    var minutes = Math.floor(seconds / 60);
                    var remainingSeconds = seconds % 60;

                    return `${('0' + minutes).slice(-2)}:${('0' + remainingSeconds).slice(-2)}`;
                }
            }

            function formataTimeStamp(dateString) {
                var date = new Date(dateString);
                var day = ('0' + date.getDate()).slice(-2);
                var month = ('0' + (date.getMonth() + 1)).slice(-2);
                var year = date.getFullYear();
                var hours = ('0' + date.getHours()).slice(-2);
                var minutes = ('0' + date.getMinutes()).slice(-2);
                var seconds = ('0' + date.getSeconds()).slice(-2);

                return `${day}/${month}/${year} ${hours}:${minutes}:${seconds}`;
            }

            // Tornar a primeira letra maiúscula de cada palavra 
            function CapitalizeFirstLetter(str) {
                if (isNaN(str) == false) {
                    return str;
                }

                const subst = str.toLowerCase().replace(/(?:^|\s)\S/g, function (a) {
                    return a.toUpperCase();
                });

                return subst;
            }

            function monta_modal_details(data) {
                // Encontre o modal pelo ID
                var modal = $('#detailsModal');

                // Atualize o conteúdo do modal com os dados
                modal.find('.modal-body').html(data);

                // Abra o modal
                modal.modal('show');
            }

            $(document).on("click", ".open_details_pausa", function () {
                // Access the data attribute
                var data = $(this).attr("data");
                var atendente = $(this).attr("atendente");

                if (!data) {
                    alert("Erro: Dados não encontrados.");
                    return;
                }

                try {
                    var parsedData = JSON.parse(data);
                    var inicio = $("#datainit").val();
                    var fim = $("#datafinal").val();

                    openModalWithData(parsedData, atendente, inicio, fim);
                } catch (e) {
                    alert("Erro ao processar os dados: " + e.message);
                }
            });

            // Função para abrir o modal e exibir os dados
            function openModalWithData(data, atendente, inicio, fim) {
                // Verifica se data é válido
                if (!data || !Array.isArray(data) || data.length === 0) {
                    console.error("Data is invalid or empty:", data);
                    alert("Não há dados de pausas para exibir.");
                    return;
                }

                // Limpa o conteúdo do modal
                var modalBody = $("#detailsModal .modal-body");
                modalBody.empty();

                // Limpa o conteúdo do modal
                var modalHeader = $("#detailsModal .modal-header");
                modalHeader.empty();

                // Adiciona o título do modal
                var modalTitle = $('<h5 class="modal-title" id="detailsModalLabel" style="color: white; font-weight: bold;">Relatório - Detalhes</h5>');
                modalHeader.append(modalTitle);

                // Adiciona um novo item ao modal-header
                var newItem = $('<h5 class="modal-title" style="color: white; font-weight: bold;">Atendente: ' + atendente + '</h5>');
                modalHeader.append(newItem);

                var newItem2 = $('<h5 class="modal-title" style="color: white; font-weight: bold;">Período: ' + inicio + ' até ' + fim + '</h5>');
                modalHeader.append(newItem2);

                // Cria uma div responsiva
                var tableResponsiveDiv = $('<div class="table-responsive"></div>');

                // Cria uma tabela
                var table = $('<table class="table table-striped table-bordered table-advance table-hover order-column display" style="width: 98%!important"></table>');
                var thead = $('<thead></thead>');
                var tbody = $('<tbody></tbody>');

                // Adiciona cabeçalho da tabela (opcional, dependendo dos dados)
                var headers = Object.keys(data[0]);
                //var headers = ['Início', 'Término', 'Motivo', 'Tempo', 'T. Limite', 'T. Excedido'];
                var headerRow = '<tr>'; header_table
                headers.forEach(function (header) {
                    //console.log("HEADER", header);
                    headerRow += '<th>' + header_table(header) + '</th>';
                });
                headerRow += '</tr>';
                thead.append(headerRow);

                // Adiciona linhas da tabela com os dados
                data.forEach(function (item, index) {
                    var row = '<tr>';
                    headers.forEach(function (header) {
                        row += linha_table(item, header);
                    });
                    row += '</tr>';
                    tbody.append(row);
                });

                // Adiciona thead e tbody à tabela
                table.append(thead);
                table.append(tbody);

                // Adiciona a tabela à div responsiva
                tableResponsiveDiv.append(table);

                // Adiciona a div responsiva ao corpo do modal
                modalBody.append(tableResponsiveDiv);


                // Cria um botão para download CSV
                if (buttons === true) {
                    var downloadButton = $('<button style="background-color: #e9e9e9; color:black;" class="btn btn-primary">Exportar</button>');
                    downloadButton.on('click', function () {
                        dataModalDownload = data;
                        headersModalDonwload = headers;
                        downloadCSV(data, headers);
                        //$('#downloadModal').modal('show');  // Exibe o modal
                    });
                } else {
                    downloadButton = '';
                }


                // Cria o contêiner com a classe CSS para alinhamento à direita
                var container = $('<div class="text-right"></div>');

                // Adiciona o botão ao contêiner
                container.append(downloadButton);


                // Adiciona o botão ao corpo do modal
                modalHeader.append(container);
                //modalBody.prepend(downloadButton);

                // Abre o modal
                $("#detailsModal").modal("show");
            }

            $('#download_csv_modal').on('click', function () {
                //downloadCSV(dataModalDownload, headersModalDonwload);
                var selectedOption = $('input[name="exportar_agrupado"]:checked').val();


                if (selectedOption == 'sim') {
                    downloadCSVTabela();
                } else if (selectedOption == 'nao') {
                    downloadCSV(dataModalDownload, headersModalDonwload);
                }
                $('#downloadModal').modal('hide');  // Fecha o modal após o download
            });


            function downloadCSV(data, headers) {
                // Cria o conteúdo CSV
                var csvContent = "data:text/csv;charset=utf-8,\uFEFF";

                // Adiciona cabeçalho ao CSV
                csvContent += headers.join(",") + "\r\n";

                // Adiciona linhas de dados ao CSV
                data.forEach(function (row) {
                    var rowContent = headers.map(function (header) {
                        return linha_csv(row, header);
                    }).join(",");
                    csvContent += rowContent + "\r\n";
                });

                // Cria um link oculto para download
                var encodedUri = encodeURI(csvContent);
                var link = document.createElement("a");
                link.setAttribute("href", encodedUri);
                link.setAttribute("download", "relatorio_login_pausas.csv");

                // Simula um clique no link para iniciar o download
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);
            }

            function linha_csv(row, header) {
                switch (header) {
                    case 'tempo_pausado':
                    case 'limite':
                    case 'tempo_excedido':
                        return formatTime(row[header]);
                        break;
                    default:
                        return row[header];
                        break;
                }
            }


            function linha_table(item, header) {
                switch (header) {
                    case 'inicio':
                    case 'termino':
                        return '<td>' + formataTimeStamp(item[header]) + '</td>'
                        break;
                    case 'nome':
                        return '<td>' + item[header] + '</td>'
                        break;
                    case 'quantidade':
                        return '<td>' + item[header] + '</td>'
                        break;
                    case 'ramal':
                        return '<td>' + item[header] + '</td>'
                        break;
                    case 'descricao':
                        return '<td>' + item[header] + '</td>'
                        break;
                    case 'limite':
                    case 'tempo_pausado':
                        return '<td>' + formatTime(item[header]) + '</td>'
                        break;
                    case 'tempo_excedido':
                        return '<td>' + formatTime(item[header]) + '</td>'
                        break;
                    default:
                        return '<td>' + item[header] + '</td>'
                        break;
                }
            }

            function header_table(nome) {
                switch (nome) {
                    case 'inicio':
                        return 'Início';
                        break;
                    case 'termino':
                        return 'Término';
                        break;
                    case 'nome':
                        return 'Motivo';
                        break;
                    case 'quantidade':
                        return 'Qtd Logins';
                        break;
                    case 'ramal':
                        return 'Ramal';
                        break;
                    case 'limite':
                        return 'Limite';
                        break;
                    case 'tempo_pausado':
                        return 'Tempo';
                        break;
                    case 'tempo_excedido':
                        return 'Excedido';
                        break;
                    default:
                        return nome;
                        break;
                }
            }

            var pausas_modal = function (data, row) {
                console.log("DATA PAUSAS MODAL");
                console.log("data -> ", data);
                console.log("row -> ", row);

                if (!row || typeof row !== 'object') {
                    console.error("Row is undefined or not an object:", row);
                    return '<a style="font-size:22px; color: #ccc; cursor: not-allowed;"><i class="fa fa-file-text-o"></i></a>';
                }

                console.log("row.nome -> ", row.nome);

                var jsonData = JSON.stringify(data);

                return '<a style="font-size:22px;" class="open_details_pausa" data=\'' + jsonData + '\' atendente="' + (row.nome || '') + '"><i class="fa fa-file-text-o"></i></a>';
            }


            function rangeDatas(dataInicial, dataFinal, meses = 1) {
                if (typeof dataInicial == 'undefined' || dataInicial == null || dataInicial == '') {
                    return { 'status': false, 'message': 'O campo de data inicial é obrigatório.' };
                }
                if (typeof dataFinal == 'undefined' || dataFinal == null || dataFinal == '') {
                    return { 'status': false, 'message': 'O campo de data final é obrigatório.' };
                }
                if (typeof meses == 'undefined' || meses == null || meses == '') {
                    return { 'status': false, 'message': 'O parametro de meses é obrigatório.' };
                }

                dataInicial = dataInicial.split('/');
                dataInicial = moment(new Date(dataInicial[1] + '-' + dataInicial[0] + '-' + dataInicial[2] + ' 00:00:00'));

                dataFinal = dataFinal.split('/');
                dataFinal = moment(new Date(dataFinal[1] + '-' + dataFinal[0] + '-' + dataFinal[2] + ' 23:59:59'));
                dataFinal = dataFinal.add(-1, 'days');

                var duration = dataFinal.diff(dataInicial, 'months');
                if (duration < meses) {
                    return { 'status': true, 'message': 'Os campos de datas estão entre o range permitido.' };
                }
                else {
                    return { 'status': false, 'message': 'Os campos de datas estão fora do range permitido de ' + meses + ' meses.' };
                }
            }

        </script>
    @endpush

@endsection