@extends('layouts.app')

@section('content')
  <div class="container box">
    <h3>Liste des fichiers</h3>
    <div class="panel panel-default">
      <div class="panel-heading">Rechercher un fichier EXCEL</div>
        <div class="panel-body">
          <div class="row">
            <div class="">
              <div class="panel panel-primary">
                <div class="panel-body">
                  <div class="form-group">
                    <form id="formSearchFile" action="/searchFile" method="post">
                      @csrf
                      <label for="">Filtrer Nom fichier:</label>
                      <input list="chapeaus" id="search" name="name" autocomplete="off" placeholder="Nom du fichier..">
                        <datalist id="chapeaus">
                          @foreach ($chapeaus as $chapeau)
                            <option value="{{$chapeau->name}}">{{$chapeau->id}}</option>
                          @endforeach
                        </datalist>
                      {{-- <input type="submit" class="btn btn-success" value="Rechercher"> --}}
                    </form>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="table-responsive">
            <h3 align="center">Total : <span id="total_records"></span></h3>
            <table class="table table-striped table-bordered">
              <thead>
                <tr>
                  <th>Nom du fichier</th>
                  <th>Nom du client</th>
                  <th>Date de création</th>
                  <th>Date de modification</th>
                  <th>Nom d'tilisateur</th>
                  <th>Modifier</th>
                  <th>Créé Commande</th>
                  <th>Supprimer</th>
                </tr>
              </thead>
              <tbody>
              </tbody>
            </table>
          </div>
      </div>
    </div>
  </div>
  <script>
    $(document).ready(function(){
$( "#formSearchFile" ).submit(function( event ) {
  event.preventDefault();

});
      fetch_file_data();
      function fetch_file_data(query = ''){
        $.ajax({
          url:"{{ route('searchAuto.action') }}",
          method:'GET',
          data:{query:query},
          dataType:'json',
          success:function(data){
            $('tbody').html(data.table_data);
            console.log(data);
            $('#total_records').text(data.total_data);
          }
        })
      }
      $(document).on('keyup', '#search', function(){
        var query = $(this).val();
        fetch_file_data(query);
      });
    });
  </script>
@endsection