{% extends 'base.html' %}

{% block page_title %}Išlaidų valdymas{% endblock %}

{% block content %}
<div class="card">
    <div class="card-header">
    <div class="d-flex flex-column flex-md-row justify-content-between align-items-start align-items-md-center gap-2">
        <h5 class="mb-0">Išlaidų sąrašas</h5>
        <div class="d-flex flex-wrap gap-2 w-100 w-md-auto">
            <button class="btn btn-outline-success flex-grow-1 flex-md-grow-0" id="addTagBtnGlobal">
                <i class="bi bi-tag"></i> <span class="d-none d-md-inline">Pridėti žymą</span>
            </button>
            <button class="btn btn-outline-info flex-grow-1 flex-md-grow-0" id="manageTagsBtn">
                <i class="bi bi-tags"></i> <span class="d-none d-md-inline">Valdyti žymas</span>
            </button>
            <button class="btn btn-outline-secondary flex-grow-1 flex-md-grow-0" id="toggleFilterBtn">
                <i class="bi bi-funnel"></i> <span class="d-none d-md-inline">Filtras</span>
            </button>
            <button class="btn btn-primary flex-grow-1 flex-md-grow-0" id="addExpenseBtn">
                <i class="bi bi-plus-circle me-md-2"></i> <span>Pridėti išlaidas</span>
            </button>
        </div>
    </div>
</div>

    <!-- Фильтры -->
    <div class="card-body bg-light" id="filterSection" style="display: none;">
        <form id="filterForm" class="row g-3">
            <div class="col-md-4">
                <label for="filterDescription" class="form-label">Aprašymas</label>
                <input type="text" class="form-control" id="filterDescription" name="search" placeholder="Ieškoti pagal aprašymą">
            </div>
            <div class="col-md-4">
                <label for="filterDate" class="form-label">Data</label>
                <input type="date" class="form-control" id="filterDate" name="date">
            </div>
            <div class="col-md-4">
                <label for="filterTags" class="form-label">Žymos</label>
                <select class="form-select" id="filterTags" name="tags" multiple>
                    {% for tag in tags %}
                        <option value="{{ tag.id }}" data-color="{{ tag.color }}">{{ tag.name }}</option>
                    {% endfor %}
                </select>
            </div>
            
            <div class="col-12 d-flex justify-content-end">
                <button type="button" class="btn btn-outline-danger me-2" id="resetFilterBtn">
                    <i class="bi bi-x-circle"></i> Išvalyti filtrus
                </button>
                <button type="submit" class="btn btn-primary">
                    <i class="bi bi-funnel"></i> Filtruoti
                </button>
            </div>
        </form>
    </div>

    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-hover" id="expensesTable">
                <thead>
                    <tr>
                        <th>Data</th>
                        <th>Aprašymas</th>
                        <th>Suma</th>
                        <th>Žymos</th>
                        <th>Prisegtukai</th>
                        <th>Veiksmai</th>
                    </tr>
                </thead>
                <tbody>
                    {% for expense in expenses %}
                    <tr>
                        <td>{{ expense.date|date:"Y-m-d" }}</td>
                        <td>{{ expense.description }}</td>
                        <td>€{{ expense.amount|floatformat:2 }}</td>
                        <td>
                            {% for tag in expense.tags.all %}
                                <span class="badge rounded-pill me-1" style="background-color: {{ tag.color }}">{{ tag.name }}</span>
                            {% endfor %}
                        </td>
                        <td>
                            {% for file in expense.files.all %}
                                <div class="d-flex align-items-center mb-1">
                                    <i class="bi bi-file-earmark me-2"></i>
                                    <small>{{ file.filename }}</small>
                                    <div class="ms-auto">
                                        <button class="btn btn-sm btn-link p-0 text-primary view-file-btn" 
                                            data-id="{{ file.id }}" data-expense="{{ expense.id }}" data-name="{{ file.filename }}">
                                            <i class="bi bi-download"></i>
                                        </button>
                                        <button class="btn btn-sm btn-link p-0 text-danger delete-file-btn" 
                                            data-id="{{ file.id }}" data-expense="{{ expense.id }}">
                                        </button>
                                    </div>
                                </div>
                            {% empty %}
                                Nėra prisegtukų
                            {% endfor %}
                        </td>
                        <td>
                            <div class="d-flex gap-2">
                                <button class="btn btn-sm btn-outline-primary edit-btn" 
                                    data-id="{{ expense.id }}">
                                    <i class="bi bi-pencil"></i>
                                </button>
                                <button class="btn btn-sm btn-outline-danger delete-btn" 
                                    data-id="{{ expense.id }}" data-description="{{ expense.description }}">
                                    <i class="bi bi-trash"></i>
                                </button>
                            </div>
                        </td>
                    </tr>
                    {% empty %}
                    <tr>
                        <td colspan="6" class="text-center py-4">
                            <div class="text-muted">
                                <i class="bi bi-receipt display-6"></i>
                                <h5 class="mt-3">Išlaidų nerasta</h5>
                                <p>Pradėkite pridėdami savo pirmąsias išlaidas</p>
                            </div>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>

        <!-- Пагинация -->
        {% if expenses.has_other_pages %}
        <nav aria-label="Puslapiavimas" id="paginationContainer">
            <ul class="pagination justify-content-center">
                {% if expenses.has_previous %}
                    <li class="page-item">
                        <a class="page-link" href="?page=1" aria-label="Pirmas">
                            <span aria-hidden="true">&laquo;&laquo;</span>
                        </a>
                    </li>
                    <li class="page-item">
                        <a class="page-link" href="?page={{ expenses.previous_page_number }}" aria-label="Ankstesnis">
                            <span aria-hidden="true">&laquo;</span>
                        </a>
                    </li>
                {% else %}
                    <li class="page-item disabled">
                        <span class="page-link">&laquo;&laquo;</span>
                    </li>
                    <li class="page-item disabled">
                        <span class="page-link">&laquo;</span>
                    </li>
                {% endif %}
                
                {% for num in expenses.paginator.page_range %}
                    {% if expenses.number == num %}
                        <li class="page-item active">
                            <span class="page-link">{{ num }}</span>
                        </li>
                    {% elif num > expenses.number|add:'-3' and num < expenses.number|add:'3' %}
                        <li class="page-item">
                            <a class="page-link" href="?page={{ num }}">{{ num }}</a>
                        </li>
                    {% endif %}
                {% endfor %}
                
                {% if expenses.has_next %}
                    <li class="page-item">
                        <a class="page-link" href="?page={{ expenses.next_page_number }}" aria-label="Kitas">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>
                    <li class="page-item">
                        <a class="page-link" href="?page={{ expenses.paginator.num_pages }}" aria-label="Paskutinis">
                            <span aria-hidden="true">&raquo;&raquo;</span>
                        </a>
                    </li>
                {% else %}
                    <li class="page-item disabled">
                        <span class="page-link">&raquo;</span>
                    </li>
                    <li class="page-item disabled">
                        <span class="page-link">&raquo;&raquo;</span>
                    </li>
                {% endif %}
            </ul>
        </nav>
        {% endif %}
    </div>
</div>

<!-- Модальное окно для создания тегов -->
<div class="modal fade" id="tagModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Pridėti naują žymą</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Uždaryti"></button>
            </div>
            <form id="tagForm">
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="tagName" class="form-label">Pavadinimas *</label>
                        <input type="text" class="form-control" id="tagName" required>
                    </div>
                    <div class="mb-3">
                        <label for="tagColor" class="form-label">Spalva</label>
                        <input type="color" class="form-control form-control-color" id="tagColor" value="#0d6efd" title="Pasirinkite spalvą">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Atšaukti</button>
                    <button type="submit" class="btn btn-primary">Išsaugoti žymą</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Модальное окно для управления тегами (исправленная версия) -->
<div class="modal fade" id="manageTagsModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Žymų valdymas</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Uždaryti"></button>
            </div>
            <div class="modal-body">
                <ul class="list-group" id="tagsList">
                    {% for tag in tags %}
                    <li class="list-group-item d-flex justify-content-between align-items-center" data-id="{{ tag.id }}">
                        <div class="d-flex align-items-center flex-grow-1" style="min-width: 0;">
                            <span class="badge rounded-pill me-2" style="background-color: {{ tag.color }}; width: 20px; height: 20px;"></span>
                            <span class="text-truncate" style="max-width: 200px;" title="{{ tag.name }}">
                                {{ tag.name }}
                            </span>
                        </div>
                        <button class="btn btn-sm btn-outline-danger delete-tag-btn">
                            <i class="bi bi-trash"></i>
                        </button>
                    </li>
                    {% empty %}
                    <li class="list-group-item text-center text-muted">
                        Nėra sukurtų žymų
                    </li>
                    {% endfor %}
                </ul>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Uždaryti</button>
            </div>
        </div>
    </div>
