{% extends 'base.html' %}

{% block page_title %}Klientai{% endblock %}

{% block content %}
<div class="card">
    <div class="card-header d-flex justify-content-between align-items-center">
        <h5 class="mb-0">Klientų sąrašas</h5>
        <div>
            <button class="btn btn-outline-secondary me-2" id="toggleFilterBtn">
                <i class="bi bi-funnel"></i> Filtras
            </button>
            <button class="btn btn-primary" id="addPartnerBtn">
                <i class="bi bi-plus-circle me-2"></i> Pridėti klientą
            </button>
        </div>
    </div>

    <!-- Фильтры (изначально скрыты) -->
    <div class="card-body bg-light" id="filterSection" style="display: none;">
        <form id="filterForm" class="row g-3">
            <div class="col-md-3">
                <label for="filterName" class="form-label">Pavadinimas</label>
                <input type="text" class="form-control" id="filterName" name="name">
            </div>
            <div class="col-md-3">
                <label for="filterContact" class="form-label">Kontaktinis asmuo</label>
                <input type="text" class="form-control" id="filterContact" name="contact_person">
            </div>
            <div class="col-md-3">
                <label for="filterEmail" class="form-label">El. paštas</label>
                <input type="email" class="form-control" id="filterEmail" name="email">
            </div>
            <div class="col-md-3">
                <label for="filterPhone" class="form-label">Telefonas</label>
                <input type="tel" class="form-control" id="filterPhone" name="phone">
            </div>
            
            <div class="col-md-4">
                <label for="filterAddress" class="form-label">Adresas</label>
                <input type="text" class="form-control" id="filterAddress" name="address">
            </div>
            <div class="col-md-4">
                <label for="filterVat" class="form-label">PVM kodas</label>
                <input type="text" class="form-control" id="filterVat" name="vat_code">
            </div>
            <div class="col-md-4">
                <label for="filterRegNumber" class="form-label">Įmonės kodas</label>
                <input type="text" class="form-control" id="filterRegNumber" name="registration_number">
            </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="partnersTable">
                <thead>
                    <tr>
                        <th>Pavadinimas</th>
                        <th>Kontaktinis asmuo</th>
                        <th>El. paštas</th>
                        <th>Telefonas</th>
                        <th>PVM kodas</th>
                        <th>Veiksmai</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- Duomenys bus įkelti per JavaScript -->
                </tbody>
            </table>
        </div>

        <!-- Puslapiavimas -->
        <nav aria-label="Puslapiavimas" id="paginationContainer">
            <ul class="pagination justify-content-center">
                <!-- Puslapiavimas bus įkeltas per JavaScript -->
            </ul>
        </nav>
    </div>
</div>

<!-- Pridėti/Redaguoti partnerio modalas -->
<div class="modal fade" id="partnerModal" 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 naują klientą </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Uždaryti"></button>
            </div>
            <form id="partnerForm">
                <div class="modal-body">
                    <input type="hidden" id="partnerId">
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <label for="name" class="form-label">Pavadinimas</label>
                            <input type="text" class="form-control" id="name" required>
                        </div>
                        <div class="col-md-6">
                            <label for="contactPerson" class="form-label">Kontaktinis asmuo</label>
                            <input type="text" class="form-control" id="contactPerson">
                        </div>
                    </div>
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <label for="email" class="form-label">El. paštas</label>
                            <input type="email" class="form-control" id="email">
                        </div>
                        <div class="col-md-6">
                            <label for="phone" class="form-label">Telefonas</label>
                            <input type="tel" class="form-control" id="phone">
                        </div>
                    </div>
                    <div class="mb-3">
                        <label for="address" class="form-label">Adresas</label>
                        <textarea class="form-control" id="address" rows="2"></textarea>
                    </div>
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <label for="vatCode" class="form-label">PVM kodas</label>
                            <input type="text" class="form-control" id="vatCode">
                        </div>
                        <div class="col-md-6">
                            <label for="registrationNumber" class="form-label">Įmonės kodas</label>
                            <input type="text" class="form-control" id="registrationNumber">
                        </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 klientą</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Partnerio informacijos modalas -->
