@extends('layouts.base')

@section('title')
    Utilisateur & Agence
@endsection

@section('content')

<div class="row mb-4">
    <div class="col-sm-6 col-lg-3">
        <div class="card text-center">
            <div class="card-body">
                <span class="bg-primary h-45 w-45 d-flex-center b-r-50 mb-2">
                    <i class="ph-light ph-buildings f-s-24 text-white"></i>
                </span>
                <h4 class="text-dark">{{ $totalAgences }}</h4>
                <p class="mb-0">Agences</p>
            </div>
        </div>
    </div>
    <div class="col-sm-6 col-lg-3">
        <div class="card text-center">
            <div class="card-body">
                <span class="bg-info h-45 w-45 d-flex-center b-r-50 mb-2">
                    <i class="ph-light ph-user f-s-24 text-white"></i>
                </span>
                <h4 class="text-dark">{{ $totalUtilisateurs }}</h4>
                <p class="mb-0">Utilisateurs</p>
            </div>
        </div>
    </div>
    <div class="col-sm-6 col-lg-3">
        <div class="card text-center">
            <div class="card-body">
                <span class="bg-secondary h-45 w-45 d-flex-center b-r-50 mb-2">
                    <i class="ph-light ph-users-three f-s-24 text-white"></i>
                </span>
                <h4 class="text-dark">{{ $totalRoles }}</h4>
                <p class="mb-0">Rôles</p>
            </div>
        </div>
    </div>
    <div class="col-sm-6 col-lg-3">
        <div class="card text-center">
            <div class="card-body">
                <span class="bg-warning h-45 w-45 d-flex-center b-r-50 mb-2">
                    <i class="ph-light ph-key f-s-24 text-white"></i>
                </span>
                <h4 class="text-dark">{{ $totalPermissions }}</h4>
                <p class="mb-0">Permissions</p>
            </div>
        </div>
    </div>
</div>

<div class="row table-section">
    <div class="col-xl-12">
        <div class="card">
            <div class="card-header">
                <h5 class="text-center">Cinq derniers utilisateurs enregistrés</h5>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-bordered table-striped align-middle mb-0">
                        <thead>
                            <tr>
                                <th scope="col">Nom</th>
                                <th scope="col">Prénom</th>
                                <th scope="col">Email</th>
                                <th scope="col">Agence</th>
                                <th scope="col">Date d'enregistrement</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($derniersUtilisateurs as $user)
                            <tr>
                                <td>{{ $user->first_name }}</td>
                                <td>{{ $user->last_name }}</td>
                                <td>{{ $user->email }}</td>
                                <td>{{ $user->agencie->name ?? 'N/A' }}</td>
                                <td>{{ $user->created_at->format('d/m/Y à H\hi') }}</td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="5" class="text-center">Aucun utilisateur enregistré récemment.</td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@section('script')
    <script src="{{ asset('assets/js/mixed.js') }}"></script>
    <script src="{{ asset('assets/js/line.js') }}"></script>
@endsection