{% extends 'base.html' %}

{% block page_title %}Sąskaitos{% endblock %}
{% load static %}
{% block content %}
<div class="card">
    <div class="card-header d-flex justify-content-between align-items-center">
        <h5 class="mb-0">Sąskaitos</h5>
        <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#paymentModal">Pridėti sąskaitą</button>
    </div>

    <!-- Фильтры -->
    <div class="card-header bg-light">
        <form method="get" class="row g-3">
            <!-- Строка 1: Статусы и поиск -->
            <div class="col-md-8">
                <div class="d-flex flex-wrap gap-2">
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" name="status" value="pending" id="statusPending"
                            {% if 'pending' in selected_statuses %} checked {% endif %}>
                        <label class="form-check-label" for="statusPending">Laukiama</label>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" name="status" value="paid" id="statusPaid"
                            {%if 'paid' in selected_statuses %} checked {% endif %}>
                        <label class="form-check-label" for="statusPaid">Apmokėta</label>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" name="status" value="overdue" id="statusOverdue"
                            {% if 'overdue' in selected_statuses %} checked {% endif %}>
                        <label class="form-check-label" for="statusOverdue">Vėluoja</label>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" name="status" value="cancelled"
                            id="statusCancelled" {% if 'cancelled' in selected_statuses %} checked {% endif %}>
                        <label class="form-check-label" for="statusCancelled">Atšaukta</label>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="input-group">
                    <input type="text" class="form-control" name="search" placeholder="Paieška..."
                        value="{{ request.GET.search }}">
                    <button class="btn btn-outline-primary" type="submit">
                        <i class="bi bi-search"></i>
                    </button>
                </div>
            </div>

            <!-- Строка 2: Клиент и даты -->
            <div class="col-md-4">
                <select class="form-select" name="client">
                    <option value="">Visi klientai</option>
                    {% for client in clients %}
                    <option value="{{ client.id }}">
                        {{ client.name }}
                    </option>
                    {% endfor %}
                </select>
            </div>
            <div class="col-md-4">
                <input type="date" class="form-control" name="date_start" value="{{ request.GET.date_start }}">
            </div>
            <div class="col-md-4">
                <input type="date" class="form-control" name="date_end" value="{{ request.GET.date_end }}">
            </div>

            <!-- Строка 3: Сумма и кнопки -->
            <div class="col-md-3">
                <input type="number" class="form-control" name="min_amount" placeholder="Min suma" step="0.01"
                    value="{{ request.GET.min_amount }}">
            </div>
            <div class="col-md-3">
                <input type="number" class="form-control" name="max_amount" placeholder="Max suma" step="0.01"
                    value="{{ request.GET.max_amount }}">
            </div>
            <div class="col-md-3">
                <button type="submit" class="btn btn-primary w-100">Filtruoti</button>
            </div>
            <div class="col-md-3">
                <a href="{% url 'payments_list' %}" class="btn btn-secondary w-100">Išvalyti</a>
            </div>
        </form>
    </div>
    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-hover">
                <thead>
                    <tr>
                        <th>Sąskaitos #</th>
                        <th>Klientas</th>
                        <th>Suma</th>
                        <th>Išrašymo data</th>
                        <th>Terminas</th>
                        <th>Apmokėjimo data</th>
                        <th style="min-width: 140px;">Būsena</th>
                        <th>Veiksmai</th>
                    </tr>
                </thead>
                <tbody>
                    {% for payment in payments %}
                    <tr data-id="{{ payment.id }}">
                        <td>{{ payment.invoice_number }}</td>
                        <td>{{ payment.client.name }}</td>
                        <td>€{{ payment.amount|floatformat:2 }}</td>
                        <td>{{ payment.date_issued|date:"Y-m-d" }}</td>
                        <td>{{ payment.date_due|date:"Y-m-d"| default:"-" }}</td>
                        <td>{{ payment.date_paid|date:"Y-m-d"|default:"-" }}</td>
                        <td>
                            <div class="dropdown">
                                {% if payment.status == 'paid' %}
                                <button class="btn btn-sm btn-success dropdown-toggle w-100" type="button"
                                    data-bs-toggle="dropdown" aria-expanded="false">
                                    Apmokėta
                                </button>
                                {% elif payment.status == 'pending' %}
                                <button class="btn btn-sm btn-warning dropdown-toggle w-100" type="button"
                                    data-bs-toggle="dropdown" aria-expanded="false">
                                    Laukiama
                                </button>
                                {% elif payment.status == 'overdue' %}
                                <button class="btn btn-sm btn-danger dropdown-toggle w-100" type="button"
                                    data-bs-toggle="dropdown" aria-expanded="false">
                                    Vėluoja
                                </button>
                                {% else %}
                                <button class="btn btn-sm btn-secondary dropdown-toggle w-100" type="button"
                                    data-bs-toggle="dropdown" aria-expanded="false">
                                    Atšaukta
                                </button>
                                {% endif %}
                                <ul class="dropdown-menu dropdown-menu-end">
                                    <li><a class="dropdown-item status-change" data-status="pending">Laukiama</a></li>
                                    <li><a class="dropdown-item status-change" data-status="paid">Apmokėta</a></li>
                                    <li><a class="dropdown-item status-change" data-status="overdue">Vėluoja</a></li>
                                    <li><a class="dropdown-item status-change" data-status="cancelled">Atšaukta</a></li>
                                </ul>
                            </div>
                        </td>
                        <td>
                            <div class="btn-group" role="group">
                                <button class="btn btn-sm btn-outline-primary edit-btn" data-id="{{ payment.id }}"
                                    title="Redaguoti">
                                    <i class="bi bi-pencil"></i>
                                </button>
                                <button class="btn btn-sm btn-outline-danger delete-btn" data-id="{{ payment.id }}"
                                    title="Ištrinti">
                                    <i class="bi bi-trash"></i>
                                </button>
                                <button class="btn btn-sm btn-outline-success preview-btn" 
        data-id="{{ payment.id }}" 
        data-company-name="{{ payment.client.name }}">
    <i class="bi bi-download"></i>
</button>
                                <button class="btn btn-sm btn-outline-info duplicate-btn" data-id="{{ payment.id }}"
                                    title="Sukurti dublikatą">
                                    <i class="bi bi-files"></i>
                                </button>
                            </div>
                        </td>
                    </tr>
                    {% empty %}
                    <tr>
                        <td colspan="8" class="text-center">Nėra mokėjimų</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>

        <!-- Информация о количестве записей -->
        <div class="text-center mb-3">
            Rodoma {{ payments.start_index }}–{{ payments.end_index }} iš {{ payments.paginator.count }} įrašų
        </div>

        <!-- Puslapiavimas -->
        <nav aria-label="Page navigation">
            <ul class="pagination justify-content-center">
                {% if payments.has_previous %}
                <li class="page-item">
                    <a class="page-link" href="?{{ filter_params }}&page=1" aria-label="First">
                        <span aria-hidden="true">&laquo;&laquo;</span>
                    </a>
                </li>
                <li class="page-item">
                    <a class="page-link" href="?{{ filter_params }}&page={{ payments.previous_page_number }}"
                        aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                </li>
                {% endif %}

                {% for num in payments.paginator.page_range %}
                {% if payments.number == num %}
                <li class="page-item active">
                    <a class="page-link" href="#">{{ num }}</a>
                </li>
                {% elif num > payments.number|add:'-3' and num < payments.number|add:'3' %} <li class="page-item">
                    <a class="page-link" href="?{{ filter_params }}&page={{ num }}">
                        {{ num }}
                    </a>
                    </li>
                    {% endif %}
                    {% endfor %}

                    {% if payments.has_next %}
                    <li class="page-item">
                        <a class="page-link" href="?{{ filter_params }}&page={{ payments.next_page_number }}"
                            aria-label="Next">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>
                    <li class="page-item">
                        <a class="page-link" href="?{{ filter_params }}&page={{ payments.paginator.num_pages }}"
                            aria-label="Last">
                            <span aria-hidden="true">&raquo;&raquo;</span>
                        </a>
                    </li>
                    {% endif %}
            </ul>
        </nav>
    </div>
