@php
    $isEditable = $isEditable ?? true;
@endphp
<div class="space-y-6">
    <div class="text-center mb-6">
        <h2 class="text-xl font-semibold text-slate-200 mb-2">ثبت پیشنهادات تأمین‌کنندگان</h2>
        <p class="text-slate-400">برای هر محصول، پیشنهادات تأمین‌کنندگان مختلف را ثبت کنید</p>
    </div>

    @if(isset($purchaseRequest) && $purchaseRequest->items->count() > 0)
        @foreach($purchaseRequest->items as $item)
        <div class="glass p-4 rounded-xl">
            <div class="flex items-center justify-between mb-4">
                <h3 class="text-lg font-medium text-slate-200">
                    {{ $item->product->name }} - {{ number_format($item->quantity, 3) }} {{ $item->unit ?? 'واحد' }}
                </h3>
                @if($isEditable)
                <button type="button" onclick="suggestFromPivot({{ $item->id }})" class="btn-secondary">
                    <span class="text-lg">💡</span>
                    پیشنهاد از داده‌های موجود
                </button>
                @endif
            </div>

            <!-- Add Offer Form -->
            <form class="add-offer-form space-y-4" data-item-id="{{ $item->id }}">
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
                    <div>
                        <label class="block text-sm font-medium text-slate-300 mb-2">تأمین‌کننده *</label>
                        <select name="supplier_id" class="form-select w-full" required {{ !$isEditable ? 'disabled' : '' }}>
                            <option value="">انتخاب کنید</option>
                            @foreach(\App\Models\Supplier::orderBy('name')->get() as $supplier)
                                <option value="{{ $supplier->id }}">{{ $supplier->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    
                    <div>
                        <label class="block text-sm font-medium text-slate-300 mb-2">قیمت (تومان)</label>
                        <input type="text" name="price" 
                               placeholder="0" class="form-input w-full" {{ !$isEditable ? 'disabled' : '' }}>
                    </div>
                    
                    <div>
                        <label class="block text-sm font-medium text-slate-300 mb-2">ارز</label>
                        <select name="currency" class="form-select w-full" {{ !$isEditable ? 'disabled' : '' }}>
                            <option value="تومان">تومان</option>
                            <option value="USD">USD</option>
                            <option value="EUR">EUR</option>
                            <option value="GBP">GBP</option>
                        </select>
                    </div>
                    
                    <div>
                        <label class="block text-sm font-medium text-slate-300 mb-2">مدت تحویل (روز)</label>
                        <input type="number" name="delivery_days" min="0" 
                               placeholder="0" class="form-input w-full" {{ !$isEditable ? 'disabled' : '' }}>
                    </div>
                </div>
                
                <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                    <div>
                        <label class="block text-sm font-medium text-slate-300 mb-2">گرید</label>
                        <input type="text" name="grade" placeholder="گرید محصول" class="form-input w-full" {{ !$isEditable ? 'disabled' : '' }}>
                    </div>
                    
                    <div>
                        <label class="block text-sm font-medium text-slate-300 mb-2">خلوص</label>
                        <input type="text" name="purity" placeholder="درصد خلوص" class="form-input w-full" {{ !$isEditable ? 'disabled' : '' }}>
                    </div>
                    
                    <div>
                        <label class="block text-sm font-medium text-slate-300 mb-2">بسته‌بندی</label>
                        <input type="text" name="packaging" placeholder="نوع بسته‌بندی" class="form-input w-full" {{ !$isEditable ? 'disabled' : '' }}>
                    </div>
                </div>
                
                <div class="flex items-center gap-4">
                    <label class="flex items-center">
                                            <input type="checkbox" name="is_selected" class="form-checkbox mr-2" {{ !$isEditable ? 'disabled' : '' }}>
                    <span class="text-sm text-slate-300">انتخاب این پیشنهاد</span>
                </label>
                
                @if($isEditable)
                <button type="submit" class="btn-primary">
                    <span class="text-lg">➕</span>
                    افزودن پیشنهاد
                </button>
                @endif
                </div>
            </form>

            <!-- Offers List -->
            @if($item->offers->count() > 0)
            <div class="mt-6">
                <h4 class="text-md font-medium text-slate-200 mb-3">پیشنهادات ثبت شده</h4>
                <div class="overflow-x-auto">
                    <table class="w-full text-sm">
                        <thead class="bg-slate-800/30">
                            <tr>
                                <th class="px-3 py-2 text-right text-slate-300">تأمین‌کننده</th>
                                <th class="px-3 py-2 text-right text-slate-300">قیمت</th>
                                <th class="px-3 py-2 text-right text-slate-300">ارز</th>
                                <th class="px-3 py-2 text-right text-slate-300">مدت تحویل</th>
                                <th class="px-3 py-2 text-right text-slate-300">انتخاب شده</th>
                                <th class="px-3 py-2 text-right text-slate-300">عملیات</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-700">
                            @foreach($item->offers as $offer)
                            <tr class="hover:bg-slate-800/30">
                                <td class="px-3 py-2 text-slate-200">{{ $offer->supplier->name }}</td>
                                <td class="px-3 py-2 text-slate-200">{{ $offer->price ? number_format($offer->price) : '-' }}</td>
                                <td class="px-3 py-2 text-slate-200">{{ $offer->currency }}</td>
                                <td class="px-3 py-2 text-slate-200">{{ $offer->delivery_days ?: '-' }}</td>
                                <td class="px-3 py-2">
                                    @if($offer->is_selected)
                                        <span class="text-green-400">✅</span>
                                    @else
                                        <span class="text-slate-500">-</span>
                                    @endif
                                </td>
                                <td class="px-3 py-2">
                                    @if($isEditable)
                                    <button type="button" onclick="deleteOffer({{ $offer->id }})" 
                                            class="text-red-400 hover:text-red-300">
                                        <span class="text-lg">🗑️</span>
                                    </button>
                                    @else
                                    <span class="text-slate-500 text-sm">غیرقابل ویرایش</span>
                                    @endif
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
            @endif
        </div>
        @endforeach
    @else
        <div class="text-center py-12 text-slate-400">
            <div class="text-4xl mb-2">📦</div>
            <p>ابتدا باید محصولاتی اضافه کنید.</p>
            <p class="text-sm mt-1">به مرحله قبل برگردید و محصولات را اضافه کنید.</p>
        </div>
    @endif
</div>

@push('styles')
<style>
    .form-checkbox {
        @apply rounded border-slate-600 bg-slate-800 text-blue-600 focus:ring-blue-500 focus:ring-offset-slate-800;
    }
</style>
@endpush

@push('scripts')
<script>
// Add offer form submission
document.querySelectorAll('.add-offer-form').forEach(form => {
    form.addEventListener('submit', function(e) {
        e.preventDefault();
        
        const itemId = this.dataset.itemId;
        const formData = new FormData(this);
        
        // Convert price to numeric value before sending
        const priceInput = this.querySelector('input[name="price"]');
        if (priceInput && priceInput.value) {
            const numericPrice = window.priceFormatter ? window.priceFormatter.getNumericValue(priceInput) : priceInput.value.replace(/[^\d.]/g, '');
            formData.set('price', numericPrice);
        }
        
        fetch(`/admin/purchase-requests/{{ $purchaseRequest->id ?? 'PR_ID' }}/items/${itemId}/offers`.replace('PR_ID', '{{ $purchaseRequest->id ?? "" }}'), {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Accept': 'application/json',
                'Content-Type': 'application/json',
            },
            body: JSON.stringify(Object.fromEntries(formData)),
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                alert(data.message);
                window.location.reload();
            } else {
                alert('خطا: ' + data.message);
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('خطا در ارتباط با سرور');
        });
    });
});

function suggestFromPivot(itemId) {
    fetch(`/admin/purchase-requests/{{ $purchaseRequest->id ?? 'PR_ID' }}/items/${itemId}/offers/suggest`.replace('PR_ID', '{{ $purchaseRequest->id ?? "" }}'), {
        headers: {
            'Accept': 'application/json',
        },
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            // Find the form for this item
            const form = document.querySelector(`[data-item-id="${itemId}"]`);
            if (form && data.suggestions && data.suggestions.length > 0) {
                // Show suggestions modal or auto-fill the first suggestion
                const suggestion = data.suggestions[0];
                
                // Auto-fill the form with the first suggestion
                form.querySelector('select[name="supplier_id"]').value = suggestion.supplier_id;
                const priceInput = form.querySelector('input[name="price"]');
                if (suggestion.price) {
                    priceInput.value = window.priceFormatter ? window.priceFormatter.formatDisplayValue(suggestion.price) : suggestion.price;
                }
                form.querySelector('select[name="currency"]').value = suggestion.currency || 'تومان';
                form.querySelector('input[name="grade"]').value = suggestion.grade || '';
                form.querySelector('input[name="purity"]').value = suggestion.purity || '';
                form.querySelector('input[name="packaging"]').value = suggestion.packaging || '';
                
                alert(`پیشنهاد از ${suggestion.supplier_name} بارگذاری شد.`);
            } else {
                alert(data.message);
            }
        } else {
            alert('خطا: ' + data.message);
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('خطا در ارتباط با سرور');
    });
}

function deleteOffer(offerId) {
    if (confirm('آیا از حذف این پیشنهاد اطمینان دارید؟')) {
        fetch(`/admin/purchase-requests/{{ $purchaseRequest->id ?? 'PR_ID' }}/items/{{ $item->id ?? 'ITEM_ID' }}/offers/${offerId}`.replace('PR_ID', '{{ $purchaseRequest->id ?? "" }}').replace('ITEM_ID', '{{ $item->id ?? "" }}'), {
            method: 'DELETE',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Accept': 'application/json',
            },
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                alert(data.message);
                window.location.reload();
            } else {
                alert('خطا: ' + data.message);
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('خطا در ارتباط با سرور');
        });
    }

    // Add event listener for supplier selection change
    document.addEventListener('change', function(e) {
        if (e.target.name === 'supplier_id') {
            // Call populateSupplierReferenceList when supplier changes
            if (typeof populateSupplierReferenceList === 'function') {
                populateSupplierReferenceList();
            }
        }
    });
}
</script>
@endpush