@php
    use App\fonctions\definir_date_selection_fonction;
    use App\Models\parametre;
    $parametre=parametre::first();
    $dates=(new definir_date_selection_fonction())->definir_date_selection($parametre->parametre_date_grille_detail);
@endphp


<div class="form-row">
    <div class="form-group col-md-6">
        <label for="date_debut_reglement">Début</label>
        <input type="date" class="form-control" id="date_debut_reglement_fiche_annexe" value="{{$dates['debut']}}">
    </div>
    <div class="form-group col-md-6">
        <label for="date_fin_reglement">Fin</label>
        <input type="date" class="form-control" id="date_fin_reglement_fiche_annexe" value="{{$dates['fin']}}">
    </div>

</div>
<div class="table-responsive" style="overflow-y: auto;height: 45vh;"><!--table reglement-->
    <table class="table table-hover table-sm table-bordered " style="width:100%;" id="table_reglement_fiche_annexe">
        <thead style="background-color:#28a745; color:white">
        <th scope="col" class="text-center">CODE</th>
        <th scope="col" class="text-center">SOCIETE</th>
        <th scope="col" class="text-center">LIBELLE</th>
        <th scope="col" class="text-center">MONTANT</th>
        <th scope="col" class="text-center">DATE</th>
        <th scope="col" class="text-center">ECHEANCE</th>
        <th scope="col" class="text-center">PIECE</th>


        </thead>
    </table>

</div><!-- fin table reglement-->
<script>
    $(function () { // Dom ready
        //////data table formule

        var table_reglement_fiche_annexe = $('#table_reglement_fiche_annexe').DataTable({


            autoWidth: true,
            paging: true,
            searching: true,
            scrollCollapse: true,

            "ajax": {
                "url": "{{route('reglement.data_table_reglement_fiche_annexe')}}",
                "type": "GET",

                "data": {
                    'type_fiche_annexe': '{{$type_fiche_annexe}}',
                    'id_fiche_annexe': '{{$id_fiche_annexe}}',
                    'date_debut': function () {
                        return $("#date_debut_reglement_fiche_annexe").val()
                    },
                    'date_fin': function () {
                        return $("#date_fin_reglement_fiche_annexe").val()
                    },

                },

            },


            columnDefs: [

                {"className": "text-center align-middle ", "targets": "_all"},
                // { "width": "500px", "targets": [0] }

            ]
        });

        $("#date_debut_reglement_fiche_annexe").change(function() {
            table_reglement_fiche_annexe.ajax.reload(null, false);
        });
        $("#date_fin_reglement_fiche_annexe").change(function() {
            table_reglement_fiche_annexe.ajax.reload(null, false);
        });


    });//Fin dom ready
</script>