{% extends 'base.html' %}

{% block title %}
Главная страница
{% endblock %}

{% block body %}
<h1>Список заказов</h1>
    
<!-- Фильтры и строка поиска -->
<div>
    <label for="filters">Фильтры:</label>
    <select id="filters">
        <!-- Опции для фильтров, например, по статусу заказа -->
        <option value="status">Статус заказа</option>
        <!-- Добавьте другие опции для фильтров, если необходимо -->
    </select>
    <input type="text" id="searchInput" placeholder="Поиск по заказам...">
</div>

<!-- Таблица для списка заказов -->
<table>
    <thead>
        <tr>
            <th></th>
            <th>Заказ</th>
            <th>Товары в заказе</th>
            <th>Общая сумма заказа</th>
            <th>Статус оплаты</th>
            <th>Информация о клиенте</th>
            <th>ТТН посылки</th>
            <th>Адрес доставки</th>
        </tr>
    </thead>
    <tbody id="orderList">
        <!-- Здесь будут динамически добавлены строки заказов -->
    </tbody>
</table>

<script>
    // Функция для получения данных с сервера и заполнения таблицы
    function fetchOrders() {
        fetch('/get_orders')
            .then(response => response.json())
            .then(ordersData => {
                renderOrders(ordersData);
            })
            .catch(error => {
                console.error('Ошибка при получении данных:', error);
            });
    }

    // Функция для отображения заказов в таблице
    function renderOrders(orders) {
        const orderListTable = document.getElementById("orderList");
        orderListTable.innerHTML = ""; // Очистка таблицы перед добавлением новых заказов

        orders.forEach(order => {
            const row = document.createElement("tr");

            const checkboxCell = document.createElement("td");
            const checkboxInput = document.createElement("input");
            checkboxInput.type = "checkbox";
            checkboxCell.appendChild(checkboxInput);

            const orderIdCell = document.createElement("td");
            orderIdCell.textContent = "Заказ #" + order.id + ", " + order.datetime;

            const itemsCell = document.createElement("td");
            itemsCell.textContent = order.items;
            if (order.items.length > 1) {
                itemsCell.textContent += " ...";
            }

            const totalAmountCell = document.createElement("td");
            totalAmountCell.textContent = order.total_amount + " грн.";

            const paymentStatusCell = document.createElement("td");
            paymentStatusCell.textContent = order.payment_status;

            const customerInfoCell = document.createElement("td");
            customerInfoCell.textContent = "ФИО: " + order.customer_full_name + "\n" +
                "Телефон: " + order.customer_phone_number + "\n" +
                "E-mail: " + order.customer_email;

            const trackingNumberCell = document.createElement("td");
            trackingNumberCell.textContent = order.tracking_number;

            const deliveryAddressCell = document.createElement("td");
            deliveryAddressCell.textContent = order.delivery_address;

            row.appendChild(checkboxCell);
            row.appendChild(orderIdCell);
            row.appendChild(itemsCell);
            row.appendChild(totalAmountCell);
            row.appendChild(paymentStatusCell);
            row.appendChild(customerInfoCell);
            row.appendChild(trackingNumberCell);
            row.appendChild(deliveryAddressCell);

            orderListTable.appendChild(row);
        });
    }

    // Вызываем функцию fetchOrders() для получения данных с сервера при загрузке страницы
    fetchOrders();

    // Обработчик ввода в строку поиска
    const searchInput = document.getElementById("searchInput");
    searchInput.addEventListener("input", () => {
        const searchTerm = searchInput.value.toLowerCase();
        const filteredOrders = ordersData.filter(order => {
            const orderId = order.id.toString();
            const customerFullName = order.customer_full_name.toLowerCase();
            const customerPhoneNumber = order.customer_phone_number.toLowerCase();
            const customerEmail = order.customer_email.toLowerCase();
            return orderId.includes(searchTerm) || customerFullName.includes(searchTerm) ||
                   customerPhoneNumber.includes(searchTerm) || customerEmail.includes(searchTerm);
        });
        renderOrders(filteredOrders);
    });
</script>
{% endblock %}