{% extends "base.html" %}
{% block title %}数据报表 - 总部{% endblock %}
{% block content %}

<nav aria-label="breadcrumb">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="{{ url_for('dashboard') }}">工作台</a></li>
        <li class="breadcrumb-item active">数据报表</li>
    </ol>
</nav>

<!-- 筛选条件 -->
<div class="card mb-3">
    <div class="card-header bg-white"><strong><i class="bi bi-funnel"></i> 报表筛选</strong></div>
    <div class="card-body">
        <div class="row g-2 align-items-end">
            <div class="col-md-2">
                <label class="form-label small">报表类型</label>
                <select class="form-select form-select-sm" id="reportType">
                    <option value="requisition">领用记录</option>
                    <option value="sales">销售记录</option>
                    <option value="inbound">入库记录</option>
                </select>
            </div>
            <div class="col-md-2">
                <label class="form-label small">门店</label>
                <select class="form-select form-select-sm" id="filterStore">
                    <option value="">全部门店</option>
                    {% for s in stores %}
                    <option value="{{ s.id }}">{{ s.name }}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="col-md-2">
                <label class="form-label small">水果品类</label>
                <select class="form-select form-select-sm" id="filterFruit">
                    <option value="">全部品类</option>
                    {% for f in fruits %}
                    <option value="{{ f.id }}">{{ f.name }}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="col-md-2">
                <label class="form-label small">开始日期</label>
                <input type="date" class="form-control form-control-sm" id="filterDateFrom">
            </div>
            <div class="col-md-2">
                <label class="form-label small">结束日期</label>
                <input type="date" class="form-control form-control-sm" id="filterDateTo">
            </div>
            <div class="col-md-2">
                <button class="btn btn-success btn-sm w-100" onclick="loadReport()">
                    <i class="bi bi-search"></i> 查询
                </button>
            </div>
        </div>
    </div>
</div>

<!-- 汇总统计 -->
<div class="row g-3 mb-3" id="summaryCards" style="display:none;">
    <div class="col-md-3 col-6">
        <div class="card stat-card bg-primary bg-opacity-10">
            <div class="card-body text-center py-2">
                <div class="text-muted small">记录数</div>
                <div class="fs-4 fw-bold text-primary" id="sumCount">0</div>
            </div>
        </div>
    </div>
    <div class="col-md-3 col-6">
        <div class="card stat-card bg-success bg-opacity-10">
            <div class="card-body text-center py-2">
                <div class="text-muted small">总件数</div>
                <div class="fs-4 fw-bold text-success" id="sumQty">0</div>
            </div>
        </div>
    </div>
</div>

<!-- 报表内容 -->
<div class="card">
    <div class="card-header bg-white d-flex justify-content-between align-items-center">
        <strong><i class="bi bi-table"></i> <span id="reportTitle">报表数据</span></strong>
        <button class="btn btn-outline-secondary btn-sm" onclick="exportTable()">
            <i class="bi bi-download"></i> 导出CSV
        </button>
    </div>
    <div class="card-body p-0">
        <div class="table-responsive" style="max-height: 500px; overflow-y: auto;">
            <table class="table table-hover table-sm mb-0" id="reportTable">
                <thead id="reportHead"></thead>
                <tbody id="reportBody">
                    <tr><td colspan="10" class="text-center text-muted py-4">点击「查询」加载数据</td></tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

{% endblock %}
{% block extra_scripts %}
<script>
function loadReport() {
    const type = document.getElementById('reportType').value;
    const storeId = document.getElementById('filterStore').value;
    const fruitId = document.getElementById('filterFruit').value;
    const dateFrom = document.getElementById('filterDateFrom').value;
    const dateTo = document.getElementById('filterDateTo').value;

    let url = `/api/report/${type}?store_id=${storeId}&fruit_id=${fruitId}&date_from=${dateFrom}&date_to=${dateTo}`;

    fetch(url)
        .then(res => res.json())
        .then(data => {
            document.getElementById('summaryCards').style.display = 'flex';
            document.getElementById('sumCount').textContent = data.length;

            let totalQty = 0;
            data.forEach(r => totalQty += (r.quantity || 0));
            document.getElementById('sumQty').textContent = totalQty;

            let head = '', body = '';
            if (type === 'requisition') {
                document.getElementById('reportTitle').textContent = '领用明细报表';
                head = '<tr><th>日期</th><th>门店</th><th>水果品类</th><th class="text-end">领用件数</th><th>申请人</th><th>审核人</th></tr>';
                data.forEach(r => {
                    body += `<tr>
                        <td class="small">${r.req_date?.substring(0,10)||''}</td>
                        <td>${r.store_name||''}</td><td>${r.fruit_name||''}</td>
                        <td class="text-end fw-bold">${r.quantity}</td>
                        <td class="small">${r.applicant_name||''}</td>
                        <td class="small">${r.approver_name||''}</td>
                    </tr>`;
                });
            } else if (type === 'sales') {
                document.getElementById('reportTitle').textContent = '销售明细报表';
                head = '<tr><th>日期</th><th>门店</th><th>水果品类</th><th class="text-end">销售件数</th><th>操作人</th><th>备注</th></tr>';
                data.forEach(r => {
                    body += `<tr>
                        <td class="small">${r.sale_date||''}</td>
                        <td>${r.store_name||''}</td><td>${r.fruit_name||''}</td>
                        <td class="text-end fw-bold text-danger">${r.quantity}</td>
                        <td class="small">${r.operator_name||''}</td>
                        <td class="small text-muted">${r.note||'-'}</td>
                    </tr>`;
                });
            } else if (type === 'inbound') {
                document.getElementById('reportTitle').textContent = '入库明细报表';
                head = '<tr><th>时间</th><th>水果品类</th><th class="text-end">入库件数</th><th>操作人</th><th>备注</th></tr>';
                data.forEach(r => {
                    body += `<tr>
                        <td class="small">${r.created_at?.substring(0,19)||''}</td>
                        <td>${r.fruit_name||''}</td>
                        <td class="text-end fw-bold text-success">+${r.quantity}</td>
                        <td class="small">${r.operator_name||''}</td>
                        <td class="small text-muted">${r.note||'-'}</td>
                    </tr>`;
                });
            }
            document.getElementById('reportHead').innerHTML = head;
            document.getElementById('reportBody').innerHTML = body || '<tr><td colspan="10" class="text-center text-muted py-3">无匹配数据</td></tr>';
        });
}

function exportTable() {
    const table = document.getElementById('reportTable');
    let csv = '\uFEFF'; // BOM for Excel
    const rows = table.querySelectorAll('tr');
    rows.forEach(row => {
        const cols = row.querySelectorAll('th, td');
        const rowData = [];
        cols.forEach(col => rowData.push('"' + col.textContent.trim() + '"'));
        csv += rowData.join(',') + '\n';
    });
    const blob = new Blob([csv], {type: 'text/csv;charset=utf-8'});
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = 'report_' + new Date().toISOString().slice(0,10) + '.csv';
    a.click();
    URL.revokeObjectURL(url);
}
</script>
{% endblock %}