@extends('layouts.dashboard')

@section('title', 'Paramètres')
@section('page-title', '')

@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 !important;
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        padding: 1.5rem;
        transition: all 0.2s ease;
    }
    
    .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;
    }
    
    /* Alignement des colonnes Rôle et Actions */
    .table td:nth-child(2),
    .table td:nth-child(3) {
        vertical-align: middle;
        text-align: center;
    }
    
    .table th:nth-child(2),
    .table th:nth-child(3) {
        text-align: center;
    }
    
    .table tbody tr:hover {
        background: linear-gradient(135deg, #e8f5ea 0%, #d4f0dd 100%);
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(111, 184, 125, 0.1);
    }
    
    .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 #6fb87d;
        box-shadow: 0 2px 8px rgba(111, 184, 125, 0.2);
    }
    
    .user-avatar-placeholder {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        background: linear-gradient(135deg, #6fb87d 0%, #5da66d 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-weight: 700;
        font-size: 1rem;
        text-transform: uppercase;
        border: 3px solid #6fb87d;
        box-shadow: 0 2px 8px rgba(111, 184, 125, 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;
    }
    
    .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);
    }
    
    .action-btn-disabled {
        opacity: 0.5;
        cursor: not-allowed !important;
    }
    
    .action-btn-disabled:hover {
        transform: none;
        opacity: 0.5;
    }
    
    .action-btn svg {
        width: 18px;
        height: 18px;
    }
    
    .action-btn-delete {
        color: #ef4444;
    }
    
    .action-btn-delete:hover {
        color: #dc2626;
    }
    
    .action-btn:hover {
        transform: scale(1.1);
    }
    
    .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: #6fb87d;
        box-shadow: 0 0 0 0.2rem rgba(111, 184, 125, 0.25);
    }
    
    /* Styles pour les champs de formulaire */
    .form-control {
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        transition: all 0.2s ease;
    }
    
    .form-control:focus {
        outline: none;
        border-color: #6fb87d;
        box-shadow: 0 0 0 0.2rem rgba(111, 184, 125, 0.25);
    }
    
    .form-control:hover {
        border-color: #6fb87d;
    }
    
    /* Styles pour l'indicateur de force du mot de passe */
    .password-strength-indicator {
        margin-top: 0.5rem;
    }
    
    .strength-bar {
        height: 4px;
        background: #e9ecef;
        border-radius: 2px;
        overflow: hidden;
    }
    
    .strength-fill {
        height: 100%;
        width: 0%;
        transition: width 0.3s, background-color 0.3s;
    }
    
    .strength-text {
        font-size: 0.875rem;
        color: #6c757d;
        margin-top: 0.5rem;
    }
    
    .strength-requirements {
        margin-top: 0.75rem;
    }
    
    .requirement {
        display: flex;
        align-items: center;
        margin-bottom: 0.5rem;
    }
    
    .requirement-icon {
        margin-right: 0.5rem;
    }
    
    .requirement-text {
        font-size: 0.875rem;
    }
    
    .check-icon {
        display: none;
        color: #28a745;
    }
    
    .cross-icon {
        display: block;
        color: #dc3545;
    }
    
    .requirement.valid .check-icon {
        display: block;
    }
    
    .requirement.valid .cross-icon {
        display: none;
    }
    
    .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: #6fb87d;
        box-shadow: 0 0 0 0.1rem rgba(111, 184, 125, 0.15);
    }

    .role-filter-custom-select-trigger.active {
        border-color: #6fb87d;
        box-shadow: 0 0 0 0.1rem rgba(111, 184, 125, 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(111, 184, 125, 0.1);
    }

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

    .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;
    }
    
    .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;
    }
    
    /* Styles pour les boutons verts */
    .btn-primary {
        background-color: #6fb87d;
        border-color: #6fb87d;
        color: white;
    }
    
    .btn-primary:hover {
        background-color: #5da66d;
        border-color: #5da66d;
        color: white;
    }
    
    .btn-primary:focus {
        background-color: #5da66d;
        border-color: #5da66d;
        box-shadow: 0 0 0 0.2rem rgba(111, 184, 125, 0.25);
    }
    
    /* Styles pour les onglets */
    .tabs-container {
        border-bottom: 2px solid #e5e7eb;
        margin-bottom: 2rem;
    }
    
    .tabs-list {
        display: flex;
        gap: 0;
        list-style: none;
        padding: 0;
        margin: 0;
    }
    
    .tab-item {
        padding: 0.75rem 1.5rem;
        cursor: pointer;
        border-bottom: 3px solid transparent;
        color: #6b7280;
        font-weight: 500;
        transition: all 0.2s ease;
        background: transparent;
        border-top: none;
        border-left: none;
        border-right: none;
    }
    
    .tab-item:hover {
        color: #6fb87d;
        background: rgba(111, 184, 125, 0.05);
    }
    
    .tab-item.active {
        color: #6fb87d;
        border-bottom-color: #6fb87d;
        font-weight: 600;
    }
    
    .tab-content {
        display: none;
    }
    
    .tab-content.active {
        display: block;
    }
    
    /* Styles pour les webhooks */
    .webhook-url-container {
        display: flex;
        gap: 0.5rem;
        align-items: center;
        background: #f8fafc;
        padding: 0.75rem 1rem;
        border-radius: 8px;
        border: 1px solid #e5e7eb;
    }
    
    .webhook-url {
        flex: 1;
        font-family: monospace;
        font-size: 0.875rem;
        color: #1f2937;
        word-break: break-all;
        padding: 0.5rem;
        background: white;
        border: 1px solid #e5e7eb;
        border-radius: 6px;
    }
    
    .copy-btn {
        padding: 0.5rem 1rem;
        background: #6fb87d;
        color: white;
        border: none;
        border-radius: 6px;
        cursor: pointer;
        font-size: 0.875rem;
        font-weight: 500;
        transition: all 0.2s ease;
        white-space: nowrap;
    }
    
    .copy-btn:hover {
        background: #5da66d;
    }
    
    .copy-btn.copied {
        background: #6fb87d;
    }
    
    .alert {
        padding: 1rem;
        border-radius: 8px;
        margin-bottom: 1rem;
    }
    
    .alert-success {
        background-color: rgba(111, 184, 125, 0.1);
        border: 1px solid rgba(111, 184, 125, 0.3);
        color: #6fb87d;
    }
    
    .alert-error {
        background-color: rgba(239, 68, 68, 0.1);
        border: 1px solid rgba(239, 68, 68, 0.3);
        color: #ef4444;
    }
