<div>
    <x-layouts.app title="{{ __('Stock Overview') }}">
        <!-- Page Header -->
        <div class="page-header d-flex justify-content-between align-items-center">
            <div>
                <h1 class="page-title">{{ __('Stock Overview') }}</h1>
                <p class="text-muted mb-0">{{ __('View inventory levels across products') }}</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.adjustments') }}" class="btn btn-outline-primary">
                    <i class="fas fa-sliders-h me-2"></i>{{ __('Adjustments') }}
                </a>
                <a href="{{ route('inventory.low-stock') }}" class="btn btn-outline-warning">
                    <i class="fas fa-exclamation-triangle me-2"></i>{{ __('Low Stock') }}
                </a>
            </div>
        </div>

        <!-- Stats Cards -->
        <div class="row g-3 mb-4">
            <div class="col-md-3">
                <div class="card bg-primary text-white">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <h6 class="mb-0 text-white-50">{{ __('Total Products') }}</h6>
                                <h3 class="mb-0">{{ $this->totalProducts }}</h3>
                            </div>
                            <i class="fas fa-boxes fa-2x opacity-50"></i>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card bg-success text-white">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <h6 class="mb-0 text-white-50">{{ __('Stock Value') }}</h6>
                                <h3 class="mb-0">{{ $currency }} {{ number_format($this->totalStockValue, 0) }}</h3>
                            </div>
                            <i class="fas fa-coins fa-2x opacity-50"></i>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <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 text-dark-50">{{ __('Low Stock') }}</h6>
                                <h3 class="mb-0">{{ $this->lowStockCount }}</h3>
                            </div>
                            <i class="fas fa-exclamation-triangle fa-2x opacity-50"></i>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <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>
                                <h3 class="mb-0">{{ $this->outOfStockCount }}</h3>
                            </div>
                            <i class="fas fa-times-circle fa-2x 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-3">
                        <label class="form-label">{{ __('Search') }}</label>
                        <div class="input-group">
                            <span class="input-group-text"><i class="fas fa-search"></i></span>
                            <input type="text" class="form-control" wire:model.live.debounce.300ms="search" 
                                   placeholder="{{ __('Product name or SKU...') }}">
                        </div>
                    </div>
                    <div class="col-md-2">
                        <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>
                    <div class="col-md-2">
                        <label class="form-label">{{ __('Stock Level') }}</label>
                        <select class="form-select" wire:model.live="stockFilter">
                            <option value="">{{ __('All') }}</option>
                            <option value="out">{{ __('Out of Stock') }}</option>
                        </select>
                    </div>
                     <div class="col-md-2">
                        <label class="form-label">{{ __('Product Type') }}</label>
                        <select class="form-select" wire:model.live="typeFilter">
                            <option value="">{{ __('All') }}</option>
                            <option value="physical">{{ __('Physical') }}</option>
                            <option value="service">{{ __('Service') }}</option>
                        </select>
                    </div>
                    @if($branches->count() > 1)
                        <div class="col-md-2">
                            <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
                    @if($locations->count() > 0)
                        <div class="col-md-2">
                            <label class="form-label">{{ __('Location') }}</label>
                            <select class="form-select" wire:model.live="locationFilter">
                                <option value="">{{ __('All Locations') }}</option>
                                @foreach($locations as $loc)
                                    <option value="{{ $loc->id }}">{{ $loc->localized_name }}</option>
                                @endforeach
                            </select>
                        </div>
                    @endif
                    <div class="col-md-1">
                        <label class="form-label">{{ __('Show') }}</label>
                        <select class="form-select" wire:model.live="perPage">
                            <option value="25">25</option>
                            <option value="50">50</option>
                            <option value="100">100</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>

        <!-- 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>{{ __('SKU') }}</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">{{ __('Current Stock') }}</th>
                                <th class="text-end">{{ __('Cost') }}</th>
                                <th class="text-end">{{ __('Value') }}</th>
                                <th>{{ __('Status') }}</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($products as $product)
                                @php
                                    $qty = $product->stocks->sum('quantity');
                                    $value = $qty * $product->cost_price;
                                    $isLow = $qty > 0 && $qty <= $product->min_stock;
                                    $isOut = $qty <= 0;
                                @endphp
                                <tr wire:key="product-{{ $product->id }}" class="{{ $isOut ? 'table-danger' : ($isLow ? 'table-warning' : '') }}">
                                    <td>
                                        <strong>{{ $product->localized_name }}</strong>
                                    </td>
                                    <td>
                                        <code>{{ $product->sku }}</code>
                                    </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' : ($isLow ? 'text-warning' : 'text-success') }}">
                                            {{ number_format($qty, 0) }}
                                        </strong>
                                    </td>
                                    <td class="text-end">{{ $currency }} {{ number_format($product->cost_price, 2) }}</td>
                                    <td class="text-end">
                                        <strong>{{ $currency }} {{ number_format($value, 2) }}</strong>
                                    </td>
                                    <td>
                                        @if($isOut)
                                            <span class="badge bg-danger">{{ __('Out of Stock') }}</span>
                                        @elseif($isLow)
                                            <span class="badge bg-warning text-dark">{{ __('Low Stock') }}</span>
                                        @else
                                            <span class="badge bg-success">{{ __('In Stock') }}</span>
                                        @endif
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="8" class="text-center py-5">
                                        <i class="fas fa-boxes fa-3x text-muted mb-3 d-block"></i>
                                        <p class="text-muted mb-0">{{ __('No products found.') }}</p>
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
            @if($products->hasPages())
                <div class="card-footer">
                    {{ $products->links() }}
                </div>
            @endif
        </div>

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