</div>

<!-- Formos modalinis langas -->
<div class="modal fade" id="paymentModal" 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 sąskaitą</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Uždaryti"></button>
            </div>
            <form id="paymentForm" enctype="multipart/form-data">
                {% csrf_token %}
                <div class="modal-body">
                    <input type="hidden" id="paymentId">

                    <!-- Numeravimo šablonas (rodomas tik naujiems mokėjimams) -->
                    <div class="mb-3" id="templateField">
                        <label for="templateSelect" class="form-label">Numeravimo šablonas </label>
                        <select class="form-select" id="templateSelect">
                            <option value="" disabled selected>Kraunami šablonai...</option>
                        </select>
                    </div>

                    <!-- Kliento pasirinkimas su paieška -->
                    <div class="mb-3">
                        <label for="clientSelect" class="form-label">Klientas *</label>
                        <div class="input-group">
                            <input type="text" class="form-control" id="clientNameDisplay"
                                placeholder="Pasirinkite klientą" readonly required>
                            <button class="btn btn-outline-secondary" type="button" id="selectClientBtn">
                                <i class="bi bi-search"></i>
                            </button>
                        </div>
                        <input type="hidden" id="clientId">
                    </div>

                    <!-- Paveikslėlio įkėlimas -->
                    <div class="mb-3">
                        <label for="paymentImage" class="form-label">Paslaugos paveikslėlis (neprivaloma)</label>
                        <input type="file" class="form-control" id="paymentImage" accept="image/*">
                        <div id="imagePreview" class="mt-2"></div>
                    </div>

                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="dateIssued" class="form-label">Išrašymo data </label>
                            <input type="date" class="form-control" id="dateIssued" required
                                value="{{ day_today|date:'Y-m-d' }}">
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="dateDue" class="form-label">Terminas (neprivaloma)</label>
                            <input type="date" class="form-control" id="dateDue">
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="statusSelect" class="form-label">Būsena</label>
                            <select class="form-select" id="statusSelect">
                                <option value="pending" selected>Laukiama</option>
                                <option value="paid">Apmokėta</option>
                                <option value="overdue">Vėluoja</option>
                                <option value="cancelled">Atšaukta</option>
                            </select>
                        </div>
                        <div class="col-md-6 mb-3" id="datePaidContainer" style="display: none;">
                            <label for="datePaid" class="form-label">Apmokėjimo data</label>
                            <input type="date" class="form-control" id="datePaid">
                        </div>
                    </div>
                    <div class="mb-3">
                        <label for="description" class="form-label">Aprašymas</label>
                        <textarea class="form-control" id="description" rows="2"></textarea>
                    </div>

                    <h5 class="mt-4">Prekės/Paslaugos</h5>

                    <!-- Обертка для таблицы с фиксированными заголовком и подвалом -->
                    <div id="itemsTableContainer"
                        style="max-height: 50vh; overflow-y: auto; margin-bottom: 15px; border: 1px solid #dee2e6; border-radius: 0.25rem;">
                        <table class="table table-bordered" id="itemsTable" style="margin-bottom: 0;">
                            <thead>
                                <tr>
                                    <th
                                        style="position: sticky; top: 0; background: white; z-index: 10; box-shadow: 0 2px 2px -1px rgba(0,0,0,0.1);">
                                        Pavadinimas</th>
                                    <th
                                        style="position: sticky; top: 0; background: white; z-index: 10; box-shadow: 0 2px 2px -1px rgba(0,0,0,0.1);">
                                        Kiekis</th>
                                    <th
                                        style="position: sticky; top: 0; background: white; z-index: 10; box-shadow: 0 2px 2px -1px rgba(0,0,0,0.1);">
                                        Matas</th>
                                    <th
                                        style="position: sticky; top: 0; background: white; z-index: 10; box-shadow: 0 2px 2px -1px rgba(0,0,0,0.1);">
                                        Vnt. kaina</th>
                                    <th
                                        style="position: sticky; top: 0; background: white; z-index: 10; box-shadow: 0 2px 2px -1px rgba(0,0,0,0.1);">
                                        Nuolaida (%)</th>
                                    <th
                                        style="position: sticky; top: 0; background: white; z-index: 10; box-shadow: 0 2px 2px -1px rgba(0,0,0,0.1);">
                                        PVM (%)</th>
                                    <!-- Новый столбец для ввода итоговой суммы -->
                                    <th
                                        style="position: sticky; top: 0; background: white; z-index: 10; box-shadow: 0 2px 2px -1px rgba(0,0,0,0.1);">
                                        Iš viso (su PVM)</th>
                                    <th
                                        style="position: sticky; top: 0; background: white; z-index: 10; box-shadow: 0 2px 2px -1px rgba(0,0,0,0.1);">
                                    </th>
                                </tr>
                            </thead>
                            <tbody>
                                <!-- Eilutės bus pridėtos -->
                            </tbody>
                            <tfoot>
                                <tr>
                                    <td colspan="7" class="text-end fw-bold"
                                        style="position: sticky; bottom: 0; background: white; z-index: 10; box-shadow: 0 -2px 2px -1px rgba(0,0,0,0.1);">
                                        Bendra suma</td>
                                    <td class="fw-bold" id="grandTotal"
                                        style="position: sticky; bottom: 0; background: white; z-index: 10; box-shadow: 0 -2px 2px -1px rgba(0,0,0,0.1);">
                                        €0.00</td>
                                    <td
                                        style="position: sticky; bottom: 0; background: white; z-index: 10; box-shadow: 0 -2px 2px -1px rgba(0,0,0,0.1);">
                                    </td>
                                </tr>
                            </tfoot>
                        </table>
                    </div>

                    <div class="d-flex">
                        <button type="button" class="btn btn-sm btn-outline-primary" id="addItem">
                            <i class="bi bi-plus-circle"></i> Pridėti prekę
                        </button>
                        <button type="button" class="btn btn-sm btn-outline-success ms-2" id="addExistingItem">
                            <i class="bi bi-plus-circle"></i> Pridėti esamą prekę
                        </button>
                    </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 sąskaitą</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Ištrynimo patvirtinimo langas -->
<div class="modal fade" id="deleteModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Ištrynimo patvirtinimas</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Uždaryti"></button>
            </div>
            <div class="modal-body">
                <p>Ar tikrai norite ištrinti šį mokėjimą? Šio veiksmo negalima atšaukti.</p>
                <input type="hidden" id="deleteId">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Atšaukti</button>
                <button type="button" class="btn btn-danger" id="confirmDelete">Ištrinti</button>
            </div>
        </div>
    </div>
</div>

