{% extends 'admin/adminBase.html.twig' %}

{% block title %}ADMINISTRATION - Tableau de bord{% endblock %}
{% block titre_page %}Tableau de bord{% endblock %}
{% block sous_titre_page %}Retrouvez ici les chiffres récents des visites sur votre site{% endblock %}
{% block titre_icone %} {{ getMenuIcon('ADMIN_DASHBOARD') }}{% endblock %}
{% block droit_ajout %}{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    {# Vous pouvez ajouter des styles personnalisés ici si besoin pour le tableau #}
    <style>
        .sortable th {
            cursor: pointer;
            position: relative;
        }
        .sortable th .sort-icon {
            margin-left: 5px;
            display: inline-block;
            width: 0;
            height: 0;
            border-left: 4px solid transparent;
            border-right: 4px solid transparent;
            vertical-align: middle;
        }
        .sortable th .sort-icon.asc {
            border-bottom: 4px solid #333; /* Flèche vers le haut */
        }
        .sortable th .sort-icon.desc {
            border-top: 4px solid #333; /* Flèche vers le bas */
        }
    </style>
{% endblock %}

{% block body %}
    <div class="row">
        <div class="col">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">Statistiques</h5>
                </div>
                <div class="card-body">
                    <h5>Chiffres clés des visites</h5>
                    <hr />

                    {% for message in app.flashes('error') %}
                        <div class="alert alert-danger">{{ message }}</div>
                    {% endfor %}

                    <form action="{{ path('app_admin_dashboard') }}" method="get" class="mb-4">
                        <div class="row align-items-end">
                            <div class="col-md-3">
                                <label for="start_date" class="form-label">Date de début :</label>
                                <input type="date" id="start_date" name="start_date" class="form-control" value="{{ start_date }}">
                            </div>
                            <div class="col-md-3">
                                <label for="end_date" class="form-label">Date de fin :</label>
                                <input type="date" id="end_date" name="end_date" class="form-control" value="{{ end_date }}">
                            </div>
                            {# Champs cachés pour conserver le tri actuel lors de la soumission du formulaire de date #}
                            <input type="hidden" name="sort" value="{{ sort_column }}">
                            <input type="hidden" name="direction" value="{{ sort_direction }}">
                            <div class="col-md-3">
                                <button type="submit" class="btn btn-primary">Appliquer</button>
                            </div>
                        </div>
                    </form>

                    <div class="row mb-4">
                        <div class="col-md-6">
                            <div class="card shadow-sm">
                                <div class="card-header bg-primary text-white">
                                    <h5 class="mb-0">Utilisateurs actifs</h5>
                                </div>
                                <div class="card-body">
                                    <h2 class="card-title text-center">{{ total_stats.activeUsers }}</h2>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="card shadow-sm">
                                <div class="card-header bg-success text-white">
                                    <h5 class="mb-0">Vues de pages</h5>
                                </div>
                                <div class="card-body">
                                    <h2 class="card-title text-center">{{ total_stats.screenPageViews }}</h2>
                                </div>
                            </div>
                        </div>
                    </div>

                    <h5>Pages les plus vues</h5>
                    <hr />
                    {% if page_views_data is not empty %}
                        <table class="table table-striped table-hover">
                            <thead class="sortable">
                            <tr>
                                <th scope="col">
                                    <a href="{{ path('app_admin_dashboard', {
                                        'start_date': start_date,
                                        'end_date': end_date,
                                        'sort': 'pagePath',
                                        'direction': (sort_column == 'pagePath' and sort_direction == 'asc' ? 'desc' : 'asc')
                                    }) }}" class="text-decoration-none text-dark">
                                        Chemin de page
                                        {% if sort_column == 'pagePath' %}
                                            <span class="sort-icon {{ sort_direction }}"></span>
                                        {% endif %}
                                    </a>
                                </th>
                                <th scope="col">
                                    <a href="{{ path('app_admin_dashboard', {
                                        'start_date': start_date,
                                        'end_date': end_date,
                                        'sort': 'pageViews',
                                        'direction': (sort_column == 'pageViews' and sort_direction == 'asc' ? 'desc' : 'asc')
                                    }) }}" class="text-decoration-none text-dark">
                                        Vues de pages
                                        {% if sort_column == 'pageViews' %}
                                            <span class="sort-icon {{ sort_direction }}"></span>
                                        {% endif %}
                                    </a>
                                </th>
                            </tr>
                            </thead>
                            <tbody>
                            {% for page in page_views_data %}
                                <tr>
                                    <td>{{ page.pagePath }}</td>
                                    <td>{{ page.pageViews|number_format(0, ',', ' ') }}</td>
                                </tr>
                            {% endfor %}
                            </tbody>
                        </table>

                        <h3 class="mt-5">Visualisation des pages les plus vues</h3>
                        <div class="card p-3 shadow-sm">
                            <canvas id="pageViewsChart"></canvas>
                        </div>

                    {% else %}
                        <div class="alert alert-info" role="alert">
                            Aucune donnée de page vue disponible pour la période sélectionnée.
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
        <div class="col">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">Derniers contacts</h5>
                </div>
                <div class="card-body">
                    <table style="width: 100%;" class="table table-hover table-striped table-bordered">
                        <thead>
                        <tr>
                            <th>Date</th>
                            <th>Nom</th>
                            <th>Prenom</th>
                            <th>Mail</th>
                            <th>Telephone</th>
                            <th>Message</th>
                        </tr>
                        </thead>
                        <tbody>
                        {% for contact in contacts %}
                            <tr>
                                <td>{{ contact.dateCreation ? contact.dateCreation|date('d/m/Y H:i:s') : '' }}</td>
                                <td>{{ contact.nom }}</td>
                                <td>{{ contact.prenom }}</td>
                                <td>{{ contact.mail }}</td>
                                <td>{{ contact.telephone }}</td>
                                <td>{{ contact.message }}</td>
                            </tr>
                        {% else %}
                            <tr>
                                <td colspan="6">Aucun enregistrement trouvé</td>
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const pageViewsData = {{ page_views_data|json_encode|raw }};

            if (pageViewsData.length > 0) {
                const labels = pageViewsData.map(item => item.pagePath);
                const data = pageViewsData.map(item => item.pageViews);

                const ctx = document.getElementById('pageViewsChart').getContext('2d');
                new Chart(ctx, {
                    type: 'bar',
                    data: {
                        labels: labels,
                        datasets: [{
                            label: 'Vues de pages',
                            data: data,
                            backgroundColor: [
                                'rgba(255, 99, 132, 0.7)',
                                'rgba(54, 162, 235, 0.7)',
                                'rgba(255, 206, 86, 0.7)',
                                'rgba(75, 192, 192, 0.7)',
                                'rgba(153, 102, 255, 0.7)',
                                'rgba(255, 159, 64, 0.7)',
                                'rgba(199, 199, 199, 0.7)',
                                'rgba(83, 102, 255, 0.7)',
                                'rgba(102, 255, 153, 0.7)',
                                'rgba(255, 102, 102, 0.7)'
                            ],
                            borderColor: [
                                'rgba(255, 99, 132, 1)',
                                'rgba(54, 162, 235, 1)',
                                'rgba(255, 206, 86, 1)',
                                'rgba(75, 192, 192, 1)',
                                'rgba(153, 102, 255, 1)',
                                'rgba(255, 159, 64, 1)',
                                'rgba(199, 199, 199, 1)',
                                'rgba(83, 102, 255, 1)',
                                'rgba(102, 255, 153, 1)',
                                'rgba(255, 102, 102, 1)'
                            ],
                            borderWidth: 1
                        }]
                    },
                    options: {
                        responsive: true,
                        plugins: {
                            legend: {
                                display: false // Cache la légende pour un graphique à barres simple
                            },
                            title: {
                                display: true,
                                text: 'Top des pages vues par chemin'
                            }
                        },
                        scales: {
                            y: {
                                beginAtZero: true,
                                title: {
                                    display: true,
                                    text: 'Nombre de vues'
                                }
                            },
                            x: {
                                title: {
                                    display: true,
                                    text: 'Chemin de page'
                                }
                            }
                        }
                    }
                });
            }
        });
    </script>
{% endblock %}