@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') . '.edit', $product) }}" class="px-4 py-2 bg-yellow-600 text-white rounded-lg hover:bg-yellow-700 transition" style="font-size: 12px;">
                ویرایش محصول
            </a>
            <a href="{{ route(($routePrefix ? $routePrefix . '.products' : 'admin.products') . '.index') }}" class="px-4 py-2 bg-slate-600 text-white rounded-lg hover:bg-slate-700 transition" style="font-size: 12px;">
                بازگشت به لیست
            </a>
        </div>
    </header>

    <!-- Product Overview Cards -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
        <!-- Basic Info Card -->
        <div class="glass rounded-xl p-6">
            <div class="flex items-center gap-3 mb-4">
                <div class="w-10 h-10 bg-blue-500/20 rounded-lg flex items-center justify-center">
                    <svg class="w-5 h-5 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                    </svg>
                </div>
                <h3 class="text-lg font-semibold text-slate-200">اطلاعات کلی</h3>
            </div>
            <div class="space-y-2 text-sm">
                <div class="flex justify-between">
                    <span class="text-slate-400">نام:</span>
                    <span class="text-slate-200">{{ $product->name ?: '—' }}</span>
                </div>
                <div class="flex justify-between">
                    <span class="text-slate-400">برند:</span>
                    <span class="text-slate-200">{{ $product->brand ?: '—' }}</span>
                </div>
                <div class="flex justify-between">
                    <span class="text-slate-400">کشور:</span>
                    <span class="text-slate-200">{{ $product->country ?: '—' }}</span>
                </div>
                <div class="flex justify-between">
                    <span class="text-slate-400">CAS:</span>
                    <span class="text-slate-200">{{ $product->cas_no ?: '—' }}</span>
                </div>
            </div>
        </div>

        <!-- Technical Specs Card -->
        <div class="glass rounded-xl p-6">
            <div class="flex items-center gap-3 mb-4">
                <div class="w-10 h-10 bg-green-500/20 rounded-lg flex items-center justify-center">
                    <svg class="w-5 h-5 text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                    </svg>
                </div>
                <h3 class="text-lg font-semibold text-slate-200">مشخصات فنی</h3>
            </div>
            <div class="space-y-2 text-sm">
                <div class="flex justify-between">
                    <span class="text-slate-400">واحد:</span>
                    <span class="text-slate-200">{{ $product->unit ?: '—' }}</span>
                </div>
                <div class="flex justify-between">
                    <span class="text-slate-400">خلوص:</span>
                    <span class="text-slate-200">{{ $product->purity ?: '—' }}</span>
                </div>
                <div class="flex justify-between">
                    <span class="text-slate-400">گرید:</span>
                    <span class="text-slate-200">{{ $product->grade ?: '—' }}</span>
                </div>
                <div class="flex justify-between">
                    <span class="text-slate-400">وزن:</span>
                    <span class="text-slate-200">{{ $product->weight ?: '—' }}</span>
                </div>
            </div>
        </div>

        <!-- Suppliers Card -->
        <div class="glass rounded-xl p-6">
            <div class="flex items-center gap-3 mb-4">
                <div class="w-10 h-10 bg-purple-500/20 rounded-lg flex items-center justify-center">
                    <svg class="w-5 h-5 text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path>
                    </svg>
                </div>
                <h3 class="text-lg font-semibold text-slate-200">تامین‌کنندگان</h3>
            </div>
            <div class="text-center">
                <div class="text-3xl font-bold text-purple-400 mb-2">{{ $product->suppliers->count() }}</div>
                <p class="text-slate-400 text-sm">تامین‌کننده فعال</p>
            </div>
        </div>

        <!-- Price Card -->
        <div class="glass rounded-xl p-6">
            <div class="flex items-center gap-3 mb-4">
                <div class="w-10 h-10 bg-yellow-500/20 rounded-lg flex items-center justify-center">
                    <svg class="w-5 h-5 text-yellow-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1"></path>
                    </svg>
                </div>
                <h3 class="text-lg font-semibold text-slate-200">قیمت</h3>
            </div>
            <div class="text-center">
                @if($product->price)
                    <div class="text-2xl font-bold text-yellow-400 mb-2">{{ number_format($product->price) }} تومان</div>
                @else
                    <div class="text-2xl font-bold text-slate-400 mb-2">—</div>
                @endif
                <p class="text-slate-400 text-sm">آخرین قیمت</p>
            </div>
        </div>
    </div>

    <!-- Detailed Information -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <!-- Product Details -->
        <div class="glass rounded-xl p-6">
            <h3 class="text-xl font-semibold text-slate-200 mb-6">جزئیات محصول</h3>
            <div class="space-y-4">
                <div>
                    <label class="block text-sm font-medium text-slate-400 mb-1">توضیحات</label>
                    <p class="text-slate-200 bg-slate-800/50 rounded-lg p-3 min-h-[100px]" style="font-size: 12px;">
                        {{ $product->description ?: 'توضیحاتی ثبت نشده است.' }}
                    </p>
                </div>
                
                <div class="grid grid-cols-2 gap-4">
                    <div>
                        <label class="block text-sm font-medium text-slate-400 mb-1">واردکننده</label>
                        <p class="text-slate-200">{{ $product->importer ?: '—' }}</p>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-slate-400 mb-1">بسته‌بندی</label>
                        <p class="text-slate-200">{{ $product->default_packaging ?: '—' }}</p>
                    </div>
                </div>

                @if($product->analysis_sheet)
                <div>
                    <label class="block text-sm font-medium text-slate-400 mb-1">برگه آنالیز</label>
                    <a href="{{ Storage::url($product->analysis_sheet) }}" target="_blank" class="inline-flex items-center gap-2 text-blue-400 hover:text-blue-300 transition" style="font-size: 12px;margin-top: 12px;">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
                        </svg>
                        مشاهده برگه آنالیز
                    </a>
                </div>
                @endif
            </div>
        </div>

        <!-- Suppliers List -->
        <div class="glass rounded-xl p-6">
            <h3 class="text-xl font-semibold text-slate-200 mb-6">تامین‌کنندگان</h3>
            @if($product->suppliers->count() > 0)
                <div class="space-y-4">
                    @foreach($product->suppliers as $supplier)
                        <div class="bg-slate-800/50 rounded-lg p-4">
                            <div class="flex items-center justify-between mb-3">
                                <h4 class="font-semibold text-slate-200">{{ $supplier->name }}</h4>
                                @if($supplier->pivot->price)
                                    <span class="text-yellow-400 font-medium">{{ number_format($supplier->pivot->price) }} تومان</span>
                                @endif
                            </div>
                            <div class="grid grid-cols-2 gap-2 text-sm">
                                @if($supplier->pivot->brand)
                                    <div><span class="text-slate-400">برند:</span> <span class="text-slate-200">{{ $supplier->pivot->brand }}</span></div>
                                @endif
                                @if($supplier->pivot->country)
                                    <div><span class="text-slate-400">کشور:</span> <span class="text-slate-200">{{ $supplier->pivot->country }}</span></div>
                                @endif
                                @if($supplier->pivot->grade)
                                    <div><span class="text-slate-400">گرید:</span> <span class="text-slate-200">{{ $supplier->pivot->grade }}</span></div>
                                @endif
                                @if($supplier->pivot->purity)
                                    <div><span class="text-slate-400">خلوص:</span> <span class="text-slate-200">{{ $supplier->pivot->purity }}</span></div>
                                @endif
                            </div>
                            @if($supplier->pivot->last_quoted_at)
                                <div class="mt-2 text-xs text-slate-400">
                                    آخرین استعلام: {{ \Carbon\Carbon::parse($supplier->pivot->last_quoted_at)->format('Y/m/d') }}
                                </div>
                            @endif
                        </div>
                    @endforeach
                </div>
            @else
                <div class="text-center py-8">
                    <svg class="w-12 h-12 text-slate-400 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path>
                    </svg>
                    <p class="text-slate-400">تامین‌کننده‌ای ثبت نشده است</p>
                </div>
            @endif
        </div>
    </div>

    <!-- Analysis Sheet Section -->
    @if($product->analysis_sheet)
    <div class="glass rounded-xl p-6" data-analysis-section>
        <h3 class="text-xl font-semibold text-slate-200 mb-6 flex items-center gap-2">
            <svg class="w-6 h-6 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
            </svg>
            فایل انالیز محصول
        </h3>
        <div class="bg-slate-800/50 rounded-lg p-4 border border-slate-600">
            <div class="flex items-center justify-between">
                <div class="flex items-center gap-4">
                    <div class="w-12 h-12 bg-blue-500/20 rounded-lg flex items-center justify-center">
                        <svg class="w-6 h-6 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                        </svg>
                    </div>
                    <div>
                        <p class="text-slate-200 font-medium text-lg">{{ basename($product->analysis_sheet) }}</p>
                        <p class="text-slate-400 text-sm">فایل انالیز محصول</p>
                    </div>
                </div>
                <div class="flex gap-2">
                    <a href="{{ Storage::url($product->analysis_sheet) }}" target="_blank" 
                       class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition flex items-center gap-2" style="font-size: 12px;">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
                        </svg>
                        مشاهده فایل
                    </a>
                    <a href="{{ Storage::url($product->analysis_sheet) }}" download="{{ basename($product->analysis_sheet) }}" 
                       class="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition flex items-center gap-2" style="font-size: 12px;">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                        </svg>
                        دانلود فایل
                    </a>
                    <button onclick="deleteAnalysisFile({{ $product->id }})" 
                            class="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition flex items-center gap-2" style="font-size: 12px;">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
                        </svg>
                        حذف فایل
                    </button>
                </div>
            </div>
        </div>
    </div>
    @endif

    <!-- System Information -->
    <div class="glass rounded-xl p-6">
        <h3 class="text-xl font-semibold text-slate-200 mb-6">اطلاعات سیستم</h3>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
            <div>
                <label class="block text-sm font-medium text-slate-400 mb-1">تاریخ ایجاد</label>
                <p class="text-slate-200" style="font-size: 13px;margin-top: 18px;">{{ $product->created_at->format('Y/m/d H:i') }}</p>
            </div>
            <div>
                <label class="block text-sm font-medium text-slate-400 mb-1">آخرین ویرایش</label>
                <p class="text-slate-200" style="font-size: 13px;margin-top: 18px;">{{ $product->updated_at->format('Y/m/d H:i') }}</p>
            </div>
            <div>
                <label class="block text-sm font-medium text-slate-400 mb-1">وضعیت</label>
                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium {{ $product->inStock ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800' }}">
                    {{ $product->inStock ? 'موجود' : 'ناموجود' }}
                </span>
            </div>
        </div>
    </div>
</div>
<style>.glass { background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, 0.1); }</style>

@include('admin.suppliers.partials.pivot_form', [
    'title' => 'افزودن تأمین‌کننده به محصول',
    'action' => '',              // Will be set dynamically by JavaScript
    'method' => 'POST',
    'showSupplierSelect' => true,
    'showProductSelect' => false,
    'suppliers' => $suppliersList ?? [],
    'products' => [],
    'pivot' => null
])

@push('scripts')
<script>
// Delete analysis file function
function deleteAnalysisFile(productId) {
    if (!confirm('آیا مطمئن هستید که می‌خواهید فایل انالیز را حذف کنید؟')) {
        return;
    }

    fetch(`/admin/products/${productId}/analysis-file`, {
        method: 'DELETE',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
            'Content-Type': 'application/json',
            'Accept': 'application/json'
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            // Hide the analysis file section
            const analysisSection = document.querySelector('[data-analysis-section]');
            if (analysisSection) {
                analysisSection.style.display = 'none';
            }
            
            // Show success message
            alert('فایل انالیز با موفقیت حذف شد');
            
            // Reload the page to update the UI
            window.location.reload();
        } else {
            alert('خطا در حذف فایل: ' + (data.message || 'خطای نامشخص'));
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('خطا در حذف فایل');
    });
}

function openEditModal(productId, supplierId) {
    // Open the modal for editing
    const modal = document.getElementById('pivot-modal');
    const form = modal?.querySelector('form');
    if (!modal || !form) return;
    
    // Show modal
    modal.classList.remove('hidden');
    
    // Set form action for editing
    form.action = `/admin/products/${productId}/suppliers/${supplierId}`;
    form.method = 'PUT';
    
    // TODO: Populate form with existing data via AJAX or pass data from the button
    // For now, redirect to a proper edit page
    window.location.href = `/admin/products/${productId}/suppliers/${supplierId}/edit`;
}

// Close modal function
function closePivotModal() {
    const modal = document.getElementById('pivot-modal');
    if (modal) {
        modal.classList.add('hidden');
    }
}

// Close modal when clicking outside
document.addEventListener('click', function(e) {
    const modal = document.getElementById('pivot-modal');
    if (e.target === modal) {
        closePivotModal();
    }
});

// Close modal on escape key
document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape') {
        closePivotModal();
    }
});
</script>
@endpush
@endsection