@extends('layouts.dashboard')

@section('title', 'Gestion des utilisateurs')

@push('styles')
<style>
    .page-header {
        margin-bottom: 2rem;
    }
    
    .page-title {
        font-size: 1.75rem;
        font-weight: 600;
        color: #1f2937;
        margin-bottom: 0.5rem;
    }
    
    .page-subtitle {
        color: #6b7280;
        font-size: 1rem;
    }
    
    .main-card {
        background: white;
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        padding: 1.5rem;
        transition: all 0.2s ease;
    }
    
    .main-card:hover {
        border-color: #10b981;
        box-shadow: 0 1px 3px rgba(16, 185, 129, 0.1);
    }
    
    .section-title {
        font-size: 1.25rem;
        font-weight: 600;
        color: #1f2937;
        margin-bottom: 1.5rem;
    }
    
    .table {
        background: white;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        border: 1px solid #e5e7eb;
    }
    
    .table th {
        background: #f8fafc;
        border: none;
        border-bottom: 2px solid #e5e7eb;
        font-weight: 700;
        color: #1f2937;
        padding: 1.25rem 1rem;
        font-size: 0.8rem;
        text-transform: uppercase;
        letter-spacing: 0.1em;
    }
    
    .table td {
        padding: 1.25rem 1rem;
        vertical-align: middle;
        border-bottom: 1px solid #f1f5f9;
        background: white;
    }
    
    .table tbody tr {
        transition: all 0.2s ease;
    }
    
    .table tbody tr:hover {
        background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%);
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(83, 191, 133, 0.1);
    }
    
    .table tbody tr:last-child td {
        border-bottom: none;
    }
    
    .user-info {
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }
    
    .user-avatar {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        object-fit: cover;
        border: 3px solid #53bf85;
        box-shadow: 0 2px 8px rgba(83, 191, 133, 0.2);
    }
    
    .user-avatar-placeholder {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        background: linear-gradient(135deg, #53bf85 0%, #4ab377 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-weight: 700;
        font-size: 1rem;
        text-transform: uppercase;
        border: 3px solid #53bf85;
        box-shadow: 0 2px 8px rgba(83, 191, 133, 0.3);
    }
    
    .user-details h6 {
        margin: 0 0 0.5rem 0;
        font-weight: 700;
        color: #1f2937;
        font-size: 1rem;
        line-height: 1.3;
    }
    
    .user-details small {
        color: #6b7280;
        font-size: 0.85rem;
        font-weight: 500;
        line-height: 1.3;
        background: #f8fafc;
        padding: 0.25rem 0.75rem;
        border-radius: 6px;
        display: inline-block;
    }
    
    .role-badge {
        padding: 0.25rem 0.75rem;
        border-radius: 20px;
        font-size: 0.75rem;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }
    
    .role-user {
        background-color: #dbeafe;
        color: #1e40af;
    }
    
    .role-admin {
        background-color: #fef3c7;
        color: #d97706;
    }
    
    .role-super_admin {
        background-color: #fce7f3;
        color: #be185d;
    }
    
    .last-login {
        font-size: 0.875rem;
        color: #6b7280;
    }
    
    .last-login.never {
        color: #9ca3af;
        font-style: italic;
    }
    
    .action-buttons {
        display: flex;
        gap: 0.75rem;
        justify-content: center;
        align-items: center;
    }
    
    .action-btn {
        width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.2s ease;
        text-decoration: none;
        cursor: pointer;
        background: transparent;
        border: none;
        padding: 0;
    }
    
    .action-btn:hover {
        transform: scale(1.1);
        text-decoration: none;
    }
    
    .action-btn svg {
        width: 18px;
        height: 18px;
    }
    
    .action-btn-edit {
        color: #53bf85;
    }
    
    .action-btn-edit:hover {
        color: #4ab377;
    }
    
    .action-btn-delete {
        color: #ef4444;
    }
    
    .action-btn-delete:hover {
        color: #dc2626;
    }
    
    .action-btn-email {
        color: #3b82f6;
    }
    
    .action-btn-email:hover {
        color: #2563eb;
    }
    
    .badge {
        font-size: 0.75rem;
        font-weight: 600;
        padding: 0.5rem 1rem;
        border-radius: 25px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
    
    .badge.bg-info {
        background-color: #dbeafe !important;
        color: #1e40af !important;
    }
    
    .badge.bg-success {
        background-color: #dcfce7 !important;
        color: #166534 !important;
    }
    
    .badge.bg-primary {
        background-color: #e0e7ff !important;
        color: #3730a3 !important;
    }
    
    .table tbody tr:last-child td {
        border-bottom: none;
    }
    
    .empty-state {
        text-align: center;
        padding: 3rem 1rem;
        color: #6b7280;
    }
    
    .empty-state i {
        font-size: 3rem;
        margin-bottom: 1rem;
        opacity: 0.5;
    }
    
    .empty-state h5 {
        color: #9ca3af;
        margin-bottom: 0.5rem;
    }
    
    .empty-state p {
        margin-bottom: 0;
    }
    
    /* Styles pour la barre de recherche */
    .search-container {
        position: relative;
    }
    
    .search-input-wrapper {
        position: relative;
        display: flex;
        align-items: center;
    }
    
    .search-icon {
        position: absolute;
        left: 12px;
        color: #6b7280;
        z-index: 2;
    }
    
    .search-input {
        width: 100%;
        padding: 0.75rem 1rem 0.75rem 3rem;
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        font-size: 0.875rem;
        background: white;
        transition: all 0.2s ease;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }
    
    .search-input:focus {
        outline: none;
        border-color: #53bf85;
        box-shadow: 0 0 0 0.2rem rgba(83, 191, 133, 0.25);
    }
    
    .search-input::placeholder {
        color: #9ca3af;
    }
    
    /* Styles pour le filtre de rôle personnalisé */
    .role-filter-wrapper {
        position: relative;
        width: 100%;
    }

    .role-filter-custom-select {
        position: relative;
        width: 100%;
    }

    .role-filter-custom-select-trigger {
        background-color: white;
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        padding: 0.75rem 1rem;
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        align-items: center;
        transition: all 0.15s ease-in-out;
        min-height: 48px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }

    .role-filter-custom-select-trigger:hover {
        border-color: #53bf85;
        box-shadow: 0 0 0 0.1rem rgba(83, 191, 133, 0.15);
    }

    .role-filter-custom-select-trigger.active {
        border-color: #53bf85;
        box-shadow: 0 0 0 0.1rem rgba(83, 191, 133, 0.15);
    }

    .role-filter-custom-select-arrow {
        width: 16px;
        height: 16px;
        transition: transform 0.15s ease-in-out;
        color: #6c757d;
    }

    .role-filter-custom-select.active .role-filter-custom-select-arrow {
        transform: rotate(180deg);
    }

    .role-filter-custom-select-options {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background-color: white;
        border: 1px solid #e5e7eb;
        border-top: none;
        border-radius: 0 0 8px 8px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        z-index: 1000;
        max-height: 200px;
        overflow-y: auto;
        display: none;
    }

    .role-filter-custom-select.active .role-filter-custom-select-options {
        display: block;
    }

    .role-filter-custom-select-option {
        padding: 0.75rem 1rem;
        cursor: pointer;
        transition: background-color 0.15s ease-in-out;
        color: #495057;
    }

    .role-filter-custom-select-option:hover {
        background-color: rgba(83, 191, 133, 0.1);
        color: #495057;
    }

    .role-filter-custom-select-option.selected {
        background-color: #e9ecef;
        color: #495057;
    }

    .role-filter-custom-select-option.selected:hover {
        background-color: rgba(83, 191, 133, 0.15);
        color: #495057;
    }
    
    
    .role-select:hover {
        border-color: #57C489;
        background-color: #f9fafb;
    }
    
    .role-select:focus {
        border-color: #57C489;
        box-shadow: 0 0 0 0.2rem rgba(87, 196, 137, 0.25);
        outline: none;
    }
    
    .role-select option {
        padding: 0.5rem;
        background: white;
        color: #374151;
    }
    
    .btn-primary {
        background-color: #10b981;
        border-color: #10b981;
    }
    
    .btn-primary:hover {
        background-color: #059669;
        border-color: #059669;
    }
    
    .btn-outline-danger:hover {
        background-color: #dc2626;
        border-color: #dc2626;
    }

    /* Styles pour les filtres - Identiques au super-admin-dashboard */
    .filter-container {
        background: white;
        border: 1px solid #e5e7eb;
        border-radius: 12px;
        padding: 0;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        overflow: hidden;
    }

    .filter-tabs {
        display: flex;
        background: #f8f9fa;
        border-bottom: 1px solid #e5e7eb;
    }

    .filter-tab {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 1rem 1.5rem;
        background: white;
        border: none;
        cursor: pointer;
        transition: all 0.3s ease;
        position: relative;
        gap: 0.5rem;
        white-space: nowrap;
        color: #57C489;
    }

    .filter-tab .tab-icon {
        color: #57C489;
    }

    .filter-tab:hover {
        background: #f0fdf4;
        color: #57C489;
    }

    .filter-tab:hover .tab-icon {
        color: #57C489;
    }

    .filter-tab.active {
        background: #57C489;
        color: white;
    }

    .filter-tab.active .tab-icon {
        color: white;
    }

    .filter-tab.active::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 3px;
        background-color: #57C489;
    }

    .tab-content {
        animation: fadeIn 0.3s ease-in;
    }

    @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }

    .table-striped tbody tr:nth-of-type(odd) {
        background-color: rgba(0,0,0,.02);
    }
    
    /* Styles pour les modals personnalisées */
    .confirm-modal {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 99999999;
    }
    
    .confirm-modal-content {
        background: white;
        padding: 2rem;
        border-radius: 8px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
        max-width: 400px;
        width: 90%;
        text-align: center;
    }
    
    .confirm-modal h3 {
        margin-bottom: 1rem;
        color: #333;
        font-size: 1.25rem;
    }
    
    .confirm-modal p {
        margin-bottom: 2rem;
        color: #666;
        line-height: 1.5;
        white-space: pre-line;
    }
    
    .confirm-modal-buttons {
        display: flex;
        gap: 1rem;
        justify-content: center;
    }
    
    .confirm-modal-btn {
        padding: 0.75rem 1.5rem;
        border: none;
        border-radius: 6px;
        cursor: pointer;
        font-weight: 500;
        transition: all 0.2s ease;
    }
    
    .confirm-modal-btn-cancel {
        background-color: #6c757d;
        color: white;
    }
    
    .confirm-modal-btn-cancel:hover {
        background-color: #5a6268;
    }
    
    .confirm-modal-btn-confirm {
        background-color: #dc3545;
        color: white;
    }
    
    .confirm-modal-btn-confirm:hover {
        background-color: #c82333;
    }
