@extends('layouts.panel')

@section('title', 'ثبت نمونه جدید')

@section('content')
<div class="container mx-auto px-4 py-6">
    <div class="w-full">
        <!-- Header -->
        <div class="mb-8">
            <div class="flex items-center justify-between">
                <div>
            <h1 class="text-3xl font-bold text-white mb-2">ثبت نمونه جدید</h1>
            <p class="text-slate-400">فرم درخواست نمونه محصولات شیمیایی</p>
                </div>
                <div class="flex items-center gap-3">
                    <a href="{{ route('sales.samples.index') }}" class="px-4 py-2 bg-slate-600 text-white rounded-lg hover:bg-slate-700 transition" style="font-size: 12px;">
                        <i class="fas fa-arrow-right ml-2"></i>
                        بازگشت به لیست
                    </a>
                </div>
            </div>
        </div>

        <!-- Form Card -->
        <div class="bg-slate-800/50 backdrop-blur-sm border border-slate-700 rounded-2xl p-6 shadow-xl">
            @if ($errors->any())
                <div class="mb-4 p-4 bg-red-900/20 border border-red-500/30 rounded-lg">
                    <ul class="list-disc list-inside text-red-400 text-sm">
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif
            <form id="sampleForm" action="{{ route('sales.samples.store') }}" method="POST" class="space-y-6">
                @csrf
                
                <!-- Product Information Section -->
                <div class="space-y-4">
                    <h3 class="text-lg font-semibold text-white mb-4">اطلاعات محصول</h3>
                    
                    <!-- Row 1: نام محصول، مقدار -->
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                            <label for="product_name" class="block text-sm font-medium text-slate-400 mb-2">
                                نام محصول <span class="text-red-500">*</span>
                        </label>
                            <div class="relative">
                                <input type="text" 
                            id="product_name" 
                            name="product_name" 
                            value="{{ old('product_name') }}"
                                       class="w-full px-4 py-3 bg-slate-700/50 border border-slate-600 rounded-lg text-white placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                                       placeholder="نام محصول را وارد کنید یا جستجو کنید"
                                       autocomplete="off"
                                       required>
                                <div id="product_suggestions" class="absolute z-10 w-full mt-1 bg-slate-800 border border-slate-600 rounded-lg shadow-lg hidden max-h-60 overflow-y-auto">
                                    <!-- Suggestions will be populated here -->
                                </div>
                            </div>
                        @error('product_name')
                                <p class="mt-1 text-sm text-red-400">{{ $message }}</p>
                            @enderror
                        </div>

                        <div>
                            <label for="quantity" class="block text-sm font-medium text-slate-400 mb-2">
                                مقدار
                            </label>
                            <input type="number" 
                                   id="quantity" 
                                   name="quantity" 
                                   value="{{ old('quantity') }}"
                                   step="0.01" 
                                   min="0"
                                   class="w-full px-4 py-3 bg-slate-700/50 border border-slate-600 rounded-lg text-white placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                                   placeholder="مقدار نمونه">
                            @error('quantity')
                                <p class="mt-1 text-sm text-red-400">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>

                    <!-- Row 2: توضیحات -->
                    <div>
                        <label for="description" class="block text-sm font-medium text-slate-400 mb-2">
                            توضیحات
                        </label>
                        <textarea id="description" 
                                  name="description" 
                                  rows="4"
                                  class="w-full px-4 py-3 bg-slate-700/50 border border-slate-600 rounded-lg text-white placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                                  placeholder="توضیحات محصول">{{ old('description') }}</textarea>
                        @error('description')
                            <p class="mt-1 text-sm text-red-400">{{ $message }}</p>
                        @enderror
                    </div>
                </div>

                <!-- Company Information Section -->
                <div class="space-y-4">
                    <h3 class="text-lg font-semibold text-white mb-4">اطلاعات شرکت</h3>
                    
                    <!-- Row 1: شرکت مبدا/مقصد، نماینده فروش، مشتری نهایی -->
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                        <div>
                            <label for="company_name" class="block text-sm font-medium text-slate-400 mb-2">
                                شرکت مبدا <span class="text-red-500">*</span>
                            </label>
                            <div class="relative">
                                <input type="text" 
                                id="company_name" 
                                name="company_name" 
                                value="{{ old('company_name') }}"
                                       class="w-full px-4 py-3 bg-slate-700/50 border border-slate-600 rounded-lg text-white placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                                       placeholder="نام شرکت را وارد کنید یا جستجو کنید"
                                       autocomplete="off"
                                       required>
                                <div id="company_suggestions" class="absolute z-10 w-full mt-1 bg-slate-800 border border-slate-600 rounded-lg shadow-lg hidden max-h-60 overflow-y-auto">
                                    <!-- Suggestions will be populated here -->
                                </div>
                            </div>
                            @error('company_name')
                                <p class="mt-1 text-sm text-red-400">{{ $message }}</p>
                            @enderror
                        </div>

                        <div>
                            <label for="sales_person_name" class="block text-sm font-medium text-slate-400 mb-2">
                                شخص درخواست کننده نمونه <span class="text-red-500">*</span>
                            </label>
                            <input type="text" 
                                id="sales_person_name" 
                                name="sales_person_name" 
                                value="{{ old('sales_person_name') }}"
                                   class="w-full px-4 py-3 bg-slate-700/50 border border-slate-600 rounded-lg text-white placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                                   placeholder="نام شخص درخواست کننده نمونه"
                                   required>
                            @error('sales_person_name')
                                <p class="mt-1 text-sm text-red-400">{{ $message }}</p>
                            @enderror
                    </div>

                    <div>
                            <label for="customer_name" class="block text-sm font-medium text-slate-400 mb-2">
                                مشتری نهایی
                        </label>
                            <input type="text" 
                            id="customer_name" 
                            name="customer_name" 
                            value="{{ old('customer_name') }}"
                                   class="w-full px-4 py-3 bg-slate-700/50 border border-slate-600 rounded-lg text-white placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                                   placeholder="نام مشتری نهایی">
                        @error('customer_name')
                            <p class="mt-1 text-sm text-red-400">{{ $message }}</p>
                        @enderror
                    </div>
                </div>
                        </div>

                <!-- Follow-up Information Section -->
                <div class="space-y-4">
                    <h3 class="text-lg font-semibold text-white mb-4">اطلاعات پیگیری</h3>
                    
                    <!-- Row 1: تاریخ پیگیری -->
                    <div class="grid grid-cols-1 md:grid-cols-1 gap-4">
                        <div>
                            <label for="follow_up_date" class="block text-sm font-medium text-slate-400 mb-2">
                                تاریخ پیگیری <span class="text-red-500">*</span>
                            </label>
                            <input type="text" 
                                   id="follow_up_date_shamsi" 
                                   placeholder="برای انتخاب تاریخ کلیک کنید" 
                                   readonly
                                   class="w-full px-4 py-3 bg-slate-700/50 border border-slate-600 rounded-lg text-white placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent cursor-pointer">
                            <input type="hidden" 
                                id="follow_up_date" 
                                name="follow_up_date" 
                                   value="{{ old('follow_up_date') }}">
                            @error('follow_up_date')
                                <p class="mt-1 text-sm text-red-400">{{ $message }}</p>
                            @enderror
                    </div>
                </div>

                    <!-- Row 2: یادداشت‌ها (Full Width) -->
                    <div>
                        <label for="notes" class="block text-sm font-medium text-slate-400 mb-2">
                            یادداشت‌ها
                        </label>
                        <textarea id="notes" 
                                  name="notes" 
                            rows="3"
                                  class="w-full px-4 py-3 bg-slate-700/50 border border-slate-600 rounded-lg text-white placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                                  placeholder="یادداشت‌های اضافی...">{{ old('notes') }}</textarea>
                        @error('notes')
                            <p class="mt-1 text-sm text-red-400">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Row 2: Checkbox for reminder -->
                    <div class="mt-4">
                        <div class="flex items-center gap-2">
                            <input type="checkbox" 
                                   id="create_reminder" 
                                   name="create_reminder" 
                                   value="1"
                                   class="w-4 h-4 text-blue-600 bg-slate-700 border-slate-600 rounded focus:ring-blue-500 focus:ring-2"
                                   {{ old('create_reminder') ? 'checked' : '' }}>
                            <label for="create_reminder" class="text-sm font-medium text-slate-300 cursor-pointer">
                                ثبت یادآوری برای تاریخ پیگیری در بخش یادآوری‌ها
                        </label>
                        </div>
                        <p class="mt-1 text-xs text-slate-400">با تیک زدن این گزینه، یک یادآوری در بخش یادآوری‌ها با تاریخ پیگیری و یادداشت‌های وارد شده ثبت می‌شود</p>
                    </div>
                </div>

                <!-- Submit Button -->
                <div class="flex justify-end pt-6">
                    <button type="submit" 
                            class="px-8 py-3 bg-gradient-to-r from-blue-500 to-purple-600 text-white font-medium rounded-lg hover:from-blue-600 hover:to-purple-700 transition-all duration-200 hover:shadow-lg hover:shadow-blue-500/25">
                        <i class="fas fa-save ml-2"></i>
                        ثبت نمونه
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<style>
.suggestion-item.active {
    background-color: #1e293b !important;
    border-left: 3px solid #3b82f6;
}
</style>
<script>
(function() {
    'use strict';

    // Function to setup form
    function setupFormSubmission() {
        const sampleForm = document.getElementById('sampleForm');

        if (!sampleForm) {
            console.error('❌ FORM NOT FOUND! Looking for element with ID: sampleForm');
            return;
        }

        // Get submit button
        const submitButton = sampleForm.querySelector('button[type="submit"]');

        if (submitButton) {
            submitButton.addEventListener('click', function(e) {
            });
        }
        
        // Add submit event listener
        sampleForm.addEventListener('submit', function(e) {
            // Validate that follow_up_date is set
            const followUpDateInput = document.getElementById('follow_up_date');
            if (followUpDateInput && (!followUpDateInput.value || followUpDateInput.value.trim() === '')) {
                e.preventDefault();
                if (typeof window.showErrorModal === 'function') {
                    window.showErrorModal('لطفا تاریخ پیگیری را انتخاب کنید.');
                                            } else {
                    alert('لطفا تاریخ پیگیری را انتخاب کنید.');
                }
                return;
            }
            
            // Hide suggestions
            const suggestionsContainer = document.getElementById('product_suggestions');
            const companySuggestionsContainer = document.getElementById('company_suggestions');
            if (suggestionsContainer) suggestionsContainer.classList.add('hidden');
            if (companySuggestionsContainer) companySuggestionsContainer.classList.add('hidden');

            // Prevent default to handle submission via AJAX
            e.preventDefault();
            
            // Submit form via AJAX
            const formDataForSubmit = new FormData(this);
            
            // Log form data for debugging
            const formDataObj = {};
            for (let [key, value] of formDataForSubmit.entries()) {
                formDataObj[key] = value;
            }
            const submitButton = this.querySelector('button[type="submit"]');
            const originalButtonText = submitButton ? submitButton.innerHTML : '';
            
            if (submitButton) {
                submitButton.disabled = true;
                submitButton.innerHTML = '<i class="fas fa-spinner fa-spin ml-2"></i> در حال ثبت...';
            }
            
            fetch(this.action, {
                method: 'POST',
                body: formDataForSubmit,
                headers: {
                    'X-Requested-With': 'XMLHttpRequest',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || ''
                },
                credentials: 'same-origin'
            })
            .then(async response => {
                const contentType = response.headers.get('content-type');
                
                if (response.ok) {
                    // Check if response is JSON
                    if (contentType && contentType.includes('application/json')) {
                        const data = await response.json();
                        return data;
                    } else {
                        // HTML response - this means redirect happened
                        // Force page reload
                        window.location.href = '/sales/samples';
                        return { ok: true, redirect: true };
                    }
                } else if (response.status === 422) {
                    const data = await response.json();
                    throw new Error(JSON.stringify(data.errors || { message: 'Validation error' }));
                } else {
                    const errorText = await response.text();
                    console.error('Server error response:', errorText);
                    throw new Error('Server error: ' + response.status);
                }
            })
            .then(data => {
                // If redirect already happened, don't show modal
                if (data.redirect) {
                    return;
                }
                
                // Show success modal and redirect
                if (typeof window.showSuccessModalWithAutoClose === 'function') {
                    window.showSuccessModalWithAutoClose('نمونه با موفقیت ثبت شد.', '/sales/samples');
                } else {
                    // Fallback: simple alert and redirect
                    alert('نمونه با موفقیت ثبت شد.');
                    // Force page reload to ensure fresh data
                    window.location.href = '/sales/samples';
                }
            })
            .catch(error => {
                console.error('Error submitting form:', error);
                console.error('Error stack:', error.stack);
                console.error('Error name:', error.name);
                console.error('Error message:', error.message);
                
                let errorMessage = 'خطا در ثبت نمونه';
                let errorDetails = null;
                
                try {
                    const errorData = JSON.parse(error.message);
                    if (errorData.errors) {
                        errorMessage = Object.values(errorData.errors).flat().join('\n');
                        errorDetails = errorData.errors;
                    } else if (errorData.message) {
                        errorMessage = errorData.message;
                    }
                } catch (e) {
                    errorMessage = error.message || 'خطا در ثبت نمونه';
                }
                
                console.error('Error message to display:', errorMessage);
                console.error('Error details:', errorDetails);
                
                if (typeof window.showErrorModal === 'function') {
                    window.showErrorModal(errorMessage);
                } else {
                    alert('خطا: ' + errorMessage);
                }
                
                if (submitButton) {
                    submitButton.disabled = false;
                    submitButton.innerHTML = originalButtonText;
                }
            });
        });
    }
    
    // Try to setup immediately if DOM is ready
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', function() {
            setupFormSubmission();
        });
    } else {
        setupFormSubmission();
    }
    
    // Also try after a short delay as fallback
    setTimeout(function() {
        const form = document.getElementById('sampleForm');
        if (form) {
        } else {
            console.error('❌ Form still not found in timeout!');
        }
    }, 1000);
})();

