{% extends "base.html" %}

{% block title %}Dashboard{% endblock %}

{% block content %}
<div class="container">
    <!-- Карточки со статистикой -->
    <div class="row mb-4">
        <div class="col-md-3">
            <div class="card bg-dark">
                <div class="card-body">
                    <h5 class="card-title">Всего пользователей</h5>
                    <p class="card-text display-6">{{ customers_count }}</p>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card bg-dark">
                <div class="card-body">
                    <h5 class="card-title">Всего заказов: {{ orders_count }}</h5>
                    <p class="card-text display-6">
                        
                        <small style="font-size: 1rem;">
                            Не оплачен: <span class="text-warning">{{ unpaid_orders_count }}</span>
                        </small>
                    </p>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card bg-dark">
                <div class="card-body">
                    <h5 class="card-title">Выручка за все время</h5>
                    <p class="card-text display-6">{{ total_revenue }} ₽</p>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card bg-dark">
                <div class="card-body">
                    <h5 class="card-title">Едениц товаров в продаже</h5>
                    <p class="card-text display-6">{{ total_products_quantity }}</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Графики -->
    <div class="row mt-4">
        <!-- График продаж -->
        <div class="col-md-6">
            <div class="card bg-dark h-100">
                <div class="card-body">
                    <h5 class="card-title">Продажи за последние 7 дней</h5>
                    <div style="height: 250px; width: 580px; margin: 0 auto; position: relative;">
                        <canvas id="salesChart"></canvas>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Популярные товары -->
        <div class="col-md-6">
            <div class="card bg-dark h-100">
                <div class="card-body">
                    <h5 class="card-title">Популярные товары (цена без скидки)</h5>
                    <div class="table-responsive">
                        <table class="table table-dark table-hover">
                            <thead>
                                <tr>
                                    <th>Товар</th>
                                    <th>Продано (шт.)</th>
                                    <th>Сумма продаж</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for product in product_data %}
                                <tr>
                                    <td>{{ product.name }}</td>
                                    <td>{{ product.quantity }}</td>
                                    <td>{{ product.amount }} ₽</td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Последние заказы -->
    <div class="row mt-4">
        <div class="col-12">
            <div class="card bg-dark">
                <div class="card-body">
                    <h5 class="card-title">Последние заказы с учетом скидок</h5>
                    <div class="table-responsive">
                        <table class="table table-dark table-hover">
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>Пользователь</th>
                                    <th>Количество товаров</th>
                                    <th>Сумма</th>
                                    <th>Статус</th>
                                    <th>Дата</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for order in recent_orders %}
                                <tr>
                                    <td>{{ order.order_id }}</td>
                                    <td>{{ order.username }}</td>
                                    <td>{{ order.items_count }}</td>
                                    <td>{{ order.total_amount }} ₽</td>
                                    <td>
                                        <span class="badge {% if order.status == 'Оплачен' %}bg-success{% else %}bg-warning text-dark{% endif %}">
                                            {{ order.status }}
                                        </span>
                                    </td>
                                    <td>{{ order.created_at }}</td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    var canvas = document.getElementById('salesChart');
    
    if (canvas) {
        var ctx = canvas.getContext('2d');
        var dates = {{ sales_dates|tojson }}.map(date => {
            const [year, month, day] = date.split('-');
            return `${day}.${month}`;
        });
        var amounts = {{ sales_amounts|tojson }};
        var counts = {{ sales_counts|tojson }};

        var data = {
            labels: dates,
            datasets: [{
                label: 'Продажи',
                data: amounts,
                backgroundColor: '#0dcaf0'
            }]
        };
        
        var options = {
            responsive: true,
            maintainAspectRatio: false,
            scales: {
                y: {
                    beginAtZero: true,
                    ticks: {
                        color: '#fff',
                        callback: function(value) {
                            return value.toLocaleString() + ' ₽';
                        }
                    },
                    grid: {
                        color: 'rgba(255, 255, 255, 0.1)'
                    }
                },
                x: {
                    ticks: {
                        color: '#fff'
                    },
                    grid: {
                        color: 'rgba(255, 255, 255, 0.1)'
                    }
                }
            },
            plugins: {
                legend: {
                    display: false
                },
                tooltip: {
                    callbacks: {
                        label: function(context) {
                            const index = context.dataIndex;
                            const count = counts[index];
                            const amount = context.parsed.y.toLocaleString();
                            return [
                                `Сумма: ${amount} ₽`,
                                `Количество продаж: ${count} шт.`
                            ];
                        }
                    }
                }
            }
        };
        
        new Chart(ctx, {
            type: 'bar',
            data: data,
            options: options
        });
    }
});
</script>
{% endblock %}