</style>
@endpush

@section('content')
<div class="container-fluid">
    <!-- En-tête de la page -->
    <div class="page-header">
        <h1 class="page-title">Gestion des Utilisateurs</h1>
        <p class="page-subtitle">Gérez les utilisateurs, entreprises et franchises de votre plateforme</p>
    </div>

    <!-- Onglets principaux -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="filter-container">
                <div class="filter-tabs">
                    <button class="filter-tab active" data-tab="utilisateurs">
                        <svg class="tab-icon" width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
                            <path d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
                        </svg>
                        <span>Utilisateurs</span>
                    </button>
                    <button class="filter-tab" data-tab="entreprises">
                        <svg class="tab-icon" width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
                            <path d="M12 7V3H2v18h20V7H12zM6 19H4v-2h2v2zm0-4H4v-2h2v2zm0-4H4V9h2v2zm0-4H4V5h2v2zm4 12H8v-2h2v2zm0-4H8v-2h2v2zm0-4H8V9h2v2zm0-4H8V5h2v2zm10 12h-8v-2h2v-2h-2v-2h2v-2h-2V9h8v10zm-2-8h-2v2h2v-2zm0 4h-2v2h2v-2z"/>
                        </svg>
                        <span>Entreprises</span>
                    </button>
                    <button class="filter-tab" data-tab="franchises">
                        <svg class="tab-icon" width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
                            <path d="M3 21h18v-2H3v2zm0-4h18v-2H3v2zm0-4h18v-2H3v2zm0-4h18V7H3v2zm0-6v2h18V3H3z"/>
                        </svg>
                        <span>Franchises</span>
                    </button>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Contenu des onglets -->
    <div class="row">
        <div class="col-12">
            <div class="main-card">
                <!-- Onglet Utilisateurs -->
                <div id="tab-utilisateurs" class="tab-content">
                <div class="d-flex justify-content-between align-items-center mb-4">
                        <h2 class="section-title mb-0">Gestion des Utilisateurs</h2>
                        <a href="{{ route('admin.users.create') }}" class="btn btn-primary">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" class="me-2">
                            <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/>
                        </svg>
                            Nouvel Utilisateur
                        </a>
                    </div>
                    
                    <!-- Barre de recherche et filtres -->
                    <div class="row mb-4">
                        <div class="col-md-8">
                            <div class="search-container">
                                <div class="search-input-wrapper">
                                    <svg class="search-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                        <circle cx="11" cy="11" r="8"></circle>
                                        <path d="m21 21-4.35-4.35"></path>
                                    </svg>
                                    <input type="text" id="userSearch" class="search-input" placeholder="Rechercher par nom, email, rôle ou entreprise...">
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="role-filter-wrapper">
                                <div class="role-filter-custom-select" data-target="roleFilter">
                                    <div class="role-filter-custom-select-trigger">
                                        <span class="selected-value">Tous les rôles</span>
                                        <svg class="role-filter-custom-select-arrow" viewBox="0 0 24 24" fill="currentColor">
                                            <path d="M7 10l5 5 5-5z"/>
                                        </svg>
                                    </div>
                                    <div class="role-filter-custom-select-options">
                                        <div class="role-filter-custom-select-option selected" data-value="">Tous les rôles</div>
                                        <div class="role-filter-custom-select-option" data-value="user">Utilisateur</div>
                                        <div class="role-filter-custom-select-option" data-value="admin">Administrateur</div>
                                        <div class="role-filter-custom-select-option" data-value="super_admin">Super Admin</div>
                                    </div>
                                </div>
                                <select id="roleFilter" style="display: none;">
                                    <option value="">Tous les rôles</option>
                                    <option value="user">Utilisateur</option>
                                    <option value="admin">Administrateur</option>
                                    <option value="super_admin">Super Admin</option>
                                </select>
                            </div>
                        </div>
                </div>
                
                <div class="table-responsive">
                        <table class="table">
                        <thead>
                            <tr>
                                    <th>Utilisateur</th>
                                <th>Rôle</th>
                                    <th>Entreprise</th>
                                    <th>Franchise</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                                @foreach($users as $user)
                            <tr>
                                <td>
                                        <div class="user-info">
                                            @if($user->profile_photo)
                                                <img src="{{ asset('storage/' . $user->profile_photo) }}" 
                                             alt="Photo de profil" 
                                                     class="user-avatar"
                                                     onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
                                                <div class="user-avatar-placeholder" style="display: none;">
                                                    {{ substr($user->name, 0, 1) }}
                                                </div>
                                            @else
                                                <img src="{{ asset('assets/favicon.png') }}" 
                                                     alt="Photo de profil" 
                                                     class="user-avatar">
                                            @endif
                                            <div class="user-details">
                                                <h6>{{ $user->name }}</h6>
                                                <small>{{ $user->email }}</small>
                                            </div>
                                    </div>
                                </td>
                                <td>
                                        <span class="badge" style="background-color: rgba(83, 191, 133, 0.2); color: #53bf85; border: 1px solid rgba(83, 191, 133, 0.3);">
                                            @if($user->role === 'user')
                                                Utilisateur
                                            @elseif($user->role === 'admin')
                                                Administrateur
                                            @elseif($user->role === 'super_admin')
                                                Super Admin
                                            @else
                                                Utilisateur
                                            @endif
                                        </span>
                                </td>
                                <td>
                                        @if($user->companies && $user->companies->count() > 0)
                                            @foreach($user->companies as $company)
                                                <span class="badge me-1 mb-1" style="background-color: rgba(16, 185, 129, 0.2); color: #10b981; border: 1px solid rgba(16, 185, 129, 0.3);">{{ $company->name }}</span>
                                            @endforeach
                                        @else
                                            <span class="text-muted">Aucune</span>
                                        @endif
                                </td>
                                <td>
                                        @if($user->franchises && $user->franchises->count() > 0)
                                            @foreach($user->franchises as $franchise)
                                                <span class="badge me-1 mb-1" style="background-color: rgba(16, 185, 129, 0.2); color: #10b981; border: 1px solid rgba(16, 185, 129, 0.3);">{{ $franchise->name }}</span>
                                            @endforeach
                                        @else
                                            <span class="text-muted">Aucune</span>
                                        @endif
                                </td>
                                <td>
                                        <div class="action-buttons">
                                            <a href="/admin/edit-user/{{ $user->id }}" class="action-btn action-btn-edit" title="Modifier" onclick="console.log('URL générée:', '/admin/edit-user/{{ $user->id }}'); console.log('User ID:', {{ $user->id }});">
                                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                                    <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/>
                                                    <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/>
                                                </svg>
                                            </a>
                                            <button type="button" class="action-btn action-btn-delete" 
                                                    onclick="confirmDelete({{ $user->id }}, '{{ $user->name }}')" title="Supprimer">
                                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                                    <polyline points="3,6 5,6 21,6"/>
                                                    <path d="M19,6v14a2,2 0 0,1 -2,2H7a2,2 0 0,1 -2,-2V6m3,0V4a2,2 0 0,1 2,-2h4a2,2 0 0,1 2,2v2"/>
                                                    <line x1="10" y1="11" x2="10" y2="17"/>
                                                    <line x1="14" y1="11" x2="14" y2="17"/>
                                                </svg>
                                            </button>
                                        </div>
                                </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
                
                <!-- Onglet Entreprises -->
                <div id="tab-entreprises" class="tab-content" style="display: none;">
                    <div class="d-flex justify-content-between align-items-center mb-4">
                        <h2 class="section-title mb-0">Gestion des Entreprises</h2>
                        <a href="{{ route('admin.companies.create') }}" class="btn btn-primary">
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" class="me-2">
                                <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/>
                            </svg>
                            Nouvelle Entreprise
                        </a>
                    </div>
                    
                    <!-- Barre de recherche pour entreprises -->
                    <div class="row mb-4">
                        <div class="col-12">
                            <div class="search-container">
                                <div class="search-input-wrapper">
                                    <svg class="search-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                        <circle cx="11" cy="11" r="8"></circle>
                                        <path d="m21 21-4.35-4.35"></path>
                                    </svg>
                                    <input type="text" id="companySearch" class="search-input" placeholder="Rechercher par nom d'entreprise, SIRET, contact, email ou téléphone...">
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="table-responsive">
                        <table class="table">
                            <thead>
                                <tr>
                                    <th>Entreprise</th>
                                    <th>Contact</th>
                                    <th>Propriétaire</th>
                                    <th>Effectif</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($companies as $company)
                                <tr>
                                    <td>
                                        <div class="user-info">
                                            @if($company->logo)
                                                <div class="user-avatar" style="width: 40px; height: 40px; border-radius: 50%; overflow: hidden; background-color: #f8f9fa; display: flex; align-items: center; justify-content: center; border: 2px solid #e5e7eb;">
                                                    <img src="{{ asset('storage/' . $company->logo) }}" alt="Logo {{ $company->name }}" style="width: 100%; height: 100%; object-fit: cover;" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
                                                    <div class="user-avatar-placeholder" style="background: linear-gradient(135deg, #53bf85 0%, #4ab377 100%); box-shadow: 0 2px 8px rgba(83, 191, 133, 0.3); display: none; width: 100%; height: 100%; align-items: center; justify-content: center;">
                                                        <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
                                                            <path d="M12 7V3H2v18h20V7H12zM6 19H4v-2h2v2zm0-4H4v-2h2v2zm0-4H4V9h2v2zm0-4H4V5h2v2zm4 12H8v-2h2v2zm0-4H8v-2h2v2zm0-4H8V9h2v2zm0-4H8V5h2v2zm10 12h-8v-2h2v-2h-2v-2h2v-2h-2V9h8v10zm-2-8h-2v2h2v-2zm0 4h-2v2h2v-2z"/>
                                                        </svg>
                                                    </div>
                                                </div>
                                            @else
                                                <div class="user-avatar" style="width: 40px; height: 40px; border-radius: 50%; overflow: hidden; background-color: #f8f9fa; display: flex; align-items: center; justify-content: center; border: 2px solid #e5e7eb;">
                                                    <img src="{{ asset('assets/Logo_reduit.png') }}" alt="Logo par défaut" style="width: 100%; height: 100%; object-fit: cover;">
                                                </div>
                                            @endif
                                            <div class="user-details">
                                                <h6>{{ $company->name }}</h6>
                                                <small>{{ $company->siret ?? 'SIRET non renseigné' }}</small>
                                            </div>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="user-details">
                                            <h6 style="font-size: 0.875rem; margin-bottom: 0.25rem;">{{ $company->contact_name ?? 'Non renseigné' }}</h6>
                                            <small>{{ $company->contact_email ?? 'Email non renseigné' }}</small>
                                            <br>
                                            <small>{{ $company->contact_phone ?? 'Téléphone non renseigné' }}</small>
                                        </div>
                                    </td>
                                    <td>
                                        @if($company->owners && $company->owners->count() > 0)
                                            @foreach($company->owners as $owner)
                                                <div class="user-details">
                                                    <h6 style="font-size: 0.875rem; margin-bottom: 0.25rem;">{{ $owner->name ?? 'Non renseigné' }}</h6>
                                                    <small>{{ $owner->email ?? 'Email non renseigné' }}</small>
                                                </div>
                                                @if(!$loop->last)<br>@endif
                                            @endforeach
                                        @else
                                            <span class="text-muted">Aucun propriétaire</span>
                                        @endif
                                    </td>
                                    <td>
                                        @if($company->users && $company->users->count() > 0)
                                            <span class="badge" style="background-color: rgba(83, 191, 133, 0.2); color: #53bf85; border: 1px solid rgba(83, 191, 133, 0.3);">
                                                {{ $company->users->count() }} utilisateur{{ $company->users->count() > 1 ? 's' : '' }}
                                            </span>
                                        @else
                                            <span class="text-muted">0 utilisateur</span>
                                        @endif
                                    </td>
                                    <td>
                                        <div class="action-buttons">
                                            <a href="{{ route('admin.companies.edit', $company->id) }}" class="action-btn action-btn-edit" title="Modifier">
                                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                                    <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/>
                                                    <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/>
                                            </svg>
                                        </a>
                                            <button type="button" class="action-btn action-btn-delete" 
                                                    onclick="confirmDeleteCompany({{ $company->id }}, '{{ $company->name }}')" title="Supprimer">
                                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                                    <polyline points="3,6 5,6 21,6"/>
                                                    <path d="M19,6v14a2,2 0 0,1 -2,2H7a2,2 0 0,1 -2,-2V6m3,0V4a2,2 0 0,1 2,-2h4a2,2 0 0,1 2,2v2"/>
                                                    <line x1="10" y1="11" x2="10" y2="17"/>
                                                    <line x1="14" y1="11" x2="14" y2="17"/>
                                            </svg>
                                        </button>
                                    </div>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
                
                <!-- Onglet Franchises -->
                <div id="tab-franchises" class="tab-content" style="display: none;">
                    <div class="d-flex justify-content-between align-items-center mb-4">
                        <h2 class="section-title mb-0">Gestion des Franchises</h2>
                        <a href="{{ route('franchises.create') }}" class="btn btn-primary">
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" class="me-2">
                                <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/>
                            </svg>
                            Nouvelle Franchise
                        </a>
                    </div>
                    
                    <!-- Barre de recherche pour franchises -->
                    <div class="row mb-4">
                        <div class="col-12">
                            <div class="search-container">
                                <div class="search-input-wrapper">
                                    <svg class="search-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                        <circle cx="11" cy="11" r="8"></circle>
                                        <path d="m21 21-4.35-4.35"></path>
                                    </svg>
                                    <input type="text" id="franchiseSearch" class="search-input" placeholder="Rechercher par nom de franchise, code, SIRET, contact, email ou téléphone...">
                                </div>
        </div>
    </div>
