@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">
        <!-- 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-plus-circle text-orange-600 text-xl"></i>
                        </div>
                        <div>
                            <h1 class="text-2xl font-bold text-gray-900">Create New Item</h1>
                            <p class="mt-1 text-sm text-gray-500">Add a new item to your inventory</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Form Card -->
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 max-w-4xl">
            <form method="POST" action="{{ route('inventory.items.store') }}">
                @csrf

                <!-- Form Sections -->
                <div class="space-y-6">
                    <!-- Basic Information Section -->
                    <div>
                        <div class="flex items-center mb-6">
                            <i class="fas fa-info-circle text-gray-400 mr-2"></i>
                            <h2 class="text-lg font-semibold text-gray-900">Basic Information</h2>
                        </div>

                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <!-- Category -->
                            <div>
                                <label for="category_id" class="block text-sm font-medium text-gray-700 mb-2">
                                    <i class="fas fa-tag text-gray-400 mr-1"></i> Category *
                                </label>
                                <select name="category_id" id="category_id" required 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 @error('category_id') border-red-500 @enderror">
                                    <option value="">Select a category</option>
                                    @foreach($categories as $category)
                                    <option value="{{ $category->id }}" {{ old('category_id') == $category->id ? 'selected' : '' }}>
                                        {{ $category->name }}
                                    </option>
                                    @endforeach
                                </select>
                                @error('category_id')
                                <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
                                @enderror
                            </div>

                            <!-- Item Name -->
                            <div>
                                <label for="name" class="block text-sm font-medium text-gray-700 mb-2">
                                    <i class="fas fa-box text-gray-400 mr-1"></i> Item Name *
                                </label>
                                <input type="text" name="name" id="name" required 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 @error('name') border-red-500 @enderror" value="{{ old('name') }}" placeholder="e.g., Safety Helmet">
                                @error('name')
                                <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
                                @enderror
                            </div>

                            <!-- Item Code -->
                            <div>
                                <label for="sku" class="block text-sm font-medium text-gray-700 mb-2">
                                    <i class="fas fa-barcode text-gray-400 mr-1"></i> Item Code (SKU) *
                                </label>
                                <input type="text" name="sku" id="sku" required 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 font-mono @error('sku') border-red-500 @enderror" value="{{ old('sku') }}" placeholder="ITEM-001">
                                @error('sku')
                                <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
                                @enderror
                            </div>

                            <!-- Description -->
                            <div>
                                <label for="description" class="block text-sm font-medium text-gray-700 mb-2">
                                    <i class="fas fa-align-left text-gray-400 mr-1"></i> Description
                                </label>
                                <textarea name="description" id="description" rows="3" 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 resize-none" placeholder="Add details about this item...">{{ old('description') }}</textarea>
                            </div>
                        </div>
                    </div>

                    <!-- Stock Information Section -->
                    <div>
                        <div class="flex items-center mb-6">
                            <i class="fas fa-warehouse text-gray-400 mr-2"></i>
                            <h2 class="text-lg font-semibold text-gray-900">Stock Information</h2>
                        </div>

                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <!-- Initial Quantity -->
                            <div>
                                <label for="stock_quantity" class="block text-sm font-medium text-gray-700 mb-2">
                                    <i class="fas fa-cubes text-gray-400 mr-1"></i> Initial Quantity *
                                </label>
                                <input type="number" name="stock_quantity" id="stock_quantity" required min="0" 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" value="{{ old('stock_quantity', 0) }}" placeholder="0">
                                @error('stock_quantity')
                                <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
                                @enderror
                            </div>

                            <!-- Unit -->
                            <div>
                                <label for="unit" class="block text-sm font-medium text-gray-700 mb-2">
                                    <i class="fas fa-ruler-horizontal text-gray-400 mr-1"></i> Unit *
                                </label>
                                <input type="text" name="unit" id="unit" required 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" value="{{ old('unit', 'pcs') }}" placeholder="pcs, kg, m, etc">
                                @error('unit')
                                <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <!-- Pricing Section -->
                    <div>
                        <div class="flex items-center mb-6">
                            <i class="fas fa-rupee-sign text-gray-400 mr-2"></i>
                            <h2 class="text-lg font-semibold text-gray-900">Pricing</h2>
                        </div>

                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <!-- Unit Cost -->
                            <div>
                                <label for="cost_price" class="block text-sm font-medium text-gray-700 mb-2">
                                    <i class="fas fa-coins text-gray-400 mr-1"></i> Unit Cost (₹) *
                                </label>
                                <div class="relative">
                                    <span class="absolute left-4 top-2.5 text-gray-500 font-semibold">₹</span>
                                    <input type="number" name="cost_price" id="cost_price" required step="0.01" min="0" class="w-full pl-8 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-orange-500 transition-colors" value="{{ old('cost_price', 0) }}" placeholder="0.00">
                                </div>
                                @error('cost_price')
                                <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
                                @enderror
                            </div>

                            <!-- Selling Price -->
                            <div>
                                <label for="selling_price" class="block text-sm font-medium text-gray-700 mb-2">
                                    <i class="fas fa-tag text-gray-400 mr-1"></i> Selling Price (₹) *
                                </label>
                                <div class="relative">
                                    <span class="absolute left-4 top-2.5 text-gray-500 font-semibold">₹</span>
                                    <input type="number" name="selling_price" id="selling_price" required step="0.01" min="0" class="w-full pl-8 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-orange-500 transition-colors" value="{{ old('selling_price', 0) }}" placeholder="0.00">
                                </div>
                                @error('selling_price')
                                <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <!-- Form Actions -->
                    <div class="flex flex-col sm:flex-row gap-3 pt-6 border-t border-gray-200">
                        <a href="{{ route('inventory.items.index') }}" class="inline-flex items-center px-6 py-2 bg-gray-600 text-white text-sm font-medium rounded-lg hover:bg-gray-700 transition-all duration-200 shadow-sm hover:shadow-md">
                            <i class="fas fa-times mr-2"></i> Cancel
                        </a>
                        <button type="submit" class="inline-flex items-center px-6 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-save mr-2"></i> Create Item
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection