{% extends "base.html" %}

{% block content %}
<div class="container">
    <h1 class="my-4">订单列表</h1>

    <!-- 状态导航 -->
    <ul class="nav nav-tabs mb-4">
        <li class="nav-item">
            <a class="nav-link active" data-status="in_progress" href="#">进行中</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" data-status="pending" href="#">待处理</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" data-status="completed" href="#">已完成</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" data-status="cancelled" href="#">已取消</a>
        </li>
    </ul>

    <!-- 订单表格 -->
    <div id="orderTable">
        {% include '_order_table.html' %}
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
$(document).ready(function() {
    // 初始化：默认加载 "in_progress" 状态的订单
    loadOrders('in_progress', 1);

    // 切换选项卡
    $('.nav-link[data-status]').click(function(e) {
        e.preventDefault();
        const status = $(this).data('status');
        $('.nav-link').removeClass('active');
        $(this).addClass('active');
        loadOrders(status, 1);
    });

    // 加载订单列表
    function loadOrders(status, page) {
        console.log('Sending request with status:', status, 'and page:', page);
        $.ajax({
            url: "{{ url_for('orders.list_orders') }}",
            data: {
                status: status,
                page: page
            },
            success: function(data) {
                $('#orderTable').html(data);
            },
            error: function(xhr) {
                console.error('请求失败:', xhr.statusText);
            }
        });
    }

    // 分页链接点击
    $('#orderTable').on('click', '.page-link', function(e) {
        e.preventDefault();
        const page = $(this).data('page');
        const status = $('.nav-link.active').data('status');
        loadOrders(status, page);
    });
});
</script>
{% endblock %}