@extends('layouts.app')

@section('content')
<div class="container-fluid px-4 py-6">
    <!-- Header -->
    <div class="flex justify-between items-center mb-6">
        <div>
            <h1 class="text-3xl font-bold text-gray-900">Create Inventory Allocation</h1>
            <p class="text-gray-600 mt-1">Allocate inventory items to a lead</p>
        </div>
    </div>

    <!-- Form -->
    <div class="bg-white rounded-lg shadow-sm p-6 max-w-2xl">
        <form method="POST" action="{{ route('inventory.allocations.store') }}">
            @csrf

            <div class="space-y-4">
                <div>
                    <label for="lead_id" class="block text-sm font-medium text-gray-700 mb-2">Lead *</label>
                    <select name="lead_id" id="lead_id" required class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent @error('lead_id') border-red-500 @enderror">
                        <option value="">Select a lead</option>
                        @foreach(\App\Models\Lead::orderBy('company_name')->get() as $lead)
                        <option value="{{ $lead->id }}" {{ old('lead_id') == $lead->id ? 'selected' : '' }}>
                            {{ $lead->company_name }} - {{ $lead->contact_person_name }}
                        </option>
                        @endforeach
                    </select>
                    @error('lead_id')
                    <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>

                <div>
                    <label for="inventory_item_id" class="block text-sm font-medium text-gray-700 mb-2">Item *</label>
                    <select name="inventory_item_id" id="inventory_item_id" required class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent @error('inventory_item_id') border-red-500 @enderror">
                        <option value="">Select an item</option>
                        @foreach(\App\Models\InventoryItem::with('category')->orderBy('name')->get() as $item)
                        <option value="{{ $item->id }}" {{ old('inventory_item_id') == $item->id ? 'selected' : '' }}>
                            {{ $item->name }} (Category: {{ $item->category->name ?? 'N/A' }}) - ₹{{ number_format($item->cost_price, 2) }}/{{ $item->unit }}
                        </option>
                        @endforeach
                    </select>
                    @error('inventory_item_id')
                    <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>

                <div>
                    <label for="quantity_allocated" class="block text-sm font-medium text-gray-700 mb-2">Quantity *</label>
                    <input type="number" name="quantity_allocated" id="quantity_allocated" required min="1" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent @error('quantity_allocated') border-red-500 @enderror" value="{{ old('quantity_allocated') }}">
                    @error('quantity_allocated')
                    <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>

                <div>
                    <label for="notes" class="block text-sm font-medium text-gray-700 mb-2">Notes</label>
                    <textarea name="notes" id="notes" rows="4" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent" placeholder="Add any notes about this allocation">{{ old('notes') }}</textarea>
                </div>

                <div class="flex gap-3 pt-4">
                    <button type="submit" class="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition">
                        <i class="fas fa-save mr-2"></i> Create Allocation
                    </button>
                    <a href="{{ route('inventory.allocations') }}" class="px-6 py-2 bg-gray-600 text-white rounded-lg hover:bg-gray-700 transition">
                        <i class="fas fa-times mr-2"></i> Cancel
                    </a>
                </div>
            </div>
        </form>
    </div>
</div>
@endsection