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

    .progress {
        font-size: 14px !important;
        position: relative;
        text-align: center;
    }

    .progress-bar-neutro {
        background-color: rgb(199, 199, 199);
    }

    .visits{
        color:#666
    }
    .visits:hover{
        color:#333
    }
</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>Relatório</span>
                    <i class="fa fa-circle"></i>
                </li>
            </ul>
        </div>
        <h1 class="page-title nova-faixa"> <i class="fa fa-whatsapp" aria-hidden="true"></i> Relatório de 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">
                    <style type="text/css">
                        .label-error {
                            color: #e7505a;
                        }

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

                        span[id^="emj-"] {
                            font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
                        }

                        span[id^="select-emj-"] {
                            font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
                        }
                    </style>

                    <div class="row">
                        <div class='col-md-12'>
                            <div id="erros" class="alert alert-danger" style="display:none;">
                                <ul>
                                </ul>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-4">
                        <label class="control-label" id="dateinicial"><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" style="width: 100%">
                            <input type="text" class="form-control form-filter input-sm" name="data_inicial" id="datainicial" autocomplete="off" placeholder="data" value="{{date('d/m/Y')}}" required>
                            <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="datefinal"><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_final" id="datafinal" autocomplete="off" placeholder="data" value="{{date('d/m/Y')}}" required>
                            <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 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($atendentes as $atendente)
                                <option value="{{$atendente->atendente_id}}" class="select-option">{{$atendente->nome}}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="form-group row">
                    <div class="col-md-4">
                        <label class="control-label" id="init_label"><i class="glyphicon glyphicon-calendar"></i> Tipo Atendimento </label>

                        <select class="form-control" id="tipo_atendimento" name="tipo_atendimento[]" size="1" multiple="multiple">
                            <option value="1" class="select-option" selected>Ativo</option>
                            <option value="2" class="select-option" selected>Receptivo</option>
                        </select>
                    </div>

                    <!-- <div class="col-md-4">
                        <label class="control-label" id="init_label"><i class="glyphicon glyphicon-calendar"></i> Tipo Template </label>

                        <select class="form-control" id="tipo_template" name="tipo_template[]" size="1" multiple="multiple">
                            <option value="marketing" class="select-option" selected>Marketing</option>
                            <option value="utility" class="select-option" selected>Utilidade</option>
                        </select>
                    </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>
                    </div>
                </div>
            </form>

        </div>

        <div  class="row">
            <div class="col-md-12">
                <div id="quantity" class="portlet light bordered" style="display:none">
                    <div class="portlet-body">
                        <div class="row">
                            <div id="quant_atendimento" class="col-md-2">
                                <div class="easy-pie-chart" title="Total Atendimento">
                                    <span class="title"> Total Atendimento</span>
                                    <div class="visits" id="bar-atendimento" data-percent="0">
                                    <a id="link-atendimento" href=""><span id="text-atendimento">0</span></a>
                                    </div>
                                </div>
                            </div>
                            <div id="quant_receptivo" class="col-md-2">
                                <div class="easy-pie-chart" title="Total Atendimentos Receptivos">
                                    <span class="title"> Total Receptivo</span>
                                    <div class="visits" id="bar-receptivo" data-percent="0">
                                    <a id="link-receptivo" href=""><span id="text-receptivo">0</span></a>
                                    </div>
                                </div>
                            </div>
                            <div class="margin-bottom-10 visible-sm"> </div>
                            <div id="quant_ativo" class="col-md-2">
                                <div class="easy-pie-chart" title="Total Atendimentos Ativos">
                                    <span class="title"> Total Ativo</span>
                                    <div class="visits" id="bar-ativo" data-percent="0">
                                        <a id="link-ativo" href=""><span id="text-ativo">0</span></a>
                                    </div>
                                </div>
                            </div>
                            <div class="margin-bottom-10 visible-sm"> </div>
                            <div id="quant_marketing" class="col-md-2">
                                <div class="easy-pie-chart" title="Total Template de Marketing">
                                    <span class="title"> Total Marketing</span>
                                    <div class="visits" id="bar-marketing" data-percent="3">
                                        <a id="link-marketing" href=""><span id="text-marketing">0</span></a>
                                    </div>
                                </div>
                            </div>
                            <div class="margin-bottom-10 visible-sm"> </div>
                            <div id="quant_utilidade" class="col-md-2">
                                <div class="easy-pie-chart" title="Total Template de Utilidade">
                                    <span class="title" href="javascript:;"> Total Utilidade</span>
                                    <div class="visits" id="bar-utilidade" data-percent="3">
                                        <a id="link-utility" href=""><span id="text-utilidade">0</span></a>
                                    </div>
                                </div>
                            </div>
                            <div class="margin-bottom-10 visible-sm"> </div>
                            <div id="quant_pacote">
                                <div class="easy-pie-chart">
                                    <a class="title" href="javascript:;">
                                        <span id="totalmsg-1">0</span> / <span id="totalmsg-2">9999999</span>
                                    </a>
                                    <div class="progress">
                                        <div id="pb-1" class="progress-bar progress-bar-danger" style="width: 0%">
                                            <span class="sr-only">10% Complete (success)</span>
                                        </div>
                                        <div id="pb-2" class="progress-bar progress-bar-neutro" style="width: 100%">
                                            <span class="sr-only">10% Complete (success)</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="portlet box blue">
                    <div class="portlet-title">
                        <div class="caption">
                            <i class="glyphicon glyphicon-list-alt"></i>Relatório - Volumetria Whatsapp
                        </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">
                                #sample_2_info{
                                    display:none;
                                }
                                .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;color:#fd8686"></i><span>Data</span></th>
                                        <th class="text-center" style="vertical-align: middle;"><i class="fa fa-whatsapp" style="color:#03D603" aria-hidden="true"></i> Receptivo</span></th>
                                        <th class="text-center" style="vertical-align: middle;"><i class="fa fa-whatsapp" style="color:#3e9be2" aria-hidden="true"></i> Ativo</span></th>
                                        <th class="text-center" style="vertical-align: middle;"><i class="fa fa-bullhorn" style="margin-right: 3px;color:#bf0000"></i><span>Temp. Marketing</span></th>
                                        <th class="text-center" style="vertical-align: middle;"><i class="fa fa-bell" style="margin-right: 3px;color:#efd192"></i><span>Temp. Utilidade</span></th>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                </div>

                <div class="alert alert-danger relatorio" style="display:none;">
                    <ul>
                    </ul>
                </div>
            </div>
        </div>
        <div class="col-md-12">
            <div class="modal fade" id="ModalSatisfaction" tabindex="-1" role="basic" aria-hidden="true">
                <div class="modal-dialog modal-md" style="height: 400px;">
                    <div class="modal-content" style="background-color: #ddd;">
                        <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>
        <!-- <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">
        @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/volumetriarelatorio.js') }}" type="text/javascript"></script>

        <!-- <script src="{{ asset('pages/scripts/relatorio3/fixed..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() {
                    $("#canais").val('');
                    $("#filas").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
                });

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

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

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

                $('#datainit').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