@extends('layouts.app')
@section('title', 'Inventory')
@section('breadcrumb')<span class="text-white">Inventory</span>@endsection

@section('content')
<div class="flex items-center justify-between mb-6">
    <div>
        <h1 class="mb-1">Inventory</h1>
        <p>Stock levels, PO history and reorder management</p>
    </div>
    <div class="flex items-center gap-3">
        @if($reorderCount > 0)
        <span class="badge badge-red text-sm px-3 py-1.5"><i class="fas fa-exclamation-triangle mr-1"></i>{{ $reorderCount }} items need reorder</span>
        @endif
        <a href="{{ route('inventory.direct-add') }}" class="btn btn-primary">
            <i class="fas fa-plus mr-2"></i>Add Inventory
        </a>
    </div>
</div>

@if(session('success'))
<div class="card p-4 mb-4 border-green-700 bg-green-900/20">
    <p class="text-green-400 text-sm"><i class="fas fa-check-circle mr-2"></i>{{ session('success') }}</p>
</div>
@endif

<form method="GET" action="{{ route('inventory.index') }}" class="card p-4 mb-6">
    <div class="grid grid-cols-1 md:grid-cols-4 gap-3 items-end">
        <div class="md:col-span-3">
            <label>Search</label>
            <input type="text" name="search" value="{{ request('search') }}" class="input" placeholder="SKU, item name, description or storage location…">
        </div>
        <div class="flex gap-2">
            <button type="submit" class="btn btn-primary flex-1">Filter</button>
            <a href="{{ route('inventory.index') }}" class="btn btn-secondary">Reset</a>
        </div>
    </div>
    <div class="mt-3">
        <label class="flex items-center gap-2 cursor-pointer">
            <input type="checkbox" name="reorder_only" value="1" {{ request('reorder_only') ? 'checked' : '' }} class="rounded border-slate-600">
            <span class="text-sm text-slate-400">Show reorder needed only</span>
        </label>
    </div>
</form>

<div class="card overflow-hidden">
    @if($stocks->count())
    <div class="overflow-x-auto">
        <table class="w-full text-sm">
            <thead>
                <tr class="text-xs text-slate-400 uppercase border-b border-slate-700">
                    <th class="px-4 py-3 text-left">SKU</th>
                    <th class="px-4 py-3 text-left">Item Name</th>
                    <th class="px-4 py-3 text-left">Description</th>
                    <th class="px-4 py-3 text-left">Storage Location</th>
                    <th class="px-4 py-3 text-right">On Hand</th>
                    <th class="px-4 py-3 text-right">Allocated</th>
                    <th class="px-4 py-3 text-right">Available</th>
                    <th class="px-4 py-3 text-right">Reorder Pt.</th>
                    <th class="px-4 py-3 text-right">Unit Cost</th>
                    <th class="px-4 py-3 text-left">Supplier</th>
                    <th class="px-4 py-3"></th>
                </tr>
            </thead>
            <tbody>
                @foreach($stocks as $stock)
                @php $needsReorder = $stock->needsReorder(); @endphp
                <tr class="table-row border-b border-slate-800 hover:bg-slate-800/40 {{ $needsReorder ? 'bg-red-900/10' : '' }}">
                    <td class="px-4 py-3 font-mono text-blue-300 text-xs">{{ $stock->sku }}</td>
                    <td class="px-4 py-3 text-white font-medium">
                        {{ $stock->item_name ?? '—' }}
                        @if($needsReorder)<span class="ml-2 badge badge-red text-xs">Reorder</span>@endif
                    </td>
                    <td class="px-4 py-3 text-slate-400 text-xs">{{ $stock->description ?? '—' }}</td>
                    <td class="px-4 py-3 text-slate-400 text-xs">
                        @if($stock->storage_location)
                            <span class="inline-flex items-center gap-1"><i class="fas fa-map-marker-alt text-slate-500 text-xs"></i>{{ $stock->storage_location }}</span>
                        @else
                            <span class="text-slate-600">—</span>
                        @endif
                    </td>
                    <td class="px-4 py-3 text-right {{ $needsReorder ? 'text-red-400' : 'text-slate-300' }} font-medium">
                        {{ number_format($stock->qty_on_hand, 2) }} {{ $stock->unit }}
                    </td>
                    <td class="px-4 py-3 text-right text-orange-400">{{ number_format($stock->qty_allocated, 2) }}</td>
                    <td class="px-4 py-3 text-right text-green-400 font-medium">{{ number_format($stock->qtyAvailable(), 2) }}</td>
                    <td class="px-4 py-3 text-right text-slate-500">{{ number_format($stock->reorder_point, 2) }}</td>
                    <td class="px-4 py-3 text-right text-slate-400">${{ number_format($stock->unit_cost, 2) }}</td>
                    <td class="px-4 py-3 text-slate-400 text-xs">{{ $stock->preferredSupplier?->company ?: ($stock->preferredSupplier?->full_name ?? '—') }}</td>
                    <td class="px-4 py-3">
                        <a href="{{ route('inventory.show', $stock) }}" class="text-slate-400 hover:text-white text-xs"><i class="fas fa-eye"></i></a>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
    <div class="p-4">{{ $stocks->links() }}</div>
    @else
    <div class="p-12 text-center">
        <i class="fas fa-boxes text-slate-700 text-4xl mb-3 block"></i>
        <p class="text-slate-400">No stock items found.</p>
        <p class="text-xs text-slate-500 mt-1">Add inventory directly using the <strong>Add Inventory</strong> button, or stock is created automatically when purchase orders are received with a SKU.</p>
    </div>
    @endif
</div>
@endsection