@extends('layouts.panel')

@section('title', 'مشاهده درخواست نمونه - منیجینو ابزار برای مدیریت خرید و فروش مواد شیمیایی ابزار برای مدیریت خرید و فروش مواد شیمیایی')

@section('content')
<div class="container mx-auto px-4 py-6">
    <div class="max-w-4xl mx-auto">
        <!-- Header -->
        <div class="mb-8">
            <div class="flex items-center justify-between">
                <div>
                    <h1 class="text-3xl font-bold text-white mb-2">مشاهده درخواست نمونه</h1>
                    <p class="text-slate-400">جزئیات درخواست نمونه #{{ $sample->id }}</p>
                </div>
                <div class="flex items-center gap-3">
                    <a 
                        href="{{ route('sales.samples.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>
                    @can('update', $sample)
                        <a 
                            href="{{ route('sales.samples.edit', $sample) }}" 
                            class="px-6 py-3 bg-yellow-600 hover:bg-yellow-700 text-white rounded-xl transition-all duration-200 hover:shadow-lg"
                        >
                            <i class="fas fa-edit ml-2"></i>
                            ویرایش
                        </a>
                    @endcan
                </div>
            </div>
        </div>

        <!-- Sample Details Card -->
        <div class="glass rounded-2xl p-6">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <!-- Basic Information -->
                <div class="space-y-4">
                    <h3 class="text-lg font-semibold text-slate-200 border-b border-slate-700 pb-2">اطلاعات پایه</h3>
                    
                    <div>
                        <label class="block text-sm font-medium text-slate-400">نام محصول:</label>
                        <p class="text-slate-200 font-medium">{{ $sample->product_name }}</p>
                    </div>
                    
                    <div>
                        <label class="block text-sm font-medium text-slate-400">شرکت مبدا/مقصد:</label>
                        <p class="text-slate-200 font-medium">{{ $sample->company_name }}</p>
                    </div>
                    
                    <div>
                        <label class="block text-sm font-medium text-slate-400">نماینده فروش:</label>
                        <p class="text-slate-200 font-medium">{{ $sample->sales_person_name }}</p>
                    </div>
                    
                    <div>
                        <label class="block text-sm font-medium text-slate-400">مشتری نهایی:</label>
                        <p class="text-slate-200 font-medium">{{ $sample->customer_name }}</p>
                    </div>
                </div>

                <!-- Technical Details -->
                <div class="space-y-4">
                    <h3 class="text-lg font-semibold text-slate-200 border-b border-slate-700 pb-2">جزئیات فنی</h3>
                    
                    <div>
                        <label class="block text-sm font-medium text-slate-400">مقدار:</label>
                        <p class="text-slate-200 font-medium">{{ $sample->quantity_with_unit }}</p>
                    </div>
                    
                    <div>
                        <label class="block text-sm font-medium text-slate-400">واحد:</label>
                        <p class="text-slate-200 font-medium">{{ $sample->unit }}</p>
                    </div>
                    
                    <div>
                        <label class="block text-sm font-medium text-slate-400">گرید/توضیحات:</label>
                        <p class="text-slate-200 font-medium">{{ $sample->grade ?: 'تعیین نشده' }}</p>
                    </div>
                    
                    <div>
                        <label class="block text-sm font-medium text-slate-400">تاریخ پیگیری:</label>
                        <p class="text-slate-200 font-medium">{{ $sample->jalali_follow_up_date }}</p>
                    </div>
                </div>
            </div>

            <!-- Status and Notes -->
            <div class="mt-8 space-y-4">
                <h3 class="text-lg font-semibold text-slate-200 border-b border-slate-700 pb-2">وضعیت و پیگیری</h3>
                
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label class="block text-sm font-medium text-slate-400">وضعیت:</label>
                        <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium
                            @if($sample->status === 'pending') bg-yellow-100 text-yellow-800
                            @elseif($sample->status === 'approved') bg-green-100 text-green-800
                            @else bg-red-100 text-red-800
                            @endif">
                            {{ $sample->status_label }}
                        </span>
                    </div>
                    
                    <div>
                        <label class="block text-sm font-medium text-slate-400">تاریخ ایجاد:</label>
                        <p class="text-slate-200 font-medium">{{ $sample->jalali_created_at }}</p>
                    </div>
                </div>
                
                @if($sample->notes)
                    <div>
                        <label class="block text-sm font-medium text-slate-400">توضیحات و دلایل:</label>
                        <div class="mt-2 p-4 bg-slate-800/50 rounded-lg border border-slate-700">
                            <p class="text-slate-200">{{ $sample->notes }}</p>
                        </div>
                    </div>
                @endif
            </div>

            <!-- Actions -->
            @if($sample->status === 'pending')
                <div class="mt-8 pt-6 border-t border-slate-700">
                    <h3 class="text-lg font-semibold text-slate-200 mb-4">عملیات پیگیری</h3>
                    <button 
                        onclick="openFollowUpModal({{ $sample->id }})"
                        class="px-6 py-3 bg-indigo-600 hover:bg-indigo-700 text-white rounded-xl transition-all duration-200 hover:shadow-lg"
                    >
                        <i class="fas fa-tasks ml-2"></i>
                        ثبت نتیجه پیگیری
                    </button>
                </div>
            @endif
        </div>
    </div>
