@extends('layouts.app')
@section('content')

<style type="text/css">
    span.multiselect-native-select .btn-group,span.multiselect-native-select .btn-group button,span.multiselect-native-select .btn-group ul{width: 100%;}    
    .multiselect-container > li.disabled { display:none;}
    #canal .multiselect-container>li, 
    #atendente .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;
    }
</style>

<div class="page-content-wrapper">
    <div class="page-content" >
        <div class="page-bar">
            <ul class="page-breadcrumb">
                <li>
                    <a href="{{ url('/home') }}">Home</a>
                    <i class="fa fa-circle"></i>
                </li>
                <li>
                    <span>Relatorios</span>
                    <i class="fa fa-circle"></i>
                </li>
            </ul>  
        </div>
        <h1 class="page-title nova-faixa"> Relatório de Atendimento - Volumetria
            <div class="pull-right">
                <i class="nova-faixa-icon icon-notebook" style="padding-right:20px; "></i>
            </div>
        </h1>
        <!--  -->
                
        <div class="col-md-12" style="margin-top:1.5%;margin-bottom: 2.5%;">
            <form id='myform' >
                <div class="form-group row">
                    <div class="col-md-4">
                        <style type="text/css">
                            .label-error{
                                color:#e7505a;
                            }

                            .form-error{
                                border: 2px solid #e7505a;
                            }
                        </style>
                        
                        <label class="control-label"><i class="glyphicon glyphicon-calendar"></i> Data Inicio </label>
                        <div class="input-group date date-picker margin-bottom-5" data-date-format="dd/mm/yyyy" id="form_init" 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}}">
                            <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"><i class="glyphicon glyphicon-calendar"></i> Data Final </label>
                            <div class="input-group date date-picker margin-bottom-5" data-date-format="dd/mm/yyyy" id="form-fim" 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-4" >
                        <label class="control-label" id="init_label"><i class="glyphicon glyphicon-calendar"></i> Canal </label><!--glyphicon-list-alt"-->
                        
                        <select class="form-control" id="canal" name="canais[]" size="1" required multiple="multiple">
                            <option value="10" class="select-option" class="subclass" selected>Telefonia</option>
                            <option value="3" class="select-option" selected>Whatsapp</option>
                            <option value="4" class="select-option" selected>Instagram</option>
                            <option value="5" class="select-option" selected>Email</option>
                            <option value="9" class="select-option" selected>Chat</option> 
                        </select>
                    </div>
                </div>
                <div class="form-group row">
                    <div class="col-md-4" >
                        <label class="control-label"><i style="margin-right: 5px !important" class="fa fa-user"></i>Atendente</label><!--glyphicon-list-alt"-->
                        <select class="bs-select form-control " name="atendente[]" id="atendente" multiple="multiple">
                            @foreach($user as $usuario)
                                <option value="{{$usuario->id}}" class="select-option">{{$usuario->name}}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="col-md-4" style="">
                        <label class="control-label"><i style="margin-right: 5px !important" class="fa fa-search"></i>Pesquisa</label>
                        <input type="text" class="form-control" name="pesquisa" id="pesquisa" placeholder="nome do contato, empresa, telefone, cpf, motivo, assunto..." >
                    </div>
                    
                    <div class="col-sm-4" style="top: 24px">
                        <button type="button" id="submit" class="btn blue" style="display: inline-block;" form="myform">
                            <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 class="col-md-8" id="Telefone" style="display: none;">
                        <label class="control-label" for=""><i class="fa fa-mobile-phone"></i>Telefone</label>
                        <input class="form-control" id="tel" type="text" maxlength="16">
                    </div>

                    <div class="col-md-8" id="Usuario" style="display: none;">
                        <label class="control-label" for=""><i class="fa fa-user"></i>Usuario</label>
                        <input class="form-control" type="text">
                    </div>
                </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 - Totais de Atendimentos 
                        </div>
                        
                        <div id="buttommenu"  style="top: 2px;"></div>
                    </div>
                    
                    <style type="text/css">
                        .dt-buttons{
                            float: right!important;
                            margin-top: 3px;
                        }
                    </style>
                                    
                    <div class="portlet-body">
                        <style type="text/css">
                            table#sample_1 tbody th,
                            table#sample_1 tbody td {
                                white-space: nowrap;

                            }
                        </style>
                        
                        <div class="table-responsive">
                            <style type="text/css">
                                .center-bold th{
                                    text-align: center;
                                    font-weight: 60 !important;
                                }
                                
                                th, td { 
                                    white-space: nowrap;
                                    width: 10%;
                                }

                                div.dataTables_wrapper {
                                    width: 100%;
                                    margin: 0 auto;
                                }
                                div.dataTables_scrollHead{
                                    width: 98%!important;
                                }
                                div.dataTables_scrollBody{
                                    width: 98%!important;
                                }
                            </style>
                            
                            <table class="table table-striped table-bordered table-advance table-hover order-culunm"id="sample_2">
                                <thead>
                                    <tr>
                                        <th class="text-center" style="vertical-align: middle;"><i class="fa fa-calendar" style="margin-right: 3px"></i><span>Data</span></th>
                                        <th class="text-center" style="vertical-align: middle;"><i class="fa  fa-calculator" style="margin-right: 3px"></i><span>Total</span></th>
                                        <th class="text-center" style="vertical-align: middle;"><i class="icon-call-out" style="margin-right: 3px"></i><span>Chamadas<br> Ativas</span></th>
                                        <th class="text-center" style="vertical-align: middle;"><i class="icon-call-in" style="margin-right: 3px"></i><span>Chamadas<br> Receptivas</span></th>
                                        <th class="text-center" style="vertical-align: middle;"><i class="fa fa-whatsapp" style="margin-right: 3px" ></i><span>Whatsapp<br> Receptivo</span></th>
                                        <th class="text-center" style="vertical-align: middle;"><i class="fa fa-whatsapp" style="margin-right: 3px" ></i><span>Whatsapp<br> Ativo</span></th>
                                        <th class="text-center" style="vertical-align: middle;"><img style="filter:grayscale(100%);width:20px;height:20px;" src="/pages/img/gestao/ICONES-REDES-SOCIAIS-30X30-email.png"><span>Email<br> Receptivo</span></th>
                                        <th class="text-center" style="vertical-align: middle;"><img style="filter:grayscale(100%);width:20px;height:20px;" src="/pages/img/gestao/ICONES-REDES-SOCIAIS-30X30-email.png"><span>Email<br> Ativo</span></th>
                                        <th class="text-center"><img style="filter:grayscale(100%);width:20px;height:20px;" src="/pages/img/gestao/ICONES-REDES-SOCIAIS-30X30-chat-no-site.png"><span>Instagram<br> Receptivo</span></th>
                                        <th class="text-center"><img style="filter:grayscale(100%);width:20px;height:20px;" src="/pages/img/gestao/ICONES-REDES-SOCIAIS-30X30-chat-no-site.png"><span>WebChat<br> Receptivo</span></th>
                                    </tr>
                                </thead>
                                
                                <tbody>
                                </tbody>
                                
                                <tfoot>
                                    <tr><th class="text-center"><i class="fa  fa-calculator" style="margin-right: 3px"></i>Total</th> <td></td> <td></td> <td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
                                </tfoot>
                            </table>
                        </div>
                    </div>
                </div>
                
                <div class="alert alert-danger relatorio" style="display:none;">
                    <ul>
                    </ul>
                </div>
            </div>
        </div>

