@extends('layouts.app')

@section('title', 'Stock Management')
@section('page-title', 'Stock Management')

@section('content')
<div class="space-y-6">
    <!-- Header with Search and Filters -->
    <div class="bg-white rounded-lg shadow-sm p-6">
        <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between space-y-4 lg:space-y-0">
            <div class="flex-1">
                <form method="GET" class="grid grid-cols-1 md:grid-cols-6 gap-4">
                    <!-- Search -->
                    <div class="md:col-span-2">
                        <input type="text" 
                               name="search" 
                               value="{{ request('search') }}"
                               placeholder="Search products..." 
                               class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-primary-500 focus:border-primary-500">
                    </div>
                    
                    <!-- Availability Filter -->
                    <select name="availability" class="px-4 py-2 border border-gray-300 rounded-md focus:ring-primary-500 focus:border-primary-500">
                        <option value="">All Stock</option>
                        @foreach($availabilityOptions as $value => $label)
                            <option value="{{ $value }}" {{ request('availability') === $value ? 'selected' : '' }}>
                                {{ $label }}
                            </option>
                        @endforeach
                    </select>
                    
                    <!-- Supplier Filter -->
                    <select name="supplier" class="px-4 py-2 border border-gray-300 rounded-md focus:ring-primary-500 focus:border-primary-500">
                        <option value="">All Suppliers</option>
                        @foreach($suppliers as $supplier)
                            <option value="{{ $supplier->id }}" {{ request('supplier') == $supplier->id ? 'selected' : '' }}>
                                {{ $supplier->business_name }}
                            </option>
                        @endforeach
                    </select>
                    
                    <!-- Category Filter -->
                    <select name="category" class="px-4 py-2 border border-gray-300 rounded-md focus:ring-primary-500 focus:border-primary-500">
                        <option value="">All Categories</option>
                        @foreach($categories as $category)
                            <option value="{{ $category->id }}" {{ request('category') == $category->id ? 'selected' : '' }}>
                                {{ $category->name }}
                            </option>
                        @endforeach
                    </select>
                    
                    <button type="submit" class="px-4 py-2 bg-primary-600 text-white rounded-md hover:bg-primary-700">
                        <i class="fas fa-search mr-2"></i>Search
                    </button>
                </form>
            </div>
            
            <div class="flex space-x-3">
                <a href="{{ route('stocks.low-stock') }}" 
                   class="inline-flex items-center px-4 py-2 bg-yellow-600 text-white rounded-md hover:bg-yellow-700">
                    <i class="fas fa-exclamation-triangle mr-2"></i>Low Stock
                </a>
                <a href="{{ route('stocks.create') }}" 
                   class="inline-flex items-center px-4 py-2 bg-primary-600 text-white rounded-md hover:bg-primary-700">
                    <i class="fas fa-plus mr-2"></i>Add Stock
                </a>
            </div>
        </div>
    </div>

    <!-- Stock Grid -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
        @forelse($stocks as $stock)
            <div class="bg-white rounded-lg shadow-sm overflow-hidden hover:shadow-md transition-shadow">
                <!-- Product Image Placeholder -->
                <div class="h-48 bg-gray-200 flex items-center justify-center">
                    @if($stock->images && count($stock->images) > 0)
                        <img src="{{ $stock->images[0] }}" alt="{{ $stock->product_name }}" class="h-full w-full object-cover">
                    @else
                        <i class="fas fa-image text-gray-400 text-4xl"></i>
                    @endif
                </div>
                
                <!-- Product Info -->
                <div class="p-4">
                    <div class="flex items-start justify-between mb-2">
                        <h3 class="text-lg font-semibold text-gray-900 truncate">{{ $stock->product_name }}</h3>
                        @if($stock->is_featured)
                            <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">
                                <i class="fas fa-star mr-1"></i>Featured
                            </span>
                        @endif
                    </div>
                    
                    <p class="text-sm text-gray-600 mb-2">{{ $stock->product_code }}</p>
                    
                    <div class="flex items-center justify-between mb-2">
                        <span class="text-lg font-bold text-primary-600">₹{{ number_format($stock->price_per_unit, 2) }}</span>
                        <span class="text-sm text-gray-500">per {{ $stock->unit }}</span>
                    </div>
                    
                    <!-- Availability Status -->
                    <div class="flex items-center justify-between mb-3">
                        <div class="flex items-center space-x-2">
                            @if($stock->is_available && $stock->available_quantity > 0)
                                <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800">
                                    <i class="fas fa-check-circle mr-1"></i>Available
                                </span>
                            @elseif($stock->available_quantity <= 0)
                                <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-red-100 text-red-800">
                                    <i class="fas fa-times-circle mr-1"></i>Out of Stock
                                </span>
                            @else
                                <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
                                    <i class="fas fa-pause-circle mr-1"></i>Unavailable
                                </span>
                            @endif
                        </div>
                        <span class="text-sm text-gray-600">{{ number_format($stock->available_quantity, 2) }} {{ $stock->unit }}</span>
                    </div>
                    
                    <!-- Supplier Info -->
                    <div class="text-sm text-gray-600 mb-3">
                        <i class="fas fa-industry mr-1"></i>{{ $stock->supplier->business_name }}
                    </div>
                    
                    <!-- Category -->
                    @if($stock->category)
                        <div class="text-sm text-gray-600 mb-3">
                            <i class="fas fa-tag mr-1"></i>{{ $stock->category->name }}
                        </div>
                    @endif
                    
                    <!-- Quality Grade -->
                    @if($stock->quality_grade)
                        <div class="flex items-center justify-between mb-3">
                            <span class="text-sm text-gray-600">Quality:</span>
                            <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium 
                                {{ $stock->quality_grade === 'A' ? 'bg-green-100 text-green-800' : 
                                   ($stock->quality_grade === 'B' ? 'bg-yellow-100 text-yellow-800' : 'bg-red-100 text-red-800') }}">
                                Grade {{ $stock->quality_grade }}
                            </span>
                        </div>
                    @endif
                    
                    <!-- Actions -->
                    <div class="flex space-x-2">
                        <a href="{{ route('stocks.show', $stock) }}" 
                           class="flex-1 text-center px-3 py-2 bg-primary-600 text-white text-sm rounded-md hover:bg-primary-700">
                            <i class="fas fa-eye mr-1"></i>View
                        </a>
                        <a href="{{ route('stocks.edit', $stock) }}" 
                           class="flex-1 text-center px-3 py-2 bg-yellow-600 text-white text-sm rounded-md hover:bg-yellow-700">
                            <i class="fas fa-edit mr-1"></i>Edit
                        </a>
                    </div>
                </div>
            </div>
        @empty
            <div class="col-span-full text-center py-12">
                <i class="fas fa-boxes text-gray-400 text-6xl mb-4"></i>
                <h3 class="text-lg font-medium text-gray-900 mb-2">No stock items found</h3>
                <p class="text-gray-500 mb-4">
                    @if(request()->hasAny(['search', 'availability', 'supplier', 'category']))
                        No stock items match your current filters. Try adjusting your search criteria.
                    @else
                        Get started by adding your first stock item.
                    @endif
                </p>
                <a href="{{ route('stocks.create') }}" 
                   class="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-primary-600 hover:bg-primary-700">
                    <i class="fas fa-plus mr-2"></i>
                    Add First Stock Item
                </a>
            </div>
        @endforelse
    </div>

    <!-- Pagination -->
    @if($stocks->hasPages())
        <div class="bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6 rounded-lg shadow-sm">
            <div class="flex-1 flex justify-between sm:hidden">
                {{ $stocks->appends(request()->query())->links('pagination::simple-tailwind') }}
            </div>
            <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
                <div>
                    <p class="text-sm text-gray-700">
                        Showing {{ $stocks->firstItem() }} to {{ $stocks->lastItem() }} of {{ $stocks->total() }} results
                    </p>
                </div>
                <div>
                    {{ $stocks->appends(request()->query())->links() }}
                </div>
            </div>
        </div>
    @endif
</div>
@endsection