@extends('layouts.app')
@section('content')
<link href="{{ asset('global/plugins/bootstrap-datepicker/css/bootstrap-datepicker3.min.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ asset('global/plugins/bootstrap-multiselect-master/dist/css/bootstrap-multiselect.css') }}" rel="stylesheet" type="text/css" />
<style>
    #formPesquisa {
        margin-top: 1.5%;
        margin-bottom: 2.5%;
    }

    .label-error {
        color: #e7505a;
    }

    .form-error {
        border: 2px solid #e7505a;
    }

    #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;
    }

    .row {
        margin-bottom: 20px;
    }
</style>
<div class="page-content-wrapper">
    <div class="page-content">
        <!-- paginação -->
        <div class="page-bar">
            <ul class="page-breadcrumb">
                <li>
                    <a href="{{ url('/home') }}">Home</a>
                    <i class="fa fa-circle"></i>
                </li>
                <li>
                    <span>Logs</span>
                </li>
            </ul>
        </div>
        <!-- titulo -->
        <h1 class="page-title nova-faixa"> Logs
            <div class="pull-right">
                <i class="nova-faixa-icon icon-user"></i>
            </div>
        </h1>
        <!-- ajuda -->
        <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>
        <!-- filtros -->
        <div class="row">
            <div class="col-md-12">
                <form method="post" id="formPesquisa" onKeyPress="return submitenter(this,event)">
                    {{ csrf_field() }}
                    <div class="row">
                        <div class="col-md-3">
                            <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/yyyy" data-date-end-date="0d" style="width: 100%">
                                <input type="text" class="form-control form-filter input-sm" name="data_init" id="datainit" autocomplete="off" placeholder="data" value="{{$data_inicial}}" onchange="atualizarDatas()">
                                <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-3">
                            <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" data-date-start-date="0d" 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-md-6">
                            <label class="control-label" id="fim_label"><i class="glyphicon glyphicon-calendar"></i> Tipo</label>
                            <select class="form-control" id="tipo" name="tipo[]" multiple>
                                @foreach($return['tipos'] as $tipo)
                                    @if (
                                            $tipo != 'Login Tela de Atendimento' &&
                                            $tipo != 'Logout Tela de Atendimento' &&
                                            $tipo != 'Login Interface Web' &&
                                            $tipo != 'Logout Interface Web'
                                        )
                                        <option value="{{$tipo}}">{{$tipo}}</option>
                                    @endif
                                @endforeach
                                @if (in_array('Login Tela de Atendimento', $return['tipos']) || in_array('Logout Tela de Atendimento', $return['tipos']))
                                    <option value="Login Tela de Atendimento">Login Atendimento</option>
                                @endif
                                @if (in_array('Login Interface Web', $return['tipos']) || in_array('Logout Interface Web', $return['tipos']))
                                    <option value="Login Interface Web">Login Interface Web</option>
                                @endif
                            </select>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-4">
                            <label class="control-label" id="init_label"><i class="glyphicon glyphicon-calendar"></i> Usuário</label>
                            <select class="form-control" id="usuario" name="usuario[]" multiple>
                                @foreach($return['usuarios'] as $usuario => $val)
                                <option value="{{$usuario}}" selected>{{$val}}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="col-md-4">
                            <label class="control-label" id="init_label"><i class="glyphicon glyphicon-calendar"></i> Tipo Log</label>
                            <select class="form-control" id="tipolog" name="tipolog" size="1">
                                <option value="1">Configuração</option>
                                <option value="2" selected>Atendimento</option>
                            </select>
                        </div>

                        <div class="col-md-4">
                            <label class="control-label" id="fim_label"><i class="glyphicon glyphicon-calendar"></i> Evento</label>
                            <select class="form-control" id="status" name="status[]" multiple>
                                <option value="Sucesso" selected>Sucesso</option>
                                <option value="Falha" selected>Falha</option>
                                <option value="Info" selected>Info</option>
                            </select>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-3">
                            <label class="control-label"><i style="margin-right: 5px !important" class="fa fa-search"></i>Pesquisa</label><!--glyphicon-list-alt"-->
                            <input type="text" class="form-control" placeholder="nome do motivo, evento, tipo e ip" name="pesquisa" id="pesquisa">
                        </div>
                        <div class="col-md-4" style="top: 26px;">
                            <button type="button" class="btn blue" id="pesquisar" 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>
                </form>
            </div>
        </div>
        <!-- tabela -->
        <div class="row">
            <div class="col-md-12">
                <div class="    ">
                    <table class="table table-striped table-bordered table-advance table-hover table-checkable order-column" id="sample_1">
                        <thead>
                            <tr>
                                <th><i class="fa fa-address-card"></i> Data </th>
                                <th><i class="fa fa-envelope"></i> Usuário </th>
                                <th> Tipo </th>
                                <th> Evento </th>
                                <th> Motivo </th>
                                <th><i class="fa fa-cogs"></i> IP</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- <div class="modal fade" id="ModalVisualizar" 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">Visualizar Usuário</h4>
            </div>
            <div class="modal-body">
               
                <form action="" class="horizontal-form" method="post" id="formVisualizar">
                    {{ csrf_field() }}
                    <input type="hidden" name="id" value="">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <label class="control-label">Nome</label>
                                <span class="required"> * </span>
                                <span class="row col-md-12 form-group name"></span>
                            </div>

                            <div class="form-group">
                                <label class="control-label">Login</label>
                                <span class="required"> * </span>
                                <span class="row col-md-12 form-group user"></span>
                            </div>
            
                            <div class="form-group">
                                <label class="control-label">E-mail</label>
                                <span class="required"> * </span>
                                <span class="row col-md-12 form-group email"></span>
                            </div>

                            <div class="form-group">
                                <label class="control-label">Perfil de Acesso</label>
                                <span class="required"> * </span>
                                <span class="row col-md-12 form-group acesso"></span>
                            </div>

                            <div class="form-group">
                                <label class="control-label">Ramal</label>
                                <span class="required"> * </span>
                                <span class="row col-md-12 form-group ramal"></span>
                            </div>

                            <div class="form-group">
                                <label class="control-label">Posição</label>
                                <span class="required"> * </span>
                                <span class="row col-md-12 form-group posicao"></span>
                            </div>

                        </div>
                    </div>
                </form>    
            </div>
            <div class="modal-footer">
                <button type="button" class="btn dark btn-outline" data-dismiss="modal">Fechar</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>  
        </div>
    </div>
