@extends('layouts.master')

@section('title', 'Publicaciones')

@section('content')

    <div class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-xs-12 col-sm-12 col-md-10 col-lg-10">
                    <h1 class="m-0 text-dark">Metricas <small>Publicaciones</small></h1>
                </div>
                <div class="col-xs-12 col-sm-12 col-md-2 col-lg-2">
                    <button type="button" class="btn btn-secondary btn-block" data-toggle="modal" data-target="#ayudaModal">Ayuda</button>
                </div>
            </div>
        </div>
    </div>

    <section class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-xs-12 col-sm-12 col-md-8 col-lg-8">
                    <div class="card">
                        <div class="card-header no-border">
                            <div class="d-flex justify-content-between">
                                <h3 class="card-title">Publicaciones por estado <small>{{ date('F',strtotime($date)) }}</small></h3>
                            </div>
                        </div>
                        <div class="card-body">
                            @if($publicaciones != null)
                                <div class="card-body">
                                    <div id="publicaciones"></div>
                                </div>
                            @else
                                <div><br><p class="text-center">No Existen Registros</p><br></div>
                            @endif
                        </div>
                    </div>
                </div>
                <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
                    <div class="card">
                        <div class="card-header no-border" style="cursor: move;">
                            <h3 class="card-title">
                                Generar Informe
                            </h3>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1"></div>
                                <div class="col-xs-10 col-sm-10 col-md-10 col-lg-10">
                                    {{ Form::open(['route' => ['administrador.metricas.publicaciones', null], 'method'=>'POST']) }}

                                    {{ Form::label('', "Mes", ['style'=>'font-weight: bold;']) }} *
                                    {{ Form::select('mes', $ddMeses , date('n'), ['required' => 'required', 'class' => 'form-control']) }}
                                    <br>
                                    {{ Form::label('', "Año", ['style'=>'font-weight: bold;']) }} *
                                    {{ Form::select('ano', $ddAnos , date('Y'), ['required' => 'required', 'class' => 'form-control']) }}
                                    <br>
                                    {{ Form::submit('Generar', array('class'=> 'btn btn-success btn-lg btn-block'))}}
                                    {{ Html::linkRoute('administrador.metricas.publicaciones', 'Cancelar', null, array('class' => 'btn btn-danger btn-lg btn-block')) }}
                                    {{ Form::close() }}
                                </div>
                                <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <script src="https://code.highcharts.com/highcharts.js"></script>
    <script src="https://code.highcharts.com/modules/data.js"></script>
    <script src="https://code.highcharts.com/modules/exporting.js"></script>
    <script src="https://code.highcharts.com/modules/export-data.js"></script>
    <script src="https://code.highcharts.com/modules/accessibility.js"></script>
    <script>
if({{count($publicaciones)}}){
    Highcharts.chart('publicaciones', {
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false,
            type: 'pie'
        },
        title: {
            text: ''
        },
        tooltip: {
            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        },
        accessibility: {
            point: {
                valueSuffix: '%'
            }
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    format: '<b>{point.name}</b>: ({point.y}) {point.percentage:.1f} %'
                }
            }
        },

        series: [
            {
                name: 'Porcentaje',
                data: [
                    @foreach ($publicaciones as $key => $publicacion)
                    ['{{ $publicacion->nombre }}', {{ $publicacion->cantidad }}],
                    @endforeach
                ]
            }
        ],
        navigation: {
            buttonOptions: {
                enabled: false
            }
        },
        credits: {
            enabled: false
        },
    });
}

</script>

@endsection

@section('javascript')

@endsection
if({{count($eventos)}}){
    Highcharts.chart('eventos', {
        chart: {
                type: 'bar'
            },
            title: {
                align: 'left',
                text: 'Ultimos 10 Eventos de "El SEXTO"'
            },
            subtitle: {
                align: 'left',
                text: 'Se muestra los porcentaje de cada Evento realizado'
            },
            accessibility: {
                announceNewData: {
                    enabled: true
                }
            },
            xAxis: {
                categories: [
                    @foreach ($eventos as $key => $evento)
                    ['{{ $evento->nombre }}'],
                    @endforeach
                ],
                title: {
                    text: null
                },
                gridLineWidth: 1,
                lineWidth: 0
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'Porcentajes',
                    align: 'high'
                },
                labels: {
                    overflow: 'justify'
                },
                gridLineWidth: 0
            },
            legend: {
                enabled: false
            },
            plotOptions: {
                bar: {
                    borderRadius: '50%',
                    dataLabels: {
                        enabled: true
                    },
                    groupPadding: 0.1
                }
            },

            tooltip: {
                headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
                pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
            },
            series: [
                    {
                        name: 'Eventos',
                        colorByPoint: true,
                        data: [
                            @foreach ($eventos as $key => $evento)
                            ['{{ $evento->nombre }}', {{ $evento->porcentaje }}],
                            @endforeach
                        ]
                    }
                ],
        navigation: {
            buttonOptions: {
                enabled: false
            }
        },
        credits: {
            enabled: false
        },
    });
}