@extends('layouts.panel')

@section('title', 'افزودن تامین‌کننده جدید - منیجینو ابزار برای مدیریت خرید و فروش مواد شیمیایی')
@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="supplierCreateForm" method="POST" action="{{ route(($routePrefix ?? 'admin.suppliers') . '.store') }}" novalidate>
            @csrf
        <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') }}" 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') }}" />
                        @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') }}" />
                        @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') }}" />
                        @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') == 'واردکننده' ? 'selected' : '' }}>واردکننده</option>
                            <option value="تولید کننده" {{ old('activity_type') == 'تولید کننده' ? 'selected' : '' }}>تولید کننده</option>
                            <option value="بازرگانی" {{ old('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]"></div>
                        <input type="hidden" name="industries" id="industriesHidden" value="{{ old('industries') }}">
                    </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]"></div>
                        <input type="hidden" name="categories" id="categoriesHidden" value="{{ old('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">
                            <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>
                    </div>
                </div>
                    <div class="form-group">
                        <label for="supplierPostalCode">کدپستی</label>
                        <input type="text" id="supplierPostalCode" name="postal_code" value="{{ old('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') }}</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') }}" 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 relative">
                            <input type="text" id="otherNamesInput" placeholder="نام دیگر را تایپ و Enter کنید" class="flex-grow" autocomplete="off">
                            <div id="otherNamesSuggest" 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="otherNamesTagsContainer" 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="other_names" id="otherNamesHidden" value="{{ old('other_names') }}">
                    </div>
                    <div class="form-group">
                        <label for="supplierCreator">نام ایجاد کننده</label>
                        <input type="text" id="supplierCreator" value="{{ auth()->user()->full_name ?? (trim((auth()->user()->first_name ?? '') . ' ' . (auth()->user()->last_name ?? '')) ?: (auth()->user()->name ?? '')) }}" disabled>
                        <input type="hidden" name="creator" value="{{ auth()->user()->full_name ?? (trim((auth()->user()->first_name ?? '') . ' ' . (auth()->user()->last_name ?? '')) ?: (auth()->user()->name ?? '')) }}">
                        @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') }}</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') }}</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', 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', 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', 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', 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" {{ old('is_blacklisted') ? '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">
                    <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') }}" data-action="check-duplicate-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>
                </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 create form specifically by ID
    const form = document.getElementById('supplierCreateForm');
    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
        const btn = submitBtn || form.querySelector('button[type="submit"]');
        if (btn) {
          btn.disabled = true;
          btn.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);
        }
        
        // Send AJAX request
        fetch(form.action, {
            method: 'POST',
            body: formData,
            headers: {
                'X-Requested-With': 'XMLHttpRequest',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                'Accept': 'application/json'
            },
            credentials: 'same-origin'
        })
        .then(async (response) => {
            console.log('Response status:', response.status);
            const ct = response.headers.get('content-type') || '';
            if (ct.includes('application/json')) {
                const data = await response.json();
                return { status: response.status, ok: response.ok, data };
            } else {
                const text = await response.text();
                return { status: response.status, ok: response.ok, data: { message: text, nonJson: true } };
            }
        })
        .then(result => {
            console.log('Server response:', result);
            
            if (result.ok) {
                // If non-JSON (e.g., redirect HTML), still treat as success
                if (window.showSuccessModalWithAutoClose) {
                    showSuccessModalWithAutoClose('تامین‌کننده با موفقیت ایجاد شد!', '{{ route(($routePrefix ?? 'admin.suppliers') . '.index') }}');
                } else {
                    window.location.href = '{{ route(($routePrefix ?? 'admin.suppliers') . '.index') }}';
                }
                return;
            }

            // Error
            if (result.data && result.data.errors) {
                // استفاده از مودال زیبای خطا
                if (window.showAjaxValidationErrors) {
                    window.showAjaxValidationErrors(result.data);
                } else {
                    // Fallback به alert معمولی
                    let errorMessage = 'خطا در ایجاد تامین‌کننده:\n';
                    Object.keys(result.data.errors).forEach(field => {
                        errorMessage += `${field}: ${result.data.errors[field].join(', ')}\n`;
                    });
                    alert(errorMessage);
                }
            } else if (result.data && result.data.message) {
                if (window.showCustomError) {
                    window.showCustomError('خطا', result.data.message);
                } else {
                    alert('خطا در ایجاد تامین‌کننده: ' + result.data.message);
                }
            } else {
                if (window.showCustomError) {
                    window.showCustomError('خطا', 'خطای نامشخص رخ داده است');
                } else {
                    alert('خطای نامشخص رخ داده است');
                }
            }
        })
        .catch(error => {
            console.error('AJAX Error:', error);
            alert('خطا در ارتباط با سرور: ' + error.message);
        })
        .finally(() => {
            // Re-enable submit button
            if (btn) {
              btn.disabled = false;
              btn.textContent = 'افزودن';
            }
        });
    });
    
    console.log('AJAX form setup completed.');
}

