@extends('layouts.panel')

@section('title', 'افزودن موجودی جدید')

@section('content')
<main class="w-full">
    <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 class="text-2xl font-bold text-slate-100">افزودن موجودی جدید</h1>
        <a href="{{ route('admin.inventory.index') }}" class="px-6 py-3 bg-gradient-to-r from-gray-600 to-gray-700 hover:from-gray-700 hover:to-gray-800 text-white font-medium rounded-xl transition-all duration-200 transform hover:scale-105 shadow-lg hover:shadow-xl">
            <span>بازگشت</span>
        </a>
    </header>

    <section class="glass rounded-2xl p-6">
        <h2 class="text-xl font-bold mb-6 text-slate-100">فرم ثبت موجودی انبار</h2>
        <form id="inventory-form" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-6 gap-y-5">
            @csrf
            <div>
                <label class="block text-sm font-medium text-slate-400 mb-1">محصول</label>
                <div class="relative">
                    <input type="text" id="inv-product-name" name="product_name" class="block w-full rounded-md bg-white/5 border-slate-700 text-slate-200 shadow-sm" placeholder="نام محصول را وارد کنید" autocomplete="off">
                    <input type="hidden" id="inv-product-id" name="product_id">
                    <div id="product-list" class="absolute z-10 w-full mt-1 rounded-lg shadow-lg overflow-hidden hidden bg-slate-800 border border-slate-600"></div>
                </div>
            </div>
            <div>
                <label class="block text-sm font-medium text-slate-400 mb-1">انبار</label>
                <div class="relative">
                    <input type="text" id="inv-warehouse-name" name="warehouse_name" class="block w-full rounded-md bg-white/5 border-slate-700 text-slate-200 shadow-sm" placeholder="نام انبار را وارد کنید" autocomplete="off">
                    <input type="hidden" id="inv-warehouse-id" name="warehouse_id">
                    <div id="warehouse-list" class="absolute z-10 w-full mt-1 rounded-lg shadow-lg overflow-hidden hidden bg-slate-800 border border-slate-600"></div>
                </div>
            </div>
            <div>
                <label class="block text-sm font-medium text-slate-400 mb-1">شهر</label>
                <div class="relative">
                    <select id="inv-city" name="city" class="block w-full rounded-md bg-white/5 border-slate-700 text-slate-200 shadow-sm">
                        <option value="تهران">تهران</option>
                        <option value="اصفهان" selected>اصفهان</option>
                        <option value="مشهد">مشهد</option>
                        <option value="شیراز">شیراز</option>
                        <option value="تبریز">تبریز</option>
                        <option value="کرج">کرج</option>
                        <option value="اهواز">اهواز</option>
                        <option value="قم">قم</option>
                        <option value="کرمانشاه">کرمانشاه</option>
                        <option value="ارومیه">ارومیه</option>
                        <option value="other">سایر...</option>
                    </select>
                    <input type="text" id="inv-city-other" name="city_other" class="hidden mt-2 block w-full rounded-md bg-white/5 border-slate-700 text-slate-200 shadow-sm" placeholder="نام شهر را وارد کنید">
                </div>
            </div>
            <div>
                <label class="block text-sm font-medium text-slate-400 mb-1">برند</label>
                <input type="text" name="brand" class="block w-full rounded-md bg-white/5 border-slate-700 text-slate-200 shadow-sm" placeholder="برند">
            </div>
            <div>
                <label class="block text-sm font-medium text-slate-400 mb-1">کشور</label>
                <input type="text" name="country" class="block w-full rounded-md bg-white/5 border-slate-700 text-slate-200 shadow-sm" placeholder="کشور">
            </div>
            <div>
                <label class="block text-sm font-medium text-slate-400 mb-1">گرید</label>
                <input type="text" name="grade" class="block w-full rounded-md bg-white/5 border-slate-700 text-slate-200 shadow-sm" placeholder="گرید">
            </div>
            <div>
                <label class="block text-sm font-medium text-slate-400 mb-1">خلوص</label>
                <input type="text" name="purity" class="block w-full rounded-md bg-white/5 border-slate-700 text-slate-200 shadow-sm" placeholder="99.9%">
            </div>
            <div>
                <label class="block text-sm font-medium text-slate-400 mb-1">بچ نامبر</label>
                <input type="text" name="batch_number" class="block w-full rounded-md bg-white/5 border-slate-700 text-slate-200 shadow-sm" placeholder="BN-12345">
            </div>
            <div>
                <label class="block text-sm font-medium text-slate-400 mb-1">مقدار</label>
                <div class="flex rounded-md shadow-sm">
                    <input type="number" step="0.001" name="quantity" class="flex-1 block w-full rounded-r-md bg-white/5 border-slate-700 text-slate-200 focus:border-blue-500 focus:ring-blue-500" placeholder="1000" style="min-width: 200px;">
                    <select name="unit" class="rounded-l-md bg-white/5 border-slate-700 text-slate-200 focus:border-blue-500 focus:ring-blue-500 border-r-0" style="width: 80px;">
                        <option value="kg">kg</option>
                        <option value="g">g</option>
                        <option value="L">L</option>
                        <option value="ml">ml</option>
                        <option value="pcs">pcs</option>
                    </select>
                </div>
            </div>
            <div>
                <label class="block text-sm font-medium text-slate-400 mb-1">بسته‌بندی</label>
                <input type="text" name="packaging" class="block w-full rounded-md bg-white/5 border-slate-700 text-slate-200 shadow-sm" placeholder="کیسه 25 کیلویی">
            </div>
            <div>
                <label class="block text-sm font-medium text-slate-400 mb-1">تاریخ تولید</label>
                <input type="date" name="production_date" class="block w-full rounded-md bg-white/5 border-slate-700 text-slate-200 shadow-sm">
            </div>
            <div>
                <label class="block text-sm font-medium text-slate-400 mb-1">تاریخ انقضا</label>
                <input type="date" name="expiration_date" class="block w-full rounded-md bg-white/5 border-slate-700 text-slate-200 shadow-sm">
            </div>
            <div>
                <label class="block text-sm font-medium text-slate-400 mb-1">تاریخ ورود</label>
                <input type="date" name="entry_date" class="block w-full rounded-md bg-white/5 border-slate-700 text-slate-200 shadow-sm">
            </div>
            <div>
                <label class="block text-sm font-medium text-slate-400 mb-1">تامین‌کننده (اختیاری)</label>
                <input type="number" name="supplier_id" class="block w-full rounded-md bg-white/5 border-slate-700 text-slate-200 shadow-sm" placeholder="ID تامین‌کننده">
            </div>
            <div>
                <label class="block text-sm font-medium text-slate-400 mb-1">قیمت (اختیاری)</label>
                <input type="text" name="price" class="block w-full rounded-md bg-white/5 border-slate-700 text-slate-200 shadow-sm" placeholder="2,500,000">
            </div>
            <div class="col-span-1 md:col-span-2 lg:col-span-3">
                <label class="block text-sm font-medium text-slate-400">توضیحات</label>
                <textarea name="description" rows="3" class="mt-2 block w-full rounded-md bg-white/5 border-slate-700 text-slate-200 shadow-sm" placeholder="توضیحات تکمیلی..."></textarea>
            </div>
            <div class="col-span-1 md:col-span-2 lg:col-span-3 flex justify-end mt-2">
                <button type="submit" class="px-6 py-2 bg-green-600 text-white font-medium rounded-xl shadow-lg hover:bg-green-700 transition">ثبت نهایی موجودی</button>
            </div>
        </form>
    </section>
