@extends('layouts.app')
@section('title', 'Product / POS Analytics')

@section('content')
<div class="card p-3 mb-3">
    <form method="GET" class="row g-2 align-items-end">
        <div class="col-6 col-md-3">
            <label class="form-label small mb-1">From Date</label>
            <input type="date" name="from" value="{{ $from }}" class="form-control form-control-sm">
        </div>
        <div class="col-6 col-md-3">
            <label class="form-label small mb-1">To Date</label>
            <input type="date" name="to" value="{{ $to }}" class="form-control form-control-sm">
        </div>
        <div class="col-6 col-md-3">
            <label class="form-label small mb-1">Category</label>
            <select name="category" class="form-select form-select-sm">
                <option value="">All</option>
                @foreach($categories as $c)<option value="{{ $c->id }}" @selected($categoryId==$c->id)>{{ $c->name }}</option>@endforeach
            </select>
        </div>
        <div class="col-6 col-md-3">
            <label class="form-label small mb-1">Product</label>
            <select name="product" class="form-select form-select-sm">
                <option value="">All</option>
                @foreach($products as $p)<option value="{{ $p->id }}" @selected($productId==$p->id)>{{ $p->name }}</option>@endforeach
            </select>
        </div>
        <div class="col-12">
            <button class="btn btn-sm btn-dark"><i class="bi bi-funnel"></i> Filter</button>
            <a href="{{ route('product-analytics.index') }}" class="btn btn-sm btn-outline-secondary">Reset</a>
        </div>
    </form>
</div>

<div class="row g-3 mb-3">
    <div class="col-6 col-lg"><div class="card p-3"><div class="text-muted small">Total Sales Amount</div><h4 class="mb-0">{{ number_format($cards->total_amount, 2) }}</h4></div></div>
    <div class="col-6 col-lg"><div class="card p-3"><div class="text-muted small">Total Quantity Sold</div><h4 class="mb-0">{{ $cards->total_qty }}</h4></div></div>
    <div class="col-6 col-lg"><div class="card p-3"><div class="text-muted small">Total Orders</div><h4 class="mb-0">{{ $cards->orders }}</h4></div></div>
    <div class="col-6 col-lg"><div class="card p-3"><div class="text-muted small">Average Sale</div><h4 class="mb-0">{{ number_format($cards->avg_sale, 2) }}</h4></div></div>
    <div class="col-6 col-lg"><div class="card p-3 {{ $cards->out_of_stock ? 'border border-danger' : '' }}"><div class="text-muted small">Out of Stock</div><h4 class="mb-0">{{ $cards->out_of_stock }}</h4></div></div>
</div>

<div class="row g-3">
    <div class="col-12 col-lg-6"><div class="card p-3"><h6 class="border-bottom pb-2">Total Sales Amount by Date</h6><div style="height:280px;"><canvas id="salesByDate"></canvas></div></div></div>
    <div class="col-12 col-lg-6"><div class="card p-3"><h6 class="border-bottom pb-2">Total Quantity Sold by Date</h6><div style="height:280px;"><canvas id="qtyByDate"></canvas></div></div></div>
    <div class="col-12 col-lg-6"><div class="card p-3"><h6 class="border-bottom pb-2">Product-wise Sales Quantity</h6><div style="height:280px;"><canvas id="productQty"></canvas></div></div></div>
    <div class="col-12 col-lg-6"><div class="card p-3"><h6 class="border-bottom pb-2">Product-wise Sales Amount</h6><div style="height:280px;"><canvas id="productAmount"></canvas></div></div></div>
    <div class="col-12 col-lg-6"><div class="card p-3"><h6 class="border-bottom pb-2">Top Selling Products</h6><div style="height:280px;"><canvas id="topSelling"></canvas></div></div></div>
    <div class="col-12 col-lg-6">
        <div class="card p-3">
            <h6 class="border-bottom pb-2">Low / Out of Stock Products</h6>
            <div class="table-responsive" style="max-height:280px;overflow:auto;">
                <table class="table table-sm mb-0 align-middle">
                    <thead><tr><th>Product</th><th>Category</th><th>Stock</th><th>Status</th></tr></thead>
                    <tbody>
                    @foreach($outStock as $p)
                        <tr><td>{{ $p->name }}</td><td>{{ $p->category->name ?? '—' }}</td><td>{{ $p->quantity_stock }}</td><td><span class="badge bg-danger">Out</span></td></tr>
                    @endforeach
                    @foreach($lowStock as $p)
                        <tr><td>{{ $p->name }}</td><td>{{ $p->category->name ?? '—' }}</td><td>{{ $p->quantity_stock }}</td><td><span class="badge bg-warning text-dark">Low</span></td></tr>
                    @endforeach
                    @if($outStock->isEmpty() && $lowStock->isEmpty())
                        <tr><td colspan="4" class="text-muted">All products sufficiently stocked.</td></tr>
                    @endif
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.3/dist/chart.umd.min.js"></script>
<script>
(function () {
    const CH = @json($charts);
    const GOLD = '#d39a1e', BLUE = '#2b6cb0', GREEN = '#2f855a';
    function make(id, type, labels, data, color, label) {
        const el = document.getElementById(id);
        if (!el) return;
        new Chart(el, {
            type: type,
            data: { labels: labels, datasets: [{ label: label, data: data, backgroundColor: color, borderColor: color, tension: .3, fill: type === 'line' ? false : true }] },
            options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false } } }
        });
    }
    make('salesByDate', 'line', CH.salesByDate.labels, CH.salesByDate.data, GOLD, 'Amount');
    make('qtyByDate', 'bar', CH.qtyByDate.labels, CH.qtyByDate.data, BLUE, 'Qty');
    make('productQty', 'bar', CH.productQty.labels, CH.productQty.data, GREEN, 'Qty');
    make('productAmount', 'bar', CH.productAmount.labels, CH.productAmount.data, GOLD, 'Amount');
    make('topSelling', 'bar', CH.topSelling.labels, CH.topSelling.data, BLUE, 'Sold');
})();
</script>
@endpush