{% extends "base.html" %}
{% import "/components/header.html" as header %}
{% import "/components/footer.html" as footer %}
{% import "components/profile_card.html" as profile_card %}
{% import "components/profile_nav.html" as profile_nav %}

{% block title %}Статистика{% endblock %}



{% block content %}
{{ header.section(user) }}
<section class="c_dg3k4">
    <div class="c_gtoe9">
        {{ profile_card.profile_card(user) }}
        <div class="c_ru432">
            {{ profile_nav.profile_nav(user, 'statistics') }}
            <div class="c_tihtk" id="main">
                <div>
<p>Общее кол-во художников {{all_users}}</p><p> из {{all_city}} городов</p>
</div>
<h2>1. Статистика по городам</h2>
<table class="stats-table" border="1" cellpadding="8" id="living-table">
    <thead>
        <tr>
            <th>Город</th>
            <th>Художники</th>
            <th>Картины</th>
        </tr>
    </thead>
    <tbody>
    {% for stat in living_stats %}
    {% if stat._id %}
        <tr class="main-row" data-type="living" data-key="{{ stat._id }}">
            <td>{{ stat._id or 'Unknown' }}</td>
            <td class="clickable" onclick="toggleDetails(this)">{{ stat.user_count }}</td>
            <td class="clickable" onclick="toggleDetailsPosts(this)">{{ stat.post_count }}</td>
        </tr>
        <!-- Details row (hidden initially) -->
        <tr class="details-row" style="display: none;">
            <td colspan="3">
                <strong>Художники:</strong>
                <ul>
                {% for u in stat.usernames %}
                    <li><a href="/artists/{{u._id}}">{{ u.username }}</a></li>
                {% endfor %}
                </ul>
                <!-- You can add more details or links here -->
            </td>
        </tr>
        <tr class="details-row" style="display: none;">
            <td colspan="3">
                <strong>Картины:</strong>
                <ul>
                {% for u in stat.posts %}
                    <li><a href="/paintings/{{u._id}}">{{ u.title }}</a></li>
                {% endfor %}
                </ul>
                <!-- You can add more details or links here -->
            </td>
        </tr>
    {% endif %}
    {% endfor %}
    </tbody>
</table>

<h2>2. Статистика по Месяцу и Году регистрации</h2>
<table class="stats-table" border="1" cellpadding="8" id="reg-table">
    <thead>
        <tr>
            <th>Дата регистрации</th>
            <th>Художники</th>
            <th>Картины</th>
        </tr>
    </thead>
    <tbody>
    {% for stat in reg_stats %}
        <tr class="main-row" data-type="reg" data-key="{{ stat._id }}">
            <td>{{ stat._id }}</td>
            <td class="clickable" onclick="toggleDetails(this)">{{ stat.user_count }}</td>
            <td class="clickable" onclick="toggleDetailsPosts(this)">{{ stat.post_count }}</td>
        </tr>
        <tr class="details-row" style="display: none;">
            <td colspan="3">
                <strong>Художники:</strong>
                <ul>
                {% for u in stat.usernames %}
                    <li><a href="/artists/{{u._id}}">{{ u.username }}</a></li>
                {% endfor %}
                </ul>
            </td>
        </tr>
        <tr class="details-row" style="display: none;">
            <td colspan="3">
                <strong>Картины:</strong>
                <ul>
                {% for u in stat.posts %}
                    <li><a href="/paintings/{{u._id}}">{{ u.title }}</a></li>
                {% endfor %}
                </ul>
            </td>
        </tr>
    {% endfor %}
    </tbody>
</table>

<script>
function toggleDetails(cell) {
    const mainRow = cell.parentElement;
    const detailsRow = mainRow.nextElementSibling;
    
    if (detailsRow.style.display === "none") {
        detailsRow.style.display = "table-row";
        mainRow.classList.add("expanded");
    } else {
        detailsRow.style.display = "none";
        mainRow.classList.remove("expanded");
    }
}
function toggleDetailsPosts(cell) {
    const mainRow = cell.parentElement;
    const detailsRow = mainRow.nextElementSibling.nextElementSibling;
    
    if (detailsRow.style.display === "none") {
        detailsRow.style.display = "table-row";
        mainRow.classList.add("expanded");
    } else {
        detailsRow.style.display = "none";
        mainRow.classList.remove("expanded");
    }
}

// Optional: Make entire row clickable except the numbers
document.querySelectorAll('.main-row').forEach(row => {
    row.addEventListener('click', function(e) {
        if (!e.target.classList.contains('clickable')) {
            const userCell = this.querySelector('td:nth-child(2)');
            if (userCell) toggleDetails(userCell);
        }
    });
});
</script>

<style>
.stats-table { border-collapse: collapse; width: 100%; margin-bottom: 2rem; }
.stats-table th, .stats-table td { border: 1px solid #ccc; }
.clickable { cursor: pointer; color: blue; text-decoration: underline; }
.clickable:hover { background-color: #f0f0f0; }
.main-row.expanded { background-color: #e6f3ff; }
.details-row td { background-color: #f9f9f9; padding: 15px; }
</style>


            </div>
        </div>
    </div>
</section>

{{ footer.section(user) }}
{% endblock %}

{% block head %}
{{ header.style() }}
{{ profile_nav.style() }}
<style>

/* Mobile */
@media (max-width: 699px) {
.c_mrl59 { align-items: center; background: #5F1798; border-radius: 25px; bottom: -15px; display: flex; height: 50px; justify-content: center; position: absolute; right: -15px; width: 50px; }



}

/* Tablet */
@media (min-width: 700px) and (max-width: 900px) {
.c_iiehk { align-items: center; border-radius: 5px; display: flex; flex-direction: column; gap: 20px; width: 335px; }
.c_nnsh6>a>img{display: none;}

}

/* Desktop */
@media (min-width: 901px) {
.c_iiehk { align-items: flex-end; border-radius: 5px; display: flex; flex-direction: column; gap: 20px; width: 310px; }
.c_nnsh6>a>img{display: none;}

}</style>
{{ footer.style() }}
{% endblock %}