</div>

<!-- Модальное окно для добавления/редактирования расходов -->
<div class="modal fade" id="expenseModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalTitle">Pridėti naujas išlaidas</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Uždaryti"></button>
            </div>
            <form id="expenseForm" method="post" enctype="multipart/form-data">
                {% csrf_token %}
                <div class="modal-body">
                    <input type="hidden" id="expenseId" name="expense_id">
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <label for="expenseDate" class="form-label">Data *</label>
                            <input type="date" class="form-control" id="expenseDate" name="date" required>
                        </div>
                        <div class="col-md-6">
                            <label for="amount" class="form-label">Suma *</label>
                            <div class="input-group">
                                <span class="input-group-text">€</span>
                                <input type="number" class="form-control" id="amount" name="amount"
                                       min="0.01" step="0.01" required>
                            </div>
                        </div>
                    </div>
                    <div class="mb-3">
                        <label for="description" class="form-label">Aprašymas</label>
                        <textarea class="form-control" id="description" name="description" rows="2"></textarea>
                    </div>
                    
                    <!-- Секция тегов -->
                    <div class="mb-3">
                        <label class="form-label">Žymos</label>
                        <div class="d-flex flex-wrap gap-2 mb-2" id="selectedTagsContainer">
                            <!-- Выбранные теги будут здесь -->
                        </div>
                        
                        <!-- Поиск тегов -->
                        <div class="input-group mb-2">
                            <input type="text" class="form-control" id="tagSearch" placeholder="Ieškoti žymų">
                            <button class="btn btn-outline-primary" type="button" id="searchTagBtn">
                                <i class="bi bi-search"></i> Ieškoti
                            </button>
                        </div>
                        
                        <div class="input-group">
                            <select class="form-select" id="tagsSelect">
                                <option value="">Pasirinkite žymą...</option>
                                {% for tag in tags %}
                                    <option value="{{ tag.id }}" data-color="{{ tag.color }}">{{ tag.name }}</option>
                                {% endfor %}
                            </select>
                            <button class="btn btn-outline-secondary" type="button" id="addTagBtn">
                                <i class="bi bi-plus"></i> Pridėti
                            </button>
                        </div>
                    </div>
                    
                    <!-- Загрузка файлов -->
                    <div class="mb-3">
                        <label class="form-label">Prisegtukai (PDF, vaizdai)</label>
                        <input type="file" class="form-control" id="fileInput" name="uploaded_files" multiple accept=".pdf,.jpg,.jpeg,.png">
                        <div class="form-text">Maksimalus failo dydis: 5MB</div>
                        
                        <div class="mt-3" id="uploadedFiles">
                            <!-- Загруженные файлы будут здесь -->
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Atšaukti</button>
                    <button type="submit" class="btn btn-primary">Išsaugoti išlaidas</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Модальное окно для просмотра файлов (исправленная версия) -->
