@extends('layouts.app')

@section('content')
  <div class="container box">
    <h3>Rechercher un élement</h3>
    <div class="panel panel-default">
      <div class="panel-heading">Saisir Description Element</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="formSearchElem" action="/searchFile" method="post">
                      @csrf
                      <label for="">Filtrer Nom fichier:</label>
                      <input list="elements" id="searchElem" name="elemName" autocomplete="off" placeholder="Description de l'élément...">
                        <datalist id="elements">
                          @foreach ($elements as $element)
                            <option value="{{$element->Description_element}}">{{$element->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>Description</th>
                    <th>Quantité</th>
                    <th>Type Element</th>
                    <th>Code matériau/quincaillerie</th>
                    <th>Indice</th>
                </tr>
              </thead>
              <tbody>
              </tbody>
            </table>
          </div>
      </div>
    </div>
  </div>
  <script>
    $(document).ready(function(){
$( "#formSearchElem" ).submit(function( event ) {
  event.preventDefault();

});
      fetch_file_data();
      function fetch_file_data(query = ''){
        $.ajax({
          url:"{{ route('element.elemAction') }}",
          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', '#searchElem', function(){
        var query = $(this).val();
        fetch_file_data(query);
      });
    });
  </script>
@endsection