@extends('layouts.panel')

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

@section('content')
<div class="w-full max-w-none">
    <div class="modal-header">
        <h2>ویرایش تامین‌کننده</h2>
        <a href="{{ route(($routePrefix ?? 'admin.suppliers') . '.index') }}" class="btn btn-secondary" style="font-size: 12px;">بازگشت</a>
    </div>
    
    <form id="supplierEditForm" method="POST" action="{{ route(($routePrefix ?? 'admin.suppliers') . '.update', $supplier) }}" novalidate>
            @csrf
            @method('PUT')
            
        <div class="modal-body">
            <div class="form-row">
                <!-- Right Column -->
                <div class="flex-col">
                    <div class="form-group">
                        <label for="supplierName">نام تامین‌کننده</label>
                        <input type="text" id="supplierName" name="name" value="{{ old('name', $supplier->name) }}" required />
                        @error('name')
                            <span class="error-message">{{ $message }}</span>
                        @enderror
                    </div>
                    <div class="form-group">
                        <label for="supplierNationalId">شناسه ملی</label>
                        <input type="text" id="supplierNationalId" name="national_id" value="{{ old('national_id', $supplier->national_id) }}" />
                        @error('national_id')
                            <span class="error-message">{{ $message }}</span>
                        @enderror
                    </div>
                    <div class="form-group">
                        <label for="supplierEconomicId">شناسه اقتصادی</label>
                        <input type="text" id="supplierEconomicId" name="economic_id" value="{{ old('economic_id', $supplier->economic_id) }}" />
                        @error('economic_id')
                            <span class="error-message">{{ $message }}</span>
                        @enderror
                    </div>
                    <div class="form-group">
                        <label for="supplierCeo">نام مدیرعامل</label>
                        <input type="text" id="supplierCeo" name="ceo" value="{{ old('ceo', $supplier->ceo) }}" />
                        @error('ceo')
                            <span class="error-message">{{ $message }}</span>
                        @enderror
                    </div>
                    <div class="form-group">
                        <label for="supplierActivityType">نوع فعالیت</label>
                        <select id="supplierActivityType" name="activity_type">
                            <option value="واردکننده" {{ old('activity_type', $supplier->activity_type) == 'واردکننده' ? 'selected' : '' }}>واردکننده</option>
                            <option value="تولید کننده" {{ old('activity_type', $supplier->activity_type) == 'تولید کننده' ? 'selected' : '' }}>تولید کننده</option>
                            <option value="بازرگانی" {{ old('activity_type', $supplier->activity_type) == 'بازرگانی' ? 'selected' : '' }}>بازرگانی</option>
                        </select>
                        @error('activity_type')
                            <span class="error-message">{{ $message }}</span>
                        @enderror
                    </div>
                    <div class="form-group">
                        <label for="industryInput">صنعت</label>
                        <div class="flex gap-2 relative">
                            <input type="text" id="industryInput" placeholder="یک صنعت تایپ و Enter کنید" class="flex-grow" autocomplete="off">
                            <div id="industrySuggest" 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="industryTagsContainer" class="flex flex-wrap gap-2 mt-2 p-2 rounded-md min-h-[40px] bg-[#0b1220] border border-[--border]">
                            @if($supplier->industry)
                                @php $industries = explode(', ', $supplier->industry); @endphp
                                @foreach($industries as $industry)
                                    <div class="tag">
                                        <span>{{ trim($industry) }}</span>
                                        <button type="button" data-action="remove-industry-tag">&times;</button>
                                    </div>
                                @endforeach
                            @endif
                        </div>
                        <input type="hidden" name="industries" id="industriesHidden" value="{{ old('industries', json_encode($supplier->industry ? explode(', ', $supplier->industry) : [])) }}">
                    </div>
                    <div class="form-group">
                        <label for="categoryInput">دسته‌بندی‌های تخصصی</label>
                        <div class="flex gap-2 relative">
                            <input type="text" id="categoryInput" placeholder="یک دسته بندی تایپ و Enter کنید" class="flex-grow" autocomplete="off">
                            <div id="categorySuggest" 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="categoryTagsContainer" class="flex flex-wrap gap-2 mt-2 p-2 rounded-md min-h-[40px] bg-[#0b1220] border border-[--border]">
                            @if($supplier->categories && is_array($supplier->categories))
                                @foreach($supplier->categories as $category)
                                    <div class="tag">
                                        <span>{{ $category }}</span>
                                        <button type="button" data-action="remove-category-tag">&times;</button>
                                    </div>
                                @endforeach
                            @endif
                        </div>
                        <input type="hidden" name="categories" id="categoriesHidden" value="{{ old('categories', json_encode($supplier->categories ?? [])) }}">
                    </div>
                </div>
                <!-- Left Column -->
                <div class="flex-col">
                    <div class="form-group">
                        <div class="flex justify-between items-center">
                            <label>تلفن ثابت</label>
                            <button type="button" data-action="add-phone-field" class="text-xs text-[--accent] hover:underline">+ افزودن تلفن</button>
                    </div>
                        <div id="phoneInputsContainer" class="space-y-2">
                            @php
                                $supplierPhones = \App\Models\SupplierPhone::where('supplier_id', $supplier->id)->get();
                            @endphp
                            @if($supplierPhones && $supplierPhones->count() > 0)
                                @foreach($supplierPhones as $index => $phoneObj)
                                    <div class="dynamic-field-row-single">
                                        <input type="text" name="phones[]" placeholder="021-..." value="{{ old('phones.'.$index, $phoneObj->phone) }}">
                                        <button type="button" class="remove-btn" data-action="remove-field">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path></svg>
                                        </button>
                    </div>
                                @endforeach
                            @else
                                <div class="dynamic-field-row-single">
                                    <input type="text" name="phones[]" placeholder="021-..." value="{{ old('phones.0') }}">
                                    <button type="button" class="remove-btn" data-action="remove-field">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path></svg>
                                        </button>
                    </div>
                                @endif
                    </div>
                </div>
                    <div class="form-group">
                        <label for="supplierPostalCode">کدپستی</label>
                        <input type="text" id="supplierPostalCode" name="postal_code" value="{{ old('postal_code', $supplier->postal_code) }}" />
                        @error('postal_code')
                            <span class="error-message">{{ $message }}</span>
                        @enderror
                    </div>
                    <div class="form-group">
                        <label for="supplierAddress">آدرس</label>
                        <textarea id="supplierAddress" name="address" rows="2">{{ old('address', $supplier->address) }}</textarea>
                        @error('address')
                            <span class="error-message">{{ $message }}</span>
                        @enderror
                    </div>
                    <div class="form-group">
                        <label for="supplierWebsite">وب‌سایت</label>
                        <input type="url" id="supplierWebsite" name="website" value="{{ old('website', $supplier->website) }}" placeholder="https://example.com" />
                        @error('website')
                            <span class="error-message">{{ $message }}</span>
                        @enderror
                    </div>
                    <div class="form-group">
                        <label for="otherNamesInput">نام های دیگر مجموعه</label>
                         <div class="flex gap-2">
                            <input type="text" id="otherNamesInput" placeholder="نام دیگر را تایپ و Enter کنید" class="flex-grow">
                        </div>
                        <div id="otherNamesTagsContainer" class="flex flex-wrap gap-2 mt-2 p-2 rounded-md min-h-[40px] bg-[#0b1220] border border-[--border]">
                            @if($supplier->other_names)
                                @php 
                                    $otherNames = is_array($supplier->other_names) 
                                        ? $supplier->other_names 
                                        : explode(', ', $supplier->other_names);
                                @endphp
                                @foreach($otherNames as $name)
                                    @if(trim($name))
                                        <div class="tag">
                                            <span>{{ trim($name) }}</span>
                                            <button type="button" data-action="remove-other-name-tag">&times;</button>
                                        </div>
                                    @endif
                                @endforeach
                            @endif
                        </div>
                        <input type="hidden" name="other_names" id="otherNamesHidden" value="{{ old('other_names', json_encode(is_array($supplier->other_names ?? []) ? ($supplier->other_names ?? []) : explode(', ', $supplier->other_names ?? ''))) }}">
                    </div>
                    <div class="form-group">
                        <label for="supplierCreator">نام ایجاد کننده</label>
                        @php($currentEditor = trim((auth()->user()->full_name ?? '') ?: (auth()->user()->name ?? '') ?: auth()->user()->email))
                        <select id="supplierCreator" name="creator">
                            <option value="{{ $currentEditor }}" selected>{{ $currentEditor }}</option>
                        </select>
                        @error('creator')
                            <span class="error-message">{{ $message }}</span>
                        @enderror
                    </div>
                    <div class="form-group">
                        <label for="supplierDescription">توضیحات تکمیلی</label>
                        <textarea id="supplierDescription" name="description" rows="2">{{ old('description', $supplier->description) }}</textarea>
                        @error('description')
                            <span class="error-message">{{ $message }}</span>
                        @enderror
                    </div>
                     <div class="form-group">
                        <label for="bulkProducts">درج یکجا محصولات</label>
                        <textarea id="bulkProducts" name="bulk_products" rows="3" placeholder="هر محصول در یک خط جدید...">{{ old('bulk_products', $supplier->bulk_products) }}</textarea>
                        @error('bulk_products')
                            <span class="error-message">{{ $message }}</span>
                        @enderror
                    </div>
                </div>
            </div>
             <!-- Rating Section (numeric inputs) -->
            <div class="border-t border-[--border] pt-4 mt-4">
                <h3 class="font-semibold text-lg mb-2">امتیازدهی</h3>
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-x-8 gap-y-4">
                    <div class="form-group">
                        <label for="rating_quality">کیفیت بار</label>
                        <input type="number" id="rating_quality" name="rating[quality]" min="0" max="5" step="1" value="{{ old('rating.quality', $supplier->rating_quality ?? 0) }}">
                    </div>
                    <div class="form-group">
                        <label for="rating_delivery">تحویل به موقع</label>
                        <input type="number" id="rating_delivery" name="rating[delivery]" min="0" max="5" step="1" value="{{ old('rating.delivery', $supplier->rating_delivery ?? 0) }}">
                    </div>
                    <div class="form-group">
                        <label for="rating_price">قیمت</label>
                        <input type="number" id="rating_price" name="rating[price]" min="0" max="5" step="1" value="{{ old('rating.price', $supplier->rating_price ?? 0) }}">
                    </div>
                    <div class="form-group">
                        <label for="rating_responsiveness">پاسخگویی</label>
                        <input type="number" id="rating_responsiveness" name="rating[responsiveness]" min="0" max="5" step="1" value="{{ old('rating.responsiveness', $supplier->rating_responsiveness ?? 0) }}">
                    </div>
                </div>
            </div>
            
            <!-- Blacklist Section -->
            <div class="border-t border-[--border] pt-4 mt-4">
                <h3 class="font-semibold text-lg mb-2">وضعیت تامین‌کننده</h3>
                <div class="form-group">
                    <label class="flex items-center gap-2">
                        <input type="checkbox" id="is_blacklisted" name="is_blacklisted" value="1" style="width: auto;" {{ old('is_blacklisted', $supplier->is_blacklisted ?? false) ? 'checked' : '' }}>
                        <span>در لیست سیاه قرار دارد</span>
                    </label>
                    @error('is_blacklisted')
                        <span class="error-message">{{ $message }}</span>
                    @enderror
                </div>
            </div>
            
            <!-- Sales Experts Section -->
            <div class="border-t border-[--border] pt-4 mt-4">
                <div class="flex justify-between items-center mb-2">
                    <h3 class="font-semibold text-lg">کارشناسان فروش</h3>
                    <button type="button" data-action="add-expert-field" class="text-sm btn btn-secondary py-1 px-3">+ افزودن</button>
                </div>
                <div id="salesExpertsContainer" class="space-y-2">
                    @if($supplier->salesExperts && $supplier->salesExperts->count() > 0)
                        @foreach($supplier->salesExperts as $index => $expert)
                            <div class="dynamic-field-row">
                                <input type="text" name="sales_expert_name[]" placeholder="نام کارشناس" value="{{ old('sales_expert_name.'.$index, $expert->name ?? '') }}">
                                <input type="text" name="sales_expert_phone[]" placeholder="شماره تماس" value="{{ old('sales_expert_phone.'.$index, $expert->phone ?? '') }}">
                                <button type="button" class="remove-btn" data-action="remove-field">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path></svg>
                                </button>
                            </div>
                        @endforeach
                    @else
                        <div class="dynamic-field-row">
                            <input type="text" name="sales_expert_name[]" placeholder="نام کارشناس" value="{{ old('sales_expert_name.0') }}">
                            <input type="text" name="sales_expert_phone[]" placeholder="شماره تماس" value="{{ old('sales_expert_phone.0') }}">
                            <button type="button" class="remove-btn" data-action="remove-field">
                                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path></svg>
                </button>
                        </div>
                    @endif
                </div>
            </div>
        </div>
        <div class="modal-footer">
            <a href="{{ route(($routePrefix ?? 'admin.suppliers') . '.index') }}" class="btn btn-secondary" style="font-size: 12px;">انصراف</a>
            <button type="submit" class="btn btn-primary">ذخیره تغییرات</button>
            </div>
        </form>
    </div>