<div class="modal fade" id="fileViewModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="fileModalTitle">Failo peržiūra</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Uždaryti"></button>
            </div>
            <div class="modal-body text-center" id="filePreview" style="min-height: 500px;">
                <!-- Превью файла будет здесь -->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Uždaryti</button>
                <a href="#" class="btn btn-primary" id="downloadFileBtn" download>
                    <i class="bi bi-download me-1"></i> Atsisiųsti
                </a>
            </div>
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const expenseModal = new bootstrap.Modal(document.getElementById('expenseModal'));
        const fileViewModal = new bootstrap.Modal(document.getElementById('fileViewModal'));
        const tagModal = new bootstrap.Modal(document.getElementById('tagModal'));
        const manageTagsModal = new bootstrap.Modal(document.getElementById('manageTagsModal'));
        const csrfToken = document.querySelector('[name=csrfmiddlewaretoken]').value;
        
        // Функция для закрытия всех модальных окон
        function closeAllModals() {
            expenseModal.hide();
            fileViewModal.hide();
            tagModal.hide();
            manageTagsModal.hide();
        }
        
        // Переключение видимости фильтров
        document.getElementById('toggleFilterBtn').addEventListener('click', function() {
            const filterSection = document.getElementById('filterSection');
            if (filterSection.style.display === 'none') {
                filterSection.style.display = 'block';
                this.innerHTML = '<i class="bi bi-funnel-fill"></i> Paslėpti filtrą';
            } else {
                filterSection.style.display = 'none';
                this.innerHTML = '<i class="bi bi-funnel"></i> Filtras';
            }
        });
        
        // Добавление расхода
        document.getElementById('addExpenseBtn').addEventListener('click', function() {
            closeAllModals();
            document.getElementById('modalTitle').textContent = 'Pridėti naujas išlaidas';
            document.getElementById('expenseForm').reset();
            document.getElementById('expenseId').value = '';
            document.getElementById('selectedTagsContainer').innerHTML = '';
            document.getElementById('uploadedFiles').innerHTML = '';
            document.getElementById('expenseDate').valueAsDate = new Date();
            expenseModal.show();
        });
        
        // Открытие модального окна создания тега
        document.getElementById('addTagBtnGlobal').addEventListener('click', function() {
            closeAllModals();
            document.getElementById('tagForm').reset();
            document.getElementById('tagColor').value = '#0d6efd';
            tagModal.show();
        });

        // Открытие модального окна управления тегами
        document.getElementById('manageTagsBtn').addEventListener('click', function() {
            closeAllModals();
            manageTagsModal.show();
        });
        
        // Обработка создания тега
        document.getElementById('tagForm').addEventListener('submit', function(e) {
            e.preventDefault();
            
            const name = document.getElementById('tagName').value;
            const color = document.getElementById('tagColor').value;
            
            fetch('/expenses/api/tags/', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRFToken': csrfToken
                },
                body: JSON.stringify({ name, color })
            })
            .then(response => {
                if (response.ok) {
                    return response.json();
                } else {
                    return response.json().then(err => { throw new Error(JSON.stringify(err)); });
                }
            })
            .then(newTag => {
                // Закрываем модальное окно
                tagModal.hide();
                
                // Обновляем выпадающие списки
                updateTagSelects(newTag);
                
                // Добавляем тег в список управления
                addTagToManagementList(newTag);
                
                // Показываем сообщение об успехе
                showAlert('Žyma sėkmingai pridėta!', 'success');
            })
            .catch(error => {
                console.error('Klaida:', error);
                alert('Klaida išsaugant žymą: ' + error.message);
            });
        });
        
        // Обновление выпадающих списков тегов
        function updateTagSelects(newTag) {
            // Обновляем список в фильтрах
            const filterTags = document.getElementById('filterTags');
            const newOptionFilter = document.createElement('option');
            newOptionFilter.value = newTag.id;
            newOptionFilter.textContent = newTag.name;
            newOptionFilter.dataset.color = newTag.color;
            filterTags.appendChild(newOptionFilter);
            
            // Обновляем список в форме расходов
            const tagsSelect = document.getElementById('tagsSelect');
            const newOptionForm = document.createElement('option');
            newOptionForm.value = newTag.id;
            newOptionForm.textContent = newTag.name;
            newOptionForm.dataset.color = newTag.color;
            tagsSelect.appendChild(newOptionForm);
        }

        // Добавление тега в список управления
        function addTagToManagementList(tag) {
            const tagsList = document.getElementById('tagsList');
            
            // Если список пустой, удаляем placeholder
            if (tagsList.querySelector('.text-muted')) {
                tagsList.innerHTML = '';
            }
            
            const listItem = document.createElement('li');
            listItem.className = 'list-group-item d-flex justify-content-between align-items-center';
            listItem.dataset.id = tag.id;
            listItem.innerHTML = `
                <div class="d-flex align-items-center flex-grow-1" style="min-width: 0;">
                    <span class="badge rounded-pill me-2" style="background-color: ${tag.color}; width: 20px; height: 20px;"></span>
                    <span class="text-truncate" style="max-width: 200px;" title="${tag.name}">
                        ${tag.name}
                    </span>
                </div>
                <button class="btn btn-sm btn-outline-danger delete-tag-btn">
                    <i class="bi bi-trash"></i>
                </button>
            `;
            
            tagsList.appendChild(listItem);
            
            // Добавляем обработчик удаления
            listItem.querySelector('.delete-tag-btn').addEventListener('click', function() {
                deleteTag(tag.id);
            });
        }
        
        // Удаление тега
        function deleteTag(tagId) {
            if (!confirm('Ar tikrai norite ištrinti šią žymą? Visi jos ryšiai su išlaidomis bus pašalinti.')) {
                return;
            }
            
            fetch(`/expenses/api/tags/${tagId}/`, {
                method: 'DELETE',
                headers: {
                    'X-CSRFToken': csrfToken
                }
            })
            .then(response => {
                if (response.ok) {
                    // Удаляем из списка управления
                    document.querySelector(`#tagsList li[data-id="${tagId}"]`).remove();
                    
                    // Удаляем из выпадающих списков
                    removeTagFromSelects(tagId);
                    
                    // Удаляем из выбранных в фильтре
                    removeTagFromSelected(tagId);
                    
                    showAlert('Žyma sėkmingai ištrinta!', 'success');
                    
                    // Если список стал пустым, добавляем placeholder
                    const tagsList = document.getElementById('tagsList');
                    if (tagsList.children.length === 0) {
                        const placeholder = document.createElement('li');
                        placeholder.className = 'list-group-item text-center text-muted';
                        placeholder.textContent = 'Nėra sukurtų žymų';
                        tagsList.appendChild(placeholder);
                    }
                } else {
                    throw new Error('Nepavyko ištrinti žymos');
                }
            })
            .catch(error => {
                console.error('Klaida:', error);
                alert('Klaida trinant žymą: ' + error.message);
            });
        }
        
        // Удаление тега из выпадающих списков
        function removeTagFromSelects(tagId) {
            // Удаляем из выпадающего списка фильтров
            const filterTags = document.getElementById('filterTags');
            const optionInFilter = filterTags.querySelector(`option[value="${tagId}"]`);
            if (optionInFilter) optionInFilter.remove();
            
            // Удаляем из выпадающего списка формы расходов
            const tagsSelect = document.getElementById('tagsSelect');
            const optionInForm = tagsSelect.querySelector(`option[value="${tagId}"]`);
            if (optionInForm) optionInForm.remove();
        }
        
        // Удаление тега из выбранных в фильтре
        function removeTagFromSelected(tagId) {
            const filterTags = document.getElementById('filterTags');
            const selectedOption = filterTags.querySelector(`option[value="${tagId}"]:checked`);
            if (selectedOption) {
                selectedOption.selected = false;
            }
        }
        
        // Обработчики удаления тегов в модальном окне управления
        document.getElementById('tagsList').addEventListener('click', function(e) {
            if (e.target.closest('.delete-tag-btn')) {
                const listItem = e.target.closest('li');
                const tagId = listItem.dataset.id;
                deleteTag(tagId);
            }
        });
        
        // Функция показа уведомлений
        function showAlert(message, type) {
            // Удаляем существующие уведомления
            const existingAlerts = document.querySelectorAll('.global-alert');
            existingAlerts.forEach(alert => alert.remove());
            
            const alertDiv = document.createElement('div');
            alertDiv.className = `global-alert alert alert-${type} alert-dismissible fade show`;
            alertDiv.role = 'alert';
            alertDiv.innerHTML = `
                ${message}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            `;
            
            document.querySelector('.card').insertBefore(alertDiv, document.querySelector('.card-header'));
            
            // Автоматическое закрытие через 3 секунды
            setTimeout(() => {
                const bsAlert = new bootstrap.Alert(alertDiv);
                bsAlert.close();
            }, 3000);
        }
        
        // Добавление тега к расходу
        document.getElementById('addTagBtn').addEventListener('click', function() {
            const tagSelect = document.getElementById('tagsSelect');
            const selectedOption = tagSelect.options[tagSelect.selectedIndex];
            
            if (!selectedOption.value) return;
            
            const tagId = selectedOption.value;
            const tagName = selectedOption.text;
            const tagColor = selectedOption.dataset.color;
            
            addTagToExpense(tagId, tagName, tagColor);
            tagSelect.value = '';
        });
        
        // Добавление тега в UI
        function addTagToExpense(tagId, tagName, tagColor) {
            const container = document.getElementById('selectedTagsContainer');
            
            // Проверка, не добавлен ли уже тег
            if (container.querySelector(`.tag-badge[data-id="${tagId}"]`)) return;
            
            const badge = document.createElement('span');
            badge.className = 'tag-badge badge rounded-pill d-flex align-items-center';
            badge.style.backgroundColor = tagColor;
            badge.dataset.id = tagId;
            badge.innerHTML = `
                ${tagName}
                <button type="button" class="btn-close btn-close-white ms-2" aria-label="Pašalinti"></button>
            `;
            
            container.appendChild(badge);
            
            // Добавление обработчика удаления
            badge.querySelector('button').addEventListener('click', function() {
                badge.remove();
            });
        }
        
        // Поиск тегов (исправленная логика)
        document.getElementById('searchTagBtn').addEventListener('click', function() {
            const searchTerm = document.getElementById('tagSearch').value.trim();
            const url = searchTerm ? 
                `/expenses/api/tags/?search=${encodeURIComponent(searchTerm)}` : 
                '/expenses/api/tags/';
            
            fetch(url, {
                headers: {
                    'X-CSRFToken': csrfToken
                }
            })
            .then(response => response.json())
            .then(tags => {
                const tagsSelect = document.getElementById('tagsSelect');
                tagsSelect.innerHTML = '<option value="">Pasirinkite žymą...</option>';
                
                tags.forEach(tag => {
                    const option = document.createElement('option');
                    option.value = tag.id;
                    option.textContent = tag.name;
                    option.dataset.color = tag.color;
                    tagsSelect.appendChild(option);
                });
            });
        });
        
        // Редактирование расхода
        document.querySelectorAll('.edit-btn').forEach(btn => {
            btn.addEventListener('click', function() {
                closeAllModals();
                const expenseId = this.dataset.id;
                fetch(`/expenses/api/expenses/${expenseId}/`, {
                    headers: {
                        'X-CSRFToken': csrfToken
                    }
                })
                .then(response => response.json())
                .then(expense => {
                    document.getElementById('modalTitle').textContent = `Redaguoti išlaidas`;
                    document.getElementById('expenseId').value = expense.id;
                    document.getElementById('expenseDate').value = expense.date;
                    document.getElementById('description').value = expense.description || '';
                    document.getElementById('amount').value = expense.amount;
                    
                    // Очистка и добавление тегов
                    const tagsContainer = document.getElementById('selectedTagsContainer');
                    tagsContainer.innerHTML = '';
                    expense.tags.forEach(tag => {
                        addTagToExpense(tag.id, tag.name, tag.color);
                    });
                    
                    // Отображение файлов
                    const filesContainer = document.getElementById('uploadedFiles');
                    filesContainer.innerHTML = expense.files.map(file => `
                        <div class="d-flex align-items-center border p-2 mb-2 rounded">
                            <i class="bi bi-file-earmark me-2"></i>
                            <div class="flex-grow-1">
                                <div>${file.filename}</div>
                                <small class="text-muted">${file.filesize}</small>
                            </div>
                            <div>
                                <button class="btn btn-sm btn-outline-danger delete-file-btn" 
                                    data-id="${file.id}" data-expense="${expense.id}">
                                    <i class="bi bi-trash"></i>
                                </button>
                            </div>
                        </div>
                    `).join('');
                    
                    // Добавление обработчиков удаления файлов
                    filesContainer.querySelectorAll('.delete-file-btn').forEach(btn => {
                        btn.addEventListener('click', function() {
                            deleteFile(this.dataset.id, this.dataset.expense);
                        });
                    });
                    
                    expenseModal.show();
                })
                .catch(error => {
                    console.error('Klaida įkeliant išlaidas:', error);
                    alert('Nepavyko įkelti išlaidų duomenų');
                });
            });
        });
        
        // Удаление расхода
        document.querySelectorAll('.delete-btn').forEach(btn => {
            btn.addEventListener('click', function() {
                const expenseId = this.dataset.id;
                const description = this.dataset.description;
                
                if (!confirm(`Ar tikrai norite ištrinti išlaidas "${description}"? Šio veiksmo negalima atšaukti.`)) {
                    return;
                }
                
                fetch(`/expenses/api/expenses/${expenseId}/`, {
                    method: 'DELETE',
                    headers: {
                        'X-CSRFToken': csrfToken
                    }
                })
            .then(response => {
                if (response.ok) {
                    // Сохраняем параметры пагинации
                    const urlParams = new URLSearchParams(window.location.search);
                    window.location.href = window.location.pathname + '?' + urlParams.toString();
                } else {
                    throw new Error('Nepavyko ištrinti išlaidų');
                }
            })
            .catch(error => {
                console.error('Klaida:', error);
                alert('Klaida trinant išlaidas: ' + error.message);
            });
        });
    });
    
    // Просмотр файла (исправленная версия)
    document.querySelectorAll('.view-file-btn').forEach(btn => {
        btn.addEventListener('click', function() {
            closeAllModals();
            const fileId = this.dataset.id;
            const expenseId = this.dataset.expense;
            const fileName = this.dataset.name;
            
            document.getElementById('fileModalTitle').textContent = fileName;
            document.getElementById('downloadFileBtn').href = `/expenses/api/expenses/${expenseId}/files/${fileId}/download/`;
            
            const filePreview = document.getElementById('filePreview');
            filePreview.innerHTML = '<div class="d-flex justify-content-center align-items-center h-100"><div class="spinner-border" role="status"></div></div>';
            
            // Определяем тип файла для отображения
            const fileExt = fileName.split('.').pop().toLowerCase();
            const isImage = ['jpg', 'jpeg', 'png', 'gif'].includes(fileExt);
            const isPDF = fileExt === 'pdf';
            
            if (isImage) {
                const img = document.createElement('img');
                img.src = `/expenses/api/expenses/${expenseId}/files/${fileId}/download/`;
                img.className = 'img-fluid file-preview-img';
                img.alt = fileName;
                img.onload = () => fileViewModal.show();
                img.onerror = () => {
                    filePreview.innerHTML = `
                        <div class="alert alert-danger">
                            <i class="bi bi-exclamation-triangle me-2"></i>
                            Nepavyko įkelti failo
                        </div>
                    `;
                };
                filePreview.innerHTML = '';
                filePreview.appendChild(img);
            } 
            else if (isPDF) {
                filePreview.innerHTML = `
                    <iframe 
                        src="/expenses/api/expenses/${expenseId}/files/${fileId}/download/" 
                        width="100%" 
                        height="500px" 
                        frameborder="0"
                        onload="fileViewModal.show()"
                    ></iframe>
                `;
            } 
            else {
                filePreview.innerHTML = `
                    <div class="alert alert-info">
                        <i class="bi bi-info-circle me-2"></i>
                        Šio tipo failo peržiūra nepalaikoma. Atsisiųskite failą.
                    </div>
                `;
                fileViewModal.show();
            }
        });
    });
    
    // Удаление файла
    function deleteFile(fileId, expenseId) {
        if (!confirm('Ar tikrai norite ištrinti šį failą? Veiksmas negrįžtamas.')) return;
        
        fetch(`/expenses/api/expenses/${expenseId}/files/${fileId}/`, {
            method: 'DELETE',
            headers: {
                'X-CSRFToken': csrfToken
            }
        })
        .then(response => {
            if (response.ok) {
                location.reload();
            } else {
                throw new Error('Nepavyko ištrinti failo');
            }
        })
        .catch(error => {
            console.error('Klaida:', error);
            alert('Klaida trinant failą: ' + error.message);
        });
    }
    
    // Обработчики фильтров
    document.getElementById('filterForm').addEventListener('submit', function(e) {
        e.preventDefault();
        applyFilters();
    });

    document.getElementById('resetFilterBtn').addEventListener('click', function() {
        resetFilters();
    });

    // Применить фильтры
    function applyFilters() {
        const params = new URLSearchParams();
        
        const description = document.getElementById('filterDescription').value.trim();
        if (description) params.append('search', description);
        
        const date = document.getElementById('filterDate').value;
        if (date) params.append('date', date);
        
        const selectedTags = Array.from(document.getElementById('filterTags').selectedOptions)
            .map(option => option.value);
        if (selectedTags.length > 0) {
            params.append('tags', selectedTags.join(','));
        }
        
        window.location.search = params.toString();
    }

    // Сбросить фильтры
    function resetFilters() {
        window.location.search = '';
    }
    
    // Обработка формы сохранения расхода
    document.getElementById('expenseForm').addEventListener('submit', function(e) {
        e.preventDefault();
        
        const formData = new FormData();
        const expenseId = document.getElementById('expenseId').value;
        
        // Добавляем основные поля
        formData.append('date', document.getElementById('expenseDate').value);
        formData.append('amount', document.getElementById('amount').value);
        formData.append('description', document.getElementById('description').value);
        if (expenseId) formData.append('expense_id', expenseId);
        
        // Собираем выбранные теги
        const tagBadges = document.querySelectorAll('#selectedTagsContainer .tag-badge');
        tagBadges.forEach(badge => {
            formData.append('tag_ids', badge.dataset.id);
        });
        
        // Добавляем новые файлы
        const fileInput = document.getElementById('fileInput');
        for (let i = 0; i < fileInput.files.length; i++) {
            formData.append('uploaded_files', fileInput.files[i]);
        }
        
        // Определяем URL и метод
        const method = expenseId ? 'PATCH' : 'POST';
        const url = expenseId ? `/expenses/api/expenses/${expenseId}/` : '/expenses/api/expenses/';
        
        // Отправляем запрос
        fetch(url, {
            method: method,
            headers: {
                'X-CSRFToken': csrfToken
            },
            body: formData
        })
        .then(response => {
            if (response.ok) {
                location.reload();
            } else {
                return response.json().then(err => { throw new Error(JSON.stringify(err)); });
            }
        })
        .catch(error => {
            console.error('Klaida:', error);
            alert('Klaida išsaugant išlaidas: ' + error.message);
        });
    });

    // Инициализация даты по умолчанию
    document.getElementById('expenseDate').valueAsDate = new Date();
});
</script>