<div class="modal fade" id="detailModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Partnerio informacija</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Uždaryti"></button>
            </div>
            <div class="modal-body" id="partnerDetails">
                <!-- Informacija bus įkelta per JavaScript -->
            </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="documentsModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Dokumentai: <span id="documentsPartnerName"></span></h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Uždaryti"></button>
            </div>
            <div class="modal-body">
                <form id="documentUploadForm" enctype="multipart/form-data">
                    <div class="mb-3">
                        <label for="documentTitle" class="form-label">Dokumento pavadinimas</label>
                        <input type="text" class="form-control" id="documentTitle" required>
                    </div>
                    <div class="mb-3">
                        <label for="documentFile" class="form-label">Pasirinkite failą</label>
                        <input class="form-control" type="file" id="documentFile" name="file" required>
                    </div>
                    <div class="d-flex justify-content-end mb-4">
                        <button type="submit" class="btn btn-primary">
                            <i class="bi bi-upload me-2"></i> Įkelti dokumentą
                        </button>
                    </div>
                </form>

                <div class="border-top pt-3">
                    <h5>Įkelti dokumentai</h5>
                    <div id="documentsList" class="list-group">
                        <!-- Документы будут загружены здесь -->
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Uždaryti</button>
            </div>
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        const partnerModal = new bootstrap.Modal(document.getElementById('partnerModal'));
        const detailModal = new bootstrap.Modal(document.getElementById('detailModal'));
        const documentsModal = new bootstrap.Modal(document.getElementById('documentsModal'));
        let currentPage = 1;
        let totalPages = 1;
        let currentPartnerId = null;
        let currentPartnerIdForDocs = null;
        let currentFilters = {};
        
        // Соответствие полей и ID элементов
        const fieldToIdMap = {
            name: 'filterName',
            contact_person: 'filterContact',
            email: 'filterEmail',
            phone: 'filterPhone',
            address: 'filterAddress',
            vat_code: 'filterVat',
            registration_number: 'filterRegNumber'
        };

        // Переключение видимости секции фильтров
        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';
            }
        });

        // Инициализация фильтров из URL
        function initFiltersFromUrl() {
            const params = new URLSearchParams(window.location.search);
            for (const [field, elementId] of Object.entries(fieldToIdMap)) {
                const value = params.get(field);
                if (value) {
                    const input = document.getElementById(elementId);
                    if (input) {
                        input.value = value;
                        currentFilters[field] = value;
                    }
                }
            }
        }

        // Загрузка партнеров при открытии страницы
        initFiltersFromUrl();
        loadPartners();

        // Обработчики фильтров
        document.getElementById('filterForm').addEventListener('submit', function(e) {
            e.preventDefault();
            applyFilters();
        });

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

        // Pridėti partnerio mygtuko apdorojimas
        document.getElementById('addPartnerBtn').addEventListener('click', function () {
            document.getElementById('modalTitle').textContent = 'Pridėti naują klientą ';
            document.getElementById('partnerForm').reset();
            document.getElementById('partnerId').value = '';
            currentPartnerId = null;
            partnerModal.show();
        });

        // Formos pateikimo apdorojimas
        document.getElementById('partnerForm').addEventListener('submit', function (e) {
            e.preventDefault();
            savePartner();
        });

        // Применить фильтры
        function applyFilters() {
            currentFilters = {};
            for (const [field, elementId] of Object.entries(fieldToIdMap)) {
                const inputElement = document.getElementById(elementId);
                if (inputElement) {
                    const value = inputElement.value.trim();
                    if (value) {
                        currentFilters[field] = value;
                    }
                }
            }
            loadPartners(1);
            updateUrlWithFilters();
        }

        // Сбросить фильтры
        function resetFilters() {
            for (const elementId of Object.values(fieldToIdMap)) {
                const input = document.getElementById(elementId);
                if (input) {
                    input.value = '';
                }
            }
            currentFilters = {};
            loadPartners(1);
            updateUrl();
        }

        // Обновить URL с параметрами фильтров
        function updateUrlWithFilters() {
            const params = new URLSearchParams();
            for (const [key, value] of Object.entries(currentFilters)) {
                params.append(key, value);
            }
            
            const newUrl = window.location.pathname + (params.toString() ? `?${params.toString()}` : '');
            window.history.replaceState(null, '', newUrl);
        }

        // Обновить URL (убрать параметры)
        function updateUrl() {
            window.history.replaceState(null, '', window.location.pathname);
        }

        // Funkcija partneriams įkelti
        function loadPartners(page = 1) {
            const params = new URLSearchParams();
            params.append('page', page);
            
            // Добавляем параметры фильтрации
            for (const [key, value] of Object.entries(currentFilters)) {
                params.append(key, value);
            }
            
            fetch(`/partners/api/?${params.toString()}`)
                .then(response => {
                    if (!response.ok) throw new Error('Network response was not ok');
                    return response.json();
                })
                .then(data => {
                    renderPartners(data.results);
                    renderPagination(data.count, page);
                    currentPage = page;
                })
                .catch(error => {
                    console.error('Klaida įkeliant partnerius:', error);
                });
        }

        // Atvaizduoti partnerių lentelę
        function renderPartners(partners) {
            const tbody = document.querySelector('#partnersTable tbody');
            tbody.innerHTML = '';

            if (partners.length === 0) {
                const hasFilters = Object.keys(currentFilters).length > 0;
                tbody.innerHTML = `
                    <tr>
                        <td colspan="6" class="text-center py-4">
                            <div class="text-muted">
                                <i class="bi bi-people display-6"></i>
                                <h5 class="mt-3">Partnerių nerasta</h5>
                                <p>${hasFilters ? 'Pagal filtrus rezultatų nerasta' : 'Pradėkite pridėdami savo pirmąjį partnerį'}</p>
                                ${hasFilters ? '<button class="btn btn-sm btn-outline-secondary mt-2" id="resetFiltersBtn">Išvalyti filtrus</button>' : ''}
                            </div>
                        </td>
                    </tr>
                `;
                
                if (hasFilters) {
                    document.getElementById('resetFiltersBtn').addEventListener('click', resetFilters);
                }
                return;
            }

            partners.forEach(partner => {
                const row = document.createElement('tr');
                row.innerHTML = `
                    <td>${partner.name || '-'}</td>
                    <td>${partner.contact_person || '-'}</td>
                    <td>${partner.email ? `<a href="mailto:${partner.email}">${partner.email}</a>` : '-'}</td>
                    <td>${partner.phone ? `<a href="tel:${partner.phone}">${partner.phone}</a>` : '-'}</td>
                    <td>${partner.vat_code || '-'}</td>
                    <td>
                        <div class="d-flex gap-2">
                            <button class="btn btn-sm btn-outline-info detail-btn"
                                data-id="${partner.id}">
                                <i class="bi bi-info-circle"></i>
                            </button>
                            <button class="btn btn-sm btn-outline-primary edit-btn"
                                data-id="${partner.id}">
                                <i class="bi bi-pencil"></i>
                            </button>
                            <button class="btn btn-sm btn-outline-secondary documents-btn"
                                data-id="${partner.id}" data-name="${partner.name || 'be pavadinimo'}">
                                <i class="bi bi-files"></i>
                            </button>
                            <button class="btn btn-sm btn-outline-danger delete-btn"
                                data-id="${partner.id}" data-name="${partner.name || 'be pavadinimo'}">
                                <i class="bi bi-trash"></i>
                            </button>
                        </div>
                    </td>
                `;
                tbody.appendChild(row);
            });

            // Pridėti įvykių klausytojus
            document.querySelectorAll('.detail-btn').forEach(btn => {
                btn.addEventListener('click', function () {
                    showPartnerDetails(this.dataset.id);
                });
            });

            document.querySelectorAll('.edit-btn').forEach(btn => {
                btn.addEventListener('click', function () {
                    editPartner(this.dataset.id);
                });
            });

            document.querySelectorAll('.documents-btn').forEach(btn => {
                btn.addEventListener('click', function() {
                    const partnerId = this.dataset.id;
                    const partnerName = this.dataset.name;
                    openDocumentsModal(partnerId, partnerName);
                });
            });

            document.querySelectorAll('.delete-btn').forEach(btn => {
                btn.addEventListener('click', function () {
                    const partnerName = this.dataset.name || 'be pavadinimo';
                    deletePartner(this.dataset.id, partnerName);
                });
            });
        }

        // Atvaizduoti puslapiavimą
        function renderPagination(totalItems, currentPage) {
            const perPage = 10;
            totalPages = Math.ceil(totalItems / perPage);
            const pagination = document.querySelector('#paginationContainer ul');
            pagination.innerHTML = '';

            if (totalPages <= 1) return;

            // Helper function to create page items
            const createPageItem = (page, text, isActive = false, isDisabled = false) => {
                const li = document.createElement('li');
                li.className = `page-item ${isActive ? 'active' : ''} ${isDisabled ? 'disabled' : ''}`;
                const a = document.createElement('a');
                a.className = 'page-link';
                a.href = '#';
                a.textContent = text;
                if (!isDisabled && !isActive) {
                    a.addEventListener('click', (e) => {
                        e.preventDefault();
                        loadPartners(page);
                    });
                }
                li.appendChild(a);
                return li;
            };

            // Previous button
            pagination.appendChild(
                createPageItem(currentPage - 1, '«', false, currentPage === 1)
            );

            // Always show first page
            pagination.appendChild(
                createPageItem(1, '1', 1 === currentPage)
            );

            // Calculate page range to show
            let startPage = Math.max(2, currentPage - 2);
            let endPage = Math.min(totalPages - 1, currentPage + 2);

            // Add left ellipsis if needed
            if (startPage > 2) {
                pagination.appendChild(
                    createPageItem(startPage - 1, '...', false, true)
                );
            }

            // Add middle pages
            for (let i = startPage; i <= endPage; i++) {
                pagination.appendChild(
                    createPageItem(i, i.toString(), i === currentPage)
                );
            }

            // Add right ellipsis if needed
            if (endPage < totalPages - 1) {
                pagination.appendChild(
                    createPageItem(endPage + 1, '...', false, true)
                );
            }

            // Always show last page if different from first
            if (totalPages > 1) {
                pagination.appendChild(
                    createPageItem(totalPages, totalPages.toString(), totalPages === currentPage)
                );
            }

            // Next button
            pagination.appendChild(
                createPageItem(currentPage + 1, '»', false, currentPage === totalPages)
            );
        }

        // Rodyti partnerio informaciją
        function showPartnerDetails(partnerId) {
            fetch(`/partners/api/${partnerId}`)
                .then(response => response.json())
                .then(partner => {
                    const details = document.getElementById('partnerDetails');
                    details.innerHTML = `
                        <div class="row mb-4">
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Pavadinimas</label>
                                <p class="form-control-static fw-bold">${partner.name || '-'}</p>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Kontaktinis asmuo</label>
                                <p class="form-control-static">${partner.contact_person || '-'}</p>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">El. paštas</label>
                                <p class="form-control-static">
                                    ${partner.email ? `<a href="mailto:${partner.email}">${partner.email}</a>` : '-'}
                                </p>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Telefonas</label>
                                <p class="form-control-static">
                                    ${partner.phone ? `<a href="tel:${partner.phone}">${partner.phone}</a>` : '-'}
                                </p>
                            </div>
                            <div class="col-12 mb-3">
                                <label class="form-label">Adresas</label>
                                <p class="form-control-static">${partner.address || '-'}</p>
                            </div>
                        </div>

                        <div class="border-top pt-4">
                            <h5 class="mb-3">Finansinė informacija</h5>
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label class="form-label">PVM kodas</label>
                                    <p class="form-control-static">${partner.vat_code || '-'}</p>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label class="form-label">Įmonės kodas</label>
                                    <p class="form-control-static">${partner.registration_number || '-'}</p>
                                </div>
                            </div>
                        </div>

                        <div class="border-top pt-4">
                            <h5 class="mb-3">Meta duomenys</h5>
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label class="form-label">Sukurta</label>
                                    <p class="form-control-static">${new Date(partner.created_at).toLocaleString()}</p>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label class="form-label">Atnaujinta</label>
                                    <p class="form-control-static">${new Date(partner.updated_at).toLocaleString()}</p>
                                </div>
                            </div>
                        </div>
                    `;
                    detailModal.show();
                })
                .catch(error => {
                    console.error('Klaida įkeliant partnerio informaciją:', error);
                    alert('Klaida įkeliant partnerio informaciją');
                });
        }

        // Redaguoti partnerį
        function editPartner(partnerId) {
            fetch(`/partners/api/${partnerId}`)
                .then(response => response.json())
                .then(partner => {
                    document.getElementById('modalTitle').textContent = `Redaguoti partnerį: ${partner.name || 'be pavadinimo'}`;
                    document.getElementById('partnerId').value = partner.id;
                    document.getElementById('name').value = partner.name || '';
                    document.getElementById('contactPerson').value = partner.contact_person || '';
                    document.getElementById('email').value = partner.email || '';
                    document.getElementById('phone').value = partner.phone || '';
                    document.getElementById('address').value = partner.address || '';
                    document.getElementById('vatCode').value = partner.vat_code || '';
                    document.getElementById('registrationNumber').value = partner.registration_number || '';

                    currentPartnerId = partner.id;
                    partnerModal.show();
                })
                .catch(error => {
                    console.error('Klaida įkeliant partnerį redagavimui:', error);
                    alert('Klaida įkeliant partnerį redagavimui');
                });
        }

        // Išsaugoti partnerį (sukurti ar atnaujinti)
        function savePartner() {
            const formData = {
                name: document.getElementById('name').value,
                contact_person: document.getElementById('contactPerson').value,
                email: document.getElementById('email').value,
                phone: document.getElementById('phone').value,
                address: document.getElementById('address').value,
                vat_code: document.getElementById('vatCode').value,
                registration_number: document.getElementById('registrationNumber').value,
            };

            const method = currentPartnerId ? 'PUT' : 'POST';
            const url = currentPartnerId
                ? `/partners/api/${currentPartnerId}/`
                : '/partners/api/';

            fetch(url, {
                method: method,
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRFToken': getCSRFToken()
                },
                body: JSON.stringify(formData)
            })
                .then(response => {
                    if (response.ok) {
                        partnerModal.hide();
                        loadPartners(currentPage);
                    } else {
                        alert('Klaida išsaugant partnerį');
                    }
                })
                .catch(error => {
                    console.error('Klaida:', error);
                    alert('Klaida išsaugant partnerį');
                });
        }

        // Ištrinti partnerį
        function deletePartner(partnerId, partnerName) {
            if (!confirm(`Ar tikrai norite ištrinti partnerį "${partnerName}"? Šio veiksmo negalima atšaukti.`)) {
                return;
            }

            fetch(`/partners/api/${partnerId}/`, {
                method: 'DELETE',
                headers: {
                    'X-CSRFToken': getCSRFToken()
                }
            })
                .then(response => {
                    if (response.ok) {
                        loadPartners(currentPage);
                    } else {
                        alert('Nepavyko ištrinti partnerio');
                    }
                })
                .catch(error => {
                    console.error('Klaida:', error);
                    alert('Klaida trinant partnerį');
                });
        }

        // Открытие модального окна документов
        function openDocumentsModal(partnerId, partnerName) {
            document.getElementById('documentsPartnerName').textContent = partnerName;
            document.getElementById('documentUploadForm').dataset.partnerId = partnerId;
            currentPartnerIdForDocs = partnerId;
            loadDocuments(partnerId);
            documentsModal.show();
        }

        // Загрузка документов партнера
        function loadDocuments(partnerId) {
            fetch(`/partners/${partnerId}/documents/`)
                .then(response => {
                    if (!response.ok) throw new Error('Nepavyko įkelti dokumentų');
                    return response.json();
                })
                .then(documents => {
                    const container = document.getElementById('documentsList');
                    container.innerHTML = '';

                    if (documents.length === 0) {
                        container.innerHTML = '<div class="text-center py-3 text-muted">Dokumentų nėra</div>';
                        return;
                    }

                    documents.forEach(doc => {
                        const docElement = document.createElement('div');
                        docElement.className = 'list-group-item list-group-item-action d-flex justify-content-between align-items-center';
                        docElement.innerHTML = `
                            <div class="d-flex flex-column">
                                <a href="${doc.file}" target="_blank" class="mb-1">${doc.title}</a>
                                <small class="text-muted">Įkelta: ${new Date(doc.uploaded_at).toLocaleString()}</small>
                            </div>
                            <button class="btn btn-sm btn-outline-danger delete-document-btn" data-doc-id="${doc.id}">
                                <i class="bi bi-trash"></i>
                            </button>
                        `;
                        container.appendChild(docElement);
                    });

                    // Добавляем обработчики удаления документов
                    document.querySelectorAll('.delete-document-btn').forEach(btn => {
                        btn.addEventListener('click', function() {
                            const docId = this.dataset.docId;
                            deleteDocument(docId);
                        });
                    });
                })
                .catch(error => {
                    console.error('Klaida įkeliant dokumentus:', error);
                    const container = document.getElementById('documentsList');
                    container.innerHTML = '<div class="alert alert-danger">Klaida įkeliant dokumentus</div>';
                });
        }

        // Удаление документа
        function deleteDocument(docId) {
            if (!confirm('Ar tikrai norite ištrinti šį dokumentą?')) return;

            fetch(`/partners/documents/${docId}/delete/`, {
                method: 'DELETE',
                headers: {
                    'X-CSRFToken': getCSRFToken()
                }
            })
            .then(response => {
                if (response.ok) {
                    loadDocuments(currentPartnerIdForDocs);
                } else {
                    alert('Nepavyko ištrinti dokumento');
                }
            })
            .catch(error => {
                console.error('Klaida:', error);
                alert('Įvyko klaida trinant dokumentą');
            });
        }

        // Загрузка нового документа
        document.getElementById('documentUploadForm').addEventListener('submit', function(e) {
            e.preventDefault();

            const partnerId = this.dataset.partnerId;
            const title = document.getElementById('documentTitle').value;
            const fileInput = document.getElementById('documentFile');
            const file = fileInput.files[0];

            if (!file) {
                alert('Pasirinkite failą');
                return;
            }

            const formData = new FormData();
            formData.append('title', title);
            formData.append('file', file);

            fetch(`/partners/${partnerId}/documents/upload/`, {
                method: 'POST',
                body: formData,
                headers: {
                    'X-CSRFToken': getCSRFToken()
                }
            })
            .then(response => {
                if (response.ok) {
                    return response.json();
                }
                throw new Error('Įkėlimo klaida');
            })
            .then(data => {
                // Очищаем форму
                document.getElementById('documentTitle').value = '';
                fileInput.value = '';
                // Обновляем список документов
                loadDocuments(partnerId);
            })
            .catch(error => {
                console.error('Klaida:', error);
                alert('Dokumento įkelti nepavyko');
            });
        });

        // Gauti CSRF token'ą
        function getCSRFToken() {
            const csrfCookie = document.cookie.split('; ').find(row => row.startsWith('csrftoken='));
            return csrfCookie ? csrfCookie.split('=')[1] : '';
        }
    });
