{% extends 'base.html' %}

{% block page_title %}Produktų valdymas{% endblock %}

{% block content %}
<div class="card">
    <div class="card-header d-flex justify-content-between align-items-center">
        <h5 class="mb-0">Produktų 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="addProductBtn">
                <i class="bi bi-plus-circle me-2"></i> Pridėti produktą
            </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-6">
                <label for="filterName" class="form-label">Pavadinimas</label>
                <input type="text" class="form-control" id="filterName" name="search" placeholder="Ieškoti pagal pavadinimą">
            </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="productsTable">
                <thead>
                    <tr>
                        <th>Pavadinimas</th>
                        <th>Kaina</th>
                        <th>Nuolaida</th>
                        <th>Vnt.</th>
                        <th>PVM tarifas</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 produkto modalas -->
<div class="modal fade" id="productModal" 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ą produktą</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Uždaryti"></button>
            </div>
            <form id="productForm">
                <div class="modal-body">
                    <input type="hidden" id="productId">
                    <div class="mb-3">
                        <label for="name" class="form-label">Produkto pavadinimas *</label>
                        <input type="text" class="form-control" id="name" required>
                        <div class="invalid-feedback">Privalomas laukas</div>
                    </div>
                    
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <label for="price" class="form-label">Kaina *</label>
                            <div class="input-group">
                                <span class="input-group-text">€</span>
                                <input type="number" class="form-control" id="price" 
                                       min="0.01" step="0.01" required>
                                <div class="invalid-feedback">Privaloma teigiama reikšmė</div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <label for="discount" class="form-label">Nuolaida (%)</label>
                            <div class="input-group">
                                <input type="number" class="form-control" id="discount" 
                                       min="0" max="100" step="0.01" value="0">
                                <span class="input-group-text">%</span>
                            </div>
                        </div>
                    </div>
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <label for="unit" class="form-label">Vnt.</label>
                            <input type="text" class="form-control" id="unit" value="vnt.">
                        </div>
                        <div class="col-md-6">
                            <label for="vatRate" class="form-label">PVM tarifas (%)</label>
                            <input type="number" class="form-control" id="vatRate" 
                                   min="0" max="100" step="0.01" value="0.0">
                        </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 produktą</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Produkto 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">Produkto informacija</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Uždaryti"></button>
            </div>
            <div class="modal-body" id="productDetails">
                <!-- 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>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const productModal = new bootstrap.Modal(document.getElementById('productModal'));
        const detailModal = new bootstrap.Modal(document.getElementById('detailModal'));
        let currentPage = 1;
        let totalPages = 1;
        let currentProductId = null;
        let currentFilters = {};

        // Соответствие полей фильтрации
        const fieldToIdMap = {
            search: 'filterName'
        };

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

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

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

        // Pridėti produkto mygtuko apdorojimas
        document.getElementById('addProductBtn').addEventListener('click', function() {
            document.getElementById('modalTitle').textContent = 'Pridėti naują produktą';
            document.getElementById('productForm').reset();
            document.getElementById('productId').value = '';
            document.getElementById('unit').value = 'vnt.';
            document.getElementById('vatRate').value = '21';
            document.getElementById('discount').value = '0';
            resetValidation();
            currentProductId = null;
            productModal.show();
        });

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

        // Применить фильтры
        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;
                    }
                }
            }
            loadProducts(1);
            updateUrlWithFilters();
        }

        // Сбросить фильтры
        function resetFilters() {
            for (const elementId of Object.values(fieldToIdMap)) {
                const input = document.getElementById(elementId);
                if (input) {
                    input.value = '';
                }
            }
            currentFilters = {};
            loadProducts(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 produktams įkelti
        function loadProducts(page = 1) {
            const params = new URLSearchParams();
            params.append('page', page);
            
            // Добавляем параметры фильтрации
            for (const [key, value] of Object.entries(currentFilters)) {
                params.append(key, value);
            }
            
            fetch(`/products/api/?${params.toString()}`)
                .then(response => {
                    if (!response.ok) {
                        throw new Error('Nepavyko gauti produktų');
                    }
                    return response.json();
                })
                .then(data => {
                    renderProducts(data.results);
                    renderPagination(data.count, page);
                    currentPage = page;
                })
                .catch(error => {
                    console.error('Klaida įkeliant produktus:', error);
                });
        }

        // Atvaizduoti produktų lentelę
        function renderProducts(products) {
            const tbody = document.querySelector('#productsTable tbody');
            tbody.innerHTML = '';

            if (products.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-box display-6"></i>
                                <h5 class="mt-3">Produktų nerasta</h5>
                                <p>${hasFilters ? 'Pagal filtrus rezultatų nerasta' : 'Pradėkite pridėdami savo pirmąjį produktą'}</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;
            }

            products.forEach(product => {
                const row = document.createElement('tr');
                row.innerHTML = `
                    <td>${product.name}</td>
                    <td>€${parseFloat(product.price).toFixed(2)}</td>
                    <td>${parseFloat(product.discount || 0).toFixed(2)}%</td>
                    <td>${product.unit || 'vnt.'}</td>
                    <td>${parseFloat(product.vat_rate).toFixed(2)}%</td>
                    <td>
                        <div class="d-flex gap-2">
                            <button class="btn btn-sm btn-outline-info detail-btn" 
                                data-id="${product.id}">
                                <i class="bi bi-info-circle"></i>
                            </button>
                            <button class="btn btn-sm btn-outline-primary edit-btn" 
                                data-id="${product.id}">
                                <i class="bi bi-pencil"></i>
                            </button>
                            <button class="btn btn-sm btn-outline-danger delete-btn" 
                                data-id="${product.id}" data-name="${product.name}">
                                <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() {
                    showProductDetails(this.dataset.id);
                });
            });

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

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

        // 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();
                        loadProducts(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 produkto informaciją
        function showProductDetails(productId) {
            if (!productId || isNaN(productId)) {
                alert('Netinkamas produkto ID');
                return;
            }
            
            fetch(`/products/api/${productId}/`)
                .then(response => {
                    if (!response.ok) {
                        throw new Error('Produktas nerastas');
                    }
                    return response.json();
                })
                .then(product => {
                    const details = document.getElementById('productDetails');
                    details.innerHTML = `
                        <div class="row mb-4">
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Produkto pavadinimas</label>
                                <p class="form-control-static fw-bold">${product.name}</p>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Kaina</label>
                                <p class="form-control-static">€${parseFloat(product.price).toFixed(2)}</p>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Nuolaida</label>
                                <p class="form-control-static">${parseFloat(product.discount || 0).toFixed(2)}%</p>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Vnt.</label>
                                <p class="form-control-static">${product.unit || 'vnt.'}</p>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">PVM tarifas</label>
                                <p class="form-control-static">${parseFloat(product.vat_rate).toFixed(2)}%</p>
                            </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(product.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(product.updated_at).toLocaleString()}</p>
                                </div>
                            </div>
                        </div>
                    `;
                    detailModal.show();
                })
                .catch(error => {
                    console.error('Klaida įkeliant produkto informaciją:', error);
                    alert('Klaida įkeliant produkto informaciją: ' + error.message);
                });
        }

        // Redaguoti produktą
        function editProduct(productId) {
            if (!productId || isNaN(productId)) {
                alert('Netinkamas produkto ID');
                return;
            }
            
            fetch(`/products/api/${productId}/`)
                .then(response => {
                    if (!response.ok) {
                        throw new Error('Produktas nerastas');
                    }
                    return response.json();
                })
                .then(product => {
                    document.getElementById('modalTitle').textContent = `Redaguoti produktą: ${product.name}`;
                    document.getElementById('productId').value = product.id;
                    document.getElementById('name').value = product.name;
                    document.getElementById('price').value = product.price;
                    document.getElementById('discount').value = product.discount || '0';
                    document.getElementById('unit').value = product.unit || 'vnt.';
                    document.getElementById('vatRate').value = product.vat_rate || '0.0';
                    resetValidation();
                    
                    currentProductId = product.id;
                    productModal.show();
                })
                .catch(error => {
                    console.error('Klaida įkeliant produktą redagavimui:', error);
                    alert('Klaida įkeliant produktą redagavimui: ' + error.message);
                });
        }

        // Išsaugoti produktą
        function saveProduct() {
            // Reset validation
            resetValidation();
            
            // Form validation
            let isValid = true;
            const name = document.getElementById('name');
            const price = document.getElementById('price');
            
            if (!name.value.trim()) {
                name.classList.add('is-invalid');
                isValid = false;
            }
            
            if (!price.value || parseFloat(price.value) <= 0) {
                price.classList.add('is-invalid');
                isValid = false;
            }
            
            if (!isValid) {
                alert('Prašome užpildyti privalomus laukus teisingai');
                return;
            }

            const formData = {
                name: name.value,
                price: parseFloat(price.value),
                discount: parseFloat(document.getElementById('discount').value) || 0,
                unit: document.getElementById('unit').value,
                vat_rate: parseFloat(document.getElementById('vatRate').value) || 0.0
            };

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

            fetch(url, {
                method: method,
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRFToken': getCSRFToken()
                },
                body: JSON.stringify(formData)
            })
            .then(response => {
                if (response.ok) {
                    return response.json();
                } else {
                    return response.json().then(data => {
                        throw new Error(data.detail || 'Serverio klaida');
                    });
                }
            })
            .then(data => {
                productModal.hide();
                loadProducts(currentPage);
            })
            .catch(error => {
                console.error('Klaida:', error);
                alert('Klaida išsaugant produktą: ' + error.message);
            });
        }

        // Ištrinti produktą
        function deleteProduct(productId, productName) {
            if (!productId || isNaN(productId)) {
                alert('Netinkamas produkto ID');
                return;
            }
            
            if (!confirm(`Ar tikrai norite ištrinti produktą "${productName}"? Šio veiksmo negalima atšaukti.`)) {
                return;
            }

            fetch(`/products/api/${productId}/`, {
                method: 'DELETE',
                headers: {
                    'X-CSRFToken': getCSRFToken()
                }
            })
            .then(response => {
                if (response.ok) {
                    loadProducts(currentPage);
                } else {
                    throw new Error('Nepavyko ištrinti produkto');
                }
            })
            .catch(error => {
                console.error('Klaida:', error);
                alert('Klaida trinant produktą: ' + error.message);
            });
        }

        // Reset form validation
        function resetValidation() {
            document.getElementById('name').classList.remove('is-invalid');
            document.getElementById('price').classList.remove('is-invalid');
        }

        // 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;
    }
    .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;
    }
    
    /* Адаптивные стили */
    @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-6 {
            flex: 0 0 100%;
            max-width: 100%;
        }
        
        .actions-cell {
            min-width: auto;
        }
    }
</style>
{% endblock %}