@extends('layouts.customer')

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

    <a href="{{ route('customer.transactions') }}" class="inline-flex items-center text-sm text-gray-500 hover:text-[#0D6B58] mb-6 transition">
        <svg class="w-4 h-4 mr-1" 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>
        Back to Transactions
    </a>

    {{-- Status Banner --}}
    <div class="rounded-xl p-5 mb-6
        @if($transaction->status === 'successful') bg-emerald-50 border border-emerald-200
        @elseif($transaction->status === 'pending') bg-amber-50 border border-amber-200
        @else bg-rose-50 border border-rose-200 @endif">
        <div class="flex items-center space-x-3">
            @if($transaction->status === 'successful')
            <div class="w-10 h-10 rounded-full bg-emerald-100 flex items-center justify-center">
                <svg class="w-6 h-6 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>
            @elseif($transaction->status === 'pending')
            <div class="w-10 h-10 rounded-full bg-amber-100 flex items-center justify-center">
                <svg class="w-6 h-6 text-amber-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
                </svg>
            </div>
            @else
            <div class="w-10 h-10 rounded-full bg-rose-100 flex items-center justify-center">
                <svg class="w-6 h-6 text-rose-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                </svg>
            </div>
            @endif
            <div>
                <p class="font-bold
                    @if($transaction->status === 'successful') text-emerald-700
                    @elseif($transaction->status === 'pending') text-amber-700
                    @else text-rose-700 @endif">
                    Transaction {{ ucfirst($transaction->status) }}
                </p>
                <p class="text-sm opacity-75
                    @if($transaction->status === 'successful') text-emerald-700
                    @elseif($transaction->status === 'pending') text-amber-700
                    @else text-rose-700 @endif">
                    {{ $transaction->created_at->format('M d, Y h:i A') }}
                </p>
            </div>
        </div>
    </div>

    {{-- Detail Card --}}
    <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>
            <div class="flex items-center justify-center space-x-2 mt-1">
                <p class="text-lg font-mono font-semibold text-gray-900">{{ $transaction->reference }}</p>
                <button onclick="navigator.clipboard.writeText('{{ $transaction->reference }}')" class="p-1 rounded hover:bg-gray-100 transition" title="Copy">
                    <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"/>
                    </svg>
                </button>
            </div>
        </div>

        <div class="text-center mb-6">
            <p class="text-3xl font-bold
                @if($transaction->type === 'credit' || $transaction->type === 'deposit') text-emerald-600
                @else text-rose-600 @endif">
                @if($transaction->type === 'credit' || $transaction->type === 'deposit') +@else-@endif${{ number_format($transaction->amount, 2) }}
            </p>
            @if($transaction->fee)
            <p class="text-sm text-gray-500 mt-1">Fee: ${{ number_format($transaction->fee, 2) }}</p>
            <p class="text-sm font-medium text-gray-700 mt-1">Total: ${{ number_format($transaction->amount + $transaction->fee, 2) }}</p>
            @endif
        </div>

        <div class="space-y-3 pt-4 border-t border-gray-100">
            <div class="flex items-center justify-between py-2">
                <span class="text-sm text-gray-500">Type</span>
                <span class="text-sm font-medium text-gray-900 capitalize">{{ str_replace('_', ' ', $transaction->type) }}</span>
            </div>

            @if(isset($transaction->sender_name))
            <div class="flex items-center justify-between py-2">
                <span class="text-sm text-gray-500">From</span>
                <div class="text-right">
                    <p class="text-sm font-medium text-gray-900">{{ $transaction->sender_name }}</p>
                    <p class="text-xs text-gray-400">{{ $transaction->sender_account ?? '' }}</p>
                </div>
            </div>
            @endif

            @if(isset($transaction->recipient_name))
            <div class="flex items-center justify-between py-2">
                <span class="text-sm text-gray-500">To</span>
                <div class="text-right">
                    <p class="text-sm font-medium text-gray-900">{{ $transaction->recipient_name }}</p>
                    <p class="text-xs text-gray-400">{{ $transaction->recipient_account ?? '' }}</p>
                </div>
            </div>
            @endif

            @if($transaction->description)
            <div class="flex items-center justify-between py-2">
                <span class="text-sm text-gray-500">Description</span>
                <span class="text-sm text-gray-900 text-right max-w-xs">{{ $transaction->description }}</span>
            </div>
            @endif

            <div class="flex items-center justify-between py-2">
                <span class="text-sm text-gray-500">Date & Time</span>
                <span class="text-sm font-medium text-gray-900">{{ $transaction->created_at->format('M d, Y h:i:s A') }}</span>
            </div>

            <div class="flex items-center justify-between py-2">
                <span class="text-sm text-gray-500">Status</span>
                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium
                    @if($transaction->status === 'successful') bg-emerald-100 text-emerald-700
                    @elseif($transaction->status === 'pending') bg-amber-100 text-amber-700
                    @else bg-rose-100 text-rose-700 @endif">
                    {{ ucfirst($transaction->status) }}
                </span>
            </div>

            @if(isset($transaction->ip_address))
            <div class="flex items-center justify-between py-2">
                <span class="text-sm text-gray-500">IP Address</span>
                <span class="text-sm font-mono text-gray-600">{{ $transaction->ip_address }}</span>
            </div>
            @endif
        </div>
    </div>

    <div class="flex flex-col sm:flex-row gap-3">
        <a href="{{ route('customer.transactions.receipt', $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.support.create', ['transaction_reference' => $transaction->reference]) }}" class="flex-1 inline-flex items-center justify-center px-4 py-3 text-sm font-medium text-gray-600 bg-white border border-gray-200 rounded-lg hover:bg-gray-50 transition">
            Report Issue
        </a>
    </div>

</div>
@endsection