@push('scripts')
<script>
// Immediate check for form
console.log('Script loaded, document.readyState:', document.readyState);

function setupAjaxForm() {
    console.log('DOM loaded, setting up AJAX form...');
    
    // AJAX form submission - target the supplier edit form specifically by ID
    const form = document.getElementById('supplierEditForm');
    const submitBtn = form ? form.querySelector('button[type="submit"]') : null;
    
    console.log('Form found:', form);
    console.log('Submit button found:', submitBtn);
    
    if (!form) {
        console.error('Form not found!');
        return;
    }
    
    form.addEventListener('submit', function(e) {
        console.log('Form submit event triggered!');
        e.preventDefault();
        
        // Validation before submission
        if (!validateForm()) {
            return;
        }
        
        // Disable submit button
        submitBtn.disabled = true;
        submitBtn.textContent = 'در حال ذخیره...';
        
        // Get form data
        const formData = new FormData(form);
        
        // Debug: Log form data
        console.log('Form data being sent:');
        for (let [key, value] of formData.entries()) {
            console.log(key + ':', value);
        }
        
        fetch(form.action, {
            method: 'POST',
            body: formData,
            headers: {
                'X-Requested-With': 'XMLHttpRequest',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            }
        })
        .then(response => response.text().then(text => ({ response, text })))
        .then(({ response, text }) => {
            let data = {};
            try { data = JSON.parse(text); } catch (e) {}
            const result = { status: response.status, ok: response.ok, data };
            console.log('Server response:', result);
            if (result.ok) {
                showSuccessModalWithAutoClose('تامین‌کننده با موفقیت به‌روزرسانی شد!', '{{ route(($routePrefix ?? 'admin.suppliers') . '.index') }}');
            } else {
                // استفاده از مودال زیبای خطا
                if (result.data && result.data.errors && window.showAjaxValidationErrors) {
                    window.showAjaxValidationErrors(result.data);
                } else {
                    // Fallback به alert معمولی
                    let errorMessage = 'خطا در به‌روزرسانی تامین‌کننده:\n';
                    if (result.data.errors) {
                        Object.keys(result.data.errors).forEach(field => {
                            errorMessage += `${field}: ${result.data.errors[field].join(', ')}\n`;
                        });
                    } else {
                        errorMessage += result.data.message || 'خطای نامشخص';
                    }
                    alert(errorMessage);
                }
            }
        })
        .catch(error => {
            console.error('AJAX Error:', error);
            alert('خطا در ارتباط با سرور: ' + error.message);
        })
        .finally(() => {
            submitBtn.disabled = false;
            submitBtn.textContent = 'ذخیره تغییرات';
        });
    });
    
    console.log('AJAX form setup completed.');
}

