@extends('template')

@section('content')

    <!-- BEGIN PAGE CONTENT BODY -->
    <div class="page-content">
        <div class="container-fluid">

            <!-- BEGIN PAGE BREADCRUMBS -->
            <ul class="page-breadcrumb breadcrumb">
                <li>
                    <a href="{{ route('dashboard') }}">Dashboard</a>
                    <i class="fa fa-circle"></i>
                </li>
                <li>
                    <span>Relatórios</span>
                    <i class="fa fa-circle"></i>
                </li>
                <li data-tour-title="Relatório Consumo" data-tour-description="<img src='{{ asset('assets/images/wally.png') }}' alt='Wally' class='wally'><br/>Bem vindo ao seu relatório de Ligações, aqui você pode conferir suas ligações para controlar melhor seu gastos!" data-tour-index="1">
                    <span>Relatório de Ligações</span>
                </li>
            </ul>
            <!-- END PAGE BREADCRUMBS -->

            <!-- BEGIN PAGE CONTENT INNER -->
            <div class="page-content-inner">
                <!-- BEGIN PAGE CONTENT INNER -->
                <div class="page-content-inner">                    
                    <div class="row">
                        <div class="col-md-12">
                            <div class="portlet light"> 
                                <div class="portlet-body">
                                    <div class="row" data-tour-title="Relatório Consumo" data-tour-description="<img src='{{ asset('assets/images/wally.png') }}' alt='Wally' class='wally'><br/>Aqui você pode filtrar as informações que irão aparecer no seu relatório e escolher se ele será apresentado em tela ou se você poderá realizar um download do mesmo em formato de Excel.<br/>PS. se o seu relatório tiver mais de 10000 registos o download dele é feito automaticamente." data-tour-index="2">
                                        {!! Form::open(['route' => 'report.cdr', 'method' => 'post', 'id' => 'f-report']) !!}
                                            <div class="form-group">
                                                <div class="col-md-2">
                                                   {!! Form::label('from', 'De:', ['class' => 'control-label']) !!}
                                                   {!! Form::text('from',$data->from , ['id'=>'from','class' => 'form-control', 'placeholder' => '', 'autocomplete' => 'off']) !!}
                                                </div>
                                                <div class="col-md-2">    
                                                    {!! Form::label('to', 'Até:', ['class' => 'control-label']) !!}
                                                    {!! Form::text('to', $data->to, ['id'=>'to','class' => 'form-control', 'placeholder' => '', 'autocomplete' => 'off']) !!}
                                                </div>
                                                <div class="col-md-3">   
                                                    {!! Form::label('assunto', 'Conta Sip:', ['class' => 'control-label']) !!} 
                                                    {!! Form::select('origem',$contas, $contaVoip, ['class'=>'form-control','id'=>'origem']) !!}
                                                </div>
                                                <div class="col-md-1">
                                                    {!! Form::submit('Buscar', ['class' => 'btn blue-madison', 'name'=>'relatorio']) !!}
                                                </div>
                                                <div class="col-md-1">
                                                    {!! Form::submit('Excel', ['class' => 'btn blue-madison', 'name'=>'excel']) !!}
                                                </div>
                                                <div class="col-md-3">
                                                    *Detalhamento é referente à apenas uma conta selecionada.
                                                </div>
                                            </div> 
                                        {!! Form::close() !!}
                                    </div>

                                    <br>

                                    @if(isset($account))
                                        <div class="row">
                                            <div class="form-group">
                                                <div class="col-md-5">
                                                    <div class="note note-warning bold">
                                                        Ligações realizadas no período de {{$data->from}} a {{$data->to}} referente a conta {{ $account->account.'@'.$account->domain }}
                                                    </div>
                                                </div>
                                            </div> 
                                        </div>
                                        <p>&nbsp;</p>
                                    @endif

                                    <div class="row">
                                        <div class="form-group col-md-4" data-tour-title="Relatório Consumo" data-tour-description="<img src='{{ asset('assets/images/wally.png') }}' alt='Wally' class='wally'><br/>Aqui é exibido o total de ligações realizadas no período." data-tour-index="3">
                                            <div class="widget-thumb widget-bg-color-white text-uppercase margin-bottom-20 ">
                                                <div class="widget-thumb-wrap">
                                                    <i class="widget-thumb-icon bg-blue-madison fa fa-phone"></i>
                                                    <div class="widget-thumb-body">
                                                        <span class="widget-thumb-subtitle"> Total de ligações:</span>
                                                        <span class="widget-thumb-body-stat">{{$qtdTotal['total']}}</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="form-group col-md-4" data-tour-title="Relatório Consumo" data-tour-description="<img src='{{ asset('assets/images/wally.png') }}' alt='Wally' class='wally'><br/>Aqui é exibido o total tempo das ligações realizadas no período." data-tour-index="4">
                                            <div class="widget-thumb widget-bg-color-white text-uppercase margin-bottom-20 ">
                                                <div class="widget-thumb-wrap">
                                                    <i class="widget-thumb-icon bg-blue-madison fa fa-clock-o"></i>
                                                    <div class="widget-thumb-body">
                                                        <span class="widget-thumb-subtitle"> Tempo Total:</span>
                                                        <span class="widget-thumb-body-stat">{{$tempoTotal['total']}}</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="form-group col-md-4" data-tour-title="Relatório Consumo" data-tour-description="<img src='{{ asset('assets/images/wally.png') }}' alt='Wally' class='wally'><br/>Aqui é exibido o valor total das ligações realizadas no período." data-tour-index="5">
                                            <div class="widget-thumb widget-bg-color-white text-uppercase margin-bottom-20 ">
                                                <div class="widget-thumb-wrap">
                                                    <i class="widget-thumb-icon bg-blue-madison fa fa-dollar"></i>
                                                    <div class="widget-thumb-body">
                                                        <span class="widget-thumb-subtitle"> Valor Total:</span>
                                                        <span class="widget-thumb-body-stat">{{'R$ '.formatMoney($valorTotal['total'])}} </span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row"  data-tour-title="Relatório Consumo" data-tour-description="<img src='{{ asset('assets/images/wally.png') }}' alt='Wally' class='wally'><br/>Nessa sessão você pode conferir os totais das suas ligações separados por tipo, status e ramais.<br/>PS. Para visualizar abrir as abas basta clicar nas setas." data-tour-index="6">
                                        <div class="form-group col-md-4">
                                             <div class="portlet box blue-madison" >
                                                <div class="portlet-title">
                                                    <div class="caption">
                                                        <i class="fa fa-gears"></i>Totais por tipo
                                                    </div>
                                                    <div class="tools">
                                                        <a href="javascript:;" class="expand"> </a>
                                                    </div>
                                                </div>
                                                
                                                <div class="portlet-body" style="display:none;">
                                                    <div class="panel-group accordion">
                                                        <table class="table table-striped table-hover table-light">
                                                            <tr>
                                                                <th>Tipo</th>
                                                                <th>Qtd.</th>
                                                                <th>Tempo</th>
                                                                <th>Vlr.</th>
                                                            </tr>
                                                            @foreach($qtdTotal['tipo'] as $key => $value)
                                                                <tr>
                                                                    <td>{{$key}}</td>
                                                                    <td>{{$qtdTotal['tipo'][$key]}}</td>
                                                                    <td>{{gmdate("H:i:s", $tempoTotal['tipo'][$key])}}</td> 
                                                                    <td>{{'R$ '.formatMoney($valorTotal['tipo'][$key])}}</td>
                                                                </tr>
                                                            @endforeach
                                                        </table>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group col-md-4">
                                             <div class="portlet box blue-madison">
                                                <div class="portlet-title">
                                                    <div class="caption">
                                                        <i class="fa fa-signal"></i>Totais por status de ligação
                                                    </div>
                                                    <div class="tools">
                                                        <a href="javascript:;" class="expand"> </a>
                                                    </div>
                                                </div>
                                                <div class="portlet-body" style="display:none;">
                                                    <div class="panel-group accordion">
                                                        <table class="table table-striped table-hover table-light">
                                                            <tr>
                                                                <th>Status</th>
                                                                <th>Qtd.</th>
                                                                <th>Tempo</th>
                                                                <th>Vlr.</th>
                                                            </tr>
                                                            @foreach($qtdTotal['status'] as $key => $value)
                                                                <tr>
                                                                    <td>{{getStatusLigacao($key)}}</td>
                                                                    <td>{{$qtdTotal['status'][$key]}}</td>
                                                                    <td>{{gmdate("H:i:s", $tempoTotal['status'][$key])}}</td> 
                                                                    <td>{{'R$ '.formatMoney($valorTotal['status'][$key])}}</td>
                                                                </tr>
                                                            @endforeach
                                                        </table>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group col-md-4">
                                             <div class="portlet box blue-madison">
                                                <div class="portlet-title">
                                                    <div class="caption">
                                                        <i class="fa fa-phone-square"></i>Totais por ramal
                                                    </div>
                                                    <div class="tools">
                                                        <a href="javascript:;" class="expand"> </a>
                                                    </div>
                                                </div>
                                                <div class="portlet-body" style="display:none;">
                                                    <div class="panel-group accordion">
                                                        <table class="table table-striped table-hover table-light">
                                                            <tr>
                                                                <th>Ramal</th>
                                                                <th>Qtd.</th>
                                                                <th>Tempo</th>
                                                                <th>Vlr.</th>
                                                            </tr>
                                                            @foreach($qtdTotal['ramal'] as $key => $value)
                                                                <tr>
                                                                    <td>{{$key}}</td>
                                                                    <td>{{$qtdTotal['ramal'][$key]}}</td>
                                                                    <td>{{gmdate("H:i:s", $tempoTotal['ramal'][$key])}}</td> 
                                                                    <td>{{'R$ '.formatMoney($valorTotal['ramal'][$key])}}</td>
                                                                </tr>
                                                            @endforeach
                                                        </table>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row" data-tour-title="Relatório Consumo" data-tour-description="<img src='{{ asset('assets/images/wally.png') }}' alt='Wally' class='wally'><br/>Aqui você pode conferir as suas ligações detalhadamente." data-tour-index="7">
                                        <div class="form-group">
                                            <table class="table table-striped table-hover table-light" id="table-number">
                                                <thead>
                                                    <tr class="uppercase">
                                                        <th class="col-md-2 bold bg-blue-madison font-white" style="color:transparent !important;font-size:.001em !important;width: 1px !important;">Order</th>
                                                        <th class="col-md-2 bold bg-blue-madison font-white">Data</th>
                                                        <th class="col-md-2 bold bg-blue-madison font-white">Origem</th>
                                                        <th class="col-md-1 bold bg-blue-madison font-white">Tipo</th>
                                                        <th class="col-md-2 bold bg-blue-madison font-white">Destino</th>
                                                        <th class="col-md-2 bold bg-blue-madison font-white">Duração</th>
                                                        <th class="col-md-2 bold bg-blue-madison font-white">Valor</th>
                                                        <th class="col-md-2 bold bg-blue-madison font-white">Status da Chamada</th>
                                                    </tr>
                                                </thead>
                                                <tbody>                                                
                                                    @foreach($array as $cdr)
                                                        <tr>
                                                            <td>{{ $cdr['dt'] }}</td>
                                                            <td>{{$cdr['data']}}</td>
                                                            <td>{{$cdr['origin']}}</td>
                                                            <td>{{$cdr['tipo']}}</td>
                                                            <td>{{$cdr['destination']}}</td>
                                                            <td>{{$cdr['duration']}}</td>
                                                            <td>{{$cdr['price']}}</td>
                                                            <td>{{$cdr['status']}}</td>
                                                        </tr>
                                                    @endforeach
                                                </tbody>
                                                <tfoot>
                                                    <tr class='bold'>
                                                        <td colspan='4'>Totais: </td>
                                                        <td>Tempo: {{$tempoTotal['total']}}</td>
                                                        <td>Valor: {{'R$ '.formatMoney($valorTotal['total'])}} </td>
                                                        <td>Ligações: {{$qtdTotal['total']}}</td>
                                                    </tr>
                                                </tfoot>
                                            </table>
                                        </div> 
                                    </div>
                                    
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- END PAGE CONTENT INNER -->
            </div>
            <!-- END PAGE CONTENT INNER -->
        </div>
    </div>
    <!-- END PAGE CONTENT BODY -->