</style>
@endpush

@section('content')
<div class="container-fluid px-4 py-4" style="padding-left: 1.5rem; padding-right: 1.5rem; padding-top: 1.5rem; padding-bottom: 1.5rem;">
    <!-- En-tête de la page -->
    <div class="row mb-4">
        <div class="col-12">
            <h1 class="mb-2" style="color: #6fb87d; font-size: 2rem; font-weight: 600;">Paramètres</h1>
            <p class="text-muted" style="font-size: 1.1rem;">Gérez les utilisateurs de votre plateforme</p>
        </div>
    </div>

    <div class="row">
        <div class="col-12">
            <div class="main-card">
                <!-- Onglets -->
                <div class="tabs-container">
                    <ul class="tabs-list">
                        <li class="tab-item active" data-tab="users">
                            Utilisateurs
                        </li>
                        <li class="tab-item" data-tab="mailing">
                            Mailing
                        </li>
                        <li class="tab-item" data-tab="others">
                            Autres
                        </li>
                    </ul>
                </div>
                
                <!-- Contenu onglet Utilisateurs -->
                <div class="tab-content active" id="users-tab">
                <div class="d-flex justify-content-between align-items-center mb-4">
                    <h2 class="section-title mb-0">Gestion des Utilisateurs</h2>
                    <button class="btn btn-primary" id="addUserBtn">
                        <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
                    </button>
                </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 ou rôle...">
                            </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="ambassadeur">Ambassadeur</div>
                                    <div class="role-filter-custom-select-option" data-value="admin">Administrateur</div>
                                    <div class="role-filter-custom-select-option" data-value="client">Client</div>
                                </div>
                            </div>
                            <select id="roleFilter" style="display: none;">
                                <option value="">Tous les rôles</option>
                                <option value="ambassadeur">Ambassadeur</option>
                                <option value="admin">Administrateur</option>
                                <option value="client">Client</option>
                            </select>
                        </div>
                    </div>
                </div>
                
                <div class="table-responsive">
                    <table class="table">
                        <thead>
                            <tr>
                                <th>Utilisateur</th>
                                <th>Rôle</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($users as $user)
                            <tr>
                                <td>
                                    <div class="user-info">
                                        <img src="{{ $user->profile_photo ? asset('storage/' . $user->profile_photo) : asset('assets/favicon.png') }}" 
                                             alt="Photo de profil" 
                                             class="user-avatar">
                                        <div class="user-details">
                                            <h6>{{ $user->name }}</h6>
                                            <small>{{ $user->email }}</small>
                                        </div>
                                    </div>
                                </td>
                                <td style="text-align: center; vertical-align: middle;">
                                    <span class="badge" style="background-color: rgba(111, 184, 125, 0.2); color: #6fb87d; border: 1px solid rgba(111, 184, 125, 0.3);">
                                        @if($user->role === 'admin')
                                            Administrateur
                                        @elseif($user->role === 'ambassadeur')
                                            Ambassadeur
                                        @elseif($user->role === 'client')
                                            Client
                                        @else
                                            {{ ucfirst($user->role) }}
                                        @endif
                                    </span>
                                </td>
                                <td style="text-align: center; vertical-align: middle;">
                                    <div class="action-buttons">
                                        @if(auth()->id() !== $user->id)
                                            <button type="button" class="action-btn action-btn-delete js-user-action"
                                                    data-action="delete-user"
                                                    data-user-id="{{ $user->id }}"
                                                    data-user-name="{{ $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>
                                        @else
                                            <button type="button" class="action-btn action-btn-disabled" 
                                                    disabled title="Vous ne pouvez pas supprimer votre propre compte" 
                                                    style="cursor: not-allowed; opacity: 0.5;">
                                                <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>
                                        @endif
                                    </div>
                                </td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="3" class="text-center py-5">
                                    <p class="text-muted">Aucun utilisateur trouvé</p>
                                </td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
                </div>
                
                <!-- Contenu onglet Autres -->
                <div class="tab-content" id="others-tab">
                    <div class="d-flex justify-content-between align-items-center mb-4">
                        <h2 class="section-title mb-0">Gestion des Webhooks</h2>
                        <button class="btn btn-primary" id="addWebhookBtn">
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" class="me-2">
                                <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/>
                            </svg>
                            Nouveau Webhook
                        </button>
                    </div>
                    
                    <div class="table-responsive">
                        <table class="table">
                            <thead>
                                <tr>
                                    <th>Nom</th>
                                    <th>URL Webhook</th>
                                    <th>Rattaché à</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($webhooks ?? [] as $webhook)
                                <tr>
                                    <td>
                                        <div style="font-weight: 600; color: #1f2937;">{{ $webhook->name }}</div>
                                    </td>
                                    <td>
                                        <div class="webhook-url-container">
                                            <input type="text" class="webhook-url" value="{{ $webhook->url }}" readonly id="webhook-url-{{ $webhook->id }}">
                                            <button class="copy-btn js-webhook-action" type="button" data-action="copy-webhook" data-webhook-id="{{ $webhook->id }}" data-webhook-url="{{ $webhook->url }}">
                                                <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="vertical-align: middle;">
                                                    <path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/>
                                                </svg>
                                                Copier
                                            </button>
                                        </div>
                                    </td>
                                    <td style="text-align: center; vertical-align: middle;">
                                        <span class="badge" style="background-color: rgba(111, 184, 125, 0.2); color: #6fb87d; border: 1px solid rgba(111, 184, 125, 0.3);">
                                            {{ $webhook->ambassadeur ? ($webhook->ambassadeur->first_name . ' ' . $webhook->ambassadeur->last_name) : 'Général' }}
                                        </span>
                                    </td>
                                    <td style="text-align: center; vertical-align: middle;">
                                        <div class="action-buttons">
                                            <button type="button" class="action-btn action-btn-delete js-webhook-action"
                                                    data-action="delete-webhook"
                                                    data-webhook-id="{{ $webhook->id }}"
                                                    data-webhook-name="{{ $webhook->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>
                                @empty
                                <tr>
                                    <td colspan="4" class="text-center py-5">
                                        <p class="text-muted">Aucun webhook trouvé</p>
                                    </td>
                                </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                    
                    <!-- Section Suppression des logs -->
                    <div style="margin-top: 3rem; padding-top: 2rem; border-top: 2px solid #e5e7eb;">
                        <h2 class="section-title mb-4">Suppression des logs</h2>
                        
                        <div class="table-responsive">
                            <table class="table">
                                <thead>
                                    <tr>
                                        <th>Espace utilisé</th>
                                        <th>Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>
                                            <div style="font-weight: 600; color: #1f2937;">
                                                Taille totale des fichiers de logs <span style="color: #6b7280; font-weight: 400;">espace</span> <span id="logsSize" style="color: #6fb87d; font-weight: 600;">-</span>
                                            </div>
                                        </td>
                                        <td style="text-align: center; vertical-align: middle;">
                                            <div class="action-buttons">
                                                <button type="button" class="action-btn action-btn-delete js-logs-action"
                                                        data-action="clear-logs"
                                                        title="Vider les logs">
                                                    <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>
                                                <button type="button" class="action-btn js-logs-action"
                                                        data-action="refresh-logs-size"
                                                        title="Actualiser la taille" id="refreshLogsSizeBtn" style="color: #6fb87d;">
                                                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
                                                        <polyline points="23 4 23 10 17 10"></polyline>
                                                        <polyline points="1 20 1 14 7 14"></polyline>
                                                        <path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"></path>
                                                    </svg>
                                                </button>
                                            </div>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        
                        <div id="logsAlert" style="margin-top: 1rem;"></div>
                    </div>
                </div>

                <!-- Contenu onglet Mailing -->
                <div class="tab-content" id="mailing-tab">
                    <div class="d-flex justify-content-between align-items-center mb-4">
                        <h2 class="section-title mb-0">Mailing</h2>
                    </div>
                    <p class="text-muted" style="margin-bottom: 1.5rem;">
                        Exporter en un clic tous les emails des prospects au format Excel (colonnes&nbsp;:
                        <strong>Nom</strong>, <strong>Prénom</strong>, <strong>Email</strong>).
                    </p>
                    <a href="{{ route('parametres.mailing.export') }}"
                       class="btn btn-primary"
                       style="display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.5rem; background: #6fb87d; color: white; border: none; border-radius: 8px; font-size: 0.9375rem; font-weight: 600; text-decoration: none; transition: background 0.2s;">
                        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <path d="M4 4h16v16H4z"></path>
                            <path d="M9 8l6 8M15 8l-6 8"></path>
                        </svg>
                        Exporter tous les emails (XLS)
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal pour ajouter un webhook -->
<div class="modal fade" id="addWebhookModal" tabindex="-1" aria-labelledby="addWebhookModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="addWebhookModalLabel">Créer un webhook</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="addWebhookForm">
                    @csrf
                    <div class="mb-3">
                        <label for="webhookName" class="form-label">Nom du webhook</label>
                        <input type="text" class="form-control" id="webhookName" name="name" required placeholder="Ex: Formulaire Typeform Ambassadeur 1">
                    </div>
                    <div class="mb-3">
                        <label for="webhookAmbassadeur" class="form-label">Rattacher à un ambassadeur (optionnel)</label>
                        <select class="form-control" id="webhookAmbassadeur" name="user_id">
                            <option value="">Aucun (Général)</option>
                            @if(isset($ambassadeurs) && $ambassadeurs->count() > 0)
                                @foreach($ambassadeurs as $ambassadeur)
                                <option value="{{ $ambassadeur->id }}">{{ $ambassadeur->name }} ({{ $ambassadeur->email }})</option>
                                @endforeach
                            @else
                                {{-- Debug: Aucun ambassadeur trouvé --}}
                            @endif
                        </select>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
                <button type="button" class="btn btn-primary" id="confirmAddWebhook">Créer</button>
            </div>
        </div>
    </div>