<!-- PDF Preview Modal -->
<div class="modal fade" id="pdfPreviewModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Sąskaitos peržiūra</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Uždaryti"></button>
            </div>
            <div class="modal-body">
                <iframe id="pdfPreviewFrame" style="width:100%; height:75vh; border:none;"></iframe>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Atšaukti</button>
                <!-- Изменяем кнопку в модальном окне PDF -->
                <button type="button" class="btn btn-primary" id="confirmDownload" data-id="">
                    Atsisiųsti PDF
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Modal for existing products -->
<div class="modal fade" id="productsModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Pasirinkite prekę</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Uždaryti"></button>
            </div>
            <div class="modal-body">
                <!-- Поисковая строка -->
                <div class="mb-3">
                    <div class="input-group">
                        <input type="text" class="form-control" id="productSearchInput"
                            placeholder="Ieškoti pagal pavadinimą...">
                        <button class="btn btn-primary" type="button" id="productSearchButton">
                            <i class="bi bi-search"></i>
                        </button>
                    </div>
                </div>

                <!-- Таблица товаров -->
                <div style="max-height: 50vh; overflow-y: auto;">
                    <table class="table table-hover" id="productsTable">
                        <thead>
                            <tr>
                                <th>Pavadinimas</th>
                                <th>Kaina</th>
                                <th>Vienetas</th>
                                <th>PVM (%)</th>
                                <th>Nuolaida (%)</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody>
                            <!-- Products will be loaded here -->
                        </tbody>
                    </table>
                </div>

                <!-- Пагинация -->
                <nav aria-label="Product pagination" class="mt-3">
                    <ul class="pagination justify-content-center" id="productsPagination">
                        <!-- Кнопки пагинации будут добавлены динамически -->
                    </ul>
                </nav>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Atšaukti</button>
            </div>
        </div>
    </div>
</div>

<!-- Modal for clients selection -->
<div class="modal fade" id="clientsModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header d-flex justify-content-between align-items-center">
                <h5 class="modal-title">Pasirinkite klientą</h5>
                <div>
                    <button class="btn btn-outline-primary me-2" id="addNewClientBtn">
                        <i class="bi bi-plus-circle"></i> Pridėti klientą
                    </button>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Uždaryti"></button>
                </div>
            </div>
            <div class="modal-body">
                <!-- Search input -->
                <div class="mb-3">
                    <div class="input-group">
                        <input type="text" class="form-control" id="clientSearchInput"
                            placeholder="Ieškoti pagal pavadinimą, kontaktą ar el. paštą...">
                        <button class="btn btn-primary" type="button" id="clientSearchButton">
                            <i class="bi bi-search"></i>
                        </button>
                    </div>
                </div>

                <!-- Clients table -->
                <div style="max-height: 50vh; overflow-y: auto;">
                    <table class="table table-hover" id="clientsTable">
                        <thead>
                            <tr>
                                <th>Pavadinimas</th>
                                <th>Kontaktinis asmuo</th>
                                <th>El. paštas</th>
                                <th>Telefonas</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody>
                            <!-- Clients will be loaded here -->
                        </tbody>
                    </table>
                </div>

                <!-- Pagination -->
                <nav aria-label="Client pagination" class="mt-3">
                    <ul class="pagination justify-content-center" id="clientsPagination">
                        <!-- Pagination buttons will be added dynamically -->
                    </ul>
                </nav>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Atšaukti</button>
            </div>
        </div>
    </div>
</div>

<!-- Modal for adding new client -->
<div class="modal fade" id="clientAddModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Pridėti naują klientą</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Uždaryti"></button>
            </div>
            <form id="clientAddForm">
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="clientName" class="form-label">Pavadinimas *</label>
                        <input type="text" class="form-control" id="clientName" required>
                    </div>
                    <div class="mb-3">
                        <label for="clientContact" class="form-label">Kontaktinis asmuo</label>
                        <input type="text" class="form-control" id="clientContact">
                    </div>
                    <div class="mb-3">
                        <label for="clientEmail" class="form-label">El. paštas</label>
                        <input type="email" class="form-control" id="clientEmail">
                    </div>
                    <div class="mb-3">
                        <label for="clientPhone" class="form-label">Telefonas</label>
                        <input type="tel" class="form-control" id="clientPhone">
                    </div>
                    <!-- ДОБАВЬТЕ ЭТИ ПОЛЯ -->
                    <div class="mb-3">
                        <label for="clientAddress" class="form-label">Adresas</label>
                        <textarea class="form-control" id="clientAddress" rows="2"></textarea>
                    </div>
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="clientVatCode" class="form-label">PVM kodas</label>
                            <input type="text" class="form-control" id="clientVatCode">
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="clientRegNumber" class="form-label">Įmonės kodas</label>
                            <input type="text" class="form-control" id="clientRegNumber">
                        </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>

<!-- Modal for invoice number input -->
<div class="modal fade" id="invoiceNumberModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Sąskaitos numeris</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Uždaryti"></button>
            </div>
            <div class="modal-body">
                <div class="mb-3">
                    <label for="invoiceNumberInput" class="form-label">Įveskite sąskaitos numerį</label>
                    <input type="text" class="form-control" id="invoiceNumberInput" placeholder="SF2023-001">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Atšaukti</button>
                <button type="button" class="btn btn-primary" id="confirmInvoiceNumber">Gerai</button>
            </div>
        </div>
    </div>
</div>
<style>
    .input-group{
    position: relative;
    display: flex
;
flex-wrap: nowrap;
    align-items: stretch;
    width: 100%;}
