@extends('layouts.app')
@section('title', __('Transactions'))
@section('page-title', __('Transactions'))
@section('page-subtitle', __('All payment activity across tenants and gateways.'))

@section('content')
@php
    $statusColors = [
        'pending'    => 'bg-amber-100 text-amber-800',
        'processing' => 'bg-blue-100 text-blue-800',
        'succeeded'  => 'bg-emerald-100 text-emerald-800',
        'failed'     => 'bg-rose-100 text-rose-800',
        'canceled'   => 'bg-slate-100 text-slate-700',
        'refunded'   => 'bg-violet-100 text-violet-800',
    ];
@endphp

{{-- KPI cards --}}
<div class="grid grid-cols-2 lg:grid-cols-4 gap-3 mb-6">
    <div class="card card-pad">
        <div class="text-xs text-slate-500">{{ __('Total transactions') }}</div>
        <div class="text-2xl font-bold mt-1">{{ number_format($totals['count']) }}</div>
    </div>
    <div class="card card-pad">
        <div class="text-xs text-slate-500">{{ __('Total succeeded') }}</div>
        <div class="text-2xl font-bold mt-1 font-mono">{{ number_format((float) $totals['succeeded'], 2) }}</div>
    </div>
    <div class="card card-pad">
        <div class="text-xs text-slate-500">{{ __('Pending') }}</div>
        <div class="text-2xl font-bold mt-1 text-amber-600">{{ number_format($totals['pending']) }}</div>
    </div>
    <div class="card card-pad">
        <div class="text-xs text-slate-500">{{ __('Failed') }}</div>
        <div class="text-2xl font-bold mt-1 text-rose-600">{{ number_format($totals['failed']) }}</div>
    </div>
</div>

{{-- Filters --}}
<form method="GET" action="{{ route('super-admin.transactions.index') }}" class="card card-pad mb-4">
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-6 gap-3">
        <input type="text" name="q" value="{{ $filters['q'] ?? '' }}" placeholder="{{ __('Reference / id') }}" class="form-input">
        <select name="gateway" class="form-select">
            <option value="">{{ __('All gateways') }}</option>
            <option value="stripe" @selected(($filters['gateway'] ?? '') === 'stripe')>Stripe</option>
            <option value="paypal" @selected(($filters['gateway'] ?? '') === 'paypal')>PayPal</option>
            <option value="manual" @selected(($filters['gateway'] ?? '') === 'manual')>{{ __('Manual') }}</option>
        </select>
        <select name="status" class="form-select">
            <option value="">{{ __('All statuses') }}</option>
            @foreach(['pending', 'processing', 'succeeded', 'failed', 'canceled', 'refunded'] as $st)
                <option value="{{ $st }}" @selected(($filters['status'] ?? '') === $st)>{{ __($st) }}</option>
            @endforeach
        </select>
        <select name="tenant_id" class="form-select">
            <option value="">{{ __('All tenants') }}</option>
            @foreach($tenants as $t)
                <option value="{{ $t->id }}" @selected((string)($filters['tenant_id'] ?? '') === (string) $t->id)>{{ $t->name }}</option>
            @endforeach
        </select>
        <input type="date" name="from" value="{{ $filters['from'] ?? '' }}" class="form-input">
        <input type="date" name="to"   value="{{ $filters['to'] ?? '' }}"   class="form-input">
    </div>
    <div class="flex justify-end gap-2 mt-3">
        <a href="{{ route('super-admin.transactions.index') }}" class="btn-ghost text-sm">{{ __('Reset') }}</a>
        <button class="btn-primary text-sm">{{ __('Filter') }}</button>
    </div>
</form>

{{-- Table --}}
<div class="card overflow-x-auto">
    <table class="w-full text-sm">
        <thead class="text-xs uppercase tracking-wider text-slate-500 border-b border-slate-200/70 dark:border-slate-800">
            <tr>
                <th class="text-start px-4 py-3">#</th>
                <th class="text-start px-4 py-3">{{ __('Date') }}</th>
                <th class="text-start px-4 py-3">{{ __('Tenant') }}</th>
                <th class="text-start px-4 py-3">{{ __('Plan') }}</th>
                <th class="text-start px-4 py-3">{{ __('Gateway') }}</th>
                <th class="text-end   px-4 py-3">{{ __('Amount') }}</th>
                <th class="text-start px-4 py-3">{{ __('Status') }}</th>
                <th class="text-end   px-4 py-3"></th>
            </tr>
        </thead>
        <tbody class="divide-y divide-slate-100 dark:divide-slate-800">
            @forelse($transactions as $tx)
                <tr class="hover:bg-slate-50 dark:hover:bg-slate-800/40">
                    <td class="px-4 py-3 font-mono text-xs">{{ $tx->id }}</td>
                    <td class="px-4 py-3 text-xs">{{ $tx->created_at->format('Y-m-d H:i') }}</td>
                    <td class="px-4 py-3">{{ $tx->tenant?->name ?? '—' }}</td>
                    <td class="px-4 py-3">{{ $tx->plan?->displayName() ?? '—' }} <span class="text-xs text-slate-400">{{ $tx->cycle ? '· '.__($tx->cycle) : '' }}</span></td>
                    <td class="px-4 py-3 capitalize">{{ $tx->gateway }}</td>
                    <td class="px-4 py-3 text-end font-mono">{{ number_format((float) $tx->amount, 2) }} {{ $tx->currency }}</td>
                    <td class="px-4 py-3">
                        <span class="text-[10px] uppercase tracking-wider px-2 py-0.5 rounded-full {{ $statusColors[$tx->status] ?? 'bg-slate-100 text-slate-700' }}">
                            {{ __($tx->status) }}
                        </span>
                    </td>
                    <td class="px-4 py-3 text-end">
                        <a href="{{ route('super-admin.transactions.show', $tx) }}" class="btn-ghost text-xs">{{ __('View') }}</a>
                    </td>
                </tr>
            @empty
                <tr><td colspan="8" class="px-4 py-10 text-center text-slate-500 text-sm">{{ __('No transactions found.') }}</td></tr>
            @endforelse
        </tbody>
    </table>
</div>

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