</div>

<!-- Modal pour ajouter un utilisateur -->
<div class="modal fade" id="addUserModal" tabindex="-1" aria-labelledby="addUserModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="addUserModalLabel">Ajouter un utilisateur</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="addUserForm">
                    @csrf
                    <div class="mb-3">
                        <label for="userName" class="form-label">Nom complet</label>
                        <input type="text" class="form-control" id="userName" name="name" required>
                    </div>
                    <div class="mb-3">
                        <label for="userEmail" class="form-label">Email</label>
                        <input type="email" class="form-control" id="userEmail" name="email" required>
                    </div>
                    <div class="mb-3">
                        <label for="userRole" class="form-label">Rôle</label>
                        <div class="role-filter-wrapper">
                            <div class="role-filter-custom-select" data-target="userRole">
                                <div class="role-filter-custom-select-trigger">
                                    <span class="selected-value">Ambassadeur</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="ambassadeur">Ambassadeur</div>
                                    <div class="role-filter-custom-select-option" data-value="admin">Administrateur</div>
                                    <div class="role-filter-custom-select-option" data-value="client">Client</div>
                                </div>
                            </div>
                            <select class="form-control" id="userRole" name="role" required style="display: none;">
                                <option value="ambassadeur" selected>Ambassadeur</option>
                                <option value="admin">Administrateur</option>
                                <option value="client">Client</option>
                            </select>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
                <button type="button" class="btn btn-primary" id="confirmAddUser">Ajouter</button>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script nonce="{{ $cspNonce }}">
