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


<div class="row">
    @if(session()->has('message'))
    <div class="alert alert-success">
        <button type="button" class="close" data-dismiss="alert">&times;</button>
        <strong></strong> {{ session()->get('message') }}.
    </div>
 
@endif

<div class="box col-md-16">
    <div class="box-inner">
    <div class="box-header well" data-original-title="">
        <h2><i class="glyphicon glyphicon-user"></i>Tableau de recouvrement Par Periode</h2>

        <div class="box-icon">
            <a href="#" class="btn btn-setting btn-round btn-default"><i class="glyphicon glyphicon-cog"></i></a>
            <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">
    
    
    <form  method="POST" action="{{ route('stats.store') }}">
        @csrf
        
    <table class="table table-striped table-bordered bootstrap-datatable datatable responsive">
        <div class="container">
            <div class="row">
                <div class="container-fluid">
                    <div class="form-group row">
                        <!--Div de filtrage en ligne-->
                       
                    
                    <div class="form-group row">
                        
                        <label for="date" class="col-form-label col-sm-1">Datedebut</label>
                        <div class="col-sm-2">
                            <input type="date" class="form-control input-sm" id="" name="datededebut">
                        </div>
                        <label for="date" class="col-form-label col-sm-1">DateFin</label>
                        <div class="col-sm-2"> 
                            <input type="date" class="form-control input-sm" id="" name="datedefin">
                        </div>
                        <div class="col-sm-1">
                         <button name="Periode" type="submit" id="Periode" value="Periode" class="btn btn-danger">Soumettre</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
            
        
        <thead class="table-dark">
                                    <tr>
                                        <!--faire un if pour verifer s'il s'agit du mois; de la semaine ou du jours-->
                                       
                                        <th class="align-middle">Periode</i></th>
                                        <th class="align-center">Nombre </th>
                                        <th class="align-middle">Montant </th>
                                       <!-- <th>Mois</th> -->
                                       <!-- <th>Jour</th> -->
                                    </tr>
                                </thread>
                                <tbody>
                                @foreach($paie as $jour)
                                    <tr>
                                        <td class="center">
                                                {{$jour->DATE_CAL}}
                                        </td>
                                       
                                        <td class="center">
                                                {{
                                                   $jour->nombre
                                                }}
                                        </td>
                                        <td class="center">
                                                {{
                                                    $jour->montantT
                                                }}
                                        </td>
                                        
                                    </tr>
                                    @endforeach
                                    
                            </table>
                            <a class="btn btn-info" type="submit" class="btn btn-primary" data-toggle="modal" data-target="#periode">
                                <i class="glyphicon glyphicon-filter"></i>
                                           Filtrer Par Periode
                            </a>
                            
                            <button class="btn btn-primary" name="stats" id="stats" value="stats">
                            <i class="glyphicon glyphicon-file"></i> 
                            Afficher les statisque Par Periode
                        </button>
                        <!-- button modal-->
                                <!-- a modifier demain -->
            
                                <div class="modal fade" id="periode" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                                <div class="modal-dialog">
                                    <div class="modal-content">
                                        <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>Année</label>
                                                <div class="nk-int-st">
                                                    <select name="Annee" id="" class="form-control">
                                                        @for($i=2022; $i<=2030; $i++)
                                                        <option value="{{$i}}">{{$i}}</option>
                                                        @endfor
                                                    </select>
                                                </div>
                                            </div>
                                            
                                            <div class="form-group">
                                            <label>Periodicite</label>
                                                    <div class="nk-int-st">
                                                        <select name="MS" id="" class="form-control">
                                                        
                                                            <option value="month">Mois</option>
                                                            <option value="week">Semaine</option>
                                                            <option value="day">Jour</option>
                                                        </select>
                                                    </div>
                                                </div>
                                        </div>
                                        
                                        <div class="modal-footer">
                                                <a href="#" class="btn btn-danger" data-dismiss="modal">Annuler</a>
                                                <button  name="FiltreParAnnee" type="submit" id="FiltreParAnnee" value="Filtrer" class="btn btn-success">Filtrer</button>
                                        </div>
                                    </div>
                                </div>
                                </div>
            
                        <!-- Fin bouton modal-->
                        <!--
                        <div class="modal fade" id="PeriodeM" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                                <div class="modal-dialog">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                                <button type="button" class="close" data-dismiss="modal">X</button>
                                                <h3>Bilan Mensuel</h3>
                                        </div>
                                        <div class="modal-body">
                                            <div class="form-group">
                                                <label>Année</label>
                                                <div class="nk-int-st">
                                                    <select name="Annee" id="" class="form-control">
                                                    <option></option>
                                                        @for($i=2022; $i<=2030; $i++)
                                                        <option value="{{$i}}">{{$i}}</option>
                                                        @endfor
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                            <div class="nk-int-st">
                                                <label>Mois</label>
                                                    <select name="mois" id="" class="form-control">
                                                        <option></option>
                                                        <option value="1">Janvier</option>
                                                    <option value="2">Fevrier</option>
                                                    <option value="3">Mars</option>
                                                    <option value="4">Avril</option>
                                                    <option value="5">Mai</option>
                                                    <option value="6">Juin</option>
                                                    <option value="7">Juillet</option>
                                                    <option value="8">Août</option>
                                                    <option value="9">Septembre</option>
                                                    <option value="10">Octobre</option>
                                                    <option value="11">Novembre</option>
                                                    <option value="12">Decembre</option>
                                                    </select>
                                            </div>
                                            </div>
                                        <div class="modal-footer">
                                                <a href="#" class="btn btn-danger" data-dismiss="modal">Annuler</a>
                                                <button  name="Filtrer" type="submit" id="Filtrer" value="Filtrer" class="btn btn-success">Filtrer</button>
                                        </div>
                                    </div>
                                </div>
                                </div>
                        Fin du modal mensuel-->
                        </div>    
                        <!--/span-->
                    </form>
                </div>
             </div>
</div>
@endsection