@extends('layouts.app')

@section('content')
<div class="container border p-3">
    <h1>Détails de l'utilisateur : {{ $user->user_name }}</h1>
    <h3 class="mt-4">Tableau des enregistrements de {{ $user->user_name }}</h3>

    <form action="{{ route('pages.users.details', ['id' => $user->id]) }}" method="GET" class="mb-3">
        <div class="form-row">
            <div class="col-md-4">
                <label for="date_debut">Date de début</label>
                <input type="date" id="date_debut" name="date_debut" class="form-control" value="{{ request('date_debut', date('Y-m-01')) }}">
            </div>
            <div class="col-md-4">
                <label for="date_fin">Date de fin</label>
                <input type="date" id="date_fin" name="date_fin" class="form-control" value="{{ request('date_fin', date('Y-m-d')) }}">
            </div>
            <div class="col-md-4 align-self-end">
                <button type="submit" class="btn btn-primary">Soumettre</button>
            </div>
        </div>
    </form>

    @if ($serials->isNotEmpty())
        <table id="serialsTable" class="display table table-striped table-bordered" style="width:100%">
            <thead>
                <tr>
                    <th>Date</th>
                    <th>Numéro de série</th>
                    <th>Modèle</th>
                    <th>État</th>
                    <th>Historique</th>
                </tr>
            </thead>
            <tbody>
                @foreach ($serials as $serial)
                    <tr>
                        <td>{{ $serial->date }}</td>
                        <td>{{ $serial->sn }}</td>
                        <td>{{ $serial->model_name ?? 'N/A' }}</td>
                        <td>{{ $serial->state ?? 'À vérifier' }}</td>
                        
                        <td>
                        @if (!empty($serial->sn))
                                <a href="{{ route('pages.serials.history', ['sn' => $serial->sn]) }}" class="btn btn-info btn-sm">Voir l'historique</a>
                            @else
                                <span class="text-muted">Indisponible</span>
                            @endif
                        
                            </td>
                    </tr>
                @endforeach
            </tbody>



        </table>
    @else
        <p>Aucun numéro de série trouvé.</p>
    @endif

    <a href="{{ route('pages.users') }}" class="btn btn-secondary mt-3">Retour</a>
</div>

{{-- Inclusion de DataTables --}}
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
<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>

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