function escapeHtml(s) {
    if (s == null) return '';
    return String(s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#39;');
}
function showConfirmDialog(title, message, onConfirm) {
    const modal = document.createElement('div');
    modal.className = 'confirm-modal';
    modal.innerHTML = `
        <div class="confirm-modal-content">
            <h3>${escapeHtml(title)}</h3>
            <p>${escapeHtml(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 confirmDelete(userId, userName) {
    showConfirmDialog(
        'Supprimer l\'utilisateur',
        `Êtes-vous sûr de vouloir supprimer l'utilisateur "${userName}" ?\n\nCette action est irréversible.`,
        () => deleteUser(userId)
    );
}

function deleteUser(userId) {
    fetch(`/parametres/users/${userId}`, {
        method: 'DELETE',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
            'Accept': 'application/json'
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            location.reload();
        } else {
            alert('Erreur lors de la suppression de l\'utilisateur : ' + (data.message || 'Erreur inconnue'));
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('Erreur lors de la suppression de l\'utilisateur');
    });
}

function filterUsers() {
    const searchTerm = document.getElementById('userSearch').value.toLowerCase();
    const roleFilter = document.getElementById('roleFilter').value;
    const userRows = document.querySelectorAll('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 matchesSearch = !searchTerm || 
            name.includes(searchTerm) || 
            email.includes(searchTerm) || 
            role.includes(searchTerm);
        
        const matchesRole = !roleFilter || 
            (roleFilter === 'ambassadeur' && role.includes('ambassadeur')) ||
            (roleFilter === 'admin' && role.includes('administrateur')) ||
            (roleFilter === 'client' && role.includes('client'));
        
        if (matchesSearch && matchesRole) {
            row.style.display = '';
        } else {
            row.style.display = 'none';
        }
    });
}