</div>

                    <div class="table-responsive">
                        <table class="table">
                            <thead>
                                <tr>
                                    <th>Franchise</th>
                                    <th>Contact</th>
                                    <th>Effectif</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($franchises as $franchise)
                                <tr>
                                    <td>
                                        <div class="user-info">
                                            <div class="user-avatar" style="width: 40px; height: 40px; border-radius: 50%; overflow: hidden; background-color: #f8f9fa; display: flex; align-items: center; justify-content: center; border: 2px solid #e5e7eb;">
                                                @if($franchise->logo)
                                                    <img src="{{ asset('storage/' . $franchise->logo) }}" alt="Logo franchise" style="width: 100%; height: 100%; object-fit: cover;">
                                                @else
                                                    <img src="{{ asset('assets/Logo_reduit.png') }}" alt="Logo par défaut" style="width: 100%; height: 100%; object-fit: cover;">
                                                @endif
            </div>
                                            <div class="user-details">
                                                <h6>{{ $franchise->name }}</h6>
                                                <small>{{ $franchise->franchise_code ?? 'Code non renseigné' }}</small>
                    </div>
                    </div>
                                    </td>
                                    <td>
                                        <div class="user-details">
                                            <h6 style="font-size: 0.875rem; margin-bottom: 0.25rem;">{{ $franchise->contact_name ?? 'Non renseigné' }}</h6>
                                            <small>{{ $franchise->contact_email ?? 'Email non renseigné' }}</small>
                                            <br>
                                            <small>{{ $franchise->contact_phone ?? 'Téléphone non renseigné' }}</small>
                    </div>
                                    </td>
                                    <td>
                                        <span class="badge" style="background-color: rgba(83, 191, 133, 0.2); color: #53bf85; border: 1px solid rgba(83, 191, 133, 0.3);">
                                            {{ $franchise->users_count ?? 0 }} franchisé{{ ($franchise->users_count ?? 0) > 1 ? 's' : '' }}
                                        </span>
                                    </td>
                                    <td>
                                        <div class="action-buttons">
                                            <a href="{{ route('franchises.edit', $franchise->id) }}" class="action-btn action-btn-edit" title="Modifier">
                                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                                    <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/>
                                                    <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/>
                        </svg>
                                            </a>
                                            <button type="button" class="action-btn action-btn-delete" 
                                                    onclick="confirmDeleteFranchise({{ $franchise->id }}, '{{ $franchise->name }}')" title="Supprimer">
                                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                                    <polyline points="3,6 5,6 21,6"/>
                                                    <path d="M19,6v14a2,2 0 0,1 -2,2H7a2,2 0 0,1 -2,-2V6m3,0V4a2,2 0 0,1 2,-2h4a2,2 0 0,1 2,2v2"/>
                                                    <line x1="10" y1="11" x2="10" y2="17"/>
                                                    <line x1="14" y1="11" x2="14" y2="17"/>
                                                </svg>
                                            </button>
                    </div>
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal de suppression d'utilisateur -->
<div class="modal fade" id="deleteUserModal" tabindex="-1" aria-labelledby="deleteUserModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="deleteUserModalLabel">Confirmer la suppression</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p>Êtes-vous sûr de vouloir supprimer l'utilisateur <strong id="deleteUserName"></strong> ?</p>
                <p class="text-danger"><strong>Cette action est irréversible.</strong></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
                <button type="button" class="btn btn-danger" id="confirmDeleteUser">Supprimer</button>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script nonce="{{ $cspNonce }}">
