{{-- Created by negutierrez on 08/05/2017 --}}
{{-- Modificado por Victor Poeta, fecha 04/09/2017
--}}

@extends('layouts.mainFilters')
@section('header')
    {{--<meta http-equiv="Refresh" content="60; URL=filtros2">--}}
    <link href="{!! asset('css/jquery.tablesorter.pager.css') !!}" rel="stylesheet">
    <style type="text/css">
        .button {
            position: fixed;
            top: 143px;
            left: 5px;
            border-radius: 20px;

            border: none;
            color: #FFFFFF;
            text-align: left;
            font-size: 14px;
            padding: 5px;
            width: auto;
            transition: all 0.5s;
            cursor: pointer;
            margin: 5px;
        }

        .button span {
            cursor: pointer;
            display: inline-block;
            position: relative;
            transition: 0.5s;
        }

        .button span:after {
            font-family: 'Arial';

            content: 'Mensaje Masivo';
            position: absolute;
            opacity: 0;
            top: 0;
            right: -100px;
            transition: 0.5s;
            width:120px;
        }

        .button:hover span {
            padding-right: 140px;
        }

        .button:hover span:after {
            opacity: 1;
            right: 0;
        }

        .btn2-contenedor{
            width:90px;
            height:240px;
            position:absolute;
            right:0px;
            bottom:0px;
        }

        .botonF1{
            width:60px;
            height:60px;
            border-radius:100%;
            background:#0076be;
            right:0;
            bottom:0;
            position:absolute;
            margin-right:30px;
            margin-bottom:50px;
            border:none;
            outline:none;
            color:#FFF;
            font-size:32px;
            box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
            transition:.3s;
        }

        .botonF1:hover span{
            transform:rotate(360deg);
        }
        .botonF1:active{
            transform:scale(1.1);
        }

        .dataTables_filter {
            width: 50%;
            float: right;
            text-align: right;
        }

    </style>
