@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">
            <div class="flex items-center justify-between">
                <div>
                    <h1 class="text-3xl font-bold text-white mb-2">درخواست‌های نمونه</h1>
                    <p class="text-slate-400">مدیریت درخواست‌های نمونه شما</p>
                </div>
                <div class="flex items-center gap-3">
                    <a 
                        href="{{ route('sales.samples.create') }}" 
                        class="px-6 py-3 bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600 text-white font-medium rounded-xl transition-all duration-200 hover:shadow-lg hover:shadow-purple-500/25"
                    >
                        <i class="fas fa-plus ml-2"></i>
                        ثبت نمونه جدید
                    </a>
                </div>
            </div>
        </div>

        <!-- Data Table -->
        <x-data-table-default 
            title=""
            searchPlaceholder="جستجو در نام محصول، شرکت، نماینده فروش، مشتری و توضیحات..."
            :statusOptions="$statusOptions"
            :itemsPerPageOptions="[5, 10, 25, 50]"
            :currentPage="$samples->currentPage()"
            :totalItems="$samples->total()"
            :itemsPerPage="request('pageSize', 10)"
            currentStatus="{{ request('status', 'all') }}"
            searchQuery="{{ request('search', '') }}"
            sortColumn="created_at"
            sortDirection="desc"
        >
            <x-slot name="thead">
                <tr>
                    <th data-key="id" class="sortable">شناسه</th>
                    <th data-key="product_name" class="sortable">نام محصول</th>
                    <th data-key="company_name" class="sortable">شرکت مبدا/مقصد</th>
                    <th data-key="sales_person_name" class="sortable">نماینده فروش</th>
                    <th data-key="customer_name" class="sortable">مشتری نهایی</th>
                    <th data-key="quantity" class="sortable">مقدار</th>
                    <th data-key="unit" class="sortable">واحد</th>
                    <th data-key="grade" class="sortable">گرید/توضیحات</th>
                    <th data-key="follow_up_date" class="sortable">تاریخ پیگیری</th>
                    <th data-key="status" class="sortable">وضعیت</th>
                    <th data-key="created_at" class="sortable">تاریخ ایجاد</th>
                    <th>عملیات</th>
                </tr>
            </x-slot>
            
            <x-slot name="tbody">
                @forelse($samples as $sample)
                    <tr class="hover:bg-white/5 transition duration-150 ease-in-out">
                        <td>#{{ $sample->id }}</td>
                        <td>{{ $sample->product_name }}</td>
                        <td>{{ $sample->company_name }}</td>
                        <td>{{ $sample->sales_person_name }}</td>
                        <td>{{ $sample->customer_name }}</td>
                        <td>{{ $sample->quantity_with_unit }}</td>
                        <td>{{ $sample->unit }}</td>
                        <td>{{ $sample->grade ?: '-' }}</td>
                        <td>{{ $sample->jalali_follow_up_date }}</td>
                        <td>
                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs 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>
                        </td>
                        <td>{{ $sample->jalali_created_at }}</td>
                        <td>
                            <div class="flex items-center gap-2">
                                @if($sample->status === 'pending')
                                    <button 
                                        onclick="openFollowUpModal({{ $sample->id }})"
                                        class="text-indigo-400 hover:text-indigo-600 transition-colors"
                                        title="پیگیری">
                                        <i class="fas fa-tasks"></i>
                                        پیگیری
                                    </button>
                                @else
                                    <button 
                                        onclick="viewSampleDetails({{ $sample->id }})"
                                        class="text-blue-400 hover:text-blue-600 transition-colors"
                                        title="مشاهده جزئیات">
                                        <i class="fas fa-eye"></i>
                                        مشاهده جزئیات
                                    </button>
                                @endif
                                
                                @can('view', $sample)
                                    <a href="{{ route('sales.samples.show', $sample) }}" 
                                       class="text-blue-400 hover:text-blue-300 transition-colors"
                                       title="مشاهده">
                                        <i class="fas fa-eye"></i>
                                    </a>
                                @endcan
                                
                                @can('update', $sample)
                                    <a href="{{ route('sales.samples.edit', $sample) }}" 
                                       class="text-yellow-400 hover:text-yellow-300 transition-colors"
                                       title="ویرایش">
                                        <i class="fas fa-edit"></i>
                                    </a>
                                @endcan
                                
                                @can('delete', $sample)
                                    <form action="{{ route('sales.samples.destroy', $sample) }}" 
                                          method="POST" 
                                          class="inline"
                                          onsubmit="return confirm('آیا از حذف این درخواست نمونه اطمینان دارید؟')">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" 
                                                class="text-red-400 hover:text-red-300 transition-colors"
                                                title="حذف">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                    </form>
                                @endcan
                            </div>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="12" class="text-center py-8 text-slate-400">
                            <div class="flex flex-col items-center gap-2">
                                <i class="fas fa-flask text-4xl text-slate-600"></i>
                                <p>هنوز درخواست نمونه‌ای ثبت نکرده‌اید</p>
                                <a href="{{ route('sales.samples.create') }}" 
                                   class="text-purple-400 hover:text-purple-300 transition-colors">
                                    اولین درخواست نمونه خود را ثبت کنید
                                </a>
                            </div>
                        </td>
                    </tr>
                @endforelse
            </x-slot>
        </x-data-table-default>
    </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>

