{% 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-3"> <!-- Контейнер для иконок с отступом -->
                <h2>
                    <i 
                        class="fa-solid fa-plus" 
                        data-bs-toggle="modal" 
                        data-bs-target="#addDiscountModal" 
                        type="button" 
                        style="cursor: pointer; color: white;">
                    </i> <!-- Белый цвет иконки -->
                </h2>
                <h2 class="ms-1">
                    <a href="/help#discounts" style="text-decoration: none; color: white;"> <!-- Убираем подчеркивание и задаем белый цвет -->
                        <i class="fa-solid fa-question"></i> <!-- Иконка Font Awesome как ссылка -->
                    </a>
                </h2>
            </div>
        </div>
    </div>
</div>

    <div class="row">
        <div class="col-12">
            <div class="card bg-dark">
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-dark table-striped table-bordered table-hover rounded-table">
                            <thead>
                                <tr>
                                    <th>Пользователь</th>
                                    <th>Telegram ID</th>
                                    <th>Скидка (%)</th>
                                    <th>Источник</th>
                                    <th>Статус</th>
                                    <th>Дата создания</th>
                                    <th class="text-center">Действия</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for discount in discounts %}
                                <tr>
                                    <td>{{ discount.customer.username }}</td>
                                    <td>{{ discount.customer.telegram_id }}</td>
                                    <td>{{ discount.percentage }}%</td>
                                    <td>
                                        {% if discount.source == 'robot' %}
                                            <span>Назначено автоматически</span>
                                        {% else %}
                                            <span>Назначено вручную</span>
                                        {% endif %}
                                    </td>
                                    <td>
                                        {% if discount.is_active %}
                                        <span>Активна</span>
                                        {% else %}
                                        <span>Неактивна</span>
                                        {% endif %}
                                    </td>
                                    <td>{{ discount.created_at.strftime('%Y-%m-%d %H:%M:%S') }}</td>
                                    <td class="text-center">
                                        <button class="btn btn-sm btn-outline-secondary delete-discount" data-discount-id="{{ discount.id }}">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Модальное окно добавления скидки -->
<div class="modal fade" id="addDiscountModal" tabindex="-1" aria-labelledby="addDiscountModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content bg-dark">
            <div class="modal-header">
                <h5 class="modal-title" id="addDiscountModalLabel">Добавить скидку</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="addDiscountForm">
                    <div class="mb-3">
                        <label for="customerSelect" class="form-label">Пользователь</label>
                        <select class="form-select" id="customerSelect" name="customer_id" required>
                            {% for customer in customers %}
                            <option value="{{ customer.id }}">{{ customer.username }} ({{ customer.telegram_id }})</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="mb-3">
                        <label for="discountPercentage" class="form-label">Процент скидки</label>
                        <input type="number" class="form-control" id="discountPercentage" name="percentage" 
                               min="1" max="100" required>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Отмена</button>
                <button type="button" class="btn btn-primary" id="saveDiscount">Сохранить</button>
            </div>
        </div>
    </div>
</div>

{% endblock %}

{% block scripts %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Обработчик сохранения скидки
    document.getElementById('saveDiscount').addEventListener('click', function() {
        const form = document.getElementById('addDiscountForm');
        const formData = new FormData(form);
        
        // Преобразуем FormData в JSON
        const data = {
            customer_id: formData.get('customer_id'),
            percentage: parseInt(formData.get('percentage'))
        };

        fetch('/api/discount/add', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(data)
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                location.reload();
            } else {
                alert(data.message || 'Произошла ошибка при сохранении скидки');
            }
        });
    });

    // Обработчик удаления скидки
    document.querySelectorAll('.delete-discount').forEach(button => {
        button.addEventListener('click', function() {
            if (confirm('Вы уверены, что хотите удалить эту скидку?')) {
                const discountId = this.getAttribute('data-discount-id');
                
                fetch(`/api/discount/delete/${discountId}`, {
                    method: 'DELETE'
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        location.reload();
                    } else {
                        alert(data.message || 'Произошла ошибка при удалении скидки');
                    }
                });
            }
        });
    });
});
</script>
{% endblock %}