@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">
            <h1 class="text-3xl font-bold text-white mb-2">ایجاد درخواست خرید جدید</h1>
            <p class="text-slate-400">فرم درخواست خرید محصولات شیمیایی</p>
        </div>

        <!-- Form Card -->
        <div class="bg-slate-800/50 backdrop-blur-sm border border-slate-700 rounded-2xl p-6 shadow-xl">
            <form action="{{ route('sales.purchase_requests.store') }}" method="POST" class="space-y-6">
                @csrf
                
                <!-- Product Information Section -->
                <div class="space-y-4">
                    <h3 class="text-lg font-semibold text-white border-b border-slate-700 pb-2">اطلاعات محصول</h3>
                    
                    <!-- Product Name -->
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div class="relative">
                            <label for="product_name" class="block text-sm font-medium text-slate-300 mb-2">
                                نام محصول <span class="text-red-400">*</span>
                            </label>
                            <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-xl text-white placeholder-slate-400 focus:border-cyan-400 focus:ring-2 focus:ring-cyan-400/20 transition-all duration-200"
                                placeholder="نام محصول را وارد کنید"
                                required
                            >
                            <div id="product_results" class="absolute left-0 right-0 mt-1 bg-slate-900 border border-slate-700 rounded-xl shadow-xl max-h-72 overflow-auto hidden z-40"></div>
                            @error('product_name')
                                <p class="mt-1 text-sm text-red-400">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Product Type -->
                        <div>
                            <label for="product_type" class="block text-sm font-medium text-slate-300 mb-2">
                                نوع محصول <span class="text-red-400">*</span>
                            </label>
                            <select 
                                id="product_type" 
                                name="product_type"
                                class="w-full px-4 py-3 bg-slate-700/50 border border-slate-600 rounded-xl text-white focus:border-cyan-400 focus:ring-2 focus:ring-cyan-400/20 transition-all duration-200"
                                required
                            >
                                <option value="">انتخاب کنید</option>
                                <option value="رسمی" {{ old('product_type') == 'رسمی' ? 'selected' : '' }}>رسمی</option>
                                <option value="غیررسمی" {{ old('product_type') == 'غیررسمی' ? 'selected' : '' }}>غیررسمی</option>
                            </select>
                            @error('product_type')
                                <p class="mt-1 text-sm text-red-400">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>

                    <!-- Quantity and Unit -->
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                        <div>
                            <label for="quantity" class="block text-sm font-medium text-slate-300 mb-2">
                                حجم درخواست <span class="text-red-400">*</span>
                            </label>
                            <input 
                                type="number" 
                                id="quantity" 
                                name="quantity" 
                                value="{{ old('quantity') }}"
                                step="0.001"
                                min="0"
                                class="w-full px-4 py-3 bg-slate-700/50 border border-slate-600 rounded-xl text-white placeholder-slate-400 focus:border-cyan-400 focus:ring-2 focus:ring-cyan-400/20 transition-all duration-200"
                                placeholder="مثال: 1000"
                                required
                            >
                            @error('quantity')
                                <p class="mt-1 text-sm text-red-400">{{ $message }}</p>
                            @enderror
                        </div>

                        <div>
                            <label for="unit" class="block text-sm font-medium text-slate-300 mb-2">
                                واحد اندازه‌گیری
                            </label>
                            <input 
                                type="text" 
                                id="unit" 
                                name="unit" 
                                value="{{ old('unit', 'واحد') }}"
                                class="w-full px-4 py-3 bg-slate-700/50 border border-slate-600 rounded-xl text-white placeholder-slate-400 focus:border-cyan-400 focus:ring-2 focus:ring-cyan-400/20 transition-all duration-200"
                                placeholder="مثال: کیلوگرم، لیتر"
                            >
                            @error('unit')
                                <p class="mt-1 text-sm text-red-400">{{ $message }}</p>
                            @enderror
                        </div>

                        <div>
                            <label for="deadline" class="block text-sm font-medium text-slate-300 mb-2">
                                مهلت زمانی
                            </label>
                            <input 
                                type="text" 
                                id="deadline" 
                                name="deadline" 
                                value="{{ old('deadline') }}"
                                class="w-full px-4 py-3 bg-slate-700/50 border border-slate-600 rounded-xl text-white placeholder-slate-400 focus:border-cyan-400 focus:ring-2 focus:ring-cyan-400/20 transition-all duration-200"
                                placeholder="مثال: 1 هفته، 2 ماه"
                            >
                            @error('deadline')
                                <p class="mt-1 text-sm text-red-400">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>
                </div>

                <!-- Product Details Section -->
                <div class="space-y-4">
                    <h3 class="text-lg font-semibold text-white border-b border-slate-700 pb-2">جزئیات محصول</h3>
                    
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                        <!-- Brand -->
                        <div>
                            <label for="brand" class="block text-sm font-medium text-slate-300 mb-2">
                                برند
                            </label>
                            <input 
                                type="text" 
                                id="brand" 
                                name="brand" 
                                value="{{ old('brand') }}"
                                class="w-full px-4 py-3 bg-slate-700/50 border border-slate-600 rounded-xl text-white placeholder-slate-400 focus:border-cyan-400 focus:ring-2 focus:ring-cyan-400/20 transition-all duration-200"
                                placeholder="نام برند محصول"
                            >
                            @error('brand')
                                <p class="mt-1 text-sm text-red-400">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Packaging -->
                        <div>
                            <label for="packaging" class="block text-sm font-medium text-slate-300 mb-2">
                                نوع بسته‌بندی
                            </label>
                            <input 
                                type="text" 
                                id="packaging" 
                                name="packaging" 
                                value="{{ old('packaging') }}"
                                class="w-full px-4 py-3 bg-slate-700/50 border border-slate-600 rounded-xl text-white placeholder-slate-400 focus:border-cyan-400 focus:ring-2 focus:ring-cyan-400/20 transition-all duration-200"
                                placeholder="مثال: کیسه 25 کیلویی"
                            >
                            @error('packaging')
                                <p class="mt-1 text-sm text-red-400">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Grade -->
                        <div>
                            <label for="grade" class="block text-sm font-medium text-slate-300 mb-2">
                                گرید
                            </label>
                            <input 
                                type="text" 
                                id="grade" 
                                name="grade" 
                                value="{{ old('grade') }}"
                                class="w-full px-4 py-3 bg-slate-700/50 border border-slate-600 rounded-xl text-white placeholder-slate-400 focus:border-cyan-400 focus:ring-2 focus:ring-cyan-400/20 transition-all duration-200"
                                placeholder="مثال: صنعتی، آزمایشگاهی"
                            >
                            @error('grade')
                                <p class="mt-1 text-sm text-red-400">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>
                </div>

                <!-- Additional Information Section -->
                <div class="space-y-4">
                    <h3 class="text-lg font-semibold text-white border-b border-slate-700 pb-2">اطلاعات تکمیلی</h3>
                    
                    <!-- Notes -->
                    <div>
                        <label for="notes" class="block text-sm font-medium text-slate-300 mb-2">
                            توضیحات اضافی
                        </label>
                        <textarea 
                            id="notes" 
                            name="notes" 
                            rows="4"
                            class="w-full px-4 py-3 bg-slate-700/50 border border-slate-600 rounded-xl text-white placeholder-slate-400 focus:border-cyan-400 focus:ring-2 focus:ring-cyan-400/20 transition-all duration-200 resize-none"
                            placeholder="توضیحات، ملاحظات خاص یا اطلاعات تکمیلی...

