@extends('layouts.panel')

@section('title', 'پایگاه دانش محصول: ' . $product->name . ' - منیجینو')
@section('meta_description', 'پایگاه دانش محصول')

@section('content')
<div class="space-y-6">
    <!-- Header -->
    <header class="flex items-center justify-between">
        <div>
            <h1 class="text-2xl font-bold text-slate-100">پایگاه دانش محصول</h1>
            <p class="text-slate-400 mt-1">{{ $product->name }}</p>
        </div>
        <div class="flex gap-3">
            <a href="{{ route(($routePrefix ? $routePrefix . '.products' : 'admin.products') . '.index') }}" style="font-size: 12px;" class="px-4 py-2 bg-slate-600 text-white rounded-lg hover:bg-slate-700 transition">
                بازگشت به لیست
            </a>
        </div>
    </header>

    <!-- Main Content -->
    <div class="grid grid-cols-1 lg:grid-cols-4 gap-6">
        <!-- Left Side - Product Information -->
        <div class="lg:col-span-1">
            <div class="glass rounded-xl p-6 sticky top-6">
                <h3 class="text-lg font-semibold text-slate-200 mb-4">اطلاعات محصول</h3>
                
                <!-- Product Information Table -->
                <div class="overflow-x-auto">
                    <table class="w-full text-sm">
                        <tbody class="space-y-2">
                            <tr class="border-b border-slate-700/50">
                                <td class="py-2 px-0 text-slate-400 font-medium">نام محصول</td>
                                <td class="py-2 px-0 text-slate-200">{{ $product->name ?: '—' }}</td>
                            </tr>
                            @if($product->brand)
                            <tr class="border-b border-slate-700/50">
                                <td class="py-2 px-0 text-slate-400 font-medium">برند</td>
                                <td class="py-2 px-0 text-slate-200">{{ $product->brand }}</td>
                            </tr>
                            @endif
                            @if($product->country)
                            <tr class="border-b border-slate-700/50">
                                <td class="py-2 px-0 text-slate-400 font-medium">کشور</td>
                                <td class="py-2 px-0 text-slate-200">{{ $product->country }}</td>
                            </tr>
                            @endif
                            @if($product->cas_no)
                            <tr class="border-b border-slate-700/50">
                                <td class="py-2 px-0 text-slate-400 font-medium">شماره CAS</td>
                                <td class="py-2 px-0 text-slate-200">{{ $product->cas_no }}</td>
                            </tr>
                            @endif
                            @if($product->unit)
                            <tr class="border-b border-slate-700/50">
                                <td class="py-2 px-0 text-slate-400 font-medium">واحد</td>
                                <td class="py-2 px-0 text-slate-200">{{ $product->unit }}</td>
                            </tr>
                            @endif
                            @if($product->purity)
                            <tr class="border-b border-slate-700/50">
                                <td class="py-2 px-0 text-slate-400 font-medium">خلوص</td>
                                <td class="py-2 px-0 text-slate-200">{{ $product->purity }}</td>
                            </tr>
                            @endif
                            @if($product->grade)
                            <tr class="border-b border-slate-700/50">
                                <td class="py-2 px-0 text-slate-400 font-medium">گرید</td>
                                <td class="py-2 px-0 text-slate-200">{{ $product->grade }}</td>
                            </tr>
                            @endif
                            @if($product->weight)
                            <tr class="border-b border-slate-700/50">
                                <td class="py-2 px-0 text-slate-400 font-medium">وزن</td>
                                <td class="py-2 px-0 text-slate-200">{{ $product->weight }}</td>
                            </tr>
                            @endif
                            @if($product->importer)
                            <tr class="border-b border-slate-700/50">
                                <td class="py-2 px-0 text-slate-400 font-medium">واردکننده</td>
                                <td class="py-2 px-0 text-slate-200">{{ $product->importer }}</td>
                            </tr>
                            @endif
                            @if($product->default_packaging)
                            <tr class="border-b border-slate-700/50">
                                <td class="py-2 px-0 text-slate-400 font-medium">بسته‌بندی</td>
                                <td class="py-2 px-0 text-slate-200">{{ $product->default_packaging }}</td>
                            </tr>
                            @endif
                            @if($product->price)
                            <tr class="border-b border-slate-700/50">
                                <td class="py-2 px-0 text-slate-400 font-medium">قیمت</td>
                                <td class="py-2 px-0 text-slate-200">{{ number_format($product->price) }} تومان</td>
                            </tr>
                            @endif
                            @if($product->inventory)
                            <tr class="border-b border-slate-700/50">
                                <td class="py-2 px-0 text-slate-400 font-medium">موجودی</td>
                                <td class="py-2 px-0 text-slate-200">{{ $product->inventory }}</td>
                            </tr>
                            @endif
                            <tr class="border-b border-slate-700/50">
                                <td class="py-2 px-0 text-slate-400 font-medium">وضعیت</td>
                                <td class="py-2 px-0">
                                    <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium {{ $product->inStock ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800' }}">
                                        {{ $product->inStock ? 'موجود' : 'ناموجود' }}
                                    </span>
                                </td>
                            </tr>
                            <tr class="border-b border-slate-700/50">
                                <td class="py-2 px-0 text-slate-400 font-medium">تاریخ ایجاد</td>
                                <td class="py-2 px-0 text-slate-200">{{ \Morilog\Jalali\Jalalian::fromCarbon($product->created_at)->format('Y/m/d') }}</td>
                            </tr>
                            <tr>
                                <td class="py-2 px-0 text-slate-400 font-medium">آخرین ویرایش</td>
                                <td class="py-2 px-0 text-slate-200">{{ \Morilog\Jalali\Jalalian::fromCarbon($product->updated_at)->format('Y/m/d') }}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                <!-- Experience Form -->
                <div class="mt-6 pt-6 border-t border-slate-700/50">
                    <h4 class="text-md font-semibold text-slate-200 mb-4">ثبت تجربه جدید</h4>
                    <form id="experienceForm" class="space-y-3">
                        @csrf
                        <div>
                            <label for="experienceText" class="block text-sm font-medium text-slate-400 mb-1">تجربه شما</label>
                            <textarea id="experienceText" name="experience" rows="3" required
                                      class="w-full px-3 py-2 bg-slate-700 border border-slate-600 rounded-lg text-slate-200 placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent resize-none"
                                      placeholder="تجربه و نکات کاربردی خود را بنویسید..."></textarea>
                        </div>
                        <button type="submit" 
                                class="w-full px-4 py-2 bg-gradient-to-r from-purple-500 to-pink-500 text-white rounded-lg hover:from-purple-600 hover:to-pink-600 transition-all duration-200 font-medium">
                            ارسال تجربه
                        </button>
                    </form>
                </div>
            </div>
        </div>

        <!-- Right Side - Experience Chat -->
        <div class="lg:col-span-3">
            <div class="glass rounded-xl overflow-hidden">
                <!-- Chat Header -->
                <div class="bg-slate-800/50 px-6 py-4 border-b border-slate-700">
                    <h3 class="text-lg font-semibold text-slate-200">تجربیات تیم فروش</h3>
                    <p class="text-sm text-slate-400">تجربیات و نکات کاربردی از کارشناسان فروش</p>
                </div>

                <!-- Chat Messages -->
                <div id="experiencesContainer" class="h-[500px] overflow-y-auto p-6 space-y-4">
                    @if($experiences->count() > 0)
                        @foreach($experiences as $experience)
                        <div class="flex gap-3">
                            <div class="w-8 h-8 bg-gradient-to-r from-purple-500 to-pink-500 rounded-full flex items-center justify-center flex-shrink-0">
                                <span class="text-white text-sm font-medium">{{ substr($experience->author_name, 0, 1) }}</span>
                            </div>
                            <div class="flex-1">
                                <div class="bg-slate-800/50 rounded-lg p-4">
                                    <div class="flex items-center gap-2 mb-2">
                                        <span class="font-medium text-slate-200">{{ $experience->author_name }}</span>
                                        <span class="text-xs text-slate-400">{{ \Morilog\Jalali\Jalalian::fromCarbon($experience->created_at)->format('Y/m/d H:i') }}</span>
                                    </div>
                                    <p class="text-slate-300 text-sm leading-relaxed">{{ $experience->experience }}</p>
                                </div>
                            </div>
                        </div>
                        @endforeach
                    @else
                        <div class="text-center py-12">
                            <div class="w-16 h-16 bg-slate-800/50 rounded-full flex items-center justify-center mx-auto mb-4">
                                <svg class="w-8 h-8 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path>
                                </svg>
                            </div>
                            <p class="text-slate-400">هنوز تجربه‌ای ثبت نشده است</p>
                            <p class="text-sm text-slate-500 mt-1">اولین تجربه خود را به اشتراک بگذارید</p>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const form = document.getElementById('experienceForm');
    const container = document.getElementById('experiencesContainer');
    
    form.addEventListener('submit', async function(e) {
        e.preventDefault();
        
        const formData = new FormData(form);
        const submitBtn = form.querySelector('button[type="submit"]');
        const originalText = submitBtn.textContent;
        
        // Disable button and show loading
        submitBtn.disabled = true;
        submitBtn.textContent = 'در حال ارسال...';
        
        try {
            const response = await fetch(`{{ route('products.experiences.store', $product) }}`, {
                method: 'POST',
                body: formData,
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                }
            });
            
            const data = await response.json();
            
            if (data.success) {
                // Add new experience to container
                addExperienceToContainer(data.experience);
                
                // Clear form
                form.reset();
                
                // Show success message
                showSuccessMessage('تجربه شما با موفقیت ثبت شد');
            } else {
                throw new Error('خطا در ثبت تجربه');
            }
        } catch (error) {
            console.error('Error:', error);
            showErrorMessage('خطا در ثبت تجربه. لطفاً دوباره تلاش کنید.');
        } finally {
            // Re-enable button
            submitBtn.disabled = false;
            submitBtn.textContent = originalText;
        }
    });
    
    function addExperienceToContainer(experience) {
        // Remove empty state if exists
        const emptyState = container.querySelector('.text-center');
        if (emptyState) {
            emptyState.remove();
        }
        
        // Create new experience element
        const experienceElement = document.createElement('div');
        experienceElement.className = 'flex gap-3';
        experienceElement.innerHTML = `
            <div class="w-8 h-8 bg-gradient-to-r from-purple-500 to-pink-500 rounded-full flex items-center justify-center flex-shrink-0">
                <span class="text-white text-sm font-medium">${experience.author_name.charAt(0)}</span>
            </div>
            <div class="flex-1">
                <div class="bg-slate-800/50 rounded-lg p-4">
                    <div class="flex items-center gap-2 mb-2">
                        <span class="font-medium text-slate-200">${experience.author_name}</span>
                        <span class="text-xs text-slate-400">${experience.created_at}</span>
                    </div>
                    <p class="text-slate-300 text-sm leading-relaxed">${experience.experience}</p>
                </div>
            </div>
        `;
        
        // Add to top of container
        container.insertBefore(experienceElement, container.firstChild);
        
        // Scroll to top
        container.scrollTop = 0;
    }
    
    function showSuccessMessage(message) {
        // Create success notification
        const notification = document.createElement('div');
        notification.className = 'fixed top-4 right-4 bg-green-500 text-white px-4 py-2 rounded-lg shadow-lg z-50';
        notification.textContent = message;
        document.body.appendChild(notification);
        
        // Remove after 3 seconds
        setTimeout(() => {
            notification.remove();
        }, 3000);
    }
    
    function showErrorMessage(message) {
        // Create error notification
        const notification = document.createElement('div');
        notification.className = 'fixed top-4 right-4 bg-red-500 text-white px-4 py-2 rounded-lg shadow-lg z-50';
        notification.textContent = message;
        document.body.appendChild(notification);
        
        // Remove after 5 seconds
        setTimeout(() => {
            notification.remove();
        }, 5000);
    }
});
</script>
@endpush