{% extends 'web/admin/base.html' %}

{% block admin_title %}Reports{% endblock %}
{% block admin_subtitle %}Same flow as Swift_Cart POS: report type, date range, generate, then results{% endblock %}

{% block admin_content %}
<style>
    .report-filters-card {
        background: #fff;
        border: 1px solid #dee2e6;
        border-radius: 12px;
    }
    .report-filters-card .card-header {
        background: #f8f9fa;
        font-weight: 700;
    }
    .report-summary-box {
        background: #fff;
        border: 1px solid #dee2e6;
        border-radius: 10px;
        padding: 1rem;
        height: 100%;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
    }
    .report-summary-box .label {
        font-size: 0.8rem;
        color: #6c757d;
        font-weight: 600;
    }
    .report-summary-box .value {
        font-size: 1.15rem;
        font-weight: 700;
        color: #28a745;
    }
    .report-table thead th {
        background: #343a40;
        color: #fff;
        font-size: 0.85rem;
        border: none;
    }
    .report-table tbody tr:nth-child(even) {
        background: #f8f9fa;
    }
    .report-table tfoot td {
        font-weight: 700;
        background: #f1f3f5;
    }
</style>

<div class="card border-0 shadow-sm rounded-4 mb-3">
    <div class="card-body py-3">
        <label class="form-label small fw-bold text-muted mb-1">Report type</label>
        <form method="get" action="{{ url_for('web.admin_reports') }}" id="report-filter-form">
            <input type="hidden" name="generate" value="1">
            <div class="row g-3 align-items-end">
                <div class="col-md-4">
                    <select name="type" class="form-select">
                        {% for key, label in report_types %}
                        <option value="{{ key }}" {% if report_type == key %}selected{% endif %}>{{ label }}</option>
                        {% endfor %}
                    </select>
                </div>
            </div>

            <div class="report-filters-card mt-3">
                <div class="card-header py-2 px-3">Filters</div>
                <div class="card-body">
                    <div class="row g-3 align-items-end">
                        <div class="col-md-3">
                            <label class="form-label small fw-bold mb-1">Start date</label>
                            <input type="date" name="from" class="form-control" value="{{ report_date_from_iso }}">
                        </div>
                        <div class="col-md-3">
                            <label class="form-label small fw-bold mb-1">End date</label>
                            <input type="date" name="to" class="form-control" value="{{ report_date_to_iso }}">
                        </div>
                        <div class="col-md-6 d-flex flex-wrap gap-2 align-items-center">
                            <span class="small text-muted">Quick:</span>
                            {% for q in report_quick_links %}
                            <a class="btn btn-outline-secondary btn-sm rounded-pill"
                                href="{{ url_for('web.admin_reports', type=report_type, from=q.from, to=q.to, generate=1) }}">{{ q.label }}</a>
                            {% endfor %}
                        </div>
                    </div>
                </div>
            </div>

            <div class="d-flex flex-wrap gap-2 mt-3">
                <button type="submit" class="btn btn-dark px-4">Generate report</button>
            </div>
        </form>
    </div>
</div>

{% if report_generated %}
<div class="mb-3">
    <h5 class="fw-bold mb-1">{{ report_label }}</h5>
    <p class="text-muted small mb-0">
        {{ report_date_from.strftime('%d %b %Y') }} to {{ report_date_to.strftime('%d %b %Y') }} · UTC
    </p>
</div>

<div class="row g-3 mb-4">
    <div class="col-md-6 col-xl">
        <div class="report-summary-box">
            <div class="label">Total amount</div>
            <div class="value">{{ currency }} {{ "{:,.2f}".format(report_summary.total_amount) }}</div>
        </div>
    </div>
    <div class="col-md-6 col-xl">
        <div class="report-summary-box">
            <div class="label">Total discount</div>
            <div class="value">{{ currency }} {{ "{:,.2f}".format(report_summary.total_discount) }}</div>
        </div>
    </div>
    <div class="col-md-6 col-xl">
        <div class="report-summary-box">
            <div class="label">Total after discounts</div>
            <div class="value">{{ currency }} {{ "{:,.2f}".format(report_summary.total_after_discount) }}</div>
        </div>
    </div>
    <div class="col-md-6 col-xl">
        <div class="report-summary-box">
            <div class="label">Total profit</div>
            <div class="value">{{ currency }} {{ "{:,.2f}".format(report_summary.total_profit) }}</div>
        </div>
    </div>
    <div class="col-md-6 col-xl">
        <div class="report-summary-box">
            <div class="label">Total records</div>
            <div class="value text-dark">{{ report_summary.total_records }}</div>
        </div>
    </div>
