@extends('layouts.theme1')

@section('title', 'Profils Utilisateurs')

@section('content')
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.11.5/datatables.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">

<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="border-bottom title-part-padding">
                <h4 class="card-title mb-0">Gestion des profils utilisateurs</h4>
            </div>
            <div class="card-body">
                @if(session('success'))
                    <div class="alert alert-success alert-dismissible fade show" role="alert">
                        <i class="fas fa-check-circle me-2"></i>{{ session('success') }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                    </div>
                @endif

                @if(session('error'))
                    <div class="alert alert-danger alert-dismissible fade show" role="alert">
                        <i class="fas fa-exclamation-circle me-2"></i>{{ session('error') }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                    </div>
                @endif

                <div class="table-responsive">
                    <table id="user-profiles-table" class="table table-striped table-bordered">
                        <thead>
                            <tr>
                                <th>Utilisateur</th>
                                <th>Contact</th>
                                <th>Rôle</th>
                                <th>Vérification</th>
                                <th>Dernière connexion</th>
                                <th>Inscription</th>
                                <th class="text-center">Actions</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
 
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.datatables.net/v/dt/dt-1.11.5/datatables.min.js"></script>

<script>
$(document).ready(function() {
    $('#user-profiles-table').DataTable({
        processing: true,
        serverSide: true,
        ajax: '{{ route("user-profiles.index") }}',
        columns: [
            { data: 'display_info', name: 'displayName' },
            { data: 'contact', name: 'phoneNumber' },
            { data: 'role', name: 'role' },
            { data: 'verification', name: 'isVerified' },
            { data: 'last_login', name: 'lastLoginAt' },
            { data: 'created', name: 'createdAt' },
            { data: 'actions', name: 'actions', orderable: false, searchable: false }
        ],
        language: {
            url: "//cdn.datatables.net/plug-ins/1.10.25/i18n/French.json"
        },
        order: [[5, 'desc']]
    });
});

 
</script>
@endsection