@extends('layouts.admin')

@section('title', 'Inventory Stock')

@section('content')
<div class="space-y-8">
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
        <div>
            <h1 class="text-2xl font-black text-slate-900 tracking-tight">Inventory Management</h1>
            <p class="text-xs text-gray-500 font-medium">Monitor stock levels, low-stock alerts, and logs.</p>
        </div>
    </div>

    <div class="bg-white rounded-2xl border border-gray-200 shadow-sm p-6 space-y-4">
        <h3 class="font-extrabold text-slate-900 text-sm">Low Stock Alerts</h3>
        <div class="divide-y divide-gray-100 text-xs">
            <div class="py-3 flex justify-between items-center">
                <div>
                    <span class="font-bold text-slate-900">Apple Watch Series 9 GPS 45mm</span>
                    <span class="text-gray-400 block text-[10px]">SKU: APL-W9-45</span>
                </div>
                <span class="bg-amber-100 text-amber-800 font-bold px-2.5 py-1 rounded text-[10px]">3 units remaining</span>
            </div>
            <div class="py-3 flex justify-between items-center">
                <div>
                    <span class="font-bold text-slate-900">JBL Flip 6 Speaker</span>
                    <span class="text-gray-400 block text-[10px]">SKU: JBL-FLIP6</span>
                </div>
                <span class="bg-amber-100 text-amber-800 font-bold px-2.5 py-1 rounded text-[10px]">2 units remaining</span>
            </div>
        </div>
    </div>
</div>
@endsection