// Gestion des onglets
function switchTab(tabName) {
    // Masquer tous les contenus
    document.querySelectorAll('.tab-content').forEach(content => {
        content.classList.remove('active');
    });
    
    // Désactiver tous les onglets
    document.querySelectorAll('.tab-item').forEach(item => {
        item.classList.remove('active');
    });
    
    // Activer l'onglet sélectionné
    document.getElementById(tabName + '-tab').classList.add('active');
    document.querySelector(`[data-tab="${tabName}"]`).classList.add('active');
}

// Gestion de la copie d'URL webhook
function copyWebhookUrl(webhookId, url) {
    const input = document.getElementById('webhook-url-' + webhookId);
    const btn = event.target.closest('.copy-btn');
    const originalText = btn.innerHTML;
    
    // Sélectionner le texte pour le fallback
    input.select();
    input.setSelectionRange(0, 99999); // Pour mobile
    
    // Essayer d'utiliser l'API Clipboard moderne
    if (navigator.clipboard && navigator.clipboard.writeText) {
        navigator.clipboard.writeText(url).then(function() {
            btn.innerHTML = '<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="vertical-align: middle;"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg> Copié !';
            btn.classList.add('copied');
            setTimeout(() => {
                btn.innerHTML = originalText;
                btn.classList.remove('copied');
            }, 3000);
        }).catch(function(err) {
            // Fallback silencieux si l'API échoue
            try {
                document.execCommand('copy');
                btn.innerHTML = '<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="vertical-align: middle;"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg> Copié !';
                btn.classList.add('copied');
                setTimeout(() => {
                    btn.innerHTML = originalText;
                    btn.classList.remove('copied');
                }, 3000);
            } catch (e) {
                console.error('Erreur lors de la copie:', e);
            }
        });
    } else {
        // Fallback pour les navigateurs plus anciens
        try {
            document.execCommand('copy');
            btn.innerHTML = '<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="vertical-align: middle;"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg> Copié !';
            btn.classList.add('copied');
            setTimeout(() => {
                btn.innerHTML = originalText;
                btn.classList.remove('copied');
            }, 3000);
        } catch (e) {
            console.error('Erreur lors de la copie:', e);
        }
    }
}

