@php use Illuminate\Support\Carbon;use Illuminate\Support\Collection; @endphp
@extends('admin::layouts.master')
@section('title', isset($product['id']) ? 'Product Edit' : 'Product Create')
@section('content')
    <div class="container-fluid jsb-edit">
        
        {{-- Display validation errors in a user-friendly way --}}
        @if($errors->any())
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                <strong>⚠️ Please fix the following errors:</strong>
                <ul class="mt-2 mb-0">
                    @foreach($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
        @endif

        {{-- Display success messages --}}
        @if(session('success'))
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                <strong>✅ {{ session('success') }}</strong>
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
        @endif

        {{-- Display warning messages --}}
        @if(session('warning'))
            <div class="alert alert-warning alert-dismissible fade show" role="alert">
                <strong>⚠️ {{ session('warning') }}</strong>
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
        @endif

        {{-- Display file validation errors --}}
        <div id="file-validation-errors" class="alert alert-danger alert-dismissible fade show" role="alert" style="display: none;">
            <strong>⚠️ Please fix the following file errors:</strong>
            <ul id="file-error-list" class="mt-2 mb-0">
            </ul>
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>

        <form method="POST"
              action="{{ isset($product) && isset($product['id']) ? route('products.update', $product['id']) : route('products.store') }}"
              enctype="multipart/form-data"
              id="product-form">
            @csrf
            @if(isset($product) && isset($product['id']))
                @method('put')
                <input type="hidden" name="id" value="{{ $product['id'] }}">
            @endif
            
            {{-- Hidden inputs to store selected file names for persistence --}}
            <input type="hidden" name="selected_images" id="selected_images" value="{{ old('selected_images', '') }}">
            <input type="hidden" name="selected_videos" id="selected_videos" value="{{ old('selected_videos', '') }}">
            
            <div class="row">
                <div class="col-9">
                    <div class="form-group">
                        <label for="inputTitle">@lang('partials.title')</label>
                        <input id="inputTitle" type="text" name="title" placeholder="@lang('partials.title')"
                               value="{{ old('title', $product['title'] ?? '') }}" 
                               class="form-control @error('title') is-invalid @enderror"
                               required>
                        @error('title')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                        @enderror
                    </div>

                    <div class="form-group">
                        <label for="summary">@lang('partials.summary')</label>
                        <textarea class="form-control @error('summary') is-invalid @enderror" id="summary"
                                  name="summary" required>{{ old('summary', $product['summary'] ?? '') }}</textarea>
                        @error('summary')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                        @enderror
                    </div>

                    <div class="form-group">
                        <label for="description">@lang('partials.description')</label>
                        <textarea class="form-control @error('description') is-invalid @enderror" id="description"
                                  name="description">{{ old('description', $product['description'] ?? '') }}</textarea>
                        @error('description')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                        @enderror
                        @if(config('openai.openai.enabled'))
                            <button type="button" style="margin-top: 2%" id="generateDescription"
                                    class="btn btn-info">@lang('partials.generate_description')</button>
                        @endif
                    </div>
                    
                    <!-- New Technical Fields with Enhanced Voltage Validation -->
                    <div class="form-group">
                        <label for="input_voltage_min">Input Voltage Min</label>
                        <div class="input-group">
                            <input id="input_voltage_min"
                                   type="number"
                                   step="0.01"
                                   name="input_voltage_min"
                                   placeholder="Example: 12.01"
                                   value="{{ old('input_voltage_min', $product['input_voltage_min'] ?? '') }}"
                                   class="form-control voltage-input voltage-min @error('input_voltage_min') is-invalid @enderror"
                                   min="0">
                            <span class="input-group-text">Volts</span>
                        </div>
                        <div class="voltage-error-message" id="input-voltage-error" style="color: #dc3545; font-size: 80%; display: none;"></div>
                        @error('input_voltage_min')
                            <span class="invalid-feedback d-block" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                        @enderror
                    </div>

                    <div class="form-group">
                        <label for="input_voltage_max">Input Voltage Max</label>
                        <div class="input-group">
                            <input id="input_voltage_max"
                                   type="number"
                                   step="0.01"
                                   name="input_voltage_max"
                                   placeholder="Example: 12.01"
                                   value="{{ old('input_voltage_max', $product['input_voltage_max'] ?? '') }}"
                                   class="form-control voltage-input voltage-max @error('input_voltage_max') is-invalid @enderror"
                                   min="0">
                            <span class="input-group-text">Volts</span>
                        </div>
                        @error('input_voltage_max')
                            <span class="invalid-feedback d-block" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                        @enderror
                    </div>

                    <div class="form-group">
                        <label for="input_current_max">Input Current Max</label>
                        <div class="input-group">
                            <input id="input_current_max"
                                   type="number"
                                   step="0.01"
                                   name="input_current_max"
                                   placeholder="Example: 12.01"
                                   value="{{ old('input_current_max', $product['input_current_max'] ?? '') }}"
                                   class="form-control @error('input_current_max') is-invalid @enderror"
                                   min="0">
                            <span class="input-group-text">Amps</span>
                        </div>
                        @error('input_current_max')
                            <span class="invalid-feedback d-block" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                        @enderror
                    </div>

                    <div class="form-group">
                        <label for="output_voltage_min">Output Voltage Min</label>
                        <div class="input-group">
                            <input id="output_voltage_min"
                                   type="number"
                                   step="0.01"
                                   name="output_voltage_min"
                                   placeholder="Example: 12.01"
                                   value="{{ old('output_voltage_min', $product['output_voltage_min'] ?? '') }}"
                                   class="form-control voltage-output-min @error('output_voltage_min') is-invalid @enderror"
                                   min="0">
                            <span class="input-group-text">Volts</span>
                        </div>
                        <div class="voltage-error-message" id="output-voltage-error" style="color: #dc3545; font-size: 80%; display: none;"></div>
                        @error('output_voltage_min')
                            <span class="invalid-feedback d-block" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                        @enderror
                    </div>

                    <div class="form-group">
                        <label for="output_voltage_max">Output Voltage Max</label>
                        <div class="input-group">
                            <input id="output_voltage_max"
                                   type="number"
                                   step="0.01"
                                   name="output_voltage_max"
                                   placeholder="Example: 12.01"
                                   value="{{ old('output_voltage_max', $product['output_voltage_max'] ?? '') }}"
                                   class="form-control voltage-output-max @error('output_voltage_max') is-invalid @enderror"
                                   min="0">
                            <span class="input-group-text">Volts</span>
                        </div>
                        @error('output_voltage_max')
                            <span class="invalid-feedback d-block" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                        @enderror
                    </div>

                    <div class="form-group">
                        <label for="output_current_max">Output Current Max</label>
                        <div class="input-group">
                            <input id="output_current_max"
                                   type="number"
                                   step="0.01"
                                   name="output_current_max"
                                   placeholder="Example: 12.01"
                                   value="{{ old('output_current_max', $product['output_current_max'] ?? '') }}"
                                   class="form-control @error('output_current_max') is-invalid @enderror"
                                   min="0">
                            <span class="input-group-text">Amps</span>
                        </div>
                        @error('output_current_max')
                            <span class="invalid-feedback d-block" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                        @enderror
                    </div>

                    <div class="form-group">
                        <label for="max_output_power">Max Output Power</label>
                        <div class="input-group">
                            <input id="max_output_power"
                                   type="number"
                                   step="0.01"
                                   name="max_output_power"
                                   placeholder="Example: 12.01"
                                   value="{{ old('max_output_power', $product['max_output_power'] ?? '') }}"
                                   class="form-control @error('max_output_power') is-invalid @enderror"
                                   min="0">
                            <span class="input-group-text">Watts</span>
                        </div>
                        @error('max_output_power')
                            <span class="invalid-feedback d-block" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                        @enderror
                    </div>

                    <div class="form-group">
                        <label for="max_temperature">Max Temperature (°C)</label>
                        <input id="max_temperature" 
                               type="number"
                               step="0.01"
                               name="max_temperature" 
                               placeholder="Example 25"
                               value="{{ old('max_temperature', $product['max_temperature'] ?? '') }}" 
                               class="form-control @error('max_temperature') is-invalid @enderror">
                        @error('max_temperature')
                            <span class="invalid-feedback d-block" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                        @enderror
                    </div>
                    
                    <div class="form-group">
                        <label for="min_temperature">Min Temperature (°C)</label>
                        <input id="min_temperature" 
                               type="number"
                               step="0.01"
                               name="min_temperature" 
                               placeholder="Example -20"
                               value="{{ old('min_temperature', $product['min_temperature'] ?? '') }}" 
                               class="form-control @error('min_temperature') is-invalid @enderror">
                        @error('min_temperature')
                            <span class="invalid-feedback d-block" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                        @enderror
                    </div>
                    
                    <div class="form-group">
                        <label for="product_dimension">Product Dimension (LxWxH in mm)</label>
                        <input id="product_dimension" 
                               type="text" 
                               name="product_dimension" 
                               placeholder="Example '10mmx12mmx13mm'" 
                               value="{{ old('product_dimension', $product['product_dimension'] ?? '') }}" 
                               class="form-control @error('product_dimension') is-invalid @enderror">
                        @error('product_dimension')
                            <span class="invalid-feedback d-block" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                        @enderror
                    </div>
                    
                    <div class="form-group">
                        <label for="part_number">Part Number</label>
                        <input id="part_number" 
                               type="text" 
                               name="part_number" 
                               placeholder="Example ATR100"
                               value="{{ old('part_number', $product['part_number'] ?? '') }}" 
                               class="form-control @error('part_number') is-invalid @enderror">
                        @error('part_number')
                            <span class="invalid-feedback d-block" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                        @enderror
                    </div>
                </div>

                <div class="col-3">
                    <!-- Image Upload Section with Persistent Selection -->
                    <div class="form-group">
                        <label for="images">@lang('partials.image')</label>
                        
                        {{-- Custom file input that shows selected files --}}
                        <div class="custom-file-input-wrapper">
                            <div class="input-group">
                                <div class="custom-file">
                                    <input type="file" 
                                           name="images[]" 
                                           id="image" 
                                           class="custom-file-input @error('images.*') is-invalid @enderror" 
                                           multiple 
                                           accept="image/jpeg,image/png,image/jpg,image/gif,image/svg+xml"
                                           style="display: none;">
                                    <button type="button" class="btn btn-outline-secondary" id="select-images-btn">
                                        <i class="fas fa-images"></i> Select Images
                                    </button>
                                </div>
                            </div>
                            <small class="form-text text-muted">
                                <i class="fas fa-info-circle"></i> Allowed formats: JPEG, PNG, JPG, GIF, SVG. Max size: 2MB per image.
                            </small>
                        </div>
                        
                        @error('images.*')
                            <span class="invalid-feedback d-block" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                        @enderror
                        
                        <!-- Selected images preview -->
                        <div id="image-preview-container" class="mt-3">
                            <label>Selected Images:</label>
                            <div id="image-preview" class="d-flex flex-wrap gap-3">
                                <!-- Images will be added here dynamically -->
                            </div>
                        </div>
                        
                        <!-- Image validation status -->
                        <div id="image-validation-status" class="mt-2"></div>
                        
                        <!-- Display existing images -->
                        @if(isset($product) && is_object($product) && $product->hasMedia('images'))
                            <div class="mt-3">
                                <label>Current Images:</label>
                                <div class="d-flex flex-wrap gap-3">
                                    @foreach($product->getMedia('images') as $media)
                                        <div class="position-relative" style="width: 150px;">
                                            <img src="{{ $media->getUrl('thumb') ?? $media->getUrl() }}" 
                                                 alt="Product Image"
                                                 class="img-thumbnail" 
                                                 style="width: 100%; height: 150px; object-fit: cover;">
                                            <button type="button" 
                                                        class="btn btn-sm btn-danger rounded-circle"
                                                        style="width: 30px; height: 30px; padding: 0; display: flex; align-items: center; justify-content: center;" onclick="if(confirm('Are you sure you want to delete this image?')){deleteMedia('{{ route('product.delete-media', ['modelId' => $product->id, 'mediaId' => $media->id]) }}')}"><i class="fas fa-times"></i></button>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        @endif
                    </div>

                    <!-- Video Upload Section with Persistent Selection -->
                    <div class="form-group mt-3">
                        <label>Product Videos</label>
                        
                        {{-- Custom file input for videos --}}
                        <div class="custom-file-input-wrapper">
                            <div class="input-group">
                                <div class="custom-file">
                                    <input type="file" 
                                           name="videos[]" 
                                           id="video" 
                                           class="custom-file-input @error('videos.*') is-invalid @enderror" 
                                           multiple
                                           accept="video/mp4,video/webm,video/ogg,video/avi,video/mov"
                                           style="display: none;">
                                    <button type="button" class="btn btn-outline-secondary" id="select-videos-btn">
                                        <i class="fas fa-video"></i> Select Videos
                                    </button>
                                </div>
                            </div>
                            <small class="form-text text-muted">
                                <i class="fas fa-info-circle"></i> Allowed formats: MP4, WebM, OGG, AVI, MOV. Max size: 100MB per video.
                            </small>
                        </div>
                        
                        @error('videos.*')
                            <span class="invalid-feedback d-block" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                        @enderror

                        <!-- Selected videos preview -->
                        <div id="video-preview-container" class="mt-3">
                            <label>Selected Videos:</label>
                            <div id="video-preview" class="d-flex gap-3 flex-wrap">
                                <!-- Videos will be added here dynamically -->
                            </div>
                        </div>

                        <!-- Video validation status -->
                        <div id="video-validation-status" class="mt-2"></div>

                        <!-- Display existing videos -->
                        @if(isset($product) && is_object($product) && $product->hasMedia('videos'))
                            <div class="mt-3">
                                <label>Current Videos:</label>
                                <div class="d-flex gap-3 flex-wrap">
                                    @foreach($product->getMedia('videos') as $video)
                                        <div class="position-relative" style="width: 220px;">
                                            <video width="220" height="140" controls class="img-thumbnail">
                                                <source src="{{ $video->getUrl() }}">
                                                Your browser does not support the video tag.
                                            </video>
                                            <button type="button" 
                                                        class="btn btn-sm btn-danger rounded-circle"
                                                        style="width: 30px; height: 30px; padding: 0; display: flex; align-items: center; justify-content: center;" onclick="if(confirm('Are you sure you want to delete this video?')){deleteMedia('{{ route('product.delete-media', ['modelId' => $product->id, 'mediaId' => $video->id]) }}')}"><i class="fas fa-times"></i></button>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        @endif
                    </div>

                    <div class="form-group">
                        <label for="sku">@lang('partials.sku')</label>
                        <input id="sku" name="sku" placeholder="Enter SKU"
                               value="{{ old('sku', $product['sku'] ?? '') }}" 
                               class="form-control @error('sku') is-invalid @enderror">
                        @error('sku')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                        @enderror
                    </div>

                    <div class="form-group">
                        <label for="price">@lang('partials.price')</label>
                        <div class="input-group">
                            <input id="price" 
                                   type="number" 
                                   name="price" 
                                   placeholder="Enter price"
                                   value="{{ old('price', $product['price'] ?? '') }}" 
                                   class="form-control @error('price') is-invalid @enderror"
                                   min="0" 
                                   step="0.01"
                                   required>
                            <span class="input-group-text">$</span>
                        </div>
                        @error('price')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                        @enderror
                    </div>
                    
                    <div class="form-group">
                        <label for="discount">Discount Percentage</label>
                        <div class="input-group">
                            <input id="discount" 
                                   type="number" 
                                   name="discount" 
                                   placeholder="Enter discount percentage"
                                   value="{{ old('discount', $product['discount'] ?? '') }}" 
                                   class="form-control @error('discount') is-invalid @enderror"
                                   min="0" 
                                   max="100" 
                                   step="0.01">
                            <span class="input-group-text">%</span>
                        </div>
                        <small class="form-text text-muted">
                            <i class="fas fa-info-circle"></i> Discount must be between 0% and 100%
                        </small>
                        @error('discount')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                        @enderror
                    </div>

                    <div class="form-group">
                        <label for="special_price">@lang('partials.special_price')</label>
                        <div class="input-group">
                            <input id="special_price" 
                                   type="number" 
                                   name="special_price"
                                   value="{{ old('special_price', $product['special_price'] ?? '') }}" 
                                   class="form-control @error('special_price') is-invalid @enderror"
                                   min="0" 
                                   step="0.01">
                            <span class="input-group-text">$</span>
                        </div>
                        @error('special_price')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                        @enderror
                    </div>

                    <div class="form-group">
                        <label for="special_price_start">@lang('partials.start_date')</label>
                        <input type="date" name="special_price_start" id="special_price_start"
                               value="{{ old('special_price_start') ?? (isset($product['special_price_start']) ? Carbon::parse($product['special_price_start'])->format('Y-m-d') : '') }}"
                               class="form-control @error('special_price_start') is-invalid @enderror">
                        @error('special_price_start')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                        @enderror
                    </div>

                    <div class="form-group">
                        <label for="special_price_end">@lang('partials.end_date')</label>
                        <input type="date" name="special_price_end" id="special_price_end"
                               value="{{ old('special_price_end') ?? (isset($product['special_price_end']) ? Carbon::parse($product['special_price_end'])->format('Y-m-d') : '') }}"
                               class="form-control @error('special_price_end') is-invalid @enderror">
                        @error('special_price_end')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                        @enderror
                    </div>

                    <div class="form-group">
                        <label for="status">Status</label>
                        <select name="status" class="form-control @error('status') is-invalid @enderror" required>
                            <option value="active" {{ old('status', $product['status'] ?? '') == 'active' ? 'selected' : '' }}>
                                Active
                            </option>
                            <option value="available soon" {{ old('status', $product['status'] ?? '') == 'available soon' ? 'selected' : '' }}>
                                Available Soon
                            </option>
                            <option value="discontinued" {{ old('status', $product['status'] ?? '') == 'discontinued' ? 'selected' : '' }}>
                                Discontinued
                            </option>
                        </select>
                        @error('status')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                        @enderror
                    </div>
                    
                    <div class="form-group">
                        <label for="stock">Stock</label>
                        <input id="stock" type="number" name="stock" min="0" placeholder="Enter quantity"
                               value="{{ old('stock', $product['stock'] ?? '') }}" 
                               class="form-control @error('stock') is-invalid @enderror"
                               required>
                        @error('stock')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                        @enderror
                    </div>

                    <div class="form-group">
                        <label for="is_featured">@lang('partials.is_featured')</label><br>
                        <input type="checkbox" name="is_featured" id="is_featured" value="1"
                                {{ old('is_featured', $product['is_featured'] ?? false) ? 'checked' : '' }}> Yes
                    </div>

                    <div class="form-group">
                        <label for="category_id">@lang('partials.categories')</label>
                        <select name="category[]" id="category_id" class="form-control js-example-basic-multiple @error('category') is-invalid @enderror @error('category.*') is-invalid @enderror"
                                multiple="multiple" required>
                            @php
                                $selectedCategories = old('category', isset($product['categories']) ? collect($product['categories'])->pluck('id')->all() : []);
                            @endphp
                            @foreach($categories as $category)
                                <option value="{{ $category['id'] }}" {{ in_array($category['id'], $selectedCategories) ? 'selected' : '' }}>{{ $category['title'] }}</option>
                            @endforeach
                        </select>
                        @error('category')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                        @enderror
                        @error('category.*')
                            <span class="invalid-feedback d-block" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                        @enderror
                    </div>

                    <div class="form-group">
                        <label for="tag">@lang('partials.tags')</label>
                        <select name="tag[]" class="form-control js-example-basic-multiple @error('tag') is-invalid @enderror @error('tag.*') is-invalid @enderror" multiple="multiple" required>
                            @php
                                $selectedTags = old('tag', isset($product['tags']) ? collect($product['tags'])->pluck('id')->all() : []);
                            @endphp
                            @foreach($tags as $tag)
                                <option value="{{ $tag['id'] }}" {{ in_array($tag['id'], $selectedTags) ? 'selected' : '' }}>{{ $tag['title'] }}</option>
                            @endforeach
                        </select>
                        @error('tag')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                        @enderror
                        @error('tag.*')
                            <span class="invalid-feedback d-block" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                        @enderror
                    </div>
                </div>
            </div>

            <div class="button-container">
                <button type="reset" class="btn btn-warning">@lang('partials.reset')</button>
                <button class="btn btn-success" type="submit" id="submit-btn">@lang('partials.submit')</button>
            </div>
        </form>
    </div>

    @if(isset($product) && is_object($product) && $product->hasMedia('product'))
    <div class="row container-fluid mt-4">
        @foreach($product->getMedia('product') as $media)
            <div class="col-md-3">
                <img src="{{ $media->getUrl() }}" alt="Image" class="img-fluid" style="max-height: 300px">
                <form action="{{ route('product.delete-media', ['modelId' => $product->id, 'mediaId' => $media->id]) }}"
                      method="POST">
                    @csrf
                    @method('DELETE')
                    <button type="submit" class="btn btn-danger" onclick="return confirm('Are you sure?')">Delete
                    </button>
                </form>
            </div>
        @endforeach
    </div>
    @endif

    @push('styles')
        <link rel="stylesheet" href="{{ asset('backend/summernote/summernote.min.css') }}">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
        <style>
            .invalid-feedback {
                display: block;
                width: 100%;
                margin-top: 0.25rem;
                font-size: 80%;
                color: #dc3545;
            }
            .is-invalid {
                border-color: #dc3545 !important;
            }
            .alert-danger ul {
                margin-bottom: 0;
            }
            .input-group-text {
                background-color: #e9ecef;
                border: 1px solid #ced4da;
                border-left: none;
            }
            .input-group .form-control:not(:first-child) {
                border-left: none;
            }
            .position-relative {
                position: relative;
            }
            .position-absolute {
                position: absolute;
            }
            .top-0 {
                top: 0;
            }
            .right-0 {
                right: 0;
            }
            .btn-sm.rounded-circle {
                width: 30px;
                height: 30px;
                padding: 0;
                display: flex;
                align-items: center;
                justify-content: center;
            }
            .img-thumbnail {
                border: 1px solid #dee2e6;
                border-radius: 0.25rem;
            }
            .gap-3 {
                gap: 1rem;
            }
            .d-flex {
                display: flex;
            }
            .flex-wrap {
                flex-wrap: wrap;
            }
            .mt-3 {
                margin-top: 1rem;
            }
            .mb-0 {
                margin-bottom: 0;
            }
            .file-error {
                color: #dc3545;
                font-size: 0.875rem;
                margin-top: 0.25rem;
            }
            .valid-file {
                color: #28a745;
            }
            .validation-pending {
                color: #ffc107;
            }
            .preview-item {
                position: relative;
                border: 1px solid #dee2e6;
                border-radius: 0.25rem;
                padding: 0.5rem;
                background: #f8f9fa;
            }
            .preview-item .remove-file {
                position: absolute;
                top: -5px;
                right: -5px;
                width: 25px;
                height: 25px;
                border-radius: 50%;
                background: #dc3545;
                color: white;
                border: none;
                display: flex;
                align-items: center;
                justify-content: center;
                cursor: pointer;
                font-size: 12px;
            }
            .preview-item .remove-file:hover {
                background: #c82333;
            }
            .file-info {
                font-size: 0.8rem;
                margin-top: 0.25rem;
                word-break: break-all;
            }
            .btn-outline-secondary {
                width: 100%;
                padding: 0.5rem;
            }
            .voltage-error-message {
                margin-top: 0.25rem;
            }
        </style>
    @endpush

    @push('scripts')
        <script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
        <script src="{{ asset('backend/summernote/summernote.min.js') }}"></script>
        <script>
            // Store selected files
            let selectedImages = [];
            let selectedVideos = [];
            
            // File validation state
            let imageValidation = {
                isValid: true,
                errors: []
            };
            
            let videoValidation = {
                isValid: true,
                errors: []
            };

            // Allowed file types
            const ALLOWED_IMAGE_TYPES = ['image/jpeg', 'image/png', 'image/jpg', 'image/gif', 'image/svg+xml'];
            const ALLOWED_VIDEO_TYPES = ['video/mp4', 'video/webm', 'video/ogg', 'video/avi', 'video/quicktime'];
            const MAX_IMAGE_SIZE = 2 * 1024 * 1024; // 2MB
            const MAX_VIDEO_SIZE = 100 * 1024 * 1024; // 100MB

            // Restore previously selected files from old input
            function restoreSelectedFiles() {
                const selectedImagesStr = $('#selected_images').val();
                const selectedVideosStr = $('#selected_videos').val();
                
                if (selectedImagesStr) {
                    try {
                        const savedImages = JSON.parse(selectedImagesStr);
                        if (Array.isArray(savedImages) && savedImages.length > 0) {
                            selectedImages = savedImages;
                            updateImagePreview();
                        }
                    } catch (e) {
                        console.error('Error parsing saved images:', e);
                    }
                }
                
                if (selectedVideosStr) {
                    try {
                        const savedVideos = JSON.parse(selectedVideosStr);
                        if (Array.isArray(savedVideos) && savedVideos.length > 0) {
                            selectedVideos = savedVideos;
                            updateVideoPreview();
                        }
                    } catch (e) {
                        console.error('Error parsing saved videos:', e);
                    }
                }
            }

            // Format file size
            function formatFileSize(bytes) {
                if (bytes === 0) return '0 Bytes';
                const k = 1024;
                const sizes = ['Bytes', 'KB', 'MB', 'GB'];
                const i = Math.floor(Math.log(bytes) / Math.log(k));
                return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
            }

            // Update image preview
            function updateImagePreview() {
                const previewContainer = $('#image-preview');
                previewContainer.empty();
                
                if (selectedImages.length === 0) {
                    $('#image-preview-container').hide();
                    return;
                }
                
                $('#image-preview-container').show();
                
                selectedImages.forEach((file, index) => {
                    const fileInfo = file.name || file;
                    const fileSize = file.size ? formatFileSize(file.size) : 'Unknown size';
                    const fileType = file.type || 'Unknown type';
                    
                    const previewHtml = `
                        <div class="preview-item" style="width: 150px;">
                            <div class="text-center">
                                <i class="fas fa-file-image fa-3x text-primary"></i>
                            </div>
                            <div class="file-info">
                                <strong>${fileInfo.substring(0, 15)}${fileInfo.length > 15 ? '...' : ''}</strong><br>
                                <small>${fileType}<br>${fileSize}</small>
                            </div>
                            <button type="button" class="remove-file" onclick="removeImage(${index})">
                                <i class="fas fa-times"></i>
                            </button>
                        </div>
                    `;
                    
                    previewContainer.append(previewHtml);
                });
                
                // Update hidden input
                $('#selected_images').val(JSON.stringify(selectedImages.map(f => f.name || f)));
            }

            // Update video preview
            function updateVideoPreview() {
                const previewContainer = $('#video-preview');
                previewContainer.empty();
                
                if (selectedVideos.length === 0) {
                    $('#video-preview-container').hide();
                    return;
                }
                
                $('#video-preview-container').show();
                
                selectedVideos.forEach((file, index) => {
                    const fileInfo = file.name || file;
                    const fileSize = file.size ? formatFileSize(file.size) : 'Unknown size';
                    const fileType = file.type || 'Unknown type';
                    
                    const previewHtml = `
                        <div class="preview-item" style="width: 150px;">
                            <div class="text-center">
                                <i class="fas fa-file-video fa-3x text-success"></i>
                            </div>
                            <div class="file-info">
                                <strong>${fileInfo.substring(0, 15)}${fileInfo.length > 15 ? '...' : ''}</strong><br>
                                <small>${fileType}<br>${fileSize}</small>
                            </div>
                            <button type="button" class="remove-file" onclick="removeVideo(${index})">
                                <i class="fas fa-times"></i>
                            </button>
                        </div>
                    `;
                    
                    previewContainer.append(previewHtml);
                });
                
                // Update hidden input
                $('#selected_videos').val(JSON.stringify(selectedVideos.map(f => f.name || f)));
            }

            // Remove image
            window.removeImage = function(index) {
                selectedImages.splice(index, 1);
                updateImagePreview();
                validateImages();
                
                // Reset file input if all images removed
                if (selectedImages.length === 0) {
                    $('#image').val('');
                }
            };

            // Remove video
            window.removeVideo = function(index) {
                selectedVideos.splice(index, 1);
                updateVideoPreview();
                validateVideos();
                
                // Reset file input if all videos removed
                if (selectedVideos.length === 0) {
                    $('#video').val('');
                }
            };

            // Validate image files
            function validateImages() {
                imageValidation.isValid = true;
                imageValidation.errors = [];
                
                @if(!isset($product) || !isset($product['id']))
                    if (selectedImages.length === 0) {
                        imageValidation.isValid = false;
                        imageValidation.errors.push('At least one image is required');
                    }
                @endif
                
                // Validate each selected image
                selectedImages.forEach((file, index) => {
                    if (file instanceof File) {
                        // Check file type
                        if (!ALLOWED_IMAGE_TYPES.includes(file.type)) {
                            imageValidation.isValid = false;
                            imageValidation.errors.push(`"${file.name}" has invalid format (must be JPEG, PNG, JPG, GIF, or SVG)`);
                        }
                        
                        // Check file size
                        if (file.size > MAX_IMAGE_SIZE) {
                            imageValidation.isValid = false;
                            imageValidation.errors.push(`"${file.name}" exceeds 2MB (${(file.size / (1024*1024)).toFixed(2)}MB)`);
                        }
                    }
                });
                
                updateValidationStatus();
                return imageValidation.isValid;
            }

            // Validate video files
            function validateVideos() {
                videoValidation.isValid = true;
                videoValidation.errors = [];
                
                // Validate each selected video
                selectedVideos.forEach((file, index) => {
                    if (file instanceof File) {
                        // Check file type
                        if (!ALLOWED_VIDEO_TYPES.includes(file.type)) {
                            videoValidation.isValid = false;
                            videoValidation.errors.push(`"${file.name}" has invalid format (must be MP4, WebM, OGG, AVI, or MOV)`);
                        }
                        
                        // Check file size
                        if (file.size > MAX_VIDEO_SIZE) {
                            videoValidation.isValid = false;
                            videoValidation.errors.push(`"${file.name}" exceeds 100MB (${(file.size / (1024*1024)).toFixed(2)}MB)`);
                        }
                    }
                });
                
                updateValidationStatus();
                return videoValidation.isValid;
            }

            // Update validation status display
            function updateValidationStatus() {
                const imageStatus = $('#image-validation-status');
                const videoStatus = $('#video-validation-status');
                
                if (imageValidation.isValid) {
                    if (selectedImages.length > 0) {
                        imageStatus.html('<span class="valid-file"><i class="fas fa-check-circle"></i> All images are valid</span>');
                    } else {
                        @if(!isset($product) || !isset($product['id']))
                            imageStatus.html('<span class="file-error"><i class="fas fa-exclamation-circle"></i> At least one image is required</span>');
                        @else
                            imageStatus.html('');
                        @endif
                    }
                } else {
                    imageStatus.html('<span class="file-error"><i class="fas fa-exclamation-circle"></i> ' + 
                        imageValidation.errors.join('<br>') + '</span>');
                }
                
                if (videoValidation.isValid) {
                    if (selectedVideos.length > 0) {
                        videoStatus.html('<span class="valid-file"><i class="fas fa-check-circle"></i> All videos are valid</span>');
                    } else {
                        videoStatus.html('');
                    }
                } else {
                    videoStatus.html('<span class="file-error"><i class="fas fa-exclamation-circle"></i> ' + 
                        videoValidation.errors.join('<br>') + '</span>');
                }
            }

            // Show file errors
            function showFileErrors() {
                const errorList = $('#file-error-list');
                const errorContainer = $('#file-validation-errors');
                
                errorList.empty();
                
                if (!imageValidation.isValid) {
                    errorList.append('<li><strong><i class="fas fa-image"></i> Image Errors:</strong></li>');
                    imageValidation.errors.forEach(error => {
                        errorList.append(`<li class="ml-3">• ${error}</li>`);
                    });
                }
                
                if (!videoValidation.isValid) {
                    if (!imageValidation.isValid) {
                        errorList.append('<li class="mt-2"><strong><i class="fas fa-video"></i> Video Errors:</strong></li>');
                    } else {
                        errorList.append('<li><strong><i class="fas fa-video"></i> Video Errors:</strong></li>');
                    }
                    videoValidation.errors.forEach(error => {
                        errorList.append(`<li class="ml-3">• ${error}</li>`);
                    });
                }
                
                if (!imageValidation.isValid || !videoValidation.isValid) {
                    errorContainer.show();
                    $('html, body').animate({
                        scrollTop: errorContainer.offset().top - 20
                    }, 500);
                } else {
                    errorContainer.hide();
                }
            }

            // Enhanced Voltage Validation Functions
            function validateInputVoltage() {
                const minVoltage = parseFloat($('#input_voltage_min').val());
                const maxVoltage = parseFloat($('#input_voltage_max').val());
                const minField = $('#input_voltage_min');
                const maxField = $('#input_voltage_max');
                const errorDiv = $('#input-voltage-error');
                
                // Reset validation state
                minField.removeClass('is-invalid');
                maxField.removeClass('is-invalid');
                errorDiv.hide();
                
                // Check if both fields have values
                if (!isNaN(minVoltage) && !isNaN(maxVoltage)) {
                    if (minVoltage > maxVoltage) {
                        minField.addClass('is-invalid');
                        maxField.addClass('is-invalid');
                        errorDiv.text('Minimum voltage cannot be higher than maximum voltage').show();
                        return false;
                    }
                }
                return true;
            }

            function validateOutputVoltage() {
                const minVoltage = parseFloat($('#output_voltage_min').val());
                const maxVoltage = parseFloat($('#output_voltage_max').val());
                const minField = $('#output_voltage_min');
                const maxField = $('#output_voltage_max');
                const errorDiv = $('#output-voltage-error');
                
                // Reset validation state
                minField.removeClass('is-invalid');
                maxField.removeClass('is-invalid');
                errorDiv.hide();
                
                // Check if both fields have values
                if (!isNaN(minVoltage) && !isNaN(maxVoltage)) {
                    if (minVoltage > maxVoltage) {
                        minField.addClass('is-invalid');
                        maxField.addClass('is-invalid');
                        errorDiv.text('Minimum voltage cannot be higher than maximum voltage').show();
                        return false;
                    }
                }
                return true;
            }

            // Comprehensive form validation
            function validateForm() {
                let isValid = true;
                
                // Validate input voltage
                if (!validateInputVoltage()) {
                    isValid = false;
                }
                
                // Validate output voltage
                if (!validateOutputVoltage()) {
                    isValid = false;
                }
                
                // Validate images
                if (!validateImages()) {
                    isValid = false;
                }
                
                // Validate videos
                if (!validateVideos()) {
                    isValid = false;
                }
                
                // Validate categories
                const categorySelect = $('#category_id');
                if (!categorySelect.val() || categorySelect.val().length === 0) {
                    isValid = false;
                    categorySelect.addClass('is-invalid');
                    showNotification('Please select at least one category.', 'error');
                } else {
                    categorySelect.removeClass('is-invalid');
                }
                
                // Validate tags
                const tagSelect = $('select[name="tag[]"]');
                if (!tagSelect.val() || tagSelect.val().length === 0) {
                    isValid = false;
                    tagSelect.addClass('is-invalid');
                    showNotification('Please select at least one tag.', 'error');
                } else {
                    tagSelect.removeClass('is-invalid');
                }
                
                // Validate title
                const titleInput = $('#inputTitle');
                if (!titleInput.val() || titleInput.val().trim() === '') {
                    isValid = false;
                    titleInput.addClass('is-invalid');
                    showNotification('Product title is required.', 'error');
                } else {
                    titleInput.removeClass('is-invalid');
                }
                
                // Validate summary
                const summaryInput = $('#summary');
                if (!summaryInput.val() || summaryInput.val().trim() === '') {
                    isValid = false;
                    summaryInput.addClass('is-invalid');
                    showNotification('Product summary is required.', 'error');
                } else {
                    summaryInput.removeClass('is-invalid');
                }
                
                // Validate price
                const priceInput = $('#price');
                if (!priceInput.val() || parseFloat(priceInput.val()) <= 0) {
                    isValid = false;
                    priceInput.addClass('is-invalid');
                    showNotification('Please enter a valid price (greater than 0).', 'error');
                } else {
                    priceInput.removeClass('is-invalid');
                }
                
                // Validate stock
                const stockInput = $('#stock');
                if (stockInput.val() === '' || parseInt(stockInput.val()) < 0) {
                    isValid = false;
                    stockInput.addClass('is-invalid');
                    showNotification('Please enter a valid stock quantity.', 'error');
                } else {
                    stockInput.removeClass('is-invalid');
                }
                
                // Validate status
                const statusSelect = $('select[name="status"]');
                if (!statusSelect.val()) {
                    isValid = false;
                    statusSelect.addClass('is-invalid');
                    showNotification('Please select a status.', 'error');
                } else {
                    statusSelect.removeClass('is-invalid');
                }
                
                // Show file errors if any
                if (!imageValidation.isValid || !videoValidation.isValid) {
                    showFileErrors();
                }
                
                return isValid;
            }

            // Notification function
            function showNotification(message, type = 'info') {
                let alertClass = 'alert-info';
                if (type === 'warning') alertClass = 'alert-warning';
                if (type === 'success') alertClass = 'alert-success';
                if (type === 'error') alertClass = 'alert-danger';
                
                let alertHtml = `
                    <div class="alert ${alertClass} alert-dismissible fade show" role="alert">
                        <strong>${type === 'error' ? '❌' : type === 'warning' ? '⚠️' : '✅'}</strong> ${message}
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                `;
                
                $('.jsb-edit').prepend(alertHtml);
                
                const timeout = type === 'error' ? 8000 : 3000;
                setTimeout(() => {
                    $('.alert').alert('close');
                }, timeout);
            }

            $(document).ready(function () {
                // Initialize Summernote (destroy any existing instance first to prevent double-init)
                $('#description').summernote('destroy');
                $('#description').summernote({
                    placeholder: "Write short description.....",
                    tabsize: 2,
                    height: 150
                });

                @if(config('openai.openai.enabled'))
                $('#generateDescription').on('click', function () {
                    const productTitle = $('#inputTitle').val();
                    if (!productTitle) {
                        alert('Please enter a title first.');
                        return;
                    }

                    $.ajax({
                        url: "{{ route('products.generate-description') }}",
                        type: "POST",
                        data: {
                            title: productTitle,
                            _token: '{{ csrf_token() }}'
                        },
                        success: function (response) {
                            $('#description').summernote('code', response.description);
                        },
                        error: function () {
                            alert('Error generating description. Please try again.');
                        }
                    });
                });
                @endif

                // Restore previously selected files
                restoreSelectedFiles();

                // Custom file input for images
                $('#select-images-btn').on('click', function() {
                    $('#image').click();
                });

                // Custom file input for videos
                $('#select-videos-btn').on('click', function() {
                    $('#video').click();
                });

                // Image selection handler
                $('#image').on('change', function() {
                    const files = Array.from(this.files);
                    
                    // Add new files to selectedImages
                    files.forEach(file => {
                        // Check if file already exists
                        const exists = selectedImages.some(f => 
                            f.name === file.name && f.size === file.size
                        );
                        
                        if (!exists) {
                            selectedImages.push(file);
                        }
                    });
                    
                    updateImagePreview();
                    validateImages();
                    
                    // Reset file input to allow selecting same files again
                    $(this).val('');
                });

                // Video selection handler
                $('#video').on('change', function() {
                    const files = Array.from(this.files);
                    
                    // Add new files to selectedVideos
                    files.forEach(file => {
                        // Check if file already exists
                        const exists = selectedVideos.some(f => 
                            f.name === file.name && f.size === file.size
                        );
                        
                        if (!exists) {
                            selectedVideos.push(file);
                        }
                    });
                    
                    updateVideoPreview();
                    validateVideos();
                    
                    // Reset file input to allow selecting same files again
                    $(this).val('');
                });

                // Real-time voltage validation with on-blur
                $('#input_voltage_min, #input_voltage_max').on('blur', function() {
                    validateInputVoltage();
                });

                $('#output_voltage_min, #output_voltage_max').on('blur', function() {
                    validateOutputVoltage();
                });

                // Real-time validation events
                $('#discount').on('input', function() {
                    let value = parseFloat($(this).val());
                    if (isNaN(value) || value < 0) $(this).val(0);
                    if (value > 100) $(this).val(100);
                });

                $('#price').on('input', function() {
                    let value = parseFloat($(this).val());
                    if (!isNaN(value) && value < 0) $(this).val(0);
                });

                $('#special_price').on('input', function() {
                    let value = parseFloat($(this).val());
                    if (!isNaN(value) && value < 0) $(this).val(0);
                });

                // Date validation
                $('#special_price_start, #special_price_end').on('change', function() {
                    let startDate = $('#special_price_start').val();
                    let endDate = $('#special_price_end').val();
                    
                    if (startDate && endDate && endDate < startDate) {
                        $('#special_price_end').addClass('is-invalid');
                        showNotification('End date must be after or equal to start date.', 'warning');
                    } else {
                        $('#special_price_end').removeClass('is-invalid');
                    }
                });

                // Category/Tag validation on change
                $('#category_id').on('change', function() {
                    if ($(this).val() && $(this).val().length > 0) {
                        $(this).removeClass('is-invalid');
                    }
                });

                $('select[name="tag[]"]').on('change', function() {
                    if ($(this).val() && $(this).val().length > 0) {
                        $(this).removeClass('is-invalid');
                    }
                });

                // Form submission with enhanced validation and error handling
                $('#product-form').on('submit', function(e) {
                    e.preventDefault();
                    
                    if (validateForm()) {
                        // Create FormData and append selected files
                        let formData = new FormData(this);
                        
                        // Append selected images
                        selectedImages.forEach((file, index) => {
                            if (file instanceof File) {
                                formData.append(`images[${index}]`, file);
                            }
                        });
                        
                        // Append selected videos
                        selectedVideos.forEach((file, index) => {
                            if (file instanceof File) {
                                formData.append(`videos[${index}]`, file);
                            }
                        });
                        
                        // Disable submit button
                        $('#submit-btn').prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i> Submitting...');
                        
                        // Submit via AJAX to preserve files
                        $.ajax({
                            url: this.action,
                            type: this.method,
                            data: formData,
                            processData: false,
                            contentType: false,
                            success: function(response) {
                                window.location.href = "{{ route('products.index') }}";
                            },
                            error: function(xhr) {
                                $('#submit-btn').prop('disabled', false).html('@lang('partials.submit')');
                                
                                if (xhr.status === 422) {
                                    // Validation errors
                                    let errors = xhr.responseJSON.errors;
                                    let errorMessages = [];
                                    
                                    for (let field in errors) {
                                        errorMessages.push(errors[field][0]);
                                    }
                                    
                                    showNotification(errorMessages.join('<br>'), 'error');
                                } else if (xhr.status === 403) {
                                    showNotification('You do not have permission to create products. Please contact your administrator.', 'error');
                                } else {
                                    showNotification('An error occurred. Please try again.', 'error');
                                    console.error('Form submission error:', xhr);
                                }
                            }
                        });
                    } else {
                        // Scroll to top to show validation errors
                        $('html, body').animate({
                            scrollTop: 0
                        }, 500);
                    }
                    
                    return false;
                });

                // Initial validation for create form
                @if(!isset($product) || !isset($product['id']))
                    validateImages();
                @endif
                
                // Initial voltage validation
                validateInputVoltage();
                validateOutputVoltage();
            });
        </script>
    @endpush
@endsection

<script>
// Detached-form media deletion (avoids nested <form> inside #product-form)
function deleteMedia(url) {
    const f = document.createElement('form');
    f.method = 'POST';
    f.action = url;
    f.style.display = 'none';
    const token = document.querySelector('meta[name="csrf-token"]');
    const csrf = document.createElement('input');
    csrf.type = 'hidden'; csrf.name = '_token';
    csrf.value = token ? token.getAttribute('content') : '';
    f.appendChild(csrf);
    const method = document.createElement('input');
    method.type = 'hidden'; method.name = '_method'; method.value = 'DELETE';
    f.appendChild(method);
    document.body.appendChild(f);
    f.submit();
}
</script>