@extends('layouts.admin')

@section('title', 'Add New Product - ' . $supermarket->name)

@section('content')
<div class="container-fluid">
    <!-- Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="h3 mb-0 text-gray-800">Add New Product</h1>
            <p class="text-muted mb-0">{{ $supermarket->name }}</p>
        </div>
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
                <li class="breadcrumb-item"><a href="{{ route('admin.supermarkets.index') }}">Supermarkets</a></li>
                <li class="breadcrumb-item"><a href="{{ route('admin.supermarkets.show', $supermarket) }}">{{ $supermarket->name }}</a></li>
                <li class="breadcrumb-item"><a href="{{ route('admin.supermarkets.inventory', $supermarket) }}">Inventory</a></li>
                <li class="breadcrumb-item active" aria-current="page">Add Product</li>
            </ol>
        </nav>
    </div>

    <!-- Form Card -->
    <div class="card shadow">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary">
                <i class="bi bi-plus-lg"></i> Product Information
            </h6>
        </div>
        <div class="card-body">
            <form action="{{ route('admin.supermarkets.products.store', $supermarket) }}" method="POST" enctype="multipart/form-data" id="productForm">
                @csrf
                
                <!-- Basic Product Information -->
                <div class="row mb-4">
                    <div class="col-12">
                        <h5 class="text-primary border-bottom pb-2 mb-3">
                            <i class="bi bi-info-circle"></i> Basic Information
                        </h5>
                    </div>
                    
                    <div class="col-md-6 mb-3">
                        <label for="product_name" class="form-label fw-bold">Product Name <span class="text-danger">*</span></label>
                        <input type="text" class="form-control @error('product_name') is-invalid @enderror" 
                               id="product_name" name="product_name" value="{{ old('product_name') }}" 
                               placeholder="Enter product name" required>
                        @error('product_name')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

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

                    <div class="col-md-4 mb-3">
                        <label for="sku" class="form-label fw-bold">SKU (Stock Keeping Unit) <span class="text-danger">*</span></label>
                        <input type="text" class="form-control @error('sku') is-invalid @enderror" 
                               id="sku" name="sku" value="{{ old('sku') }}" 
                               placeholder="e.g., ABC-123-XYZ" required>
                        @error('sku')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                        <small class="text-muted">Unique identifier for this product</small>
                    </div>

                    <div class="col-md-4 mb-3">
                        <label for="barcode" class="form-label fw-bold">Barcode/UPC</label>
                        <input type="text" class="form-control @error('barcode') is-invalid @enderror" 
                               id="barcode" name="barcode" value="{{ old('barcode') }}" 
                               placeholder="Scan or enter barcode">
                        @error('barcode')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="col-md-6 mb-3">
                        <label for="main_category_id" class="form-label fw-bold">Main Category</label>
                        <select class="form-select @error('main_category_id') is-invalid @enderror" id="main_category_id" name="main_category_id">
                            <option value="">Select main category</option>
                            @foreach($mainCategories as $mainCategory)
                                <option value="{{ $mainCategory->id }}" {{ old('main_category_id') == $mainCategory->id ? 'selected' : '' }}>
                                    <i class="{{ $mainCategory->icon }}"></i> {{ $mainCategory->name }}
                                </option>
                            @endforeach
                        </select>
                        @error('main_category_id')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                        <small class="text-muted">Choose the broad category type</small>
                    </div>

                    <div class="col-md-6 mb-3">
                        <label for="sub_category_id" class="form-label fw-bold">Sub Category</label>
                        <select class="form-select @error('sub_category_id') is-invalid @enderror" id="sub_category_id" name="sub_category_id" disabled>
                            <option value="">Select main category first</option>
                        </select>
                        @error('sub_category_id')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                        <small class="text-muted">Choose specific product type</small>
                    </div>

                    <div class="col-md-6 mb-3">
                        <label for="aisle_id" class="form-label fw-bold">Aisle Location</label>
                        <select class="form-select @error('aisle_id') is-invalid @enderror" id="aisle_id" name="aisle_id">
                            <option value="">Select aisle</option>
                            @foreach($aisles as $aisle)
                                <option value="{{ $aisle->id }}" {{ old('aisle_id') == $aisle->id ? 'selected' : '' }}>
                                    {{ $aisle->aisle_name }} - {{ $aisle->description }}
                                </option>
                            @endforeach
                        </select>
                        @error('aisle_id')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="col-md-6 mb-3">
                        <label for="description" class="form-label fw-bold">Product Description</label>
                        <textarea class="form-control @error('description') is-invalid @enderror" 
                                  id="description" name="description" rows="3" 
                                  placeholder="Detailed product description">{{ old('description') }}</textarea>
                        @error('description')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>

                <!-- Pricing Information -->
                <div class="row mb-4">
                    <div class="col-12">
                        <h5 class="text-success border-bottom pb-2 mb-3">
                            <i class="bi bi-currency-exchange"></i> Pricing Information (AED)
                        </h5>
                        <div class="alert alert-info">
                            <strong>Price Types Explained:</strong>
                            <ul class="mb-0 mt-2">
                                <li><strong>Cost Price:</strong> The price you paid to purchase/acquire this product</li>
                                <li><strong>Selling Price:</strong> The regular retail price customers pay</li>
                                <li><strong>Sale Price:</strong> Special promotional/discounted price (optional)</li>
                            </ul>
                        </div>
                    </div>
                    
                    <div class="col-md-4 mb-3">
                        <label for="cost_price" class="form-label fw-bold">Cost Price (AED)</label>
                        <div class="input-group">
                            <span class="input-group-text">AED</span>
                            <input type="number" step="0.01" min="0" 
                                   class="form-control @error('cost_price') is-invalid @enderror" 
                                   id="cost_price" name="cost_price" value="{{ old('cost_price') }}" 
                                   placeholder="0.00">
                            @error('cost_price')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        <small class="text-muted">Your purchase/wholesale price</small>
                    </div>

                    <div class="col-md-4 mb-3">
                        <label for="selling_price" class="form-label fw-bold">Selling Price (AED) <span class="text-danger">*</span></label>
                        <div class="input-group">
                            <span class="input-group-text">AED</span>
                            <input type="number" step="0.01" min="0" 
                                   class="form-control @error('selling_price') is-invalid @enderror" 
                                   id="selling_price" name="selling_price" value="{{ old('selling_price') }}" 
                                   placeholder="0.00" required>
                            @error('selling_price')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        <small class="text-muted">Regular retail price</small>
                    </div>

                    <div class="col-md-4 mb-3">
                        <label for="sale_price" class="form-label fw-bold">Sale Price (AED)</label>
                        <div class="input-group">
                            <span class="input-group-text">AED</span>
                            <input type="number" step="0.01" min="0" 
                                   class="form-control @error('sale_price') is-invalid @enderror" 
                                   id="sale_price" name="sale_price" value="{{ old('sale_price') }}" 
                                   placeholder="0.00">
                            @error('sale_price')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        <small class="text-muted">Special promotional price (optional)</small>
                    </div>

                    <div class="col-12 mb-3">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="on_sale" name="on_sale" value="1" 
                                   {{ old('on_sale') ? 'checked' : '' }}>
                            <label class="form-check-label fw-bold" for="on_sale">
                                This product is currently on sale
                            </label>
                        </div>
                    </div>
                </div>

                <!-- Inventory Information -->
                <div class="row mb-4">
                    <div class="col-12">
                        <h5 class="text-warning border-bottom pb-2 mb-3">
                            <i class="bi bi-box-seam"></i> Inventory Management
                        </h5>
                    </div>
                    
                    <div class="col-md-4 mb-3">
                        <label for="stock_quantity" class="form-label fw-bold">Current Stock Quantity <span class="text-danger">*</span></label>
                        <input type="number" min="0" 
                               class="form-control @error('stock_quantity') is-invalid @enderror" 
                               id="stock_quantity" name="stock_quantity" value="{{ old('stock_quantity', 0) }}" 
                               placeholder="0" required>
                        @error('stock_quantity')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                        <small class="text-muted">Current units in stock</small>
                    </div>

                    <div class="col-md-4 mb-3">
                        <label for="minimum_stock" class="form-label fw-bold">Minimum Stock Level</label>
                        <input type="number" min="0" 
                               class="form-control @error('minimum_stock') is-invalid @enderror" 
                               id="minimum_stock" name="minimum_stock" value="{{ old('minimum_stock', 5) }}" 
                               placeholder="5">
                        @error('minimum_stock')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                        <small class="text-muted">Alert when stock falls below this level</small>
                    </div>

                    <div class="col-md-4 mb-3">
                        <label for="unit" class="form-label fw-bold">Unit of Measurement</label>
                        <select class="form-select @error('unit') is-invalid @enderror" id="unit" name="unit">
                            <option value="pieces" {{ old('unit') == 'pieces' ? 'selected' : '' }}>Pieces</option>
                            <option value="kg" {{ old('unit') == 'kg' ? 'selected' : '' }}>Kilograms (kg)</option>
                            <option value="g" {{ old('unit') == 'g' ? 'selected' : '' }}>Grams (g)</option>
                            <option value="liter" {{ old('unit') == 'liter' ? 'selected' : '' }}>Liters</option>
                            <option value="ml" {{ old('unit') == 'ml' ? 'selected' : '' }}>Milliliters (ml)</option>
                            <option value="pack" {{ old('unit') == 'pack' ? 'selected' : '' }}>Pack/Package</option>
                            <option value="box" {{ old('unit') == 'box' ? 'selected' : '' }}>Box</option>
                            <option value="bottle" {{ old('unit') == 'bottle' ? 'selected' : '' }}>Bottle</option>
                            <option value="can" {{ old('unit') == 'can' ? 'selected' : '' }}>Can</option>
                        </select>
                        @error('unit')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>

                <!-- Dynamic Category-Specific Fields -->
                <div class="row mb-4" id="categorySpecificFields" style="display: none;">
                    <div class="col-12">
                        <div class="alert alert-info">
                            <h5 class="text-info border-bottom pb-2 mb-3">
                                <i class="bi bi-gear"></i> Category-Specific Details
                                <small class="text-muted fs-6">These fields appear based on your selected category</small>
                            </h5>
                        </div>
                    </div>
                    
                    <!-- Food & Grocery Fields -->
                    <div class="category-fields food-grocery-fields" style="display: none;">
                        <div class="col-md-4 mb-3">
                            <label for="expiry_date" class="form-label fw-bold">Expiry Date</label>
                            <input type="date" class="form-control @error('expiry_date') is-invalid @enderror" 
                                   id="expiry_date" name="expiry_date" value="{{ old('expiry_date') }}">
                            @error('expiry_date')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                            <small class="text-muted">For perishable items</small>
                        </div>

                        <div class="col-md-4 mb-3">
                            <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="e.g., UAE, India, USA">
                            @error('origin_country')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-md-4 mb-3">
                            <label for="storage_instructions" class="form-label fw-bold">Storage Instructions</label>
                            <select class="form-select @error('storage_instructions') is-invalid @enderror" 
                                    id="storage_instructions" name="storage_instructions">
                                <option value="">Select storage type</option>
                                <option value="Room Temperature" {{ old('storage_instructions') == 'Room Temperature' ? 'selected' : '' }}>Room Temperature</option>
                                <option value="Refrigerated" {{ old('storage_instructions') == 'Refrigerated' ? 'selected' : '' }}>Refrigerated (2-8°C)</option>
                                <option value="Frozen" {{ old('storage_instructions') == 'Frozen' ? 'selected' : '' }}>Frozen (-18°C)</option>
                                <option value="Cool Dry Place" {{ old('storage_instructions') == 'Cool Dry Place' ? 'selected' : '' }}>Cool Dry Place</option>
                            </select>
                            @error('storage_instructions')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

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

                        <div class="col-md-6 mb-3">
                            <label for="nutritional_info" class="form-label fw-bold">Nutritional Information</label>
                            <textarea class="form-control @error('nutritional_info') is-invalid @enderror" 
                                      id="nutritional_info" name="nutritional_info" rows="3" 
                                      placeholder="Per 100g: Calories, Protein, Fat, Carbs, etc.">{{ old('nutritional_info') }}</textarea>
                            @error('nutritional_info')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-12 mb-3">
                            <label class="form-label fw-bold">Certifications & Dietary Info</label>
                            <div class="row">
                                <div class="col-md-3">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" id="is_organic" name="is_organic" value="1">
                                        <label class="form-check-label" for="is_organic">🌱 Organic</label>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" id="is_halal" name="is_halal" value="1">
                                        <label class="form-check-label" for="is_halal">🥩 Halal</label>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" id="is_vegan" name="is_vegan" value="1">
                                        <label class="form-check-label" for="is_vegan">🌿 Vegan</label>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" id="is_gluten_free" name="is_gluten_free" value="1">
                                        <label class="form-check-label" for="is_gluten_free">🌾 Gluten Free</label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Electronics Fields -->
                    <div class="category-fields electronics-fields" style="display: none;">
                        <div class="col-md-4 mb-3">
                            <label for="model_number" class="form-label fw-bold">Model Number</label>
                            <input type="text" class="form-control @error('model_number') is-invalid @enderror" 
                                   id="model_number" name="model_number" value="{{ old('model_number') }}" 
                                   placeholder="e.g., iPhone 15 Pro">
                            @error('model_number')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-md-4 mb-3">
                            <label for="warranty_period" class="form-label fw-bold">Warranty Period</label>
                            <select class="form-select @error('warranty_period') is-invalid @enderror" 
                                    id="warranty_period" name="warranty_period">
                                <option value="">Select warranty</option>
                                <option value="No Warranty" {{ old('warranty_period') == 'No Warranty' ? 'selected' : '' }}>No Warranty</option>
                                <option value="6 Months" {{ old('warranty_period') == '6 Months' ? 'selected' : '' }}>6 Months</option>
                                <option value="1 Year" {{ old('warranty_period') == '1 Year' ? 'selected' : '' }}>1 Year</option>
                                <option value="2 Years" {{ old('warranty_period') == '2 Years' ? 'selected' : '' }}>2 Years</option>
                                <option value="3 Years" {{ old('warranty_period') == '3 Years' ? 'selected' : '' }}>3 Years</option>
                            </select>
                            @error('warranty_period')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-md-4 mb-3">
                            <label for="battery_life" class="form-label fw-bold">Battery Life</label>
                            <input type="text" class="form-control @error('battery_life') is-invalid @enderror" 
                                   id="battery_life" name="battery_life" value="{{ old('battery_life') }}" 
                                   placeholder="e.g., 24 hours, 3000mAh">
                            @error('battery_life')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-md-12 mb-3">
                            <label for="specifications" class="form-label fw-bold">Technical Specifications</label>
                            <textarea class="form-control @error('specifications') is-invalid @enderror" 
                                      id="specifications" name="specifications" rows="3" 
                                      placeholder="Screen size, RAM, Storage, Processor, etc.">{{ old('specifications') }}</textarea>
                            @error('specifications')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <!-- Clothing Fields -->
                    <div class="category-fields clothing-fields" style="display: none;">
                        <div class="col-md-4 mb-3">
                            <label for="material" class="form-label fw-bold">Material/Fabric</label>
                            <input type="text" class="form-control @error('material') is-invalid @enderror" 
                                   id="material" name="material" value="{{ old('material') }}" 
                                   placeholder="e.g., 100% Cotton, Polyester blend">
                            @error('material')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-md-4 mb-3">
                            <label for="size_chart" class="form-label fw-bold">Available Sizes</label>
                            <input type="text" class="form-control @error('size_chart') is-invalid @enderror" 
                                   id="size_chart" name="size_chart" value="{{ old('size_chart') }}" 
                                   placeholder="e.g., S, M, L, XL or 38, 40, 42">
                            @error('size_chart')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-md-4 mb-3">
                            <label for="color_options" class="form-label fw-bold">Color Options</label>
                            <input type="text" class="form-control @error('color_options') is-invalid @enderror" 
                                   id="color_options" name="color_options" value="{{ old('color_options') }}" 
                                   placeholder="e.g., Black, White, Red, Blue">
                            @error('color_options')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-md-6 mb-3">
                            <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="2" 
                                      placeholder="Machine wash cold, tumble dry low, etc.">{{ old('care_instructions') }}</textarea>
                            @error('care_instructions')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-md-6 mb-3">
                            <label for="season" class="form-label fw-bold">Season</label>
                            <select class="form-select @error('season') is-invalid @enderror" 
                                    id="season" name="season">
                                <option value="">Select season</option>
                                <option value="Spring" {{ old('season') == 'Spring' ? 'selected' : '' }}>Spring</option>
                                <option value="Summer" {{ old('season') == 'Summer' ? 'selected' : '' }}>Summer</option>
                                <option value="Fall" {{ old('season') == 'Fall' ? 'selected' : '' }}>Fall</option>
                                <option value="Winter" {{ old('season') == 'Winter' ? 'selected' : '' }}>Winter</option>
                                <option value="All Season" {{ old('season') == 'All Season' ? 'selected' : '' }}>All Season</option>
                            </select>
                            @error('season')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <!-- Health & Beauty Fields -->
                    <div class="category-fields health-beauty-fields" style="display: none;">
                        <div class="col-md-4 mb-3">
                            <label for="skin_type" class="form-label fw-bold">Suitable for Skin Type</label>
                            <select class="form-select @error('skin_type') is-invalid @enderror" 
                                    id="skin_type" name="skin_type">
                                <option value="">Select skin type</option>
                                <option value="All Skin Types" {{ old('skin_type') == 'All Skin Types' ? 'selected' : '' }}>All Skin Types</option>
                                <option value="Oily" {{ old('skin_type') == 'Oily' ? 'selected' : '' }}>Oily</option>
                                <option value="Dry" {{ old('skin_type') == 'Dry' ? 'selected' : '' }}>Dry</option>
                                <option value="Combination" {{ old('skin_type') == 'Combination' ? 'selected' : '' }}>Combination</option>
                                <option value="Sensitive" {{ old('skin_type') == 'Sensitive' ? 'selected' : '' }}>Sensitive</option>
                            </select>
                            @error('skin_type')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-md-4 mb-3">
                            <label for="application_area" class="form-label fw-bold">Application Area</label>
                            <input type="text" class="form-control @error('application_area') is-invalid @enderror" 
                                   id="application_area" name="application_area" value="{{ old('application_area') }}" 
                                   placeholder="e.g., Face, Body, Hair">
                            @error('application_area')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-md-4 mb-3">
                            <label for="age_group" class="form-label fw-bold">Age Group</label>
                            <select class="form-select @error('age_group') is-invalid @enderror" 
                                    id="age_group" name="age_group">
                                <option value="">Select age group</option>
                                <option value="Adults" {{ old('age_group') == 'Adults' ? 'selected' : '' }}>Adults</option>
                                <option value="Kids" {{ old('age_group') == 'Kids' ? 'selected' : '' }}>Kids</option>
                                <option value="Babies" {{ old('age_group') == 'Babies' ? 'selected' : '' }}>Babies</option>
                                <option value="Elderly" {{ old('age_group') == 'Elderly' ? 'selected' : '' }}>Elderly</option>
                            </select>
                            @error('age_group')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                </div>

                <!-- Product Images -->
                <div class="row mb-4">
                    <div class="col-12">
                        <h5 class="text-secondary border-bottom pb-2 mb-3">
                            <i class="bi bi-images"></i> Product Images
                        </h5>
                    </div>
                    
                    <div class="col-md-6 mb-3">
                        <label for="product_image" class="form-label fw-bold">Main Product Image <span class="text-danger">*</span></label>
                        <input type="file" class="form-control @error('product_image') is-invalid @enderror" 
                               id="product_image" name="product_image" accept="image/*" required>
                        @error('product_image')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                        <small class="text-muted">Max size: 2MB. Supported: JPG, PNG, GIF</small>
                        <div id="imagePreview" class="mt-2" style="display: none;">
                            <img id="previewImg" src="" alt="Preview" class="img-thumbnail" style="max-width: 200px;">
                        </div>
                    </div>

                    <div class="col-md-6 mb-3">
                        <label for="additional_images" class="form-label fw-bold">Additional Images</label>
                        <input type="file" class="form-control @error('additional_images') is-invalid @enderror" 
                               id="additional_images" name="additional_images[]" accept="image/*" multiple>
                        @error('additional_images')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                        <small class="text-muted">Select up to 4 additional images. Max size: 2MB each.</small>
                        <div id="additionalImagesPreview" class="mt-2 row"></div>
                    </div>

                    <div class="col-12 mb-3">
                        <div class="alert alert-info">
                            <strong><i class="bi bi-lightbulb"></i> Image Tips:</strong>
                            <ul class="mb-0 mt-1">
                                <li>Main image: Product front view, clean background preferred</li>
                                <li>Additional images: Different angles, packaging, ingredients label, usage examples</li>
                                <li>High-quality images improve customer confidence and sales</li>
                                <li>Use proper lighting and avoid blurry photos</li>
                            </ul>
                        </div>
                    </div>

                    <div class="col-md-6 mb-3">
                        <label class="form-label fw-bold">Product Status</label>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="is_active" name="is_active" value="1" 
                                   {{ old('is_active', true) ? 'checked' : '' }}>
                            <label class="form-check-label" for="is_active">
                                ✅ Product is active and available for sale
                            </label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="is_featured" name="is_featured" value="1" 
                                   {{ old('is_featured') ? 'checked' : '' }}>
                            <label class="form-check-label" for="is_featured">
                                ⭐ Feature this product (highlight in promotions)
                            </label>
                        </div>
                    </div>
                </div>

                <!-- Action Buttons -->
                <div class="row">
                    <div class="col-12">
                        <div class="d-flex justify-content-between">
                            <a href="{{ route('admin.supermarkets.inventory', $supermarket) }}" class="btn btn-secondary">
                                <i class="bi bi-arrow-left"></i> Back to Inventory
                            </a>
                            <div>
                                <button type="button" class="btn btn-outline-primary me-2" onclick="resetForm()">
                                    <i class="bi bi-arrow-clockwise"></i> Reset Form
                                </button>
                                <button type="submit" class="btn btn-success">
                                    <i class="bi bi-plus-lg"></i> Add Product
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Main image preview functionality
    document.getElementById('product_image').addEventListener('change', function(e) {
        const file = e.target.files[0];
        if (file) {
            const reader = new FileReader();
            reader.onload = function(e) {
                document.getElementById('previewImg').src = e.target.result;
                document.getElementById('imagePreview').style.display = 'block';
            };
            reader.readAsDataURL(file);
        } else {
            document.getElementById('imagePreview').style.display = 'none';
        }
    });

    // Additional images preview functionality
    document.getElementById('additional_images').addEventListener('change', function(e) {
        const files = Array.from(e.target.files);
        const previewContainer = document.getElementById('additionalImagesPreview');
        
        // Clear previous previews
        previewContainer.innerHTML = '';
        
        if (files.length > 4) {
            alert('You can only select up to 4 additional images.');
            e.target.value = '';
            return;
        }
        
        files.forEach((file, index) => {
            if (file.size > 2 * 1024 * 1024) { // 2MB limit
                alert(`Image ${index + 1} is too large. Max size is 2MB.`);
                return;
            }
            
            const reader = new FileReader();
            reader.onload = function(e) {
                const colDiv = document.createElement('div');
                colDiv.className = 'col-6 col-md-3 mb-2';
                
                const imgContainer = document.createElement('div');
                imgContainer.className = 'position-relative';
                
                const img = document.createElement('img');
                img.src = e.target.result;
                img.className = 'img-thumbnail w-100';
                img.style.aspectRatio = '1';
                img.style.objectFit = 'cover';
                
                const badge = document.createElement('span');
                badge.className = 'position-absolute top-0 start-0 badge bg-primary rounded-pill m-1';
                badge.textContent = index + 1;
                
                imgContainer.appendChild(img);
                imgContainer.appendChild(badge);
                colDiv.appendChild(imgContainer);
                previewContainer.appendChild(colDiv);
            };
            reader.readAsDataURL(file);
        });
    });

    // Category hierarchy handling
    const mainCategorySelect = document.getElementById('main_category_id');
    const subCategorySelect = document.getElementById('sub_category_id');
    
    // Subcategories data from backend
    const subCategoriesData = @json($subCategories);
    
    mainCategorySelect.addEventListener('change', function() {
        const mainCategoryId = this.value;
        
        // Clear subcategory dropdown
        subCategorySelect.innerHTML = '<option value="">Select subcategory</option>';
        
        if (mainCategoryId) {
            // Enable subcategory dropdown
            subCategorySelect.disabled = false;
            
            // Filter subcategories for selected main category
            const filteredSubCategories = subCategoriesData.filter(sub => 
                sub.main_category_id == mainCategoryId
            );
            
            // Populate subcategory dropdown
            filteredSubCategories.forEach(subCategory => {
                const option = document.createElement('option');
                option.value = subCategory.id;
                option.textContent = subCategory.name;
                option.selected = {{ old('sub_category_id') ?: 'null' }} == subCategory.id;
                subCategorySelect.appendChild(option);
            });
            
            // Show category-specific fields based on main category
            showCategorySpecificFields(mainCategoryId);
        } else {
            // Disable subcategory dropdown if no main category selected
            subCategorySelect.disabled = true;
            hideCategorySpecificFields();
        }
    });
    
    function showCategorySpecificFields(mainCategoryId) {
        // Get the selected main category name
        const selectedCategory = @json($mainCategories).find(cat => cat.id == mainCategoryId);
        
        if (!selectedCategory) {
            hideCategorySpecificFields();
            return;
        }
        
        // Hide all category-specific field sets
        document.querySelectorAll('.category-fields').forEach(fieldSet => {
            fieldSet.style.display = 'none';
        });
        
        // Show the container
        document.getElementById('categorySpecificFields').style.display = 'block';
        
        // Show specific fields based on category name
        const categoryName = selectedCategory.name.toLowerCase();
        
        if (categoryName.includes('food') || categoryName.includes('grocery')) {
            document.querySelector('.food-grocery-fields').style.display = 'block';
        } else if (categoryName.includes('electronics') || categoryName.includes('technology')) {
            document.querySelector('.electronics-fields').style.display = 'block';
        } else if (categoryName.includes('clothing') || categoryName.includes('fashion')) {
            document.querySelector('.clothing-fields').style.display = 'block';
        } else if (categoryName.includes('health') || categoryName.includes('beauty')) {
            document.querySelector('.health-beauty-fields').style.display = 'block';
        }
    }
    
    function hideCategorySpecificFields() {
        document.getElementById('categorySpecificFields').style.display = 'none';
        document.querySelectorAll('.category-fields').forEach(fieldSet => {
            fieldSet.style.display = 'none';
        });
    }
    
    // Trigger change event on page load if main category is pre-selected
    if (mainCategorySelect.value) {
        mainCategorySelect.dispatchEvent(new Event('change'));
    }

    // Auto-generate SKU based on brand and product name
    const brandField = document.getElementById('brand');
    const productNameField = document.getElementById('product_name');
    const skuField = document.getElementById('sku');

    function generateSKU() {
        if (!skuField.value) {
            const brand = brandField.value.substring(0, 3).toUpperCase();
            const name = productNameField.value.substring(0, 3).toUpperCase();
            const random = Math.floor(Math.random() * 1000);
            if (brand && name) {
                skuField.value = `${brand}-${name}-${random}`;
            }
        }
    }

    brandField.addEventListener('blur', generateSKU);
    productNameField.addEventListener('blur', generateSKU);
});

function resetForm() {
    if (confirm('Are you sure you want to reset the form? All entered data will be lost.')) {
        document.getElementById('productForm').reset();
        document.getElementById('imagePreview').style.display = 'none';
    }
}
</script>
@endsection