مشتری خودش قیمت داره ، قیمتش 250,000 تومان
مشتری برند FIC نمیخواد
مشتری برای تولید نان و محصولات بیکری میخواد استفاده کنه"
                        >{{ old('notes') }}</textarea>
                        @error('notes')
                            <p class="mt-1 text-sm text-red-400">{{ $message }}</p>
                        @enderror
                    </div>
                </div>

                <!-- Form Actions -->
                <div class="flex items-center justify-between pt-6 border-t border-slate-700">
                    <a 
                        href="{{ route('sales.purchase_requests.index') }}" 
                        class="px-6 py-3 bg-slate-700 hover:bg-slate-600 text-white rounded-xl transition-all duration-200 hover:shadow-lg"
                        style="font-size: 12px;"
                    >
                        <i class="fas fa-arrow-right ml-2"></i>
                        بازگشت به لیست
                    </a>
                    
                    <button 
                        type="submit" 
                        class="px-8 py-3 bg-gradient-to-r from-cyan-500 to-blue-500 hover:from-cyan-600 hover:to-blue-600 text-white font-medium rounded-xl transition-all duration-200 hover:shadow-lg hover:shadow-cyan-500/25"
                    >
                        <i class="fas fa-save ml-2"></i>
                        ثبت درخواست
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('styles')
<style>
    /* Custom scrollbar for textarea */
    textarea::-webkit-scrollbar {
        width: 8px;
    }
    
    textarea::-webkit-scrollbar-track {
        background: rgba(51, 65, 85, 0.5);
        border-radius: 4px;
    }
    
    textarea::-webkit-scrollbar-thumb {
        background: rgba(34, 211, 238, 0.5);
        border-radius: 4px;
    }
    
    textarea::-webkit-scrollbar-thumb:hover {
        background: rgba(34, 211, 238, 0.7);
    }
