<?php $__env->startSection('title', 'Liste des Utilisateurs'); ?>

<?php $__env->startPush('styles'); ?>
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.7/css/dataTables.bootstrap5.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.5.0/css/responsive.bootstrap5.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
    :root {
        --primary-color: #020548;
        --secondary-color: #3b5de7;
        --accent-color: #ff6b6b;
        --light-bg: #f8f9fa;
    }

    .page-header {
        background-color: white;
        padding: 1.5rem;
        border-radius: 10px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.05);
        margin-bottom: 2rem;
    }

    .breadcrumb-custom {
        background-color: transparent;
        padding: 0;
    }

    .breadcrumb-custom .breadcrumb-item a {
        color: var(--secondary-color);
        text-decoration: none;
    }

    .breadcrumb-custom .breadcrumb-item.active {
        color: var(--primary-color);
        font-weight: 500;
    }

    .btn-add {
        background-color: var(--primary-color);
        border: none;
        padding: 10px 20px;
        font-weight: 500;
        transition: all 0.3s;
    }

    .btn-add:hover {
        background-color: var(--secondary-color);
        transform: translateY(-2px);
    }

    .card-table {
        border: none;
        border-radius: 10px;
        box-shadow: 0 10px 30px rgba(2,5,72,0.1);
        overflow: hidden;
    }

    .table-responsive {
        padding: 0;
    }

    #utilisateurs-table {
        width: 100% !important;
    }

    #utilisateurs-table thead th {
        background-color: var(--primary-color);
        color: white;
        font-weight: 500;
        padding: 15px;
    }

    #utilisateurs-table tbody td {
        vertical-align: middle;
        padding: 12px 15px;
    }

    #utilisateurs-table tbody tr:nth-child(even) {
        background-color: rgba(248, 249, 250, 0.5);
    }

    #utilisateurs-table tbody tr:hover {
        background-color: rgba(2, 5, 72, 0.03);
    }

    .badge-admin {
        background-color: var(--primary-color);
        color: white;
    }

    .badge-employe {
        background-color: var(--secondary-color);
        color: white;
    }

    .btn-action {
        padding: 6px 12px;
        font-size: 14px;
        border-radius: 6px;
        transition: all 0.2s;
    }

    .btn-edit {
        background-color: #ffc107;
        border-color: #ffc107;
        color: #212529;
    }

    .btn-edit:hover {
        background-color: #e0a800;
        border-color: #d39e00;
    }

    .btn-delete {
        background-color: #dc3545;
        border-color: #dc3545;
    }

    .btn-delete:hover {
        background-color: #c82333;
        border-color: #bd2130;
    }

    /* Modal de succès */
    .success-modal .modal-header {
        background-color: #28a745;
        color: white;
    }

    /* Modal de suppression */
    .delete-modal .modal-header {
        background-color: #dc3545;
        color: white;
    }

    .user-avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background-color: var(--primary-color);
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        margin-right: 10px;
    }

    .user-info {
        display: flex;
        align-items: center;
    }

    .user-details {
        line-height: 1.2;
    }

    .user-name {
        font-weight: 600;
        color: var(--primary-color);
    }

    .user-role {
        font-size: 0.85rem;
        color: #6c757d;
    }

    .btn-view {
        background-color: #17a2b8;
        border-color: #17a2b8;
        color: white;
    }

    .btn-view:hover {
        background-color: #138496;
        border-color: #117a8b;
        color: white;
    }
</style>
<?php $__env->stopPush(); ?>

