@extends('layouts.app')

@section('content')
<style>
    .stock-wrap { max-width:1500px; }
    .stock-head { align-items:flex-start; display:flex; justify-content:space-between; gap:12px; margin-bottom:14px; }
    .page-title { color:#111827; font-size:26px; font-weight:900; }
    .page-subtitle { color:#64748b; font-size:13px; font-weight:700; margin-top:4px; }
    .actions { display:flex; flex-wrap:wrap; gap:8px; }
    .btn { border:0; border-radius:8px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; font-weight:900; padding:10px 13px; text-decoration:none; white-space:nowrap; }
    .btn-blue { background:#1E4FA8; color:#fff; }
    .btn-orange { background:#E84C0D; color:#fff; }
    .btn-light { background:#f1f5f9; color:#111827; }
    .summary-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:12px; margin-bottom:14px; }
    .summary-card, .panel { background:#fff; border-radius:10px; box-shadow:0 8px 22px rgba(15,23,42,.06); }
    .summary-card { padding:15px; }
    .summary-label { color:#64748b; font-size:12px; font-weight:900; text-transform:uppercase; }
    .summary-value { color:#1E4FA8; font-size:23px; font-weight:900; margin-top:6px; }
    .summary-value.orange { color:#E84C0D; }
    .panel { padding:16px; margin-bottom:14px; }
    .filter-grid { display:grid; grid-template-columns:2fr 1fr 1fr auto auto; gap:10px; align-items:end; }
    .field { display:flex; flex-direction:column; gap:6px; }
    .field label { color:#334155; font-size:12px; font-weight:900; text-transform:uppercase; }
    .field input, .field select { border:1px solid #d8e1ec; border-radius:8px; box-sizing:border-box; font-size:14px; padding:10px; width:100%; }
    .table-wrap { overflow:auto; }
    table { border-collapse:collapse; min-width:1050px; width:100%; }
    th { background:#1E4FA8; color:#fff; font-size:12px; padding:10px 8px; text-align:left; white-space:nowrap; }
    td { border-bottom:1px solid #e5e7eb; padding:9px 8px; font-size:13px; vertical-align:middle; }
    td.num, th.num { text-align:right; }
    tfoot td { background:#f1f5f9; color:#111827; font-weight:900; }
    .product-name { color:#111827; font-weight:900; }
    .shortage { color:#E84C0D; font-weight:900; }
    @media(max-width: 900px) {
        .stock-head { flex-direction:column; }
        .filter-grid { grid-template-columns:1fr; }
    }
</style>

<div class="page-wrap stock-wrap">
    <div class="stock-head">
        <div>
            <div class="page-title">Low Stock Report</div>
            <div class="page-subtitle">Items whose current stock is below or equal to the product alert quantity.</div>
        </div>
        <div class="actions">
            <a class="btn btn-light" href="{{ url('/inventory') }}">Inventory</a>
            <button class="btn btn-orange" type="button" onclick="window.print()">Print</button>
        </div>
    </div>

    <div class="panel">
        <form method="GET" action="{{ url('/inventory/low-stock') }}" class="filter-grid auto-filter-form">
            <div class="field">
                <label>Search</label>
                <input type="text" name="search" value="{{ $filters['search'] }}" placeholder="Barcode or product name">
            </div>
            <div class="field">
                <label>Branch</label>
                <select name="branch_id">
                    <option value="">All allowed branches</option>
                    <option value="unassigned" {{ $filters['branch_id'] === 'unassigned' ? 'selected' : '' }}>Unassigned</option>
                    @foreach($branches as $branch)
                        <option value="{{ $branch->id }}" {{ $filters['branch_id'] == $branch->id ? 'selected' : '' }}>{{ $branch->name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="field">
                <label>Category</label>
                <select name="category_id">
                    <option value="">All categories</option>
                    @foreach($categories as $category)
                        <option value="{{ $category->id }}" {{ $filters['category_id'] == $category->id ? 'selected' : '' }}>{{ $category->name }}</option>
                    @endforeach
                </select>
            </div>
            <button class="btn btn-blue">Filter</button>
            <a class="btn btn-light" href="{{ url('/inventory/low-stock') }}">Reset</a>
        </form>
    </div>

    <div class="panel">
        <div class="table-wrap">
            <table>
                <thead>
                    <tr>
                        <th>Barcode</th>
                        <th>Product</th>
                        <th>Category</th>
                        <th>Branch</th>
                        <th class="num">Current Stock</th>
                        <th class="num">Alert Quantity</th>
                        <th class="num">Shortage</th>
                        <th>Unit</th>
                        <th class="num">Buying Price</th>
                        <th class="num">Selling Price</th>
                        <th class="num">Stock Buying Value</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($products as $product)
                        @php($shortage = max((float) $product->alert_quantity - (float) $product->stock_quantity, 0))
                        @php($buyingValue = (float) $product->stock_quantity * (float) $product->buying_price)
                        <tr>
                            <td>{{ $product->barcode ?: '-' }}</td>
                            <td class="product-name">{{ $product->name }}</td>
                            <td>{{ $product->category?->name ?: '-' }}</td>
                            <td>{{ $product->branch?->name ?: 'Unassigned' }}</td>
                            <td class="num"><strong>{{ number_format($product->stock_quantity, 2) }}</strong></td>
                            <td class="num">{{ number_format($product->alert_quantity, 2) }}</td>
                            <td class="num shortage">{{ number_format($shortage, 2) }}</td>
                            <td>{{ $product->unitOfMeasure?->name ?: '-' }}</td>
                            <td class="num">{{ \App\Models\SystemSetting::formatMoney($product->buying_price) }}</td>
                            <td class="num">{{ \App\Models\SystemSetting::formatMoney($product->retail_price) }}</td>
                            <td class="num">{{ \App\Models\SystemSetting::formatMoney($buyingValue) }}</td>
                        </tr>
                    @empty
                        <tr><td colspan="11" style="text-align:center;color:#64748b;font-weight:800;">No low stock products found.</td></tr>
                    @endforelse
                </tbody>
                <tfoot>
                    <tr>
                        <td colspan="4">Totals</td>
                        <td class="num">{{ number_format($summary->current_stock, 2) }}</td>
                        <td class="num">{{ number_format($summary->required_stock, 2) }}</td>
                        <td class="num">{{ number_format($summary->shortage, 2) }}</td>
                        <td colspan="3"></td>
                        <td class="num">{{ \App\Models\SystemSetting::formatMoney($summary->buying_value) }}</td>
                    </tr>
                </tfoot>
            </table>
        </div>
        <div style="margin-top:12px;">{{ $products->links('vendor.pagination.jevapos') }}</div>
    </div>
</div>
@endsection