@extends('layouts.admin')
@section('title', 'Points History — ' . $user->full_name)
@section('page-title', 'Points History')

@section('content')
<div class="flex items-center gap-2 sm:gap-3 mb-6 flex-wrap">
    <a href="{{ route('admin.members.show', $user) }}" class="text-white/30 hover:text-white transition-colors inline-flex items-center gap-1 text-sm">
        <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/></svg>
        {{ $user->full_name }}
    </a>
    <span class="text-white/20">/</span>
    <span class="text-white/50 text-sm">Points History</span>
</div>

<div class="flex flex-col sm:flex-row sm:items-start justify-between gap-3 mb-5">
    <div>
        <h2 class="text-xl sm:text-2xl font-semibold" style="font-family: 'Playfair Display', serif;">{{ $user->full_name }}</h2>
        <p class="text-white/40 text-sm mt-1">{{ $user->membership_number }} · Current balance: <span class="text-[#D4B84A] font-medium">{{ number_format($user->points_balance) }} pts</span></p>
    </div>
</div>

<div class="bg-[#111111] border border-[#1e1e1e] rounded-xl overflow-hidden">
    {{-- Desktop header --}}
    <div class="hidden sm:grid px-6 py-4 border-b border-[#1e1e1e] grid-cols-5 gap-4 text-xs tracking-widests uppercase text-white/30">
        <div class="col-span-2">Description</div>
        <div class="text-center">Type</div>
        <div class="text-right">Points</div>
        <div class="text-right">Balance After</div>
    </div>
    <div class="divide-y divide-[#1e1e1e]">
        @forelse($transactions as $tx)
        {{-- Desktop row --}}
        <div class="hidden sm:grid px-6 py-4 grid-cols-5 gap-4 items-center hover:bg-white/[0.015] transition-colors">
            <div class="col-span-2">
                <p class="text-white text-sm">{{ $tx->description }}</p>
                <p class="text-white/30 text-xs mt-0.5">
                    {{ $tx->created_at->format('d M Y · h:i A') }}
                    @if($tx->admin) · <span class="text-white/40">{{ $tx->admin->name }}</span> @endif
                </p>
                @if($tx->admin_note)
                <p class="text-white/35 text-xs mt-1 italic">{{ $tx->admin_note }}
                    @if($tx->note_visible_to_member) <span class="text-[#D4B84A]/50">(visible to member)</span> @endif
                </p>
                @endif
                @if($tx->visit_date)
                <p class="text-white/25 text-xs mt-0.5">Visit: {{ \Carbon\Carbon::parse($tx->visit_date)->format('d M Y') }}
                    @if($tx->spend_amount) · ${{ number_format($tx->spend_amount, 2) }} spend @endif
                </p>
                @endif
            </div>
            <div class="text-center">
                <span class="px-2.5 py-1 rounded-full text-xs font-medium
                    {{ $tx->type === 'credit' ? 'bg-green-900/30 text-green-400' : ($tx->type === 'expiry' ? 'bg-white/5 text-white/30' : 'bg-red-900/30 text-red-400') }}">
                    {{ ucfirst($tx->type) }}
                </span>
            </div>
            <div class="text-right">
                <span class="font-semibold text-sm {{ $tx->isCredit() ? 'text-[#D4B84A]' : 'text-red-400' }}">
                    {{ $tx->isCredit() ? '+' : '−' }}{{ number_format($tx->amount) }}
                </span>
            </div>
            <div class="text-right">
                <span class="text-white/60 text-sm">{{ number_format($tx->balance_after) }}</span>
            </div>
        </div>

        {{-- Mobile row --}}
        <div class="sm:hidden px-4 py-4 flex items-start justify-between gap-3">
            <div class="min-w-0">
                <p class="text-white text-sm">{{ $tx->description }}</p>
                <p class="text-white/30 text-xs mt-0.5">{{ $tx->created_at->format('d M Y · h:i A') }}</p>
                @if($tx->visit_date)
                <p class="text-white/25 text-xs mt-0.5">Visit: {{ \Carbon\Carbon::parse($tx->visit_date)->format('d M Y') }}</p>
                @endif
            </div>
            <div class="text-right flex-shrink-0">
                <p class="font-semibold text-sm {{ $tx->isCredit() ? 'text-[#D4B84A]' : 'text-red-400' }}">
                    {{ $tx->isCredit() ? '+' : '−' }}{{ number_format($tx->amount) }}
                </p>
                <p class="text-white/25 text-xs mt-0.5">Bal: {{ number_format($tx->balance_after) }}</p>
            </div>
        </div>
        @empty
        <div class="px-6 py-10 text-center text-white/30 text-sm">No transactions recorded yet.</div>
        @endforelse
    </div>
    @if($transactions->hasPages())
    <div class="px-4 sm:px-6 py-4 border-t border-[#1e1e1e]">{{ $transactions->links() }}</div>
    @endif
</div>
@endsection