</div>

<!-- Follow-up Modal -->
<div id="followUpModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full hidden z-50">
    <div class="relative top-20 mx-auto p-8 w-11/12 md:w-3/4 lg:w-2/3 shadow-2xl rounded-2xl glass animate-fadeIn">
        <div class="flex justify-between items-center pb-3 border-b mb-6 border-slate-800">
            <h3 class="text-xl font-bold text-slate-100">ثبت نتیجه پیگیری <span id="followUpSampleId" class="text-sm text-slate-400"></span></h3>
            <button onclick="closeFollowUpModal()" class="text-gray-400 hover:text-gray-600 text-2xl font-bold">&times;</button>
        </div>
        <div class="mb-6 p-4 glass rounded-lg border border-slate-700 space-y-3">
            <h4 class="text-lg font-semibold text-slate-200 border-b border-slate-600 pb-2 mb-3">خلاصه اطلاعات نمونه</h4>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-x-4 gap-y-2 text-sm">
                <div><span class="font-medium text-slate-400">محصول:</span> <span id="followup-product-name" class="text-slate-200"></span></div>
                <div><span class="font-medium text-slate-400">نماینده فروش:</span> <span id="followup-sales-person" class="text-slate-200"></span></div>
                <div><span class="font-medium text-slate-400">شرکت مبدا/مقصد:</span> <span id="followup-company-name" class="text-slate-200"></span></div>
                <div><span class="font-medium text-slate-400">مشتری نهایی:</span> <span id="followup-customer-name" class="text-slate-200"></span></div>
                <div><span class="font-medium text-slate-400">مقدار و گرید:</span> <span id="followup-quantity-grade" class="text-slate-200"></span></div>
                <div><span class="font-medium text-slate-400">تاریخ پیگیری:</span> <span id="followup-date" class="text-slate-200"></span></div>
            </div>
        </div>
        <form id="followUpForm" class="space-y-4" method="POST">
            @csrf
            <div>
                <label class="block text-sm font-medium text-slate-400 mb-2">نتیجه پیگیری:</label>
                <div class="flex items-center gap-4">
                    <label class="flex items-center">
                        <input type="radio" name="result" value="approved" class="h-4 w-4 text-green-600 focus:ring-green-500" required>
                        <span class="ml-2 text-slate-200">تایید (مشتری خرید انجام می‌دهد)</span>
                    </label>
                    <label class="flex items-center">
                        <input type="radio" name="result" value="rejected" class="h-4 w-4 text-red-600 focus:ring-red-500" required>
                        <span class="ml-2 text-slate-200">عدم تایید (مشتری علاقه‌ای ندارد)</span>
                    </label>
                </div>
            </div>
            <div>
                <label class="block text-sm font-medium text-slate-400">توضیحات و دلایل:</label>
                <textarea name="notes" rows="4" class="mt-1 block w-full rounded-md bg-white/5 border-slate-700 text-slate-200 focus:border-blue-500 focus:ring-blue-500" required></textarea>
            </div>
            <div class="flex justify-end pt-4">
                <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>
    </div>
</div>

@if(session('success'))
    <div class="fixed top-4 right-4 bg-green-500 text-white px-6 py-3 rounded-lg shadow-lg z-50">
        {{ session('success') }}
    </div>
@endif

@if(session('error'))
    <div class="fixed top-4 right-4 bg-red-500 text-white px-6 py-3 rounded-lg shadow-lg z-50">
        {{ session('error') }}
    </div>
@endif
@endsection

