{% extends "base.html" %}

{% block title %}Пользователи{% endblock %}

{% block content %}
<div class="container">
    <div class="row mb-4">
        <div class="col-12 d-flex justify-content-between align-items-center">
            <h2>Зарегистрированные пользователи</h2>
            <div class="d-flex gap-2">
                
                <h2>
                    <a href="{{ url_for('discounts') }}" style="text-decoration: none; color: white;">
                        <i class="fa-solid fa-percent"></i> <!-- Иконка Font Awesome как ссылка -->
                    </a>
                </h2>
                <h2 class="ms-3">
                    <a href="{{ url_for('motivation_system') }}" style="text-decoration: none; color: white;"> <!-- Убираем подчеркивание и задаем белый цвет -->
                        <i class="fa-solid fa-tags"></i> <!-- Иконка Font Awesome как ссылка -->
                    </a>
                </h2>

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

    <div class="row">
        <div class="col-12">
            <div class="">
                <div class="">
                    <div class="table-responsive">
                        <table class="table table-dark table-striped table-bordered table-hover rounded-table">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>Username</th>
                                    <th>Telegram ID</th>
                                    <th>Дата регистрации</th>
                                    <th>Оплаченные заказы</th>
                                    <th>Неоплаченные заказы</th>
                                    <th>Всего заказов</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for customer in customers %}
                                <tr class="customer-row" data-customer-id="{{ customer.id }}" style="cursor: pointer;">
                                    <td>{{ loop.index }}</td>
                                    <td>{{ customer.username }}</td>
                                    <td>{{ customer.telegram_id }}</td>
                                    <td>{{ customer.registered_at.strftime('%Y-%m-%d %H:%M:%S') }}</td>
                                    <td>{{ customer.paid_orders_count }}</td>
                                    <td>{{ customer.pending_orders_count }}</td>
                                    <td>{{ customer.total_orders_count }}</td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Модальное окно -->
<div class="modal fade" id="customerModal" tabindex="-1" aria-labelledby="customerModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="customerModalLabel">Информация о клиенте</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="customer-info mb-4">
                    <p><strong>Username:</strong> <span id="customerUsername"></span></p>
                    <p><strong>Дата регистрации:</strong> <span id="customerRegistered"></span></p>
                    <p><strong>Всего покупок:</strong> <span id="customerTotalOrders"></span></p>
                    <p><strong>Всего потрачено:</strong> <span id="customerTotalSpent"></span> ₽</p>
                </div>
                <div class="order-history">
                    <h5>История покупок:</h5>
                    <div id="orderHistory"></div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Закрыть</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Инициализация модального окна
    const customerModalEl = document.getElementById('customerModal');
    const customerModal = new bootstrap.Modal(customerModalEl);
    
    // Обработчик клика по строке таблицы
    const rows = document.querySelectorAll('.customer-row');
    rows.forEach(row => {
        row.addEventListener('click', async function() {
            const customerId = this.getAttribute('data-customer-id');
            console.log('Clicked customer ID:', customerId); // Отладочный вывод
            
            try {
                const response = await fetch(`/api/customer/${customerId}`);
                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }
                const data = await response.json();
                console.log('Received data:', data); // Отладочный вывод
                
                // Заполняем информацию о клиенте
                document.getElementById('customerUsername').textContent = data.username;
                document.getElementById('customerRegistered').textContent = data.registered_at;
                document.getElementById('customerTotalOrders').textContent = data.total_orders;
                document.getElementById('customerTotalSpent').textContent = data.total_spent.toFixed(2);
                
                // Формируем историю заказов
                const orderHistoryHtml = data.order_history.map((order, index) => {
                    const items = order.items.map(item => 
                        `${item.name} (${item.quantity} шт. × ${item.price} ₽)`
                    ).join(', ');
                    
                    console.log('Order data:', order); // Отладочный вывод для заказа
                    
                    const orderStatus = order.payment ? 
                        (order.payment.status === 'succeeded' ? 'Оплачен' : 'В ожидании') : 
                        'В ожидании';
                    
                    return `
                        <div class="order-item mb-3">
                            <h6>Заказ #${order.id} - ${order.date}</h6>
                            <p class="mb-1">Статус: ${orderStatus}</p>
                            <p class="mb-1">Товары: ${items}</p>
                            <p class="mb-0">Сумма: ${order.total.toFixed(2)} ₽</p>
                        </div>
                    `;
                }).join('');
                
                document.getElementById('orderHistory').innerHTML = orderHistoryHtml || '<p>Нет истории заказов</p>';
                
                // Показываем модальное окно
                customerModal.show();
                
            } catch (error) {
                console.error('Ошибка при получении данных:', error);
                alert('Произошла ошибка при загрузке информации о клиенте');
            }
        });
    });
});
</script>

<style>
.order-item {
    padding: 15px;
    border: 1px solid #dee2e6;
    border-radius: 4px;
}
.order-item h6 {
    margin-bottom: 10px;
    color: #0d6efd;
}
.customer-row:hover {
    opacity: 0.8;
}
.modal-content {
    background-color: #242424;
    color: #ffffff;
}
.modal-header {
    border-bottom: 1px solid #404040;
}
.modal-footer {
    border-top: 1px solid #404040;
}
.order-item {
    background-color: #1a1a1a;
    border: 1px solid #404040;
}
</style>
{% endblock %}