// Fonctions de modal personnalisées
function showConfirmDialog(title, message, onConfirm) {
    const modal = document.createElement('div');
    modal.className = 'confirm-modal';
    modal.innerHTML = `
        <div class="confirm-modal-content">
            <h3>${title}</h3>
            <p>${message}</p>
            <div class="confirm-modal-buttons">
                <button class="confirm-modal-btn confirm-modal-btn-cancel">Annuler</button>
                <button class="confirm-modal-btn confirm-modal-btn-confirm">Confirmer</button>
            </div>
        </div>
    `;
    
    document.body.appendChild(modal);
    
    const cancelBtn = modal.querySelector('.confirm-modal-btn-cancel');
    const confirmBtn = modal.querySelector('.confirm-modal-btn-confirm');
    
    cancelBtn.addEventListener('click', () => {
        modal.remove();
    });
    
    confirmBtn.addEventListener('click', () => {
        modal.remove();
        onConfirm();
    });
    
    modal.addEventListener('click', (e) => {
        if (e.target === modal) {
            modal.remove();
        }
    });
}

function showErrorDialog(title, message) {
    const modal = document.createElement('div');
    modal.className = 'confirm-modal';
    modal.innerHTML = `
        <div class="confirm-modal-content">
            <h3 style="color: #dc3545;">${title}</h3>
            <p>${message}</p>
            <div class="confirm-modal-buttons">
                <button class="confirm-modal-btn confirm-modal-btn-cancel" style="background-color: #dc3545;">Fermer</button>
            </div>
        </div>
    `;
    
    document.body.appendChild(modal);
    
    const closeBtn = modal.querySelector('.confirm-modal-btn-cancel');
    
    closeBtn.addEventListener('click', () => {
        modal.remove();
    });
    
    modal.addEventListener('click', (e) => {
        if (e.target === modal) {
            modal.remove();
        }
    });
}