</script>

<style>
    .table-hover tbody tr:hover {
        background-color: rgba(44, 107, 237, 0.05);
    }

    .actions-cell {
        min-width: 150px;
    }

    .detail-btn:hover {
        background-color: var(--info);
        color: white !important;
    }

    .edit-btn:hover {
        background-color: var(--primary);
        color: white !important;
    }

    .documents-btn:hover {
        background-color: #6c757d;
        color: white !important;
    }

    .delete-btn:hover {
        background-color: var(--danger);
        color: white !important;
    }

    .page-item.active .page-link {
        background-color: var(--primary);
        border-color: var(--primary);
    }

    .page-link {
        color: var(--primary);
    }

    .page-link:hover {
        color: var(--primary-dark);
    }
    
    .page-item.disabled .page-link {
        pointer-events: none;
        color: #6c757d;
    }
    
    /* Стили для фильтров */
    #filterSection {
        transition: all 0.3s ease;
    }
    
    #filterForm .form-label {
        font-weight: 500;
        margin-bottom: 0.25rem;
    }
    
    #toggleFilterBtn:hover {
        background-color: #e9ecef;
    }
    
    /* Стили для модального окна документов */
    #documentsList .list-group-item {
        border: 1px solid rgba(0, 0, 0, 0.125);
        border-radius: 0.25rem;
        margin-bottom: 0.5rem;
        transition: all 0.2s;
    }
    
    #documentsList .list-group-item:hover {
        background-color: #f8f9fa;
    }
    
    #documentsList a {
        text-decoration: none;
        font-weight: 500;
        color: #0d6efd;
    }
    
    #documentsList a:hover {
        text-decoration: underline;
    }
    
    .delete-document-btn {
        padding: 0.25rem 0.5rem;
        align-self: flex-start;
    }
    
    /* Адаптивные стили */
    @media (max-width: 992px) {
        .card-header {
            flex-direction: column;
            align-items: flex-start;
        }
        
        .card-header h5 {
            margin-bottom: 1rem;
        }
        
        .card-header > div {
            width: 100%;
            justify-content: space-between;
        }
    }
    
    @media (max-width: 768px) {
        #filterForm .col-md-3,
        #filterForm .col-md-4 {
            flex: 0 0 100%;
            max-width: 100%;
        }
        
        .actions-cell {
            min-width: auto;
        }
        
        .d-flex.gap-2 {
            flex-wrap: wrap;
            gap: 0.25rem !important;
        }
        
        .d-flex.gap-2 .btn {
            padding: 0.25rem;
            font-size: 0.75rem;
        }
    }
</style>
{% endblock %}