@extends('layouts.app')

@section('title', 'Add New Stock')
@section('page-title', 'Add New Stock')

@section('content')
<div class="space-y-6">
    <!-- Header -->
    <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>
                <h2 class="text-2xl font-bold text-gray-900">Add New Stock Item</h2>
                <p class="mt-1 text-sm text-gray-500">Create a new product in your inventory</p>
            </div>
            <div class="flex space-x-3">
                <a href="{{ route('stocks.index') }}" 
                   class="inline-flex items-center px-4 py-2 bg-gray-600 text-white rounded-md hover:bg-gray-700">
                    <i class="fas fa-arrow-left mr-2"></i>Back to Stock
                </a>
            </div>
        </div>
    </div>

    <!-- Form -->
    <div class="bg-white rounded-lg shadow-sm p-6">
        <form method="POST" action="{{ route('stocks.store') }}" class="space-y-6">
            @csrf
            
            <!-- Basic Information -->
            <div>
                <h3 class="text-lg font-medium text-gray-900 mb-4">Basic Information</h3>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label for="supplier_id" class="block text-sm font-medium text-gray-700">Supplier *</label>
                        <select name="supplier_id" id="supplier_id" required
                                class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary-500 focus:border-primary-500">
                            <option value="">Select Supplier</option>
                            @foreach($suppliers as $supplier)
                                <option value="{{ $supplier->id }}" {{ old('supplier_id') == $supplier->id ? 'selected' : '' }}>
                                    {{ $supplier->business_name }}
                                </option>
                            @endforeach
                        </select>
                        @error('supplier_id')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label for="category_id" class="block text-sm font-medium text-gray-700">Category *</label>
                        <select name="category_id" id="category_id" required
                                class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary-500 focus:border-primary-500">
                            <option value="">Select 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="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label for="product_name" class="block text-sm font-medium text-gray-700">Product Name *</label>
                        <input type="text" name="product_name" id="product_name" value="{{ old('product_name') }}" required
                               class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary-500 focus:border-primary-500">
                        @error('product_name')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label for="product_code" class="block text-sm font-medium text-gray-700">Product Code *</label>
                        <input type="text" name="product_code" id="product_code" value="{{ old('product_code') }}" required
                               class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary-500 focus:border-primary-500">
                        @error('product_code')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <div class="md:col-span-2">
                        <label for="description" class="block text-sm font-medium text-gray-700">Description</label>
                        <textarea name="description" id="description" rows="3"
                                  class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary-500 focus:border-primary-500">{{ old('description') }}</textarea>
                        @error('description')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>
                </div>
            </div>

            <!-- Pricing & Inventory -->
            <div>
                <h3 class="text-lg font-medium text-gray-900 mb-4">Pricing & Inventory</h3>
                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                    <div>
                        <label for="unit" class="block text-sm font-medium text-gray-700">Unit *</label>
                        <select name="unit" id="unit" required
                                class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary-500 focus:border-primary-500">
                            <option value="">Select Unit</option>
                            @foreach($units as $unit)
                                <option value="{{ $unit }}" {{ old('unit') === $unit ? 'selected' : '' }}>
                                    {{ ucfirst($unit) }}
                                </option>
                            @endforeach
                        </select>
                        @error('unit')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label for="price_per_unit" class="block text-sm font-medium text-gray-700">Price per Unit (₹) *</label>
                        <input type="number" name="price_per_unit" id="price_per_unit" step="0.01" min="0" value="{{ old('price_per_unit') }}" required
                               class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary-500 focus:border-primary-500">
                        @error('price_per_unit')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label for="lead_time_days" class="block text-sm font-medium text-gray-700">Lead Time (Days) *</label>
                        <input type="number" name="lead_time_days" id="lead_time_days" min="1" value="{{ old('lead_time_days', 7) }}" required
                               class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary-500 focus:border-primary-500">
                        @error('lead_time_days')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label for="minimum_order_quantity" class="block text-sm font-medium text-gray-700">Minimum Order Quantity *</label>
                        <input type="number" name="minimum_order_quantity" id="minimum_order_quantity" step="0.01" min="0" value="{{ old('minimum_order_quantity') }}" required
                               class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary-500 focus:border-primary-500">
                        @error('minimum_order_quantity')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label for="available_quantity" class="block text-sm font-medium text-gray-700">Available Quantity *</label>
                        <input type="number" name="available_quantity" id="available_quantity" step="0.01" min="0" value="{{ old('available_quantity') }}" required
                               class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary-500 focus:border-primary-500">
                        @error('available_quantity')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label for="quality_grade" class="block text-sm font-medium text-gray-700">Quality Grade</label>
                        <select name="quality_grade" id="quality_grade"
                                class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary-500 focus:border-primary-500">
                            <option value="">Select Grade</option>
                            @foreach($qualityGrades as $grade)
                                <option value="{{ $grade }}" {{ old('quality_grade') === $grade ? 'selected' : '' }}>
                                    Grade {{ $grade }}
                                </option>
                            @endforeach
                        </select>
                        @error('quality_grade')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>
                </div>
            </div>

            <!-- Specifications -->
            <div>
                <h3 class="text-lg font-medium text-gray-900 mb-4">Specifications</h3>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label for="spec_gsm" class="block text-sm font-medium text-gray-700">GSM</label>
                        <input type="number" name="specifications[gsm]" id="spec_gsm" value="{{ old('specifications.gsm') }}"
                               class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary-500 focus:border-primary-500">
                    </div>

                    <div>
                        <label for="spec_width" class="block text-sm font-medium text-gray-700">Width</label>
                        <input type="text" name="specifications[width]" id="spec_width" value="{{ old('specifications.width') }}"
                               placeholder="e.g., 44&quot;, 58&quot;"
                               class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary-500 focus:border-primary-500">
                    </div>

                    <div>
                        <label for="spec_composition" class="block text-sm font-medium text-gray-700">Composition</label>
                        <input type="text" name="specifications[composition]" id="spec_composition" value="{{ old('specifications.composition') }}"
                               placeholder="e.g., 100% Cotton"
                               class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary-500 focus:border-primary-500">
                    </div>

                    <div>
                        <label for="spec_weave" class="block text-sm font-medium text-gray-700">Weave</label>
                        <input type="text" name="specifications[weave]" id="spec_weave" value="{{ old('specifications.weave') }}"
                               placeholder="e.g., Plain, Twill"
                               class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary-500 focus:border-primary-500">
                    </div>

                    <div>
                        <label for="spec_finish" class="block text-sm font-medium text-gray-700">Finish</label>
                        <input type="text" name="specifications[finish]" id="spec_finish" value="{{ old('specifications.finish') }}"
                               placeholder="e.g., Mercerized"
                               class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary-500 focus:border-primary-500">
                    </div>
                </div>
            </div>

            <!-- Colors & Sizes -->
            <div>
                <h3 class="text-lg font-medium text-gray-900 mb-4">Available Options</h3>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label for="colors_available" class="block text-sm font-medium text-gray-700">Colors Available</label>
                        <input type="text" name="colors_available_input" id="colors_available" value="{{ old('colors_available_input') }}"
                               placeholder="Enter colors separated by commas (e.g., White, Black, Red)"
                               class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary-500 focus:border-primary-500">
                        <p class="mt-1 text-xs text-gray-500">Separate multiple colors with commas</p>
                    </div>

                    <div>
                        <label for="sizes_available" class="block text-sm font-medium text-gray-700">Sizes Available</label>
                        <input type="text" name="sizes_available_input" id="sizes_available" value="{{ old('sizes_available_input') }}"
                               placeholder="Enter sizes separated by commas (e.g., S, M, L, XL)"
                               class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary-500 focus:border-primary-500">
                        <p class="mt-1 text-xs text-gray-500">Separate multiple sizes with commas</p>
                    </div>
                </div>
            </div>

            <!-- Quality Notes -->
            <div>
                <label for="quality_notes" class="block text-sm font-medium text-gray-700">Quality Notes</label>
                <textarea name="quality_notes" id="quality_notes" rows="3"
                          class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary-500 focus:border-primary-500">{{ old('quality_notes') }}</textarea>
                @error('quality_notes')
                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                @enderror
            </div>

            <!-- Submit Buttons -->
            <div class="flex justify-end space-x-3 pt-6 border-t border-gray-200">
                <a href="{{ route('stocks.index') }}" 
                   class="px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">
                    Cancel
                </a>
                <button type="submit" 
                        class="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-save mr-2"></i>Create Stock Item
                </button>
            </div>
        </form>
    </div>
</div>

<script>
// Convert comma-separated strings to arrays before form submission
document.querySelector('form').addEventListener('submit', function(e) {
    const colorsInput = document.getElementById('colors_available');
    const sizesInput = document.getElementById('sizes_available');
    
    // Create hidden inputs for arrays
    if (colorsInput.value.trim()) {
        const colors = colorsInput.value.split(',').map(color => color.trim()).filter(color => color);
        colors.forEach((color, index) => {
            const hiddenInput = document.createElement('input');
            hiddenInput.type = 'hidden';
            hiddenInput.name = `colors_available[${index}]`;
            hiddenInput.value = color;
            this.appendChild(hiddenInput);
        });
    }
    
    if (sizesInput.value.trim()) {
        const sizes = sizesInput.value.split(',').map(size => size.trim()).filter(size => size);
        sizes.forEach((size, index) => {
            const hiddenInput = document.createElement('input');
            hiddenInput.type = 'hidden';
            hiddenInput.name = `sizes_available[${index}]`;
            hiddenInput.value = size;
            this.appendChild(hiddenInput);
        });
    }
});
</script>
@endsection