{% extends 'base.html.twig' %}

{% block title %}{{ 'display.stats'|trans }}{% endblock %}

{% block body %}
<div class="container">
    <div class="card mt-4 p-4">
        <h1 class="card-title">{{ 'display.stats'|trans }}</h1>
        <p>
            {{ stats.zone }}
        </p>
        <p>
            {# {{ dump(stats) }} #}
        </p>
         {{ stats.getCompletionPercent() }} % complété sur les critères donnés.
         <br>
         {{ stats.getPlacesCount() }} commerces dans la zone.
         <br>
         {{ stats.getAvecHoraires() }} commerces avec horaires.
         <br>
         {{ stats.getAvecAdresse() }} commerces avec adresse.
         <br>
         {{ stats.getAvecSite() }} commerces avec site web renseigné.
         <br>
         {{ stats.getAvecAccessibilite() }} commerces avec accessibilité renseignée.
         <br>
         {{ stats.getAvecNote() }} commerces avec note renseignée.
         <br>
    </div>

    <div class="card mt-4">
        <h1 class="card-title">Tableau des commerces</h1>
        <table class="table table-bordered">
            <thead>
                <tr>
                    <th>Nom ({{ stats.getPlacesCount() }})</th>
                    <th>Adresse ({{ stats.getAvecAdresse() }} / {{ stats.getPlacesCount() }})</th>
                    <th>Site web ({{ stats.getAvecSite() }} / {{ stats.getPlacesCount() }})</th>
                    <th>Accessibilité ({{ stats.getAvecAccessibilite() }} / {{ stats.getPlacesCount() }})</th>
                    <th>Note ({{ stats.getAvecNote() }} / {{ stats.getPlacesCount() }})</th>
                </tr>
            </thead>
            <tbody>
                {% for commerce in stats.places %}
                    <tr>
                        <td style="background-color: {{ commerce.hasAddress() ? 'yellowgreen' : 'transparent' }};">{{ commerce.name }}</td>
                        <td style="background-color: {{ commerce.hasAddress() ? 'yellowgreen' : 'transparent' }};">{{ commerce.address }}</td>
                        <td style="background-color: {{ commerce.hasWebsite() ? 'yellowgreen' : 'transparent' }};">{{ commerce.website }}</td>
                        <td style="background-color: {{ commerce.hasWheelchair() ? 'yellowgreen' : 'transparent' }};">{{ commerce.wheelchair }}</td>
                          <td style="background-color: {{ commerce.hasNote() ? 'yellowgreen' : 'transparent' }};">{{ commerce.note }}</td>      
                    </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>

<style>
/* Styles spécifiques pour la page stats */
.stats-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.stat-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem;
    background-color: var(--light-gray);
    border-radius: 4px;
}

.stat-label {
    font-weight: 500;
    color: var(--primary-color);
}

.stat-value {
    font-size: 1.25rem;
    font-weight: bold;
    color: var(--secondary-color);
}

.modifications-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.modification-item {
    padding: 0.75rem;
    background-color: var(--light-gray);
    border-radius: 4px;
}

.modification-header {
    margin-bottom: 0.25rem;
}

.modification-date {
    font-size: 0.875rem;
    color: var(--text-color);
    opacity: 0.8;
}

.modification-details {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modification-type {
    font-weight: 500;
    color: var(--primary-color);
}

.shop-types-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.shop-type-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem;
    background-color: var(--light-gray);
    border-radius: 4px;
}

.shop-type-name {
    font-weight: 500;
}

.shop-type-count {
    background-color: var(--secondary-color);
    color: white;
    padding: 0.25rem 0.5rem;
    border-radius: 12px;
    font-size: 0.875rem;
}

.places-table-container {
    overflow-x: auto;
}

.places-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
}

.places-table th,
.places-table td {
    padding: 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

.places-table th {
    background-color: var(--light-gray);
    font-weight: 500;
    color: var(--primary-color);
}

.places-table tr:hover {
    background-color: var(--light-gray);
}

.btn-sm {
    padding: 0.25rem 0.75rem;
    font-size: 0.875rem;
}

@media (max-width: 768px) {
    .grid-3 {
        grid-template-columns: 1fr;
    }
    
    .places-table {
        font-size: 0.875rem;
    }
    
    .btn-sm {
        padding: 0.25rem 0.5rem;
    }
}
</style>
{% endblock %}