@extends('templates.template')
@push('page-title')
<h2>Painel Administrativo</h2>
<p>Gerencie todas as suas informações</p>
@endpush
@section('content')
<div class="row">
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">

    </div>
</div>

<div class="row">
    <div class="col-md-3">
        <a href="{{ url(route('matriculas.index')) }}" class="tile-box tile-box-shortcut btn-info">
            <span class="bs-badge badge-absolute">
                {{ count($quantAlunos) }}
            </span>
            <div class="tile-header">Alunos Matriculados</div>
            <div class="tile-content-wrapper">
                <i class="fa fa-male glyph-icon"></i>
            </div>
        </a>
    </div>
    <div class="col-md-3">
        <a href="{{ url(route('turmas.index')) }}" class="tile-box tile-box-shortcut btn-success">
            <span class="bs-badge badge-absolute">
                {{ count($quantTurmas) }}
            </span>
            <div class="tile-header">Turmas</div>
            <div class="tile-content-wrapper">
                <i class="fa fa-inbox glyph-icon"></i>
            </div>
        </a>
    </div>
    <div class="col-md-3">
        <a href="{{ route('responsavel') }}" class="tile-box tile-box-shortcut btn-warning">
            <span class="bs-badge badge-absolute">
                {{ count($responsaveis) }}
            </span>
            <div class="tile-header">Responsáveis</div>
            <div class="tile-content-wrapper">
                <i class="fa fa-low-vision glyph-icon"></i>
            </div>
        </a>
    </div>
    <div class="col-md-3">
        <a  href="{{ route('configuracao.franquias')}}" class="tile-box tile-box-shortcut btn-default">
            <span class="bs-badge badge-absolute">-</span>
            <div class="tile-header">Configurações</div>
            <div class="tile-content-wrapper">
                <i class="fa fa-cogs glyph-icon"></i>
            </div>
        </a>
    </div>
</div>

<!-- charts begin -->
<div class="row">
    <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
        <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                <div class="panel panel-success">
                    <div class="panel-body">
                        <h3 class="title-hero">Matrículas Manhã<i class="glyphicon glyphicon-tag pull-right"></i></h3>
                        <div class="example-box-wrapper clearfix">
                        <h2 class="text-center">{{ count($quantAlunosManha) }}</h2>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                <div class="panel panel-success">
                    <div class="panel-body">
                        <h3 class="title-hero">Matrículas Tarde<i class="glyphicon glyphicon-tag pull-right"></i></h3>
                        <div class="example-box-wrapper clearfix">
                        <h2 class="text-center">{{ count($quantAlunosTarde) }}</h2>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                <div class="panel panel-success panelPeriodo">
                    <div class="panel-body">
                        <h3 class="title-hero">Período <i class="fa fa-wrench pull-right" aria-hidden="true"></i></h3>
                        <div class="example-box-wrapper clearfix">
                            <div class="row">
                                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 text-center">
                                    <h1 class="anoescolhido"><span class="label label-default">{{ $ano['descricao'] }}</span></h1>
                                </div>
                            </div>
                            <hr>
                            <div class="row">
                                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                                    {!! Form::open(['route' => 'configuracao.escolheano', 'class'=>"form-inline escolherAno"]) !!}
                                            <div class="form-group">
                                                {!! Form::label('Escolha um Ano: ') !!}
                                                {!! Form::select('ano_id', $anos, '', ['id' => 'anos', 'class' => 'form-control']) !!}
                                            </div>
                                        <button type="submit" class="btn btn-success">OK</button>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-xs-12 col-sm-8 col-md-8 col-lg-8">
        <div class="panel panel-success">
            <div class="panel-body">
                <div class="example-box-wrapper clearfix">
                    <canvas id="placeholder">
                    </canvas>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
<!-- charts end -->

</div>
</div>
@endsection

@section('styles')
{!! HTML::style('bower_components/css/mouldifi-core.css') !!}
{!! HTML::style(App::make('_.url').'/github/jquery-hemi-intro/src/jquery.hemiIntro.css') !!}
<style type="text/css">
    .popover {
        color: #000;
        background: #FFF;
    }
</style>
@endsection

@push('scripts')

{!! HTML::script(App::make('_.url').'/bower_components/Chart.js/dist/Chart.min.js') !!}
{!! HTML::script(App::make('_.url').'/github/jquery-hemi-intro/src/jquery.hemiIntro.js') !!}

<script type="text/javascript">

    $(document).ready(function(){
        var _labelsTurmas = [];
        var _quantAlunos = [];
        $.getJSON('{{ App::make('_.url') }}/charts/turmas', function(data){
            $.each(data, function(index, value){
                _labelsTurmas[index] = (value.turma)
                _quantAlunos.push(value.aluno)
            })
            var ctx = $('#placeholder');
            var myChart = new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: _labelsTurmas,
                    datasets: [{
                        label: 'Alunos p/ Turmas',
                        data: _quantAlunos
                    }]
                },
                options: {
                    scales: {
                        yAxes: [{
                            ticks: {
                                beginAtZero:true
                            }
                        }]
                    }
                }
            })
        })
    })


    {{-- */$info="['Turma', 'Alunos'],";/* --}}
    @foreach($turmas as $turma)
    {{-- */$info .= "['" . $turma->descricao ."',". count($turma->matriculas) . '],';/* --}}
    @endforeach

    // $(function () {
    //     var intro = $.hemiIntro({
    //         steps: [
    //             {
    //                 selector: ".panelPeriodo",
    //                 placement: "bottom",
    //                 content: "Atualize o ano para o sistema apresentar os resultados.",
    //             }
    //         ]
    //     });
    //     intro.start();
    // });
</script>

@endpush