@extends('layouts.app')
@section('title', 'Inventory')
@section('content')
<div class="page-header flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
    <div>
        <h2 class="page-title">Inventory</h2>
        <p class="page-subtitle">Track stock levels across all products</p>
    </div>
</div>

<div class="grid grid-cols-1 sm:grid-cols-3 gap-4 mb-6">
    <a href="{{ route('inventory.stock-in') }}" class="btn-primary justify-center">
        <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/></svg>
        Stock In
    </a>
    <a href="{{ route('inventory.stock-out') }}" class="btn-primary justify-center">
        <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 12H4"/></svg>
        Stock Out
    </a>
    <a href="{{ route('inventory.adjustment') }}" class="btn-secondary justify-center">
        <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
        Manual Adjustment
    </a>
</div>

<div class="table-container dark:bg-dark-card dark:border-dark-border">
    <div class="overflow-x-auto scrollbar-thin">
        <table class="min-w-full divide-y divide-gray-100 dark:divide-dark-border text-sm">
            <thead>
                <tr>
                    <th class="table-th dark:text-dark-muted">Product ID</th>
                    <th class="table-th dark:text-dark-muted">Name</th>
                    <th class="table-th dark:text-dark-muted">Current Stock</th>
                    <th class="table-th dark:text-dark-muted">Alert Limit</th>
                    <th class="table-th dark:text-dark-muted">Status</th>
                    <th class="table-th text-right dark:text-dark-muted">Actions</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-50 dark:divide-dark-border">
                @forelse($products as $product)
                    @php $isLowStock = $product->current_stock <= $product->alert_limit; @endphp
                    <tr class="table-row">
                        <td class="table-td font-mono text-xs text-primary-600 font-medium"><a href="{{ route('inventory.ledger', $product) }}" class="hover:underline">{{ $product->id }}</a></td>
                        <td class="table-td font-medium text-gray-900 dark:text-dark-text"><a href="{{ route('inventory.ledger', $product) }}" class="hover:underline text-gray-900 dark:text-dark-text">{{ $product->name }}</a></td>
                        <td class="table-td">
                            <span class="{{ $isLowStock ? 'text-red-600 font-semibold' : 'text-gray-900 dark:text-dark-text' }}">{{ $product->current_stock }}</span>
                        </td>
                        <td class="table-td text-gray-600 dark:text-dark-muted">{{ $product->alert_limit }}</td>
                        <td class="table-td">
                            @if($isLowStock)
                                <span class="badge badge-danger">Low Stock</span>
                            @else
                                <span class="badge badge-success">In Stock</span>
                            @endif
                        </td>
                        <td class="table-td text-right">
                            <x-row-actions :view-url="route('inventory.ledger', $product)" item-name="transaction" :can-edit="false" :can-delete="false" />
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="6" class="px-6 py-12 text-center">
                            <div class="w-16 h-16 rounded-2xl bg-gray-50 dark:bg-dark-surface flex items-center justify-center mx-auto mb-3">
                                <svg class="w-8 h-8 text-gray-300 dark:text-dark-muted" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/></svg>
                            </div>
                            <p class="text-sm font-medium text-gray-900 dark:text-dark-text">No products found</p>
                        </td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>

<x-pagination :paginator="$products" />
@endsection