// Setup AJAX form when DOM is ready
if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', setupAjaxForm);
} else {
    setupAjaxForm();
}

// Tag input functionality section
document.addEventListener('DOMContentLoaded', function() {
    function setupTagInput(inputId, containerId, hiddenInputId, removeAction) {
        const input = document.getElementById(inputId);
        const container = document.getElementById(containerId);
        const hiddenInput = document.getElementById(hiddenInputId);
        
        input.addEventListener('keydown', function(e) {
            if (e.key === 'Enter') {
                e.preventDefault();
                const value = input.value.trim();
                if (value) {
                    addTag(container, value, removeAction, hiddenInput);
                    input.value = '';
                }
            }
        });
    }
    
    function addTag(container, text, removeAction, hiddenInput) {
        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');
    setupTagInput('otherNamesInput', 'otherNamesTagsContainer', 'otherNamesHidden', 'remove-other-name-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); }
            }
        }
    });

    // Other names -> add as tag
    wireSuggest('otherNamesInput', 'otherNamesSuggest', '{{ route(($routePrefix ?? 'admin.suppliers') . '.suggest.other_names') }}', (val) => {
        const container = document.getElementById('otherNamesTagsContainer');
        if (!container) return;
        const exists = Array.from(container.querySelectorAll('span')).some(s => s.textContent.trim() === val);
        if (!exists) {
            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 = `${val}<button type=\"button\" onclick=\"removeOtherName(Array.from(this.parentNode.parentNode.children).indexOf(this.parentNode))\" 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)'\">×</button>`;
            container.appendChild(tag);
            const hidden = document.getElementById('otherNamesHidden');
            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_expert_name[]" placeholder="نام کارشناس" value="${expert.name}">
            <input type="text" name="sales_expert_phone[]" placeholder="شماره تماس" value="${expert.phone}" data-action="check-duplicate-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);
    }

    // Helpers
    function persianToEnglishDigits(s){
        return String(s || '').replace(/[۰-۹]/g, d => '۰۱۲۳۴۵۶۷۸۹'.indexOf(d));
    }
    function normalizePhone(s){
        const digits = persianToEnglishDigits(s).replace(/\D/g, '');
        return digits;
    }

    // Duplicate phone check (delegated)
    document.getElementById('salesExpertsContainer')?.addEventListener('change', async function(e) {
        const input = e.target.closest('input[name="sales_expert_phone[]"][data-action="check-duplicate-phone"]');
        if (!input) return;
        const raw = (input.value || '').trim();
        const digits = normalizePhone(raw);
        if (digits && digits.length !== 11) {
            // custom alert modal
            const m = document.createElement('div');
            m.className = 'fixed inset-0 bg-black/70 backdrop-blur-sm flex items-center justify-center z-50 p-4';
            m.innerHTML = `
            <div class="bg-slate-800 rounded-3xl shadow-2xl p-8 w-[520px] max-w-[95vw] border-2 border-yellow-500/30">
                <div class="flex items-center gap-3 mb-4">
                    <div class="inline-flex items-center justify-center w-12 h-12 rounded-full bg-yellow-500/15 text-yellow-300 ring-1 ring-inset ring-yellow-400/30">
                        <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-7 w-7\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M12 9v4\"/><path d=\"M12 17h.01\"/><circle cx=\"12\" cy=\"12\" r=\"10\"/></svg>
                    </div>
                    <h3 class="text-slate-100 text-xl font-bold">شماره تماس نامعتبر</h3>
                </div>
                <p class="text-slate-200 mb-6" style="font-size:14px;">شماره ثبت‌شده باید دقیقاً 11 رقم باشد.</p>
                <div class="flex justify-end gap-3 mt-6">
                    <button id="inv-ok" class="px-5 py-2.5 rounded-xl bg-yellow-600 text-white hover:bg-yellow-500 transition">باشه</button>
                </div>
            </div>`;
            document.body.appendChild(m);
            m.querySelector('#inv-ok').addEventListener('click', () => { m.remove(); input.value = ''; input.focus(); });
            return;
        }
        const phone = digits;
        if (!phone) return;
        try {
            const url = `/api/suppliers/check-sales-expert-phone?phone=${encodeURIComponent(phone)}`;
            const res = await fetch(url, { headers: { 'X-Requested-With': 'XMLHttpRequest' } });
            const data = await res.json();
            if (data && data.ok && data.duplicate) {
                showDuplicatePhoneModal(data.phone, data.supplier?.name, data.creator, () => {
                    // proceed (do nothing)
                }, () => {
                    input.value = '';
                    input.focus();
                });
            }
        } catch (err) {
            console.warn('Duplicate phone check failed', err);
        }
    });

    function showDuplicatePhoneModal(phone, supplierName, creatorName, onProceed, onCancel) {
        const modal = document.createElement('div');
        modal.className = 'fixed inset-0 bg-black/70 backdrop-blur-sm flex items-center justify-center z-50 p-4';
        modal.innerHTML = `
        <div class="bg-slate-800 rounded-3xl shadow-2xl p-8 w-[640px] max-w-[95vw] border-2 border-red-500/30">
            <div class="flex items-center gap-3 mb-4">
                <div class="inline-flex items-center justify-center w-12 h-12 rounded-full bg-red-500/15 text-red-400 ring-1 ring-inset ring-red-400/30">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 9v4"/><path d="M12 17h.01"/><path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/></svg>
                </div>
                <h3 class="text-slate-100 text-xl font-bold">هشدار شماره تکراری</h3>
            </div>
            <div class="space-y-2 mb-6">
                <p class="text-slate-200" style="font-size:14px;">شماره <strong class="text-red-300">${phone}</strong> قبلاً ثبت شده است.</p>
                <p class="text-slate-300" style="font-size:14px;">برای تامین‌کننده: <strong class="text-slate-100">${supplierName || '-'}</strong></p>
                <p class="text-slate-300" style="font-size:14px;">ایجاد کننده: <strong class="text-slate-100">${creatorName || '-'}</strong></p>
            </div>
            <div class="flex justify-end gap-3 mt-6">
                <button id="dup-cancel" class="px-5 py-2.5 rounded-xl bg-slate-600 text-white hover:bg-slate-500 transition">انصراف</button>
                <button id="dup-continue" class="px-5 py-2.5 rounded-xl bg-red-600 text-white hover:bg-red-500 transition shadow-lg">مشکلی ندارد، ذخیره کن</button>
            </div>
        </div>`;
        document.body.appendChild(modal);
        modal.querySelector('#dup-cancel').addEventListener('click', () => { modal.remove(); onCancel && onCancel(); });
        modal.querySelector('#dup-continue').addEventListener('click', () => { modal.remove(); onProceed && onProceed(); });
    }
    // Removed demo fill button and related logic
});

// Validation function
function validateForm() {
    // Debug: Check if custom alerts are loaded
    console.log('showCustomWarning available:', typeof window.showCustomWarning);
    console.log('showWarning available:', typeof window.showWarning);
    // 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 landline phone numbers: allow 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('خطا در تلفن ثابت', 'شماره تلفن ثابت باید بین 5 تا 11 رقم باشد.');
                } else if (typeof window.showWarning === 'function') {
                    window.showWarning('خطا در تلفن ثابت', 'شماره تلفن ثابت باید بین 5 تا 11 رقم باشد.');
                } else {
                    alert('شماره تلفن ثابت باید بین 5 تا 11 رقم باشد.');
                }
                phoneInput.focus();
                return false;
            }
        }
    }
    
    // Validate sales expert phone numbers (exactly 11 digits)
    const expertPhoneInputs = document.querySelectorAll('input[name="sales_expert_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