@extends('admin.layouts.app')

@section('title', 'Order Returns')

@section('content')
    <div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4 mb-8">
        <div>
            <h1 class="text-2xl font-bold text-white tracking-tight">Order Returns</h1>
            <p class="text-slate-400 mt-1">Manage return requests and refunds.</p>
        </div>

        <div class="flex gap-2">
            <form method="GET" class="flex gap-2">
                <select name="status" onchange="this.form.submit()"
                    class="bg-slate-900 border border-slate-700 text-slate-300 text-sm rounded-xl focus:ring-blue-500 focus:border-blue-500 block p-2.5">
                    <option value="">All Statuses</option>
                    <option value="pending" {{ request('status') == 'pending' ? 'selected' : '' }}>Pending</option>
                    <option value="approved" {{ request('status') == 'approved' ? 'selected' : '' }}>Approved</option>
                    <option value="received" {{ request('status') == 'received' ? 'selected' : '' }}>Received</option>
                    <option value="refund_initiated" {{ request('status') == 'refund_initiated' ? 'selected' : '' }}>Refund
                        Initiated</option>
                    <option value="refunded" {{ request('status') == 'refunded' ? 'selected' : '' }}>Refunded</option>
                    <option value="rejected" {{ request('status') == 'rejected' ? 'selected' : '' }}>Rejected</option>
                </select>
            </form>
        </div>
    </div>

    <div class="glass-card rounded-2xl overflow-hidden">
        <div class="overflow-x-auto">
            <table class="w-full text-left text-sm text-slate-400">
                <thead class="bg-slate-900/50 text-xs uppercase font-bold text-slate-300">
                    <tr>
                        <th class="px-6 py-4">ID</th>
                        <th class="px-6 py-4">Order</th>
                        <th class="px-6 py-4">User</th>
                        <th class="px-6 py-4">Reason</th>
                        <th class="px-6 py-4">Status</th>
                        <th class="px-6 py-4">Date</th>
                        <th class="px-6 py-4 text-right">Actions</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-white/5">
                    @forelse($returns as $return)
                        <tr class="hover:bg-white/5 transition-colors">
                            <td class="px-6 py-4 font-medium text-white">#{{ $return->id }}</td>
                            <td class="px-6 py-4">
                                @if($return->order)
                                    <a href="{{ route('admin.orders.show', $return->order_id) }}"
                                        class="text-blue-400 hover:text-blue-300 hover:underline">
                                        {{ $return->order->order_number }}
                                    </a>
                                @else
                                    <span class="text-red-400 italic">Order Deleted</span>
                                @endif
                            </td>
                            <td class="px-6 py-4">
                                <span class="font-medium text-slate-200">{{ $return->user->name }}</span>
                                <span class="block text-xs text-slate-500">{{ $return->user->email }}</span>
                            </td>
                            <td class="px-6 py-4">
                                <div class="max-w-xs truncate" title="{{ $return->reason }}">{{ $return->reason }}</div>
                            </td>
                            <td class="px-6 py-4">
                                @php
                                    $statusClasses = [
                                        'pending' => 'bg-yellow-500/10 text-yellow-500 border-yellow-500/20',
                                        'approved' => 'bg-blue-500/10 text-blue-500 border-blue-500/20',
                                        'received' => 'bg-purple-500/10 text-purple-500 border-purple-500/20',
                                        'refund_initiated' => 'bg-orange-500/10 text-orange-500 border-orange-500/20',
                                        'refunded' => 'bg-green-500/10 text-green-500 border-green-500/20',
                                        'rejected' => 'bg-red-500/10 text-red-500 border-red-500/20',
                                    ];
                                @endphp
                                <span
                                    class="{{ $statusClasses[$return->status] ?? 'bg-slate-500/10 text-slate-500' }} px-2.5 py-1 rounded-full text-xs font-bold border">
                                    {{ ucfirst(str_replace('_', ' ', $return->status)) }}
                                </span>
                            </td>
                            <td class="px-6 py-4">
                                {{ optional($return->created_at)->format('M d, Y') ?? 'N/A' }}
                            </td>
                            <td class="px-6 py-4 text-right">
                                <a href="{{ route('admin.order-returns.show', $return->id) }}"
                                    class="inline-flex items-center justify-center w-8 h-8 rounded-lg bg-slate-800 text-blue-400 hover:bg-blue-500 hover:text-white transition-colors">
                                    <i data-lucide="eye" class="w-4 h-4"></i>
                                </a>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="7" class="px-6 py-12 text-center text-slate-500">
                                <div class="w-16 h-16 bg-slate-800 rounded-full flex items-center justify-center mx-auto mb-4">
                                    <i data-lucide="package-open" class="w-8 h-8 text-slate-600"></i>
                                </div>
                                <p>No return requests found.</p>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        @if($returns->hasPages())
            <div class="px-6 py-4 border-t border-white/5">
                {{ $returns->links() }}
            </div>
        @endif
    </div>
@endsection