<!-- <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" />
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/fixedcolumns/3.2.6/js/dataTables.fixedColumns.min.js">
<link rel="stylesheet" type="text/css" href="{{ asset('pages/scripts/relatorio3/fixed.min.js') }}">
@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 type="{{asset('global/plugins/datatables/datatables.all.min.js') }}"></script>
<script type="{{asset('global/plugins/datatables/plugins/bootstrap/datatables.bootstrap.js') }}"></script> 
<script src="{{ asset('pages/scripts/relatorioatendimento/tabela_total.js') }}" type="text/javascript"></script>

<!-- <script src="{{ asset('pages/scripts/relatorio3/fixed..js') }}" type="text/javascript"></script> -->


<script src="{{ asset('pages/scripts/relatorio/bootstrap-confirmation-index.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('pages/scripts/components-date-time-pickers.js') }}" type="text/javascript"></script>-->
<script src="{{ asset('global/plugins/moment/moment.min.js')}}" type="text/javascript"></script>
<!--Datatables-execel-print-->

<!--<script src="{{ asset('global/plugins/bootstrap-datepicker/js/bootstrap-datepicker.min.js') }}" type="text/javascript"></script>-->


<script type="text/javascript">
@can('relatorio-total_atendimento-exportar')
    let buttons = true;
@else
    let buttons = false;
@endcan

    $(document).ready(function(){
        $('#limpa_campo').click(function(){
            $("#datainit").val('');
            $("#datafinal").val('');
            $('#atendente').val('');
            $('#canais').val('');
            $('#pesquisa').val('');
            (".date-picker").datepicker("refresh");
        });

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

        $('#canal').multiselect({
            allSelectedText: 'Todos selecionados',
            nonSelectedText: 'Selecionar',
            numberDisplayed: 10,
            maxHeight: 200,
            buttonWidth: '100%',
            enableCaseInsensitiveFiltering: true,
            selectAllText: 'Selecionar Todos',
            includeSelectAllOption: true
        });
        $('#pesquisa').on('keydown',function(event){
            if(event.keyCode == '13')
            {
                event.preventDefault();
                $('#submit').click();
            }
        });
    });

</script>
@endpush
@endsection