<!-- app/templates/statistics/index.html -->
{% extends "base.html" %}

{% block title %}统计分析 - 图书管理系统{% endblock %}

{% block head %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/statistics.css') }}">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
<!-- Updated Google Fonts Link -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Lora:wght@400;600&family=Open+Sans:wght@300;400&family=Sacramento&family=EB+Garamond:ital@0;1&display=swap" rel="stylesheet">
{% endblock %}

{% block content %}
<div class="statistics-container animate__animated animate__fadeIn">
    <h1 class="page-title">统计分析</h1>

    <div class="quote-banner">
        <p>"统计数字是文学世界的星辰，照亮知识的海洋"</p>
    </div>

    <div class="stats-grid">
        <a href="{{ url_for('statistics.book_ranking') }}" class="stats-card animate__animated animate__fadeInUp">
            <div class="card-inner">
                <div class="card-icon"><i class="fas fa-chart-line"></i></div>
                <div class="card-title">热门图书排行</div>
                <div class="card-description">查看最受欢迎的图书，按借阅次数排名</div>
                <div class="card-decoration book-decoration"></div>
            </div>
        </a>

        <a href="{{ url_for('statistics.borrow_statistics') }}" class="stats-card animate__animated animate__fadeInUp" style="animation-delay: 0.1s;">
            <div class="card-inner">
                <div class="card-icon"><i class="fas fa-exchange-alt"></i></div>
                <div class="card-title">借阅趋势分析</div>
                <div class="card-description">查看借阅和归还的历史趋势和分布</div>
                <div class="card-decoration trend-decoration"></div>
            </div>
        </a>

        <a href="{{ url_for('statistics.user_activity') }}" class="stats-card animate__animated animate__fadeInUp" style="animation-delay: 0.2s;">
            <div class="card-inner">
                <div class="card-icon"><i class="fas fa-users"></i></div>
                <div class="card-title">用户活跃度分析</div>
                <div class="card-description">查看最活跃的用户和用户行为分析</div>
                <div class="card-decoration user-decoration"></div>
            </div>
        </a>

        <a href="{{ url_for('statistics.overdue_analysis') }}" class="stats-card animate__animated animate__fadeInUp" style="animation-delay: 0.3s;">
            <div class="card-inner">
                <div class="card-icon"><i class="fas fa-exclamation-circle"></i></div>
                <div class="card-title">逾期分析</div>
                <div class="card-description">分析图书逾期情况和趋势</div>
                <div class="card-decoration overdue-decoration"></div>
            </div>
        </a>
    </div>

    <div class="page-decoration left"></div>
    <div class="page-decoration right"></div>
</div>
{% endblock %}

{% block scripts %}
<script src="{{ url_for('static', filename='js/statistics.js') }}"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    // 添加卡片悬停动画效果
    const cards = document.querySelectorAll('.stats-card');

    cards.forEach(card => {
        card.addEventListener('mouseenter', function() {
            const decoration = this.querySelector('.card-decoration');
            if (decoration) { // Check if decoration exists
                decoration.classList.add('active');
            }
            this.classList.add('hovered'); // Add class for general hover style
        });

        card.addEventListener('mouseleave', function() {
            const decoration = this.querySelector('.card-decoration');
            if (decoration) { // Check if decoration exists
                decoration.classList.remove('active');
            }
            this.classList.remove('hovered'); // Remove class
        });
    });
});
</script>
{% endblock %}