function showSuccessDialog(title, message) {
    const modal = document.createElement('div');
    modal.className = 'confirm-modal';
    modal.innerHTML = `
        <div class="confirm-modal-content">
            <h3 style="color: #28a745;">${title}</h3>
            <p>${message}</p>
            <div class="confirm-modal-buttons">
                <button class="confirm-modal-btn confirm-modal-btn-cancel" style="background-color: #28a745;">Fermer</button>
            </div>
        </div>
    `;
    
    document.body.appendChild(modal);
    
    const closeBtn = modal.querySelector('.confirm-modal-btn-cancel');
    
    closeBtn.addEventListener('click', () => {
        modal.remove();
    });
    
    modal.addEventListener('click', (e) => {
        if (e.target === modal) {
            modal.remove();
        }
    });
}

document.addEventListener('DOMContentLoaded', function() {
    // Gestion des onglets - Identique au super-admin-dashboard
    const tabButtons = document.querySelectorAll('.filter-tab');
    const tabContents = document.querySelectorAll('.tab-content');

    tabButtons.forEach(button => {
        button.addEventListener('click', function() {
            const targetTab = this.getAttribute('data-tab');
            
            // Retirer la classe active de tous les boutons
            tabButtons.forEach(btn => btn.classList.remove('active'));
            
            // Ajouter la classe active au bouton cliqué
            this.classList.add('active');
            
            // Masquer tous les contenus d'onglets
            tabContents.forEach(content => {
                content.style.display = 'none';
            });
            
            // Afficher le contenu de l'onglet sélectionné
            const targetContent = document.getElementById('tab-' + targetTab);
            if (targetContent) {
                targetContent.style.display = 'block';
            }
        });
    });


});