</div>

{% if report_show_chart %}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<div class="card border-0 shadow-sm rounded-4 p-4 mb-4">
    <h5 class="fw-bold mb-3">Sales by day — Web vs POS</h5>
    <div style="position: relative; height: 300px;">
        <canvas id="adminReportsChart"></canvas>
    </div>
    <script type="application/json" id="reportsChartData">{{ { 'labels': report_chart_labels or [], 'web': report_chart_web or [], 'pos': report_chart_pos or [] } | tojson | safe }}</script>
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            const el = document.getElementById('adminReportsChart');
            if (!el) return;
            const chartDataEl = document.getElementById('reportsChartData');
            const chartData = chartDataEl ? JSON.parse(chartDataEl.textContent) : { labels: [], web: [], pos: [] };
            new Chart(el.getContext('2d'), {
                type: 'bar',
                data: {
                    labels: chartData.labels,
                    datasets: [
                        { label: 'POS', data: chartData.pos, backgroundColor: '#10B981', borderRadius: 5 },
                        { label: 'Web', data: chartData.web, backgroundColor: '#3b82f6', borderRadius: 5 }
                    ]
                },
                options: { responsive: true, maintainAspectRatio: false, scales: { y: { beginAtZero: true } } }
            });
        });
    </script>
</div>
{% endif %}

<div class="card border-0 shadow-sm rounded-4 overflow-hidden mb-4">
    <div class="table-responsive">
        <table class="table table-hover report-table mb-0 align-middle">
            <thead>
                <tr>
                    {% for column in report_columns %}
                    <th class="{% if loop.index > 1 %}text-end{% endif %}">{{ column }}</th>
                    {% endfor %}
                </tr>
            </thead>
            <tbody>
                {% set body_rows = report_rows | rejectattr('footer') | list %}
                {% if body_rows %}
                {% for row in body_rows %}
                <tr>
                    {% for cell in row.cells %}
                    <td class="{% if loop.index > 1 and row.numeric[loop.index0] %}text-end{% endif %}">
                        {% if row.numeric[loop.index0] and cell is number %}
                            {{ currency }} {{ "{:,.2f}".format(cell) }}
                        {% else %}
                            {{ cell }}
                        {% endif %}
                    </td>
                    {% endfor %}
                </tr>
                {% endfor %}
                {% else %}
                <tr>
                    <td colspan="{{ report_columns|length }}" class="text-center text-muted py-4">No records for this range.</td>
                </tr>
                {% endif %}
            </tbody>
            {% if report_rows and report_rows[-1].footer %}
            <tfoot>
                <tr>
                    {% for cell in report_rows[-1].cells %}
                    <td class="{% if loop.index > 1 and report_rows[-1].numeric[loop.index0] %}text-end{% endif %}">
                        {% if report_rows[-1].numeric[loop.index0] and cell is number %}
                            {{ currency }} {{ "{:,.2f}".format(cell) }}
                        {% else %}
                            {{ cell }}
                        {% endif %}
                    </td>
                    {% endfor %}
                </tr>
            </tfoot>
            {% endif %}
        </table>
    </div>
</div>

<div class="card border-0 shadow-sm rounded-4 overflow-hidden">
    <div class="card-header bg-white py-3 border-bottom">
        <h6 class="mb-0 fw-bold">POS background sync log</h6>
    </div>
    <div class="table-responsive">
        <table class="table table-sm table-hover mb-0 align-middle">
            <thead class="table-light">
                <tr>
                    <th>Time (UTC)</th>
                    <th>Terminal</th>
                    <th class="text-end">Sales</th>
                    <th class="text-end">Expenses</th>
                </tr>
            </thead>
            <tbody>
                {% for row in pos_sync_logs %}
                <tr>
                    <td class="small">{{ row.synced_at.strftime('%d %b %Y %H:%M') if row.synced_at else '—' }}</td>
                    <td>{{ row.source_terminal or 'Swift_Cart' }}</td>
                    <td class="text-end">{{ row.sales_uploaded or 0 }}</td>
                    <td class="text-end">{{ row.expenses_uploaded or 0 }}</td>
                </tr>
                {% else %}
                <tr><td colspan="4" class="text-center text-muted py-3">No sync batches yet.</td></tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>
{% else %}
<div class="alert alert-light border rounded-4 text-muted mb-0">
    Choose a report type, set the start and end dates, then click <strong>Generate report</strong>.
</div>
{% endif %}
{% endblock %}