</div> -->
@endsection

@push('scripts')
<!-- BEGIN PAGE LEVEL PLUGINS -->
<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/jquery-repeater/jquery.repeater.1.2.1.min.js') }}" type="text/javascript"></script>
<!-- END PAGE LEVEL PLUGINS -->

<!-- BEGIN PAGE LEVEL SCRIPTS -->
<script src="{{ asset('pages/scripts/logs/table-datatables-managed.js') }}" type="text/javascript"></script>
<script src="{{ asset('pages/scripts/acesso/form-repeater.js') }}" type="text/javascript"></script>
<script src="{{ asset('pages/scripts/acesso/bootstrap-confirmation-index.js') }}" type="text/javascript"></script>
<!-- END PAGE LEVEL SCRIPTS -->
<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/bootstrap-timepicker/js/bootstrap-timepicker.min.js') }}" type="text/javascript"></script>
<script src="{{ asset('global/plugins/bootstrap-multiselect-master/dist/js/bootstrap-multiselect.js') }}" type="text/javascript"></script>
<script src="{{ asset('global/plugins/moment/moment.min.js')}}" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('.datepicker').datepicker();
        atualizarDatas();
        $('#formPesquisa').find('select').multiselect({
            allSelectedText: 'Todos selecionados',
            nonSelectedText: 'Selecionar',
            numberDisplayed: 10,
            maxHeight: 200,
            buttonWidth: '100%',
            enableCaseInsensitiveFiltering: true,
            selectAllText: 'Selecionar Todos',
            includeSelectAllOption: true,
            enableClickableOptGroups: true
        });

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

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

    });

    function atualizarDatas() {
        var data_atual = $('#datainit').val();
        data_atual = data_atual.split('/');
        data_atual = moment(new Date(data_atual[1] + '-' + data_atual[0] + '-' + data_atual[2]));
        //pegar data para seis meses
        var mes = data_atual.month() + 7;
        var ano = data_atual.year();

        if (mes > 12) {
            mes = mes - 12;
            ano += 1;
        }
        if (mes < 9) {
            mes = '0' + mes;
        }
        var data_limite = moment(ano + '-' + mes + '-01').endOf('month').format('DD/MM/YYYY');
        $("#form-fim").datepicker('setStartDate', $('#datainit').val());
        $("#form-fim").datepicker('setEndDate', data_limite);
        $("#form-fim").datepicker('setDate', data_limite);
    }
</script>
@endpush