if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', setupAjaxForm);
} else {
    setupAjaxForm();
}

// Tag inputs and dynamic rows
function setupTagInput(inputId, containerId, hiddenInputId, removeAction) {
    const input = document.getElementById(inputId);
    const container = document.getElementById(containerId);
    const hiddenInput = document.getElementById(hiddenInputId);
    
    if (!input || !container || !hiddenInput) return;
    
    // Handle Enter key
    input.addEventListener('keydown', (e) => {
        if (e.key === 'Enter') {
            e.preventDefault();
            const text = input.value.trim();
            if (text && !Array.from(container.querySelectorAll('.tag span')).some(s => s.textContent === text)) {
                addTag(text, container, hiddenInput, removeAction);
                input.value = '';
            }
        }
    });
    
    // Handle remove buttons
    container.addEventListener('click', (e) => {
        if (e.target.dataset.action === removeAction) {
            e.target.closest('.tag').remove();
            updateHiddenInput(container, hiddenInput);
        }
    });
}

function addTag(text, container, hiddenInput, removeAction) {
    const tag = document.createElement('div');
    tag.className = 'tag';
    tag.innerHTML = `<span>${text}</span><button type="button" data-action="${removeAction}">&times;</button>`;
    container.appendChild(tag);
    updateHiddenInput(container, hiddenInput);
}

