{% 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>
            <h2>
                <i 
                    class="fa-solid fa-plus" 
                    data-bs-toggle="modal" 
                    data-bs-target="#addProductModal" 
                    type="button" 
                    style="cursor: pointer; color: white;">
                </i> <!-- Белый цвет иконки -->
            </h2>

        </div>
    </div>

    {% for category, products in products_by_category.items() %}
    <div class="row mb-4">
        <div class="col-12">
            <div class="card bg-dark">
                <div class="card-header">
                    <h3 class="mb-0"><span class="text-light">Категория: {{ category.name }}</h3></span> 
                </div>
                <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>Наименование</th>
                                    <th>Описание</th>
                                    <th>Цена</th>
                                    <th>Кол-во</th>
                                    <th>Статус</th>
                                    <th>Тип</th>
                                    <th>Действия</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for product in products %}
                                <tr data-product-id="{{ product.id }}">
                                    <td>
                                        {% if product.image_path %}
                                        <img src="{{ url_for('static', filename=product.image_path) }}" 
                                             alt="{{ product.name }}" class="img-thumbnail" style="max-width: 50px;">
                                        {% else %}
                                        <img src="{{ url_for('static', filename='templates/no_image.jpg') }}">
                                        {% endif %}
                                    </td>
                                    <td>{{ product.name }}</td>
                                    <td>{{ product.description }}</td>
                                    <td>{{ "%.2f"|format(product.price) }} ₽</td>
                                    <td>{{ product.quantity }}</td>
                                    <td>
                                        {% if product.is_available %}
                                        <span class="badge bg-success">Доступен</span>
                                        {% else %}
                                        <span class="badge bg-danger">Недоступен</span>
                                        {% endif %}
                                    </td>
                                    <td>
                                        {% if product.is_digital %}
                                        <span class="badge bg-info">Цифровой</span>
                                        {% else %}
                                        <span class="badge bg-secondary">Физический</span>
                                        {% endif %}
                                    </td>
                                    <td class="text-center">
                                        <button class="btn btn-sm btn-outline-secondary edit-product" 
                                                data-bs-toggle="modal" 
                                                data-bs-target="#editProductModal"
                                                data-product-id="{{ product.id }}"
                                                data-product-name="{{ product.name }}"
                                                data-product-category="{{ product.category_id }}"
                                                data-product-description="{{ product.description }}"
                                                data-product-price="{{ product.price }}"
                                                data-product-quantity="{{ product.quantity }}"
                                                data-product-is-available="{{ product.is_available|lower }}"
                                                data-product-is-digital="{{ product.is_digital|lower }}"
                                                data-product-digital-data="{{ product.digital_data or '' }}">
                                            <i class="fas fa-edit"></i>
                                        </button>
                                        <button class="btn btn-sm btn-outline-secondary delete-product" data-product-id="{{ product.id }}">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {% endfor %}
</div>