</main>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', () => {
    const form = document.getElementById('inventory-form');
    const productInput = document.getElementById('inv-product-name');
    const productIdInput = document.getElementById('inv-product-id');
    const productList = document.getElementById('product-list');
    const warehouseInput = document.getElementById('inv-warehouse-name');
    const warehouseIdInput = document.getElementById('inv-warehouse-id');
    const warehouseList = document.getElementById('warehouse-list');
    const citySelect = document.getElementById('inv-city');
    const cityOtherInput = document.getElementById('inv-city-other');

    // Product search functionality
    if (productInput && productList) {
        let productSearchTimer = null;
        
        productInput.addEventListener('input', function() {
            const query = this.value.trim();
            productIdInput.value = '';
            
            clearTimeout(productSearchTimer);
            productSearchTimer = setTimeout(() => {
                if (query.length >= 2) {
                    searchProducts(query);
                } else {
                    hideProductList();
                }
            }, 300);
        });
        
        function searchProducts(query) {
            fetch(`/admin/products/live-search?q=${encodeURIComponent(query)}`)
                .then(response => response.json())
                .then(data => {
                    if (data && data.products) {
                        displayProducts(data.products);
                    } else {
                        hideProductList();
                    }
                })
                .catch(() => hideProductList());
        }
        
        function displayProducts(products) {
            productList.innerHTML = '';
            if (products.length === 0) {
                productList.innerHTML = '<div class="px-4 py-2 text-slate-400 text-sm">محصولی یافت نشد - می‌توانید نام جدید وارد کنید</div>';
            } else {
                products.forEach(product => {
                    const div = document.createElement('div');
                    div.className = 'px-4 py-3 cursor-pointer hover:bg-slate-700 text-slate-200 border-b border-slate-600 last:border-b-0 transition duration-200';
                    div.innerHTML = `
                        <div class="font-medium text-sm">${product.name}</div>
                        <div class="text-xs text-slate-400 mt-1">ID: ${product.id}</div>
                    `;
                    div.addEventListener('click', () => {
                        productInput.value = product.name;
                        productIdInput.value = product.id;
                        hideProductList();
                    });
                    productList.appendChild(div);
                });
            }
            productList.classList.remove('hidden');
        }
        
        function hideProductList() {
            productList.classList.add('hidden');
            productList.innerHTML = '';
        }
        
        // Hide list when clicking outside
        document.addEventListener('click', function(e) {
            if (!productList.contains(e.target) && e.target !== productInput) {
                hideProductList();
            }
        });
    }

    // Warehouse search functionality
    if (warehouseInput && warehouseList) {
        let warehouseSearchTimer = null;
        
        warehouseInput.addEventListener('input', function() {
            const query = this.value.trim();
            warehouseIdInput.value = '';
            
            clearTimeout(warehouseSearchTimer);
            warehouseSearchTimer = setTimeout(() => {
                if (query.length >= 2) {
                    searchWarehouses(query);
                } else {
                    hideWarehouseList();
                }
            }, 300);
        });
        
        function searchWarehouses(query) {
            // Simulate warehouse search - replace with actual API call
            const warehouses = [
                { id: 1, name: 'انبار مرکزی تهران', location: 'تهران' },
                { id: 2, name: 'انبار اصفهان', location: 'اصفهان' },
                { id: 3, name: 'انبار مشهد', location: 'مشهد' },
                { id: 4, name: 'انبار شیراز', location: 'شیراز' },
                { id: 5, name: 'انبار تبریز', location: 'تبریز' }
            ];
            
            const filtered = warehouses.filter(w => 
                w.name.toLowerCase().includes(query.toLowerCase()) ||
                w.location.toLowerCase().includes(query.toLowerCase())
            );
            
            displayWarehouses(filtered);
        }
        
        function displayWarehouses(warehouses) {
            warehouseList.innerHTML = '';
            if (warehouses.length === 0) {
                warehouseList.innerHTML = '<div class="px-4 py-2 text-slate-400 text-sm">انباری یافت نشد</div>';
            } else {
                warehouses.forEach(warehouse => {
                    const div = document.createElement('div');
                    div.className = 'px-4 py-3 cursor-pointer hover:bg-slate-700 text-slate-200 border-b border-slate-600 last:border-b-0 transition duration-200';
                    div.innerHTML = `
                        <div class="font-medium text-sm">${warehouse.name}</div>
                        <div class="text-xs text-slate-400 mt-1">${warehouse.location}</div>
                    `;
                    div.addEventListener('click', () => {
                        warehouseInput.value = warehouse.name;
                        warehouseIdInput.value = warehouse.id;
                        hideWarehouseList();
                    });
                    warehouseList.appendChild(div);
                });
            }
            warehouseList.classList.remove('hidden');
        }
        
        function hideWarehouseList() {
            warehouseList.classList.add('hidden');
            warehouseList.innerHTML = '';
        }
        
        // Hide list when clicking outside
        document.addEventListener('click', function(e) {
            if (!warehouseList.contains(e.target) && e.target !== warehouseInput) {
                hideWarehouseList();
            }
        });
    }
    
    // City management
    if (citySelect && cityOtherInput) {
        citySelect.addEventListener('change', function() {
            if (this.value === 'other') {
                cityOtherInput.classList.remove('hidden');
                cityOtherInput.required = true;
            } else {
                cityOtherInput.classList.add('hidden');
                cityOtherInput.required = false;
                cityOtherInput.value = '';
            }
        });
    }

    if (form) form.addEventListener('submit', (e) => {
        e.preventDefault();
        if (!productInput.value.trim()) { alert('لطفاً نام محصول را وارد کنید.'); return; }
        const fd = new FormData(form);
        if (productIdInput.value) {
            fd.set('product_id', productIdInput.value);
        } else {
            // If no product ID, we'll create a new product
            fd.set('product_name', productInput.value.trim());
            fd.delete('product_id');
        }
        
        // Set default values for empty fields
        if (!fd.get('warehouse_name')) fd.set('warehouse_name', 'انبار اصلی');
        if (!fd.get('city')) fd.set('city', 'اصفهان');
        if (!fd.get('quantity')) fd.set('quantity', '0');
        if (!fd.get('unit')) fd.set('unit', 'عدد');
        
        fetch(`{{ route('admin.inventory.storeInventory') }}`, {
            method: 'POST',
            body: fd,
            headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' },
            credentials: 'same-origin'
        })
        .then(r => r.json())
        .then(j => {
            if (j && j.ok) {
                if (window.showSuccessModalWithAutoClose) {
                    window.showSuccessModalWithAutoClose(j.message);
                } else {
                    alert(j.message);
                }
                form.reset();
                window.location.href = '{{ route("admin.inventory.index") }}';
            } else {
                alert(j.message || 'خطا در ثبت موجودی');
            }
        })
        .catch(() => alert('خطا در ارتباط با سرور'));
    });
});
</script>
@endpush
@endsection