@php use App\Models\profil;
use Carbon\Carbon; @endphp

@extends('base')

@section('content')


<div class="alert alert-success text-center">SUIVI DES TRACABILITES COMPOSITIONS</div>

<div class="row">
    <div class="form-group col-md-2">
        <label for="date_debut">Début:</label>
        <input type="date" class="form-control" style="color:black !important" id="date_debut" value="{{Carbon::now()->format('Y-m-d')}}">
    </div>
    <div class="form-group col-md-2">
        <label for="date_fin">Fin:</label>
        <input type="date" class="form-control" style="color:black !important" id="date_fin" value="{{Carbon::now()->format('Y-m-d')}}">
    </div>



    <div class="col-md-2" >
        <button class="btn btn-success" id="rafraichir" >Rafraichir</button>
    </div>

</div>




<div class="col-md-12 text-center">Nombre de traçabilité(s) : <span class="badge" style="background : #dff0d8; color: #000; font-size: 15px; margin-bottom:0.5%;"> </span></div>
<div class="table-responsive">

<table class="table table-striped table-hover table-bordered" id="table_tracabilite_composition" style="width: 100%;">
        <thead style="background-color:#28a745; color:white">
        <tr>

            <th scope="col" class="text-center">FORMULE</th>
            <th scope="col" class="text-center">APP COMMERCIALE </th>
            <th scope="col" class="text-center">CENTRALE</th>
            <th scope="col" class="text-center">UTILISATEUR</th>
            <th scope="col" class="text-center">DATE</th>
            <th scope="col" class="text-center">HEURE</th>
            <th scope="col" class="text-center">ORIGINE</th>
            <th scope="col" class="text-center">ACTION</th>

        </tr>
  </thead>

</table>

</div>

<script>
    $(function() { // Dom ready
        $('title').text("SUIVI TRACABILITE COMPOSITION - SMART CENTRAL");

        var table = $('#table_tracabilite_composition').DataTable({
        scrollX: true,
        scrollCollapse: true,
        autoWidth: true,
        paging: true,
        processing: false,
        iDisplayLength: '100',
        dom: 'lBfrtip',
        buttons: [
            { "extend": 'excel', "text": 'Export excel', "className": 'btn_export_excel', title: 'Liste de suivi tracabilite composition',"attr": {"style" :"color: rgb(255, 255, 255); background-color: rgb(33, 136, 56);"}}
        ],

        "ajax": {
            "url": "{{url('suivi_tracabilite_composition/table')}}",
            "type": "GET",
            "data": {
                'date_debut': function() { return $('#date_debut').val() },
                'date_fin': function() { return $("#date_fin").val() },



            },

            "dataSrc": function(json) {

                $(".badge").html(json.recordsTotal);

                return json.data;
            },
        },
        
        columnDefs: [
            // { "className": "text-center align-middle modifier th_cursor_pointer font-weight-bold", "targets": [0] },
            // { "className": "text-center align-middle supprimer th_cursor_pointer", "targets": [2] },
            { "className": "text-center align-middle", "targets": "_all" },

        ]
    });

        
        $("#rafraichir").click(function (e){
                e.preventDefault();
                table.ajax.reload(null, false);

            });

        $("#date_debut").change(function (e){
            e.preventDefault();
            $("#rafraichir").click()
        });
        $("#date_fin").change(function (e){
            e.preventDefault();
            $("#rafraichir").click()
        });

});
</script>


@endsection