function updateHiddenInput(container, hiddenInput) {
    const tags = [...container.querySelectorAll('.tag span')].map(span => span.textContent);
    hiddenInput.value = JSON.stringify(tags);
}

// Setup tag inputs
setupTagInput('industryInput', 'industryTagsContainer', 'industriesHidden', 'remove-industry-tag');
setupTagInput('categoryInput', 'categoryTagsContainer', 'categoriesHidden', 'remove-category-tag');

// Live suggestions wiring
function wireSuggest(inputId, listId, endpoint, onSelect) {
    const input = document.getElementById(inputId);
    const list = document.getElementById(listId);
    if (!input || !list) return;
    let t;
    function render(items) {
        if (!items || items.length === 0) { list.classList.add('hidden'); list.innerHTML=''; return; }
        list.innerHTML = items.map(v => `<div class="px-3 py-2 hover:bg-white/10 cursor-pointer" style="font-size:12px;">${v}</div>`).join('');
        list.classList.remove('hidden');
    }
    input.addEventListener('input', () => {
        const q = input.value.trim();
        if (t) clearTimeout(t);
        if (q.length < 1) { list.classList.add('hidden'); list.innerHTML=''; return; }
        t = setTimeout(() => {
            fetch(`${endpoint}?q=${encodeURIComponent(q)}`, { headers: { 'Accept': 'application/json' } })
                .then(r => r.json())
                .then(render)
                .catch(() => { list.classList.add('hidden'); });
        }, 250);
    });
    list.addEventListener('click', (e) => {
        const item = e.target.closest('div');
        if (!item) return;
        const val = item.textContent.trim();
        onSelect(val);
        list.classList.add('hidden');
        list.innerHTML = '';
    });
    document.addEventListener('click', (e) => { if (!list.contains(e.target) && e.target !== input) list.classList.add('hidden'); });
}

