<div>
    <x-layouts.app title="{{ __('Low Stock Items') }}">
        <!-- Page Header -->
        <div class="page-header d-flex justify-content-between align-items-center">
            <div>
                <h1 class="page-title">{{ __('Low Stock Items') }}</h1>
                <p class="text-muted mb-0">{{ __('Products that need to be reordered') }}</p>
            </div>
            <div class="d-flex gap-2">
                <button wire:click="export" class="btn btn-outline-success">
                    <i class="fas fa-file-excel me-2"></i>{{ __('Export') }}
                </button>
                <a href="{{ route('inventory.index') }}" class="btn btn-outline-secondary">
                    <i class="fas fa-arrow-left me-2"></i>{{ __('Back') }}
                </a>
                <a href="{{ route('purchases.create') }}" class="btn btn-primary">
                    <i class="fas fa-shopping-cart me-2"></i>{{ __('Create PO') }}
                </a>
            </div>
        </div>

        <!-- Stats Cards -->
        <div class="row g-3 mb-4">
            <div class="col-md-6">
                <div class="card bg-warning text-dark">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <h6 class="mb-0">{{ __('Low Stock') }}</h6>
                                <h2 class="mb-0">{{ $this->lowStockCount }}</h2>
                            </div>
                            <i class="fas fa-exclamation-triangle fa-3x opacity-50"></i>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="card bg-danger text-white">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <h6 class="mb-0 text-white-50">{{ __('Out of Stock') }}</h6>
                                <h2 class="mb-0">{{ $this->outOfStockCount }}</h2>
                            </div>
                            <i class="fas fa-times-circle fa-3x opacity-50"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Filters -->
        <div class="card mb-4">
            <div class="card-body">
                <div class="row g-3">
                    <div class="col-md-4">
                        <label class="form-label">{{ __('Search') }}</label>
                        <input type="text" class="form-control" wire:model.live.debounce.300ms="search" 
                               placeholder="{{ __('Product name or SKU...') }}">
                    </div>
                    <div class="col-md-3">
                        <label class="form-label">{{ __('Category') }}</label>
                        <select class="form-select" wire:model.live="categoryFilter">
                            <option value="">{{ __('All') }}</option>
                            @foreach($categories as $category)
                                <option value="{{ $category->id }}">{{ $category->localized_name }}</option>
                            @endforeach
                        </select>
                    </div>
                    @if($branches->count() > 1)
                        <div class="col-md-3">
                            <label class="form-label">{{ __('Branch') }}</label>
                            <select class="form-select" wire:model.live="branchFilter">
                                @foreach($branches as $branch)
                                    <option value="{{ $branch->id }}">{{ $branch->name }}</option>
                                @endforeach
                            </select>
                        </div>
                    @endif
                </div>
            </div>
        </div>

        <!-- Low Stock Table -->
        <div class="card">
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-hover mb-0">
                        <thead class="table-light">
                            <tr>
                                <th class="cursor-pointer" wire:click="sortBy('name')">
                                    {{ __('Product') }}
                                    @if($sortField === 'name')
                                        <i class="fas fa-sort-{{ $sortDirection === 'asc' ? 'up' : 'down' }} ms-1"></i>
                                    @endif
                                </th>
                                <th>{{ __('Category') }}</th>
                                <th class="text-center cursor-pointer" wire:click="sortBy('min_stock')">
                                    {{ __('Min Stock') }}
                                    @if($sortField === 'min_stock')
                                        <i class="fas fa-sort-{{ $sortDirection === 'asc' ? 'up' : 'down' }} ms-1"></i>
                                    @endif
                                </th>
                                <th class="text-center cursor-pointer" wire:click="sortBy('quantity')">
                                    {{ __('Current') }}
                                    @if($sortField === 'quantity')
                                        <i class="fas fa-sort-{{ $sortDirection === 'asc' ? 'up' : 'down' }} ms-1"></i>
                                    @endif
                                </th>
                                <th class="text-center">{{ __('Needed') }}</th>
                                <th>{{ __('Status') }}</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($items as $stock)
                                @php
                                    $product = $stock->product;
                                    $needed = max(0, $product->min_stock - $stock->quantity);
                                    $isOut = $stock->quantity <= 0;
                                @endphp
                                <tr wire:key="stock-{{ $stock->id }}" class="{{ $isOut ? 'table-danger' : 'table-warning' }}">
                                    <td>
                                        <strong>{{ $product->localized_name }}</strong>
                                        <small class="text-muted d-block">{{ $product->sku }}</small>
                                    </td>
                                    <td>
                                        <span class="badge" style="background-color: {{ $product->category?->color ?? '#6c757d' }}">
                                            {{ $product->category?->localized_name ?? '-' }}
                                        </span>
                                    </td>
                                    <td class="text-center">{{ $product->min_stock }}</td>
                                    <td class="text-center">
                                        <strong class="{{ $isOut ? 'text-danger' : 'text-warning' }}">
                                            {{ number_format($stock->quantity, 0) }}
                                        </strong>
                                    </td>
                                    <td class="text-center">
                                        <span class="badge bg-primary fs-6">+{{ $needed }}</span>
                                    </td>
                                    <td>
                                        @if($isOut)
                                            <span class="badge bg-danger">{{ __('Out of Stock') }}</span>
                                        @else
                                            <span class="badge bg-warning text-dark">{{ __('Low Stock') }}</span>
                                        @endif
                                    </td>
                                    <td>
                                        <a href="{{ route('purchases.create') }}?product_id={{ $product->id }}" 
                                           class="btn btn-sm btn-outline-primary" title="{{ __('Create PO') }}">
                                            <i class="fas fa-shopping-cart"></i>
                                        </a>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="7" class="text-center py-5">
                                        <i class="fas fa-check-circle fa-3x text-success mb-3 d-block"></i>
                                        <h5 class="text-success">{{ __('All Good!') }}</h5>
                                        <p class="text-muted mb-0">{{ __('No products are currently low on stock.') }}</p>
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
            @if($items->hasPages())
                <div class="card-footer">
                    {{ $items->links() }}
                </div>
            @endif
        </div>

        <style>
            .cursor-pointer { cursor: pointer; }
        </style>
    </x-layouts.app>
</div>
