@extends('layouts.admin')

@section('title', 'Transaction Details')
@section('page-title', 'Transaction Details')

@section('content')
<div class="mx-auto max-w-3xl space-y-6">
    <div class="flex items-center gap-3">
        <a href="{{ route('admin.transactions.index') }}" class="text-gray-400 hover:text-gray-600">
            <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" /></svg>
        </a>
        <h1 class="text-2xl font-bold text-gray-900">Transaction {{ $transaction->reference }}</h1>
    </div>

    <div class="rounded-xl bg-white p-6 shadow-sm border border-gray-100 space-y-3">
        <div class="grid grid-cols-2 gap-4">
            <div><p class="text-xs text-gray-500">User</p><p class="text-sm font-medium text-gray-900">{{ $transaction->user->first_name }} {{ $transaction->user->last_name }}</p></div>
            <div><p class="text-xs text-gray-500">Email</p><p class="text-sm text-gray-900">{{ $transaction->user->email }}</p></div>
            <div><p class="text-xs text-gray-500">Service</p><p class="text-sm text-gray-900">{{ $transaction->service_name }}</p></div>
            <div><p class="text-xs text-gray-500">Customer</p><p class="text-sm text-gray-900">{{ $transaction->customer_number }}</p></div>
            <div><p class="text-xs text-gray-500">Amount</p><p class="text-sm font-medium text-gray-900">₦{{ number_format($transaction->amount, 2) }}</p></div>
            <div><p class="text-xs text-gray-500">Fee</p><p class="text-sm text-gray-900">₦{{ number_format($transaction->fee, 2) }}</p></div>
            <div><p class="text-xs text-gray-500">Total</p><p class="text-sm font-bold text-gray-900">₦{{ number_format($transaction->total_amount, 2) }}</p></div>
            <div><p class="text-xs text-gray-500">Status</p><p class="text-sm font-medium text-gray-900">{{ ucfirst($transaction->status) }}</p></div>
            <div><p class="text-xs text-gray-500">Provider Ref</p><p class="text-sm font-mono text-gray-900">{{ $transaction->provider_reference ?? 'N/A' }}</p></div>
            <div><p class="text-xs text-gray-500">Date</p><p class="text-sm text-gray-900">{{ $transaction->created_at->format('M d, Y H:i:s') }}</p></div>
        </div>

        @if($transaction->token_data)
        <div class="p-3 bg-green-50 rounded-lg border border-green-200">
            <p class="text-xs text-green-700 font-medium mb-1">Token</p>
            <p class="text-sm font-mono font-bold text-green-800 break-all">{{ $transaction->token_data }}</p>
        </div>
        @endif

        @if($transaction->failure_reason)
        <div class="p-3 bg-red-50 rounded-lg border border-red-200">
            <p class="text-xs text-red-700 font-medium mb-1">Failure Reason</p>
            <p class="text-sm text-red-800">{{ $transaction->failure_reason }}</p>
        </div>
        @endif

        @if(in_array($transaction->status, ['successful', 'processing']))
        <form method="POST" action="{{ route('admin.transactions.refund', $transaction) }}" onsubmit="return confirm('Refund this transaction?')">
            @csrf
            <input type="hidden" name="reason" value="Admin refund">
            <button type="submit" class="rounded-lg bg-red-500 px-4 py-2.5 text-sm font-semibold text-white hover:bg-red-600">Refund Transaction</button>
        </form>
        @endif
    </div>
</div>
@endsection