@extends('layouts.admin')

@section('page-title', 'Seller Payouts')

@section('content')
<div class="space-y-6">
    {{-- Header --}}
    <div>
        <h2 class="text-2xl font-bold text-gray-900">Seller Payouts</h2>
        <p class="text-gray-500 mt-1">You have total {{ $totalPayouts }} payouts</p>
    </div>

    {{-- Status Filter Tabs --}}
    <div class="bg-white rounded-xl shadow-sm border overflow-hidden">
        <div class="px-6 py-4 border-b">
            <nav class="flex flex-wrap gap-2">
                <a href="{{ route('admin.vendors.payouts') }}" class="px-4 py-2 rounded-lg text-sm font-medium transition {{ !$status ? 'bg-indigo-600 text-white' : 'text-gray-600 hover:bg-gray-100' }}">
                    All <span class="ml-1 px-2 py-0.5 bg-white/20 rounded-full text-xs">{{ $totalPayouts }}</span>
                </a>
                <a href="{{ route('admin.vendors.payouts') }}/processed" class="px-4 py-2 rounded-lg text-sm font-medium transition {{ $status === 'processed' ? 'bg-indigo-600 text-white' : 'text-gray-600 hover:bg-gray-100' }}">
                    Processed <span class="ml-1 px-2 py-0.5 bg-white/20 rounded-full text-xs">{{ $counts['processed'] ?? 0 }}</span>
                </a>
                <a href="{{ route('admin.vendors.payouts') }}/accepted" class="px-4 py-2 rounded-lg text-sm font-medium transition {{ $status === 'accepted' ? 'bg-indigo-600 text-white' : 'text-gray-600 hover:bg-gray-100' }}">
                    Accepted <span class="ml-1 px-2 py-0.5 bg-white/20 rounded-full text-xs">{{ $counts['accepted'] ?? 0 }}</span>
                </a>
                <a href="{{ route('admin.vendors.payouts') }}/pending" class="px-4 py-2 rounded-lg text-sm font-medium transition {{ $status === 'pending' ? 'bg-indigo-600 text-white' : 'text-gray-600 hover:bg-gray-100' }}">
                    Pending <span class="ml-1 px-2 py-0.5 bg-white/20 rounded-full text-xs">{{ $counts['pending'] ?? 0 }}</span>
                </a>
                <a href="{{ route('admin.vendors.payouts') }}/rejected" class="px-4 py-2 rounded-lg text-sm font-medium transition {{ $status === 'rejected' ? 'bg-indigo-600 text-white' : 'text-gray-600 hover:bg-gray-100' }}">
                    Rejected <span class="ml-1 px-2 py-0.5 bg-white/20 rounded-full text-xs">{{ $counts['rejected'] ?? 0 }}</span>
                </a>
                <a href="{{ route('admin.vendors.payouts') }}/canceled" class="px-4 py-2 rounded-lg text-sm font-medium transition {{ $status === 'canceled' ? 'bg-indigo-600 text-white' : 'text-gray-600 hover:bg-gray-100' }}">
                    Canceled <span class="ml-1 px-2 py-0.5 bg-white/20 rounded-full text-xs">{{ $counts['canceled'] ?? 0 }}</span>
                </a>
            </nav>
        </div>

        {{-- Table --}}
        <div class="overflow-x-auto">
            <table class="w-full text-sm">
                <thead class="bg-gray-50 border-b">
                    <tr>
                        <th class="text-left px-6 py-3 font-medium text-gray-500 w-12">#</th>
                        <th class="text-left px-6 py-3 font-medium text-gray-500">Seller</th>
                        <th class="text-left px-6 py-3 font-medium text-gray-500">Amount</th>
                        <th class="text-left px-6 py-3 font-medium text-gray-500">Message</th>
                        <th class="text-left px-6 py-3 font-medium text-gray-500">Payment By</th>
                        <th class="text-left px-6 py-3 font-medium text-gray-500">Payment To</th>
                        <th class="text-left px-6 py-3 font-medium text-gray-500">Payment From</th>
                        <th class="text-left px-6 py-3 font-medium text-gray-500">Status</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-100">
                    @forelse($payouts as $index => $payout)
                    <tr class="hover:bg-gray-50">
                        <td class="px-6 py-4 text-gray-500">{{ $payouts->firstItem() + $index }}</td>
                        <td class="px-6 py-4">
                            <a href="{{ route('admin.vendors.show', $payout->vendor) }}" class="font-medium text-indigo-600 hover:text-indigo-800">{{ $payout->vendor->name }}</a>
                        </td>
                        <td class="px-6 py-4 font-semibold">${{ number_format($payout->amount, 2) }}</td>
                        <td class="px-6 py-4 text-gray-600 max-w-xs truncate">{{ $payout->notes ?: '-' }}</td>
                        <td class="px-6 py-4 capitalize">{{ $payout->processor?->name ?? 'admin' }}</td>
                        <td class="px-6 py-4">
                            <span class="px-2 py-1 bg-gray-100 rounded text-xs capitalize">{{ $payout->payment_method ?? 'cash' }}</span>
                        </td>
                        <td class="px-6 py-4 capitalize">{{ $payout->processor?->name ?? 'admin' }}</td>
                        <td class="px-6 py-4">
                            @php
                                $statusColors = [
                                    'processed' => 'text-gray-400',
                                    'accepted' => 'text-green-600',
                                    'pending' => 'text-amber-600',
                                    'rejected' => 'text-red-600',
                                    'canceled' => 'text-red-600',
                                ];
                            @endphp
                            <span class="font-medium {{ $statusColors[$payout->status] ?? 'text-gray-500' }}">
                                {{ ucfirst($payout->status) }}
                            </span>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="8" class="px-6 py-12 text-center text-gray-400">
                            <svg class="w-12 h-12 mx-auto mb-3 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M2.25 18L9 11.25l4.306 4.307a11.95 11.95 0 015.814-5.519l2.74-1.22m0 0l-5.94-2.28m5.94 2.28l-2.28 5.941"/></svg>
                            No payouts found
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        {{-- Pagination --}}
        @if($payouts->hasPages())
        <div class="px-6 py-4 border-t border-gray-200">
            {{ $payouts->links() }}
        </div>
        @endif
    </div>
</div>
@endsection