</style>
<script>
    let currentPreviewCompanyName = null;

    let numberingTemplatesCache = [];
    let currentPreviewPaymentId = null;
    let defaultInvoiceNumber = '';
    const companyName = "{{ company_name|default:'Faktura' }}";

    document.addEventListener('DOMContentLoaded', function () {
        const paymentModal = new bootstrap.Modal(document.getElementById('paymentModal'));
        const deleteModal = new bootstrap.Modal(document.getElementById('deleteModal'));
        const pdfPreviewModal = new bootstrap.Modal(document.getElementById('pdfPreviewModal'));
        const productsModal = new bootstrap.Modal(document.getElementById('productsModal'));
        const clientsModal = new bootstrap.Modal(document.getElementById('clientsModal'));
        const clientAddModal = new bootstrap.Modal(document.getElementById('clientAddModal'));
        const invoiceNumberModal = new bootstrap.Modal(document.getElementById('invoiceNumberModal'));

        let currentPaymentId = null;
        let numberingTemplatesCache = [];
        let currentPreviewPaymentId = null;
        let defaultInvoiceNumber = '';

        // =============== ОБРАБОТЧИКИ СОБЫТИЙ ===============

        // Изменение статуса
        document.querySelectorAll('.status-change').forEach(item => {
            item.addEventListener('click', function (e) {
                e.preventDefault();
                const newStatus = this.dataset.status;
                const paymentId = this.closest('tr').dataset.id;
                updatePaymentStatus(paymentId, newStatus);
            });
        });

        // Редактирование платежа
        document.querySelectorAll('.edit-btn').forEach(btn => {
            btn.addEventListener('click', function () {
                const paymentId = this.dataset.id;
                const button = this;
                button.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Kraunasi...';
                button.disabled = true;
                loadPaymentData(paymentId).then(() => {
                    button.innerHTML = '<i class="bi bi-pencil"></i>';
                    button.disabled = false;
                }).catch(error => {
                    console.error('Klaida:', error);
                    button.innerHTML = '<i class="bi bi-pencil"></i>';
                    button.disabled = false;
                    alert('Klaida įkeliant mokėjimo duomenis');
                });
            });
        });

        // Удаление платежа
        document.querySelectorAll('.delete-btn').forEach(btn => {
            btn.addEventListener('click', function () {
                showDeleteModal(this.dataset.id);
            });
        });

        // Предпросмотр PDF
        document.querySelectorAll('.preview-btn').forEach(btn => {
    btn.addEventListener('click', function () {
        const paymentId = this.dataset.id;
        const companyName = this.dataset.companyName;  // Получаем имя клиента
        const row = this.closest('tr');
        defaultInvoiceNumber = row.querySelector('td:first-child').textContent.trim();
        document.getElementById('invoiceNumberInput').value = defaultInvoiceNumber;
        currentPreviewPaymentId = paymentId;
        currentPreviewCompanyName = companyName;  // Сохраняем имя клиента
        invoiceNumberModal.show();
    });
});

        // Дублирование платежа
        document.querySelectorAll('.duplicate-btn').forEach(btn => {
            btn.addEventListener('click', function () {
                duplicatePayment(this.dataset.id);
            });
        });

        // Подтверждение номера счета для предпросмотра
        document.getElementById('confirmInvoiceNumber').addEventListener('click', function () {
            const customInvoiceNumber = document.getElementById('invoiceNumberInput').value.trim();
            if (!customInvoiceNumber) {
                alert('Prašome įvesti sąskaitos numerį');
                return;
            }
            invoiceNumberModal.hide();
            previewPaymentPDF(currentPreviewPaymentId, customInvoiceNumber);
        });

        // Основные элементы управления
        document.getElementById('addItem').addEventListener('click', addItemRow);
        document.getElementById('addExistingItem').addEventListener('click', showProductsModal);
        document.getElementById('confirmDelete').addEventListener('click', deletePayment);
        document.getElementById('paymentForm').addEventListener('submit', savePayment);
        document.getElementById('confirmDownload').addEventListener('click', function () {
            const paymentId = this.dataset.id;
            downloadPaymentPDF(paymentId);
            pdfPreviewModal.hide();
        });

        // Превью изображения
        document.getElementById('paymentImage').addEventListener('change', function (e) {
            const preview = document.getElementById('imagePreview');
            preview.innerHTML = '';
            if (this.files && this.files[0]) {
                const reader = new FileReader();
                reader.onload = function (e) {
                    const img = document.createElement('img');
                    img.src = e.target.result;
                    img.classList.add('img-thumbnail');
                    img.style.maxWidth = '200px';
                    preview.appendChild(img);
                }
                reader.readAsDataURL(this.files[0]);
            }
        });

        // Обработка статуса
        document.getElementById('statusSelect').addEventListener('change', function () {
            const datePaidContainer = document.getElementById('datePaidContainer');
            if (this.value === 'paid') {
                datePaidContainer.style.display = 'block';
                if (!document.getElementById('datePaid').value) {
                    const today = new Date().toISOString().split('T')[0];
                    document.getElementById('datePaid').value = today;
                }
            } else {
                datePaidContainer.style.display = 'none';
            }
        });

        // Клиенты
        document.getElementById('clientNameDisplay').addEventListener('click', function () {
            loadClients(1, '');
            clientsModal.show();
        });

        document.getElementById('clientSearchButton').addEventListener('click', function () {
            const searchValue = document.getElementById('clientSearchInput').value;
            loadClients(1, searchValue);
        });

        document.getElementById('clientSearchInput').addEventListener('keyup', function (e) {
            if (e.key === 'Enter') {
                loadClients(1, this.value);
            }
        });

        document.getElementById('addNewClientBtn').addEventListener('click', function () {
            clientAddModal.show();
        });

        document.getElementById('clientAddForm').addEventListener('submit', function (e) {
            e.preventDefault();
            saveNewClient();
        });

        // Поиск товаров
        document.getElementById('productSearchButton').addEventListener('click', function () {
            const searchValue = document.getElementById('productSearchInput').value;
            loadProducts(1, searchValue);
        });

        document.getElementById('productSearchInput').addEventListener('keyup', function (e) {
            if (e.key === 'Enter') {
                loadProducts(1, this.value);
            }
        });

        // Добавление начальной строки товара
        addItemRow();

        // =============== ОСНОВНЫЕ ФУНКЦИИ ===============

        // Обновление статуса платежа
        function updatePaymentStatus(paymentId, newStatus) {
            const csrfToken = getCSRFToken();
            const data = {
                status: newStatus
            };

            if (newStatus === 'paid') {
                const today = new Date().toISOString().split('T')[0];
                data.date_paid = today;
            }
            else if (newStatus === 'pending' || newStatus === 'cancelled') {
                data.date_paid = null;
            }

            fetch(`/invoice/api/${paymentId}/`, {
                method: 'PUT',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRFToken': csrfToken
                },
                body: JSON.stringify(data)
            })
                .then(response => {
                    if (response.ok) {
                        location.reload();
                    } else {
                        response.json().then(err => {
                            alert('Klaida atnaujinant statusą: ' + JSON.stringify(err));
                        });
                    }
                })
                .catch(error => {
                    console.error('Klaida:', error);
                    alert('Serverio klaida atnaujinant statusą');
                });
        }

        // Дублирование платежа
        function duplicatePayment(paymentId) {
            const csrfToken = getCSRFToken();
            const button = document.querySelector(`.duplicate-btn[data-id="${paymentId}"]`);
            const originalHTML = button.innerHTML;
            button.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>';
            button.disabled = true;

            fetch(`/invoice/api/duplicate/${paymentId}/`, {
                method: 'POST',
                headers: {
                    'X-CSRFToken': csrfToken
                }
            })
                .then(response => {
                    if (response.ok) {
                        showToast('Sėkmė', 'Mokėjimas sėkmingai dubliuotas', 'success');
                        setTimeout(() => location.reload(), 1000);
                    } else {
                        throw new Error('Nepavyko sukurti dublikato');
                    }
                })
                .catch(error => {
                    console.error('Klaida:', error);
                    showToast('Klaida', 'Nepavyko sukurti dublikato', 'danger');
                })
                .finally(() => {
                    button.innerHTML = originalHTML;
                    button.disabled = false;
                });
        }

        // Показать уведомление
        function showToast(title, message, type) {
            let toastContainer = document.getElementById('toast-container');
            if (!toastContainer) {
                toastContainer = document.createElement('div');
                toastContainer.id = 'toast-container';
                toastContainer.style.position = 'fixed';
                toastContainer.style.top = '20px';
                toastContainer.style.right = '20px';
                toastContainer.style.zIndex = '1060';
                toastContainer.style.minWidth = '300px';
                document.body.appendChild(toastContainer);
            }

            const toastId = `toast-${Date.now()}`;
            const toast = document.createElement('div');
            toast.id = toastId;
            toast.className = `toast align-items-center text-white bg-${type} border-0`;
            toast.setAttribute('role', 'alert');
            toast.setAttribute('aria-live', 'assertive');
            toast.setAttribute('aria-atomic', 'true');
            toast.style.marginBottom = '10px';

            toast.innerHTML = `
            <div class="d-flex">
                <div class="toast-body">
                    <strong>${title}</strong><br>${message}
                </div>
                <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Uždaryti"></button>
            </div>
        `;

            toastContainer.appendChild(toast);
            const bsToast = new bootstrap.Toast(toast, {
                autohide: true,
                delay: 3000
            });
            bsToast.show();
            toast.addEventListener('hidden.bs.toast', function () {
                toast.remove();
            });
        }

        // Добавление строки товара
        function addItemRow(item = {}) {
            const tbody = document.querySelector('#itemsTable tbody');
            const row = document.createElement('tr');
            row.innerHTML = `
                <td><input type="text" class="form-control item-name" value="${item.name || ''}" required></td>
                <td><input type="number" class="form-control item-quantity" min="1" value="${item.quantity || 1}" required></td>
                <td><input type="text" class="form-control item-unit" value="${item.unit || 'vnt.'}" required></td>
                <td><input type="number" class="form-control item-unit-price" min="0.01" step="0.01" value="${item.unit_price || ''}" required></td>
                <td><input type="number" class="form-control item-discount" min="0" max="100" value="${item.discount || 0}"></td>
                <td><input type="number" class="form-control item-vat" min="0" max="100" value="${item.vat || 21}"></td>
                <!-- Новое поле для ввода итоговой суммы с розовым фоном -->
                <td>
                    <div class="input-group">
                        <span class="input-group-text bg-pink text-black">€</span>
                        <input type="number" class="form-control item-total-input" min="0.01" step="0.01" 
                               value="${item.total ? parseFloat(item.total).toFixed(2) : '0.00'}" 
                               >
                    </div>
                </td>
                <td><button type="button" class="btn btn-sm btn-danger remove-item"><i class="bi bi-trash"></i></button></td>
            `;
            tbody.appendChild(row);

            row.querySelector('.remove-item').addEventListener('click', () => row.remove());
            
            // Обработчики для обычных полей
            ['input', 'change'].forEach(event => {
                row.querySelectorAll('.item-quantity, .item-unit-price, .item-discount, .item-vat').forEach(input => {
                    input.addEventListener(event, calculateRowTotal);
                });
            });
            
            // Обработчик для поля итоговой суммы
            row.querySelector('.item-total-input').addEventListener('input', calculateUnitPriceFromTotal);
            row.querySelector('.item-total-input').addEventListener('blur', function() {
                calculateRowTotal({ target: this });
            });

            // Инициализируем расчет для новой строки
            calculateRowTotal({ target: row.querySelector('.item-quantity') });
        }

        // Расчет суммы строки
        function calculateRowTotal(e) {
            const row = e.target.closest('tr');
            if (!row) return;
            
            const qty = parseFloat(row.querySelector('.item-quantity').value) || 0;
            const price = parseFloat(row.querySelector('.item-unit-price').value) || 0;
            const discount = parseFloat(row.querySelector('.item-discount').value) || 0;
            const vat = parseFloat(row.querySelector('.item-vat').value) || 0;
            const totalInput = row.querySelector('.item-total-input');

            let total = qty * price;
            if (discount) total -= total * discount / 100;
            if (vat) total += total * vat / 100;

            // Обновляем поле ввода итоговой суммы
            totalInput.value = total.toFixed(2);
            updateGrandTotal();
        }

        // Новая функция: Пересчет цены за единицу из итоговой суммы
        function calculateUnitPriceFromTotal(e) {
            const row = e.target.closest('tr');
            if (!row) return;
            
            const totalInput = row.querySelector('.item-total-input');
            const qtyInput = row.querySelector('.item-quantity');
            const discountInput = row.querySelector('.item-discount');
            const vatInput = row.querySelector('.item-vat');
            const unitPriceInput = row.querySelector('.item-unit-price');
            
            const totalValue = parseFloat(totalInput.value) || 0;
            const quantity = parseFloat(qtyInput.value) || 1;
            const discount = parseFloat(discountInput.value) || 0;
            const vat = parseFloat(vatInput.value) || 0;
            
            // Формула расчета цены за единицу:
            // total = quantity * unit_price * (1 - discount/100) * (1 + vat/100)
            // => unit_price = total / [quantity * (1 - discount/100) * (1 + vat/100)]
            
            if (totalValue > 0 && quantity > 0) {
                const discountFactor = (1 - discount / 100);
                const vatFactor = (1 + vat / 100);
                const unitPrice = totalValue / (quantity * discountFactor * vatFactor);
                
                unitPriceInput.value = unitPrice.toFixed(2);
            }
            
            // Обновляем общую сумму
            updateGrandTotal();
        }

        // Обновление общей суммы
        function updateGrandTotal() {
            let grandTotal = 0;
            document.querySelectorAll('.item-total-input').forEach(input => {
                const value = parseFloat(input.value) || 0;
                grandTotal += value;
            });
            document.getElementById('grandTotal').textContent = '€' + grandTotal.toFixed(2);
        }

        // Загрузка данных платежа
        function loadPaymentData(paymentId) {
            return new Promise((resolve, reject) => {
                currentPaymentId = paymentId;
                loadNumberingTemplates().then(() => {
                    document.querySelector('#itemsTable tbody').innerHTML = '<tr><td colspan="8" class="text-center">Kraunami mokėjimo duomenys...</td></tr>';
                    fetch(`/invoice/api/payment/${paymentId}`)
                        .then(response => {
                            if (!response.ok) throw new Error('Nepavyko įkelti mokėjimo duomenų');
                            return response.json();
                        })
                        .then(paymentData => {
                            console.log(paymentData)
                            fillPaymentForm(paymentData);
                            paymentModal.show();
                            resolve();
                        })
                        .catch(error => reject(error));
                }).catch(error => reject(error));
            });
        }

        // Заполнение формы платежа
        function fillPaymentForm(paymentData) {
            document.getElementById('modalTitle').textContent = 'Redaguoti mokėjimą';
            document.getElementById('clientNameDisplay').value = paymentData.client_name || '';
            document.getElementById('clientId').value = paymentData.client || '';
            document.getElementById('dateIssued').value = paymentData.date_issued || '';
            document.getElementById('dateDue').value = paymentData.date_due || '';
            document.getElementById('datePaid').value = paymentData.date_paid || '';
            document.getElementById('statusSelect').value = paymentData.status;
            document.getElementById('description').value = paymentData.description || '';
            document.getElementById('paymentId').value = paymentData.id;

            // Показываем поле шаблона
            document.getElementById('templateField').style.display = 'block';
            if (paymentData.template) {
                document.getElementById('templateSelect').value = paymentData.template;
            }

            // Обновляем статус
            const statusChangeEvent = new Event('change');
            document.getElementById('statusSelect').dispatchEvent(statusChangeEvent);

            // Превью изображения с кнопкой удаления
            const preview = document.getElementById('imagePreview');
            preview.innerHTML = '';
            if (paymentData.image) {
                const imgContainer = document.createElement('div');
                imgContainer.style.position = 'relative';
                imgContainer.style.display = 'inline-block';

                const img = document.createElement('img');
                img.src = paymentData.image;
                img.classList.add('img-thumbnail');
                img.style.maxWidth = '200px';
                imgContainer.appendChild(img);

                // Кнопка удаления изображения
                const deleteBtn = document.createElement('button');
                deleteBtn.type = 'button';
                deleteBtn.classList.add('btn', 'btn-danger', 'btn-sm');
                deleteBtn.style.position = 'absolute';
                deleteBtn.style.top = '5px';
                deleteBtn.style.right = '5px';
                deleteBtn.innerHTML = '<i class="bi bi-trash"></i>';
                deleteBtn.onclick = () => deletePaymentImage(paymentData.id);
                imgContainer.appendChild(deleteBtn);

                preview.appendChild(imgContainer);
            }

            // Заполняем таблицу товаров
            document.querySelector('#itemsTable tbody').innerHTML = '';
            if (paymentData.items && Array.isArray(paymentData.items)) {
                paymentData.items.forEach(item => {
                    addItemRow({
                        name: item.name || '',
                        quantity: item.quantity || 1,
                        unit: item.unit || 'vnt.',
                        unit_price: item.unit_price || 0,
                        discount: item.discount || 0,
                        vat: item.vat,
                        total: item.total || 0
                    });
                });
            }

            if (!paymentData.items || paymentData.items.length === 0) {
                addItemRow();
            }
            updateGrandTotal();
        }

        // Удаление изображения платежа
        function deletePaymentImage(paymentId) {
            if (!confirm('Ar tikrai norite pašalinti paveikslėlį?')) return;

            const csrfToken = getCSRFToken();

            fetch(`/invoice/api/${paymentId}/image/`, {
                method: 'DELETE',
                headers: {
                    'X-CSRFToken': csrfToken
                }
            })
                .then(response => {
                    if (response.ok) {
                        // Очищаем превью
                        document.getElementById('imagePreview').innerHTML = '';
                        // Сбрасываем поле выбора файла
                        document.getElementById('paymentImage').value = '';
                        showToast('Sėkmė', 'Paveikslėlis sėkmingai pašalintas', 'success');
                    } else {
                        response.json().then(data => {
                            showToast('Klaida', data.detail || 'Nepavyko pašalinti paveikslėlio', 'danger');
                        });
                    }
                })
                .catch(error => {
                    console.error('Klaida:', error);
                    showToast('Klaida', 'Serverio klaida', 'danger');
                });
        }

        // Предпросмотр PDF
        function previewPaymentPDF(paymentId, invoiceNumber = '') {
            document.getElementById('confirmDownload').dataset.id = paymentId;
            const frame = document.getElementById('pdfPreviewFrame');
            frame.src = '';
            pdfPreviewModal.show();

            document.getElementById('pdfPreviewModal').addEventListener('shown.bs.modal', function () {
                let url = `/payment/${paymentId}/pdf/?preview=1`;
                if (invoiceNumber) {
                    url += `&invoice_number=${encodeURIComponent(invoiceNumber)}`;
                }
                frame.src = url;
            });
        }

        // Скачивание PDF
        function downloadPaymentPDF(paymentId) {
    const companyName = currentPreviewCompanyName || 'Faktura';
    const safeCompanyName = companyName
        .replace(/[^\w\sąčęėįšųūžĄČĘĖĮŠŲŪŽ]/g, '')
        .replace(/\s+/g, '_')
        .substring(0, 50);

    const filename = `${safeCompanyName} Faktūra.pdf`;

    const a = document.createElement('a');
    a.href = `/payment/${paymentId}/pdf/?download=1`;
    a.download = filename;
    a.style.display = 'none';
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
}

        // Показать модальное окно удаления
        function showDeleteModal(paymentId) {
            document.getElementById('deleteId').value = paymentId;
            deleteModal.show();
        }

        // Показать модальное окно товаров
        function showProductsModal() {
            loadProducts(1, '');
            productsModal.show();
        }

        // Загрузка товаров
        function loadProducts(page = 1, search = '') {
            const tbody = document.querySelector('#productsTable tbody');
            tbody.innerHTML = '<tr><td colspan="6" class="text-center">Kraunami produktai...</td></tr>';

            fetch(`/products/api/?page=${page}&search=${encodeURIComponent(search)}`)
                .then(response => {
                    if (!response.ok) throw new Error('Nepavyko įkelti produktų');
                    return response.json();
                })
                .then(data => {
                    tbody.innerHTML = '';
                    data.results.forEach(product => {
                        const row = document.createElement('tr');
                        row.innerHTML = `
                        <td>${product.name}</td>
                        <td>€${parseFloat(product.price).toFixed(2)}</td>
                        <td>${product.unit}</td>
                        <td>${product.vat_rate}</td>
                        <td>${product.discount || 0}</td>
                        <td>
                            <button type="button" class="btn btn-sm btn-primary add-product-btn" data-product='${JSON.stringify(product).replace(/'/g, "&quot;")}'>
                                Pridėti
                            </button>
                        </td>
                    `;
                        tbody.appendChild(row);
                    });

                    document.querySelectorAll('.add-product-btn').forEach(btn => {
                        btn.addEventListener('click', function () {
                            const product = JSON.parse(this.dataset.product.replace(/&quot;/g, '"'));
                            addProductToInvoiceTable(product);
                            productsModal.hide();
                        });
                    });
                    updateProductsPagination(data, search);
                })
                .catch(error => {
                    console.error('Klaida:', error);
                    tbody.innerHTML = '<tr><td colspan="6" class="text-center text-danger">Klaida įkeliant produktus</td></tr>';
                });
        }

        // Обновление пагинации товаров
        function updateProductsPagination(data, search = '') {
            const pagination = document.getElementById('productsPagination');
            pagination.innerHTML = '';
            const totalPages = data.total_pages;
            const currentPage = data.current_page;

            if (totalPages <= 1) return;

            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;
                a.dataset.page = page;

                if (!isDisabled && !isActive) {
                    a.addEventListener('click', (e) => {
                        e.preventDefault();
                        loadProducts(page, search);
                    });
                }
                li.appendChild(a);
                return li;
            };

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

            let startPage = Math.max(2, currentPage - 2);
            let endPage = Math.min(totalPages - 1, currentPage + 2);

            if (startPage > 2) {
                pagination.appendChild(createPageItem(startPage - 1, '...', false, true));
            }

            for (let i = startPage; i <= endPage; i++) {
                pagination.appendChild(createPageItem(i, i, i === currentPage));
            }

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

            if (totalPages > 1 && endPage < totalPages) {
                pagination.appendChild(createPageItem(totalPages, totalPages, totalPages === currentPage));
            }

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

        // Добавление товара в таблицу
        function addProductToInvoiceTable(product) {
            const item = {
                name: product.name,
                quantity: 1,
                unit: product.unit,
                unit_price: product.price,
                discount: product.discount || 0,
                vat: product.vat_rate
            };
            addItemRow(item);
        }

        // Загрузка шаблонов нумерации
        function loadNumberingTemplates() {
            return new Promise((resolve, reject) => {
                fetch('/settings/api/numbering-templates')
                    .then(response => {
                        if (!response.ok) throw new Error('Nepavyko įkelti šablonų');
                        return response.json();
                    })
                    .then(templates => {
                        numberingTemplatesCache = templates;
                        updateTemplateSelect(templates.results);
                        resolve(templates);
                    })
                    .catch(error => {
                        console.error('Klaida:', error);
                        reject(error);
                    });
            });
        }

        // Обновление выбора шаблона
        function updateTemplateSelect(templates) {
            const select = document.getElementById('templateSelect');
            select.innerHTML = '<option value="" disabled selected>Pasirinkite šabloną</option>';
            templates.forEach(template => {
                const option = document.createElement('option');
                option.value = template.id;
                option.textContent = template.name;
                select.appendChild(option);
            });
        }

        // Загрузка клиентов
        function loadClients(page = 1, search = '') {
            const tbody = document.querySelector('#clientsTable tbody');
            tbody.innerHTML = '<tr><td colspan="5" class="text-center">Kraunami klientai...</td></tr>';

            fetch(`/partners/api/?page=${page}&search=${encodeURIComponent(search)}`)
                .then(response => {
                    if (!response.ok) throw new Error('Nepavyko įkelti klientų');
                    return response.json();
                })
                .then(data => {
                    tbody.innerHTML = '';
                    data.results.forEach(client => {
                        const row = document.createElement('tr');
                        row.innerHTML = `
                        <td>${client.name || '-'}</td>
                        <td>${client.contact_person || '-'}</td>
                        <td>${client.email || '-'}</td>
                        <td>${client.phone || '-'}</td>
                        <td>
                            <button type="button" class="btn btn-sm btn-primary select-client-btn" 
                                    data-id="${client.id}" data-name="${client.name || 'Klientas'}">
                                Pasirinkti
                            </button>
                        </td>
                    `;
                        tbody.appendChild(row);
                    });

                    document.querySelectorAll('.select-client-btn').forEach(btn => {
                        btn.addEventListener('click', function () {
                            const clientId = this.dataset.id;
                            const clientName = this.dataset.name;
                            document.getElementById('clientNameDisplay').value = clientName;
                            document.getElementById('clientId').value = clientId;
                            clientsModal.hide();
                        });
                    });
                    updateClientsPagination(data, search);
                })
                .catch(error => {
                    console.error('Klaida:', error);
                    tbody.innerHTML = '<tr><td colspan="5" class="text-center text-danger">Klaida įkeliant klientus</td></tr>';
                });
        }

        // Обновление пагинации клиентов
        function updateClientsPagination(data, search = '') {
            const pagination = document.getElementById('clientsPagination');
            pagination.innerHTML = '';
            const totalPages = data.total_pages;
            const currentPage = data.current_page;

            if (totalPages <= 1) return;

            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;
                a.dataset.page = page;

                if (!isDisabled && !isActive) {
                    a.addEventListener('click', (e) => {
                        e.preventDefault();
                        loadClients(page, search);
                    });
                }
                li.appendChild(a);
                return li;
            };

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

            let startPage = Math.max(2, currentPage - 2);
            let endPage = Math.min(totalPages - 1, currentPage + 2);

            if (startPage > 2) {
                pagination.appendChild(createPageItem(startPage - 1, '...', false, true));
            }

            for (let i = startPage; i <= endPage; i++) {
                pagination.appendChild(createPageItem(i, i, i === currentPage));
            }

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

            if (totalPages > 1) {
                pagination.appendChild(createPageItem(totalPages, totalPages, totalPages === currentPage));
            }

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

        // Сохранение нового клиента
        function saveNewClient() {
            const formData = {
                name: document.getElementById('clientName').value,
                contact_person: document.getElementById('clientContact').value || '',
                email: document.getElementById('clientEmail').value || '',
                phone: document.getElementById('clientPhone').value || '',
                address: document.getElementById('clientAddress').value || '',
                vat_code: document.getElementById('clientVatCode').value || '',
                registration_number: document.getElementById('clientRegNumber').value || ''
            };

            if (!formData.name) {
                alert('Kliento pavadinimas yra privalomas');
                return;
            }

            fetch('/partners/api/', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRFToken': getCSRFToken()
                },
                body: JSON.stringify(formData)
            })
                .then(response => {
                    if (response.ok) {
                        return response.json();
                    }
                    throw new Error('Nepavyko išsaugoti kliento');
                })
                .then(client => {
                    document.getElementById('clientNameDisplay').value = client.name;
                    document.getElementById('clientId').value = client.id;
                    clientAddModal.hide();
                    clientsModal.hide();
                    showToast('Sėkmė', 'Klientas sėkmingai pridėtas', 'success');
                })
                .catch(error => {
                    console.error('Klaida:', error);
                    alert('Klaida išsaugant klientą: ' + error.message);
                });
        }

        // Сохранение платежа
        function savePayment(e) {
            e.preventDefault();

            if (!document.getElementById('dateIssued').value) {
                const today = new Date().toISOString().split('T')[0];
                document.getElementById('dateIssued').value = today;
            }

            const errors = validatePaymentForm();
            if (errors.length > 0) {
                alert('Klaidos:\n' + errors.join('\n'));
                return;
            }

            const formData = new FormData();
            const csrfToken = getCSRFToken();
            formData.append('csrfmiddlewaretoken', csrfToken);

            // Шаблон
            const templateId = document.getElementById('templateSelect').value;
            if (templateId) {
                formData.append('template', templateId);
            }

            // Основные данные
            formData.append('client', document.getElementById('clientId').value);
            formData.append('date_issued', document.getElementById('dateIssued').value);
            formData.append('date_due', document.getElementById('dateDue').value || '');
            formData.append('date_paid', document.getElementById('datePaid').value || '');
            formData.append('status', document.getElementById('statusSelect').value);
            formData.append('description', document.getElementById('description').value);
            formData.append('amount', document.getElementById('grandTotal').textContent.replace('€', ''));

            // Изображение
            const imageInput = document.getElementById('paymentImage');
            if (imageInput.files.length > 0) {
                formData.append('image', imageInput.files[0]);
            }

            // Флаг удаления изображения
            if (document.getElementById('imagePreview').innerHTML === '' &&
                !imageInput.files[0]) {
                formData.append('image_deleted', 'true');
            }

            // Товары
            const items = [];
            let hasItemError = false;

            document.querySelectorAll('#itemsTable tbody tr').forEach(row => {
                const name = row.querySelector('.item-name').value;
                const quantity = parseFloat(row.querySelector('.item-quantity').value);
                const unit = row.querySelector('.item-unit').value;
                const unit_price = parseFloat(row.querySelector('.item-unit-price').value);
                const discount = parseFloat(row.querySelector('.item-discount').value) || 0;
                const vat = parseFloat(row.querySelector('.item-vat').value);

                if (!name || isNaN(quantity) || !unit || isNaN(unit_price)) {
                    hasItemError = true;
                    return;
                }

                items.push({
                    name: name,
                    quantity: quantity,
                    unit: unit,
                    unit_price: unit_price,
                    discount: discount,
                    vat: vat
                });
            });

            if (hasItemError) {
                alert('Prašome užpildyti prekių laukus');
                return;
            }

            formData.append('items', JSON.stringify(items));
            const method = currentPaymentId ? 'PUT' : 'POST';
            const url = currentPaymentId ? `/invoice/api/${currentPaymentId}/` : '/invoice/api/';

            fetch(url, {
                method: method,
                body: formData,
                headers: {
                    'X-CSRFToken': csrfToken
                }
            })
                .then(response => {
                    if (response.ok) {
                        paymentModal.hide();
                        location.reload();
                    } else {
                        return response.json().then(err => {
                            console.error('Serverio klaidos detalės:', err);
                            let errorMsg = 'Serverio klaida: pakeiskite šabloną kitu arba pakeiskite šablono numerį nustatymuose';
                            alert(errorMsg);
                            throw new Error(errorMsg);
                        }).catch(() => {
                            return response.text().then(text => {
                                console.error('Grynas serverio atsakymas:', text);
                                alert('Serverio klaida');
                            });
                        });
                    }
                })
                .catch(error => {
                    console.error('Užklausos klaida:', error);
                });
        }

        // Валидация формы
        function validatePaymentForm() {
            const errors = [];

            // Шаблон обязателен только для новых платежей
            if (currentPaymentId === null) {
                const templateId = document.getElementById('templateSelect').value;
                if (!templateId) {
                    errors.push('Nepasirinktas numeravimo šablonas');
                }
            }

            if (!document.getElementById('clientId').value) {
                errors.push('Nepasirinktas klientas');
            }

            if (!document.getElementById('dateIssued').value) {
                errors.push('Nenurodyta išrašymo data');
            }

            const status = document.getElementById('statusSelect').value;
            const datePaid = document.getElementById('datePaid').value;
            if (status === 'paid' && !datePaid) {
                errors.push('Apmokėtam mokėjimui privaloma nurodyti apmokėjimo datą');
            }

            const itemRows = document.querySelectorAll('#itemsTable tbody tr');
            if (itemRows.length === 0) {
                errors.push('Nepridėta nei viena prekė');
            } else {
                itemRows.forEach((row, index) => {
                    const name = row.querySelector('.item-name').value;
                    const quantity = row.querySelector('.item-quantity').value;
                    const unit = row.querySelector('.item-unit').value;
                    const price = row.querySelector('.item-unit-price').value;

                    if (!name) {
                        errors.push(`Prekė ${index + 1}: nenurodytas pavadinimas`);
                    }

                    if (!quantity) {
                        errors.push(`Prekė ${index + 1}: nenurodytas kiekis`);
                    } else if (isNaN(parseFloat(quantity)) || parseFloat(quantity) <= 0) {
                        errors.push(`Prekė ${index + 1}: neteisingas kiekio formatas`);
                    }

                    if (!unit) {
                        errors.push(`Prekė ${index + 1}: nenurodytas matas`);
                    }

                    if (!price) {
                        errors.push(`Prekė ${index + 1}: nenurodyta kaina`);
                    } else if (isNaN(parseFloat(price)) || parseFloat(price) <= 0) {
                        errors.push(`Prekė ${index + 1}: neteisingas kainos formatas`);
                    }
                });
            }

            return errors;
        }

        // Удаление платежа
        function deletePayment() {
            const paymentId = document.getElementById('deleteId').value;
            const csrfToken = getCSRFToken();

            fetch(`/invoice/api/${paymentId}/`, {
                method: 'DELETE',
                headers: {
                    'X-CSRFToken': csrfToken
                }
            })
                .then(response => {
                    if (response.ok) {
                        deleteModal.hide();
                        location.reload();
                    } else {
                        alert('Nepavyko ištrinti');
                    }
                })
                .catch(error => {
                    console.error('Klaida:', error);
                    alert('Klaida trinant');
                });
        }

        // Получение CSRF токена
        function getCSRFToken() {
            const csrfInput = document.querySelector('input[name="csrfmiddlewaretoken"]');
            if (!csrfInput) {
                console.error('CSRF tokenas nerastas!');
                return '';
            }
            return csrfInput.value;
        }

        // Обработчики модального окна платежа
        paymentModal._element.addEventListener('show.bs.modal', () => {
            document.getElementById('templateField').style.display = 'block';

            if (currentPaymentId === null) {
                const today = new Date().toISOString().split('T')[0];
                document.getElementById('dateIssued').value = today;
                document.getElementById('statusSelect').value = 'pending';
                document.getElementById('datePaidContainer').style.display = 'none';
            }

            loadNumberingTemplates();
            const statusChangeEvent = new Event('change');
            document.getElementById('statusSelect').dispatchEvent(statusChangeEvent);
        });

        paymentModal._element.addEventListener('hidden.bs.modal', ()=> {
            document.getElementById('paymentForm').reset();
            document.querySelector('#itemsTable tbody').innerHTML = '';
            document.getElementById('imagePreview').innerHTML = '';
            document.getElementById('clientNameDisplay').value = '';
            document.getElementById('clientId').value = '';
            document.getElementById('grandTotal').textContent = '€0.00';
            currentPaymentId = null;
            document.getElementById('statusSelect').value = 'pending';
            document.getElementById('datePaid').required = false;
            document.getElementById('datePaidContainer').style.display = 'none';
        });
    });