<!-- View Notes Modal -->
<div id="viewNotesModal" 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="viewNotesSampleId" class="text-sm text-slate-400"></span></h3>
            <button onclick="closeViewNotesModal()" class="text-gray-400 hover:text-gray-600 text-2xl font-bold">&times;</button>
        </div>
        <div id="viewNotesContent" class="space-y-4"></div>
        <div class="flex justify-end pt-4">
            <button onclick="closeViewNotesModal()" class="px-6 py-2 bg-blue-600 text-white font-medium rounded-xl shadow-lg hover:bg-blue-700 transition">بستن</button>
        </div>
    </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 toast-message">
        {{ 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 toast-message">
        {{ 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;
}

/* Force data table to full width on sales pages */
.data-table-container {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.data-table-controls,
.data-table-card,
.table-wrapper {
    width: 100% !important;
}
</style>
@endpush

@push('scripts')
<script>
    // Handle data table update event
    document.addEventListener('dataTableUpdate', function(event) {
        const urlParams = event.detail;
        window.location.search = urlParams.toString();
    });
    
    // Auto-hide only toast messages, not the sidebar
    document.addEventListener('DOMContentLoaded', function() {
        const messages = document.querySelectorAll('.toast-message');
        messages.forEach(message => {
            setTimeout(() => {
                message.remove();
            }, 3000);
        });
    });

    // 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);
        }
    }

    async function viewSampleDetails(sampleId) {
        try {
            const response = await fetch(`/sales/samples/${sampleId}`);
            if (!response.ok) return;
            
            const sample = await response.json();
            
            const titleSpan = document.getElementById('viewNotesSampleId');
            titleSpan.textContent = ` (ID: ${sample.id} - ${sample.product_name})`;
            
            const statusClass = sample.status === 'approved' ? 'text-green-400' : 'text-red-400';
            const statusText = sample.status === 'approved' ? 'تایید شده' : 'عدم تایید';
            
            const html = `
                <div class="flex flex-col md:flex-row md:space-x-4 md:space-x-reverse space-y-4 md:space-y-0">
                    <div class="md:w-1/2">
                        <p class="text-slate-400">تاریخ ثبت:</p>
                        <p class="font-medium text-slate-200">${sample.created_at || '-'}</p>
                    </div>
                    <div class="md:w-1/2">
                        <p class="text-slate-400">نماینده فروش:</p>
                        <p class="font-medium text-slate-200">${sample.sales_person_name || '-'}</p>
                    </div>
                </div>
                <div>
                    <p class="text-slate-400">وضعیت پیگیری:</p>
                    <p class="font-medium ${statusClass}">${statusText}</p>
                </div>
                <div>
                    <p class="text-slate-400">توضیحات و دلایل:</p>
                    <p class="glass p-4 rounded-xl text-slate-200">${sample.notes || 'توضیحاتی ثبت نشده است.'}</p>
                </div>`;
            
            const container = document.getElementById('viewNotesContent');
            container.innerHTML = html;
            document.getElementById('viewNotesModal').classList.remove('hidden');
        } catch (error) {
            console.error('Error viewing sample details:', error);
        }
    }

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

    function closeViewNotesModal() {
        document.getElementById('viewNotesModal').classList.add('hidden');
    }

    // 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']
        });
    });
</script>
@endpush