@php
    $order = $getRecord();
    $sellerProfileId = $order?->seller_profile_id;
    
    // Get pagination settings from URL or use default
    $perPage = request()->query('past_orders_per_page', 5);
    $currentPage = request()->query('past_orders_page', 1);
    
    // Get past orders from the same seller
    $pastOrders = $sellerProfileId 
        ? \App\Models\Order::where('seller_profile_id', $sellerProfileId)
            ->where('id', '!=', $order?->id)
            ->with(['sellerProfile', 'shipper', 'city'])
            ->orderBy('id', 'desc')
            ->paginate($perPage, ['*'], 'past_orders_page')
        : collect();
@endphp

<div x-data="{ 
    perPage: {{ $perPage }},
    changePerPage(value) {
        const url = new URL(window.location.href);
        url.searchParams.set('past_orders_per_page', value);
        url.searchParams.set('past_orders_page', 1);
        window.location.href = url.toString();
    }
}" class="space-y-4 w-full">
    
    @if($sellerProfileId && $pastOrders->isNotEmpty())
        <!-- Pagination Controls -->
        <div class="flex items-center justify-between mb-4 w-full">
            <div class="text-sm text-gray-600 dark:text-gray-400">
                Showing {{ $pastOrders->firstItem() }} to {{ $pastOrders->lastItem() }} of {{ $pastOrders->total() }} orders
            </div>
            
            <div class="flex items-center gap-2">
                <label class="text-sm text-gray-600 dark:text-gray-400">Per page:</label>
                <select 
                    x-model="perPage" 
                    @change="changePerPage($event.target.value)"
                    class="rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 text-sm"
                >
                    <option value="5" {{ $perPage == 5 ? 'selected' : '' }}>5</option>
                    <option value="10" {{ $perPage == 10 ? 'selected' : '' }}>10</option>
                    <option value="20" {{ $perPage == 20 ? 'selected' : '' }}>20</option>
                </select>
            </div>
        </div>

        <!-- Orders Table -->
        <div class="w-full overflow-x-auto rounded-lg border border-gray-200 dark:border-gray-700">
            <table class="w-full min-w-full divide-y divide-gray-200 dark:divide-gray-700">
                <thead class="bg-gray-50 dark:bg-gray-800">
                    <tr>
                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                            Order ID
                        </th>
                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                            Customer
                        </th>
                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                            City
                        </th>
                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                            Seller
                        </th>
                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                            Shipper
                        </th>
                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                            Shipper Ref
                        </th>
                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                            Order Status
                        </th>
                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                            Amount Received
                        </th>
                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                            Actions
                        </th>
                    </tr>
                </thead>
                <tbody class="bg-white dark:bg-gray-900 divide-y divide-gray-200 dark:divide-gray-700">
                    @foreach($pastOrders as $pastOrder)
                        <tr class="hover:bg-gray-50 dark:hover:bg-gray-800 transition">
                            <!-- Order ID -->
                            <td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">
                                #{{ $pastOrder->id }}
                            </td>
                            
                            <!-- Customer (name - phone - address) -->
                            <td class="px-4 py-3 text-sm text-gray-900 dark:text-gray-100">
                                <div class="max-w-md">
                                    {{ $pastOrder->customer_name }} - {{ $pastOrder->customer_phone }} - {{ $pastOrder->customer_address }}
                                </div>
                            </td>
                            
                            <!-- City -->
                            <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">
                                {{ $pastOrder->city?->name ?? '-' }}
                            </td>
                            
                            <!-- Seller -->
                            <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">
                                {{ $pastOrder->sellerProfile?->seller_title ?? '-' }}
                            </td>
                            
                            <!-- Shipper -->
                            <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">
                                {{ $pastOrder->shipper?->title ?? '-' }}
                            </td>
                            
                            <!-- Shipper Ref -->
                            <td class="px-4 py-3 text-sm text-primary-600 dark:text-primary-400">
                                @if($pastOrder->shipping_ref)
                                    <div class="max-w-xs break-all">{{ $pastOrder->shipping_ref }}</div>
                                @else
                                    <span class="text-gray-400 dark:text-gray-600">-</span>
                                @endif
                            </td>
                            
                            <!-- Order Status -->
                            <td class="px-4 py-3 whitespace-nowrap text-sm">
                                @php
                                    $statusColors = [
                                        \App\Models\Order::STATUS_PENDING => 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200',
                                        \App\Models\Order::STATUS_CONFIRMED => 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200',
                                        \App\Models\Order::STATUS_READY_TO_PROCESS => 'bg-indigo-100 text-indigo-800 dark:bg-indigo-900 dark:text-indigo-200',
                                        \App\Models\Order::STATUS_READY_TO_SHIP => 'bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200',
                                        \App\Models\Order::STATUS_SHIPPED => 'bg-cyan-100 text-cyan-800 dark:bg-cyan-900 dark:text-cyan-200',
                                        \App\Models\Order::STATUS_DELIVERED => 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200',
                                        \App\Models\Order::STATUS_CANCELLED => 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200',
                                        \App\Models\Order::STATUS_REFUSED_RETURNED => 'bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-200',
                                        \App\Models\Order::STATUS_RETURN_CONFIRM => 'bg-pink-100 text-pink-800 dark:bg-pink-900 dark:text-pink-200',
                                        \App\Models\Order::STATUS_ON_HOLD => 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300',
                                        \App\Models\Order::STATUS_SHIPPER_ADVISE => 'bg-amber-100 text-amber-800 dark:bg-amber-900 dark:text-amber-200',
                                    ];
                                    $statusColor = $statusColors[$pastOrder->status] ?? 'bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-200';
                                @endphp
                                <span class="px-2 py-1 text-xs rounded-full {{ $statusColor }}">
                                    {{ \App\Models\Order::STATUS[$pastOrder->status] ?? 'Unknown' }}
                                </span>
                            </td>
                            
                            <!-- Amount Received -->
                            <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">
                                @php
                                    $readyToPayOptions = \App\Models\Order::READY_TO_PAY_SELLER_OPTIONS;
                                @endphp
                                <span class="px-2 py-1 text-xs rounded {{ $pastOrder->ready_to_pay_seller == 1 ? 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200' : 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200' }}">
                                    {{ $readyToPayOptions[$pastOrder->ready_to_pay_seller] ?? '-' }}
                                </span>
                            </td>
                            
                            <!-- Actions -->
                            <td class="px-4 py-3 whitespace-nowrap text-sm">
                                <a 
                                    href="{{ route('filament.admin.resources.Packages.edit', ['record' => $pastOrder->id]) }}"
                                    class="text-primary-600 hover:text-primary-900 dark:text-primary-400 dark:hover:text-primary-300 font-medium"
                                    target="_blank"
                                >
                                    View
                                </a>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>

        <!-- Pagination Links -->
        @if($pastOrders->hasPages())
            <div class="mt-4 w-full">
                <div class="flex items-center justify-between">
                    <div class="flex-1 flex justify-between sm:hidden">
                        @if($pastOrders->onFirstPage())
                            <span class="px-4 py-2 text-sm text-gray-400 dark:text-gray-600">
                                Previous
                            </span>
                        @else
                            <a href="{{ $pastOrders->previousPageUrl() }}" class="px-4 py-2 text-sm text-primary-600 dark:text-primary-400 hover:text-primary-900 dark:hover:text-primary-300">
                                Previous
                            </a>
                        @endif

                        @if($pastOrders->hasMorePages())
                            <a href="{{ $pastOrders->nextPageUrl() }}" class="ml-3 px-4 py-2 text-sm text-primary-600 dark:text-primary-400 hover:text-primary-900 dark:hover:text-primary-300">
                                Next
                            </a>
                        @else
                            <span class="ml-3 px-4 py-2 text-sm text-gray-400 dark:text-gray-600">
                                Next
                            </span>
                        @endif
                    </div>

                    <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
                        <div>
                            <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
                                @if($pastOrders->onFirstPage())
                                    <span class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-sm font-medium text-gray-400 dark:text-gray-600">
                                        <span class="sr-only">Previous</span>
                                        <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                            <path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
                                        </svg>
                                    </span>
                                @else
                                    <a href="{{ $pastOrders->previousPageUrl() }}" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-sm font-medium text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700">
                                        <span class="sr-only">Previous</span>
                                        <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                            <path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
                                        </svg>
                                    </a>
                                @endif

                                @foreach($pastOrders->getUrlRange(1, $pastOrders->lastPage()) as $page => $url)
                                    @if($page == $pastOrders->currentPage())
                                        <span class="z-10 bg-primary-50 dark:bg-primary-900 border-primary-500 text-primary-600 dark:text-primary-200 relative inline-flex items-center px-4 py-2 border text-sm font-medium">
                                            {{ $page }}
                                        </span>
                                    @else
                                        <a href="{{ $url }}" class="bg-white dark:bg-gray-800 border-gray-300 dark:border-gray-600 text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700 relative inline-flex items-center px-4 py-2 border text-sm font-medium">
                                            {{ $page }}
                                        </a>
                                    @endif
                                @endforeach

                                @if($pastOrders->hasMorePages())
                                    <a href="{{ $pastOrders->nextPageUrl() }}" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-sm font-medium text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700">
                                        <span class="sr-only">Next</span>
                                        <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                            <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
                                        </svg>
                                    </a>
                                @else
                                    <span class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-sm font-medium text-gray-400 dark:text-gray-600">
                                        <span class="sr-only">Next</span>
                                        <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                            <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
                                        </svg>
                                    </span>
                                @endif
                            </nav>
                        </div>
                    </div>
                </div>
            </div>
        @endif
    @elseif(!$sellerProfileId)
        <div class="text-center py-8 text-gray-500 dark:text-gray-400">
            No seller profile associated with this order.
        </div>
    @else
        <div class="text-center py-8 text-gray-500 dark:text-gray-400">
            No other orders found from this seller.
        </div>
    @endif
</div>