// Gestion de la modal de suppression
let userToDelete = null;

document.addEventListener('DOMContentLoaded', function() {
    // Gérer l'ouverture de la modal de suppression
    document.addEventListener('click', function(e) {
        if (e.target.closest('[data-bs-target="#deleteUserModal"]')) {
            const button = e.target.closest('[data-bs-target="#deleteUserModal"]');
            userToDelete = button.dataset.userId;
            document.getElementById('deleteUserName').textContent = button.dataset.userName;
        }
    });
    
    // Gérer la confirmation de suppression
    document.getElementById('confirmDeleteUser').addEventListener('click', function() {
        if (userToDelete) {
            deleteUser(userToDelete);
        }
    });
});

function confirmDelete(userId, userName) {
    userToDelete = userId;
    document.getElementById('deleteUserName').textContent = userName;
    const modal = new bootstrap.Modal(document.getElementById('deleteUserModal'));
    modal.show();
}

function deleteUser(userId) {
    fetch(`/admin/users/${userId}`, {
        method: 'DELETE',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            // Fermer la modal
            const modal = bootstrap.Modal.getInstance(document.getElementById('deleteUserModal'));
            modal.hide();
            // Recharger la page
            location.reload();
        } else {
            showErrorDialog('Erreur', 'Erreur lors de la suppression de l\'utilisateur');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        showErrorDialog('Erreur', 'Erreur lors de la suppression de l\'utilisateur');
    });
}

