@extends('layouts.panel')

@section('title', 'ویرایش محصول')
@section('meta_description', 'ویرایش مشخصات محصول و اطلاعات فنی در منیجینو ابزار برای مدیریت خرید و فروش مواد شیمیایی')

@section('content')
<div class="modal-xl" style="width: 100%; max-width: none; margin: 0; padding: 0;">
    <div class="modal-header">
        <h2>ویرایش محصول: {{ $product->name }}</h2>
        <a href="{{ route(($routePrefix ? $routePrefix . '.products' : 'admin.products') . '.index') }}" class="btn btn-secondary" style="font-size: 12px;">بازگشت</a>
    </div>
    
    <form id="productEditForm" method="POST" action="{{ route(($routePrefix ? $routePrefix . '.products' : 'admin.products') . '.update', $product) }}" novalidate>
        @csrf
        @method('PUT')
        <div class="modal-body">
            <div class="form-row">
                <!-- Right Column -->
                <div class="flex-col">
                    <div class="form-group">
                        <label for="productName">نام محصول</label>
                        <input type="text" id="productName" name="name" value="{{ old('name', $product->name) }}" required />
                        @error('name')
                            <span class="error-message">{{ $message }}</span>
                        @enderror
                    </div>
                    <div class="form-group">
                        <label for="otherNames">نام‌های دیگر محصول</label>
                        <input type="text" id="otherNamesInput" placeholder="نام دیگری را وارد کنید و Enter بزنید..." style="appearance: none; border: 1px solid var(--border); background: #0b1220; color: var(--text); border-radius: 10px; padding: 10px 12px; outline: none; transition: border-color .2s,box-shadow .2s; width: 100%;" />
                        <div id="otherNamesContainer" class="flex flex-wrap gap-2 mb-2 min-h-[40px] p-2" style="border: 1px solid var(--border); background: #0b1220; border-radius: 10px;">
                            <!-- Tags will be added here -->
                        </div>
                        <input type="hidden" id="otherNamesHidden" name="other_names" value="{{ old('other_names', json_encode(is_string($product->other_names) ? json_decode($product->other_names, true) : ($product->other_names ?? []))) }}" />
                        @error('other_names')
                            <span class="error-message">{{ $message }}</span>
                        @enderror
                    </div>
                    <div class="form-group">
                        <label>برند و کشور تولید کننده</label>
                        <div id="brandCountryContainer">
                            <div class="brand-country-row" style="display: flex; gap: 12px; align-items: end; margin-bottom: 12px;">
                                <div style="flex: 1;">
                                    <label for="brand_0" style="font-size: 12px; color: #9ca3af; margin-bottom: 4px; display: block;">برند</label>
                                    <input type="text" id="brand_0" name="brands[]" placeholder="نام برند" style="width: 100%; padding: 8px 12px; border: 1px solid var(--border); border-radius: 6px; background: #0b1220; color: #e5e7eb;" />
                                </div>
                                <div style="flex: 1;">
                                    <label for="country_0" style="font-size: 12px; color: #9ca3af; margin-bottom: 4px; display: block;">کشور</label>
                                    <input type="text" id="country_0" name="countries[]" placeholder="کشور تولید کننده" style="width: 100%; padding: 8px 12px; border: 1px solid var(--border); border-radius: 6px; background: #0b1220; color: #e5e7eb;" />
                                </div>
                                <button type="button" id="addBrandCountryBtn" style="padding: 8px 12px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border: none; border-radius: 6px; cursor: pointer; font-size: 12px; white-space: nowrap;">+ افزودن</button>
                            </div>
                        </div>
                        <input type="hidden" id="brandCountryData" name="brand_country_data" value="{{ old('brand_country_data', json_encode(array_map(function($brand, $country) { return ['brand' => $brand ?? '', 'country' => $country ?? '']; }, is_string($product->brands) ? json_decode($product->brands, true) : ($product->brands ?? []), is_string($product->countries) ? json_decode($product->countries, true) : ($product->countries ?? [])))) }}" />
                        @error('brands')
                            <span class="error-message">{{ $message }}</span>
                        @enderror
                        @error('countries')
                            <span class="error-message">{{ $message }}</span>
                        @enderror
                    </div>
                    <div class="form-group">
                        <label for="productCasNo">شماره CAS (اختیاری)</label>
                        <input type="text" id="productCasNo" name="cas_no" value="{{ old('cas_no', $product->cas_no) }}" />
                    </div>
                </div>
                
                <!-- Left Column -->
                <div class="flex-col">
                    <div class="form-group">
                        <label for="packagingInput">انواع بسته‌بندی</label>
                        <input type="text" id="packagingInput" placeholder="نوع بسته‌بندی را وارد کنید و Enter بزنید..." style="appearance: none; border: 1px solid var(--border); background: #0b1220; color: var(--text); border-radius: 10px; padding: 10px 12px; outline: none; transition: border-color .2s,box-shadow .2s; width: 100%;" />
                        <div id="packagingContainer" class="flex flex-wrap gap-2 mb-2 min-h-[40px] p-2" style="border: 1px solid var(--border); background: #0b1220; border-radius: 10px;">
                            <!-- Tags will be added here -->
                        </div>
                        <input type="hidden" id="packagingHidden" name="packaging_types" value="{{ old('packaging_types', json_encode(is_string($product->packaging_types) ? json_decode($product->packaging_types, true) : ($product->packaging_types ?? []))) }}" />
                        @error('packaging_types')
                            <span class="error-message">{{ $message }}</span>
                        @enderror
                    </div>
                    <div class="form-group">
                        <label for="productIndustryInput">صنعت</label>
                        <div class="flex gap-2 relative">
                            <input type="text" id="productIndustryInput" placeholder="یک صنعت تایپ و Enter کنید" class="flex-grow" autocomplete="off">
                            <div id="productIndustrySuggest" class="absolute z-50 top-full mt-1 w-full rounded-md bg-[#0b1220] border border-[--border] hidden" style="width: 100px; height: auto; text-align: center; border: 1px solid green; margin-right: 70px;"></div>
                        </div>
                        <div id="productIndustryTagsContainer" class="flex flex-wrap gap-2 mt-2 p-2 rounded-md min-h-[40px] bg-[#0b1220] border border-[--border]"></div>
                        <input type="hidden" name="industries" id="productIndustriesHidden" value="{{ old('industries', json_encode(is_string($product->industries) ? json_decode($product->industries, true) : ($product->industries ?? []))) }}">
                    </div>
                    <div class="form-group">
                        <label for="productCategoryInput">دسته‌بندی‌های تخصصی</label>
                        <div class="flex gap-2 relative">
                            <input type="text" id="productCategoryInput" placeholder="یک دسته بندی تایپ و Enter کنید" class="flex-grow" autocomplete="off">
                            <div id="productCategorySuggest" class="absolute z-50 top-full mt-1 w-full rounded-md bg-[#0b1220] border border-[--border] hidden" style="width: 100px; height: auto; text-align: center; border: 1px solid green; margin-right: 70px;"></div>
                        </div>
                        <div id="productCategoryTagsContainer" class="flex flex-wrap gap-2 mt-2 p-2 rounded-md min-h-[40px] bg-[#0b1220] border border-[--border]"></div>
                        <input type="hidden" name="categories" id="productCategoriesHidden" value="{{ old('categories', json_encode(is_string($product->categories) ? json_decode($product->categories, true) : ($product->categories ?? []))) }}">
                    </div>
                    <div class="form-group">
                        <label for="productDescription">توضیحات</label>
                        <textarea id="productDescription" name="description" rows="4">{{ old('description', $product->description) }}</textarea>
                        @error('description')
                            <span class="error-message">{{ $message }}</span>
                        @enderror
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Analysis Sheet Upload Section -->
        <div class="glass rounded-xl p-6 mb-6">
            <h3 class="text-lg font-semibold text-slate-200 mb-4 flex items-center gap-2">
                <svg class="w-5 h-5 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                </svg>
                فایل انالیز محصول
            </h3>
            <div class="space-y-4">
                <!-- Current File Display -->
                @if($product->analysis_sheet)
                <div class="bg-slate-800/50 rounded-lg p-4 border border-slate-600">
                    <div class="flex items-center justify-between">
                        <div class="flex items-center gap-3">
                            <div class="w-10 h-10 bg-green-500/20 rounded-lg flex items-center justify-center">
                                <svg class="w-5 h-5 text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                                </svg>
                            </div>
                            <div>
                                <p class="text-slate-200 font-medium">{{ basename($product->analysis_sheet) }}</p>
                                <p class="text-slate-400 text-sm">فایل موجود</p>
                            </div>
                        </div>
                        <a href="{{ Storage::url($product->analysis_sheet) }}" target="_blank" class="text-blue-400 hover:text-blue-300 p-1">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
                            </svg>
                        </a>
                    </div>
                </div>
                @endif
                
                <!-- Upload Area -->
                <div id="analysisUploadArea" class="border-2 border-dashed border-slate-600 rounded-xl p-8 text-center hover:border-blue-500 transition-colors cursor-pointer bg-slate-800/30 hover:bg-slate-800/50">
                    <div id="uploadIcon" class="mx-auto w-16 h-16 mb-4 text-slate-400">
                        <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" class="w-full h-full">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"></path>
                        </svg>
                    </div>
                    <div id="uploadText" class="text-slate-300 mb-2">
                        <p class="text-lg font-medium">{{ $product->analysis_sheet ? 'فایل جدید را اینجا بکشید یا کلیک کنید' : 'فایل انالیز را اینجا بکشید یا کلیک کنید' }}</p>
                        <p class="text-sm text-slate-400">فرمت‌های مجاز: PDF, DOC, DOCX (بدون محدودیت حجم)</p>
                    </div>
                    <input type="file" id="analysisFileInput" name="analysis_sheet" accept=".pdf,.doc,.docx" class="hidden">
                </div>
                
                <!-- File Preview -->
                <div id="filePreview" class="hidden">
                    <div class="bg-slate-800/50 rounded-lg p-4 border border-slate-600">
                        <div class="flex items-center justify-between">
                            <div class="flex items-center gap-3">
                                <div class="w-10 h-10 bg-red-500/20 rounded-lg flex items-center justify-center">
                                    <svg class="w-5 h-5 text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                                    </svg>
                                </div>
                                <div>
                                    <p id="fileName" class="text-slate-200 font-medium"></p>
                                    <p id="fileSize" class="text-slate-400 text-sm"></p>
                                </div>
                            </div>
                            <button type="button" id="removeFile" class="text-red-400 hover:text-red-300 p-1">
                                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                                </svg>
                            </button>
                        </div>
                        
                        <!-- Progress Bar -->
                        <div id="progressContainer" class="mt-3 hidden">
                            <div class="flex justify-between text-sm text-slate-400 mb-1">
                                <span>در حال آپلود...</span>
                                <span id="progressPercent">0%</span>
                            </div>
                            <div class="w-full bg-slate-700 rounded-full h-2">
                                <div id="progressBar" class="bg-gradient-to-r from-blue-500 to-purple-500 h-2 rounded-full transition-all duration-300" style="width: 0%"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="modal-footer">
            <button type="button" class="btn btn-secondary" onclick="window.location.href='{{ route(($routePrefix ? $routePrefix . '.products' : 'admin.products') . '.index') }}'">انصراف</button>
            <button type="submit" class="btn btn-primary">ذخیره تغییرات</button>
        </div>
    </form>
