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

@extends('base')

@section('content')


<div class="alert alert-success text-center">SUIVI DES TRACABILITES</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-3">
        <label for="recherche" id="label_rechercher_action">Action :</label>
        <select type="text" class="form-control" id="recherche_action"  placeholder="recherche action">
            <option value="">TOUTES</option>
            @foreach($actions as $action)
            
                <option >{{$action->tracabilite_action}}</option>
            @endforeach

        </select>
    </div>
    <div class="col-md-3">
        <label for="recherche" id="label_rechercher_feuille">Feuille :</label>
        <select type="text" class="form-control" id="recherche_feuille"  placeholder="recherche feuille">
            <option value="">TOUTES</option>
            @foreach($feuilles as $feuille)
                <option >{{$feuille->tracabilite_feuille}}</option>
            @endforeach



        </select>
    </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" style="width: 100%;">
  <thead style="background-color:#28a745; color:white">
    <tr>
      <th scope="col" class="text-center">DATE</th>
      <th scope="col" class="text-center">HEURE</th>
      <th scope="col" class="text-center">UTILISATEUR</th>
      <th scope="col" class="text-center">FEUILLE</th>
      <th scope="col" class="text-center">ENREGISTREMENT</th>
      <th scope="col" class="text-center">ACTION</th>
      <th scope="col" class="text-center">DATE REELLE</th>
      <th scope="col" class="text-center">HEURE REELLE</th>
      <th scope="col" class="text-center">COMPTEUR</th>

   </tr>
  </thead>

</table>

</div>

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

        var table = $('#table_tracabilite').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',"attr": {"style" :"color: rgb(255, 255, 255); background-color: rgb(33, 136, 56);"}}
        ],

        "ajax": {
            "url": "{{url('suivi_tracabilite/table')}}",
            "type": "GET",
            "data": {
                'date_debut': function() { return $('#date_debut').val() },
                'date_fin': function() { return $("#date_fin").val() },
                'action': function() { return $("#recherche_action").val() },
                'feuille': function() { return $("#recherche_feuille").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()
        });

        $("#recherche_action").change(function (e){
            e.preventDefault();
            $("#rafraichir").click()
        });
        $("#recherche_feuille").change(function (e){
            e.preventDefault();
            $("#rafraichir").click()
        });
});
</script>


@endsection