// Wait for DOM to be fully ready
function initializeLiveSearch() {
    const productInput = document.getElementById('product_name');
    const suggestionsContainer = document.getElementById('product_suggestions');
    let searchTimeout;

    // Live search functionality for products
    if (!productInput || !suggestionsContainer) {
        console.error('Product input or suggestions container not found!');
        // Don't return, continue with supplier search
    } else {
        productInput.addEventListener('input', function() {
            const query = this.value.trim();

            // Clear previous timeout
            clearTimeout(searchTimeout);
            
            if (query.length < 2) {
                suggestionsContainer.classList.add('hidden');
                return;
            }

            // Debounce search
            searchTimeout = setTimeout(() => {
                searchProducts(query);
            }, 300);
        });

        // Hide suggestions when clicking outside
        document.addEventListener('click', function(e) {
            if (!productInput.contains(e.target) && !suggestionsContainer.contains(e.target)) {
                suggestionsContainer.classList.add('hidden');
            }
        });

        // Handle keyboard navigation
        productInput.addEventListener('keydown', function(e) {
        const suggestions = suggestionsContainer.querySelectorAll('.suggestion-item');
        const activeSuggestion = suggestionsContainer.querySelector('.suggestion-item.active');
        const isSuggestionsVisible = !suggestionsContainer.classList.contains('hidden') && suggestions.length > 0;
        
        if (e.key === 'ArrowDown') {
            if (isSuggestionsVisible) {
                e.preventDefault();
                if (activeSuggestion) {
                    activeSuggestion.classList.remove('active');
                    const next = activeSuggestion.nextElementSibling;
                    if (next) {
                        next.classList.add('active');
                    } else {
                        suggestions[0]?.classList.add('active');
                    }
                } else {
                    suggestions[0]?.classList.add('active');
                }
            }
        } else if (e.key === 'ArrowUp') {
            if (isSuggestionsVisible) {
                e.preventDefault();
                if (activeSuggestion) {
                    activeSuggestion.classList.remove('active');
                    const prev = activeSuggestion.previousElementSibling;
                    if (prev) {
                        prev.classList.add('active');
                    } else {
                        suggestions[suggestions.length - 1]?.classList.add('active');
                    }
                } else {
                    suggestions[suggestions.length - 1]?.classList.add('active');
                }
            }
        } else if (e.key === 'Enter') {
            if (isSuggestionsVisible && activeSuggestion) {
                e.preventDefault();
                selectProduct(activeSuggestion.dataset.productName);
            }
            // If suggestions are not visible, let the form submit normally
        } else if (e.key === 'Escape') {
            if (isSuggestionsVisible) {
                e.preventDefault();
                suggestionsContainer.classList.add('hidden');
            }
        }
        });

        function searchProducts(query) {
            const url = `/sales/products/search?q=${encodeURIComponent(query)}`;

            fetch(url, {
                method: 'GET',
                headers: {
                    'Accept': 'application/json',
                    'X-Requested-With': 'XMLHttpRequest',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || ''
                },
                credentials: 'same-origin'
            })
            .then(response => {
                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }
                return response.json();
            })
            .then(data => {
                displaySuggestions(data);
            })
            .catch(error => {
                console.error('Error searching products:', error);
                suggestionsContainer.classList.add('hidden');
            });
        }

        function displaySuggestions(products) {
            if (!products || products.length === 0) {
                suggestionsContainer.classList.add('hidden');
                return;
            }

            suggestionsContainer.innerHTML = '';
            
            products.forEach(product => {
                const productName = product.name || product;
                const casNo = product.cas_no || '';

                const suggestionItem = document.createElement('div');
                suggestionItem.className = 'suggestion-item px-4 py-3 hover:bg-slate-700 cursor-pointer border-b border-slate-600 last:border-b-0';
                suggestionItem.dataset.productName = productName;
                suggestionItem.innerHTML = `
                    <div class="text-white font-medium">${productName}</div>
                    ${casNo ? `<div class="text-slate-400 text-sm">CAS: ${casNo}</div>` : ''}
                `;
                
                suggestionItem.addEventListener('click', function() {
                    selectProduct(productName);
                });
                
                suggestionsContainer.appendChild(suggestionItem);
            });

            suggestionsContainer.classList.remove('hidden');
        }

        function selectProduct(productName) {
            productInput.value = productName;
            suggestionsContainer.classList.add('hidden');
            productInput.focus();
        }
    } // End of product search block

    // Supplier live search functionality
    const companyInput = document.getElementById('company_name');
    const companySuggestionsContainer = document.getElementById('company_suggestions');
    let companySearchTimeout;

    if (!companyInput || !companySuggestionsContainer) {
        console.error('Company input or suggestions container not found!');
        return;
    }

    // Live search functionality for suppliers
    if (companyInput && companySuggestionsContainer) {
        companyInput.addEventListener('input', function() {
            const query = this.value.trim();

            // Clear previous timeout
            clearTimeout(companySearchTimeout);
            
            if (query.length < 2) {
                companySuggestionsContainer.classList.add('hidden');
                return;
            }

            // Debounce search
            companySearchTimeout = setTimeout(() => {
                searchSuppliers(query);
            }, 300);
        });
    }

    // Hide suggestions when clicking outside
    if (companyInput && companySuggestionsContainer) {
        document.addEventListener('click', function(e) {
            if (!companyInput.contains(e.target) && !companySuggestionsContainer.contains(e.target)) {
                companySuggestionsContainer.classList.add('hidden');
            }
        });
    }

    // Handle keyboard navigation for suppliers
    if (companyInput && companySuggestionsContainer) {
        companyInput.addEventListener('keydown', function(e) {
            const suggestions = companySuggestionsContainer.querySelectorAll('.suggestion-item');
            const activeSuggestion = companySuggestionsContainer.querySelector('.suggestion-item.active');
            
            if (e.key === 'ArrowDown') {
                e.preventDefault();
                if (activeSuggestion) {
                    activeSuggestion.classList.remove('active');
                    const next = activeSuggestion.nextElementSibling;
                    if (next) {
                        next.classList.add('active');
                    } else {
                        suggestions[0]?.classList.add('active');
                    }
                } else {
                    suggestions[0]?.classList.add('active');
                }
            } else if (e.key === 'ArrowUp') {
                e.preventDefault();
                if (activeSuggestion) {
                    activeSuggestion.classList.remove('active');
                    const prev = activeSuggestion.previousElementSibling;
                    if (prev) {
                        prev.classList.add('active');
                    } else {
                        suggestions[suggestions.length - 1]?.classList.add('active');
                    }
                } else {
                    suggestions[suggestions.length - 1]?.classList.add('active');
                }
            } else if (e.key === 'Enter') {
                const isSuggestionsVisible = !companySuggestionsContainer.classList.contains('hidden') && suggestions.length > 0;
                if (isSuggestionsVisible && activeSuggestion) {
                    e.preventDefault();
                    selectSupplier(activeSuggestion.dataset.supplierName);
                }
                // If suggestions are not visible, let the form submit normally
            } else if (e.key === 'Escape') {
                const isSuggestionsVisible = !companySuggestionsContainer.classList.contains('hidden') && suggestions.length > 0;
                if (isSuggestionsVisible) {
                    e.preventDefault();
                    companySuggestionsContainer.classList.add('hidden');
                }
            }
        });
    }

    function searchSuppliers(query) {
        const url = `/sales/suppliers/search?term=${encodeURIComponent(query)}`;

        fetch(url, {
            method: 'GET',
            headers: {
                'Accept': 'application/json',
                'X-Requested-With': 'XMLHttpRequest',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || ''
            },
            credentials: 'same-origin'
        })
        .then(response => {
            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
            }
            return response.json();
        })
        .then(data => {
            displaySupplierSuggestions(data);
        })
        .catch(error => {
            console.error('Error searching suppliers:', error);
            companySuggestionsContainer.classList.add('hidden');
        });
    }

    function displaySupplierSuggestions(suppliers) {
        if (!suppliers || suppliers.length === 0) {
            companySuggestionsContainer.classList.add('hidden');
            return;
        }

        companySuggestionsContainer.innerHTML = '';
        
        suppliers.forEach(supplier => {
            const supplierName = supplier.name || supplier;

            const suggestionItem = document.createElement('div');
            suggestionItem.className = 'suggestion-item px-4 py-3 hover:bg-slate-700 cursor-pointer border-b border-slate-600 last:border-b-0';
            suggestionItem.dataset.supplierName = supplierName;
            suggestionItem.innerHTML = `
                <div class="text-white font-medium">${supplierName}</div>
            `;
            
            suggestionItem.addEventListener('click', function() {
                selectSupplier(supplierName);
            });
            
            companySuggestionsContainer.appendChild(suggestionItem);
        });

        companySuggestionsContainer.classList.remove('hidden');
    }

    function selectSupplier(supplierName) {
        companyInput.value = supplierName;
        companySuggestionsContainer.classList.add('hidden');
        companyInput.focus();
    }
}

