{% extends 'layouts/authenticated.html.twig' %}

{% block page_title %}{{ page_title }}{% endblock %}

{% block content %}
<div class="mb-6">
    <h1 class="text-2xl font-semibold text-gray-900">
        <i class="fas fa-sign-in-alt text-indigo-600 mr-2"></i>
        {{ page_title }}
    </h1>
    <p class="mt-1 text-sm text-gray-600">
        Suivi et analyse des tentatives de connexion au système
    </p>
</div>

{# Statistics Cards #}
<div class="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3 mb-8">
    {# Total Attempts #}
    <div class="bg-white overflow-hidden shadow rounded-lg">
        <div class="p-5">
            <div class="flex items-center">
                <div class="flex-shrink-0">
                    <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
                        <i class="fas fa-list text-2xl"></i>
                    </div>
                </div>
                <div class="ml-5 w-0 flex-1">
                    <dl>
                        <dt class="text-sm font-medium text-gray-500 truncate">Total Tentatives</dt>
                        <dd class="text-2xl font-semibold text-gray-900">{{ stats.total|default(0)|number_format(0, ',', ' ') }}</dd>
                    </dl>
                </div>
            </div>
        </div>
        <div class="bg-gray-50 px-5 py-3">
            <div class="text-sm">
                <span class="font-medium text-indigo-600">{{ stats.created_today|default(0) }}</span>
                <span class="text-gray-500">aujourd'hui</span>
            </div>
        </div>
    </div>

    {# Successful Attempts #}
    <div class="bg-white overflow-hidden shadow rounded-lg">
        <div class="p-5">
            <div class="flex items-center">
                <div class="flex-shrink-0">
                    <div class="flex items-center justify-center h-12 w-12 rounded-md bg-green-500 text-white">
                        <i class="fas fa-check-circle text-2xl"></i>
                    </div>
                </div>
                <div class="ml-5 w-0 flex-1">
                    <dl>
                        <dt class="text-sm font-medium text-gray-500 truncate">Réussies</dt>
                        <dd class="text-2xl font-semibold text-gray-900">{{ stats.successful|default(0)|number_format(0, ',', ' ') }}</dd>
                    </dl>
                </div>
            </div>
        </div>
        <div class="bg-gray-50 px-5 py-3">
            <div class="text-sm">
                <span class="font-medium text-green-600">{{ stats.successful_today|default(0) }}</span>
                <span class="text-gray-500">aujourd'hui</span>
            </div>
        </div>
    </div>

    {# Failed Attempts #}
    <div class="bg-white overflow-hidden shadow rounded-lg">
        <div class="p-5">
            <div class="flex items-center">
                <div class="flex-shrink-0">
                    <div class="flex items-center justify-center h-12 w-12 rounded-md bg-red-500 text-white">
                        <i class="fas fa-times-circle text-2xl"></i>
                    </div>
                </div>
                <div class="ml-5 w-0 flex-1">
                    <dl>
                        <dt class="text-sm font-medium text-gray-500 truncate">Échouées</dt>
                        <dd class="text-2xl font-semibold text-gray-900">{{ stats.failed|default(0)|number_format(0, ',', ' ') }}</dd>
                    </dl>
                </div>
            </div>
        </div>
        <div class="bg-gray-50 px-5 py-3">
            <div class="text-sm">
                <span class="font-medium text-red-600">{{ (stats.created_today|default(0) - stats.successful_today|default(0)) }}</span>
                <span class="text-gray-500">aujourd'hui</span>
            </div>
        </div>
    </div>

    {# Success Rate #}
    <div class="bg-white overflow-hidden shadow rounded-lg">
        <div class="p-5">
            <div class="flex items-center">
                <div class="flex-shrink-0">
                    <div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white">
                        <i class="fas fa-percentage text-2xl"></i>
                    </div>
                </div>
                <div class="ml-5 w-0 flex-1">
                    <dl>
                        <dt class="text-sm font-medium text-gray-500 truncate">Taux de Réussite</dt>
                        <dd class="text-2xl font-semibold text-gray-900">{{ stats.success_rate|default(0) }}%</dd>
                    </dl>
                </div>
            </div>
        </div>
        <div class="bg-gray-50 px-5 py-3">
            <div class="text-sm">
                <span class="text-gray-500">Derniers 7 jours: </span>
                <span class="font-medium text-blue-600">{{ stats.created_last_7d|default(0) }}</span>
            </div>
        </div>
    </div>

    {# Unique IPs #}
    <div class="bg-white overflow-hidden shadow rounded-lg">
        <div class="p-5">
            <div class="flex items-center">
                <div class="flex-shrink-0">
                    <div class="flex items-center justify-center h-12 w-12 rounded-md bg-purple-500 text-white">
                        <i class="fas fa-network-wired text-2xl"></i>
                    </div>
                </div>
                <div class="ml-5 w-0 flex-1">
                    <dl>
                        <dt class="text-sm font-medium text-gray-500 truncate">IPs Uniques</dt>
                        <dd class="text-2xl font-semibold text-gray-900">{{ stats.unique_ips|default(0)|number_format(0, ',', ' ') }}</dd>
                    </dl>
                </div>
            </div>
        </div>
        <div class="bg-gray-50 px-5 py-3">
            <div class="text-sm">
                <span class="font-medium text-purple-600">{{ stats.unique_countries|default(0) }}</span>
                <span class="text-gray-500">pays différents</span>
            </div>
        </div>
    </div>

    {# Unique Users #}
    <div class="bg-white overflow-hidden shadow rounded-lg">
        <div class="p-5">
            <div class="flex items-center">
                <div class="flex-shrink-0">
                    <div class="flex items-center justify-center h-12 w-12 rounded-md bg-yellow-500 text-white">
                        <i class="fas fa-users text-2xl"></i>
                    </div>
                </div>
                <div class="ml-5 w-0 flex-1">
                    <dl>
                        <dt class="text-sm font-medium text-gray-500 truncate">Utilisateurs Uniques</dt>
                        <dd class="text-2xl font-semibold text-gray-900">{{ stats.unique_users|default(0)|number_format(0, ',', ' ') }}</dd>
                    </dl>
                </div>
            </div>
        </div>
        <div class="bg-gray-50 px-5 py-3">
            <div class="text-sm">
                <a href="{{ path('admin_security_login_attempts_suspicious') }}" class="text-yellow-600 hover:text-yellow-700 font-medium">
                    <i class="fas fa-exclamation-triangle mr-1"></i> Voir activités suspectes
                </a>
            </div>
        </div>
    </div>
</div>

{# Chart Section #}
<div class="bg-white shadow rounded-lg mb-8">
    <div class="px-4 py-5 sm:p-6">
        <h3 class="text-lg leading-6 font-medium text-gray-900 mb-4">
            <i class="fas fa-chart-line text-indigo-500 mr-2"></i>
            Évolution des Tentatives (30 derniers jours)
        </h3>
        <div class="h-64">
            <canvas id="attemptsChart"></canvas>
        </div>
    </div>
</div>

{# Filter and List Section #}
<div class="bg-white shadow rounded-lg overflow-hidden">
    {# Filters #}
    <div class="px-4 py-5 border-b border-gray-200 sm:px-6">
        <div class="flex justify-between items-center mb-4">
            <h3 class="text-lg leading-6 font-medium text-gray-900">
                <i class="fas fa-filter text-gray-400 mr-2"></i>
                Filtres de Recherche
            </h3>
            <a href="{{ path('admin_security_login_attempts_export', {format: 'csv'} | merge(filters)) }}"
               class="inline-flex items-center px-3 py-2 border border-gray-300 shadow-sm text-sm leading-4 font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
                <i class="fas fa-download mr-2"></i> Exporter CSV
            </a>
        </div>
        <form method="get" action="{{ path('admin_security_login_attempts_index') }}" data-controller="form-submit" class="space-y-4">
            <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
                {# Search #}
                <div>
                    <label for="search" class="block text-sm font-medium text-gray-700 mb-1">Recherche</label>
                    <input type="text" name="search" id="search" value="{{ filters.search|default('') }}"
                           placeholder="Email, IP, navigateur..."
                           class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 text-gray-900 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                </div>

                {# Status #}
                <div>
                    <label for="successful" class="block text-sm font-medium text-gray-700 mb-1">Statut</label>
                    <select name="successful" id="successful" class="mt-1 block w-full px-3 py-2 border border-gray-300 bg-white rounded-md shadow-sm text-gray-900 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                        <option value="">Tous</option>
                        <option value="1" {{ filters.successful|default('') == '1' ? 'selected' : '' }}>Réussies</option>
                        <option value="0" {{ filters.successful|default('') == '0' ? 'selected' : '' }}>Échouées</option>
                    </select>
                </div>

                {# Country #}
                <div>
                    <label for="country" class="block text-sm font-medium text-gray-700 mb-1">Pays</label>
                    <select name="country" id="country" class="mt-1 block w-full px-3 py-2 border border-gray-300 bg-white rounded-md shadow-sm text-gray-900 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                        <option value="">Tous les pays</option>
                        {% for country in countries %}
                            <option value="{{ country }}" {{ filters.country|default('') == country ? 'selected' : '' }}>{{ country }}</option>
                        {% endfor %}
                    </select>
                </div>

                {# City #}
                <div>
                    <label for="city" class="block text-sm font-medium text-gray-700 mb-1">Ville</label>
                    <select name="city" id="city" class="mt-1 block w-full px-3 py-2 border border-gray-300 bg-white rounded-md shadow-sm text-gray-900 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                        <option value="">Toutes les villes</option>
                        {% for city in cities %}
                            <option value="{{ city }}" {{ filters.city|default('') == city ? 'selected' : '' }}>{{ city }}</option>
                        {% endfor %}
                    </select>
                </div>

                {# Browser #}
                <div>
                    <label for="browser" class="block text-sm font-medium text-gray-700 mb-1">Navigateur</label>
                    <select name="browser" id="browser" class="mt-1 block w-full px-3 py-2 border border-gray-300 bg-white rounded-md shadow-sm text-gray-900 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                        <option value="">Tous les navigateurs</option>
                        {% for browser in browsers %}
                            <option value="{{ browser }}" {{ filters.browser|default('') == browser ? 'selected' : '' }}>{{ browser }}</option>
                        {% endfor %}
                    </select>
                </div>

                {# OS #}
                <div>
                    <label for="os" class="block text-sm font-medium text-gray-700 mb-1">Système d'exploitation</label>
                    <select name="os" id="os" class="mt-1 block w-full px-3 py-2 border border-gray-300 bg-white rounded-md shadow-sm text-gray-900 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                        <option value="">Tous les OS</option>
                        {% for os in os_list %}
                            <option value="{{ os }}" {{ filters.os|default('') == os ? 'selected' : '' }}>{{ os }}</option>
                        {% endfor %}
                    </select>
                </div>

                {# Failure Reason #}
                <div>
                    <label for="failure_reason" class="block text-sm font-medium text-gray-700 mb-1">Raison d'échec</label>
                    <select name="failure_reason" id="failure_reason" class="mt-1 block w-full px-3 py-2 border border-gray-300 bg-white rounded-md shadow-sm text-gray-900 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                        <option value="">Toutes les raisons</option>
                        {% for reason in failure_reasons %}
                            <option value="{{ reason }}" {{ filters.failure_reason|default('') == reason ? 'selected' : '' }}>{{ reason }}</option>
                        {% endfor %}
                    </select>
                </div>

                {# User #}
                <div>
                    <label for="user_id" class="block text-sm font-medium text-gray-700 mb-1">Utilisateur</label>
                    <select name="user_id" id="user_id" class="mt-1 block w-full px-3 py-2 border border-gray-300 bg-white rounded-md shadow-sm text-gray-900 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                        <option value="">Tous les utilisateurs</option>
                        {% for user in users %}
                            <option value="{{ user.id }}" {{ filters.user_id|default('') == user.id ? 'selected' : '' }}>{{ user.email }}</option>
                        {% endfor %}
                    </select>
                </div>

                {# Date From #}
                <div>
                    <label for="dateFrom" class="block text-sm font-medium text-gray-700 mb-1">Date début</label>
                    <input type="date" name="dateFrom" id="dateFrom" value="{{ filters.dateFrom|default('') }}"
                           class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm text-gray-900 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                </div>

                {# Date To #}
                <div>
                    <label for="dateTo" class="block text-sm font-medium text-gray-700 mb-1">Date fin</label>
                    <input type="date" name="dateTo" id="dateTo" value="{{ filters.dateTo|default('') }}"
                           class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm text-gray-900 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                </div>

                {# IP #}
                <div>
                    <label for="ip" class="block text-sm font-medium text-gray-700 mb-1">Adresse IP</label>
                    <input type="text" name="ip" id="ip" value="{{ filters.ip|default('') }}"
                           placeholder="192.168.1.1"
                           class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 text-gray-900 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                </div>

                {# Device Type #}
                <div>
                    <label for="device_type" class="block text-sm font-medium text-gray-700 mb-1">Type d'appareil</label>
                    <select name="device_type" id="device_type" class="mt-1 block w-full px-3 py-2 border border-gray-300 bg-white rounded-md shadow-sm text-gray-900 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                        <option value="">Tous les appareils</option>
                        <option value="desktop" {{ filters.device_type|default('') == 'desktop' ? 'selected' : '' }}>Desktop</option>
                        <option value="mobile" {{ filters.device_type|default('') == 'mobile' ? 'selected' : '' }}>Mobile</option>
                        <option value="tablet" {{ filters.device_type|default('') == 'tablet' ? 'selected' : '' }}>Tablette</option>
                    </select>
                </div>
            </div>

            <div class="flex justify-between items-center pt-4 border-t border-gray-200">
                <div>
                    <button type="submit" data-form-submit-target="submit" class="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                        <i class="fas fa-filter mr-2"></i>
                        <span data-form-submit-target="buttonText">Filtrer</span>
                        <span data-form-submit-target="spinner" class="hidden ml-2">
                            <svg class="animate-spin h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                            </svg>
                        </span>
                    </button>
                    <a href="{{ path('admin_security_login_attempts_index') }}" class="ml-3 inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                        <i class="fas fa-times mr-2"></i> Réinitialiser
                    </a>
                </div>
                {% if pagination is defined and pagination %}
                    <div class="text-sm text-gray-500">
                        {{ pagination.getTotalItemCount }} résultat(s) trouvé(s)
                    </div>
                {% endif %}
            </div>
        </form>
    </div>

    {# Data Table #}
    {# Desktop Table #}
    <div class="hidden lg:block overflow-x-auto">
        <table class="min-w-full divide-y divide-gray-200">
            <thead class="bg-gray-50">
                <tr>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        ID / Date
                    </th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        Utilisateur
                    </th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        Adresse IP
                    </th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        Localisation
                    </th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        Appareil
                    </th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        Statut
                    </th>
                    <th scope="col" class="relative px-6 py-3">
                        <span class="sr-only">Actions</span>
                    </th>
                </tr>
            </thead>
            <tbody class="bg-white divide-y divide-gray-200">
                {% for attempt in pagination %}
                    <tr class="hover:bg-gray-50">
                        <td class="px-6 py-4 whitespace-nowrap">
                            <div class="text-sm font-medium text-gray-900">#{{ attempt.id }}</div>
                            <div class="text-xs text-gray-500">{{ attempt.attemptedAt|date('d/m/Y H:i') }}</div>
                        </td>
                        <td class="px-6 py-4">
                            <div class="text-sm font-medium text-gray-900">{{ attempt.email }}</div>
                            {% if attempt.user %}
                                <div class="text-xs text-gray-500">
                                    <i class="fas fa-user mr-1"></i>ID: {{ attempt.user.id }}
                                </div>
                            {% else %}
                                <div class="text-xs text-red-500">
                                    <i class="fas fa-exclamation-circle mr-1"></i>Utilisateur inconnu
                                </div>
                            {% endif %}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <div class="text-sm font-mono text-gray-900">{{ attempt.ipAddress }}</div>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <div class="text-sm text-gray-900">
                                {% if attempt.country %}
                                    <i class="fas fa-globe mr-1"></i>{{ attempt.country }}
                                {% else %}
                                    <span class="text-gray-400">N/A</span>
                                {% endif %}
                            </div>
                            {% if attempt.city %}
                                <div class="text-xs text-gray-500">{{ attempt.city }}</div>
                            {% endif %}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <div class="flex items-center space-x-2">
                                {% if attempt.deviceType %}
                                    {% if attempt.deviceType == 'desktop' %}
                                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">
                                            <i class="fas fa-desktop mr-1"></i> Desktop
                                        </span>
                                    {% elseif attempt.deviceType == 'mobile' %}
                                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-purple-100 text-purple-800">
                                            <i class="fas fa-mobile-alt mr-1"></i> Mobile
                                        </span>
                                    {% elseif attempt.deviceType == 'tablet' %}
                                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-pink-100 text-pink-800">
                                            <i class="fas fa-tablet-alt mr-1"></i> Tablette
                                        </span>
                                    {% endif %}
                                {% endif %}
                            </div>
                            {% if attempt.browser or attempt.os %}
                                <div class="text-xs text-gray-500 mt-1">
                                    {{ attempt.browser|default('') }} / {{ attempt.os|default('') }}
                                </div>
                            {% endif %}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            {% if attempt.successful %}
                                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
                                    <i class="fas fa-check mr-1"></i> Réussi
                                </span>
                            {% else %}
                                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">
                                    <i class="fas fa-times mr-1"></i> Échoué
                                </span>
                                {% if attempt.failureReason %}
                                    <div class="text-xs text-red-600 mt-1">{{ attempt.failureReason }}</div>
                                {% endif %}
                            {% endif %}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                            <a href="{{ path('admin_security_login_attempts_show', {id: attempt.id}) }}"
                               class="inline-flex items-center px-2 py-1 text-xs font-medium rounded text-blue-600 hover:bg-blue-50 transition-colors duration-150">
                                <i class="fas fa-eye mr-1"></i>
                                Voir
                            </a>
                        </td>
                    </tr>
                {% else %}
                    <tr>
                        <td colspan="7" class="px-6 py-12 text-center text-sm text-gray-500">
                            <i class="fas fa-inbox text-4xl text-gray-300 mb-3"></i>
                            <p>Aucune tentative de connexion trouvée</p>
                        </td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>

    {# Mobile Cards #}
    <div class="lg:hidden p-4 space-y-4">
        {% for attempt in pagination %}
            {% include 'admin/components/cards/login_attempts_card.html.twig' with {item: attempt} %}
        {% endfor %}
    </div>

    {# Pagination #}
    {% if pagination is defined and pagination and pagination.pageCount > 1 %}
        <div class="bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6">
            <div class="flex-1 flex justify-between sm:hidden">
                {% if pagination.currentPageNumber > 1 %}
                    <a href="{{ path('admin_security_login_attempts_index', filters|merge({page: pagination.currentPageNumber - 1})) }}"
                       class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
                        Précédent
                    </a>
                {% endif %}
                {% if pagination.currentPageNumber < pagination.pageCount %}
                    <a href="{{ path('admin_security_login_attempts_index', filters|merge({page: pagination.currentPageNumber + 1})) }}"
                       class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
                        Suivant
                    </a>
                {% endif %}
            </div>
            <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
                <div>
                    <p class="text-sm text-gray-700">
                        Page <span class="font-medium">{{ pagination.currentPageNumber }}</span>
                        sur <span class="font-medium">{{ pagination.pageCount }}</span>
                        <span class="text-gray-500">({{ pagination.getTotalItemCount }} au total)</span>
                    </p>
                </div>
                <div>
                    {{ knp_pagination_render(pagination) }}
                </div>
            </div>
        </div>
    {% endif %}
</div>
{% endblock %}

{% block javascripts %}
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
<script>
    const chartCtx = document.getElementById('attemptsChart').getContext('2d');
    const chartData = {{ chart_data|json_encode|raw }};

    new Chart(chartCtx, {
        type: 'line',
        data: {
            labels: chartData.map(d => {
                const date = new Date(d.date);
                return date.toLocaleDateString('fr-FR', { day: '2-digit', month: '2-digit' });
            }),
            datasets: [
                {
                    label: 'Total',
                    data: chartData.map(d => d.total),
                    borderColor: 'rgb(107, 114, 128)',
                    backgroundColor: 'rgba(107, 114, 128, 0.1)',
                    tension: 0.3,
                    fill: false
                },
                {
                    label: 'Réussies',
                    data: chartData.map(d => d.successful),
                    borderColor: 'rgb(34, 197, 94)',
                    backgroundColor: 'rgba(34, 197, 94, 0.1)',
                    tension: 0.3,
                    fill: true
                },
                {
                    label: 'Échouées',
                    data: chartData.map(d => d.failed),
                    borderColor: 'rgb(239, 68, 68)',
                    backgroundColor: 'rgba(239, 68, 68, 0.1)',
                    tension: 0.3,
                    fill: true
                }
            ]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    position: 'top',
                },
                tooltip: {
                    mode: 'index',
                    intersect: false,
                }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    ticks: {
                        precision: 0
                    }
                }
            }
        }
    });
</script>
{% endblock %}