@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-12">
    <div class="box-inner">
        <div class="box-header well" data-original-title="">
            <h2><i class="glyphicon glyphicon-user"></i>Tableau de recouvrement Annuel</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 id="table" class="table table-striped table-bordered display 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>
                    <tr>
                        <th class="align-middle">Periode</i></th>
                        <th class="align-center">Nombre </th>
                        <th class="align-middle">Montant </th>
                        </tr>
                </thread>
                <tbody>
                    @foreach($paie as $value)
                        <tr>
                            <td class="center">
                                Année {{$value->year}}
                            </td>
                                       
                            <td class="center">
                                {{
                                 $value->nombre
                                }}
                            </td>
                            <td class="center">
                                {{
                                  $value->montantT
                                }}
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </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">
                                        <option></option>
                                        @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></option>
                                        <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>
    
        </div>
    </form>
</div>
@endsection