@extends('layouts.admin')

@section('title', 'Demandes d\'audience au rectorat UAC')

<style>
    #appointmentsTable {
        border-collapse: separate;
        border-spacing: 0;
    }

    #appointmentsTable thead th {
        background-color: transparent;
        border-bottom: 2px solid var(--border-light);
        padding-top: 1rem;
        padding-bottom: 1rem;
        font-weight: 600;
        color: var(--text-secondary);
        text-transform: uppercase;
        font-size: 0.875rem;
        letter-spacing: 0.05em;
    }

    #appointmentsTable tbody td {
        border-bottom: 1px solid var(--border-light);
        padding-top: 1rem;
        padding-bottom: 1rem;
        vertical-align: middle;
    }

    #appointmentsTable tbody tr:last-child td {
        border-bottom: none;
    }

    #appointmentsTable tbody tr:hover {
        background-color: rgba(14, 165, 233, 0.04) !important;
    }

    .avatar-xs {
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .avatar-xs img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .badge {
        padding: 0.35rem 0.75rem;
        font-weight: 500;
        border-radius: 50px;
        font-size: 0.75rem;
        letter-spacing: 0.02em;
    }

    .dropdown-menu {
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-lg);
        border: 1px solid var(--border-light);
        padding: 0.5rem;
    }

    .dropdown-item {
        border-radius: var(--radius-sm);
        padding: 0.5rem 0.75rem;
        margin: 0.125rem 0;
        transition: all var(--transition-fast);
    }

    .dropdown-item:hover {
        background-color: var(--primary-50);
        color: var(--primary-700);
    }

    @media (max-width: 768px) {
        #appointmentsTable {
            font-size: 0.875rem;
        }

        .stats-header h1 {
            font-size: 1.5rem;
        }
    }
</style>
<style>
    /* Styles spécifiques pour le modal */
    .modal-content {
        border: none;
        box-shadow: var(--shadow-xl);
    }

    .modal-header {
        background: linear-gradient(135deg, rgba(14, 165, 233, 0.05), rgba(14, 165, 233, 0.02));
        border-radius: var(--radius-xl) var(--radius-xl) 0 0 !important;
    }

    .action-icon-container {
        width: 48px;
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(14, 165, 233, 0.1);
        border-radius: var(--radius-md);
    }

    .form-label {
        color: var(--text-secondary);
        margin-bottom: 0.5rem;
    }

    .input-group-text {
        background-color: var(--bg-secondary);
        border-color: var(--border-light);
        color: var(--text-muted);
    }

    .form-control,
    .form-select {
        border-color: var(--border-light);
        background-color: var(--bg-surface);
        color: var(--text-primary);
        transition: all var(--transition-fast);
    }

    .form-control:focus,
    .form-select:focus {
        border-color: var(--primary-400);
        box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
        background-color: var(--bg-surface);
    }

    .alert {
        border-radius: var(--radius-md);
        border: 1px solid var(--border-light);
        background-color: var(--bg-secondary);
    }

    /* Responsive */
    @media (max-width: 576px) {
        .modal-dialog {
            margin: 0.5rem;
        }

        .modal-header .d-flex {
            flex-direction: column;
            align-items: flex-start;
            gap: 1rem;
        }

        .action-icon-container {
            align-self: flex-start;
        }
    }