</style>
@endpush

@push('scripts')
<script>
    // Form validation enhancement
    document.addEventListener('DOMContentLoaded', function() {
        const form = document.querySelector('form');
        const requiredFields = form.querySelectorAll('[required]');
        
        // Add visual feedback for required fields
        requiredFields.forEach(field => {
            field.addEventListener('blur', function() {
                if (this.value.trim() === '') {
                    this.classList.add('border-red-500');
                } else {
                    this.classList.remove('border-red-500');
                }
            });
        });
        
        // Form submission enhancement
        form.addEventListener('submit', function(e) {
            let hasError = false;
            
            requiredFields.forEach(field => {
                if (field.value.trim() === '') {
                    field.classList.add('border-red-500');
                    hasError = true;
                }
            });
            
            if (hasError) {
                e.preventDefault();
                // Show error message
                const errorDiv = document.createElement('div');
                errorDiv.className = 'fixed top-4 right-4 bg-red-500 text-white px-6 py-3 rounded-lg shadow-lg z-50';
                errorDiv.textContent = 'لطفاً تمام فیلدهای اجباری را تکمیل کنید';
                document.body.appendChild(errorDiv);
                
                setTimeout(() => {
                    errorDiv.remove();
                }, 3000);
            }
        });
    });

    // Live product search for sales create form
    (function(){
        const input = document.getElementById('product_name');
        const results = document.getElementById('product_results');
        if (!input || !results) return;

        let timer = null;
        let lastQuery = '';

        function hideResults(){ results.classList.add('hidden'); results.innerHTML = ''; }
        function showResults(){ results.classList.remove('hidden'); }

        function render(items){
            if (!items || items.length === 0) { hideResults(); return; }
            results.innerHTML = items.map(item => {
                const id = item.id ?? item.value ?? '';
                const name = item.name ?? item.label ?? '';
                return `<button type="button" data-id="${id}" data-name="${name}" class="w-full text-right px-3 py-2 hover:bg-slate-800 transition border-b border-slate-800 last:border-b-0">${name}</button>`;
            }).join('');
            showResults();
        }

        async function search(q){
            try {
                const url = new URL(`{{ route('products.autocomplete') }}`, window.location.origin);
                url.searchParams.set('q', q);
                const res = await fetch(url.toString(), { headers: { 'Accept': 'application/json' } });
                if (!res.ok) throw new Error('network');
                const data = await res.json();
                const items = Array.isArray(data) ? data : (data.data || data.items || data.results || []);
                render(items);
            } catch(e){ hideResults(); }
        }

        input.addEventListener('input', (e) => {
            const q = (e.target.value || '').trim();
            lastQuery = q;
            if (q.length < 2) { hideResults(); return; }
            clearTimeout(timer);
            timer = setTimeout(() => search(q), 250);
        });

        input.addEventListener('focus', () => {
            if (lastQuery.length >= 2 && results.innerHTML.trim() !== '') showResults();
        });

        document.addEventListener('click', (e) => {
            if (!results.contains(e.target) && e.target !== input) hideResults();
        });

        results.addEventListener('click', (e) => {
            const btn = e.target.closest('button[data-id]');
            if (!btn) return;
            const name = btn.getAttribute('data-name') || '';
            input.value = name;
            hideResults();
        });
    })();
</script>
@endpush