@extends('layouts.layout_stat')

@section('styles')
    {!! Html::style('css/morris.css'); !!}
    {!! Html::style('css/jquery.dataTables.css'); !!}
    <style>
        td.right {
          text-align: right;
        }
        td.center {
          text-align: center;
        }
    </style>
@stop

@section('content')
    <input type="hidden" id="numgraph" name="numgraph" value="{!! (isset($numgraph)?$numgraph:'1') !!}" />
    <div class="col-lg-12">
        <div class="row">
            <div class="col-md-2">
                <h1>Statistiques</h1>
            </div>
        </div>
    </div>

    <div class="col-lg-12 col-lg-offset-2">
        <div class="row">
            <div class="col-lg-10">
                  <ul class="nav nav-tabs">
                    <li class="active"><a href="#"  data-range='G'>Graphique</a></li>
                    <li><a href="#"  data-range='D'>Données</a></li>
                  </ul> 
           </div>
        </div>
    </div>
        
    <div class="col-md-12">
        <div class="row">
            <div class="col-md-2">
                <ul id='nav' class="nav nav-pills nav-stacked" style="font-size:11px">
                  @if($user->HasRole("ADMINISTRATEUR") || $user->can("ANA_ASOC"))
                  <li><a id='graph1' href="#" data-range='1'>Bénéficiaires d'aides sociales</a></li>
                  @endif

                  @if($user->HasRole("ADMINISTRATEUR") || $user->can("ANA_ALL"))
                  <li><a id='graph2' href="#" data-range='2'>Bénéficiaires d'allocations</a></li>
                  @endif

                  @if($user->HasRole("ADMINISTRATEUR") || $user->can("ANA_RET"))
                    <li><a id='graph3' href="#" data-range='3'>Bénéficiaires de retraites</a></li>
                  @endif
                    <hr/>
                  <li></li>
                  <li></li>
                  <li></li>
                  <li></li>
                  <li></li>
                  <li></li>
                  <li></li>
                  <li></li>
                  <li></li>
                </ul>
             </div>

            <div id='div_graph' class="col-md-10">
                <div id="graph" style="height: 350px;"></div>
            </div>

            <div id='div_data'  class="col-md-10">
                <h1></h1>
                <div  id="data_table" class="">
                    <table id="_table" class="display"  cellspacing="0" width="100%"></table>
                </div>
            </div>
        </div>
    </div>
@stop

@section('scripts')
    <!-- Datatable  -->
    {!! Html::script('js/jquery.dataTables.js'); !!}

    {!! Html::script('js/jquery.min.js') !!}

    <!-- Graph  -->
    {!! Html::script('js/raphael-min.js'); !!}
    {!! Html::script('js/morris.min.js'); !!}


    <!-- Datatable  -->
    {!! Html::script('js/jquery.dataTables.js'); !!}
 


    
    <script>
        // Define the area for the spinner
        var spinTarget = document.getElementById('graph');
        var graph_defaut="1"; //N°Graphique par defaut
        if($('#numgraph').val()!="") {graph_defaut=$('#numgraph').val();}
        $('#menu_'+graph_defaut).addClass('active');
        set(graph_defaut);

        var t_api=new Array();
        t_api[1]="api_nb_aidesocales";
        t_api[2]="api_nb_allocations";
        t_api[3]="api_nb_retraites";

        $('ul.nav-tabs a').click(function (e) {
            var el =  $('ul.nav-stacked a');
            var el2 = $(this);
            typechart = el2.attr('data-range');
            el2.parent().addClass('active');
            el2.parent().siblings().removeClass('active');
            
            if($('.nav-stacked li.active a')) numgraph=$('.nav-stacked li.active a').attr('data-range');

            if(typechart=="G") {
                $("#div_graph").show();
                $("#div_data").hide();
            }

            if(typechart=="D") {
                $("#div_graph").hide();
                $("#div_data").show();
            }
            Graph(numgraph);
        })

        $('ul.nav-stacked a').click(function (e) {
            e.preventDefault();
            while (spinTarget.hasChildNodes()){
                spinTarget.removeChild(spinTarget.lastChild);
            }
            var el = $(this);
            el.parent().addClass('active');
            el.parent().siblings().removeClass('active');

            var numgraph="";
            if($('.nav-stacked li.active a')) numgraph=$('.nav-stacked li.active a').attr('data-range');
            Graph(numgraph);
        })

        function set(numgraph) {
            while (spinTarget.hasChildNodes()){
                spinTarget.removeChild(spinTarget.lastChild);
            }
            var el = $('#graph'+numgraph);
            el.parent().addClass('active');
            el.parent().siblings().removeClass('active');
            //Graph(numgraph);
        }

        // Create a function that will handle AJAX requests
        function requestData(numgraph,chart) {
            // Activate the spinner
            //var spinner = new Spinner().spin(spinTarget);
            var api=t_api[numgraph];
            $.ajax({
                type: "GET", dataType: 'json',
                url: "../../"+t_api[numgraph], 
                data: {  } //ex : days: days
            })
                .done(function (data) {
                    if(chart!="") chart.setData(data);
                })
                .fail(function () {
                    alert("error occured");
                })
                .always(function () {
                    //spinner.stop();
                });
        }

        function initData() {
            //Initialisation
            $('#_table').remove();    
            $('#data_table').html('<table width="100%" cellspacing="0" id="_table" class="display"></table>');
        }

        // Graph chargement
        function Graph(numgraph) {
            initData();
            @for($i=1;$i<=$nb_graph;$i++)
            @include('stats.stats_graph_'.$i)
            @endfor
            requestData(numgraph,chart);
        }  

        //Demarrage pagebdefaut
        $("#div_graph").show();
        $("#div_data").hide();
        Graph(graph_defaut);
    </script>


@stop