function confirmDeleteWebhook(webhookId, webhookName) {
    showConfirmDialog(
        'Supprimer le webhook',
        `Êtes-vous sûr de vouloir supprimer le webhook "${webhookName}" ?\n\nCette action est irréversible.`,
        () => deleteWebhook(webhookId)
    );
}

function deleteWebhook(webhookId) {
    fetch(`/parametres/webhooks/${webhookId}`, {
        method: 'DELETE',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
            'Accept': 'application/json'
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            location.reload();
        } else {
            alert('Erreur lors de la suppression du webhook : ' + (data.message || 'Erreur inconnue'));
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('Erreur lors de la suppression du webhook');
    });
}

// Fonction pour formater la taille en octets
function formatBytes(bytes) {
    if (bytes === 0) return '0 B';
    const k = 1024;
    const sizes = ['B', 'KB', 'MB', 'GB'];
    const i = Math.floor(Math.log(bytes) / Math.log(k));
    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
}

// Charger la taille des logs
function loadLogsSize() {
    fetch('/api/parametres/logs/size', {
        method: 'GET',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
            'Accept': 'application/json'
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            const sizeElement = document.getElementById('logsSize');
            if (sizeElement) {
                sizeElement.textContent = formatBytes(data.size);
            }
        } else {
            console.error('Erreur lors du chargement de la taille des logs:', data.message);
        }
    })
    .catch(error => {
        console.error('Erreur lors du chargement de la taille des logs:', error);
    });
}

// Confirmer la suppression des logs
function confirmClearLogs() {
    showConfirmDialog(
        'Vider les logs',
        'Êtes-vous sûr de vouloir vider tous les fichiers de logs ?\n\nCette action est irréversible.',
        () => clearLogs()
    );
}