</div>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Other names tags functionality
    const otherNamesContainer = document.getElementById('otherNamesContainer');
    const otherNamesInput = document.getElementById('otherNamesInput');
    const otherNamesHidden = document.getElementById('otherNamesHidden');
    let otherNames = [];

    // Load existing other names from old input
    if (otherNamesHidden.value) {
        try {
            otherNames = JSON.parse(otherNamesHidden.value);
            renderTags();
        } catch (e) {
            console.error('Error parsing other names:', e);
        }
    }

    otherNamesInput.addEventListener('keypress', function(e) {
        if (e.key === 'Enter') {
            e.preventDefault();
            addTag();
        }
    });

    otherNamesInput.addEventListener('blur', function() {
        if (this.value.trim()) {
            addTag();
        }
    });

    function addTag() {
        const value = otherNamesInput.value.trim();
        if (value && !otherNames.includes(value)) {
            otherNames.push(value);
            otherNamesInput.value = '';
            renderTags();
            updateHiddenInput();
        }
    }

    function removeTag(index) {
        otherNames.splice(index, 1);
        renderTags();
        updateHiddenInput();
    }

    function renderTags() {
        otherNamesContainer.innerHTML = '';
        otherNames.forEach((name, index) => {
            const tag = document.createElement('span');
            tag.style.cssText = 'display: inline-flex; align-items: center; padding: 6px 12px; border-radius: 20px; font-size: 13px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; margin: 2px; box-shadow: 0 2px 4px rgba(0,0,0,0.2);';
            tag.innerHTML = `
                ${name}
                <button type="button" onclick="removeTag(${index})" style="margin-left: 8px; background: rgba(255,255,255,0.2); border: none; border-radius: 50%; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.2s;" onmouseover="this.style.background='rgba(255,255,255,0.3)'" onmouseout="this.style.background='rgba(255,255,255,0.2)'">
                    <svg width="10" height="10" fill="none" stroke="currentColor" viewBox="0 0 24 24" style="color: white;">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                    </svg>
                </button>
            `;
            otherNamesContainer.appendChild(tag);
        });
    }

    function updateHiddenInput() {
        otherNamesHidden.value = JSON.stringify(otherNames);
    }

    // Make removeTag function global
    window.removeTag = removeTag;

    // Brand and Country management
    let brandCountryIndex = 0;
    const brandCountryContainer = document.getElementById('brandCountryContainer');
    const addBrandCountryBtn = document.getElementById('addBrandCountryBtn');
    const brandCountryData = document.getElementById('brandCountryData');

    // Load existing brand-country data from old input
    if (brandCountryData.value) {
        try {
            const data = JSON.parse(brandCountryData.value);
            data.forEach((item, index) => {
                if (index === 0) {
                    // Update first row
                    document.getElementById('brand_0').value = item.brand || '';
                    document.getElementById('country_0').value = item.country || '';
                } else {
                    // Add new rows
                    addBrandCountryRow(item.brand || '', item.country || '');
                }
            });
        } catch (e) {
            console.error('Error parsing brand-country data:', e);
        }
    }

    addBrandCountryBtn.addEventListener('click', function() {
        addBrandCountryRow();
    });

    function addBrandCountryRow(brand = '', country = '') {
        brandCountryIndex++;
        const row = document.createElement('div');
        row.className = 'brand-country-row';
        row.style.cssText = 'display: flex; gap: 12px; align-items: end; margin-bottom: 12px;';
        row.innerHTML = `
            <div style="flex: 1;">
                <label for="brand_${brandCountryIndex}" style="font-size: 12px; color: #9ca3af; margin-bottom: 4px; display: block;">برند</label>
                <input type="text" id="brand_${brandCountryIndex}" name="brands[]" placeholder="نام برند" value="${brand}" style="width: 100%; padding: 8px 12px; border: 1px solid var(--border); border-radius: 6px; background: #0b1220; color: #e5e7eb;" />
            </div>
            <div style="flex: 1;">
                <label for="country_${brandCountryIndex}" style="font-size: 12px; color: #9ca3af; margin-bottom: 4px; display: block;">کشور</label>
                <input type="text" id="country_${brandCountryIndex}" name="countries[]" placeholder="کشور تولید کننده" value="${country}" style="width: 100%; padding: 8px 12px; border: 1px solid var(--border); border-radius: 6px; background: #0b1220; color: #e5e7eb;" />
            </div>
            <button type="button" onclick="removeBrandCountryRow(this)" style="padding: 8px 12px; background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); color: white; border: none; border-radius: 6px; cursor: pointer; font-size: 12px; white-space: nowrap;">حذف</button>
        `;
        brandCountryContainer.appendChild(row);
        updateBrandCountryData();
    }

    function removeBrandCountryRow(button) {
        button.parentElement.remove();
        updateBrandCountryData();
    }

    function updateBrandCountryData() {
        const rows = brandCountryContainer.querySelectorAll('.brand-country-row');
        const data = [];
        rows.forEach(row => {
            const brand = row.querySelector('input[name="brands[]"]').value.trim();
            const country = row.querySelector('input[name="countries[]"]').value.trim();
            if (brand || country) {
                data.push({ brand, country });
            }
        });
        brandCountryData.value = JSON.stringify(data);
    }

    // Make removeBrandCountryRow function global
    window.removeBrandCountryRow = removeBrandCountryRow;

    // Add event listeners to existing brand/country inputs
    brandCountryContainer.addEventListener('input', updateBrandCountryData);

    // Packaging types management
    const packagingContainer = document.getElementById('packagingContainer');
    const packagingInput = document.getElementById('packagingInput');
    const packagingHidden = document.getElementById('packagingHidden');
    let packagingTypes = [];

    // Load existing packaging types from old input
    if (packagingHidden.value) {
        try {
            packagingTypes = JSON.parse(packagingHidden.value);
            renderPackagingTags();
        } catch (e) {
            console.error('Error parsing packaging types:', e);
        }
    }

    packagingInput.addEventListener('keypress', function(e) {
        if (e.key === 'Enter') {
            e.preventDefault();
            addPackagingTag();
        }
    });

    packagingInput.addEventListener('blur', function() {
        if (this.value.trim()) {
            addPackagingTag();
        }
    });

    function addPackagingTag() {
        const value = packagingInput.value.trim();
        if (value && !packagingTypes.includes(value)) {
            packagingTypes.push(value);
            packagingInput.value = '';
            renderPackagingTags();
            updatePackagingHiddenInput();
        }
    }

    function removePackagingTag(index) {
        packagingTypes.splice(index, 1);
        renderPackagingTags();
        updatePackagingHiddenInput();
    }

    function renderPackagingTags() {
        packagingContainer.innerHTML = '';
        packagingTypes.forEach((type, index) => {
            const tag = document.createElement('span');
            tag.style.cssText = 'display: inline-flex; align-items: center; padding: 6px 12px; border-radius: 20px; font-size: 13px; background: linear-gradient(135deg, #10b981 0%, #059669 100%); color: white; margin: 2px; box-shadow: 0 2px 4px rgba(0,0,0,0.2);';
            tag.innerHTML = `
                ${type}
                <button type="button" onclick="removePackagingTag(${index})" style="margin-left: 8px; background: rgba(255,255,255,0.2); border: none; border-radius: 50%; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.2s;" onmouseover="this.style.background='rgba(255,255,255,0.3)'" onmouseout="this.style.background='rgba(255,255,255,0.2)'">
                    <svg width="10" height="10" fill="none" stroke="currentColor" viewBox="0 0 24 24" style="color: white;">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                    </svg>
                </button>
            `;
            packagingContainer.appendChild(tag);
        });
    }

    function updatePackagingHiddenInput() {
        packagingHidden.value = JSON.stringify(packagingTypes);
    }

    // Make removePackagingTag function global
    window.removePackagingTag = removePackagingTag;

    // Industry management
    const industryInput = document.getElementById('productIndustryInput');
    const industryContainer = document.getElementById('productIndustryTagsContainer');
    const industryHidden = document.getElementById('productIndustriesHidden');
    const industrySuggest = document.getElementById('productIndustrySuggest');
    let industries = [];

    // Load existing industries from old input
    if (industryHidden.value) {
        try {
            industries = JSON.parse(industryHidden.value);
            renderIndustryTags();
        } catch (e) {
            console.error('Error parsing industries:', e);
        }
    }

    industryInput.addEventListener('keypress', function(e) {
        if (e.key === 'Enter') {
            e.preventDefault();
            addIndustryTag();
        }
    });

    industryInput.addEventListener('blur', function() {
        if (this.value.trim()) {
            addIndustryTag();
        }
    });

    function addIndustryTag() {
        const value = industryInput.value.trim();
        if (value && !industries.includes(value)) {
            industries.push(value);
            industryInput.value = '';
            renderIndustryTags();
            updateIndustryHiddenInput();
        }
    }

    function removeIndustryTag(index) {
        industries.splice(index, 1);
        renderIndustryTags();
        updateIndustryHiddenInput();
    }

    function renderIndustryTags() {
        industryContainer.innerHTML = '';
        industries.forEach((industry, index) => {
            const tag = document.createElement('span');
            tag.style.cssText = 'display: inline-flex; align-items: center; padding: 6px 12px; border-radius: 20px; font-size: 13px; background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); color: white; margin: 2px; box-shadow: 0 2px 4px rgba(0,0,0,0.2);';
            tag.innerHTML = `
                ${industry}
                <button type="button" onclick="removeIndustryTag(${index})" style="margin-left: 8px; background: rgba(255,255,255,0.2); border: none; border-radius: 50%; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.2s;" onmouseover="this.style.background='rgba(255,255,255,0.3)'" onmouseout="this.style.background='rgba(255,255,255,0.2)'">
                    <svg width="10" height="10" fill="none" stroke="currentColor" viewBox="0 0 24 24" style="color: white;">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                    </svg>
                </button>
            `;
            industryContainer.appendChild(tag);
        });
    }

    function updateIndustryHiddenInput() {
        industryHidden.value = JSON.stringify(industries);
    }

    // Make removeIndustryTag function global
    window.removeIndustryTag = removeIndustryTag;

    // Category management
    const categoryInput = document.getElementById('productCategoryInput');
    const categoryContainer = document.getElementById('productCategoryTagsContainer');
    const categoryHidden = document.getElementById('productCategoriesHidden');
    const categorySuggest = document.getElementById('productCategorySuggest');
    let categories = [];

    // Load existing categories from old input
    if (categoryHidden.value) {
        try {
            categories = JSON.parse(categoryHidden.value);
            renderCategoryTags();
        } catch (e) {
            console.error('Error parsing categories:', e);
        }
    }

    categoryInput.addEventListener('keypress', function(e) {
        if (e.key === 'Enter') {
            e.preventDefault();
            addCategoryTag();
        }
    });

    categoryInput.addEventListener('blur', function() {
        if (this.value.trim()) {
            addCategoryTag();
        }
    });

    function addCategoryTag() {
        const value = categoryInput.value.trim();
        if (value && !categories.includes(value)) {
            categories.push(value);
            categoryInput.value = '';
            renderCategoryTags();
            updateCategoryHiddenInput();
        }
    }

    function removeCategoryTag(index) {
        categories.splice(index, 1);
        renderCategoryTags();
        updateCategoryHiddenInput();
    }

    function renderCategoryTags() {
        categoryContainer.innerHTML = '';
        categories.forEach((category, index) => {
            const tag = document.createElement('span');
            tag.style.cssText = 'display: inline-flex; align-items: center; padding: 6px 12px; border-radius: 20px; font-size: 13px; background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%); color: white; margin: 2px; box-shadow: 0 2px 4px rgba(0,0,0,0.2);';
            tag.innerHTML = `
                ${category}
                <button type="button" onclick="removeCategoryTag(${index})" style="margin-left: 8px; background: rgba(255,255,255,0.2); border: none; border-radius: 50%; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.2s;" onmouseover="this.style.background='rgba(255,255,255,0.3)'" onmouseout="this.style.background='rgba(255,255,255,0.2)'">
                    <svg width="10" height="10" fill="none" stroke="currentColor" viewBox="0 0 24 24" style="color: white;">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                    </svg>
                </button>
            `;
            categoryContainer.appendChild(tag);
        });
    }

    function updateCategoryHiddenInput() {
        categoryHidden.value = JSON.stringify(categories);
    }

    // Make removeCategoryTag function global
    window.removeCategoryTag = removeCategoryTag;

    // Analysis Sheet Upload Functionality
    const uploadArea = document.getElementById('analysisUploadArea');
    const fileInput = document.getElementById('analysisFileInput');
    const filePreview = document.getElementById('filePreview');
    const fileName = document.getElementById('fileName');
    const fileSize = document.getElementById('fileSize');
    const removeFile = document.getElementById('removeFile');
    const progressContainer = document.getElementById('progressContainer');
    const progressBar = document.getElementById('progressBar');
    const progressPercent = document.getElementById('progressPercent');

    // Click to upload
    uploadArea.addEventListener('click', () => fileInput.click());

    // Drag and drop
    uploadArea.addEventListener('dragover', (e) => {
        e.preventDefault();
        uploadArea.classList.add('border-blue-500', 'bg-blue-500/10');
    });

    uploadArea.addEventListener('dragleave', (e) => {
        e.preventDefault();
        uploadArea.classList.remove('border-blue-500', 'bg-blue-500/10');
    });

    uploadArea.addEventListener('drop', (e) => {
        e.preventDefault();
        uploadArea.classList.remove('border-blue-500', 'bg-blue-500/10');
        const files = e.dataTransfer.files;
        if (files.length > 0) {
            handleFile(files[0]);
        }
    });

    // File input change
    fileInput.addEventListener('change', (e) => {
        if (e.target.files.length > 0) {
            handleFile(e.target.files[0]);
        }
    });

    // Remove file
    removeFile.addEventListener('click', () => {
        fileInput.value = '';
        filePreview.classList.add('hidden');
        uploadArea.classList.remove('hidden');
    });

    function handleFile(file) {
        // Validate file type
        const allowedTypes = ['application/pdf', 'application/msword', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'];
        if (!allowedTypes.includes(file.type)) {
            alert('فقط فایل‌های PDF, DOC و DOCX مجاز هستند.');
            return;
        }

        // Validate file size (removed limit for large files)
        // if (file.size > 10 * 1024 * 1024) {
        //     alert('حجم فایل نباید بیشتر از 10MB باشد.');
        //     return;
        // }

        // Show file preview
        fileName.textContent = file.name;
        fileSize.textContent = formatFileSize(file.size);
        filePreview.classList.remove('hidden');
        uploadArea.classList.add('hidden');

        // Simulate upload progress
        simulateUpload();
    }

    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];
    }

    function simulateUpload() {
        progressContainer.classList.remove('hidden');
        let progress = 0;
        const interval = setInterval(() => {
            progress += Math.random() * 15;
            if (progress > 100) progress = 100;
            
            progressBar.style.width = progress + '%';
            progressPercent.textContent = Math.round(progress) + '%';
            
            if (progress >= 100) {
                clearInterval(interval);
                setTimeout(() => {
                    progressContainer.classList.add('hidden');
                    // Show success state
                    const successIcon = document.createElement('div');
                    successIcon.className = 'w-10 h-10 bg-green-500/20 rounded-lg flex items-center justify-center';
                    successIcon.innerHTML = '<svg class="w-5 h-5 text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>';
                    filePreview.querySelector('.flex.items-center.gap-3').querySelector('.w-10.h-10').replaceWith(successIcon);
                }, 500);
            }
        }, 100);
    }

    // Form submission with AJAX
    document.getElementById('productEditForm').addEventListener('submit', async function(e) {
        e.preventDefault();
        
        const formData = new FormData(this);
        const submitBtn = this.querySelector('button[type="submit"]');
        const originalText = submitBtn.textContent;
        
        try {
            submitBtn.textContent = 'در حال ذخیره...';
            submitBtn.disabled = true;
            
            const response = await fetch(this.action, {
                method: 'POST',
                body: formData,
                headers: {
                    'X-Requested-With': 'XMLHttpRequest',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                }
            });
            
            const data = await response.json();
            
            if (response.ok) {
                // Success
                showSuccessModal('محصول با موفقیت بروزرسانی شد!');
                setTimeout(() => {
                    window.location.href = '{{ route(($routePrefix ? $routePrefix . '.products' : 'admin.products') . '.index') }}';
                }, 1500);
            } else {
                // Validation errors
                if (data.errors) {
                    let errorMessage = 'خطاهای زیر رخ داده است:\n';
                    Object.values(data.errors).forEach(errors => {
                        errors.forEach(error => {
                            errorMessage += '• ' + error + '\n';
                        });
                    });
                    showErrorModal(errorMessage);
                } else {
                    showErrorModal(data.message || 'خطا در بروزرسانی محصول');
                }
            }
        } catch (error) {
            console.error('Error:', error);
            showErrorModal('خطا در ارتباط با سرور');
        } finally {
            submitBtn.textContent = originalText;
            submitBtn.disabled = false;
        }
    });
    
    // Success modal function
    function showSuccessModal(message) {
        const modal = document.createElement('div');
        modal.style.cssText = `
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.8);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 10000;
        `;
        modal.innerHTML = `
            <div style="
                background: linear-gradient(135deg, #10b981 0%, #059669 100%);
                color: white;
                padding: 2rem;
                border-radius: 12px;
                text-align: center;
                box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3);
                max-width: 400px;
                width: 90%;
            ">
                <div style="font-size: 3rem; margin-bottom: 1rem;">✅</div>
                <h3 style="margin: 0 0 1rem 0; font-size: 1.25rem;">موفق!</h3>
                <p style="margin: 0; font-size: 1rem;">${message}</p>
            </div>
        `;
        document.body.appendChild(modal);
        
        setTimeout(() => {
            document.body.removeChild(modal);
        }, 3000);
    }
    
    // Error modal function
    function showErrorModal(message) {
        const modal = document.createElement('div');
        modal.style.cssText = `
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.8);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 10000;
        `;
        modal.innerHTML = `
            <div style="
                background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
                color: white;
                padding: 2rem;
                border-radius: 12px;
                text-align: center;
                box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3);
                max-width: 500px;
                width: 90%;
            ">
                <div style="font-size: 3rem; margin-bottom: 1rem;">❌</div>
                <h3 style="margin: 0 0 1rem 0; font-size: 1.25rem;">خطا!</h3>
                <p style="margin: 0; font-size: 1rem; white-space: pre-line;">${message}</p>
                <button onclick="this.parentElement.parentElement.remove()" style="
                    margin-top: 1rem;
                    padding: 0.5rem 1rem;
                    background: rgba(255, 255, 255, 0.2);
                    border: none;
                    border-radius: 6px;
                    color: white;
                    cursor: pointer;
                    font-size: 0.875rem;
                ">بستن</button>
            </div>
        `;
        document.body.appendChild(modal);
    }
});
</script>
@endpush
@endsection