@endsection
@section('script')
    <script type="text/javascript" src="{!! asset('js/jquery.tablesorter.min.js') !!}"></script>
    <script type="text/javascript" src="{!! asset('js/jquery.tablesorter.widgets.min.js') !!}"></script>
    <script type="text/javascript" src="{!! asset('js/jquery.tablesorter.pager.js') !!}"></script>
    <script type="text/javascript" src="{!! asset('js/PagosElectronicos/tableSorterPagosElectronicos.js') !!}"></script>
    <script type="text/javascript" src="{!! asset('/js/jquery-ui.min.js') !!}"></script>
    <script type="text/javascript" src="{!! URL::asset('/js/datatables2.min.js')  !!}"></script>
    <script type="text/javascript" src="{!! URL::asset('/js/jszip.min.js')  !!}"></script>
    <script type="text/javascript" src="{!! URL::asset('/js/Chart.js')  !!}"></script>

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

            function aleatorio(inferior,superior){
               var numPosibilidades = superior - inferior;
               var aleat = Math.random() * numPosibilidades;
               aleat = Math.floor(aleat);
               return parseInt(inferior) + aleat;
            }
            function dame_color_aleatorio(){
                var hexadecimal = new Array("0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F");
                var color_aleatorio = "#";
                for (var i=0;i<6;i++){
                   var posarray = aleatorio(0,hexadecimal.length);
                    color_aleatorio += hexadecimal[posarray];
                }
                return color_aleatorio
            }
            var montoTotal = $('#monto_total').html();
            var totalTransacciones = $('#total_transacciones').html();
            var total_registro = $('#total_registro').val();
            var transacciones = [];
            var nombre_sucursal = [];
            var labelTransacciones = [];
            var monto_sucursal = [];
            var labelMonto = [];
            var detalle_transaccion = [];
            var detalle_monto = [];
            var siglas = [];
            var generador_color = [];
            for (var e = 0; e<total_registro; e++){
                if($('#transacciones_por_'+e).html() != 'undefined' && $('#transacciones_por_'+e).html() != ''){
                    nombre_sucursal.push($('#siglas_por_'+e).html());
                    siglas.push($('#nombre_por_'+e).html());
                    transacciones.push(parseFloat($('#transacciones_por_'+e).html().replace(',','.')).toFixed(2));
                    labelTransacciones.push($('#siglas_por_'+e).html() + ': ' + $('#detalle_transaccion_'+e).html()+ ' - ' + $('#transacciones_por_'+e).html().replace(',','.') + ' %');
                    monto_sucursal.push($('#monto_por_'+e).html().replace(',','.'));
                    labelMonto.push($('#siglas_por_'+e).html() + ': ' + $('#monto_por_'+e).html().replace(',','.') + ' %');
                    detalle_transaccion.push($('#detalle_transaccion_'+e).html());
                    detalle_monto.push($('#detalle_monto_'+e).html() + ' BsS');
                    generador_color.push(dame_color_aleatorio());
                }
            }
            var ctx_trans = document.getElementById('bar-chart_trans').getContext('2d');
            Chart.defaults.global.defaultFontSize = 10;
            new Chart ( ctx_trans,
                { type : 'bar' , data :
                        { labels : labelTransacciones,
                            datasets : [{
                                label : "Total Transacciones: " + totalTransacciones ,
                                backgroundColor : generador_color,
                                borderWidth: 1,
                                data : transacciones,
                                borderSkipped : true

                            }] },
                        options : {

                            responsive: true,
                            legend: {
                                display: true,
                                labels: {
                                    fontColor: 'rgb(255, 99, 132)'
                                },
                                position: 'top'
                            },
                            title :
                                {
                                    display : true , text : 'TOTAL TRANSACCIONES %'
                                }
                        }
                });

            var ctx_monto = document.getElementById('bar-chart_monto').getContext('2d');
            new Chart ( ctx_monto,
                { type : 'bar' , data :
                        { labels : labelMonto,
                            datasets : [{
                                label : "Total Monto: " + montoTotal ,
                                backgroundColor : generador_color,
                                data : monto_sucursal,
                                borderSkipped : true
                            }] },
                    options : {
                        legend: {
                            responsive: true,
                            display: true,
                            labels: {
                                fontColor: 'rgb(255, 99, 132)'
                            },
                            position: 'top'
                        },
                        title : { display : true , text : 'MONTO POR SUCURSAL %'}
                    }
                });
            var url=location.href;
            $('#url1').val(url);
            var columna = 13, columnaBotton = [ 0, 1, 2, 3, 4, 5];
            var table = $('#myTable1').DataTable(
                {
                    fixedHeader: true,
                    "order": [[ 0, "asc" ]],
                    bStateSave: true,
                    columnDefs: [{
                        "searchable": true,
                        "orderable": true,
                        "bSort": true,
                        "targets": 0  // X = the index of your currency column

                    }],
                    order: [[0, 'asc']],
                    dom: 'Bfrtip',
                    pageLength: 50,
                    language: {
                        "processing": "Procesando...",
                        "thousands": ".",
                        "decimal": ",",
                        "lengthMenu": "Mostrar _MENU_ registros",
                        "zeroRecords": "No se encontraron resultados",
                        "emptyTable": "Ningún dato disponible en esta tabla",
                        "info": "Mostrando registros del _START_ al _END_ de un total de _TOTAL_ registros",
                        "infoEmpty": "Mostrando registros del 0 al 0 de un total de 0 registros",
                        "infoFiltered": "(filtrado de un total de _MAX_ registros)",
                        "infoPostFix": "",
                        "search": "Búsqueda:",
                        "url": "",
                        "infoThousands": ",",
                        "loadingRecords": "Cargando...",
                        "paginate": {
                            "first": "Primero",
                            "last": "Último",
                            "next": "Siguiente",
                            "previous": "Anterior"
                        }
                    },
                    buttons: [
                        //'excel'//,'pdfHtml5'
                        {
                            extend: 'excelHtml5', footer: true,
                            text: '<i class="fa fa-file-excel-o"></i>  Excel',
                            title: 'Reporte Pago Por transferencia',
                            titleAttr: 'Excel',
                            exportOptions: {
                                columns: columnaBotton
                            },
                            className: 'btn btn-app btn-sm export excel'
                        },
                        {
                            extend:    'pdfHtml5',
                            text:      '<i class="fa fa-file-pdf-o"></i>  PDF',
                            title:'Reporte Pago Por transferencia',
                            titleAttr: 'PDF',
                            orientation: 'landscape',
                            pageSize: 'LETTER',
                            customize: function(doc) {
                                doc.defaultStyle.fontSize = 8;
                            },
                            exportOptions: {
                                columns: columnaBotton
                            },

                            className: 'btn btn-app-pdf btn-sm export pdf'

                        },
                        {
                            extend:    'print',
                            text:      '<i class="fa fa-print"></i>  Print',
                            title:'Reporte Pago Por transferencia',
                            titleAttr: 'Imprimir',
                            orientation: 'landscape',
                            pageSize: 'LETTER',
                            customize: function ( win ) {
                                $(win.document.body)
                                    .css( 'font-size', '10pt' );


                                $(win.document.body).find( 'table' )
                                    .addClass( 'compact' )
                                    .css( 'font-size', '10pt' );
                            },
                            exportOptions: {
                                columns: columnaBotton
                            },
                            className: 'btn btn-app-print btn-sm export imprimir'
                        }
                    ]
                }).draw();
            $('.dataTables_length').addClass('bs-select');
            document.oncontextmenu = function(){return false;};
        });

        /*function cambiarEncabe(name_thead, name_span){
                $("#_"+name_thead ).click(function() {

                    if ($(".glyphicon-sort-by-alphabet-alt")){
                        console.log('Si');
                        $('#_'+name_span).removeClass('glyphicon-sort-by-alphabet-alt');
                        $('#_'+name_span).addClass('glyphicon-sort-by-alphabet');
                    }else{

                        $('#_'+name_span).addClass('glyphicon-sort-by-alphabet-alt');
                        $('#_'+name_span).removeClass('glyphicon-sort-by-alphabet');
                    }

                });
        }*/
    </script>
