@extends('layouts.customer')

@section('customer-content')
<div class="flex justify-between items-center mb-8">
    <h2 class="text-2xl font-bold">My Refunds</h2>
</div>

<div class="space-y-4">
    @forelse($refunds as $refund)
    <div class="royal-card p-6">
        <div class="flex justify-between items-start">
            <div>
                <a href="{{ route('orders.show', $refund->order->order_number) }}" class="font-semibold text-blue-600 hover:underline">{{ $refund->order->order_number }}</a>
                <p class="text-sm text-gray-500 mt-1">{{ $refund->reason }}</p>
            </div>
            <div class="text-right">
                <p class="text-xl font-bold text-red-600">${{ number_format($refund->amount, 2) }}</p>
                <span class="px-2 py-1 rounded-full text-xs font-semibold
                    @if($refund->status === 'pending') bg-yellow-100 text-yellow-800
                    @elseif($refund->status === 'approved') bg-green-100 text-green-800
                    @else bg-red-100 text-red-800 @endif">
                    {{ ucfirst($refund->status) }}
                </span>
            </div>
        </div>
        <p class="text-xs text-gray-400 mt-3">Requested on {{ $refund->created_at->format('M d, Y') }}</p>
        @if($refund->status === 'approved')
        <p class="text-xs text-green-600 mt-2">Refund will be credited within 5-10 business days</p>
        @endif
        @if($refund->status === 'rejected')
        <p class="text-xs text-red-600 mt-2">{{ Str::limit($refund->notes, 100) }}</p>
        @endif
    </div>
    @empty
    <div class="royal-card p-12 text-center">
        <p class="text-xl text-gray-400 mb-2">No refunds yet</p>
        <p class="text-gray-500">Refund requests will appear here</p>
    </div>
    @endforelse

    @if($refunds->hasPages())
    <div class="mt-4">{{ $refunds->links() }}</div>
    @endif
</div>
@endsection