{% 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="#addCategoryModal" 
                    type="button" 
                    style="cursor: pointer; color: white;">
                </i> <!-- Белый цвет иконки -->
            </h2>

        </div>
    </div>
    
    <div class="row">
        <div class="col-12">
            <div class=""> <!-- card -->
                <div class=""> <!-- card-body-->
                    <div class="table-responsive">
                        <table class="table table-dark table-striped table-bordered table-hover rounded-table">
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>Наименование</th>
                                    <th>Описание</th>
                                    <th>Дата создания</th>
                                    <th>Действия</th>
                                </tr>
                            </thead>
                            <tbody id="categoriesTableBody">
                                {% for category in categories %}
                                <tr data-category-id="{{ category.id }}">
                                    <td>{{ category.id }}</td>
                                    <td>{{ category.name }}</td>
                                    <td>{{ category.description }}</td>
                                    <td>{{ category.created_at.strftime('%Y-%m-%d %H:%M:%S') }}</td>
                                    <td class="text-center">
                                        <button class="btn btn-sm btn-outline-secondary edit-category" data-bs-toggle="modal" data-bs-target="#editCategoryModal" 
                                                data-category-id="{{ category.id }}" 
                                                data-category-name="{{ category.name }}" 
                                                data-category-description="{{ category.description }}">
                                                <i class="fas fa-edit"></i> 
                                        </button>
                                        <button class="btn btn-sm btn-outline-secondary delete-category" data-category-id="{{ category.id }}">
                                            <i class="fas fa-trash"></i> 
                                        </button>
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

<!-- Модальное окно добавления категории -->
<div class="modal fade" id="addCategoryModal" tabindex="-1" aria-labelledby="addCategoryModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content bg-dark">
            <div class="modal-header">
                <h5 class="modal-title" id="addCategoryModalLabel">Добавить новую категорию товара</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="addCategoryForm">
                    <div class="mb-3">
                        <label for="categoryName" class="form-label">Наименование</label>
                        <input type="text" class="form-control" id="categoryName" name="name" required>
                    </div>
                    <div class="mb-3">
                        <label for="categoryDescription" class="form-label">Описание</label>
                        <textarea class="form-control" id="categoryDescription" name="description" rows="3"></textarea>
                    </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="saveCategoryBtn">Сохранить</button>
            </div>
        </div>
    </div>
</div>

<!-- Модальное окно редактирования категории -->
<div class="modal fade" id="editCategoryModal" tabindex="-1" aria-labelledby="editCategoryModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content bg-dark">
            <div class="modal-header">
                <h5 class="modal-title" id="editCategoryModalLabel">Редактировать категорию</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="editCategoryForm">
                    <input type="hidden" id="editCategoryId">
                    <div class="mb-3">
                        <label for="editCategoryName" class="form-label">Наименование</label>
                        <input type="text" class="form-control" id="editCategoryName" name="name" required>
                    </div>
                    <div class="mb-3">
                        <label for="editCategoryDescription" class="form-label">Описание</label>
                        <textarea class="form-control" id="editCategoryDescription" name="description" rows="3"></textarea>
                    </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="updateCategoryBtn">Сохранить</button>
            </div>
        </div>
    </div>
</div>

<!-- Добавляем Font Awesome для иконок -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet">

<!-- Добавляем JavaScript для обработки формы -->
<script>
document.addEventListener('DOMContentLoaded', function() {
    const saveCategoryBtn = document.getElementById('saveCategoryBtn');
    const addCategoryForm = document.getElementById('addCategoryForm');
    const categoriesTableBody = document.getElementById('categoriesTableBody');
    const addModal = new bootstrap.Modal(document.getElementById('addCategoryModal'));
    const editModal = new bootstrap.Modal(document.getElementById('editCategoryModal'));

    // Функция для создания строки таблицы
    function createTableRow(category) {
        return `
            <tr data-category-id="${category.id}">
                <td>${category.id}</td>
                <td>${category.name}</td>
                <td>${category.description || ''}</td>
                <td>${category.created_at}</td>
                <td class="text-center">
                    <button class="btn btn-sm btn-outline-secondary edit-category" data-bs-toggle="modal" data-bs-target="#editCategoryModal" 
                            data-category-id="${category.id}" 
                            data-category-name="${category.name}" 
                            data-category-description="${category.description || ''}">
                        <i class="fas fa-edit"></i> 
                    </button>
                    <button class="btn btn-sm btn-outline-secondary edit-category" data-category-id="${category.id}">
                        <i class="fas fa-trash"></i> 
                    </button>
                </td>
            </tr>
        `;
    }

    // Добавление категории
    saveCategoryBtn.addEventListener('click', function() {
        const formData = new FormData(addCategoryForm);
        
        fetch('/categories/add', {
            method: 'POST',
            body: formData
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                const newRow = createTableRow(data.category);
                categoriesTableBody.insertAdjacentHTML('afterbegin', newRow);
                addCategoryForm.reset();
                addModal.hide();
                attachEventListeners();
            } else {
                alert('Ошибка при добавлении категории');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('Ошибка при добавлении категории');
        });
    });

    // Редактирование категории
    document.getElementById('editCategoryModal').addEventListener('show.bs.modal', function (event) {
        const button = event.relatedTarget;
        const categoryId = button.getAttribute('data-category-id');
        const categoryName = button.getAttribute('data-category-name');
        const categoryDescription = button.getAttribute('data-category-description');

        document.getElementById('editCategoryId').value = categoryId;
        document.getElementById('editCategoryName').value = categoryName;
        document.getElementById('editCategoryDescription').value = categoryDescription;
    });

    document.getElementById('updateCategoryBtn').addEventListener('click', function() {
        const categoryId = document.getElementById('editCategoryId').value;
        const data = {
            name: document.getElementById('editCategoryName').value,
            description: document.getElementById('editCategoryDescription').value
        };

        fetch(`/categories/${categoryId}`, {
            method: 'PUT',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify(data)
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                const row = document.querySelector(`tr[data-category-id="${categoryId}"]`);
                row.outerHTML = createTableRow(data.category);
                editModal.hide();
                attachEventListeners();
            } else {
                alert('Ошибка при обновлении категории');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('Ошибка при обновлении категории');
        });
    });

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

    // Инициализация обработчиков событий
    attachEventListeners();
});
</script>
{% endblock %}