@extends('layouts.admin')

@section('css')
@parent
    <!-- Select Plugin Js -->
    {!! Html::style('adminbsb_plugins/bootstrap-select/css/bootstrap-select.min.css') !!}
    
    {!! Html::style('css/jquery-ui.1.12.1.min.css') !!} 
    {!! Html::style('css/jquery-ui.theme.min.css') !!} 
@stop

@section('content')

<div class="block-header">
	<h2><i class="material-icons">pie_chart</i> Statistiques Web</h2>
</div>

<div class="row clearfix">
    <div class="col-xs-12">
      {!! Form::open(array('class' => 'form-horizontal')) !!}
      <div class="card">
        <div class="header">
          <h2>
            <p>Nombre de visites par jour</p>
          </h2>
        </div>
        <div class="body">
          <div class="row clearfix">
              <div class="col-xs-5 col-sm-4 col-md-2 form-control-label">
                  <label>Période</label>
              </div>
              <div class="col-xs-7 col-sm-8 col-md-10 m-t-5">
                  <div class="form-group">
                    Du {!! Form::text('debut', old('debut'), array("class"=> "form-control datepicker date_stat")) !!} au  {!! Form::text('fin', old('fin'), array("class"=> "form-control datepicker")) !!} <button type="submit" class="btn bg-teal waves-effect">Recharger</button>
                  </div>
              </div>
          </div>
          <div class="row clearfix">
            <canvas id="line_chart" height="90"></canvas>
          </div>
        </div>
      </div>
      {!! Form::close() !!}
    </div>  
    
    <div class="col-xs-12">  
      <div class="card">
      <div class="row clearfix">
      
        <div class="col-xs-12 col-sm-6"> 
          <div class="header">
            <h2>
              <p>Détails</p>
            </h2>
          </div>
          <div class="body table-responsive">
            <table class="table table-striped">
                <thead>
                    <tr>
                        <th>Élément</th>
                        <th>Valeur</th>
                    </tr>
                </thead>
                <tbody class="table_data">
                    <tr>
                    	<td>Visites</td>
                    	<td>{{ $visits }}</td>
                    </tr>
                    <tr>
                    	<td>Visiteurs uniques</td>
                    	<td>{{ $visitors }}</td>
                    </tr>
                    <tr>
                    	<td>Pages vues</td>
                    	<td>{{ $pageviews }}</td>
                    </tr>
                    <tr>
                    	<td>Pages par visite</td>
                    	<td>{{ number_format($pageviewsPerVisit, 2) }}</td>
                    </tr>
                    <tr>
                    	<td>Temps moyen passé sur le site</td>
                    	<td>{{ date("H:i:s", mktime(0, 0, 0) + $avgTimeOnSite) }}</td>
                    </tr>
                    <tr>
                    	<td>Taux de rebond</td>
                    	<td>{{ number_format($entranceBounceRate, 2) }}</td>
                    </tr>
                    <tr>
                    	<td>Nouvelles visites (en %)</td>
                    	<td>{{ number_format($percentNewVisits, 2) }} %</td>
                    </tr>
                </tbody>
              </table>
           </div>
        </div>
        
        <div class="col-xs-12 col-sm-6">        
          <div class="header">
            <h2>
              <p>Répartition des visites par visiteurs</p>
            </h2>
          </div>
          <div class="body">
            <div class="row clearfix">
              <canvas id="pie_chart" height="120"></canvas>
              <!--<div id="visits" style="height: 500px;"></div>-->
            </div>
          </div>
      </div>
        
      </div>
      </div>
    </div>

    <div class="col-xs-12">   
      <div class="card">
          <div class="header">
            <h2>
              <p>Données</p>
            </h2>
          </div>
          <div class="body">
            <div class="row clearfix">
                <div class="col-xs-5 col-sm-4 col-md-2 form-control-label">
                    <label>Choix des données</label>
                </div>
                <div class="col-xs-7 col-sm-4">                        
                    <select onchange="updateData(this.value);" class="form-control show-tick">                          
                          <optgroup label="Données démographiques">
                              <option value="langue" selected="selected">Langue</option>
                              <option value="pays">Pays/Territoire</option>
                              <option value="ville">Ville</option>            
                          </optgroup>
                          <optgroup label="Système">
                              <option value="browser">Navigateur</option>
                              <option value="os">Système d'exploitation</option>
                              <option value="fai">Fournisseur de services</option>
                          </optgroup>
                          <optgroup label="Mot-clés">
                          	<option value="keyword">Mot-clés</option>
                          </optgroup> 
                      </select>   
                </div>
            </div>

           {!! Form::open() !!}
                                 

            <div class="row clearfix">
              <div class="table-responsive data_stat" id="langue">
                  <table class="table table-striped" id="table_menu">
                      <thead>
                          <tr>
                              <th>Langue</th>
                              <th>Visites</th>
                              <th>% Visites</th>
                          </tr>
                      </thead>
                      <tbody class="table_data">
                        @foreach ($langues as $langue)
                          <tr>
                              <td>{{ $langue['label'] }}</td>
                              <td>{{ $langue['value'] }}</td>
                              <td>{{ number_format(($langue['value'] / $visits) * 100, 2) }}</td>
                          </tr>
                        @endforeach 
                      </tbody>
                  </table>
              </div>
            </div>
            
            <div class="row clearfix">
              <div class="table-responsive data_stat" style="display: none;" id="pays">
                  <table class="table table-striped" id="table_menu">
                      <thead>
                          <tr>
                              <th>Pays/Territoire</th>
                              <th>Visites</th>
                              <th>% Visites</th>
                          </tr>
                      </thead>
                      <tbody class="table_data">
                        @foreach ($country as $pays)
                          <tr>
                              <td>{{ $pays['label'] }}</td>
                              <td>{{ $pays['value'] }}</td>
                              <td>{{ number_format(($pays['value'] / $visits) * 100, 2) }}</td>
                          </tr>
                        @endforeach 
                      </tbody>
                  </table>
              </div>
            </div>
            
            <div class="row clearfix">
              <div class="table-responsive data_stat" style="display: none;" id="ville">
                  <table class="table table-striped" id="table_menu">
                      <thead>
                          <tr>
                              <th>Ville</th>
                              <th>Visites</th>
                              <th>% Visites</th>
                          </tr>
                      </thead>
                      <tbody class="table_data">
                        @foreach ($villes as $ville)
                          <tr>
                              <td>{{ $ville['label'] }}</td>
                              <td>{{ $ville['value'] }}</td>
                              <td>{{ number_format(($ville['value'] / $visits) * 100, 2) }}</td>
                          </tr>
                        @endforeach 
                      </tbody>
                  </table>
              </div>
            </div>
            
            <div class="row clearfix">
              <div class="table-responsive data_stat" style="display: none;" id="browser">
                  <table class="table table-striped" id="table_menu">
                      <thead>
                          <tr>
                              <th>Navigateur</th>
                              <th>Visites</th>
                              <th>% Visites</th>
                          </tr>
                      </thead>
                      <tbody class="table_data">
                        @foreach ($browsers as $browser)
                          <tr>
                              <td>{{ $browser['label'] }}</td>
                              <td>{{ $browser['value'] }}</td>
                              <td>{{ number_format(($browser['value'] / $visits) * 100, 2) }}</td>
                          </tr>
                        @endforeach 
                      </tbody>
                  </table>
              </div>
            </div>
            
            <div class="row clearfix">
              <div class="table-responsive data_stat" style="display: none;" id="os">
                  <table class="table table-striped" id="table_menu">
                      <thead>
                          <tr>
                              <th>Système d'exploitation</th>
                              <th>Visites</th>
                              <th>% Visites</th>
                          </tr>
                      </thead>
                      <tbody class="table_data">
                        @foreach ($operatingSystems as $os)
                          <tr>
                              <td>{{ $os['label'] }}</td>
                              <td>{{ $os['value'] }}</td>
                              <td>{{ number_format(($os['value'] / $visits) * 100, 2) }}</td>
                          </tr>
                        @endforeach 
                      </tbody>
                  </table>
              </div>
            </div>
            
            <div class="row clearfix">
              <div class="table-responsive data_stat" style="display: none;" id="fai">
                  <table class="table table-striped" id="table_menu">
                      <thead>
                          <tr>
                              <th>Fournisseur de services</th>
                              <th>Visites</th>
                              <th>% Visites</th>
                          </tr>
                      </thead>
                      <tbody class="table_data">
                        @foreach ($networkLocations as $fai)
                          <tr>
                              <td>{{ $fai['label'] }}</td>
                              <td>{{ $fai['value'] }}</td>
                              <td>{{ number_format(($fai['value'] / $visits) * 100, 2) }}</td>
                          </tr>
                        @endforeach 
                      </tbody>
                  </table>
              </div>
            </div>
            
            <div class="row clearfix">
              <div class="table-responsive data_stat" style="display: none;" id="keyword">
                  <table class="table table-striped" id="table_menu">
                      <thead>
                          <tr>
                              <th>Mot-clés</th>
                              <th>Visites</th>
                              <th>% Visites</th>
                          </tr>
                      </thead>
                      <tbody class="table_data">
                        @foreach ($keywords as $keyword)
                          <tr>
                              <td>{{ $keyword['label'] }}</td>
                              <td>{{ $keyword['value'] }}</td>
                              <td>{{ number_format(($keyword['value'] / $visits) * 100, 2) }}</td>
                          </tr>
                        @endforeach 
                      </tbody>
                  </table>
              </div>
            </div>
            {!! Form::close() !!}
          
          </div>  
            
      </div>
      
    </div>