<!-- Модальное окно добавления товара -->
<div class="modal fade" id="addProductModal" tabindex="-1" aria-labelledby="addProductModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content bg-dark">
            <div class="modal-header">
                <h5 class="modal-title" id="addProductModalLabel">Добавить новый товар</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="addProductForm" enctype="multipart/form-data">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="productName" class="form-label">Наименование</label>
                                <input type="text" class="form-control" id="productName" name="name" required>
                            </div>
                            <div class="mb-3">
                                <label for="productCategory" class="form-label">Категория</label>
                                <select class="form-select" id="productCategory" name="category_id" required>
                                    {% for category in all_categories %}
                                    <option value="{{ category.id }}">{{ category.name }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                            <div class="mb-3">
                                <label for="productDescription" class="form-label">Описание</label>
                                <textarea class="form-control" id="productDescription" name="description" rows="3"></textarea>
                            </div>
                            <div class="mb-3">
                                <label for="productPrice" class="form-label">Цена</label>
                                <input type="number" class="form-control" id="productPrice" name="price" step="0.01" required>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="productQuantity" class="form-label">Количество</label>
                                <input type="number" class="form-control" id="productQuantity" name="quantity" required>
                            </div>
                            <div class="mb-3">
                                <label for="productImage" class="form-label">Изображение</label>
                                <input type="file" class="form-control" id="productImage" name="image" accept="image/*">
                            </div>
                            <div class="mb-3">
                                <div class="form-check">
                                    <input type="checkbox" class="form-check-input" id="productAvailable" name="is_available" checked>
                                    <label class="form-check-label" for="productAvailable">Доступен для продажи</label>
                                </div>
                            </div>
                            <div class="mb-3">
                                <div class="form-check">
                                    <input type="checkbox" class="form-check-input" id="productDigital" name="is_digital">
                                    <label class="form-check-label" for="productDigital">Цифровой товар</label>
                                </div>
                            </div>
                            <div class="mb-3 digital-data-group" style="display: none;">
                                <label for="productDigitalData" class="form-label">Данные цифрового товара</label>
                                <textarea class="form-control" id="productDigitalData" name="digital_data" rows="3"></textarea>
                            </div>
                        </div>
                    </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="saveProductBtn">Сохранить</button>
            </div>
        </div>
    </div>
</div>

<!-- Модальное окно редактирования товара -->
<div class="modal fade" id="editProductModal" tabindex="-1" aria-labelledby="editProductModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content bg-dark">
            <div class="modal-header">
                <h5 class="modal-title" id="editProductModalLabel">Редактировать товар</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="editProductForm" enctype="multipart/form-data">
                    <input type="hidden" id="editProductId">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="editProductName" class="form-label">Наименование</label>
                                <input type="text" class="form-control" id="editProductName" name="name" required>
                            </div>
                            <div class="mb-3">
                                <label for="editProductCategory" class="form-label">Категория</label>
                                <select class="form-select" id="editProductCategory" name="category_id" required>
                                    {% for category in all_categories %}
                                    <option value="{{ category.id }}">{{ category.name }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                            <div class="mb-3">
                                <label for="editProductDescription" class="form-label">Описание</label>
                                <textarea class="form-control" id="editProductDescription" name="description" rows="3"></textarea>
                            </div>
                            <div class="mb-3">
                                <label for="editProductPrice" class="form-label">Цена</label>
                                <input type="number" class="form-control" id="editProductPrice" name="price" step="0.01" required>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="editProductQuantity" class="form-label">Количество</label>
                                <input type="number" class="form-control" id="editProductQuantity" name="quantity" required>
                            </div>
                            <div class="mb-3">
                                <label for="editProductImage" class="form-label">Изображение</label>
                                <input type="file" class="form-control" id="editProductImage" name="image" accept="image/*">
                            </div>
                            <div class="mb-3">
                                <div class="form-check">
                                    <input type="checkbox" class="form-check-input" id="editProductAvailable" name="is_available">
                                    <label class="form-check-label" for="editProductAvailable">Доступен для продажи</label>
                                </div>
                            </div>
                            <div class="mb-3">
                                <div class="form-check">
                                    <input type="checkbox" class="form-check-input" id="editProductDigital" name="is_digital">
                                    <label class="form-check-label" for="editProductDigital">Цифровой товар</label>
                                </div>
                            </div>
                            <div class="mb-3 digital-data-group" style="display: none;">
                                <label for="editProductDigitalData" class="form-label">Данные цифрового товара</label>
                                <textarea class="form-control" id="editProductDigitalData" name="digital_data" rows="3"></textarea>
                            </div>
                        </div>
                    </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="updateProductBtn">Сохранить</button>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const addModal = new bootstrap.Modal(document.getElementById('addProductModal'));
    const editModal = new bootstrap.Modal(document.getElementById('editProductModal'));

    // Функция для обработки чекбокса цифрового товара
    function handleDigitalCheckbox(checkboxId, dataGroupClass) {
        const checkbox = document.getElementById(checkboxId);
        const digitalDataGroup = checkbox.closest('.modal-content').querySelector(dataGroupClass);
        
        checkbox.addEventListener('change', function() {
            digitalDataGroup.style.display = this.checked ? 'block' : 'none';
        });
    }

    // Инициализация обработчиков для обоих модальных окон
    handleDigitalCheckbox('productDigital', '.digital-data-group');
    handleDigitalCheckbox('editProductDigital', '.digital-data-group');

    // Добавление товара
    document.getElementById('saveProductBtn').addEventListener('click', function() {
        const form = document.getElementById('addProductForm');
        const formData = new FormData(form);
        
        // Правильная обработка чекбоксов
        formData.set('is_available', document.getElementById('productAvailable').checked);
        formData.set('is_digital', document.getElementById('productDigital').checked);

        fetch('/products/add', {
            method: 'POST',
            body: formData
        })
        .then(response => response.json())
        .then(data => {
            if (data.message) {
                location.reload(); // Перезагружаем страницу для обновления списка
            } else if (data.error) {
                alert('Ошибка: ' + data.error);
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('Ошибка при добавлении товара');
        });
    });

    // Редактирование товара
    document.getElementById('editProductModal').addEventListener('show.bs.modal', function(event) {
        const button = event.relatedTarget;
        const productId = button.getAttribute('data-product-id');
        
        document.getElementById('editProductId').value = productId;
        document.getElementById('editProductName').value = button.getAttribute('data-product-name');
        document.getElementById('editProductCategory').value = button.getAttribute('data-product-category');
        document.getElementById('editProductDescription').value = button.getAttribute('data-product-description');
        document.getElementById('editProductPrice').value = button.getAttribute('data-product-price');
        document.getElementById('editProductQuantity').value = button.getAttribute('data-product-quantity');
        document.getElementById('editProductAvailable').checked = button.getAttribute('data-product-is-available') === 'true';
        document.getElementById('editProductDigital').checked = button.getAttribute('data-product-is-digital') === 'true';
        document.getElementById('editProductDigitalData').value = button.getAttribute('data-product-digital-data');
        
        // Показываем/скрываем поле для цифровых данных
        const digitalDataGroup = this.querySelector('.digital-data-group');
        digitalDataGroup.style.display = button.getAttribute('data-product-is-digital') === 'true' ? 'block' : 'none';
    });

    // Обновление товара
    document.getElementById('updateProductBtn').addEventListener('click', function() {
        const form = document.getElementById('editProductForm');
        const formData = new FormData(form);
        const productId = document.getElementById('editProductId').value;
        
        // Правильная обработка чекбоксов
        formData.set('is_available', document.getElementById('editProductAvailable').checked);
        formData.set('is_digital', document.getElementById('editProductDigital').checked);

        fetch(`/products/${productId}`, {
            method: 'PUT',
            body: formData
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                location.reload(); // Перезагружаем страницу для обновления списка
            } else {
                alert('Ошибка при обновлении товара');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('Ошибка при обновлении товара');
        });
    });

    // Удаление товара
    document.querySelectorAll('.delete-product').forEach(button => {
        button.addEventListener('click', function() {
            if (confirm('Вы уверены, что хотите удалить этот товар?')) {
                const productId = this.getAttribute('data-product-id');
                
                fetch(`/products/${productId}`, {
                    method: 'DELETE'
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        const row = document.querySelector(`tr[data-product-id="${productId}"]`);
                        row.remove();
                    } else {
                        alert('Ошибка при удалении товара');
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    alert('Ошибка при удалении товара');
                });
            }
        });
    });
});
</script>
{% endblock %}