@extends('layouts.app')
@section('contenu')
@include('layouts.alert')

<div class="col-lg-22">
        <div class="box-inner">
            <div class="box-header well" data-original-title="">
                <h2><i class="glyphicon glyphicon-indent-left"></i> Histogramme des recouvrements Journalier {{$datediff}} </h2>
                <div class="box-icon">
            <a href="#" class="btn btn-minimize btn-round btn-default"><i
                    class="glyphicon glyphicon-chevron-up"></i></a>
            <a href="#" class="btn btn-close btn-round btn-default"><i class="glyphicon glyphicon-remove"></i></a>
        </div>
            </div>
           
            <div class="box-content" id="MyChart" style="width:1200px;height: 700px" ></div>
        </div>
</div>

    <br>

<!--
<a class="btn btn-success" href="{{route('stats.store')}}" type="submit"  data-toggle="modal" data-target="#periode">
                                <i class="glyphicon glyphicon-wrench"></i>
                                Filtrer les statisques
                            </a>-->

<div class="form-group text-left">  
    <a href="{{ url()->previous() }}" class="button btn btn-danger"><i class="glyphicon glyphicon-arrow-left"></i> Retour</a>
&nbsp;&nbsp;&nbsp;
    <button type="button" class="btn btn-success" data-toggle="modal" data-target="#myModal">
        <i class="glyphicon glyphicon-wrench"></i>
        <a href="{{route('stats.store')}}"></a>
                    Filtrer les statisques
    </button>

</div>
<!--Daebut modal-->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
        <form method="POST" action="{{route('stats.store')}}">
            @csrf
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">X</button>
                                                <h3>Choisissez une periode</h3>
            </div>
            <div class="modal-body">
                
                <div class="form-group">
                    <label>Filtre Par Date</label>
                    <div class="nk-int-st">
                        <select name="filtrageType" id="" class="form-control">
                        <option  value=""></option>
                            <option  value="today">Aujourd'hui</option>
                            <option  value="Yesterday">Hier</option>
                            <option value="this_week">Cette Semaine</option>
                            <option  value="lask_week">Semaine Dernière</option>
                            <option  value="this_month">Ce Mois</option>
                            <option  value="last_month">Le Mois Passé</option>
                            <option  value="this_year">Cette Année</option>
                            <option  value="last-year">L'année Passée</option>
                        </select>
                    </div>
                </div>
              
                <div class="form-group">
                    
                    <div class="col-lg-4 ">
                    <label>Date Debut</label>   <input type="date" name="date_de_deb" id="" class="form-control" />
                        
                    </div>
                    <div class="col-lg-4">
                    <label>Date Fin</label>  <input type="date" name="date_de_fin" id="" class="form-control" />
                       
                    </div>
                </div>
                                            

            </div>
                       <br>   <br>   <br>                 
            <div class="modal-footer">
                <a href="#" class="btn btn-danger" data-dismiss="modal">Annuler</a>
                <button  name="filtreStats" type="submit" id="filtreStats" value="filtreStats" class="btn btn-success"><a href="{{route('stats.store')}}"></a>Filtrer</button>
            </div>
        </div>
</form>
    </div>
</div>
            
                        <!-- Fin bouton modal-->

    <!--
    <div class="box-content">
        <form role="form" id='form1' method="POST" action="">
            @csrf
            <input class="form-control" id="geoloc" name="geoloc" type="hidden" value="">
            <div class="col-md-11 col-form-label text-md-right">
               <input type="text" name="query" placeholder="recherche" class="form-control">
            </div>
            <div class="col-md-1">
                <button  name="valider" type="submit" id="chercher" value="chercher" class="btn btn-default">Valider</button>
            </div>
        </form><br><br> -->
@endsection
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">

     google.charts.load('current', {'packages':['bar']}); 
     //dessin histogramme pour le nombre de recouvrement par agent
    google.charts.setOnLoadCallback(drawChartNombre);

    //dessin hitogramme pour le montant du recouvrement par date
    google.charts.setOnLoadCallback(drawChartMontant);

    //appel de fonction pour l'histogramme par nombre
    function drawChartNombre()
    {
        //initialisation des données pour nombre
            var data = google.visualization.arrayToDataTable([
                ['Date', 'Nombre Recouvré','Montant Recouvré'],

                //on boucle sur les societes
                @foreach($jours as $value)
                //initialisation des données
                ["{{$value->DATE_CAL }}",{{$value->nombre}},{{$value->somme}}],
                @endforeach
            ]);

            //initialisation des options
            var options = {
                chart: {
                    title: 'Performances Recouvrement',
                    subtitle: 'Date, Nombre de recouvrement,Montant recouvré',
                },
                series: {
            0: { axis: 'Montant' },
            1: { axis: 'nombre' } 
          },
                bar: { groupWidth: "85%" },
                bars: 'vertical',
                axes: {
            y: {
                Montant: {label: 'Nombre de recouvrement'}, // ordonnée gauche
                nombre: {side: 'right', label: 'Montant Recouvré'} // ordonnée droite.
            }
          }
               
            }
            //dessin du graphique
            var chart = new google.charts.Bar(document.getElementById('MyChart'));
            chart.draw(data, google.charts.Bar.convertOptions(options));
    }

</script>