function updateRoleCounts() {
    // Cette fonction sera appelée après une mise à jour de rôle
    // Pour l'instant, on recharge la page pour mettre à jour les compteurs
    setTimeout(() => {
        location.reload();
    }, 1000);
}

// Fonctions pour les entreprises
function sendCompanyEmail(companyId) {
    fetch(`/admin/companies/${companyId}/send-email`, {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            showSuccessDialog('Succès', 'Email envoyé avec succès !');
        } else {
            showErrorDialog('Erreur', 'Erreur lors de l\'envoi de l\'email');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        showErrorDialog('Erreur', 'Erreur lors de l\'envoi de l\'email');
    });
}

function confirmDeleteCompany(companyId, companyName) {
    showConfirmDialog(
        'Supprimer l\'entreprise',
        `Êtes-vous sûr de vouloir supprimer l'entreprise "${companyName}" ?\n\nCette action est irréversible.`,
        () => deleteCompany(companyId)
    );
}

function deleteCompany(companyId) {
    fetch(`/admin/companies/${companyId}`, {
        method: 'DELETE',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            location.reload();
        } else {
            showErrorDialog('Erreur', 'Erreur lors de la suppression de l\'entreprise');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        showErrorDialog('Erreur', 'Erreur lors de la suppression de l\'entreprise');
    });
}

// Fonctions pour les franchises
function sendFranchiseEmail(franchiseId) {
    fetch(`/admin/franchises/${franchiseId}/send-email`, {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            showSuccessDialog('Succès', 'Email envoyé avec succès !');
        } else {
            showErrorDialog('Erreur', 'Erreur lors de l\'envoi de l\'email');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        showErrorDialog('Erreur', 'Erreur lors de l\'envoi de l\'email');
    });
}

function confirmDeleteFranchise(franchiseId, franchiseName) {
    if (confirm(`Êtes-vous sûr de vouloir supprimer la franchise "${franchiseName}" ?\n\nCette action est irréversible.`)) {
        deleteFranchise(franchiseId);
    }
}

function deleteFranchise(franchiseId) {
    fetch(`/admin/franchises/${franchiseId}`, {
        method: 'DELETE',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            location.reload();
        } else {
            showErrorDialog('Erreur', 'Erreur lors de la suppression de la franchise');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        showErrorDialog('Erreur', 'Erreur lors de la suppression de la franchise');
    });
}

// Fonction de recherche et filtrage
function filterUsers() {
    const searchTerm = document.getElementById('userSearch').value.toLowerCase();
    const roleFilter = document.getElementById('roleFilter').value;
    const userRows = document.querySelectorAll('#tab-utilisateurs tbody tr');
    
    userRows.forEach(function(row) {
        const name = row.querySelector('h6')?.textContent.toLowerCase() || '';
        const email = row.querySelector('small')?.textContent.toLowerCase() || '';
        const role = row.querySelector('.badge')?.textContent.toLowerCase() || '';
        const companies = Array.from(row.querySelectorAll('.badge')).map(badge => badge.textContent.toLowerCase()).join(' ');
        
        const matchesSearch = !searchTerm || 
            name.includes(searchTerm) || 
            email.includes(searchTerm) || 
            role.includes(searchTerm) || 
            companies.includes(searchTerm);
        
        const matchesRole = !roleFilter || 
            (roleFilter === 'user' && role.includes('utilisateur')) ||
            (roleFilter === 'admin' && role.includes('administrateur')) ||
            (roleFilter === 'super_admin' && role.includes('super admin'));
        
        if (matchesSearch && matchesRole) {
            row.style.display = '';
        } else {
            row.style.display = 'none';
        }
    });
}