// Initialize when DOM is ready
(function() {
    function init() {
        initializeLiveSearch();
    }
    
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', function() {
            init();
        });
    } else {
        // DOM already loaded
        init();
    }
    
    // Fallback: try again after a short delay
    setTimeout(function() {
        const productInput = document.getElementById('product_name');
        const companyInput = document.getElementById('company_name');
        if (productInput && !productInput.hasAttribute('data-search-initialized')) {
            productInput.setAttribute('data-search-initialized', 'true');
            initializeLiveSearch();
        }
    }, 500);
})();

// Persian Calendar for follow_up_date
document.addEventListener('DOMContentLoaded', function() {
    const followUpDateShamsiInput = document.getElementById('follow_up_date_shamsi');
    const followUpDateHiddenInput = document.getElementById('follow_up_date');
    
    if (followUpDateShamsiInput) {
        let currentCalendarYear = null;
        let currentCalendarMonth = null;
        
        // Get current date from input or use today
        const getCurrentDate = () => {
            const currentValue = followUpDateShamsiInput.value;
            if (currentValue && currentValue.includes('/')) {
                const parts = currentValue.split('/');
                return {
                    year: parseInt(parts[0]),
                    month: parseInt(parts[1])
                };
            }
            // Get from server
            @php
                $now = \Morilog\Jalali\Jalalian::now();
                $currentYear = $now->getYear();
                $currentMonth = $now->getMonth();
            @endphp
            return {
                year: {{ $currentYear }},
                month: {{ $currentMonth }}
            };
        };
        
        // Function to show Persian calendar
        window.showFollowUpDateCalendar = function(year, month) {
            // Remove existing calendar if any
            const existingCalendar = document.getElementById('persian-calendar-modal-follow-up');
            if (existingCalendar) {
                existingCalendar.remove();
            }
            
            // Fetch calendar view from server
            const calendarUrl = '{{ route('api.calendar-view') }}';
            fetch(calendarUrl + '?year=' + year + '&month=' + month, {
                headers: {
                    'Accept': 'text/html',
                    'X-Requested-With': 'XMLHttpRequest',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || ''
                }
            })
                .then(response => {
                    return response.text().then(text => {
                        if (!response.ok) {
                            if (text.includes('persian-calendar-container')) {
                                return text;
                            }
                            console.error('Calendar fetch error:', {
                                status: response.status,
                                statusText: response.statusText,
                                url: calendarUrl + '?year=' + year + '&month=' + month,
                                responseText: text.substring(0, 500)
                            });
                            throw new Error('Failed to load calendar: ' + response.status);
                        }
                        return text;
                    });
                })
                .then(html => {
                    if (!html || html.trim().length === 0 || !html.includes('persian-calendar-container')) {
                        console.error('Invalid calendar HTML');
                        throw new Error('Invalid calendar HTML');
                    }
                    
                    // Create modal container
                    const modal = document.createElement('div');
                    modal.id = 'persian-calendar-modal-follow-up';
                    modal.style.cssText = 'position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; pointer-events: none;';
                    
                    // Create backdrop
                    const backdrop = document.createElement('div');
                    backdrop.style.cssText = 'position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(4px); pointer-events: auto;';
                    backdrop.addEventListener('click', function(e) {
                        e.stopPropagation();
                        modal.remove();
                    });
                    
                    // Create calendar container
                    const calendarContainer = document.createElement('div');
                    calendarContainer.style.cssText = 'position: relative; z-index: 100000; background: transparent; pointer-events: auto;';
                    calendarContainer.innerHTML = html;
                    calendarContainer.addEventListener('click', function(e) {
                        e.stopPropagation();
                    });
                    
                    modal.appendChild(backdrop);
                    modal.appendChild(calendarContainer);
                    document.body.appendChild(modal);
                    
                    setTimeout(() => {
                        const calendarDiv = calendarContainer.querySelector('.persian-calendar-container');
                        if (calendarDiv) {
                            calendarDiv.style.display = 'block';
                            calendarDiv.style.visibility = 'visible';
                            calendarDiv.style.opacity = '1';
                        }
                    }, 50);
                    
                    // Handle day selection
                    setTimeout(() => {
                        const dayElements = calendarContainer.querySelectorAll('.calendar-day');
                        dayElements.forEach(dayEl => {
                            dayEl.addEventListener('click', function(e) {
                                e.stopPropagation();
                                
                                // Remove selected class from all days
                                dayElements.forEach(day => {
                                    day.classList.remove('selected');
                                    const dayNumber = day.querySelector('.day-number');
                                    const dayGregorian = day.querySelector('.day-gregorian');
                                    if (dayNumber) {
                                        dayNumber.style.color = '';
                                    }
                                    if (dayGregorian) {
                                        dayGregorian.style.color = '';
                                    }
                                });
                                
                                // Add selected class to clicked day
                                this.classList.add('selected');
                                const dayNumber = this.querySelector('.day-number');
                                const dayGregorian = this.querySelector('.day-gregorian');
                                if (dayNumber) {
                                    dayNumber.style.color = '#ffffff';
                                }
                                if (dayGregorian) {
                                    dayGregorian.style.color = '#ffffff';
                                }
                                
                                const gregorian = this.getAttribute('data-gregorian');
                                const shamsi = this.getAttribute('data-shamsi');
                                
                                if (followUpDateShamsiInput) {
                                    followUpDateShamsiInput.value = shamsi;
                                }
                                if (followUpDateHiddenInput) {
                                    followUpDateHiddenInput.value = gregorian;
                                }
                                
                                modal.remove();
                            });
                        });
                        
                        // Handle month navigation
                        const prevBtn = calendarContainer.querySelector('.prev-month');
                        const nextBtn = calendarContainer.querySelector('.next-month');
                        
                        if (prevBtn) {
                            prevBtn.addEventListener('click', function(e) {
                                e.stopPropagation();
                                let newYear = parseInt(this.getAttribute('data-year'));
                                let newMonth = parseInt(this.getAttribute('data-month'));
                                
                                if (newMonth < 1) {
                                    newMonth = 12;
                                    newYear--;
                                }
                                
                                currentCalendarYear = newYear;
                                currentCalendarMonth = newMonth;
                                showFollowUpDateCalendar(newYear, newMonth);
                            });
                        }
                        
                        if (nextBtn) {
                            nextBtn.addEventListener('click', function(e) {
                                e.stopPropagation();
                                let newYear = parseInt(this.getAttribute('data-year'));
                                let newMonth = parseInt(this.getAttribute('data-month'));
                                
                                if (newMonth > 12) {
                                    newMonth = 1;
                                    newYear++;
                                }
                                
                                currentCalendarYear = newYear;
                                currentCalendarMonth = newMonth;
                                showFollowUpDateCalendar(newYear, newMonth);
                            });
                        }
                        
                        // Handle "Go to Today" button
                        const todayBtn = calendarContainer.querySelector('.calendar-today-btn');
                        if (todayBtn) {
                            todayBtn.addEventListener('click', function(e) {
                                e.stopPropagation();
                                const today = getCurrentDate();
                                currentCalendarYear = today.year;
                                currentCalendarMonth = today.month;
                                showFollowUpDateCalendar(today.year, today.month);
                            });
                        }
                    }, 100);
                })
                .catch(error => {
                    console.error('Failed to load calendar:', error);
                });
        };
        
        // Open calendar on input click
        followUpDateShamsiInput.addEventListener('click', function() {
            const currentDate = getCurrentDate();
            currentCalendarYear = currentDate.year;
            currentCalendarMonth = currentDate.month;
            showFollowUpDateCalendar(currentDate.year, currentDate.month);
        });
    }
});
</script>
@endpush