@extends('layouts.admin')

@section('title', 'Edit Product - ' . $product->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">Edit Product</h1>
            <p class="text-muted mb-0">{{ $supermarket->name }} - {{ $product->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">Edit Product</li>
            </ol>
        </nav>
    </div>

    <!-- Success/Error Messages -->
    @if(session('success'))
        <div class="alert alert-success alert-dismissible fade show" role="alert">
            <i class="bi bi-check-circle me-2"></i>{{ session('success') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif

    @if(session('error'))
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            <i class="bi bi-exclamation-triangle me-2"></i>{{ session('error') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif



    <!-- 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-pencil"></i> Product Information
            </h6>
        </div>
        <div class="card-body">
            <form action="{{ route('admin.supermarkets.products.update', [$supermarket, $product]) }}" method="POST" enctype="multipart/form-data" id="productForm">
                @csrf
                @method('PUT')
                
                <!-- 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', $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', $product->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', $product->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', $product->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 <span class="text-danger">*</span></label>
                        <div class="row">
                            <div class="col-8">
                                <select class="form-select @error('main_category_id') is-invalid @enderror" id="main_category_id" name="main_category_id" required>
                                    <option value="">Select main category</option>
                                    @foreach($mainCategories as $mainCategory)
                                        <option value="{{ $mainCategory->id }}" 
                                                data-image="{{ $mainCategory->image ? Storage::url($mainCategory->image) : '' }}"
                                                {{ old('main_category_id', $product->main_category_id) == $mainCategory->id ? 'selected' : '' }}>
                                            {{ $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-4">
                                <div id="mainCategoryImagePreview" class="text-center">
                                    @if($product->mainCategory && $product->mainCategory->image)
                                        <img src="{{ Storage::url($product->mainCategory->image) }}" 
                                             alt="{{ $product->mainCategory->name }}" 
                                             class="img-thumbnail"
                                             style="width: 60px; height: 60px; object-fit: cover;">
                                        <small class="d-block text-muted mt-1">{{ $product->mainCategory->name }}</small>
                                    @else
                                        <div class="bg-light rounded d-flex align-items-center justify-content-center" 
                                             style="width: 60px; height: 60px; margin: 0 auto;">
                                            <i class="mdi mdi-image text-muted"></i>
                                        </div>
                                        <small class="d-block text-muted mt-1">No category</small>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-6 mb-3">
                        <label for="sub_category_id" class="form-label fw-bold">Sub Category <span class="text-danger">*</span></label>
                        <div class="row">
                            <div class="col-8">
                                <select class="form-select @error('sub_category_id') is-invalid @enderror" id="sub_category_id" name="sub_category_id" required 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-4">
                                <div id="subCategoryImagePreview" class="text-center">
                                    @if($product->subCategory && $product->subCategory->image)
                                        <img src="{{ Storage::url($product->subCategory->image) }}" 
                                             alt="{{ $product->subCategory->name }}" 
                                             class="img-thumbnail"
                                             style="width: 60px; height: 60px; object-fit: cover;">
                                        <small class="d-block text-muted mt-1">{{ $product->subCategory->name }}</small>
                                    @else
                                        <div class="bg-light rounded d-flex align-items-center justify-content-center" 
                                             style="width: 60px; height: 60px; margin: 0 auto;">
                                            <i class="mdi mdi-image text-muted"></i>
                                        </div>
                                        <small class="d-block text-muted mt-1">No sub-category</small>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </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', $product->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', $product->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', $product->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', $product->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', $product->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', $product->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', $product->stock_quantity) }}" 
                               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', $product->minimum_stock) }}" 
                               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', $product->unit_of_measure) == 'pieces' ? 'selected' : '' }}>Pieces</option>
                            <option value="kg" {{ old('unit', $product->unit_of_measure) == 'kg' ? 'selected' : '' }}>Kilograms (kg)</option>
                            <option value="g" {{ old('unit', $product->unit_of_measure) == 'g' ? 'selected' : '' }}>Grams (g)</option>
                            <option value="liter" {{ old('unit', $product->unit_of_measure) == 'liter' ? 'selected' : '' }}>Liters</option>
                            <option value="ml" {{ old('unit', $product->unit_of_measure) == 'ml' ? 'selected' : '' }}>Milliliters (ml)</option>
                            <option value="pack" {{ old('unit', $product->unit_of_measure) == 'pack' ? 'selected' : '' }}>Pack/Package</option>
                            <option value="box" {{ old('unit', $product->unit_of_measure) == 'box' ? 'selected' : '' }}>Box</option>
                            <option value="bottle" {{ old('unit', $product->unit_of_measure) == 'bottle' ? 'selected' : '' }}>Bottle</option>
                            <option value="can" {{ old('unit', $product->unit_of_measure) == '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">
                    <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">Additional fields based on product 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', $product->expiry_date ? $product->expiry_date->format('Y-m-d') : '') }}">
                            @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', $product->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', $product->storage_instructions) == 'Room Temperature' ? 'selected' : '' }}>Room Temperature</option>
                                <option value="Refrigerated" {{ old('storage_instructions', $product->storage_instructions) == 'Refrigerated' ? 'selected' : '' }}>Refrigerated (2-8°C)</option>
                                <option value="Frozen" {{ old('storage_instructions', $product->storage_instructions) == 'Frozen' ? 'selected' : '' }}>Frozen (-18°C)</option>
                                <option value="Cool Dry Place" {{ old('storage_instructions', $product->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', $product->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', $product->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"
                                               {{ old('is_organic', $product->is_organic) ? 'checked' : '' }}>
                                        <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"
                                               {{ old('is_halal', $product->is_halal) ? 'checked' : '' }}>
                                        <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"
                                               {{ old('is_vegan', $product->is_vegan) ? 'checked' : '' }}>
                                        <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"
                                               {{ old('is_gluten_free', $product->is_gluten_free) ? 'checked' : '' }}>
                                        <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', $product->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', $product->warranty_period) == 'No Warranty' ? 'selected' : '' }}>No Warranty</option>
                                <option value="6 Months" {{ old('warranty_period', $product->warranty_period) == '6 Months' ? 'selected' : '' }}>6 Months</option>
                                <option value="1 Year" {{ old('warranty_period', $product->warranty_period) == '1 Year' ? 'selected' : '' }}>1 Year</option>
                                <option value="2 Years" {{ old('warranty_period', $product->warranty_period) == '2 Years' ? 'selected' : '' }}>2 Years</option>
                                <option value="3 Years" {{ old('warranty_period', $product->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', $product->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', $product->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', $product->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', $product->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', $product->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', $product->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', $product->season) == 'Spring' ? 'selected' : '' }}>Spring</option>
                                <option value="Summer" {{ old('season', $product->season) == 'Summer' ? 'selected' : '' }}>Summer</option>
                                <option value="Fall" {{ old('season', $product->season) == 'Fall' ? 'selected' : '' }}>Fall</option>
                                <option value="Winter" {{ old('season', $product->season) == 'Winter' ? 'selected' : '' }}>Winter</option>
                                <option value="All Season" {{ old('season', $product->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', $product->skin_type) == 'All Skin Types' ? 'selected' : '' }}>All Skin Types</option>
                                <option value="Oily" {{ old('skin_type', $product->skin_type) == 'Oily' ? 'selected' : '' }}>Oily</option>
                                <option value="Dry" {{ old('skin_type', $product->skin_type) == 'Dry' ? 'selected' : '' }}>Dry</option>
                                <option value="Combination" {{ old('skin_type', $product->skin_type) == 'Combination' ? 'selected' : '' }}>Combination</option>
                                <option value="Sensitive" {{ old('skin_type', $product->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', $product->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', $product->age_group) == 'Adults' ? 'selected' : '' }}>Adults</option>
                                <option value="Kids" {{ old('age_group', $product->age_group) == 'Kids' ? 'selected' : '' }}>Kids</option>
                                <option value="Babies" {{ old('age_group', $product->age_group) == 'Babies' ? 'selected' : '' }}>Babies</option>
                                <option value="Elderly" {{ old('age_group', $product->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</label>
                        <input type="file" class="form-control @error('product_image') is-invalid @enderror" 
                               id="product_image" name="product_image" accept="image/*">
                        @error('product_image')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                        <small class="text-muted">Max size: 2MB. Supported: JPG, PNG, GIF. Leave empty to keep current image.</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>

                    <!-- Current Images Display -->
                    <div class="col-12 mb-3">
                        <h6 class="fw-bold">Current Images:</h6>
                        <div class="row">
                            @if($product->image)
                                <div class="col-md-3 mb-2">
                                    <div class="position-relative">
                                        <img src="{{ asset('storage/' . $product->image) }}" 
                                             alt="{{ $product->name }}" 
                                             class="img-thumbnail w-100" 
                                             style="aspect-ratio: 1; object-fit: cover;">
                                        <span class="position-absolute top-0 start-0 badge bg-primary rounded-pill m-1">Main</span>
                                    </div>
                                </div>
                            @endif
                            
                            @if($product->additional_images)
                                @foreach($product->additional_images as $index => $image)
                                    <div class="col-md-3 mb-2">
                                        <div class="position-relative">
                                            <img src="{{ asset('storage/' . $image) }}" 
                                                 alt="{{ $product->name }} - {{ $index + 1 }}" 
                                                 class="img-thumbnail w-100" 
                                                 style="aspect-ratio: 1; object-fit: cover;">
                                            <span class="position-absolute top-0 start-0 badge bg-success rounded-pill m-1">{{ $index + 1 }}</span>
                                        </div>
                                    </div>
                                @endforeach
                            @endif
                            
                            @if(!$product->image && !$product->additional_images)
                                <div class="col-12">
                                    <div class="alert alert-info">
                                        <i class="bi bi-info-circle"></i> No images currently uploaded for this product
                                    </div>
                                </div>
                            @endif
                        </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', $product->is_active) ? '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', $product->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> Cancel
                            </a>
                            <button type="submit" class="btn btn-primary">
                                <i class="bi bi-check-lg"></i> Update Product
                            </button>
                        </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);
    
    // Function to show/hide category-specific fields
    function showCategoryFields(mainCategoryName) {
        // Hide all category fields first
        document.querySelectorAll('.category-fields').forEach(fieldSet => {
            fieldSet.style.display = 'none';
        });
        
        // Show relevant fields based on main category
        if (mainCategoryName) {
            const categoryName = mainCategoryName.toLowerCase();
            
            if (categoryName.includes('food') || categoryName.includes('grocery') || categoryName.includes('beverage')) {
                document.querySelector('.food-grocery-fields').style.display = 'block';
            } else if (categoryName.includes('electronic') || categoryName.includes('technology')) {
                document.querySelector('.electronics-fields').style.display = 'block';
            } else if (categoryName.includes('clothing') || categoryName.includes('fashion') || categoryName.includes('apparel')) {
                document.querySelector('.clothing-fields').style.display = 'block';
            } else if (categoryName.includes('health') || categoryName.includes('beauty') || categoryName.includes('cosmetic') || categoryName.includes('personal care')) {
                document.querySelector('.health-beauty-fields').style.display = 'block';
            }
        }
    }
    
    mainCategorySelect.addEventListener('change', function() {
        const mainCategoryId = this.value;
        
        // Clear subcategory dropdown
        subCategorySelect.innerHTML = '<option value="">Select subcategory</option>';
        
        // Update main category image preview
        const mainCategoryImagePreview = document.getElementById('mainCategoryImagePreview');
        
        if (mainCategoryId) {
            // Enable subcategory dropdown
            subCategorySelect.disabled = false;
            
            // Find the selected main category to get its name and image
            const mainCategoriesData = @json($mainCategories);
            const selectedMainCategory = mainCategoriesData.find(cat => cat.id == mainCategoryId);
            
            // Update main category image
            if (selectedMainCategory) {
                showCategoryFields(selectedMainCategory.name);
                
                if (selectedMainCategory.image) {
                    mainCategoryImagePreview.innerHTML = `
                        <img src="${selectedMainCategory.image_url || '/storage/' + selectedMainCategory.image}" 
                             alt="${selectedMainCategory.name}" 
                             class="img-thumbnail"
                             style="width: 60px; height: 60px; object-fit: cover;">
                        <small class="d-block text-muted mt-1">${selectedMainCategory.name}</small>
                    `;
                } else {
                    mainCategoryImagePreview.innerHTML = `
                        <div class="bg-light rounded d-flex align-items-center justify-content-center" 
                             style="width: 60px; height: 60px; margin: 0 auto;">
                            <i class="mdi mdi-image text-muted"></i>
                        </div>
                        <small class="d-block text-muted mt-1">${selectedMainCategory.name}</small>
                    `;
                }
            }
            
            // 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;
                subCategorySelect.appendChild(option);
            });
        } else {
            subCategorySelect.disabled = true;
            showCategoryFields(null); // Hide all fields
            
            // Reset main category image
            mainCategoryImagePreview.innerHTML = `
                <div class="bg-light rounded d-flex align-items-center justify-content-center" 
                     style="width: 60px; height: 60px; margin: 0 auto;">
                    <i class="mdi mdi-image text-muted"></i>
                </div>
                <small class="d-block text-muted mt-1">No category</small>
            `;
        }
        
        // Clear sub-category image when main category changes
        const subCategoryImagePreview = document.getElementById('subCategoryImagePreview');
        subCategoryImagePreview.innerHTML = `
            <div class="bg-light rounded d-flex align-items-center justify-content-center" 
                 style="width: 60px; height: 60px; margin: 0 auto;">
                <i class="mdi mdi-image text-muted"></i>
            </div>
            <small class="d-block text-muted mt-1">No sub-category</small>
        `;
    });
    
    // Add subcategory change handler for image updates
    subCategorySelect.addEventListener('change', function() {
        const subCategoryId = this.value;
        const subCategoryImagePreview = document.getElementById('subCategoryImagePreview');
        
        if (subCategoryId) {
            const selectedSubCategory = subCategoriesData.find(cat => cat.id == subCategoryId);
            
            if (selectedSubCategory) {
                if (selectedSubCategory.image) {
                    subCategoryImagePreview.innerHTML = `
                        <img src="/storage/${selectedSubCategory.image}" 
                             alt="${selectedSubCategory.name}" 
                             class="img-thumbnail"
                             style="width: 60px; height: 60px; object-fit: cover;">
                        <small class="d-block text-muted mt-1">${selectedSubCategory.name}</small>
                    `;
                } else {
                    subCategoryImagePreview.innerHTML = `
                        <div class="bg-light rounded d-flex align-items-center justify-content-center" 
                             style="width: 60px; height: 60px; margin: 0 auto;">
                            <i class="mdi mdi-image text-muted"></i>
                        </div>
                        <small class="d-block text-muted mt-1">${selectedSubCategory.name}</small>
                    `;
                }
            }
        } else {
            subCategoryImagePreview.innerHTML = `
                <div class="bg-light rounded d-flex align-items-center justify-content-center" 
                     style="width: 60px; height: 60px; margin: 0 auto;">
                    <i class="mdi mdi-image text-muted"></i>
                </div>
                <small class="d-block text-muted mt-1">No sub-category</small>
            `;
        }
    });

    // Calculate profit margin
    function calculateMargin() {
        const costPrice = parseFloat(document.getElementById('cost_price').value) || 0;
        const sellingPrice = parseFloat(document.getElementById('selling_price').value) || 0;
        
        if (costPrice > 0 && sellingPrice > 0) {
            const margin = ((sellingPrice - costPrice) / sellingPrice * 100).toFixed(2);
            console.log('Profit Margin:', margin + '%');
        }
    }

    document.getElementById('cost_price').addEventListener('input', calculateMargin);
    document.getElementById('selling_price').addEventListener('input', calculateMargin);

    // Validate sale price is less than selling price
    document.getElementById('sale_price').addEventListener('input', function() {
        const salePrice = parseFloat(this.value);
        const sellingPrice = parseFloat(document.getElementById('selling_price').value);
        
        if (salePrice && sellingPrice && salePrice >= sellingPrice) {
            this.setCustomValidity('Sale price must be less than selling price');
        } else {
            this.setCustomValidity('');
        }
    });

    // Trigger main category change to populate subcategories if editing
    if (mainCategorySelect.value) {
        mainCategorySelect.dispatchEvent(new Event('change'));
        
        // Set the subcategory value after a short delay
        setTimeout(() => {
            const currentSubCategoryId = {{ old('sub_category_id', $product->sub_category_id ?? 0) }};
            if (currentSubCategoryId) {
                subCategorySelect.value = currentSubCategoryId;
            }
        }, 100);
    }
});
</script>

@endsection