// Industries -> add as tag
wireSuggest('industryInput', 'industrySuggest', '{{ route(($routePrefix ?? 'admin.suppliers') . '.suggest.industries') }}', (val) => {
    const container = document.getElementById('industryTagsContainer');
    if (!container) return;
    const exists = Array.from(container.querySelectorAll('.tag span')).some(s => s.textContent === val);
    if (!exists) {
        const tag = document.createElement('div');
        tag.className = 'tag';
        tag.innerHTML = `<span>${val}</span><button type="button" data-action="remove-industry-tag">&times;</button>`;
        container.appendChild(tag);
        const hidden = document.getElementById('industriesHidden');
        if (hidden) {
            const arr = JSON.parse(hidden.value || '[]');
            if (!arr.includes(val)) { arr.push(val); hidden.value = JSON.stringify(arr); }
        }
    }
});

// Categories -> add as tag
wireSuggest('categoryInput', 'categorySuggest', '{{ route(($routePrefix ?? 'admin.suppliers') . '.suggest.categories') }}', (val) => {
    const container = document.getElementById('categoryTagsContainer');
    if (!container) return;
    const exists = Array.from(container.querySelectorAll('.tag span')).some(s => s.textContent === val);
    if (!exists) {
        const tag = document.createElement('div');
        tag.className = 'tag';
        tag.innerHTML = `<span>${val}</span><button type="button" data-action="remove-category-tag">&times;</button>`;
        container.appendChild(tag);
        const hidden = document.getElementById('categoriesHidden');
        if (hidden) {
            const arr = JSON.parse(hidden.value || '[]');
            if (!arr.includes(val)) { arr.push(val); hidden.value = JSON.stringify(arr); }
        }
    }
});

// Event delegation for dynamic elements
document.addEventListener('click', function(e) {
    const action = e.target.dataset.action;
    
    if (action === 'add-phone-field') {
        addPhoneInput();
    } else if (action === 'add-expert-field') {
        addSalesExpertInput();
    } else if (action === 'remove-field') {
        e.target.closest('.dynamic-field-row, .dynamic-field-row-single').remove();
    } else if (action && action.startsWith('remove-') && action.endsWith('-tag')) {
        const tag = e.target.closest('.tag');
        const container = tag.parentElement;
        const hiddenInput = container.nextElementSibling;
        tag.remove();
        if (hiddenInput && hiddenInput.type === 'hidden') {
            updateHiddenInput(container, hiddenInput);
        }
    }
});