</div>


@stop

@section('js')
    @parent
    
    <!-- Select Plugin Js -->
    {!! Html::script("adminbsb_plugins/bootstrap-select/js/bootstrap-select.min.js") !!}
    
    {!! Html::script("https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js") !!}
    {!! Html::script("js/datepicker.js") !!}
    {!! Html::script("js/jquery.ui.datepicker-fr.js") !!}
    
    <!-- Chart Plugins Js -->
    {!! Html::script("adminbsb_plugins/chartjs/Chart.bundle.min.js") !!}
    
    <script type="text/javascript">
        $(document).ready(function() {
            $( "input.datepicker" ).dp({
                dateFormat: 'DD dd MM yy',
                altFormat: 'yy-mm-dd'
            });
        });
        
        $(function () {
            new Chart(document.getElementById("line_chart").getContext("2d"), getChartJs('line'));
            new Chart(document.getElementById("pie_chart").getContext("2d"), getChartJs('pie')); 
        });
        
        function getChartJs(type) {
            var config = null;
        
            if (type === 'line') {
                config = {
                    type: 'line',
                    data: {
                        labels: [<br />
<b>Warning</b>:  Invalid argument supplied for foreach() in <b>/home/trutinauto/public_html/resources/views/admin/statistics.blade.php</b> on line <b>355</b><br />
],
                        datasets: [{
                            label: "Visites par jour",
                            data: [
                                <br />
<b>Warning</b>:  Invalid argument supplied for foreach() in <b>/home/trutinauto/public_html/resources/views/admin/statistics.blade.php</b> on line <b>361</b><br />
                            ],

                            borderColor: 'rgba(0, 188, 212, 0.75)',
                            backgroundColor: 'rgba(0, 188, 212, 0.3)',
                            pointBorderColor: 'rgba(0, 188, 212, 0)',
                            pointBackgroundColor: 'rgba(0, 188, 212, 0.9)',
                            pointBorderWidth: 1
                        }]
                    },
                    options: {
                        responsive: true,
                        legend: false
                    }
                }
            }
           
            else if (type === 'pie') {
                config = {
                    type: 'pie',
                    data: {
                        datasets: [{
                            data: [0.00, 100.00],
                            backgroundColor: [
                                "rgb(233, 30, 99)",
                                "rgb(255, 193, 7)",
                                "rgb(0, 188, 212)",
                                "rgb(139, 195, 74)"
                            ],
                        }],
                        labels: [
                            "% nouveaux visiteurs ",
                            "% visiteurs connus "
                        ]
                    },
                    options: {
                        responsive: true,
                        legend: false
                   }
                }
            }  
            return config;
        }
        
        

        
        function updateData(id){
            $('.data_stat').each(function(index){
                $(this).hide('slow');
            });
            $('#'+ id).show('slow');
        }
    </script>
@stop