<style>
    /* Исправление наложения модальных окон */
    .modal-backdrop.show {
        z-index: 1040 !important;
    }
    .modal {
        z-index: 1050 !important;
    }
    
    .tag-badge {
        display: inline-flex;
        align-items: center;
        padding: 0.35em 0.65em;
        font-size: 0.75em;
        font-weight: 700;
        line-height: 1;
        text-align: center;
        white-space: nowrap;
        vertical-align: baseline;
        border-radius: 0.25rem;
    }
    
    .tag-badge .btn-close {
        padding: 0.25rem;
        font-size: 0.75em;
    }
    
    .file-preview-img {
        max-width: 100%;
        max-height: 70vh;
        border: 1px solid #dee2e6;
        border-radius: 0.25rem;
    }
    
    #selectedTagsContainer {
        min-height: 38px;
        padding: 5px;
        border: 1px solid #ced4da;
        border-radius: 0.25rem;
    }
    
    #uploadedFiles .delete-file-btn {
        padding: 0.15rem 0.25rem;
        font-size: 0.875rem;
    }
    
    /* Адаптивные стили для тегов */
    .tag-badge {
        max-width: 200px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Стили для цветового поля */
    .form-control-color {
        height: 38px;
        width: 70px;
        padding: 2px;
    }

    /* Стили для уведомлений */
    .global-alert {
        position: fixed;
        top: 20px;
        right: 20px;
        z-index: 1050;
        max-width: 400px;
    }
    
    /* Дополнительные стили для исправления проблем */
    
    /* Превью файлов */
    .file-preview-img {
        max-width: 100%;
        max-height: 70vh;
        object-fit: contain;
    }
    
    /* Управление тегами */
    #tagsList .list-group-item {
        padding: 0.75rem 1.25rem;
    }
    
    #tagsList .text-truncate {
        display: inline-block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        vertical-align: middle;
    }
    
    /* Выбранные теги в форме */
    #selectedTagsContainer .tag-badge {
        max-width: 180px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: inline-flex;
        align-items: center;
    }
    
    /* Адаптивность для тегов */
    @media (max-width: 768px) {
        #tagsList .text-truncate {
            max-width: 150px;
        }
        
        #selectedTagsContainer .tag-badge {
            max-width: 130px;
        }
    }
    
    @media (max-width: 576px) {
        #tagsList .text-truncate {
            max-width: 100px;
        }
        
        #selectedTagsContainer .tag-badge {
            max-width: 100px;
            font-size: 0.65em;
        }
    }
    @media (max-width: 767.98px) {
    .header-buttons .btn {
        padding: 0.35rem 0.5rem;
        font-size: 0.825rem;
    }
    .header-buttons .btn i {
        margin-right: 0.15rem !important;
    }
}

@media (max-width: 575.98px) {
    .header-buttons {
        gap: 0.35rem !important;
    }
    .header-buttons .btn {
        flex-basis: calc(50% - 0.175rem);
    }
}
</style>
{% endblock %}