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

{% block admin_title %}Sales & analytics{% endblock %}
{% block admin_subtitle %}Today’s totals, payment mix, and 7-day trend{% endblock %}

{% block admin_content %}
<div class="row g-3 mb-4">
    <div class="col-md-4">
        <div class="card border-0 shadow-sm rounded-4">
            <div class="card-body">
                <small class="text-muted">Today total (UTC)</small>
                <h3 class="fw-bold mb-0">{{ currency }} {{ "{:,.0f}".format(today_sales_total) }}</h3>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card border-0 shadow-sm rounded-4 border-primary border-opacity-25">
            <div class="card-body">
                <small class="text-muted">Web</small>
                <h3 class="fw-bold text-primary mb-0">{{ currency }} {{ "{:,.0f}".format(today_web) }}</h3>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card border-0 shadow-sm rounded-4 border-success border-opacity-25">
            <div class="card-body">
                <small class="text-muted">Shop / POS</small>
                <h3 class="fw-bold text-success mb-0">{{ currency }} {{ "{:,.0f}".format(today_pos) }}</h3>
            </div>
        </div>
    </div>
</div>

<div class="card border-0 shadow-sm rounded-4 mb-4">
    <div class="card-header bg-white py-3 border-bottom">
        <h5 class="mb-0 fw-bold">Today’s payment mix (orders)</h5>
        <small class="text-muted">Same rules as POS cashbook</small>
    </div>
    <div class="card-body">
        <div class="row text-center g-3">
            <div class="col-4">
                <div class="small text-muted">Cash</div>
                <div class="fw-bold fs-5">{{ currency }} {{ "{:,.0f}".format(cash_sales) }}</div>
            </div>
            <div class="col-4">
                <div class="small text-muted">Card / Bank</div>
                <div class="fw-bold fs-5">{{ currency }} {{ "{:,.0f}".format(bank_sales) }}</div>
            </div>
            <div class="col-4">
                <div class="small text-muted">Credit</div>
                <div class="fw-bold fs-5">{{ currency }} {{ "{:,.0f}".format(credit_sales) }}</div>
            </div>
        </div>
    </div>
</div>

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