{% extends "base.html" %}

{% block title %}Заказы{% endblock %}

{% block content %}
<div class="container mt-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h2 class="text-light">Заказы</h2>
        <h2>
            <i 
                class="fa-solid fa-trash" 
                data-bs-toggle="modal" 
                data-bs-target="#deletePendingModal" 
                type="button" 
                style="cursor: pointer; color: white;">
            </i> <!-- Белый цвет иконки с красной обводкой -->
        </h2>
    </div>

    <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>Количество товаров</th>
                    <th class="text-center">Сумма</th>
                    <th>Статус оплаты</th>
                    <th>Дата создания</th>
                    <th class="text-center">Действия</th>
                </tr>
            </thead>
            <tbody>
                {% for order in orders %}
                <tr>
                    <td>{{ order.id }}</td>
                    <td>{{ order.user_username }}</td>
                    <td>{{ order.items|length }}</td>
                    <td class="text-center">{{ order.total_amount }}₽</td>
                    <td>
                        {% if order.payment and order.payment.status == 'succeeded' %}
                        <span class="badge bg-success">Оплачен</span>
                        {% else %}
                        <span class="badge bg-warning text-dark">Ожидает оплаты</span>
                        {% endif %}
                    </td>
                    <td>{{ order.created_at.strftime('%Y-%m-%d %H:%M') }}</td>
                    <td class="text-center">
                        <h2>
                            <i 
                                class="fa-solid fa-info" 
                                data-bs-toggle="modal" 
                                data-bs-target="#orderModal{{ order.id }}" 
                                type="button" 
                                style="cursor: pointer; color: white;">
                            </i> <!-- Белый цвет иконки -->
                        </h2>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>

    <!-- Модальные окна для деталей заказов -->
    {% for order in orders %}
    <div class="modal fade" id="orderModal{{ order.id }}" tabindex="-1" aria-labelledby="orderModalLabel{{ order.id }}" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content bg-dark text-light">
                <div class="modal-header">
                    <h5 class="modal-title" id="orderModalLabel{{ order.id }}">Детали заказа #{{ order.id }}</h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <p><strong>Покупатель:</strong> {{ order.user_username }}</p>
                            <p><strong>Дата создания:</strong> {{ order.created_at.strftime('%Y-%m-%d %H:%M') }}</p>
                           <!--<p><strong>Статус оплаты:</strong>
                                {% if order.payment and order.payment.status == 'succeeded' %}
                                <span class="badge bg-success">Оплачен</span>
                                {% else %}
                                <span class="badge bg-warning text-dark">Ожидает оплаты</span>
                                {% endif %}
                            </p>-->
                        </div>
                        <div class="col-md-6">
                            {% if order.customer.discount %}
                            <p><strong>Скидка:</strong> {{ order.customer.discount.percentage }}%</p>
                            {% endif %}
                            <p><strong>Сумма без скидки:</strong> {{ order.items|sum(attribute='product.price') }}₽</p>
                            <p><strong>Итоговая сумма:</strong> {{ order.total_amount }}₽</p>
                            <p><strong>Статус оплаты:</strong>
                            <td>
                                {% if order.payment and order.payment.status == 'succeeded' %}
                                <span class="badge bg-success">Оплачен</span>
                                {% else %}
                                <span class="badge bg-warning text-dark">Ожидает оплаты</span>
                                {% endif %}
                            </td>
                            </p>
                        </div>
                    </div>
                    
                    <h6 class="mb-3">Товары в заказе:</h6>
                    <div class="table-responsive">
                        <table class="table table-dark table-striped">
                            <thead>
                                <tr>
                                    <th>Товар</th>
                                    <th>Количество</th>
                                    <th>Цена без скидки за ед.</th>
                                    <th>Итоговая цена за ед.</th>
                                    <th>Сумма</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for item in order.items %}
                                <tr>
                                    <td>{{ item.product.name }}</td>
                                    <td>{{ item.quantity }}</td>
                                    <td>{{ item.product.price }}₽</td>
                                    <td>{{ item.price }}₽</td>
                                    <td>{{ item.price * item.quantity }}₽</td>
                                </tr>

                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Закрыть</button>
                </div>
            </div>
        </div>
    </div>
    {% endfor %}

    <!-- Модальное окно подтверждения удаления неоплаченных заказов -->
    <div class="modal fade" id="deletePendingModal" tabindex="-1" aria-labelledby="deletePendingModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content bg-dark text-light">
                <div class="modal-header">
                    <h5 class="modal-title" id="deletePendingModalLabel">Подтверждение удаления</h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p>Будет удалено заказов: <strong>{{ pending_orders_count }}</strong></p>
                    <p>На общую сумму: <strong>{{ pending_orders_sum }}</strong> руб.</p>
                    <p>Вы уверены, что хотите удалить все неоплаченные заказы?</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Отмена</button>
                    <form action="{{ url_for('delete_pending_orders') }}" method="POST" style="display: inline;">
                        <button type="submit" class="btn btn-danger">Удалить</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}