@extends('admin.layout')

@section('title', 'Recargas Admin')

@section('content')
    <div class="space-y-8">
        <section class="rounded-3xl border border-white/10 bg-white/5 p-6 shadow-soft backdrop-blur-xl">
            <p class="text-sm uppercase tracking-[0.3em] text-sky-300/80">Recargas</p>
            <h2 class="mt-2 text-3xl font-semibold text-white">Administración de topups</h2>
            <p class="mt-2 max-w-3xl text-slate-300">
                Revisa todas las solicitudes de recarga y filtra por estado para validar el historial.
            </p>
        </section>

        <section class="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
            @foreach ($stats as $stat)
                <article class="rounded-3xl border border-white/10 bg-slate-900/70 p-5 shadow-soft backdrop-blur-xl">
                    <p class="text-sm text-slate-400">{{ $stat['label'] }}</p>
                    <p class="mt-3 text-4xl font-semibold text-white">{{ $stat['value'] }}</p>
                </article>
            @endforeach
        </section>

        <section class="rounded-3xl border border-white/10 bg-slate-900/70 shadow-soft backdrop-blur-xl">
            <div class="flex flex-col gap-4 border-b border-white/10 px-6 py-4 lg:flex-row lg:items-center lg:justify-between">
                <div>
                    <h3 class="text-lg font-semibold text-white">Listado de recargas</h3>
                    <p class="text-sm text-slate-400">Filtra por estado para revisar aprobadas, pendientes o rechazadas.</p>
                </div>

                <form method="GET" action="{{ route('admin.topups') }}" class="flex items-center gap-3">
                    <label class="text-sm text-slate-300" for="status">Estado</label>
                    <select
                        id="status"
                        name="status"
                        class="rounded-2xl border border-white/10 bg-white/5 px-4 py-2 text-sm text-white outline-none focus:border-sky-400 focus:ring-2 focus:ring-sky-400/20"
                        onchange="this.form.submit()"
                    >
                        <option value="all" @selected($status === 'all')>Todas</option>
                        <option value="pending" @selected($status === 'pending')>Pendientes</option>
                        <option value="approved" @selected($status === 'approved')>Aprobadas</option>
                        <option value="rejected" @selected($status === 'rejected')>Rechazadas</option>
                    </select>
                </form>
            </div>

            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-white/5 text-left text-sm">
                    <thead class="bg-white/5 text-slate-300">
                        <tr>
                            <th class="px-6 py-3 font-medium">Usuario</th>
                            <th class="px-6 py-3 font-medium">Referencia</th>
                            <th class="px-6 py-3 font-medium">Créditos</th>
                            <th class="px-6 py-3 font-medium">Precio</th>
                            <th class="px-6 py-3 font-medium">Estado</th>
                            <th class="px-6 py-3 font-medium">Comprobante</th>
                            <th class="px-6 py-3 font-medium text-right">Acciones</th>
                            <th class="px-6 py-3 font-medium">Fecha</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-white/5 text-slate-200">
                        @forelse ($topups as $topup)
                            <tr>
                                <td class="px-6 py-4">
                                    <p class="font-medium text-white">{{ $topup->user?->name ?? 'N/D' }}</p>
                                    <p class="text-xs text-slate-400">{{ $topup->user?->email ?? '' }}</p>
                                </td>
                                <td class="px-6 py-4 text-slate-300">{{ $topup->reference }}</td>
                                <td class="px-6 py-4 text-slate-300">{{ $topup->amount }}</td>
                                <td class="px-6 py-4 text-slate-300">{{ $topup->price_amount }}</td>
                                <td class="px-6 py-4">
                                    <span class="rounded-full px-3 py-1 text-xs font-semibold {{ $topup->status === 'approved' ? 'bg-emerald-500/15 text-emerald-300' : ($topup->status === 'rejected' ? 'bg-rose-500/15 text-rose-300' : 'bg-amber-500/15 text-amber-300') }}">
                                        {{ ucfirst($topup->status) }}
                                    </span>
                                </td>
                                <td class="px-6 py-4">
                                    @if ($topup->receipt_path)
                                        <a
                                            href="{{ asset('storage/' . $topup->receipt_path) }}"
                                            target="_blank"
                                            rel="noreferrer"
                                            class="inline-flex rounded-full bg-sky-500/15 px-3 py-1 text-xs font-semibold text-sky-300 hover:bg-sky-500/25"
                                        >
                                            Ver comprobante
                                        </a>
                                    @else
                                        <span class="text-xs text-slate-500">Sin comprobante</span>
                                    @endif
                                </td>
                                <td class="px-6 py-4 text-right">
                                    <div class="flex justify-end gap-2">
                                        @if ($topup->status === 'pending')
                                            <form method="POST" action="{{ route('admin.topups.approve', $topup) }}">
                                                @csrf
                                                <button type="submit" class="rounded-full bg-emerald-500/15 px-3 py-2 text-xs font-semibold text-emerald-300 hover:bg-emerald-500/25">
                                                    Aprobar
                                                </button>
                                            </form>
                                            <form method="POST" action="{{ route('admin.topups.reject', $topup) }}" class="flex items-center gap-2">
                                                @csrf
                                                <input
                                                    type="text"
                                                    name="notes"
                                                    placeholder="Motivo"
                                                    class="w-28 rounded-full border border-white/10 bg-white/5 px-3 py-2 text-xs text-white outline-none placeholder:text-slate-500 focus:border-rose-400 focus:ring-2 focus:ring-rose-400/20"
                                                >
                                                <button type="submit" class="rounded-full bg-rose-500/15 px-3 py-2 text-xs font-semibold text-rose-300 hover:bg-rose-500/25">
                                                    Rechazar
                                                </button>
                                            </form>
                                        @else
                                            <span class="text-xs text-slate-500">
                                                @if ($topup->status === 'approved')
                                                    Aprobada por {{ $topup->approver?->name ?? 'N/D' }}
                                                @else
                                                    Rechazada por {{ $topup->rejector?->name ?? 'N/D' }}
                                                @endif
                                            </span>
                                        @endif
                                    </div>
                                </td>
                                <td class="px-6 py-4 text-slate-400">
                                    {{ optional($topup->created_at)->format('d/m/Y H:i') }}
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="8" class="px-6 py-8 text-center text-slate-400">No hay recargas para este filtro.</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            <div class="border-t border-white/10 px-6 py-4">
                {{ $topups->links() }}
            </div>
        </section>
    </div>
@endsection