@extends('layouts.base')

@section('menu')
    @include('admin.menu')
@endsection

@section('content')

<section class="statistics bg-light py-3">
    <div class="container">
        <div class="row text-center justify-content-center align-items-stretch">
            <!-- Card: Total Offres Publiées -->
            <div class="col-12 col-sm-6 col-md-4 col-lg-3 mb-3">
                <div class="card h-100" style="background-color: {{ session('etablissementFirstLight') }}; color: {{ session('couleurText1') }};">
                    <div class="card-body">
                        <h5 class="card-title">Offres Publiées</h5>
                        <p class="card-text display-6">{{ $total_offres_publiees ?? 0 }}</p>
                    </div>
                </div>
            </div>

            <!-- Card: Offres Suspendues -->
            <div class="col-12 col-sm-6 col-md-4 col-lg-3 mb-3">
                <div class="card h-100" style="background-color: {{ session('etablissementFirstLight') }}; color: {{ session('couleurText2') }};">
                    <div class="card-body">
                        <h5 class="card-title">Offres Suspendues</h5>
                        <p class="card-text display-6">{{ $offres_suspendues ?? 0 }}</p>
                    </div>
                </div>
            </div>

            <!-- Card: Total Alumnis -->
            <div class="col-12 col-sm-6 col-md-4 col-lg-3 mb-3">
                <div class="card h-100" style="background-color: {{ session('etablissementFirstLight') }}; color: {{ session('couleurText1') }};">
                    <div class="card-body">
                        <h5 class="card-title">Alumnis</h5>
                        <p class="card-text display-6">{{ $total_alumnis ?? 0 }}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="courses-listing bg-gray">
    <div class="container">
        <nav class="nav nav-pills nav-justified d-flex justify-content-center">
            <a href="#" class="nav-link active">Tout</a>
            <a href="#" class="nav-link">Étudiants</a>
            <a href="#" class="nav-link">Alumnis</a>
        </nav>

        <!-- Barre de Recherche -->
        <form method="GET" action="{{ route('admin.index') }}" class="mb-4" id="search-form">
            <div class="row">
                <div class="col-md-6">
                    <input 
                        type="text" 
                        name="query" 
                        class="form-control" 
                        placeholder="Rechercher..." 
                        value="{{ request('query') }}" 
                    />
                </div>
                <div class="col-md-2">
                    <button type="submit" class="btn btn-primary" > Rechercher
                    </button>
                </div>
            </div>
        </form>
        
        <!-- Tableau des Utilisateurs -->
        <div class="table-responsive">
            <table id="offresTable" class="table table-hover table-striped" style="width: 100%;">
                <thead>
                    <tr>
                        <th>Matricule</th>
                        <th>Nom</th>
                        <th>Téléphone</th>
                        <th>Email</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($users as $user)
                    <tr>
                        <td>{{ $user->matricule }}</td>
                        <td>{{ $user->username }}{{ $user->surname }}</td>
                        <td>{{ $user->phone }}</td>
                        <td>{{ $user->email }}</td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="4" class="text-center">Aucun utilisateur.</td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        
        <!-- Pagination -->
        <nav aria-label="Page navigation example" class="d-flex justify-content-center">
            <ul class="pagination pagination-sm">
                <li class="page-item"><a href="#" class="page-link">«</a></li>
                <li class="page-item active"><a href="#" class="page-link">1</a></li>
                <li class="page-item"><a href="#" class="page-link">2</a></li>
                <li class="page-item"><a href="#" class="page-link">3</a></li>
                <li class="page-item"><a href="#" class="page-link">»</a></li>
            </ul>
        </nav>
    </div>
</section>

<!-- Scripts -->
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap5.min.js"></script>
<script>
    $(document).ready(function () {
        $('#offresTable').DataTable({
            language: {
                url: "https://cdn.datatables.net/plug-ins/1.13.6/i18n/fr-FR.json"
            },
            responsive: true,
            pageLength: 10,
            order: [[0, "asc"]]
        });
    });
</script>

@endsection