// Fonction de filtrage des entreprises
function filterCompanies() {
    const searchTerm = document.getElementById('companySearch').value.toLowerCase();
    const companyRows = document.querySelectorAll('#tab-entreprises tbody tr');
    
    companyRows.forEach(function(row) {
        const companyName = row.querySelector('h6')?.textContent.toLowerCase() || '';
        const siret = row.querySelector('.user-details small')?.textContent.toLowerCase() || '';
        const contactName = row.querySelector('.user-details h6')?.textContent.toLowerCase() || '';
        const contactEmail = row.querySelector('.user-details small')?.textContent.toLowerCase() || '';
        const contactPhone = row.querySelectorAll('.user-details small')[1]?.textContent.toLowerCase() || '';
        
        const matchesSearch = !searchTerm || 
            companyName.includes(searchTerm) || 
            siret.includes(searchTerm) ||
            contactName.includes(searchTerm) || 
            contactEmail.includes(searchTerm) || 
            contactPhone.includes(searchTerm);
        
        if (matchesSearch) {
            row.style.display = '';
        } else {
            row.style.display = 'none';
        }
    });
}

// Fonction de filtrage des franchises
function filterFranchises() {
    const searchTerm = document.getElementById('franchiseSearch').value.toLowerCase();
    const franchiseRows = document.querySelectorAll('#tab-franchises tbody tr');
    
    franchiseRows.forEach(function(row) {
        const franchiseName = row.querySelector('h6')?.textContent.toLowerCase() || '';
        const siret = row.querySelector('.user-details small')?.textContent.toLowerCase() || '';
        const franchiseCode = row.querySelector('.badge')?.textContent.toLowerCase() || '';
        const contactName = row.querySelector('.user-details h6')?.textContent.toLowerCase() || '';
        const contactEmail = row.querySelector('.user-details small')?.textContent.toLowerCase() || '';
        const contactPhone = row.querySelectorAll('.user-details small')[1]?.textContent.toLowerCase() || '';
        
        const matchesSearch = !searchTerm || 
            franchiseName.includes(searchTerm) || 
            siret.includes(searchTerm) ||
            franchiseCode.includes(searchTerm) ||
            contactName.includes(searchTerm) || 
            contactEmail.includes(searchTerm) ||
            contactPhone.includes(searchTerm);
        
        if (matchesSearch) {
            row.style.display = '';
        } else {
            row.style.display = 'none';
        }
    });
}

// Événements de recherche et filtrage
document.addEventListener('DOMContentLoaded', function() {
    const searchInput = document.getElementById('userSearch');
    const roleFilter = document.getElementById('roleFilter');
    const companySearchInput = document.getElementById('companySearch');
    const franchiseSearchInput = document.getElementById('franchiseSearch');
    
    if (searchInput) {
        searchInput.addEventListener('input', filterUsers);
    }
    
    if (roleFilter) {
        roleFilter.addEventListener('change', filterUsers);
    }
    
    if (companySearchInput) {
        companySearchInput.addEventListener('input', filterCompanies);
    }
    
    if (franchiseSearchInput) {
        franchiseSearchInput.addEventListener('input', filterFranchises);
    }
    
    // Initialiser le menu déroulant personnalisé du filtre de rôle
    const roleFilterCustomSelect = document.querySelector('.role-filter-custom-select');
    if (roleFilterCustomSelect) {
        const trigger = roleFilterCustomSelect.querySelector('.role-filter-custom-select-trigger');
        const options = roleFilterCustomSelect.querySelectorAll('.role-filter-custom-select-option');
        const targetSelect = document.getElementById('roleFilter');
        const selectedValue = roleFilterCustomSelect.querySelector('.selected-value');
        
        // Gérer l'ouverture/fermeture du dropdown
        trigger.addEventListener('click', function(e) {
            e.stopPropagation();
            
            // Fermer tous les autres selects
            document.querySelectorAll('.role-filter-custom-select').forEach(function(otherSelect) {
                if (otherSelect !== roleFilterCustomSelect) {
                    otherSelect.classList.remove('active');
                }
            });
            
            // Toggle le select actuel
            roleFilterCustomSelect.classList.toggle('active');
        });
        
        // Gérer la sélection d'une option
        options.forEach(function(option) {
            option.addEventListener('click', function(e) {
                e.stopPropagation();
                
                const value = option.dataset.value;
                const text = option.textContent;
                
                // Mettre à jour l'affichage
                selectedValue.textContent = text;
                
                // Mettre à jour le select original
                targetSelect.value = value;
                
                // Mettre à jour les classes selected
                options.forEach(function(opt) {
                    opt.classList.remove('selected');
                });
                option.classList.add('selected');
                
                // Fermer le dropdown
                roleFilterCustomSelect.classList.remove('active');
                
                // Déclencher l'événement change sur le select original
                targetSelect.dispatchEvent(new Event('change'));
            });
        });
    }
    
    
    // Fermer les dropdowns quand on clique ailleurs
    document.addEventListener('click', function() {
        document.querySelectorAll('.role-filter-custom-select').forEach(function(customSelect) {
            customSelect.classList.remove('active');
        });
    });
});
</script>
@endpush