@push('styles')
<style>
@keyframes fadeIn { 
    from { opacity: 0; transform: translateY(-20px);} 
    to { opacity: 1; transform: translateY(0);} 
}
.animate-fadeIn { animation: fadeIn 0.3s ease-out forwards; }
.glass { background: rgba(255,255,255,0.05); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,0.1); }

/* Fix sidebar hiding issue */
.fixed.right-0.top-0.z-30.h-full.w-72.glass.border-l.border-slate-800\/60 {
    position: fixed !important;
    right: 0 !important;
    top: 0 !important;
    z-index: 30 !important;
    height: 100vh !important;
    width: 18rem !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Ensure sidebar content is visible */
.fixed.right-0.top-0.z-30.h-full.w-72.glass.border-l.border-slate-800\/60 * {
    visibility: visible !important;
    opacity: 1 !important;
}

/* Prevent any CSS that might hide the sidebar */
.fixed.right-0.top-0.z-30.h-full.w-72.glass.border-l.border-slate-800\/60 {
    animation: none !important;
    transition: none !important;
}
</style>
@endpush

@push('scripts')
<script>
    // Follow-up Modal Functions
    async function openFollowUpModal(sampleId) {
        try {
            const response = await fetch(`/sales/samples/${sampleId}`);
            if (!response.ok) return;
            
            const sample = await response.json();
            
            document.getElementById('followUpSampleId').textContent = ` (ID: ${sample.id} - ${sample.product_name})`;
            document.getElementById('followup-product-name').textContent = sample.product_name || '-';
            document.getElementById('followup-sales-person').textContent = sample.sales_person_name || '-';
            document.getElementById('followup-company-name').textContent = sample.company_name || '-';
            document.getElementById('followup-customer-name').textContent = sample.customer_name || '-';
            document.getElementById('followup-quantity-grade').textContent = `${(sample.quantity ?? '-') + ' ' + (sample.unit || '')}${sample.grade ? ' ('+sample.grade+')' : ''}`;
            document.getElementById('followup-date').textContent = sample.follow_up_date || '-';
            
            const form = document.getElementById('followUpForm');
            form.action = `/sales/samples/${sampleId}/follow-up`;
            
            document.getElementById('followUpModal').classList.remove('hidden');
        } catch (error) {
            console.error('Error opening follow-up modal:', error);
        }
    }

    function closeFollowUpModal() {
        document.getElementById('followUpModal').classList.add('hidden');
        document.getElementById('followUpForm').reset();
    }

    // Handle follow-up form submission
    document.getElementById('followUpForm').addEventListener('submit', async function(e) {
        e.preventDefault();
        
        const formData = new FormData(this);
        const sampleId = this.action.split('/').pop();
        
        try {
            const response = await fetch(this.action, {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    result: formData.get('result'),
                    notes: formData.get('notes'),
                })
            });
            
            if (response.ok) {
                closeFollowUpModal();
                window.location.reload();
            } else {
                const error = await response.json();
                alert('خطا: ' + (error.message || 'خطا در ثبت پیگیری'));
            }
        } catch (error) {
            console.error('Error submitting follow-up:', error);
            alert('خطا در برقراری ارتباط با سرور');
        }
    });

    // Fix sidebar visibility issues
    function ensureSidebarVisibility() {
        const sidebar = document.querySelector('.fixed.right-0.top-0.z-30.h-full.w-72.glass.border-l.border-slate-800\\/60');
        if (sidebar) {
            sidebar.style.position = 'fixed';
            sidebar.style.right = '0';
            sidebar.style.top = '0';
            sidebar.style.zIndex = '30';
            sidebar.style.height = '100vh';
            sidebar.style.width = '18rem';
            sidebar.style.display = 'block';
            sidebar.style.visibility = 'visible';
            sidebar.style.opacity = '1';
        }
    }

    // Run on page load and periodically
    document.addEventListener('DOMContentLoaded', function() {
        ensureSidebarVisibility();
        
        // Check every second to ensure sidebar stays visible
        setInterval(ensureSidebarVisibility, 1000);
        
        // Also check after any DOM changes
        const observer = new MutationObserver(ensureSidebarVisibility);
        observer.observe(document.body, { 
            childList: true, 
            subtree: true,
            attributes: true,
            attributeFilter: ['style', 'class']
        });
    });

    // Auto-hide success/error messages
    document.addEventListener('DOMContentLoaded', function() {
        const messages = document.querySelectorAll('.fixed');
        messages.forEach(message => {
            setTimeout(() => {
                message.remove();
            }, 3000);
        });
    });
</script>
@endpush