@extends('layouts.vendor')

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

@section('content')
<div class="bg-white rounded-xl shadow-sm p-6">
    <form action="{{ route('vendor.products.store') }}" method="POST" enctype="multipart/form-data">
        @csrf

        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
            {{-- Basic Info --}}
            <div class="lg:col-span-2">
                <h3 class="font-semibold text-gray-700 mb-4 border-b pb-2">Basic Information</h3>
            </div>

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

            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Category *</label>
                <select name="category_id" required class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500">
                    <option value="">Select Category</option>
                    @foreach($categories as $cat)
                        <option value="{{ $cat->id }}" {{ old('category_id') == $cat->id ? 'selected' : '' }}>{{ $cat->name }}</option>
                    @endforeach
                </select>
            </div>

            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Brand</label>
                <select name="brand_id" class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500">
                    <option value="">Select Brand (optional)</option>
                    @foreach($brands as $brand)
                        <option value="{{ $brand->id }}" {{ old('brand_id') == $brand->id ? 'selected' : '' }}>{{ $brand->name }}</option>
                    @endforeach
                </select>
            </div>

            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Condition *</label>
                <select name="condition" required class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500">
                    <option value="new" {{ old('condition') == 'new' ? 'selected' : '' }}>New</option>
                    <option value="used" {{ old('condition') == 'used' ? 'selected' : '' }}>Used</option>
                    <option value="refurbished" {{ old('condition') == 'refurbished' ? 'selected' : '' }}>Refurbished</option>
                </select>
            </div>

            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Price ($) *</label>
                <input type="number" name="price" value="{{ old('price') }}" step="0.01" min="0" required class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500">
            </div>

            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Sale Price ($)</label>
                <input type="number" name="sale_price" value="{{ old('sale_price') }}" step="0.01" min="0" class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500">
            </div>

            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Stock Quantity *</label>
                <input type="number" name="stock_quantity" value="{{ old('stock_quantity', 1) }}" min="0" required class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500">
            </div>

            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Part Number</label>
                <input type="text" name="part_number" value="{{ old('part_number') }}" class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500">
            </div>

            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">OEM Number</label>
                <input type="text" name="oem_number" value="{{ old('oem_number') }}" class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500">
            </div>

            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Weight (kg)</label>
                <input type="number" name="weight" value="{{ old('weight') }}" step="0.01" class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500">
            </div>

            <div class="lg:col-span-2">
                <label class="block text-sm font-medium text-gray-700 mb-1">Short Description</label>
                <input type="text" name="short_description" value="{{ old('short_description') }}" maxlength="500" class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500">
            </div>

            <div class="lg:col-span-2">
                <label class="block text-sm font-medium text-gray-700 mb-1">Full Description</label>
                <textarea name="description" rows="5" class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500">{{ old('description') }}</textarea>
            </div>

            {{-- Images --}}
            <div class="lg:col-span-2 border-t pt-6">
                <h3 class="font-semibold text-gray-700 mb-4">Product Images</h3>
            </div>

            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Thumbnail Image</label>
                <input type="file" name="thumbnail" accept="image/*" class="w-full border border-gray-300 rounded-lg px-3 py-2">
            </div>

            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Additional Images</label>
                <input type="file" name="images[]" accept="image/*" multiple class="w-full border border-gray-300 rounded-lg px-3 py-2">
            </div>

            {{-- Car Compatibility --}}
            <div class="lg:col-span-2 border-t pt-6">
                <h3 class="font-semibold text-gray-700 mb-4">Vehicle Compatibility</h3>
                <p class="text-sm text-gray-500 mb-4">Select which vehicles this part is compatible with.</p>
                @foreach($carMakes as $make)
                <div class="mb-4">
                    <p class="font-medium text-gray-700 mb-2">{{ $make->name }}</p>
                    @foreach($make->models as $model)
                    <div class="ml-4 mb-2">
                        <p class="text-sm text-gray-600 mb-1">{{ $model->name }}</p>
                        <div class="flex flex-wrap gap-2 ml-4">
                            @foreach($model->years as $year)
                            <label class="flex items-center gap-1 text-sm cursor-pointer">
                                <input type="checkbox" name="car_years[]" value="{{ $year->id }}"
                                    {{ in_array($year->id, old('car_years', [])) ? 'checked' : '' }}>
                                {{ $year->year }}
                            </label>
                            @endforeach
                        </div>
                    </div>
                    @endforeach
                </div>
                @endforeach
            </div>
        </div>

        <div class="flex gap-4 mt-6 pt-6 border-t">
            <button type="submit" class="bg-blue-600 text-white px-6 py-2 rounded-lg hover:bg-blue-700 font-medium">Create Product</button>
            <a href="{{ route('vendor.products.index') }}" class="bg-gray-100 text-gray-700 px-6 py-2 rounded-lg hover:bg-gray-200">Cancel</a>
        </div>
    </form>
</div>
@endsection