@extends('layouts.app')
@section('title', 'Transaction History')
@section('content')
<x-page-header title="Transaction History" />

<div class="px-5 mb-4" x-data="{ open: false }">
    <button @click="open = !open" class="flex items-center gap-2 text-sm text-neutral-400 mb-3">
        <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"/></svg>
        Filters
    </button>
    <form method="GET" x-show="open" x-cloak class="grid grid-cols-2 gap-3 mb-4">
        <select name="type" class="rounded-xl bg-white/5 border border-white/10 px-3 py-2.5 text-sm">
            <option value="">All Types</option>
            @foreach (['deposit','withdrawal','buy','sell','fee','adjustment','refund'] as $t)
                <option value="{{ $t }}" @selected(($filters['type'] ?? '') === $t)>{{ ucfirst($t) }}</option>
            @endforeach
        </select>
        <select name="status" class="rounded-xl bg-white/5 border border-white/10 px-3 py-2.5 text-sm">
            <option value="">All Statuses</option>
            @foreach (['pending','processing','completed','failed','cancelled','reversed'] as $s)
                <option value="{{ $s }}" @selected(($filters['status'] ?? '') === $s)>{{ ucfirst($s) }}</option>
            @endforeach
        </select>
        <input type="text" name="search" placeholder="Search reference" value="{{ $filters['search'] ?? '' }}"
               class="col-span-2 rounded-xl bg-white/5 border border-white/10 px-3 py-2.5 text-sm">
        <input type="date" name="from" value="{{ $filters['from'] ?? '' }}" class="rounded-xl bg-white/5 border border-white/10 px-3 py-2.5 text-sm">
        <input type="date" name="to" value="{{ $filters['to'] ?? '' }}" class="rounded-xl bg-white/5 border border-white/10 px-3 py-2.5 text-sm">
        <button type="submit" class="col-span-2 btn-deposit text-white text-sm font-bold py-2.5 rounded-full">Apply Filters</button>
    </form>
</div>

<div class="px-5 space-y-1">
    @forelse ($transactions as $tx)
        <a href="{{ route('transactions.show', $tx) }}" class="flex items-center justify-between py-3 border-b border-white/5">
            <div>
                <p class="font-medium capitalize">{{ $tx->type }} @if($tx->asset_symbol) {{ $tx->asset_symbol }} @endif</p>
                <p class="text-xs text-neutral-500">{{ $tx->created_at->format('d M Y, H:i') }} · {{ ucfirst($tx->status) }}</p>
            </div>
            <p class="font-semibold {{ in_array($tx->type, ['deposit', 'sell']) ? 'text-emerald-400' : 'text-neutral-200' }}">
                {{ in_array($tx->type, ['deposit', 'sell']) ? '+' : '-' }}{{ $tx->currency === 'NGN' ? '₦' : '' }}{{ number_format($tx->amount, $tx->currency === 'NGN' ? 2 : 8) }} {{ $tx->currency !== 'NGN' ? $tx->currency : '' }}
            </p>
        </a>
    @empty
        <p class="text-sm text-neutral-500 text-center py-10">No transactions match your filters.</p>
    @endforelse
</div>

<div class="px-5 mt-6">{{ $transactions->links() }}</div>
@endsection