@extends('layouts.admin')

@section('title', 'Add Product - ' . $category->name . ' - ' . $vendor->vendor_name)

@section('content')
<div class="container-fluid">
    <!-- Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1 class="h3 mb-0 fw-bold">
            <i class="bi bi-plus-circle me-2"></i>Add New Product
        </h1>
    </div>

    <!-- Breadcrumb -->
    <nav aria-label="breadcrumb" class="mb-4">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ route('admin.vendors.index') }}">Vendors</a></li>
            <li class="breadcrumb-item"><a href="{{ route('admin.vendors.show', $vendor) }}">{{ $vendor->vendor_name }}</a></li>
            <li class="breadcrumb-item"><a href="{{ route('admin.vendors.products.index', $vendor) }}">Products</a></li>
            <li class="breadcrumb-item"><a href="{{ route('admin.vendors.products.products', ['vendor' => $vendor, 'categoryId' => $category->id]) }}">{{ $category->name }}</a></li>
            <li class="breadcrumb-item active">Add Product</li>
        </ol>
    </nav>

    <!-- Action Buttons -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <a href="{{ route('admin.vendors.products.products', ['vendor' => $vendor, 'categoryId' => $category->id]) }}" class="btn btn-outline-primary me-2">
                <i class="bi bi-arrow-left me-1"></i>Back to {{ $category->name }}
            </a>
        </div>
    </div>

    <form action="{{ route('admin.vendors.products.products.store', ['vendor' => $vendor, 'categoryId' => $category->id]) }}" method="POST" enctype="multipart/form-data">
        @csrf
        
        <div class="row g-4">
            <!-- Basic Information -->
            <div class="col-lg-8">
                <div class="card border-0 shadow-sm">
                    <div class="card-header bg-white border-0 pt-4 pb-3">
                        <h6 class="card-title mb-0 fw-bold">Basic Information</h6>
                    </div>
                    <div class="card-body">
                        <div class="row g-3">
                            <div class="col-12">
                                <label for="name" class="form-label fw-bold">Product Name *</label>
                                <input type="text" class="form-control @error('name') is-invalid @enderror" 
                                       id="name" name="name" value="{{ old('name') }}" 
                                       placeholder="Enter product name" required>
                                @error('name')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-12">
                                <label for="short_description" class="form-label fw-bold">Short Description</label>
                                <textarea class="form-control @error('short_description') is-invalid @enderror" 
                                          id="short_description" name="short_description" rows="2" 
                                          placeholder="Brief product description">{{ old('short_description') }}</textarea>
                                @error('short_description')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-12">
                                <label for="description" class="form-label fw-bold">Full Description *</label>
                                <textarea class="form-control @error('description') is-invalid @enderror" 
                                          id="description" name="description" rows="5" 
                                          placeholder="Detailed product description" required>{{ old('description') }}</textarea>
                                @error('description')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-6">
                                <label for="bizspot_main_category_id" class="form-label fw-bold">Main Category</label>
                                <input type="text" class="form-control" value="{{ $category->name }}" readonly>
                                <input type="hidden" name="bizspot_main_category_id" value="{{ $category->id }}">
                            </div>

                            <div class="col-md-6">
                                <label for="bizspot_sub_category_id" class="form-label fw-bold">Sub Category (Optional)</label>
                                <select class="form-select @error('bizspot_sub_category_id') is-invalid @enderror" 
                                        id="bizspot_sub_category_id" name="bizspot_sub_category_id">
                                    <option value="">Select sub category (optional)</option>
                                    @foreach($subCategories as $subCategory)
                                        <option value="{{ $subCategory->id }}" {{ old('bizspot_sub_category_id') == $subCategory->id ? 'selected' : '' }}>
                                            {{ $subCategory->name }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('bizspot_sub_category_id')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-6">
                                <label for="product_brand_id" class="form-label fw-bold">Brand (Optional)</label>
                                <select class="form-select @error('product_brand_id') is-invalid @enderror" 
                                        id="product_brand_id" name="product_brand_id">
                                    <option value="">Select brand (optional)</option>
                                    @foreach($brands as $brand)
                                        <option value="{{ $brand->id }}" {{ old('product_brand_id') == $brand->id ? 'selected' : '' }}>
                                            {{ $brand->name }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('product_brand_id')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-6">
                                <label for="sku" class="form-label fw-bold">SKU (Optional)</label>
                                <input type="text" class="form-control @error('sku') is-invalid @enderror" 
                                       id="sku" name="sku" value="{{ old('sku') }}" 
                                       placeholder="Auto-generated if left empty">
                                <div class="form-text">Leave empty to auto-generate unique SKU (V{{ $vendor->id }}-XXXXXX)</div>
                                @error('sku')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-6">
                                <label for="barcode" class="form-label fw-bold">Barcode (Optional)</label>
                                <input type="text" class="form-control @error('barcode') is-invalid @enderror" 
                                       id="barcode" name="barcode" value="{{ old('barcode') }}" 
                                       placeholder="Product barcode">
                                @error('barcode')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Pricing -->
                <div class="card border-0 shadow-sm mt-4">
                    <div class="card-header bg-white border-0 pt-4 pb-3">
                        <h6 class="card-title mb-0 fw-bold">Pricing</h6>
                    </div>
                    <div class="card-body">
                        <div class="row g-3">
                            <div class="col-md-4">
                                <label for="base_price" class="form-label fw-bold">Base Price (AED د.إ) *</label>
                                <input type="number" class="form-control @error('base_price') is-invalid @enderror" 
                                       id="base_price" name="base_price" value="{{ old('base_price') }}" 
                                       step="0.01" min="0" placeholder="0.00" required>
                                @error('base_price')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-4">
                                <label for="sale_price" class="form-label fw-bold">Sale Price (AED د.إ)</label>
                                <input type="number" class="form-control @error('sale_price') is-invalid @enderror" 
                                       id="sale_price" name="sale_price" value="{{ old('sale_price') }}" 
                                       step="0.01" min="0" placeholder="0.00">
                                @error('sale_price')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-4">
                                <label for="cost_price" class="form-label fw-bold">Cost Price (AED د.إ)</label>
                                <input type="number" class="form-control @error('cost_price') is-invalid @enderror" 
                                       id="cost_price" name="cost_price" value="{{ old('cost_price') }}" 
                                       step="0.01" min="0" placeholder="0.00">
                                @error('cost_price')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Inventory -->
                <div class="card border-0 shadow-sm mt-4">
                    <div class="card-header bg-white border-0 pt-4 pb-3">
                        <h6 class="card-title mb-0 fw-bold">Inventory Management</h6>
                    </div>
                    <div class="card-body">
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label for="stock_quantity" class="form-label fw-bold">Stock Quantity *</label>
                                <input type="number" class="form-control @error('stock_quantity') is-invalid @enderror" 
                                       id="stock_quantity" name="stock_quantity" value="{{ old('stock_quantity', 0) }}" 
                                       min="0" required>
                                @error('stock_quantity')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-6">
                                <label for="low_stock_threshold" class="form-label fw-bold">Low Stock Alert *</label>
                                <input type="number" class="form-control @error('low_stock_threshold') is-invalid @enderror" 
                                       id="low_stock_threshold" name="low_stock_threshold" value="{{ old('low_stock_threshold', 5) }}" 
                                       min="0" required>
                                @error('low_stock_threshold')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-12">
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" id="track_inventory" 
                                           name="track_inventory" value="1" {{ old('track_inventory', true) ? 'checked' : '' }}>
                                    <label class="form-check-label fw-bold" for="track_inventory">
                                        Track Inventory
                                    </label>
                                </div>
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" id="allow_backorder" 
                                           name="allow_backorder" value="1" {{ old('allow_backorder') ? 'checked' : '' }}>
                                    <label class="form-check-label fw-bold" for="allow_backorder">
                                        Allow Backorders
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Sidebar -->
            <div class="col-lg-4">
                <!-- Images -->
                <div class="card border-0 shadow-sm">
                    <div class="card-header bg-white border-0 pt-4 pb-3">
                        <h6 class="card-title mb-0 fw-bold">Product Images</h6>
                    </div>
                    <div class="card-body">
                        <div class="mb-3">
                            <label for="featured_image" class="form-label fw-bold">Featured Image</label>
                            <input type="file" class="form-control @error('featured_image') is-invalid @enderror" 
                                   id="featured_image" name="featured_image" accept="image/*">
                            @error('featured_image')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="mb-3">
                            <label for="gallery_images" class="form-label fw-bold">Gallery Images</label>
                            <input type="file" class="form-control @error('gallery_images.*') is-invalid @enderror" 
                                   id="gallery_images" name="gallery_images[]" accept="image/*" multiple>
                            @error('gallery_images.*')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                </div>

                <!-- Properties -->
                <div class="card border-0 shadow-sm mt-4">
                    <div class="card-header bg-white border-0 pt-4 pb-3">
                        <h6 class="card-title mb-0 fw-bold">Product Properties</h6>
                    </div>
                    <div class="card-body">
                        <div class="row g-3">
                            <div class="col-12">
                                <label for="weight" class="form-label fw-bold">Weight (kg)</label>
                                <input type="number" class="form-control @error('weight') is-invalid @enderror" 
                                       id="weight" name="weight" value="{{ old('weight') }}" 
                                       step="0.01" min="0" placeholder="0.00">
                                @error('weight')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-4">
                                <label for="length" class="form-label fw-bold">Length (cm)</label>
                                <input type="number" class="form-control @error('length') is-invalid @enderror" 
                                       id="length" name="length" value="{{ old('length') }}" 
                                       step="0.01" min="0" placeholder="0">
                                @error('length')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-4">
                                <label for="width" class="form-label fw-bold">Width (cm)</label>
                                <input type="number" class="form-control @error('width') is-invalid @enderror" 
                                       id="width" name="width" value="{{ old('width') }}" 
                                       step="0.01" min="0" placeholder="0">
                                @error('width')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-4">
                                <label for="height" class="form-label fw-bold">Height (cm)</label>
                                <input type="number" class="form-control @error('height') is-invalid @enderror" 
                                       id="height" name="height" value="{{ old('height') }}" 
                                       step="0.01" min="0" placeholder="0">
                                @error('height')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Settings -->
                <div class="card border-0 shadow-sm mt-4">
                    <div class="card-header bg-white border-0 pt-4 pb-3">
                        <h6 class="card-title mb-0 fw-bold">Product Settings</h6>
                    </div>
                    <div class="card-body">
                        <div class="form-check form-switch mb-3">
                            <input class="form-check-input" type="checkbox" id="is_featured" 
                                   name="is_featured" value="1" {{ old('is_featured') ? 'checked' : '' }}>
                            <label class="form-check-label fw-bold" for="is_featured">
                                Featured Product
                            </label>
                        </div>

                        <div class="form-check form-switch mb-3">
                            <input class="form-check-input" type="checkbox" id="is_digital" 
                                   name="is_digital" value="1" {{ old('is_digital') ? 'checked' : '' }}>
                            <label class="form-check-label fw-bold" for="is_digital">
                                Digital Product
                            </label>
                        </div>

                        <div class="form-check form-switch mb-3">
                            <input class="form-check-input" type="checkbox" id="requires_shipping" 
                                   name="requires_shipping" value="1" {{ old('requires_shipping', true) ? 'checked' : '' }}>
                            <label class="form-check-label fw-bold" for="requires_shipping">
                                Requires Shipping
                            </label>
                        </div>

                        <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" id="is_taxable" 
                                   name="is_taxable" value="1" {{ old('is_taxable', true) ? 'checked' : '' }}>
                            <label class="form-check-label fw-bold" for="is_taxable">
                                Taxable Product
                            </label>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- SEO & Additional Information -->
        <div class="row g-4 mt-1">
            <div class="col-lg-8">
                <div class="card border-0 shadow-sm">
                    <div class="card-header bg-white border-0 pt-4 pb-3">
                        <h6 class="card-title mb-0 fw-bold">SEO & Additional Information</h6>
                    </div>
                    <div class="card-body">
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label for="meta_title" class="form-label fw-bold">Meta Title</label>
                                <input type="text" class="form-control @error('meta_title') is-invalid @enderror" 
                                       id="meta_title" name="meta_title" value="{{ old('meta_title') }}" 
                                       placeholder="SEO title">
                                @error('meta_title')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-6">
                                <label for="origin_country" class="form-label fw-bold">Country of Origin</label>
                                <input type="text" class="form-control @error('origin_country') is-invalid @enderror" 
                                       id="origin_country" name="origin_country" value="{{ old('origin_country') }}" 
                                       placeholder="Made in...">
                                @error('origin_country')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-12">
                                <label for="meta_description" class="form-label fw-bold">Meta Description</label>
                                <textarea class="form-control @error('meta_description') is-invalid @enderror" 
                                          id="meta_description" name="meta_description" rows="3" 
                                          placeholder="SEO description">{{ old('meta_description') }}</textarea>
                                @error('meta_description')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-12">
                                <label for="tags" class="form-label fw-bold">Tags</label>
                                <input type="text" class="form-control @error('tags') is-invalid @enderror" 
                                       id="tags" name="tags" value="{{ old('tags') }}" 
                                       placeholder="tag1, tag2, tag3">
                                <small class="text-muted">Separate tags with commas</small>
                                @error('tags')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-6">
                                <label for="ingredients" class="form-label fw-bold">Ingredients/Materials</label>
                                <textarea class="form-control @error('ingredients') is-invalid @enderror" 
                                          id="ingredients" name="ingredients" rows="3" 
                                          placeholder="List ingredients or materials">{{ old('ingredients') }}</textarea>
                                @error('ingredients')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-6">
                                <label for="care_instructions" class="form-label fw-bold">Care Instructions</label>
                                <textarea class="form-control @error('care_instructions') is-invalid @enderror" 
                                          id="care_instructions" name="care_instructions" rows="3" 
                                          placeholder="How to care for this product">{{ old('care_instructions') }}</textarea>
                                @error('care_instructions')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-12">
                                <label for="warranty_info" class="form-label fw-bold">Warranty Information</label>
                                <textarea class="form-control @error('warranty_info') is-invalid @enderror" 
                                          id="warranty_info" name="warranty_info" rows="2" 
                                          placeholder="Warranty details">{{ old('warranty_info') }}</textarea>
                                @error('warranty_info')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Form Actions -->
        <div class="d-flex justify-content-end gap-3 mt-4">
            <a href="{{ route('admin.vendors.products.products', ['vendor' => $vendor, 'categoryId' => $category->id]) }}" 
               class="btn btn-outline-secondary">
                <i class="bi bi-x-circle me-1"></i>Cancel
            </a>
            <button type="submit" class="btn btn-primary">
                <i class="bi bi-check-circle me-1"></i>Create Product
            </button>
        </div>
    </form>
</div>
@endsection