// Vider les logs
function clearLogs() {
    const refreshBtn = document.getElementById('refreshLogsSizeBtn');
    if (refreshBtn) {
        refreshBtn.disabled = true;
    }
    
    fetch('/api/parametres/logs/clear', {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
            'Accept': 'application/json'
        }
    })
    .then(response => response.json())
    .then(data => {
        if (refreshBtn) {
            refreshBtn.disabled = false;
        }
        
        const alertContainer = document.getElementById('logsAlert');
        if (data.success) {
            // Recharger la taille après un petit délai pour s'assurer que les fichiers sont bien vidés
            setTimeout(() => {
                loadLogsSize();
            }, 100);
        } else {
            const esc = (s) => (s == null ? '' : String(s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#39;'));
            alertContainer.innerHTML = '<div class="alert alert-error">Erreur lors de la suppression des logs : ' + esc(data.message || 'Erreur inconnue') + '</div>';
        }
    })
    .catch(error => {
        console.error('Erreur lors de la suppression des logs:', error);
        if (refreshBtn) {
            refreshBtn.disabled = false;
        }
        const alertContainer = document.getElementById('logsAlert');
        alertContainer.innerHTML = '<div class="alert alert-error">Erreur lors de la suppression des logs</div>';
    });
}

document.addEventListener('DOMContentLoaded', function() {
    // Gestion des onglets
    document.querySelectorAll('.tab-item').forEach(tab => {
        tab.addEventListener('click', function() {
            const tabName = this.getAttribute('data-tab');
            switchTab(tabName);
            
            // Charger la taille des logs si on est sur l'onglet "Autres"
            if (tabName === 'others') {
                loadLogsSize();
            }
        });
    });
    
    // Charger la taille des logs si on est déjà sur l'onglet "Autres"
    if (document.getElementById('others-tab') && document.getElementById('others-tab').classList.contains('active')) {
        loadLogsSize();
    }
    
    const searchInput = document.getElementById('userSearch');
    const roleFilter = document.getElementById('roleFilter');
    const addUserBtn = document.getElementById('addUserBtn');
    const confirmAddUserBtn = document.getElementById('confirmAddUser');
    const addWebhookBtn = document.getElementById('addWebhookBtn');
    const confirmAddWebhookBtn = document.getElementById('confirmAddWebhook');

    // Handlers CSP-safe (remplace onclick=)
    document.addEventListener('click', function(e) {
        const userBtn = e.target.closest('.js-user-action');
        if (userBtn && userBtn.getAttribute('data-action') === 'delete-user') {
            const id = userBtn.getAttribute('data-user-id');
            const name = userBtn.getAttribute('data-user-name') || '';
            if (id) confirmDelete(parseInt(id, 10), name);
            return;
        }

        const webhookBtn = e.target.closest('.js-webhook-action');
        if (webhookBtn) {
            const action = webhookBtn.getAttribute('data-action');
            const id = webhookBtn.getAttribute('data-webhook-id');
            if (!id) return;
            if (action === 'copy-webhook') {
                const url = webhookBtn.getAttribute('data-webhook-url') || '';
                copyWebhookUrl(parseInt(id, 10), url);
            } else if (action === 'delete-webhook') {
                const name = webhookBtn.getAttribute('data-webhook-name') || '';
                confirmDeleteWebhook(parseInt(id, 10), name);
            }
            return;
        }

        const logsBtn = e.target.closest('.js-logs-action');
        if (logsBtn) {
            const action = logsBtn.getAttribute('data-action');
            if (action === 'clear-logs') confirmClearLogs();
            else if (action === 'refresh-logs-size') loadLogsSize();
        }
    });
    
    if (searchInput) {
        searchInput.addEventListener('input', filterUsers);
    }
    
    if (roleFilter) {
        roleFilter.addEventListener('change', filterUsers);
    }
    
    // Gestion du filtre de rôle personnalisé
    function setupCustomSelect(selectElement) {
        if (!selectElement) return;
        
        const trigger = selectElement.querySelector('.role-filter-custom-select-trigger');
        const options = selectElement.querySelectorAll('.role-filter-custom-select-option');
        const targetSelectId = selectElement.dataset.target;
        const targetSelect = document.getElementById(targetSelectId);
        const selectedValue = selectElement.querySelector('.selected-value');
        
        if (!trigger || !targetSelect || !selectedValue) return;
        
        // Initialiser la valeur sélectionnée
        const initialOption = targetSelect.options[targetSelect.selectedIndex];
        if (initialOption) {
            selectedValue.textContent = initialOption.textContent;
            options.forEach(function(opt) {
                if (opt.dataset.value === initialOption.value) {
                    opt.classList.add('selected');
                } else {
                    opt.classList.remove('selected');
                }
            });
        }
        
        trigger.addEventListener('click', function(e) {
            e.stopPropagation();
            document.querySelectorAll('.role-filter-custom-select').forEach(function(otherSelect) {
                if (otherSelect !== selectElement) {
                    otherSelect.classList.remove('active');
                }
            });
            selectElement.classList.toggle('active');
        });
        
        options.forEach(function(option) {
            option.addEventListener('click', function(e) {
                e.stopPropagation();
                const value = option.dataset.value;
                const text = option.textContent;
                selectedValue.textContent = text;
                targetSelect.value = value;
                options.forEach(function(opt) {
                    opt.classList.remove('selected');
                });
                option.classList.add('selected');
                selectElement.classList.remove('active');
                targetSelect.dispatchEvent(new Event('change'));
            });
        });
    }
    
    // Initialiser tous les selects personnalisés
    document.querySelectorAll('.role-filter-custom-select').forEach(function(customSelect) {
        setupCustomSelect(customSelect);
    });
    
    document.addEventListener('click', function() {
        document.querySelectorAll('.role-filter-custom-select').forEach(function(customSelect) {
            customSelect.classList.remove('active');
        });
    });
    
    // Gestion de l'ajout d'utilisateur
    if (addUserBtn) {
        addUserBtn.addEventListener('click', function() {
            const modal = new bootstrap.Modal(document.getElementById('addUserModal'));
            modal.show();
        });
    }
    
    if (confirmAddUserBtn) {
        confirmAddUserBtn.addEventListener('click', function() {
            const form = document.getElementById('addUserForm');
            const formData = new FormData(form);
            
            confirmAddUserBtn.disabled = true;
            confirmAddUserBtn.textContent = 'Ajout en cours...';
            
            fetch('/parametres/users', {
                method: 'POST',
                body: formData,
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                    'Accept': 'application/json'
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    const modal = bootstrap.Modal.getInstance(document.getElementById('addUserModal'));
                    modal.hide();
                    
                    // Afficher un message si l'email n'a pas été envoyé
                    if (data.email_sent === false) {
                        alert('Utilisateur créé avec succès, mais l\'email de bienvenue n\'a pas pu être envoyé. ' + (data.email_error || ''));
                    }
                    
                    location.reload();
                } else {
                    alert('Erreur lors de l\'ajout de l\'utilisateur : ' + (data.message || 'Erreur inconnue'));
                    confirmAddUserBtn.disabled = false;
                    confirmAddUserBtn.textContent = 'Ajouter';
                }
            })
            .catch(error => {
                console.error('Error:', error);
                alert('Erreur lors de l\'ajout de l\'utilisateur');
                confirmAddUserBtn.disabled = false;
                confirmAddUserBtn.textContent = 'Ajouter';
            });
        });
    }
    
    // Gestion de l'ajout de webhook
    if (addWebhookBtn) {
        addWebhookBtn.addEventListener('click', function() {
            const modal = new bootstrap.Modal(document.getElementById('addWebhookModal'));
            modal.show();
        });
    }
    
    if (confirmAddWebhookBtn) {
        confirmAddWebhookBtn.addEventListener('click', function() {
            const form = document.getElementById('addWebhookForm');
            const formData = new FormData(form);
            
            confirmAddWebhookBtn.disabled = true;
            confirmAddWebhookBtn.textContent = 'Création en cours...';
            
            fetch('/parametres/webhooks', {
                method: 'POST',
                body: formData,
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                    'Accept': 'application/json'
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    const modal = bootstrap.Modal.getInstance(document.getElementById('addWebhookModal'));
                    modal.hide();
                    location.reload();
                } else {
                    alert('Erreur lors de la création du webhook : ' + (data.message || 'Erreur inconnue'));
                    confirmAddWebhookBtn.disabled = false;
                    confirmAddWebhookBtn.textContent = 'Créer';
                }
            })
            .catch(error => {
                console.error('Error:', error);
                alert('Erreur lors de la création du webhook');
                confirmAddWebhookBtn.disabled = false;
                confirmAddWebhookBtn.textContent = 'Créer';
            });
        });
    }
});
</script>
@endpush