function addPhoneInput(phone = '') {
    const container = document.getElementById('phoneInputsContainer');
    const div = document.createElement('div');
    div.className = 'dynamic-field-row-single';
    div.innerHTML = `
        <input type="text" name="phones[]" placeholder="021-..." value="${phone}">
        <button type="button" class="remove-btn" data-action="remove-field">
            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path></svg>
        </button>`;
    container.appendChild(div);
}

function addSalesExpertInput(expert = { name: '', phone: '' }) {
    const container = document.getElementById('salesExpertsContainer');
    const div = document.createElement('div');
    div.className = 'dynamic-field-row';
    div.innerHTML = `
        <input type="text" name="sales_experts[][name]" placeholder="نام کارشناس فروش" value="${expert.name}">
        <input type="text" name="sales_experts[][phone]" placeholder="تلفن کارشناس" value="${expert.phone}">
        <button type="button" class="remove-btn" data-action="remove-field">
            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path></svg>
        </button>`;
    container.appendChild(div);
}

// Validation function
function validateForm() {
    // Validate postal code (10 digits)
    const postalCodeInput = document.getElementById('supplierPostalCode');
    if (postalCodeInput && postalCodeInput.value.trim()) {
        const postalCode = postalCodeInput.value.trim().replace(/\D/g, ''); // Remove non-digits
        if (postalCode.length !== 10) {
            if (typeof window.showCustomWarning === 'function') {
                window.showCustomWarning('خطا در کدپستی', 'کد پستی باید 10 رقم باشه شما درست واردش نکردی');
            } else if (typeof window.showWarning === 'function') {
                window.showWarning('خطا در کدپستی', 'کد پستی باید 10 رقم باشه شما درست واردش نکردی');
            } else {
                alert('کد پستی باید 10 رقم باشه شما درست واردش نکردی');
            }
            postalCodeInput.focus();
            return false;
        }
    }
    
    // Validate phone numbers (5-11 digits)
    const phoneInputs = document.querySelectorAll('input[name="phones[]"]');
    for (let phoneInput of phoneInputs) {
        if (phoneInput.value.trim()) {
            const phone = phoneInput.value.trim().replace(/\D/g, ''); // Remove non-digits
            if (phone.length < 5 || phone.length > 11) {
                if (typeof window.showCustomWarning === 'function') {
                    window.showCustomWarning('خطا در شماره تلفن ثابت', 'شماره تلفن ثابت باید بین ۵ تا ۱۱ رقم باشد');
                } else if (typeof window.showWarning === 'function') {
                    window.showWarning('خطا در شماره تلفن ثابت', 'شماره تلفن ثابت باید بین ۵ تا ۱۱ رقم باشد');
                } else {
                    alert('شماره تلفن ثابت باید بین ۵ تا ۱۱ رقم باشد');
                }
                phoneInput.focus();
                return false;
            }
        }
    }
    
    // Validate sales expert phone numbers (11 digits)
    const expertPhoneInputs = document.querySelectorAll('input[name*="[phone]"]');
    for (let phoneInput of expertPhoneInputs) {
        if (phoneInput.value.trim()) {
            const phone = phoneInput.value.trim().replace(/\D/g, ''); // Remove non-digits
            if (phone.length !== 11) {
                if (typeof window.showCustomWarning === 'function') {
                    window.showCustomWarning('خطا در شماره کارشناس فروش', 'لطفا شماره کارشناس فروش رو صحیح وارد کن باید 11 رقم باشه');
                } else if (typeof window.showWarning === 'function') {
                    window.showWarning('خطا در شماره کارشناس فروش', 'لطفا شماره کارشناس فروش رو صحیح وارد کن باید 11 رقم باشه');
                } else {
                    alert('لطفا شماره کارشناس فروش رو صحیح وارد کن باید 11 رقم باشه');
                }
                phoneInput.focus();
                return false;
            }
        }
    }
    
    return true;
}
</script>
@endpush

@endsection