<?php $__env->startSection('content'); ?>
<div class="container-fluid">
    <!-- Modal de succès -->
    <?php if(session('show_success_modal')): ?>
    <div class="modal fade success-modal show" id="successModal" tabindex="-1" style="display: block; background: rgba(0,0,0,0.5);">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title"><i class="fas fa-check-circle me-2"></i>Succès</h5>
                </div>
                <div class="modal-body">
                    <p><?php echo e(session('modal_message', 'Utilisateur créé avec succès !')); ?></p>
                </div>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            var modal = new bootstrap.Modal(document.getElementById('successModal'), {
                backdrop: 'static',
                keyboard: false
            });
            modal.show();

            setTimeout(function() {
                var modalEl = document.getElementById('successModal');
                modalEl.style.transition = 'opacity 0.5s';
                modalEl.style.opacity = '0';

                setTimeout(function() {
                    modal.hide();
                    window.location.href = "<?php echo e(route('listeUtilisateur')); ?>";
                }, 500);
            }, 2500);
        });
    </script>
    <?php endif; ?>

    <!-- En-tête de page -->
    <div class="page-header">
        <div class="row align-items-center">
            <div class="col-md-6">
                <h2 class="mb-0">
                    <i class="fas fa-users me-2" style="color: var(--primary-color);"></i>
                    Liste des Utilisateurs
                </h2>
            </div>
            <div class="col-md-6">
                <div class="d-flex justify-content-end align-items-center">
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb breadcrumb-custom">
                            <li class="breadcrumb-item"><a href="<?php echo e(route('dashboard')); ?>">Dashboard</a></li>
                            <li class="breadcrumb-item active">Utilisateurs</li>
                        </ol>
                    </nav>
                    <a href="<?php echo e(route('formUtilisateur')); ?>" class="btn btn-add ms-3">
                        <i class="fas fa-plus me-2"></i>Ajouter un Utilisateur
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- Carte principale -->
    <div class="card-table">
        <div class="card-body">
            <div class="table-responsive">
                <table id="utilisateurs-table" class="table table-hover" style="width:100%">
                    <thead>
                        <tr>
                            <th>Utilisateur</th>
                            <th>Email</th>
                            <th>Pays</th>
                            <th>Téléphone</th>
                            <th>Rôle</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        <?php $__currentLoopData = $voyagedifiantusers; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $voyagedifiantuser): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                        <tr>
                            <td>
                                <div class="user-info">
                                    <div class="user-avatar"><?php echo e(substr($voyagedifiantuser->name, 0, 2)); ?></div>
                                    <div class="user-details">
                                        <div class="user-name"><?php echo e($voyagedifiantuser->name); ?></div>
                                        <div class="user-role"><?php echo e($voyagedifiantuser->role); ?></div>
                                    </div>
                                </div>
                            </td>
                            <td><?php echo e($voyagedifiantuser->email); ?></td>
                            <td><?php echo e($voyagedifiantuser->country); ?></td>
                            <td><?php echo e($voyagedifiantuser->telephone); ?></td>
                            <td>
                                <span class="badge <?php echo e($voyagedifiantuser->role === 'admin' ? 'badge-admin' : 'badge-employe'); ?>">
                                    <?php echo e($voyagedifiantuser->role); ?>

                                </span>
                            </td>
                            <td>
                                <div class="d-flex gap-2">
                                    <a href="<?php echo e(route('formeditUtilisateur', $voyagedifiantuser->id)); ?>" class="btn btn-action btn-edit">
                                        <i class="fas fa-edit"></i>
                                    </a>
                                    <button type="button" class="btn btn-action btn-delete" data-bs-toggle="modal" data-bs-target="#deleteModal<?php echo e($voyagedifiantuser->id); ?>">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                    <a href="<?php echo e(route('dashboard.showutilisateur', $voyagedifiantuser->id)); ?>" class="btn btn-action btn-view">
                                        <i class="fas fa-eye"></i>
                                    </a>
                                </div>
                            </td>
                        </tr>

                        <!-- Modal de suppression -->
                        <div class="modal fade delete-modal" id="deleteModal<?php echo e($voyagedifiantuser->id); ?>" tabindex="-1">
                            <div class="modal-dialog modal-dialog-centered">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h5 class="modal-title"><i class="fas fa-exclamation-triangle me-2"></i>Confirmation</h5>
                                    </div>
                                    <div class="modal-body">
                                        <p>Êtes-vous sûr de vouloir supprimer l'utilisateur <strong><?php echo e($voyagedifiantuser->name); ?></strong> ?</p>
                                        <p class="text-danger"><small>Cette action est irréversible.</small></p>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
                                        <form action="<?php echo e(route('voyagedifiantUsers.destroy', $voyagedifiantuser->id)); ?>" method="POST">
                                            <?php echo csrf_field(); ?>
                                            <?php echo method_field('DELETE'); ?>
                                            <button type="submit" class="btn btn-danger">
                                                <i class="fas fa-trash me-1"></i> Supprimer
                                            </button>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
<?php $__env->stopSection(); ?>

<?php $__env->startPush('scripts'); ?>
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
<script src="https://cdn.datatables.net/1.13.7/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.7/js/dataTables.bootstrap5.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.5.0/js/dataTables.responsive.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.5.0/js/responsive.bootstrap5.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

<script>
$(document).ready(function() {
    $('#utilisateurs-table').DataTable({
        responsive: true,
        language: {
            url: 'https://cdn.datatables.net/plug-ins/1.13.7/i18n/fr-FR.json'
        },
        dom: '<"top"f>rt<"bottom"lip><"clear">',
        columnDefs: [
            { responsivePriority: 1, targets: 0 }, // Utilisateur
            { responsivePriority: 2, targets: -1 }, // Actions
            { responsivePriority: 3, targets: 1 }   // Email
        ]
    });
});
</script>
<?php $__env->stopPush(); ?>

<?php echo $__env->make('layouts.app', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH C:\Users\LENOVO\Documents\voyagedifiantDashboard\resources\views/page/listeUtilisateur.blade.php ENDPATH**/ ?>