@extends('layouts.app')

@section('content')

<div class="container mt-4">
  <h3 class="mb-3">
    Historique
    @if(isset($sn))
      <span class="badge badge-info">{{ $sn }}</span>
    @endif
  </h3>
  <h5 class="text-muted mb-4">Modèle : {{ $product }}</h5>

  @if($entries->isEmpty())
    <div class="alert alert-warning">Aucun enregistrement trouvé pour ce numéro de série.</div>
  @else
    <div class="table-responsive">
      <table class="table table-sm table-hover table-bordered" style="width:100%">
        <thead>
          <tr>
            <th>Date</th>
            <th>Utilisateur</th>
            <th>État</th>
            <th>Produit</th>
          </tr>
        </thead>
        <tbody>
          @foreach($entries as $e)
            <tr>
              <td>{{ $e->date }}</td>
              <td>{{ $e->user ?? '—' }}</td>
              <td>{{ $e->state ?? '—' }}</td>
              <td>{{ $e->product }}</td>
            </tr>
          @endforeach
        </tbody>
      </table>
    </div>
  @endif

  <div class="mt-3">
    <a href="{{ url()->previous() }}" class="btn btn-secondary">← Retour</a>
  </div>
</div>

{{-- DataTables --}}
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">

<script>
$(document).ready(function() {
  $('#historyTable').DataTable({
    language:{
      lengthMenu:"Afficher _MENU_ enregistrements par page",
      zeroRecords:"Aucun enregistrement",
      info:"Affichage de _START_ à _END_ sur _TOTAL_ enregistrements",
      infoEmpty:"Aucun enregistrement disponible",
      infoFiltered:"(filtré sur _MAX_ enregistrements)",
      search:"Rechercher :",
      paginate:{first:"Premier",last:"Dernier",next:"Suivant",previous:"Précédent"}
    },
    order:[[0,'asc']],
    pageLength:25
  });
});
</script>
@endsection