@stop()

@section('js-financial')
    
    <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="https://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    {{-- <script src="https://jquery.bassistance.de/validate/jquery.validate.js"></script> --}}
    <script src="https://jquery.bassistance.de/validate/additional-methods.js"></script>


    
    


    <script src="../assets/global/plugins/datatables/datatables.min.js" type="text/javascript"></script>
    <script src="../assets/global/plugins/datatables/plugins/bootstrap/datatables.bootstrap.js" type="text/javascript"></script>

    <link href="{{ asset('/assets/global/css/components.min.css') }}" rel="stylesheet" id="style_components" type="text/css" />
    <script src="{{ asset('/assets/global/plugins/bootstrap/js/bootstrap.min.js') }}" type="text/javascript"></script>
    
    <script src="{{ asset('/assets/global/scripts/app.min.js') }}" type="text/javascript"></script>


    <script src="{{ asset('/assets/global/plugins/counterup/jquery.waypoints.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('/assets/global/plugins/counterup/jquery.counterup.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('/assets/global/plugins/jquery.blockui.min.js') }}" type="text/javascript"></script>
    

    <script>
    $(document).ready( function() {  

        $.datepicker.regional['pt-BR'] = {
            closeText: 'Fechar',
            prevText: '&#x3c;Anterior',
            nextText: 'Pr&oacute;ximo&#x3e;',
            currentText: 'Hoje',
            monthNames: ['Janeiro','Fevereiro','Mar&ccedil;o','Abril','Maio','Junho',
            'Julho','Agosto','Setembro','Outubro','Novembro','Dezembro'],
            monthNamesShort: ['Jan','Fev','Mar','Abr','Mai','Jun',
            'Jul','Ago','Set','Out','Nov','Dez'],
            dayNames: ['Domingo','Segunda-feira','Ter&ccedil;a-feira','Quarta-feira','Quinta-feira','Sexta-feira','Sabado'],
            dayNamesShort: ['Dom','Seg','Ter','Qua','Qui','Sex','Sab'],
            dayNamesMin: ['Dom','Seg','Ter','Qua','Qui','Sex','Sab'],
            weekHeader: 'Sm',
            dateFormat: 'dd/mm/yy',
            firstDay: 0,
            isRTL: false,
            showMonthAfterYear: false,
            yearSuffix: ''
        };

        $.datepicker.setDefaults($.datepicker.regional['pt-BR']);

        $("#from").datepicker();  
        $("#to").datepicker(); 

        /**
         * Tabela padrão, com paginação, busca registros por página 
         */
        $('#table-number').DataTable({
            "columnDefs": [
                {
                    "targets": [ 0 ],
                    "visible": false,
                    "searchable": false
                },
                {
                    "targets": [ 1 ],
                    "orderData": [ 0 ]
                }
            ],
            "order": [[ 0, "asc" ]],
            "lengthMenu": [[30, 60, 100, -1], [30, 60, 100, "All"]],
            "language": {
                "lengthMenu": "Exibir _MENU_",
                "zeroRecords": "Nenhum registro",
                "info": "Exibindo página(s) _PAGE_ de _PAGES_",
                "infoEmpty": "Não há registros disponíveis",
                "search" : "Pesquisar ",
                "paginate": {
                    "first":    "Primeiro",
                    "previous": "Anterior",
                    "next":     "Próximo",
                    "last":     "Último"
                }
            }
        });

    });

    $('#f-report').submit(function(e) {

        let from = formatDate($('#from').val());
        let to   = formatDate($('#to').val());
        
        if (from && to) {
            let days = Math.floor((to - from) / 1000 / 60 / 60 / 24);
            if (days > 30) {
                e.preventDefault();
                swal({
                    title: "Intervalo de no MÁXIMO 30 DIAS !!!",
                    type: "error",
                });
            } else if (days < 0) {
                e.preventDefault();
                swal({
                    title: "Intervalo Inválido !!!",
                    type: "error",
                });
            } else { // SUCESSO
                $.blockUI({ 
                    message: `Aguarde <img src="{{ asset('assets/global/img/loading.gif') }}">`
                });
            }
        } else {
            e.preventDefault();
            swal({
                title: "Formato de DATA INVALIDO !!!",
                type: "error",
            });
        }
    });

    function formatDate(string) {
        
        if (string.split('/').length != 3) return;
        
        return new Date(
            string
            .split('/')
            .reverse()
            .map((v,i) => i==1 ? v.replace(/^0/, '') : v)
            .join('-')
        );
    }
    
    </script>
    @if(Auth::user()->chat)
        <!-- BEGIN JIVOSITE CODE {literal} -->
        <script type='text/javascript'>
        (function(){ var widget_id = 'o6gDGQPyK5';var d=document;var w=window;function l(){
        var s = document.createElement('script'); s.type = 'text/javascript'; s.async = true; s.src = '//code.jivosite.com/script/widget/'+widget_id; var ss = document.getElementsByTagName('script')[0]; ss.parentNode.insertBefore(s, ss);}if(d.readyState=='complete'){l();}else{if(w.attachEvent){w.attachEvent('onload',l);}else{w.addEventListener('load',l,false);}}})();</script>
        <!-- {/literal} END JIVOSITE CODE -->
    @endif
@stop()