@extends('layouts.admin')

@section('title', 'Refund Management')

@section('content')
<div class="py-6">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        {{-- Page Header --}}
        <div class="mb-6">
            <div class="flex justify-between items-start">
                <div>
                    @php
                        $statusLabels = [
                            'pending' => ['title' => 'Pending Refund List', 'count' => $stats['pending'], 'label' => 'Pending Refunds'],
                            'approved' => ['title' => 'Approved Refund List', 'count' => $stats['approved'], 'label' => 'Approved Refunds'],
                            'processed' => ['title' => 'Processed Refund List', 'count' => $stats['processed'], 'label' => 'Processed Refunds'],
                            'rejected' => ['title' => 'Rejected Refund List', 'count' => $stats['rejected'], 'label' => 'Rejected Refunds'],
                        ];
                        $currentStatus = request('status') ?: 'all';
                        $pageTitle = request('status') && isset($statusLabels[request('status')]) ? $statusLabels[request('status')]['title'] : 'Refund Request List';
                        $totalCount = request('status') && isset($statusLabels[request('status')]) ? $statusLabels[request('status')]['count'] : $stats['total'];
                        $statusText = request('status') && isset($statusLabels[request('status')]) ? explode(' ', $statusLabels[request('status')]['label'])[0] : '';
                    @endphp
                    <h2 class="text-2xl font-bold text-gray-900 tracking-tight">{{ $pageTitle }}</h2>
                    <p class="text-sm text-gray-500 mt-1">
                        You have total <span class="font-semibold text-rose-600">{{ $totalCount }}</span> {{ $statusText ? $statusText . ' Refunds' : 'Refunds' }}
                    </p>
                </div>
                <a href="{{ route('admin.refunds.settings') }}" class="inline-flex items-center gap-2 px-4 py-2.5 bg-white border border-gray-200 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors text-sm font-medium">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.281z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
                    Settings
                </a>
            </div>
        </div>

        {{-- Main Card --}}
        <div class="bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden">
            {{-- Card Header --}}
            @if(request('status'))
            <div class="px-6 py-4 border-b border-gray-200 bg-gradient-to-r from-gray-50 to-white">
                <h4 class="text-lg font-semibold text-gray-900">{{ $statusLabels[request('status')]['label'] }}</h4>
            </div>
            @endif
            <div class="border-b border-gray-200 px-6 py-4">
                <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
                    <h4 class="text-lg font-semibold text-gray-900">All Refunds Request</h4>
                    <form method="GET" class="flex flex-wrap items-center gap-3">
                        {{-- Search --}}
                        <div class="flex items-center gap-0">
                            <input type="text" name="search" value="{{ request('search') }}" placeholder="Search" class="px-3 py-2 border border-r-0 border-gray-200 rounded-l-lg text-sm focus:outline-none focus:ring-2 focus:ring-rose-500 focus:border-rose-500 w-56">
                            <button type="submit" class="px-4 py-2 bg-rose-600 text-white rounded-r-lg hover:bg-rose-700 transition-colors text-sm flex items-center gap-1.5">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"/></svg>
                            </button>
                        </div>
                        @if(request('search') || request('status'))
                        <a href="{{ route('admin.refunds.index') }}" class="px-3 py-2 bg-gray-100 text-gray-600 rounded-lg hover:bg-gray-200 transition-colors text-sm flex items-center gap-1.5">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6 18L18 6M6 6l12 12"/></svg>
                            Clear
                        </a>
                        @endif
                    </form>
                </div>
            </div>

            {{-- Table --}}
            <div class="overflow-x-auto">
                <table class="w-full">
                    <thead class="bg-gray-50 border-b border-gray-200">
                        <tr>
                            <th class="text-left py-3.5 px-5 text-xs font-semibold text-gray-500 uppercase tracking-wider">#</th>
                            <th class="text-left py-3.5 px-5 text-xs font-semibold text-gray-500 uppercase tracking-wider">Order Code</th>
                            <th class="text-left py-3.5 px-5 text-xs font-semibold text-gray-500 uppercase tracking-wider">Product</th>
                            <th class="text-left py-3.5 px-5 text-xs font-semibold text-gray-500 uppercase tracking-wider">Shop Name</th>
                            <th class="text-left py-3.5 px-5 text-xs font-semibold text-gray-500 uppercase tracking-wider">Seller Approval</th>
                            <th class="text-left py-3.5 px-5 text-xs font-semibold text-gray-500 uppercase tracking-wider">Admin Approval</th>
                            <th class="text-left py-3.5 px-5 text-xs font-semibold text-gray-500 uppercase tracking-wider">Refund Status</th>
                            <th class="text-right py-3.5 px-5 text-xs font-semibold text-gray-500 uppercase tracking-wider">Options</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-100">
                        @forelse($refunds as $refund)
                        @php
                            $sellerStatus = match($refund->status) {
                                'pending' => '<span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-semibold bg-amber-100 text-amber-700">Pending</span>',
                                'approved' => '<span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-semibold bg-emerald-100 text-emerald-700">Approved</span>',
                                'processed' => '<span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-semibold bg-blue-100 text-blue-700">Processed</span>',
                                'rejected' => '<span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-semibold bg-red-100 text-red-700">Rejected</span>',
                                default => '<span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-semibold bg-gray-100 text-gray-700">N/A</span>',
                            };
                            $adminStatus = match($refund->status) {
                                'pending' => '<span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-semibold bg-gray-100 text-gray-500">Not Reviewed</span>',
                                'approved', 'processed' => '<span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-semibold bg-emerald-100 text-emerald-700">Approved</span>',
                                'rejected' => '<span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-semibold bg-red-100 text-red-700">Rejected</span>',
                                default => '<span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-semibold bg-gray-100 text-gray-500">N/A</span>',
                            };
                        @endphp
                        <tr class="hover:bg-gray-50/50 transition-colors">
                            <td class="py-3.5 px-5">
                                <span class="text-sm text-gray-500">{{ $loop->iteration + ($refunds->currentPage() - 1) * $refunds->perPage() }}</span>
                            </td>
                            <td class="py-3.5 px-5">
                                <a href="{{ route('admin.orders.show', $refund->order->order_number) }}" class="text-sm font-medium text-indigo-600 hover:text-indigo-800">
                                    {{ $refund->order->order_number }}
                                </a>
                            </td>
                            <td class="py-3.5 px-5">
                                @if($refund->orderItem)
                                <span class="text-sm text-gray-900">{{ Str::limit($refund->orderItem->product_name, 30) }}</span>
                                @else
                                <span class="text-sm text-gray-400">N/A</span>
                                @endif
                            </td>
                            <td class="py-3.5 px-5">
                                @if($refund->order->vendor)
                                <span class="text-sm text-gray-700">{{ $refund->order->vendor->name }}</span>
                                @elseif($refund->orderItem?->vendor)
                                <span class="text-sm text-gray-700">{{ $refund->orderItem->vendor->name }}</span>
                                @else
                                <span class="text-sm text-gray-400">Admin</span>
                                @endif
                            </td>
                            <td class="py-3.5 px-5">{!! $sellerStatus !!}</td>
                            <td class="py-3.5 px-5">{!! $adminStatus !!}</td>
                            <td class="py-3.5 px-5">
                                @php
                                    $statusColors = [
                                        'pending' => 'bg-amber-100 text-amber-700',
                                        'approved' => 'bg-emerald-100 text-emerald-700',
                                        'processed' => 'bg-blue-100 text-blue-700',
                                        'rejected' => 'bg-red-100 text-red-700',
                                    ];
                                @endphp
                                <span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-semibold {{ $statusColors[$refund->status] ?? 'bg-gray-100 text-gray-700' }}">
                                    {{ ucfirst($refund->status) }}
                                </span>
                            </td>
                            <td class="py-3.5 px-5 text-right">
                                <a href="{{ route('admin.refunds.show', $refund) }}" class="inline-flex items-center justify-center w-8 h-8 rounded-lg hover:bg-gray-100 transition-colors" title="View Details">
                                    <svg class="w-4 h-4 text-gray-500 hover:text-gray-700" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
                                </a>
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="8" class="py-16 text-center">
                                <svg class="w-16 h-16 mx-auto text-gray-300 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182"/></svg>
                                <p class="text-gray-500 font-medium">No refund requests found</p>
                                <p class="text-sm text-gray-400 mt-1">Refund requests will appear here when customers submit them</p>
                            </td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

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