{% 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="#addMotivationModal" 
                        type="button" 
                        style="cursor: pointer; color: white;">
                    </i> <!-- Белый цвет иконки -->
                </h2>
                <h2 class="ms-1">
                    <a href="/help#loyalty" 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="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 class="text-center">Действия</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for program in programs %}
                        <tr>
                            <td>{{ loop.index }}</td>
                            <td>{{ program.name }}</td>
                            <td>{{ program.description }}</td>
                            <td>{{ program.required_amount }}₽</td>
                            <td>{{ program.discount_percent }}%</td>
                            <td>
                                {% if program.is_active %}
                                <span class="badge bg-success">Активна</span>
                                {% else %}
                                <span class="badge bg-danger">Неактивна</span>
                                {% endif %}
                            </td>
                            <td class="text-center">
                                <button class="btn btn-sm btn-outline-secondary edit-product" onclick="editProgram({{ program.id }})">
                                    <i class="fas fa-edit"></i>
                                </button>
                                <button class="btn btn-sm btn-outline-secondary delete-product" onclick="deleteProgram({{ program.id }})">
                                    <i class="fas fa-trash"></i>
                                </button>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- Модальное окно добавления программы -->
<div class="modal fade" id="addMotivationModal" tabindex="-1" aria-labelledby="addMotivationModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content bg-dark text-light">
            <div class="modal-header border-secondary">
                <h5 class="modal-title" id="addMotivationModalLabel">Добавить программу вовлечения</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="motivationForm">
                    <div class="mb-3">
                        <label for="programName" class="form-label">Наименование</label>
                        <input type="text" class="form-control bg-dark text-light border-secondary" id="programName" name="name" required>
                    </div>
                    <div class="mb-3">
                        <label for="programDescription" class="form-label">Описание</label>
                        <textarea class="form-control bg-dark text-light border-secondary" id="programDescription" name="description" rows="3"></textarea>
                    </div>
                    <div class="mb-3">
                        <label for="requiredAmount" class="form-label">Потраченные средства</label>
                        <input type="number" class="form-control bg-dark text-light border-secondary" id="requiredAmount" name="required_amount" min="1" required>
                    </div>
                    <div class="mb-3">
                        <label for="discountPercent" class="form-label">Процент скидки</label>
                        <input type="number" class="form-control bg-dark text-light border-secondary" id="discountPercent" name="discount_percent" min="1" max="100" required>
                    </div>
                </form>
            </div>
            <div class="modal-footer border-secondary">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Отмена</button>
                <button type="button" class="btn btn-primary" onclick="saveMotivationProgram()">Сохранить</button>
            </div>
        </div>
    </div>
</div>

<!-- Добавляем модальное окно для редактирования -->
<div class="modal fade" id="editMotivationModal" 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="editProgramForm">
                    <input type="hidden" id="editProgramId">
                    <div class="mb-3">
                        <label for="editName" class="form-label">Наименование</label>
                        <input type="text" class="form-control bg-dark text-light" id="editName" required>
                    </div>
                    <div class="mb-3">
                        <label for="editDescription" class="form-label">Описание</label>
                        <textarea class="form-control bg-dark text-light" id="editDescription" rows="3"></textarea>
                    </div>
                    <div class="mb-3">
                        <label for="editRequiredAmount" class="form-label">Потраченные средства</label>
                        <input type="number" class="form-control bg-dark text-light" id="editRequiredAmount" required>
                    </div>
                    <div class="mb-3">
                        <label for="editDiscountPercent" class="form-label">Процент скидки</label>
                        <input type="number" class="form-control bg-dark text-light" id="editDiscountPercent" required>
                    </div>
                    <div class="mb-3 form-check form-switch">
                        <input class="form-check-input" type="checkbox" id="editIsActive">
                        <label class="form-check-label" for="editIsActive">Программа активна</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="updateProgram()">Сохранить</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
function saveMotivationProgram() {
    const formData = {
        name: document.getElementById('programName').value,
        description: document.getElementById('programDescription').value,
        required_amount: document.getElementById('requiredAmount').value,
        discount_percent: document.getElementById('discountPercent').value
    };

    fetch('/api/motivation/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('Ошибка при сохранении программы');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('Произошла ошибка при сохранении');
    });
}

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

function editProgram(id) {
    // Получаем данные программы
    fetch(`/api/motivation/get/${id}`)
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                const program = data.program;
                // Заполняем форму данными
                document.getElementById('editProgramId').value = program.id;
                document.getElementById('editName').value = program.name;
                document.getElementById('editDescription').value = program.description;
                document.getElementById('editRequiredAmount').value = program.required_amount;
                document.getElementById('editDiscountPercent').value = program.discount_percent;
                document.getElementById('editIsActive').checked = program.is_active;
                
                // Открываем модальное окно
                new bootstrap.Modal(document.getElementById('editMotivationModal')).show();
            } else {
                alert('Ошибка при получении данных программы');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('Произошла ошибка при получении данных');
        });
}

function updateProgram() {
    const id = document.getElementById('editProgramId').value;
    const formData = {
        name: document.getElementById('editName').value,
        description: document.getElementById('editDescription').value,
        required_amount: document.getElementById('editRequiredAmount').value,
        discount_percent: document.getElementById('editDiscountPercent').value,
        is_active: document.getElementById('editIsActive').checked
    };

    fetch(`/api/motivation/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('Ошибка при сохранении программы');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('Произошла ошибка при сохранении');
    });
}
</script>
{% endblock %}