@endsection
@section('content')
    <form method="get">
        <input id="consultar" type="hidden"  data-url="{{ route('getConsumirAjax') }}">
        <div class="row">
            <div align="center"><a href="filtros" class="btn btn-default btn-sm"> <span class="glyphicon glyphicon-backward" aria-hidden="true"></span> Regresar</a><br><br></div>
            <div class="col-sm-6 col-xs-6 col-md-6">  <!-- col-md-offset-3 -->
                <div class="col-md-12">
                    <canvas id="bar-chart_trans"></canvas>
                </div>
            </div>
            <div class="col-sm-6 col-xs-6 col-md-6">  <!-- col-md-offset-3 -->
                <div class="col-md-12">
                    <canvas id="bar-chart_monto"></canvas>
                </div>
            </div>
            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xs-offset-0 col-sm-offset-0 col-md-offset-0 col-lg-offset-0 ">
                @php($totalReg = count($requestListPagos['entidadRespuesta']))
                <input type="hidden" id="total_registro" value="{{ $totalReg }}">
                <table id="myTable1" class="table table-hover table-bordenetworking table-responsive tablesorter table-condensed display">
                    @if ($totalReg > 0)
                        <thead>
                            <tr class="bg-primary">
                                <th class="text-center th-md" id="_thead_sucursal" >Sucursal <span id="_span_sucursal" class="glyphicon glyphicon-sort-by-alphabet" aria-hidden="true"></span></th>
                                <th class="text-center th-md" id="_thead_siglas" >Siglas <span id="_span_siglas" class="glyphicon glyphicon-sort-by-alphabet" aria-hidden="true"></span></th>
                                <th class="text-center th-md" id="thead_transacciones">Transacciones <span class="glyphicon glyphicon-sort-by-order" aria-hidden="true"></span> </th>
                                <th class="text-center th-md" id="thead_transacciones_por">Transacción % <span class="glyphicon glyphicon-sort-by-order" aria-hidden="true"></span> </th>
                                <th class="text-center th-md" id="thead_monto_por">Monto % <span class="glyphicon glyphicon-sort-by-order" aria-hidden="true"></span> </th>
                                <th class="text-center th-md" id="thead_total">Total Sucursal BsS. <span class="glyphicon glyphicon-sort-by-order" aria-hidden="true"></span></th>
                            </tr>
                        </thead>
                    @endif
                    <tbody style="font-size: 11px">
                    @php($totalMont = 0)
                    @php($totalTransacciones = 0)
                    @php($count = 0)
                    @foreach($requestListPagos['entidadRespuesta'] as $value)
                        @php($totalMont = $totalMont + $value['total'])
                        @php($totalTransacciones = $totalTransacciones + $value['transacciones'])
                    @endforeach
                    @if(count($requestListPagos['entidadRespuesta']) > 0)
                        @foreach($requestListPagos['entidadRespuesta'] as $value)
                            <tr>
                                <td class="text-left" id="nombre_por_{{$count}}" >{{ $value['nombre'] }}</td>
                                <td class="text-center" id="siglas_por_{{$count}}" >{{ $value['siglas'] }}</td>
                                <td class="text-center" id="detalle_transaccion_{{$count}}">{{ $value['transacciones'] }}</td>
                                <td class="text-center" id="transacciones_por_{{$count}}" >{{  number_format(($value['transacciones'] / $totalTransacciones)*100, 2, ",", "." )    }}</td>
                                <td class="text-center" id="monto_por_{{$count}}"> {{ number_format(($value['total'] / $totalMont)*100, 2, ",", "." ) }}</td>
                                <td class="text-right" id="detalle_monto_{{$count}}"> {{ number_format($value['total'], 2,",","." ) }}</td>
                            </tr>
                            @php($count++)
                        @endforeach
                    @else
                        <h5 class="alert alert-warning" align="center" style="padding:7px;" >No se encontro ning&uacute;n registro. Intente modificar los filtros de b&uacute;squeda. </h5>
                    @endif
                    </tbody>
                    <tfoot>
                        <tr>
                            <th class="text-center"></th>
                            <th class="text-center">Total Transacciones: </th>
                            <th class="text-center" id="total_transacciones">{{ $totalTransacciones }}</th>
                            <th class="text-center"></th>
                            <th class="text-right">Monto Total: </th>
                            <th class="text-right" id="monto_total">{{ @money_format('%.2n',$totalMont) }} </th>
                        </tr>
                    </tfoot>
                </table>
            </div>
        </div>
@endsection