@extends('layout')
@includes('includes/large-feature')
<div class="container mx-auto px-8 py-8 md:py-16">
    <h1 class="text-3xl font-bold">
        Warehouse overview
    </h1>
    <div class="flex flex-col md:flex-row md:space-x-4 my-8">
        <div class="bg-gray-50 rounded-lg p-4 flex-1">
            <div class="text-3xl font-bold">{{ $locationCount }}</div>
            <div class="text-gray-500">Locations</div>
        </div>
        <div class="bg-gray-50 rounded-lg p-4 flex-1">
            <div class="text-3xl font-bold">{{ $itemCount }}</div>
            <div class="text-gray-500">Items</div>
        </div>
        <div class="bg-gray-50 rounded-lg p-4 flex-1">
            <div class="text-3xl font-bold">{{ $totalStock }}</div>
            <div class="text-gray-500">Units in stock</div>
        </div>
    </div>

    <h2 class="text-2xl font-bold">
        Low stock
    </h2>

    @if(count($lowStockItems) === 0)
        <p class="text-gray-500 my-4">Nothing is at or below its reorder level.</p>
    @endif

    @if(count($lowStockItems) > 0)
        <ul class="my-4 space-y-2">
            @foreach($lowStockItems as $item)
                <li class="bg-red-50 rounded-lg p-4 flex justify-between items-center">
                    <a href="{{ $item->route }}" class="font-bold underline">{{ $item->name }}</a>
                    <span class="text-red-500">{{ $item->totalQuantity }} left (reorder at {{ $item->reorder_level }})</span>
                </li>
            @endforeach
        </ul>
    @endif
</div>