@include('layouts.breadcumb')

<div class="row">

    <div class="panel panel-warning panel-border " data-collapsed="0">
        <!-- panel head -->
        <div class="panel-heading">


        </div>
            <div class="panel-body">


                <form class="form-inline" method="get" role="form" enctype="multipart/form-data" class="validate">
                    <div class="col-md-4">
                        Fecha
                        <div class="input-group">
                            <input readonly type="text" name="fecha_rango" id="fecha_rango" value="{{ Input::get('fecha_rango') }}" class="form-control input-lg" /><span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <br>
                        <button onclick="showMessage('CARGANDO VISITAS, ESPERE POR FAVOR ')" type="submit" id="VerInformesButton" class="btn btn-rounded waves-effect waves-light btn-warning btn-lg ">Ver Informe<i class="entypo-search"></i></button>
                    </div>
                    <div class="clearfix"></div>
                    <br>
                </form>
                <div class="clearfix"></div>
                <!-- Nav tabs -->

                <ul class="nav nav-tabs" role="tablist">
                    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">CATEGORIAS</a></li>
                    <li role="presentation" ><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">REGIONALES</a></li>

                </ul>


                <!-- Tab panes -->
                @if(Input::get('fecha_rango'))
                <div class="tab-content">
                    <div role="tabpanel" class="tab-pane fade in active" id="home">
                        <div id="graph-1" style="min-width: 100%; height: 600px; margin: 0 auto"></div>
                        <hr />
                    </div>
                    <div role="tabpanel" class="tab-pane fade in" id="profile">
                        <div id="graph-2" style="width: 100%; height: 600px; margin: 0 auto"></div>
                    </div>
                </div>
                @endif

            </div>
        </div>

    </div>

</div>

<div class="clearfix"></div>

@section('header')
    <style>
        /* bootstrap hack: fix content width inside hidden tabs */
        .tab-content > .tab-pane,
        .pill-content > .pill-pane {
            display: block;     /* undo display:none          */
            height: 0;          /* height:0 is also invisible */
            overflow-y: hidden; /* no-overflow                */
        }
        .tab-content > .active,
        .pill-content > .active {
            height: auto;       /* let the content decide it  */
        } /* bootstrap hack end */
    </style>
@stop

@section('footer')
    <script src="https://code.highcharts.com/highcharts.js"></script>
    <script src="https://code.highcharts.com/modules/exporting.js"></script>
    <script>



        $(function () {
            Highcharts.setOptions({
                lang: {
                    decimalPoint: ',',
                    thousandsSep: '.'
                }
            });

            $('#graph-1').highcharts({
                chart: {
                    type: 'column',
                    zoomType: 'xy'

                },
                title: {
                    text: 'ANÁLISIS DE VISITAS "CATEGORIAS"'
                },
                colors: [
                    '#FFA4A4'
                ],
                xAxis: {
                    categories: {!!   json_encode($categoriasNames) !!},
                    crosshair: true
                },
                yAxis: {
                    min: 0,
                },
                tooltip: {
                    headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                    pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                    '<td style="padding:0"><b>{point.y:,.0f} </b></td></tr>',
                    footerFormat: '</table>',
                    shared: true,
                    useHTML: true,
                    crosshairs: [true,true]
                },
                plotOptions: {
                    column: {
                        pointPadding: 0.2,
                        borderWidth: 0,
                        dataLabels: {
                            enabled: true
                        }
                    }
                },
                series: [{
                    name: 'VISITAS',
                    data: {!!   json_encode($categoriasValues) !!}

                }]
            });

            $('#graph-2').highcharts({
                chart: {
                    type: 'column',
                    zoomType: 'xy'
                },
                title: {
                    text: 'ANÁLISIS DE VISITAS "REGIONALES"'
                },
                colors: [
                    '#9b9b9b'
                ],
                xAxis: {
                    categories: {!!   json_encode($regionalesNames) !!},
                    crosshair: true
                },
                yAxis: {
                    min: 0,
                },
                tooltip: {
                    headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                    pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                    '<td style="padding:0"><b>{point.y:,.0f} </b></td></tr>',
                    footerFormat: '</table>',
                    shared: true,
                    useHTML: true,
                    crosshairs: [true,true]
                },
                plotOptions: {
                    column: {
                        pointPadding: 0.2,
                        borderWidth: 0,
                        dataLabels: {
                            enabled: true
                        }
                    }
                },
                series: [{
                    name: 'VISITAS',
                    data: {!!   json_encode($regionalesValues) !!}

                }]
            });

        });



    </script>

    <script>
        $('#fecha_rango').daterangepicker(
                {
                    ranges: {
                        'Ayer': [moment().subtract('days', 1), moment().subtract('days', 1)],
                        'Últimos 7 días': [moment().subtract('days', 6), moment()],
                        'Últimos 15 días': [moment().subtract('days', 14), moment()],
                        'Últimos 30 días': [moment().subtract('month', 1), moment()],
                        'Mes actual': [moment().startOf('month'), moment().endOf('month')],
                        'Mes anterior': [moment().subtract('month', 1).startOf('month'), moment().subtract('month', 1).endOf('month')],
                        'Ultimos 3 meses': [moment().subtract('month', 3), moment()],
                        'Ultimos 6 meses': [moment().subtract('month', 6), moment()],
                        'Año actual': [moment().startOf('year'), moment()]

                    },

                    locale: {
                        endDate: moment(),
                        format: 'YYYY-MM-DD',
                        separator: ' | ',
                        applyLabel: 'Aplicar',
                        cancelLabel: 'Cancelar',
                        fromLabel: 'Desde',
                        toLabel: 'Hasta',
                        weekLabel: 'S',
                        customRangeLabel: 'Otro Rango'
                    }
                }
        );
    </script>
@stop