{% extends "admin/base_site.html" %}
{% load static %}
{% load i18n %}

{% block content %}
<div class="container-fluid">
    <h1>Счета</h1>
    
    <!-- Кнопка синхронизации счетов -->
    <div class="mb-4">
        <a href="{% url 'admin:sync_invoices' %}" class="btn btn-success">Синхронизировать счета</a>
    </div>
    
    <!-- Фильтры и кнопка обновления -->
    <div class="mb-4">
        <form id="filterForm" class="form-inline">
            <div class="form-group mr-3">
                <label for="startDate" class="mr-2">Начальная дата:</label>
                <input type="date" id="startDate" name="start_date" class="form-control">
            </div>
            <div class="form-group mr-3">
                <label for="endDate" class="mr-2">Конечная дата:</label>
                <input type="date" id="endDate" name="end_date" class="form-control">
            </div>
            <div class="form-group mr-3">
                <label for="clientSearch" class="mr-2">Клиент:</label>
                <input type="text" id="clientSearch" name="client_search" placeholder="Имя клиента" class="form-control">
            </div>
            <button type="button" id="refreshButton" class="btn btn-primary">Обновить</button>
        </form>
    </div>
    
    <!-- Таблица счетов -->
    <div class="table-responsive">
        <table class="table table-striped table-sm" id="invoicesTable">
            <thead>
                <tr>
                    <th>Создан</th>
                    <th>Закрыт</th>
                    <th>Счет</th>
                    <th>Клиент</th>
                    <th>Номер клиента</th>
                    <th>Сумма счета</th>
                    <th>Бонус</th>
                    <th>ФД</th>
                    <th>Депозит</th>
                    <th>Примечание</th>
                </tr>
            </thead>
            <tbody>
                <!-- Данные будут подгружаться AJAX-ом -->
            </tbody>
        </table>
    </div>
</div>

<!-- Подключение jQuery из админки -->
<script src="{% static 'admin/js/vendor/jquery/jquery.js' %}"></script>
<script>
    function fetchInvoices() {
        var startDate = $('#startDate').val();
        var endDate = $('#endDate').val();
        var clientSearch = $('#clientSearch').val();
        $.ajax({
            url: '{% url "filtered_invoices" %}',
            method: 'GET',
            data: {
                start_date: startDate,
                end_date: endDate,
                client: clientSearch
            },
            success: function(response) {
                console.log("Response:", response); // Для отладки
                var invoices = response.member || [];
                var tbody = $('#invoicesTable tbody');
                tbody.empty();
                if (invoices.length === 0) {
                    tbody.append('<tr><td colspan="14" class="text-center">Счета не найдены</td></tr>');
                } else {
                    invoices.forEach(function(invoice) {
                        var client = invoice.client || {};
                        var row = '<tr>' +
                            '<td>' + (invoice.created_at || '') + '</td>' +
                            '<td>' + (invoice.closed_at || 'N/A') + '</td>' +
                            '<td>' + (invoice.ext_id || '') + '</td>' +
                            '<td>' + (client.name || '') + '</td>' +
                            '<td>' + (client.club_card_num || '') + '</td>' +
                            '<td>' + (invoice.sum || '') + '</td>' +
                            '<td>' + (invoice.bonus || '') + '</td>' +
                            '<td>' + (invoice.start_bonus || '') + '</td>' +
                            '<td>' + (invoice.deposit_sum || '') + '</td>' +
                            '<td>' + (invoice.notes || '') + '</td>' +
                            '</tr>';
                        tbody.append(row);
                    });
                }
            },
            error: function(xhr, status, error) {
                alert("Ошибка загрузки счетов: " + error);
            }
        });
    }

    $(document).ready(function(){
        // Загружаем счета при первой загрузке страницы
        fetchInvoices();

        // Обновление по нажатию на кнопку "Обновить"
        $('#refreshButton').click(function(){
            fetchInvoices();
        });

        // Фильтрация по поиску клиента (с задержкой можно добавить debounce, если требуется)
        $('#clientSearch').on('keyup', function(){
            fetchInvoices();
        });
    });
</script>
{% endblock %}
