@extends('layouts.app')

@section('title', 'Edit Stock - ' . $stock->product_name)
@section('page-title', 'Edit Stock - ' . $stock->product_name)

@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">Edit Stock Item</h2>
                <p class="mt-1 text-sm text-gray-500">Update product information and inventory details</p>
            </div>
            <div class="flex space-x-3">
                <a href="{{ route('stocks.show', $stock) }}" 
                   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.update', $stock) }}" class="space-y-6">
            @csrf
            @method('PUT')
            
            <!-- 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', $stock->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', $stock->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', $stock->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', $stock->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', $stock->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', $stock->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', $stock->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', $stock->lead_time_days) }}" 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', $stock->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', $stock->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', $stock->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>

            <!-- Availability Status -->
            <div>
                <h3 class="text-lg font-medium text-gray-900 mb-4">Availability Status</h3>
                <div class="flex items-center">
                    <input type="checkbox" name="is_available" id="is_available" value="1" 
                           {{ old('is_available', $stock->is_available) ? 'checked' : '' }}
                           class="h-4 w-4 text-primary-600 focus:ring-primary-500 border-gray-300 rounded">
                    <label for="is_available" class="ml-2 block text-sm text-gray-900">
                        Product is available for orders
                    </label>
                </div>
                <p class="mt-1 text-xs text-gray-500">Uncheck this to temporarily disable the product without deleting it</p>
            </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', $stock->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', $stock->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', $stock->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', $stock->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', $stock->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', is_array($stock->colors_available) ? implode(', ', $stock->colors_available) : '') }}"
                               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', is_array($stock->sizes_available) ? implode(', ', $stock->sizes_available) : '') }}"
                               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', $stock->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.show', $stock) }}" 
                   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>Update Stock Item
                </button>
            </div>
        </form>
    </div>

    <!-- Danger Zone -->
    <div class="bg-white rounded-lg shadow-sm p-6 border border-red-200">
        <h3 class="text-lg font-medium text-red-900 mb-4">Danger Zone</h3>
        <div class="flex items-center justify-between">
            <div>
                <p class="text-sm text-red-700">Delete this stock item permanently. This action cannot be undone.</p>
            </div>
            <form method="POST" action="{{ route('stocks.destroy', $stock) }}" 
                  onsubmit="return confirm('Are you sure you want to delete this stock item? This action cannot be undone.')">
                @csrf
                @method('DELETE')
                <button type="submit" 
                        class="px-4 py-2 border border-red-300 rounded-md shadow-sm text-sm font-medium text-red-700 bg-white hover:bg-red-50">
                    <i class="fas fa-trash mr-2"></i>Delete Stock Item
                </button>
            </form>
        </div>
    </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