</style>
<style>
    /* Styles spécifiques pour le modal de vue */
    .avatar-large {
        position: relative;
    }

    .avatar-large img {
        width: 56px;
        height: 56px;
        object-fit: cover;
    }

    .icon-container {
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: var(--radius-md);
    }

    .card-header-modern {
        padding: 0;
    }

    .card-body-modern {
        padding: 0;
    }

    .info-group {
        margin-bottom: 1rem;
    }

    .info-label {
        margin-bottom: 0.25rem;
    }

    .info-label i {
        width: 16px;
    }

    .info-value {
        color: var(--text-primary);
        line-height: 1.4;
    }

    .message-content {
        font-size: 0.95rem;
        line-height: 1.6;
        border-left: 3px solid var(--primary-400);
        background: var(--bg-secondary) !important;
    }

    .admin-note {
        border-left: 3px solid var(--warning);
        background: var(--warning-bg, rgba(245, 158, 11, 0.1)) !important;
    }

    .file-icon {
        width: 48px;
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .hover-lift:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-md);
        background: var(--bg-secondary) !important;
    }

    /* Scrollbar personnalisée pour le message */
    .message-content::-webkit-scrollbar {
        width: 6px;
    }

    .message-content::-webkit-scrollbar-track {
        background: transparent;
    }

    .message-content::-webkit-scrollbar-thumb {
        background: var(--primary-300);
        border-radius: 3px;
    }

    .message-content::-webkit-scrollbar-thumb:hover {
        background: var(--primary-400);
    }

    /* Responsive */
    @media (max-width: 768px) {
        .modal-dialog {
            margin: 0.5rem;
        }

        .avatar-large img {
            width: 48px;
            height: 48px;
        }

        .icon-container {
            width: 36px;
            height: 36px;
        }

        .modal-footer .d-flex {
            flex-direction: column;
        }

        .modal-footer .btn {
            width: 100%;
        }
    }

    /* Animation d'entrée pour les éléments */
    @keyframes fadeIn {
        from {
            opacity: 0;
            transform: translateY(10px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .card-modern {
        animation: fadeIn 0.3s ease-out;
    }

    .info-group {
        animation: fadeIn 0.4s ease-out;
    }
</style>
@section('content')
    <div class="container-fluid py-4">
        <div class="stats-header mb-4">
            <div class="row align-items-center">
                <div class="col-12 col-md-8">
                    <h1 class="display-6 text-white fw-bold mb-2">Gestion des utilisateurs</h1>
                </div>

            </div>
        </div>



        <div class="card-modern">
            <div class="card-body p-0">
                <table class="table table-hover datatable mb-0">
                    <thead class="table-light">
                        <tr>
                            <th class="ps-4">Nom</th>
                            <th>Email</th>
                            <th>Mobile</th>
                            <th>Rôle</th>
                            <th>Institution/Autorité</th>
                            <th>Statut</th>
                            <th class="text-end pe-4">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($users as $key => $user)
                            <tr class="align-middle">
                                {{-- Nom --}}
                                <td class="ps-4">
                                    <span class="fw-semibold">{{ $user->name }}</span>
                                </td>

                                {{-- Email --}}
                                <td>
                                    <span class="text-truncate d-inline-block" style="max-width:200px;">
                                        {{ $user->email }}
                                    </span>
                                </td>

                                {{-- Mobile --}}
                                <td>
                                    <span class="fw-semibold">{{ $user->mobile ?? '-' }}</span>
                                </td>

                                {{-- Rôle --}}
                                <td>
                                    <span class="badge bg-secondary">
                                        {{ ucfirst(str_replace('-', ' ', userRole($user->role))) }}
                                    </span>
                                </td>

                                {{-- Institution --}}
                                <td>
                                   {{ $user->institution?->name ?? $user->service?->name ?? '_' }}
                                </td>

                                {{-- Statut --}}
                                <td>
                                    @php
                                        $class = match ($user->status) {
                                            'pending' => 'bg-warning text-dark',
                                            'confirmed' => 'bg-success text-white',
                                            'rejected' => 'bg-danger text-white',
                                            default => 'bg-secondary',
                                        };
                                    @endphp

                                    <span class="badge {{ $class }}">
                                        {{ ucfirst( demandStatus($user->status)) }}
                                    </span>
                                </td>

                                {{-- Actions --}}
                                <td class="text-end pe-4">
                                    <div class="dropdown d-inline-block">
                                        <button class="btn btn-sm btn-outline-secondary rounded-circle"
                                            data-bs-toggle="dropdown" style="width:36px;height:36px;">
                                            <i class="bi bi-three-dots"></i>
                                        </button>

                                        <ul class="dropdown-menu dropdown-menu-end shadow border-0">

                                            {{-- Valider --}}

                                            <li>
                                                <a href="javascript:void(0);" class="dropdown-item" data-bs-toggle="modal"
                                                    data-bs-target="#modalUserAction" data-user-id="{{ $user->id }}"
                                                    data-name="{{ $user->name }}" data-mobile="{{ $user->mobile }}"
                                                    data-email="{{ $user->email }}" data-status="{{ $user->status }}"
                                                    data-role="{{ userRole($user->role) }}"
                                                    data-institution="{{ $user->institution ? $user->institution->name : '-' }}"
                                                    data-action="approve">
                                                    <i class="bi bi-check-circle text-success"></i>
                                                    Valider
                                                </a>
                                            </li>

                                            {{-- Rejeter --}}
                                            <li>
                                                <a href="javascript:void(0);" class="dropdown-item" data-bs-toggle="modal"
                                                    data-bs-target="#modalUserAction" data-user-id="{{ $user->id }}"
                                                    data-name="{{ $user->name }}" data-mobile="{{ $user->mobile }}"
                                                    data-email="{{ $user->email }}" data-status="{{ $user->status }}"
                                                    data-role="{{userRole($user->role) }}"
                                                    data-institution="{{ $user->institution ? $user->institution->name : '-' }}"
                                                    data-action="reject">
                                                    <i class="bi bi-x-circle text-danger"></i>
                                                    Rejeter
                                                </a>
                                            </li>

                                            {{-- Voir détails --}}
                                            <li>
                                                <a href="javascript:void(0);" class="dropdown-item" data-bs-toggle="modal"
                                                    data-bs-target="#modalViewUser" data-user='@json($user)'
                                                    data-name="{{ $user->name }}" data-mobile="{{ $user->mobile }}"
                                                    data-email="{{ $user->email }}" data-status="{{ $user->status }}"
                                                    data-role="{{ $user->role }}"
                                                    data-institution="{{ $user->institution ? $user->institution->name : '-' }}">
                                                    <i class="bi bi-eye text-primary"></i>
                                                    Voir détails
                                                </a>
                                            </li>

                                        </ul>
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>

    </div>

    <!-- Modal Unique : Validation Utilisateur -->
    <div class="modal fade" id="modalUserAction" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
        aria-labelledby="modalUserActionLabel" aria-hidden="true">

        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content card-modern border-0" style="border-radius: var(--radius-xl);">

                <form id="userActionForm" method="POST">
                    @csrf
                    @method('PATCH')

                    <!-- Champs cachés -->
                    <input type="hidden" name="user_id" id="userId">
                    <input type="hidden" name="action_type" id="actionType">

                    <!-- HEADER -->
                    <div class="modal-header border-0 pb-0">
                        <div class="d-flex align-items-center gap-3 w-100">

                            <div class="action-icon-container" id="actionIconContainer">
                                <i class="bi bi-person-check text-success" style="font-size: 1.5rem;"></i>
                            </div>

                            <div class="flex-grow-1">
                                <h1 class="modal-title h4 fw-bold mb-1" id="modalUserActionTitle">
                                    Validation d’un utilisateur
                                </h1>

                                <div class="d-flex align-items-center gap-2">
                                    <span class="badge bg-light text-dark border small" id="actionBadge">
                                        Validation
                                    </span>
                                    <span class="text-muted small" id="userPreviewName"></span>
                                </div>
                            </div>

                            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                        </div>
                    </div>

                    <!-- BODY -->
                    <div class="modal-body pt-4">

                        <!-- PREVIEW UTILISATEUR -->
                        <div class="alert alert-light border mb-4" id="previewInfo">
                            <div class="d-flex gap-3">
                                <div class="flex-shrink-0">
                                    <i class="bi bi-person-badge text-primary"></i>
                                </div>
                                <div class="flex-grow-1">
                                    <h6 class="fw-semibold mb-1" id="previewUserName"></h6>
                                    <div class="small text-muted">
                                        <div>Email : <span id="previewUserEmail" class="fw-medium"></span></div>
                                        <div>Mobile : <span id="previewUserMobile" class="fw-medium"></span></div>
                                        <div>Rôle : <span id="previewUserRole" class="fw-medium"></span></div>
                                        <div>Institution : <span id="previewUserInstitution" class="fw-medium"></span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- APPROUVER -->
                        <div id="approveFields" style="display:none;">
                            <div class="mb-4">
                                <label class="form-label fw-semibold d-flex align-items-center gap-2 mb-2">
                                    <i class="bi bi-chat-left-text text-primary"></i>
                                    Note interne (optionnelle)
                                </label>
                                <textarea name="admin_note_approve" class="form-control" rows="3"
                                    placeholder="Commentaire interne sur la validation…"></textarea>
                                <div class="form-text">
                                    <small class="text-muted">Note interne non visible par l’utilisateur.</small>
                                </div>
                            </div>
                        </div>

                        <!-- REJETER -->
                        <div id="rejectFields" style="display:none;">
                            <div class="alert alert-warning border mb-4">
                                <div class="d-flex gap-3">
                                    <div class="flex-shrink-0">
                                        <i class="bi bi-exclamation-triangle"></i>
                                    </div>
                                    <div class="flex-grow-1">
                                        <h6 class="fw-semibold mb-1">Action irréversible</h6>
                                        <p class="small mb-0">
                                            L’utilisateur sera rejeté. Un motif est obligatoire.
                                        </p>
                                    </div>
                                </div>
                            </div>

                            <div class="mb-4">
                                <label class="form-label fw-semibold d-flex align-items-center gap-2 mb-2">
                                    <i class="bi bi-x-circle text-danger"></i>
                                    Motif du rejet
                                </label>
                                <textarea id="admin_note_reject" name="admin_note_reject" class="form-control" rows="4"
                                    placeholder="Expliquez clairement la raison du rejet…"></textarea>
                                <div class="form-text">
                                    <small class="text-muted">
                                        Ce message sera visible par l’utilisateur.
                                    </small>
                                </div>
                            </div>
                        </div>

                    </div>

                    <!-- FOOTER -->
                    <div class="modal-footer border-0 pt-0">
                        <div class="d-flex gap-2 w-100">
                            <button type="button" class="btn btn-outline-secondary btn-modern flex-grow-1"
                                data-bs-dismiss="modal">
                                <i class="bi bi-x-circle me-2"></i>
                                Annuler
                            </button>

                            <button type="submit" id="modalUserActionBtn"
                                class="btn btn-primary-modern btn-modern flex-grow-1">
                                <i class="bi bi-check-circle me-2"></i>
                                <span id="actionButtonText">Valider</span>
                            </button>
                        </div>
                    </div>

                </form>
            </div>
        </div>
    </div>


    <!-- Modal : Voir un utilisateur -->
    <div class="modal fade" id="modalViewUser" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
        aria-labelledby="modalViewUserLabel" aria-hidden="true">

        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content card-modern border-0" style="border-radius: var(--radius-xl);">

                <!-- HEADER -->
                <div class="modal-header border-0 pb-0">
                    <div class="d-flex align-items-center gap-3 w-100">

                        <!-- Avatar -->
                        <div class="avatar-large position-relative">
                            <div class="rounded-circle bg-primary text-white d-flex align-items-center justify-content-center"
                                style="width:56px;height:56px;font-weight:600;" id="viewUserInitials">
                                --
                            </div>
                            <span
                                class="position-absolute bottom-0 end-0 translate-middle
                             badge rounded-circle border border-2 border-white"
                                id="viewUserStatusDot"></span>
                        </div>

                        <div class="flex-grow-1">
                            <h1 class="modal-title h4 fw-bold mb-1">
                                Détails de l'utilisateur
                            </h1>

                            <div class="d-flex align-items-center flex-wrap gap-2">
                                <span class="badge" id="viewUserStatusBadge"></span>
                            </div>
                        </div>

                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                </div>

                <!-- BODY -->
                <div class="modal-body pt-4">
                    <div class="row g-4">

                        <!-- INFO UTILISATEUR -->
                        <div class="col-md-6">
                            <div class="card-modern h-100">
                                <div class="card-header-modern d-flex align-items-center gap-2 mb-3">
                                    <i class="bi bi-person-circle text-primary"></i>
                                    <h6 class="mb-0 fw-semibold">Informations de l'utilisateur</h6>
                                </div>

                                <div class="card-body-modern p-0">
                                    <div class="mb-3">
                                        <small class="text-muted">Nom complet</small>
                                        <div class="fw-semibold" id="viewUserFullName"></div>
                                    </div>

                                    <div class="mb-3">
                                        <small class="text-muted">Email</small>
                                        <div>
                                            <a href="#" id="viewUserEmail" class="text-primary"></a>
                                        </div>
                                    </div>

                                    <div class="mb-3">
                                        <small class="text-muted">Mobile</small>
                                        <div class="fw-semibold" id="viewUserMobile"></div>
                                    </div>

                                    <div>
                                        <small class="text-muted">Rôle</small>
                                        <div class="fw-medium" id="viewUserRole"></div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- INSTITUTION & STATUS -->
                        <div class="col-md-6">
                            <div class="card-modern h-100">
                                <div class="card-header-modern d-flex align-items-center gap-2 mb-3">
                                    <i class="bi bi-building text-success"></i>
                                    <h6 class="mb-0 fw-semibold">Institution & Statut</h6>
                                </div>

                                <div class="card-body-modern p-0">
                                    <div class="mb-3">
                                        <small class="text-muted">Institution</small>
                                        <div class="fw-semibold" id="viewUserInstitution">-</div>
                                    </div>

                                    <div>
                                        <small class="text-muted">Statut</small>
                                        <div>
                                            <span class="badge" id="viewUserStatus"></span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- NOTE ADMIN (optionnelle) -->
                        <div class="col-12 d-none" id="viewUserAdminNoteSection">
                            <div class="card-modern">
                                <div class="card-header-modern d-flex align-items-center gap-2 mb-3">
                                    <i class="bi bi-sticky text-warning"></i>
                                    <h6 class="mb-0 fw-semibold">Note administrative</h6>
                                </div>

                                <div class="card-body-modern">
                                    <div class="bg-warning bg-opacity-10 rounded p-3" id="viewUserAdminNote"
                                        style="white-space:pre-wrap;">
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>

                <!-- FOOTER -->
                <div class="modal-footer border-0 pt-0">
                    <div class="d-flex gap-2 w-100">
                        <button type="button" class="btn btn-outline-secondary btn-modern flex-grow-1"
                            data-bs-dismiss="modal">
                            <i class="bi bi-x-circle me-2"></i> Fermer
                        </button>

                        <!-- Boutons d'action (optionnels) -->
                        <button type="button" id="viewUserActionBtn"
                            class="btn btn-primary-modern btn-modern flex-grow-1 d-none">
                            <i class="bi bi-lightning me-2"></i>
                            <span id="viewUserActionText"></span>
                        </button>
                    </div>
                </div>

            </div>
        </div>
    </div>

@endsection

@section('scripts')

    <script>
        const modal = document.getElementById('modalUserAction');

        modal.addEventListener('show.bs.modal', function(event) {
            const button = event.relatedTarget;

            const userId = button.getAttribute('data-user-id');
            const action = button.getAttribute('data-action');
            const name = button.getAttribute('data-name') || '';
            const email = button.getAttribute('data-email') || '';
            const mobile = button.getAttribute('data-mobile') || '';

            const role = button.getAttribute('data-role') || '';
            const institution = button.getAttribute('data-institution') || '';
            const adminNote = button.getAttribute('data-admin-note') || '';

            const form = modal.querySelector('#userActionForm');
            const actionTitle = modal.querySelector('#modalUserActionTitle');
            const actionBtn = modal.querySelector('#modalUserActionBtn');
            const actionBtnText = modal.querySelector('#actionButtonText');
            const approveFields = modal.querySelector('#approveFields');
            const rejectFields = modal.querySelector('#rejectFields');
            const actionBadge = modal.querySelector('#actionBadge');
            const actionIconContainer = modal.querySelector('#actionIconContainer');

            // Champs preview utilisateur
            document.getElementById('previewUserName').textContent = name;
            document.getElementById('previewUserEmail').textContent = email;
            document.getElementById('previewUserRole').textContent = role;
            document.getElementById('previewUserInstitution').textContent = institution;
            document.getElementById('previewUserMobile').textContent = mobile;

            // Reset des champs
            approveFields.style.display = 'none';
            rejectFields.style.display = 'none';

            // Hidden inputs
            document.getElementById('userId').value = userId;
            document.getElementById('actionType').value = action;

            if (action === 'approve') {
                form.action = `{{ url('admin/users') }}/${userId}/approve`;
                actionTitle.textContent = "Validation de l'utilisateur";
                actionBtnText.textContent = "Valider";
                actionBtn.className = 'btn btn-success btn-modern flex-grow-1';
                actionBadge.textContent = 'Validation';
                actionBadge.className = 'badge bg-success text-white small';
                approveFields.style.display = 'block';
                actionIconContainer.innerHTML =
                    '<i class="bi bi-check-circle text-success" style="font-size:1.5rem;"></i>';
            } else if (action === 'reject') {
                form.action = `{{ url('admin/users') }}/${userId}/reject`;
                actionTitle.textContent = "Rejet de l'utilisateur";
                actionBtnText.textContent = "Rejeter";
                actionBtn.className = 'btn btn-danger btn-modern flex-grow-1';
                actionBadge.textContent = 'Rejet';
                actionBadge.className = 'badge bg-danger text-white small';
                rejectFields.style.display = 'block';
                actionIconContainer.innerHTML =
                    '<i class="bi bi-x-circle text-danger" style="font-size:1.5rem;"></i>';
                const rejectnote = document.getElementById("admin_note_reject");
            }
        });

        // Soumission du formulaire
        document.getElementById('userActionForm')?.addEventListener('submit', function(e) {
            e.preventDefault();
            const form = this;
            const submitBtn = form.querySelector('#modalUserActionBtn');
            const originalText = submitBtn.textContent;

            submitBtn.textContent = 'Traitement en cours...';
            submitBtn.disabled = true;

            const formData = new FormData(form);

            fetch(form.action, {
                    method: 'POST',
                    body: formData,
                    headers: {
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute(
                            'content'),
                        'Accept': 'application/json'
                    }
                })
                .then(res => res.json())
                .then(data => {
                    if (data.success) {
                        Swal.fire({
                            icon: 'success',
                            title: 'Succès',
                            text: data.message || 'Action effectuée avec succès',
                            timer: 3000,
                            showConfirmButton: false,
                            background: 'var(--bg-surface)',
                            color: 'var(--text-primary)'
                        });
                        bootstrap.Modal.getInstance(modal).hide();
                        setTimeout(() => window.location.reload(), 1000);
                    } else {
                        throw new Error(data.message || 'Erreur lors du traitement');
                    }
                })
                .catch(err => {
                    Swal.fire({
                        icon: 'error',
                        title: 'Erreur',
                        text: err.message,
                        background: 'var(--bg-surface)',
                        color: 'var(--text-primary)'
                    });
                })
                .finally(() => {
                    submitBtn.textContent = originalText;
                    submitBtn.disabled = false;
                });
        });
    </script>

    <script>
        // Modal Vue détaillée utilisateur
        const modalViewUser = document.getElementById('modalViewUser');

        modalViewUser.addEventListener('show.bs.modal', function(event) {
            const button = event.relatedTarget;

            // Informations utilisateur
            const firstName = button.getAttribute('data-first-name');
            const lastName = button.getAttribute('data-last-name');
            const email = button.getAttribute('data-email');
            const mobile = button.getAttribute('data-mobile');
            const role = button.getAttribute('data-role');
            const institution = button.getAttribute('data-institution');
            const status = button.getAttribute('data-status');
            const adminNote = button.getAttribute('data-admin-note');

            // Avatar
            const avatarInitials = document.getElementById('viewUserInitials');
            if (firstName && lastName) {
                avatarInitials.textContent = `${firstName.charAt(0)}${lastName.charAt(0)}`.toUpperCase();
            } else if (email) {
                avatarInitials.textContent = email.charAt(0).toUpperCase();
            }

            // Remplir les informations
            document.getElementById('viewUserFullName').textContent = `${firstName} ${lastName}`;
            const emailElement = document.getElementById('viewUserEmail');
            emailElement.textContent = email;
            emailElement.href = `mailto:${email}`;
            document.getElementById('viewUserMobile').textContent = mobile || '-';
            document.getElementById('viewUserRole').textContent = role || '-';
            document.getElementById('viewUserInstitution').textContent = institution || '-';

            // Statut
            const statusBadge = document.getElementById('viewUserStatus');
            const avatarStatusDot = document.getElementById('viewUserStatusDot');
            let badgeClass, statusColor, statusText;

            switch ((status || '').toLowerCase()) {
                case 'actif':
                case 'active':
                    statusText = 'Actif';
                    badgeClass = 'bg-success text-white';
                    statusColor = '#10b981';
                    break;
                case 'inactif':
                case 'inactive':
                    statusText = 'Inactif';
                    badgeClass = 'bg-secondary text-white';
                    statusColor = '#64748b';
                    break;
                case 'banni':
                case 'banned':
                    statusText = 'Banni';
                    badgeClass = 'bg-danger text-white';
                    statusColor = '#ef4444';
                    break;
                default:
                    statusText = status || 'Non défini';
                    badgeClass = 'bg-info text-white';
                    statusColor = '#0ea5e9';
            }

            statusBadge.textContent = statusText;
            statusBadge.className = `badge ${badgeClass}`;
            avatarStatusDot.style.backgroundColor = statusColor;

            // Note admin
            const adminNoteSection = document.getElementById('viewUserAdminNoteSection');
            if (adminNote && adminNote.trim() !== '') {
                document.getElementById('viewUserAdminNote').textContent = adminNote;
                adminNoteSection.style.display = 'block';
            } else {
                adminNoteSection.style.display = 'none';
            }

            // Bouton d'action rapide (optionnel)
            const actionBtn = document.getElementById('viewUserActionBtn');
            const actionText = document.getElementById('viewUserActionText');
            if (status === 'Inactif' || status === 'inactive') {
                actionBtn.style.display = 'block';
                actionBtn.className = 'btn btn-success btn-modern flex-grow-1';
                actionText.textContent = 'Activer l\'utilisateur';
                actionBtn.onclick = () => {
                    const activateBtn = button.closest('tr').querySelector('[data-action="activate"]');
                    if (activateBtn) activateBtn.click();
                    bootstrap.Modal.getInstance(modalViewUser).hide();
                };
            } else if (status === 'Actif' || status === 'active') {
                actionBtn.style.display = 'block';
                actionBtn.className = 'btn btn-danger btn-modern flex-grow-1';
                actionText.textContent = 'Désactiver l\'utilisateur';
                actionBtn.onclick = () => {
                    const deactivateBtn = button.closest('tr').querySelector('[data-action="deactivate"]');
                    if (deactivateBtn) deactivateBtn.click();
                    bootstrap.Modal.getInstance(modalViewUser).hide();
                };
            } else {
                actionBtn.style.display = 'none';
            }
        });
    </script>

    <script>
        function submit(btn, formId) {
            btn.disabled = true;
            $('#' + formId).submit();
        }
    </script>
    <script>
        const institutionSelect = document.getElementById('technicalInstitution');
        const userSelect = document.getElementById('technicalUser');

        institutionSelect?.addEventListener('change', function() {
            const institutionId = this.value;

            // Réinitialiser le dropdown utilisateur
            userSelect.innerHTML = '<option value="">-- Choisir un utilisateur --</option>';

            if (!institutionId) return;

            // Exemple: récupération dynamique via fetch (adaptable à ton backend)
            fetch(`/admin/institutions/${institutionId}/users`)
                .then(res => res.json())
                .then(data => {
                    data.users.forEach(user => {
                        const option = document.createElement('option');
                        option.value = user.id;
                        option.textContent = user.name;
                        userSelect.appendChild(option);
                    });
                })
                .catch(err => console.error('Erreur récupération utilisateurs:', err));
        });
    </script>
    @if (session('modal') == 'user')
        <script>
            window.addEventListener('load', function() {
                new bootstrap.Modal(document.getElementById('confirm')).show();
            });
        </script>
    @endif
@endsection