</script>

<style>
    /* Добавьте в существующие стили */
    #imagePreview .btn-danger {
        padding: 0.15rem 0.3rem;
        font-size: 0.75rem;
        border-radius: 50%;
        width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #imagePreview .btn-danger i {
        margin: 0;
    }

    .item-total {
        font-weight: 500;
        vertical-align: middle;
        text-align: right;
        padding-right: 15px !important;
    }

    #itemsTable input {
        min-width: 80px;
        width: 100%;
    }

    .dropdown-menu {
        min-width: 120px;
    }

    .dropdown-toggle {
        padding: 0.25rem 0.5rem;
        font-size: 0.875rem;
        white-space: nowrap;
        text-align: left;
        position: relative;
    }

    .dropdown-toggle::after {
        position: absolute;
        right: 0.5rem;
        top: 50%;
        transform: translateY(-50%);
    }

    .img-thumbnail {
        max-height: 200px;
        object-fit: contain;
    }

    #pdfPreviewModal .modal-dialog {
        max-width: 95%;
        height: 90vh;
    }

    #pdfPreviewModal .modal-content {
        height: 90vh;
    }

    #pdfPreviewModal .modal-body {
        padding: 0;
        height: calc(100% - 120px);
    }

    #pdfPreviewFrame {
        height: 100%;
    }

    #addExistingItem {
        margin-left: 10px;
    }

    /* Stilius apkrovimo animacijai */
    .edit-btn,
    .duplicate-btn {
        min-width: 38px;
        text-align: center;
    }

    .spinner-border {
        vertical-align: middle;
        margin-right: 5px;
    }

    /* Stilius statuso mygtukams */
    .btn-sm {
        padding: 0.25rem 0.5rem;
        font-size: 0.875rem;
        line-height: 1.5;
    }


    /* Grupuoti veiksmų mygtukus */
    .btn-group {
        flex-wrap: nowrap;
    }

    /* Užtikrinti, kad mygtukai nebūtų per platūs */
    .dropdown {
        position: static;
    }

    .dropdown-menu {
        position: absolute;
    }

    /* Pritaikymas mažiems ekranams */
    @media (max-width: 768px) {
        .table-responsive {
            overflow-x: auto;
        }

        .btn-sm {
            font-size: 0.75rem;
            padding: 0.2rem 0.4rem;
        }

        .btn-success,
        .btn-warning,
        .btn-danger,
        .btn-secondary {
            min-width: 90px;
        }

        .dropdown-menu {
            font-size: 0.75rem;
        }
    }

    /* Пагинация */
    .pagination {
        justify-content: center;
        margin-top: 20px;
    }

    .page-item.active .page-link {
        background-color: #0d6efd;
        border-color: #0d6efd;
    }

    .page-link {
        color: #0d6efd;
    }

    .page-item.disabled .page-link {
        color: #6c757d;
    }

    /* Пагинация в модальном окне товаров */
    #productsPagination .page-item .page-link {
        padding: 0.375rem 0.75rem;
    }

    /* Пагинация в основном списке платежей */
    .pagination .page-item .page-link {
        padding: 0.5rem 0.75rem;
        margin: 0 2px;
    }

    /* Пагинация в модальном окне товаров */
    #productsPagination {
        margin-bottom: 0;
    }

    /* Пагинация в основном списке платежей */
    .pagination {
        margin-top: 20px;
    }

    /* Stilius klientų paieškai */
    #selectClientBtn {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }

    #clientSelect {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }

    /* Lentelių stilius modaluose */
    #clientsTable th,
    #productsTable th {
        background-color: #f8f9fa;
        position: sticky;
        top: 0;
        z-index: 10;
    }

    .modal-body>div {
        padding-bottom: 10px;
    }

    /* Mygtukų stilius modaluose */
    .select-client-btn,
    .add-product-btn {
        white-space: nowrap;
    }

    /* Стили для нового модального окна номера инвойса */
    #invoiceNumberModal .modal-dialog {
        max-width: 450px;
    }

    #invoiceNumberInput {
        font-family: monospace;
        font-size: 1.1rem;
        letter-spacing: 1px;
        padding: 10px 15px;
    }

    #confirmInvoiceNumber {
        min-width: 80px;
    }

    /* Стили для модального окна номера инвойса на мобильных */
    @media (max-width: 576px) {
        #invoiceNumberModal .modal-dialog {
            max-width: 95%;
        }
    }

    .filter-section {
        background-color: #f8f9fa;
        padding: 1rem;
        border-radius: 0.5rem;
        margin-bottom: 1.5rem;
    }

    .filter-row {
        margin-bottom: 1rem;
    }

    .filter-label {
        font-weight: 500;
        margin-bottom: 0.5rem;
    }

    .status-filters {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
        margin-bottom: 1rem;
    }

    .filter-buttons {
        display: flex;
        gap: 1rem;
        margin-top: 1rem;
    }

    @media (max-width: 768px) {
        .filter-row>div {
            margin-bottom: 1rem;
        }

        .status-filters {
            flex-direction: column;
            gap: 0.5rem;
        }
    }
    
</style>
{% endblock %}