@extends('layouts.panel')

@section('title', app(\App\Services\TitleService::class)->generate())
@section('meta_description', 'ثبت محصول جدید و اطلاعات تامین‌کنندگان در منیجینو ابزار برای مدیریت خرید و فروش مواد شیمیایی')

@section('content')
<div class="modal-xl" style="width: 100%; max-width: none; margin: 0; padding: 0;">
    <div class="modal-header">
        <h2>افزودن محصول جدید</h2>
        <a href="{{ route(($routePrefix ?? 'admin') . '.products.index') }}" class="btn btn-secondary" style="font-size: 12px;">بازگشت</a>
    </div>
    
    <form id="productCreateForm" method="POST" action="{{ route(($routePrefix ?? 'admin') . '.products.store') }}" novalidate>
        @csrf
        <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') }}" 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') }}" />
                        @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;" data-suggest="brand" />
                                </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;" data-suggest="country" />
                                </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') }}" />
                        @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') }}" />
                    </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') }}" />
                        @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') }}">
                    </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') }}">
                    </div>
                    <div class="form-group">
                        <label for="productDescription">توضیحات</label>
                        <textarea id="productDescription" name="description" rows="4">{{ old('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">
                <!-- 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">فایل انالیز را اینجا بکشید یا کلیک کنید</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 ?? '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;" data-suggest="brand" />
            </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;" data-suggest="country" />
            </div>
            <button type="button" onclick="removeBrandCountryRow(this)" style="padding: 8px 12px; background: #dc2626; color: white; border: none; border-radius: 6px; cursor: pointer; font-size: 12px; white-space: nowrap;">حذف</button>
        `;
        brandCountryContainer.appendChild(row);
        updateBrandCountryData();
    }

    function removeBrandCountryRow(button) {
        const row = button.closest('.brand-country-row');
        row.remove();
        updateBrandCountryData();
    }

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

    // Add event listeners to existing inputs
    brandCountryContainer.addEventListener('input', function(e) {
        if (e.target.name === 'brands[]' || e.target.name === 'countries[]') {
            updateBrandCountryData();
        }
    });

        // Live suggest for brand/country
        function attachSuggest(input) {
            if (!input) return;
            if (input.dataset.suggestAttached === '1') return;
            input.dataset.suggestAttached = '1';

            const type = input.dataset.suggest; // brand | country
            const box = document.createElement('div');
            box.className = 'suggest-box';
            box.style.cssText = 'position:absolute; z-index:50; background:#0b1220; border:1px solid var(--border); border-radius:8px; margin-top:4px; max-height:220px; overflow:auto; display:none; min-width: 240px;';
            input.parentElement.style.position = 'relative';
            input.parentElement.appendChild(box);

            let timer = null;
            input.addEventListener('input', () => {
                clearTimeout(timer);
                const q = input.value.trim();
                if (q.length < 1) { box.style.display = 'none'; box.innerHTML=''; return; }
                timer = setTimeout(async () => {
                    try {
                        const res = await fetch(`/api/products/suggest?type=${encodeURIComponent(type)}&q=${encodeURIComponent(q)}`, { headers: { 'X-Requested-With': 'XMLHttpRequest' } });
                        const data = await res.json();
                        const items = Array.isArray(data.items) ? data.items : [];
                        if (items.length === 0) { box.style.display='none'; box.innerHTML=''; return; }
                        box.innerHTML = items.map(v => `<div class="suggest-item" data-value="${v}">${v}</div>`).join('');
                        box.querySelectorAll('.suggest-item').forEach(it => {
                            it.style.cssText = 'padding:8px 12px; cursor:pointer; font-size:12px; color:#e5e7eb;';
                            it.addEventListener('mouseenter', () => it.style.background = '#111827');
                            it.addEventListener('mouseleave', () => it.style.background = 'transparent');
                            it.addEventListener('click', () => { input.value = it.dataset.value; box.style.display='none'; updateBrandCountryData(); });
                        });
                        box.style.display = 'block';
                    } catch (e) {
                        box.style.display = 'none';
                    }
                }, 250);
            });

            document.addEventListener('click', (ev) => {
                if (!box.contains(ev.target) && ev.target !== input) {
                    box.style.display = 'none';
                }
            });
        }

        // attach to initial inputs
        attachSuggest(document.getElementById('brand_0'));
        attachSuggest(document.getElementById('country_0'));

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

    // 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();
            updatePackagingHidden();
        }
    }

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

    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 updatePackagingHidden() {
        packagingHidden.value = JSON.stringify(packagingTypes);
    }

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

    // 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('productCreateForm').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 ?? '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;
        }
    });
});

// Product industries/categories tag helpers and suggestions
document.addEventListener('DOMContentLoaded', function(){
    function setupTagInput(inputEl, containerEl, hiddenEl){
        inputEl.addEventListener('keydown', function(e){
            if(e.key === 'Enter'){
                e.preventDefault();
                const v = inputEl.value.trim();
                if(!v) return;
                addTag(containerEl, v, hiddenEl);
                inputEl.value = '';
            }
        });
    }
    function addTag(containerEl, text, hiddenEl){
        const exists = Array.from(containerEl.querySelectorAll('.tag span')).some(s => s.textContent === text);
        if(exists) return;
        const tag = document.createElement('div');
        tag.className = 'tag';
        tag.innerHTML = `<span>${text}</span><button type="button" data-action="remove-tag">&times;</button>`;
        containerEl.appendChild(tag);
        updateHidden(containerEl, hiddenEl);
    }
    function updateHidden(containerEl, hiddenEl){
        const values = [...containerEl.querySelectorAll('.tag span')].map(s => s.textContent);
        hiddenEl.value = JSON.stringify(values);
    }
    function wireSuggest(inputEl, listEl, endpoint, onPick){
        let t;
        function render(items){
            if(!items || items.length === 0){ listEl.classList.add('hidden'); listEl.innerHTML=''; return; }
            listEl.innerHTML = items.map(v => `<div class="px-3 py-2 hover:bg-white/10 cursor-pointer" style="font-size:12px;">${typeof v === 'string' ? v : (v.label || '')}</div>`).join('');
            listEl.classList.remove('hidden');
        }
        inputEl.addEventListener('input', () => {
            const q = inputEl.value.trim();
            if(t) clearTimeout(t);
            if(q.length < 1){ listEl.classList.add('hidden'); listEl.innerHTML=''; return; }
            t = setTimeout(() => {
                fetch(`${endpoint}?q=${encodeURIComponent(q)}`, { headers: { 'Accept': 'application/json' }})
                    .then(r => r.json())
                    .then(data => render(Array.isArray(data) ? data : (data.data || data)))
                    .catch(() => { listEl.classList.add('hidden'); });
            }, 250);
        });
        listEl.addEventListener('click', (e) => {
            const item = e.target.closest('div');
            if(!item) return;
            const val = item.textContent.trim();
            onPick(val);
            listEl.classList.add('hidden');
            listEl.innerHTML = '';
        });
        document.addEventListener('click', (e) => { if(!listEl.contains(e.target) && e.target !== inputEl) listEl.classList.add('hidden'); });
    }

    const indInput = document.getElementById('productIndustryInput');
    const indList = document.getElementById('productIndustrySuggest');
    const indContainer = document.getElementById('productIndustryTagsContainer');
    const indHidden = document.getElementById('productIndustriesHidden');
    const catInput = document.getElementById('productCategoryInput');
    const catList = document.getElementById('productCategorySuggest');
    const catContainer = document.getElementById('productCategoryTagsContainer');
    const catHidden = document.getElementById('productCategoriesHidden');

    if(indInput && indContainer && indHidden){
        setupTagInput(indInput, indContainer, indHidden);
        wireSuggest(indInput, indList, '{{ route('admin.suppliers.suggest.industries') }}', (val) => addTag(indContainer, val, indHidden));
        if(indHidden.value){
            try { JSON.parse(indHidden.value).forEach(v => addTag(indContainer, v, indHidden)); } catch {}
        }
    }
    if(catInput && catContainer && catHidden){
        setupTagInput(catInput, catContainer, catHidden);
        wireSuggest(catInput, catList, '{{ route('admin.suppliers.suggest.categories') }}', (val) => addTag(catContainer, val, catHidden));
        if(catHidden.value){
            try { JSON.parse(catHidden.value).forEach(v => addTag(catContainer, v, catHidden)); } catch {}
        }
    }

    document.addEventListener('click', function(e){
        if(e.target && e.target.dataset && e.target.dataset.action === 'remove-tag'){
            const tag = e.target.closest('.tag');
            const container = tag.parentElement;
            const hidden = container.nextElementSibling;
            tag.remove();
            if(hidden && hidden.type === 'hidden'){
                const values = [...container.querySelectorAll('.tag span')].map(s => s.textContent);
                hidden.value = JSON.stringify(values);
            }
        }
    });
});

// Success modal function
function showSuccessModal(message) {
    const modal = document.createElement('div');
    modal.className = 'fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50';
    modal.innerHTML = `
        <div class="relative top-20 mx-auto p-8 w-11/12 md:w-1/2 lg:w-1/3 shadow-2xl rounded-2xl glass animate-fadeIn">
            <div class="text-center">
                <div class="mx-auto flex items-center justify-center h-16 w-16 rounded-full bg-green-500/20 mb-4">
                    <svg class="h-10 w-10 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>
                </div>
                <h3 class="text-lg font-medium text-slate-100 mb-2">عملیات موفق!</h3>
                <p class="text-slate-300 mb-6" style="font-size: 13px;">${message}</p>
                <button onclick="this.closest('.fixed').remove()" class="px-6 py-2 bg-green-600 text-white font-medium rounded-xl shadow-lg hover:bg-green-700 transition duration-300 ease-in-out">
                    بستن
                </button>
            </div>
        </div>
    `;
    document.body.appendChild(modal);
}

// Error modal function
function showErrorModal(message) {
    const modal = document.createElement('div');
    modal.className = 'fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50';
    modal.innerHTML = `
        <div class="relative top-20 mx-auto p-8 w-11/12 md:w-1/2 lg:w-1/3 shadow-2xl rounded-2xl glass animate-fadeIn">
            <div class="text-center">
                <div class="mx-auto flex items-center justify-center h-16 w-16 rounded-full bg-red-500/20 mb-4">
                    <svg class="h-10 w-10 text-red-400" 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>
                </div>
                <h3 class="text-lg font-medium text-slate-100 mb-2">خطا!</h3>
                <p class="text-slate-300 mb-6" style="font-size: 13px; white-space: pre-line;">${message}</p>
                <button onclick="this.closest('.fixed').remove()" class="px-6 py-2 bg-red-600 text-white font-medium rounded-xl shadow-lg hover:bg-red-700 transition duration-300 ease-in-out">
                    بستن
                </button>
            </div>
        </div>
    `;
    document.body.appendChild(modal);
}
</script>
@endpush
@endsection