@extends('layouts.panel')

@section('title', 'افزودن درخواست خرید')

@push('styles')
    @vite(['resources/css/pages/purchase-requests.css'])
@endpush

@push('scripts')
    @vite(['resources/js/pages/purchase-requests.js'])
@endpush

@section('content')
    <!-- بخش اصلی محتوا -->
    <div id="content-container">
        <main id="main-content" class="mx-auto w-full px-4 py-8">
            <header class="flex flex-col sm:flex-row justify-between items-start sm:items-center border-b pb-4 mb-6 border-slate-700">
                <h1 id="page-title" class="text-2xl font-bold text-slate-100">درخواست خرید جدید</h1>
            </header>

            <!-- منوی مراحل (Wizard Navigation) -->
            <nav class="flex justify-center mb-8">
                <div class="flex space-x-4 space-x-reverse rounded-full bg-slate-800 p-2 text-sm font-medium text-slate-400 shadow-md w-full justify-center">
                    <a href="#step-1" class="wizard-step-link flex items-center px-4 py-2 rounded-full hover:bg-slate-700 active">
                        <span class="size-6 inline-flex items-center justify-center rounded-full bg-blue-500 text-white font-bold text-xs ml-2">1</span>
                        انتخاب محصول
                    </a>
                    <a href="#step-2" class="wizard-step-link flex items-center px-4 py-2 rounded-full hover:bg-slate-700">
                        <span class="size-6 inline-flex items-center justify-center rounded-full bg-slate-600 text-slate-400 font-bold text-xs ml-2">2</span>
                        ثبت اطلاعات تامین‌کنندگان
                    </a>
                    <a href="#step-3" class="wizard-step-link flex items-center px-4 py-2 rounded-full hover:bg-slate-700">
                        <span class="size-6 inline-flex items-center justify-center rounded-full bg-slate-600 text-slate-400 font-bold text-xs ml-2">3</span>
                        مقایسه و انتخاب نهایی
                    </a>
                    <a href="#step-4" class="wizard-step-link flex items-center px-4 py-2 rounded-full hover:bg-slate-700">
                        <span class="size-6 inline-flex items-center justify-center rounded-full bg-slate-600 text-slate-400 font-bold text-xs ml-2">4</span>
                        ثبت خرید و گزارش
                    </a>
                    <a href="#step-5" class="wizard-step-link flex items-center px-4 py-2 rounded-full hover:bg-slate-700">
                        <span class="size-6 inline-flex items-center justify-center rounded-full bg-slate-600 text-slate-400 font-bold text-xs ml-2">5</span>
                        پیش‌نمایش و ذخیره
                    </a>
                </div>
            </nav>

            <!-- محتوای مراحل -->
            <div id="wizard-container" class="glass rounded-2xl p-8">
                <!-- مرحله ۱: انتخاب محصول -->
                <div id="step-1" class="wizard-step">
                    <h2 class="text-xl font-bold mb-4">مرحله ۱: انتخاب محصول و نوع درخواست</h2>
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                        <div class="md:col-span-2">
                            <label for="product-search" class="block text-sm font-medium text-slate-400">نام محصول را وارد کنید:</label>
                            <div class="relative mt-1">
                                <input type="text" id="product-search" class="block w-full rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500" placeholder="اسید اسکوربیک...">
                                <div id="product-list" class="absolute z-10 w-full mt-1 rounded-md shadow-lg overflow-hidden hidden"></div>
                            </div>
                        </div>
                        <div>
                            <label for="product-quantity" class="block text-sm font-medium text-slate-400">مقدار مورد نیاز:</label>
                            <div class="flex items-center mt-1">
                                <input type="number" id="product-quantity" value="1" min="1" class="block w-full rounded-l-none rounded-r-md">
                                <select id="product-unit" class="rounded-r-none rounded-l-md border-l-0">
                                    <option>کیلوگرم</option>
                                    <option>گرم</option>
                                    <option>لیتر</option>
                                </select>
                            </div>
                        </div>
                    </div>

                    <div id="selected-product-info" class="mt-4 p-4 rounded-xl bg-white/5 text-slate-300 hidden">
                        <h3 class="text-lg font-bold">محصول انتخاب‌شده: <span id="selected-product-name"></span></h3>
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-8">
                        <div>
                            <label class="block text-sm font-medium text-slate-400 mb-2">نوع خرید:</label>
                            <div class="grid grid-cols-2 gap-3" id="purchase-type-cards">
                                <div class="radio-card cursor-pointer p-4 rounded-xl bg-white/5 text-center selected" data-value="official">
                                    <input id="purchase-type-official" name="purchaseType" type="radio" value="official" class="hidden" checked>
                                    <label for="purchase-type-official" class="cursor-pointer font-medium text-slate-300">خرید رسمی</label>
                                </div>
                                <div class="radio-card cursor-pointer p-4 rounded-xl bg-white/5 text-center" data-value="unofficial">
                                    <input id="purchase-type-unofficial" name="purchaseType" type="radio" value="unofficial" class="hidden">
                                    <label for="purchase-type-unofficial" class="cursor-pointer font-medium text-slate-300">خرید غیررسمی</label>
                                </div>
                            </div>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-slate-400 mb-2">مقصد:</label>
                            <div class="grid grid-cols-2 gap-3" id="destination-cards">
                                <div class="radio-card cursor-pointer p-4 rounded-xl bg-white/5 text-center" data-value="warehouse">
                                    <input id="destination-warehouse" name="destination" type="radio" value="warehouse" class="hidden">
                                    <label for="destination-warehouse" class="cursor-pointer font-medium text-slate-300">برای انبار</label>
                                </div>
                                <div class="radio-card cursor-pointer p-4 rounded-xl bg-white/5 text-center" data-value="sales">
                                    <input id="destination-sales" name="destination" type="radio" value="sales" class="hidden">
                                    <label for="destination-sales" class="cursor-pointer font-medium text-slate-300">برای فروش</label>
                                </div>
                            </div>
                            <div id="warehouse-container" class="mt-4 hidden">
                                <label class="block text-sm font-medium text-slate-400 mb-2">انتخاب انبار:</label>
                                <select id="warehouse-select" class="block w-full rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500">
                                    <option value="">در حال بارگذاری...</option>
                                </select>
                            </div>
                            <div id="sales-expert-container" class="mt-4 hidden">
                                <label class="block text-sm font-medium text-slate-400 mb-2">انتخاب کارشناس فروش:</label>
                                <select id="sales-expert" class="block w-full rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500">
                                    <option value="">یک نفر را انتخاب کنید...</option>
                                </select>
                            </div>
                        </div>
                    </div>

                    <div class="flex justify-end mt-6">
                        <button id="next-step-1" class="px-6 py-2 bg-blue-600 text-white font-medium rounded-xl shadow-lg hover:bg-blue-700 transition duration-300 ease-in-out" disabled>
                            مرحله بعدی
                        </button>
                    </div>
                </div>
            </div>
        </main>
    </div>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // State management
    const state = {
        selectedProduct: null,
        selectedProductId: null,
        currentStep: 1,
        destination: null,
        warehouseId: null,
        salesUserId: null
    };

    // DOM elements
    const productSearchInput = document.getElementById('product-search');
    const productListDiv = document.getElementById('product-list');
    const selectedProductInfoDiv = document.getElementById('selected-product-info');
    const selectedProductNameSpan = document.getElementById('selected-product-name');
    const nextStep1Btn = document.getElementById('next-step-1');
    const productQuantityInput = document.getElementById('product-quantity');
    const productUnitSelect = document.getElementById('product-unit');

    // Helper function: Debounce
    function debounce(func, delay) {
        let timeoutId;
        return function(...args) {
            clearTimeout(timeoutId);
            timeoutId = setTimeout(() => {
                func.apply(this, args);
            }, delay);
        };
    }

    // Product search functionality with optimization
    let searchAbortController = null;
    let searchCache = new Map();
    const CACHE_DURATION = 5 * 60 * 1000; // 5 minutes

    function renderProductList(query) {
        // Cancel previous request
        if (searchAbortController) {
            searchAbortController.abort();
        }

        productListDiv.innerHTML = '';
        const q = (query || '').trim();
        
        if (q.length < 2) { 
            productListDiv.classList.add('hidden'); 
            return; 
        }

        // Check cache first
        const cacheKey = q.toLowerCase();
        const cached = searchCache.get(cacheKey);
        if (cached && (Date.now() - cached.timestamp) < CACHE_DURATION) {
            displayProducts(cached.data);
            return;
        }

        // Show loading state
        productListDiv.innerHTML = '<div class="px-4 py-2 text-slate-400 text-center">در حال جستجو...</div>';
        productListDiv.classList.remove('hidden');

        // Create new abort controller
        searchAbortController = new AbortController();

        try {
            const url = new URL(`{{ route('products.autocomplete') }}`, window.location.origin);
            url.searchParams.set('q', q);
            url.searchParams.set('limit', '10');
            
            fetch(url.toString(), { 
                method: 'GET', 
                headers: { 'X-Requested-With': 'XMLHttpRequest' },
                signal: searchAbortController.signal
            })
                .then(res => {
                    if (!res.ok) throw new Error('Network response was not ok');
                    return res.json();
                })
                .then(data => {
                    const items = (data && data.data) ? data.data : [];
                    
                    // Cache the result
                    searchCache.set(cacheKey, {
                        data: items,
                        timestamp: Date.now()
                    });

                    // Limit cache size
                    if (searchCache.size > 50) {
                        const firstKey = searchCache.keys().next().value;
                        searchCache.delete(firstKey);
                    }

                    displayProducts(items);
                })
                .catch(err => {
                    if (err.name === 'AbortError') {
                        // Request was cancelled, ignore
                        return;
                    }
                    productListDiv.innerHTML = '<div class="px-4 py-2 text-red-400 text-center">خطا در جستجو</div>';
                    setTimeout(() => {
                        productListDiv.classList.add('hidden');
                    }, 2000);
                });
        } catch (_) { 
            productListDiv.classList.add('hidden'); 
        }
    }

    function displayProducts(items) {
        productListDiv.innerHTML = '';
        
        if (!items.length) { 
            productListDiv.innerHTML = '<div class="px-4 py-2 text-slate-400 text-center">نتیجه‌ای یافت نشد</div>';
            productListDiv.classList.remove('hidden');
            setTimeout(() => {
                productListDiv.classList.add('hidden');
            }, 2000);
            return; 
        }

        // Use DocumentFragment for better performance
        const fragment = document.createDocumentFragment();
        
        items.forEach(p => {
            const item = document.createElement('div');
            item.className = 'px-4 py-2 cursor-pointer hover:bg-slate-700 text-slate-200 border-b border-slate-600 last:border-b-0 transition-colors';
            item.textContent = p.label || p.name || '';
            item.addEventListener('click', () => selectProduct(p.label || p.name || '', p.id));
            fragment.appendChild(item);
        });
        
        productListDiv.appendChild(fragment);
        productListDiv.classList.remove('hidden');
    }

    function selectProduct(productName, productId) {
        state.selectedProduct = productName;
        state.selectedProductId = productId;
        productSearchInput.value = productName;
        productListDiv.classList.add('hidden');
        selectedProductNameSpan.textContent = productName;
        selectedProductInfoDiv.classList.remove('hidden');
        nextStep1Btn.disabled = false;
        
        // Cancel any pending search
        if (searchAbortController) {
            searchAbortController.abort();
        }
    }

    // Product search input handler with optimized debounce
    if (productSearchInput) {
        productSearchInput.addEventListener('input', debounce((e) => {
            renderProductList(e.target.value);
        }, 500)); // Increased from 300ms to 500ms for better performance

        // Hide product list when clicking outside
        document.addEventListener('click', (e) => {
            if (!productSearchInput.contains(e.target) && !productListDiv.contains(e.target)) {
                productListDiv.classList.add('hidden');
            }
        });
    }

    // Radio card selection for purchase type
    const purchaseTypeCards = document.querySelectorAll('#purchase-type-cards .radio-card');
    purchaseTypeCards.forEach(card => {
        card.addEventListener('click', function() {
            purchaseTypeCards.forEach(c => c.classList.remove('selected'));
            this.classList.add('selected');
            const radio = this.querySelector('input[type="radio"]');
            if (radio) radio.checked = true;
        });
    });

    // Radio card selection for destination
    const destinationCards = document.querySelectorAll('#destination-cards .radio-card');
    const salesExpertContainer = document.getElementById('sales-expert-container');
    const warehouseContainer = document.getElementById('warehouse-container');
    const warehouseSelect = document.getElementById('warehouse-select');
    
    destinationCards.forEach(card => {
        card.addEventListener('click', function() {
            destinationCards.forEach(c => c.classList.remove('selected'));
            this.classList.add('selected');
            const radio = this.querySelector('input[type="radio"]');
            if (radio) {
                radio.checked = true;
                const destination = radio.value;
                
                // Show/hide containers based on destination
                if (destination === 'sales') {
                    // Show sales expert, hide warehouse
                    if (salesExpertContainer) {
                        salesExpertContainer.classList.remove('hidden');
                    }
                    if (warehouseContainer) {
                        warehouseContainer.classList.add('hidden');
                    }
                    // Load sales experts if not already loaded
                    if (document.getElementById('sales-expert').options.length <= 1) {
                        loadSalesExperts();
                    }
                    state.destination = 'sales';
                } else if (destination === 'warehouse') {
                    // Show warehouse, hide sales expert
                    if (warehouseContainer) {
                        warehouseContainer.classList.remove('hidden');
                    }
                    if (salesExpertContainer) {
                        salesExpertContainer.classList.add('hidden');
                    }
                    // Load warehouses if not already loaded
                    loadWarehouses();
                    state.destination = 'warehouse';
                } else {
                    // Hide both if nothing selected
                    if (warehouseContainer) {
                        warehouseContainer.classList.add('hidden');
                    }
                    if (salesExpertContainer) {
                        salesExpertContainer.classList.add('hidden');
                    }
                    state.destination = null;
                }
            }
        });
    });

    // Store warehouse selection
    if (warehouseSelect) {
        warehouseSelect.addEventListener('change', function() {
            state.warehouseId = this.value || null;
        });
    }

    // Store sales expert selection
    const salesExpertSelect = document.getElementById('sales-expert');
    if (salesExpertSelect) {
        salesExpertSelect.addEventListener('change', function() {
            state.salesUserId = this.value || null;
        });
    }

    // Load warehouses
    async function loadWarehouses() {
        if (!warehouseSelect) return;
        
        try {
            warehouseSelect.innerHTML = '<option value="">در حال بارگذاری...</option>';
            const response = await fetch('/admin/inventory/warehouses/list', {
                headers: { 'Accept': 'application/json' }
            });
            
            const data = await response.json();
            
            if (data && data.warehouses && Array.isArray(data.warehouses)) {
                warehouseSelect.innerHTML = '<option value="">یک انبار را انتخاب کنید...</option>';
                data.warehouses.forEach(warehouse => {
                    const option = document.createElement('option');
                    option.value = warehouse.id;
                    // Format: "نام انبار / شهر" or just "نام انبار"
                    const displayName = warehouse.location 
                        ? `${warehouse.name} / ${warehouse.location}`
                        : warehouse.name;
                    option.textContent = displayName;
                    warehouseSelect.appendChild(option);
                });
            } else {
                warehouseSelect.innerHTML = '<option value="">انباری یافت نشد</option>';
            }
        } catch (error) {
            console.error('Error loading warehouses:', error);
            warehouseSelect.innerHTML = '<option value="">خطا در بارگذاری انبارها</option>';
        }
    }

    // Load sales experts
    async function loadSalesExperts() {
        try {
            const response = await fetch('/admin/users/by-role?role=کارشناس فروش', {
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                }
            });
            const result = await response.json();
            const select = document.getElementById('sales-expert');
            if (select && result.data && result.data.length > 0) {
                select.innerHTML = '<option value="">یک نفر را انتخاب کنید...</option>';
                result.data.forEach(user => {
                    const option = document.createElement('option');
                    option.value = user.id;
                    option.textContent = user.name;
                    select.appendChild(option);
                });
            }
        } catch (error) {
            console.error('Error loading sales experts:', error);
        }
    }

    // Next step button handler (placeholder - you can implement navigation logic here)
    if (nextStep1Btn) {
        nextStep1Btn.addEventListener('click', function() {
            // Add your navigation logic here
            console.log('Next step clicked', state);
        });
    }
});
</script>
@endpush
@endsection