{% 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="#addPromoModal" 
                        type="button" 
                        style="cursor: pointer; color: white;">
                    </i>
                </h2>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-12">
            <div class="table-responsive">
                <table class="table table-dark table-striped table-bordered table-hover rounded-table">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>Промокод</th>
                            <th>Лимит активаций</th>
                            <th>Использовано</th>
                            <th>Скидка</th>
                            <th>Статус</th>
                            <th>Дата создания</th>
                            <th class="text-center">Действия</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for promo in promocodes %}
                        <tr>
                            <td>{{ loop.index }}</td>
                            <td>{{ promo.promocode }}</td>
                            <td>{{ promo.activation_limit if promo.activation_limit > 0 else "∞" }}</td>
                            <td>{{ promo.activation_total }}</td>
                            <td>{{ promo.percentage }}%</td>
                            <td>
                                {% if promo.is_enable %}
                                <span class="badge bg-success">Активен</span>
                                {% else %}
                                <span class="badge bg-danger">Неактивен</span>
                                {% endif %}
                            </td>
                            <td>{{ promo.date.strftime('%Y-%m-%d %H:%M') }}</td>
                            <td class="text-center">
                                <button class="btn btn-sm btn-outline-secondary" onclick="editPromo({{ promo.id }})">
                                    <i class="fas fa-edit"></i>
                                </button>
                                <button class="btn btn-sm btn-outline-secondary" onclick="deletePromo({{ promo.id }})">
                                    <i class="fas fa-trash"></i>
                                </button>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- Модальное окно добавления промокода -->
<div class="modal fade" id="addPromoModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content bg-dark text-light">
            <div class="modal-header">
                <h5 class="modal-title">Добавить промокод</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="promoForm">
                    <div class="mb-3">
                        <label for="promocode" class="form-label">Промокод</label>
                        <div class="input-group">
                            <input type="text" class="form-control bg-dark text-light" id="promocode" readonly>
                            <button class="btn btn-outline-secondary" type="button" onclick="generatePromoCode()">
                                <i class="fas fa-sync-alt"></i>
                            </button>
                        </div>
                    </div>
                    <div class="mb-3">
                        <label for="activationLimit" class="form-label">Лимит активаций (0 = безлимитно)</label>
                        <input type="number" class="form-control bg-dark text-light" id="activationLimit" min="0" value="1">
                    </div>
                    <div class="mb-3">
                        <label for="percentage" class="form-label">Процент скидки</label>
                        <input type="number" class="form-control bg-dark text-light" id="percentage" min="1" max="100" value="10">
                    </div>
                    <div class="mb-3 form-check form-switch">
                        <input class="form-check-input" type="checkbox" id="isEnable" checked>
                        <label class="form-check-label" for="isEnable">Активен</label>
                    </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" onclick="savePromo()">Сохранить</button>
            </div>
        </div>
    </div>
</div>

<!-- Модальное окно редактирования -->
<div class="modal fade" id="editPromoModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content bg-dark text-light">
            <div class="modal-header">
                <h5 class="modal-title">Редактировать промокод</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="editPromoForm">
                    <input type="hidden" id="editPromoId">
                    <div class="mb-3">
                        <label for="editPromocode" class="form-label">Промокод</label>
                        <input type="text" class="form-control bg-dark text-light" id="editPromocode" readonly>
                    </div>
                    <div class="mb-3">
                        <label for="editActivationLimit" class="form-label">Лимит активаций (0 = безлимитно)</label>
                        <input type="number" class="form-control bg-dark text-light" id="editActivationLimit" min="0">
                    </div>
                    <div class="mb-3">
                        <label for="editPercentage" class="form-label">Процент скидки</label>
                        <input type="number" class="form-control bg-dark text-light" id="editPercentage" min="1" max="100">
                    </div>
                    <div class="mb-3 form-check form-switch">
                        <input class="form-check-input" type="checkbox" id="editIsEnable">
                        <label class="form-check-label" for="editIsEnable">Активен</label>
                    </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" onclick="updatePromo()">Сохранить</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
function generatePromoCode() {
    const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
    let code = '';
    for (let i = 0; i < 8; i++) {
        code += chars.charAt(Math.floor(Math.random() * chars.length));
    }
    document.getElementById('promocode').value = code;
}

// Генерируем код при открытии модального окна
document.getElementById('addPromoModal').addEventListener('show.bs.modal', function () {
    generatePromoCode();
});

function savePromo() {
    const formData = {
        promocode: document.getElementById('promocode').value,
        activation_limit: parseInt(document.getElementById('activationLimit').value),
        percentage: parseInt(document.getElementById('percentage').value),
        is_enable: document.getElementById('isEnable').checked
    };

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

function editPromo(id) {
    fetch(`/api/promocode/get/${id}`)
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                const promo = data.promocode;
                document.getElementById('editPromoId').value = promo.id;
                document.getElementById('editPromocode').value = promo.promocode;
                document.getElementById('editActivationLimit').value = promo.activation_limit;
                document.getElementById('editPercentage').value = promo.percentage;
                document.getElementById('editIsEnable').checked = promo.is_enable;
                
                new bootstrap.Modal(document.getElementById('editPromoModal')).show();
            }
        });
}

function updatePromo() {
    const id = document.getElementById('editPromoId').value;
    const formData = {
        activation_limit: parseInt(document.getElementById('editActivationLimit').value),
        percentage: parseInt(document.getElementById('editPercentage').value),
        is_enable: document.getElementById('editIsEnable').checked
    };

    fetch(`/api/promocode/update/${id}`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify(formData)
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            location.reload();
        } else {
            alert('Ошибка при обновлении промокода');
        }
    });
}

function deletePromo(id) {
    if (confirm('Вы уверены, что хотите удалить этот промокод?')) {
        fetch(`/api/promocode/delete/${id}`, {
            method: 'DELETE'
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                location.reload();
            }
        });
    }
}
</script>
{% endblock %}