@extends('layouts.app')
@section('title', 'Inventory 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-2">
            <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-2">
            <label class="form-label small mb-1">Ingredient</label>
            <select name="ingredient" class="form-select form-select-sm">
                <option value="">All</option>
                @foreach($allIngredients as $i)<option value="{{ $i->id }}" @selected($ingredientId==$i->id)>{{ $i->name }}</option>@endforeach
            </select>
        </div>
        <div class="col-6 col-md-2">
            <label class="form-label small mb-1">Supplier</label>
            <input type="text" name="supplier" list="suppliers" value="{{ $supplier }}" class="form-control form-control-sm">
            <datalist id="suppliers">@foreach($supplierNames as $s)<option value="{{ $s }}">@endforeach</datalist>
        </div>
        <div class="col-12">
            <button class="btn btn-sm btn-dark"><i class="bi bi-funnel"></i> Filter</button>
            <a href="{{ route('inventory-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-3"><div class="card p-3"><div class="text-muted small">Total Ingredients</div><h5 class="mb-0">{{ $cards->total_ingredients }}</h5></div></div>
    <div class="col-6 col-lg-3"><div class="card p-3"><div class="text-muted small">Purchased (range)</div><h5 class="mb-0">{{ \App\Models\Ingredient::formatGrams($cards->purchased_grams) }}</h5></div></div>
    <div class="col-6 col-lg-3"><div class="card p-3"><div class="text-muted small">Used (range)</div><h5 class="mb-0">{{ \App\Models\Ingredient::formatGrams($cards->used_grams) }}</h5></div></div>
    <div class="col-6 col-lg-3"><div class="card p-3"><div class="text-muted small">Available (now)</div><h5 class="mb-0">{{ \App\Models\Ingredient::formatGrams($cards->available_grams) }}</h5></div></div>
    <div class="col-6 col-lg-3"><div class="card p-3 {{ $cards->low ? 'border border-warning' : '' }}"><div class="text-muted small">Low Stock (&lt; 100 g)</div><h5 class="mb-0">{{ $cards->low }}</h5></div></div>
    <div class="col-6 col-lg-3"><div class="card p-3 {{ $cards->out ? 'border border-danger' : '' }}"><div class="text-muted small">Out of Stock</div><h5 class="mb-0">{{ $cards->out }}</h5></div></div>
    <div class="col-6 col-lg-3"><div class="card p-3"><div class="text-muted small">Inventory Value</div><h5 class="mb-0">{{ number_format($cards->value, 2) }}</h5></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">Purchased Quantity by Date (grams)</h6><div style="height:280px;"><canvas id="purByDate"></canvas></div></div></div>
    <div class="col-12 col-lg-6"><div class="card p-3"><h6 class="border-bottom pb-2">Used Quantity by Date (grams)</h6><div style="height:280px;"><canvas id="useByDate"></canvas></div></div></div>
    <div class="col-12 col-lg-6"><div class="card p-3"><h6 class="border-bottom pb-2">Ingredient-wise Available Stock (grams)</h6><div style="height:280px;"><canvas id="availByIngredient"></canvas></div></div></div>
    <div class="col-12 col-lg-6"><div class="card p-3"><h6 class="border-bottom pb-2">Ingredient-wise Usage Quantity (grams)</h6><div style="height:280px;"><canvas id="usageByIngredient"></canvas></div></div></div>
    <div class="col-12 col-lg-6"><div class="card p-3"><h6 class="border-bottom pb-2">Supplier-wise Purchase Quantity (grams)</h6><div style="height:280px;"><canvas id="purBySupplier"></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 Ingredients</h6>
            <div class="table-responsive" style="max-height:280px;overflow:auto;">
                <table class="table table-sm mb-0 align-middle">
                    <thead><tr><th>Ingredient</th><th>Category</th><th>Available</th><th>Status</th></tr></thead>
                    <tbody>
                    @foreach($outStock as $i)
                        <tr><td>{{ $i->name }}</td><td>{{ $i->category->name ?? '—' }}</td><td>{{ \App\Models\Ingredient::formatGrams($i->available_quantity_grams) }}</td><td><span class="badge bg-danger">Out</span></td></tr>
                    @endforeach
                    @foreach($lowStock as $i)
                        <tr><td>{{ $i->name }}</td><td>{{ $i->category->name ?? '—' }}</td><td>{{ \App\Models\Ingredient::formatGrams($i->available_quantity_grams) }}</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 ingredients 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', RED = '#c53030';
    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 }] },
            options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false } } }
        });
    }
    make('purByDate', 'line', CH.purByDate.labels, CH.purByDate.data, GREEN, 'Purchased (g)');
    make('useByDate', 'line', CH.useByDate.labels, CH.useByDate.data, GOLD, 'Used (g)');
    make('availByIngredient', 'bar', CH.availByIngredient.labels, CH.availByIngredient.data, BLUE, 'Available (g)');
    make('usageByIngredient', 'bar', CH.usageByIngredient.labels, CH.usageByIngredient.data, GOLD, 'Used (g)');
    make('purBySupplier', 'bar', CH.purBySupplier.labels, CH.purBySupplier.data, GREEN, 'Purchased (g)');
})();
</script>
@endpush