@extends('layouts.customer')

@section('content')
<div class="max-w-2xl mx-auto px-4 sm:px-6 lg:px-8 py-8">

    <div class="text-center mb-8">
        <div class="w-20 h-20 rounded-full bg-emerald-100 flex items-center justify-center mx-auto mb-4">
            <svg class="w-10 h-10 text-emerald-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
            </svg>
        </div>
        <h1 class="text-2xl font-bold text-gray-900">Transfer Successful!</h1>
        <p class="text-gray-500 mt-2">Your transfer has been processed successfully.</p>
    </div>

    <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6 sm:p-8 mb-6">
        <div class="text-center mb-6">
            <p class="text-sm text-gray-500">Transaction Reference</p>
            <p class="text-lg font-mono font-semibold text-gray-900 mt-1">{{ $transaction->reference }}</p>
            <button onclick="navigator.clipboard.writeText('{{ $transaction->reference }}')" class="mt-2 text-xs text-[#0D6B58] hover:underline">Copy Reference</button>
        </div>

        <div class="space-y-3 pt-4 border-t border-gray-100">
            <div class="flex items-center justify-between">
                <span class="text-sm text-gray-500">Amount</span>
                <span class="text-sm font-semibold text-gray-900">${{ number_format($transaction->amount, 2) }}</span>
            </div>
            <div class="flex items-center justify-between">
                <span class="text-sm text-gray-500">Recipient</span>
                <span class="text-sm font-medium text-gray-900">{{ $transaction->recipient_name }}</span>
            </div>
            <div class="flex items-center justify-between">
                <span class="text-sm text-gray-500">Date</span>
                <span class="text-sm font-medium text-gray-900">{{ $transaction->created_at->format('M d, Y h:i A') }}</span>
            </div>
            @if($transaction->description)
            <div class="flex items-center justify-between">
                <span class="text-sm text-gray-500">Description</span>
                <span class="text-sm font-medium text-gray-900">{{ $transaction->description }}</span>
            </div>
            @endif
        </div>
    </div>

    <div class="flex flex-col sm:flex-row gap-3">
        <a href="{{ route('customer.transactions.show', $transaction->id) }}" class="flex-1 inline-flex items-center justify-center px-4 py-3 text-sm font-medium text-[#0D6B58] bg-[#0D6B58]/10 rounded-lg hover:bg-[#0D6B58]/20 transition">
            <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
            </svg>
            Download Receipt
        </a>
        <a href="{{ route('customer.transfer') }}" class="flex-1 inline-flex items-center justify-center px-4 py-3 text-sm font-medium text-white bg-[#0D6B58] rounded-lg hover:bg-[#0A5A49] transition">
            New Transfer
        </a>
        <a href="{{ route('customer.dashboard') }}" class="flex-1 inline-flex items-center justify-center px-4 py-3 text-sm font-medium text-gray-700 bg-white border border-gray-200 rounded-lg hover:bg-gray-50 transition">
            Back to Dashboard
        </a>
    </div>

</div>
@endsection