@extends('layouts.app')

@section('content')
<div class="min-h-screen bg-gray-50 py-8">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <!-- Error Messages -->
        @if(session('error'))
        <div class="bg-red-50 border border-red-200 rounded-xl p-4 mb-6">
            <div class="flex">
                <div class="flex-shrink-0">
                    <i class="fas fa-exclamation-triangle text-red-600 text-xl"></i>
                </div>
                <div class="ml-3">
                    <p class="text-sm text-red-800 font-medium">{{ session('error') }}</p>
                </div>
            </div>
        </div>
        @endif

        <!-- Success Messages -->
        @if(session('success'))
        <div class="bg-emerald-50 border border-emerald-200 rounded-xl p-4 mb-6">
            <div class="flex">
                <div class="flex-shrink-0">
                    <i class="fas fa-check-circle text-emerald-600 text-xl"></i>
                </div>
                <div class="ml-3">
                    <p class="text-sm text-emerald-800 font-medium">{{ session('success') }}</p>
                </div>
            </div>
        </div>
        @endif
        <!-- Page Header -->
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 mb-6">
            <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between">
                <div class="mb-4 sm:mb-0">
                    <div class="flex items-center">
                        <div class="bg-orange-100 rounded-lg p-3 mr-4">
                            <i class="fas fa-boxes text-orange-600 text-xl"></i>
                        </div>
                        <div>
                            <h1 class="text-2xl font-bold text-gray-900">Inventory Items</h1>
                            <p class="mt-1 text-sm text-gray-500">Manage and track your inventory items</p>
                        </div>
                    </div>
                </div>
                <div class="flex flex-wrap gap-3">
                    <a href="{{ route('inventory.items.create') }}" class="inline-flex items-center px-4 py-2 bg-orange-600 text-white text-sm font-medium rounded-lg hover:bg-orange-700 transition-all duration-200 shadow-sm hover:shadow-md">
                        <i class="fas fa-plus mr-2"></i> Add New Item
                    </a>
                </div>
            </div>
        </div>

        <!-- Search and Filters Section -->
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 mb-6">
            <form method="GET" action="{{ route('inventory.items.index') }}" class="grid grid-cols-1 md:grid-cols-4 gap-4 items-end">
                <!-- Search Input -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">
                        <i class="fas fa-search text-gray-400 mr-1"></i> Search Items
                    </label>
                    <div class="relative">
                        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                            <i class="fas fa-search text-gray-400"></i>
                        </div>
                        <input type="text" name="search" placeholder="Search by name or code..." value="{{ request('search') }}" class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-orange-500 transition-colors">
                    </div>
                </div>

                <!-- Category Filter -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">
                        <i class="fas fa-filter text-gray-400 mr-1"></i> Category
                    </label>
                    <select name="category_id" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-orange-500 transition-colors">
                        <option value="">All Categories</option>
                        @foreach($categories as $cat)
                        <option value="{{ $cat->id }}" {{ request('category_id') == $cat->id ? 'selected' : '' }}>
                            {{ $cat->name }}
                        </option>
                        @endforeach
                    </select>
                </div>

                <!-- Action Buttons -->
                <div class="flex gap-2">
                    <button type="submit" class="flex-1 px-4 py-2 bg-orange-100 text-orange-700 text-sm font-medium rounded-lg hover:bg-orange-200 transition-colors">
                        <i class="fas fa-search mr-2"></i> Search
                    </button>
                    <a href="{{ route('inventory.items.index') }}" class="px-4 py-2 border border-gray-300 text-gray-700 text-sm font-medium rounded-lg hover:bg-gray-50 transition-colors">
                        <i class="fas fa-redo mr-2"></i> Reset
                    </a>
                </div>
            </form>

            <!-- Search Results Info -->
            @if(request('search') || request('category_id'))
            <div class="mt-4 pt-4 border-t border-gray-200">
                <p class="text-sm text-gray-600">
                    <i class="fas fa-info-circle text-orange-500 mr-2"></i>
                    Found <span class="font-semibold text-gray-900">{{ $items->total() }}</span> item(s)
                    @if(request('search'))
                        matching "<span class="font-semibold">{{ request('search') }}</span>"
                    @endif
                </p>
            </div>
            @endif
        </div>

        <!-- Items Grid Section -->
        <div class="max-w-7xl mx-auto">
            @if($items->count() > 0)
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-5">
                @foreach($items as $item)
                <div class="group bg-white rounded-xl shadow-sm hover:shadow-xl transition-all duration-300 overflow-hidden border border-gray-100 hover:border-orange-300 flex flex-col h-full">
                    <!-- Card Header with Better Layout -->
                    <div class="bg-gradient-to-br from-orange-50 via-amber-50 to-orange-100 p-4 border-b border-gray-100">
                        <div class="flex items-center justify-between mb-3">
                            <div>
                                @if($item->category)
                                <span class="inline-flex items-center px-2.5 py-1 rounded-full bg-orange-100 text-orange-700 text-xs font-bold tracking-wide">
                                    {{ $item->category->name }}
                                </span>
                                @else
                                <span class="inline-flex items-center px-2.5 py-1 rounded-full bg-gray-200 text-gray-600 text-xs font-bold tracking-wide">
                                    Uncategorized
                                </span>
                                @endif
                            </div>
                            <!-- Stock Status Indicator -->
                            <div class="flex items-center gap-2">
                                <span class="text-xs font-semibold {{ $item->stock_quantity <= 5 ? 'text-red-600' : ($item->stock_quantity <= 10 ? 'text-yellow-600' : 'text-emerald-600') }}">
                                    {{ $item->stock_quantity <= 5 ? 'Low' : ($item->stock_quantity <= 10 ? 'Med' : 'Good') }}
                                </span>
                                <span class="w-3 h-3 rounded-full {{ $item->stock_quantity <= 5 ? 'bg-red-500' : ($item->stock_quantity <= 10 ? 'bg-yellow-500' : 'bg-emerald-500') }} shadow-sm"></span>
                            </div>
                        </div>
                        <p class="text-xs text-gray-600 font-mono bg-white bg-opacity-50 px-2 py-1 rounded inline-block">
                            <i class="fas fa-barcode mr-1"></i>{{ $item->sku }}
                        </p>
                    </div>

                    <!-- Card Body -->
                    <div class="flex-1 p-4 space-y-3">
                        <!-- Item Name -->
                        <a href="{{ route('inventory.items.show', $item) }}" class="block">
                            <h3 class="text-sm font-bold text-gray-900 group-hover:text-orange-600 transition line-clamp-2 leading-tight">
                                {{ $item->name }}
                            </h3>
                        </a>

                        <!-- Stock Status Card -->
                        <div class="p-3 rounded-lg border {{ $item->stock_quantity <= 5 ? 'bg-red-50 border-red-100' : ($item->stock_quantity <= 10 ? 'bg-yellow-50 border-yellow-100' : 'bg-emerald-50 border-emerald-100') }}">
                            <div class="flex items-center justify-between mb-2">
                                <span class="text-xs font-semibold {{ $item->stock_quantity <= 5 ? 'text-red-700' : ($item->stock_quantity <= 10 ? 'text-yellow-700' : 'text-emerald-700') }}">
                                    {{ $item->stock_quantity <= 5 ? '⚠ Low Stock' : ($item->stock_quantity <= 10 ? '⚡ Medium' : '✓ Good') }}
                                </span>
                                <span class="text-lg font-bold {{ $item->stock_quantity <= 5 ? 'text-red-600' : ($item->stock_quantity <= 10 ? 'text-yellow-600' : 'text-emerald-600') }}">
                                    {{ $item->stock_quantity }}
                                </span>
                            </div>
                            <p class="text-xs text-gray-600 mb-2">{{ $item->unit }} available</p>
                            <!-- Progress Bar -->
                            <div class="w-full bg-gray-300 rounded-full h-1.5">
                                @php
                                    $gradientClass = $item->stock_quantity <= 5 ? 'from-red-400 to-red-500' : ($item->stock_quantity <= 10 ? 'from-yellow-400 to-yellow-500' : 'from-emerald-400 to-emerald-500');
                                @endphp
                                <div class="bg-gradient-to-r {{ $gradientClass }} h-1.5 rounded-full transition-all duration-300" style="width: {{ min(($item->stock_quantity / 20 * 100), 100) }}%"></div>
                            </div>
                        </div>

                        <!-- Pricing Section -->
                        <div class="grid grid-cols-2 gap-2">
                            <div class="bg-gray-50 p-2.5 rounded-lg border border-gray-100 text-center">
                                <p class="text-xs text-gray-600 mb-1 font-medium">Cost Price</p>
                                <p class="text-sm font-bold text-gray-900">₹{{ number_format($item->cost_price, 2) }}</p>
                            </div>
                            <div class="bg-emerald-50 p-2.5 rounded-lg border border-emerald-100 text-center">
                                <p class="text-xs text-gray-600 mb-1 font-medium">Selling Price</p>
                                <p class="text-sm font-bold text-emerald-600">₹{{ number_format($item->selling_price, 2) }}</p>
                            </div>
                        </div>

                        <!-- Description -->
                        @if($item->description)
                        <p class="text-xs text-gray-500 leading-relaxed line-clamp-2 bg-gray-50 p-2 rounded">
                            {{ $item->description }}
                        </p>
                        @endif
                    </div>

                    <!-- Card Footer -->
                    <div class="bg-gray-50 border-t border-gray-100 px-3 py-2.5 flex gap-1.5">
                        <a href="{{ route('inventory.items.show', $item) }}" class="flex-1 inline-flex items-center justify-center gap-1 px-2.5 py-2 bg-orange-600 text-white text-xs font-semibold rounded-lg hover:bg-orange-700 transition-colors" title="View">
                            <i class="fas fa-eye"></i> <span class="hidden sm:inline">View</span>
                        </a>
                        <a href="{{ route('inventory.items.edit', $item) }}" class="flex-1 inline-flex items-center justify-center gap-1 px-2.5 py-2 bg-emerald-600 text-white text-xs font-semibold rounded-lg hover:bg-emerald-700 transition-colors" title="Edit">
                            <i class="fas fa-edit"></i> <span class="hidden sm:inline">Edit</span>
                        </a>
                        <form method="POST" action="{{ route('inventory.items.destroy', $item) }}" style="display: contents;" onsubmit="return confirm('Delete this item?')">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="flex-1 inline-flex items-center justify-center gap-1 px-2.5 py-2 bg-red-600 text-white text-xs font-semibold rounded-lg hover:bg-red-700 transition-colors" title="Delete">
                                <i class="fas fa-trash"></i> <span class="hidden sm:inline">Delete</span>
                            </button>
                        </form>
                    </div>
                </div>
                @endforeach
            </div>

            <!-- Pagination -->
            <div class="mt-8 flex justify-center">
                {{ $items->links() }}
            </div>
            @else
            <!-- Empty State -->
            <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-12 text-center">
                <div class="bg-gray-100 rounded-full p-6 mb-4 mx-auto w-24 h-24 flex items-center justify-center">
                    <i class="fas fa-box-open text-gray-400 text-2xl"></i>
                </div>
                <h3 class="text-lg font-medium text-gray-900 mb-2">No Items Found</h3>
                <p class="text-sm text-gray-500 max-w-md mx-auto">Get started by creating your first inventory item to organize your items.</p>
                <div class="flex gap-3 justify-center flex-wrap">
                    <a href="{{ route('inventory.items.create') }}" class="inline-flex items-center px-4 py-2 bg-orange-600 text-white text-sm font-medium rounded-lg hover:bg-orange-700 transition-all duration-200 shadow-sm hover:shadow-md">
                        <i class="fas fa-plus mr-2"></i> Create First Item
                    </a>
                    @if(request('search') || request('category_id'))
                    <a href="{{ route('inventory.items.index') }}" class="inline-flex items-center px-4 py-2 border border-gray-300 text-gray-700 text-sm font-medium rounded-lg hover:bg-gray-50 transition-colors">
                        <i class="fas fa-redo mr-2"></i> Clear Filters
                    </a>
                    @endif
                </div>
            </div>
            @endif
        </div>
    </div>
</div>
@endsection