@extends('layouts.admin')

@section('title', 'Add-on Purchases')
@section('page-title', 'Add-on Purchases')

@section('content')
<div class="space-y-6">

    {{-- Header --}}
    <div class="flex items-center gap-4">
        <a href="{{ route('admin.addons.index') }}"
           class="rounded-xl border border-slate-200 bg-white px-4 py-2 text-sm font-semibold text-slate-700 shadow-sm transition hover:bg-slate-50">
            ← Add-on Products
        </a>
        <h2 class="text-xl font-bold text-slate-900">Purchase History</h2>
    </div>

    {{-- Filter --}}
    <div class="rounded-3xl border border-slate-200 bg-white p-6 shadow-sm">
        <form method="GET" class="grid gap-4 lg:grid-cols-[2fr_1fr_1fr_auto]">
            <input type="text" name="q" value="{{ request('q') }}"
                   placeholder="Search user email, name, or transaction ID"
                   class="w-full rounded-2xl border border-slate-300 px-4 py-3 text-sm outline-none transition focus:border-brand-600 focus:ring-4 focus:ring-brand-600/10">
            <select name="product"
                    class="w-full rounded-2xl border border-slate-300 px-4 py-3 text-sm outline-none transition focus:border-brand-600 focus:ring-4 focus:ring-brand-600/10">
                <option value="">All products</option>
                @foreach($products as $product)
                    <option value="{{ $product->id }}" @selected(request('product') == $product->id)>
                        {{ $product->name }}
                    </option>
                @endforeach
            </select>
            <select name="status"
                    class="w-full rounded-2xl border border-slate-300 px-4 py-3 text-sm outline-none transition focus:border-brand-600 focus:ring-4 focus:ring-brand-600/10">
                <option value="">All statuses</option>
                @foreach(['completed', 'pending', 'failed', 'refunded'] as $status)
                    <option value="{{ $status }}" @selected(request('status') === $status)>{{ ucfirst($status) }}</option>
                @endforeach
            </select>
            <button type="submit"
                    class="rounded-2xl bg-brand-600 px-5 py-3 text-sm font-semibold text-white transition hover:bg-brand-700">
                Filter
            </button>
        </form>
    </div>

    {{-- Table --}}
    <div class="rounded-3xl border border-slate-200 bg-white shadow-sm overflow-hidden">
        <table class="w-full text-sm">
            <thead class="border-b border-slate-200 bg-slate-50">
                <tr>
                    <th class="px-6 py-4 text-left font-semibold uppercase tracking-wider text-slate-500 text-xs">User</th>
                    <th class="px-6 py-4 text-left font-semibold uppercase tracking-wider text-slate-500 text-xs">Product</th>
                    <th class="px-6 py-4 text-left font-semibold uppercase tracking-wider text-slate-500 text-xs">Provider</th>
                    <th class="px-6 py-4 text-left font-semibold uppercase tracking-wider text-slate-500 text-xs">Amount</th>
                    <th class="px-6 py-4 text-left font-semibold uppercase tracking-wider text-slate-500 text-xs">Status</th>
                    <th class="px-6 py-4 text-left font-semibold uppercase tracking-wider text-slate-500 text-xs">Date</th>
                    <th class="px-6 py-4 text-left font-semibold uppercase tracking-wider text-slate-500 text-xs">Reference</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-slate-100">
                @forelse($purchases as $purchase)
                <tr class="hover:bg-slate-50 transition-colors">
                    <td class="px-6 py-4">
                        @if($purchase->user)
                            <p class="font-semibold text-slate-900">{{ $purchase->user->name }}</p>
                            <p class="text-xs text-slate-400">{{ $purchase->user->email }}</p>
                        @else
                            <span class="text-slate-400">—</span>
                        @endif
                    </td>
                    <td class="px-6 py-4">
                        @if($purchase->product)
                            <p class="font-medium text-slate-800">{{ $purchase->product->name }}</p>
                        @else
                            <span class="text-slate-400">Deleted product</span>
                        @endif
                    </td>
                    <td class="px-6 py-4">
                        <span class="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold bg-slate-100 text-slate-700">
                            {{ strtoupper($purchase->provider ?? '—') }}
                        </span>
                    </td>
                    <td class="px-6 py-4 font-semibold text-slate-900">
                        {{ number_format((float) $purchase->amount_paid, 2) }}
                        <span class="text-xs font-normal text-slate-400">{{ strtoupper($purchase->currency) }}</span>
                    </td>
                    <td class="px-6 py-4">
                        @php
                            $statusClasses = match($purchase->status) {
                                'completed' => 'bg-green-100 text-green-800',
                                'pending'   => 'bg-amber-100 text-amber-800',
                                'failed'    => 'bg-red-100 text-red-800',
                                'refunded'  => 'bg-slate-100 text-slate-600',
                                default     => 'bg-slate-100 text-slate-500',
                            };
                        @endphp
                        <span class="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold {{ $statusClasses }}">
                            {{ ucfirst($purchase->status ?? '—') }}
                        </span>
                    </td>
                    <td class="px-6 py-4 text-slate-500">
                        {{ $purchase->created_at->format('M j, Y') }}
                        <span class="text-xs text-slate-400">{{ $purchase->created_at->format('H:i') }}</span>
                    </td>
                    <td class="px-6 py-4 font-mono text-xs text-slate-400 max-w-[160px] truncate">
                        {{ $purchase->provider_reference ?? '—' }}
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="7" class="px-6 py-16 text-center text-slate-400">
                        No purchases found.
                    </td>
                </tr>
                @endforelse
            </tbody>
        </table>

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

</div>
@endsection