@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.withdrawals') }}" 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 Withdrawals
    </a>

    {{-- Status Indicator --}}
    <div class="rounded-xl p-4 mb-6
        @if(in_array($withdrawal->status, ['approved', 'completed'])) bg-emerald-50 border border-emerald-200
        @elseif($withdrawal->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(in_array($withdrawal->status, ['approved', 'completed']))
            <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="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
            </svg>
            @elseif($withdrawal->status === 'pending')
            <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>
            @else
            <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="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"/>
            </svg>
            @endif
            <p class="font-semibold
                @if(in_array($withdrawal->status, ['approved', 'completed'])) text-emerald-700
                @elseif($withdrawal->status === 'pending') text-amber-700
                @else text-rose-700 @endif">
                Withdrawal {{ ucfirst($withdrawal->status) }}
            </p>
        </div>
    </div>

    <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6 sm:p-8">
        <div class="space-y-4">
            <div class="flex items-center justify-between py-3 border-b border-gray-100">
                <span class="text-sm text-gray-500">Amount</span>
                <span class="text-2xl font-bold text-gray-900">${{ number_format($withdrawal->amount, 2) }}</span>
            </div>
            <div class="flex items-center justify-between py-3 border-b border-gray-100">
                <span class="text-sm text-gray-500">Destination Account</span>
                <span class="text-sm font-mono font-medium text-gray-900">{{ $withdrawal->account_number }}</span>
            </div>
            <div class="flex items-center justify-between py-3 border-b border-gray-100">
                <span class="text-sm text-gray-500">Bank</span>
                <span class="text-sm font-medium text-gray-900">{{ $withdrawal->bank }}</span>
            </div>
            <div class="flex items-center justify-between py-3 border-b border-gray-100">
                <span class="text-sm text-gray-500">Destination</span>
                <span class="text-sm font-medium text-gray-900">{{ ucfirst($withdrawal->destination ?? 'Bank Account') }}</span>
            </div>
            <div class="flex items-center justify-between py-3 border-b border-gray-100">
                <span class="text-sm text-gray-500">Description</span>
                <span class="text-sm font-medium text-gray-900">{{ $withdrawal->description ?? '—' }}</span>
            </div>
            <div class="flex items-center justify-between py-3 border-b border-gray-100">
                <span class="text-sm text-gray-500">Date</span>
                <span class="text-sm font-medium text-gray-900">{{ $withdrawal->created_at->format('M d, Y h:i A') }}</span>
            </div>
            <div class="flex items-center justify-between py-3">
                <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(in_array($withdrawal->status, ['approved', 'completed'])) bg-emerald-100 text-emerald-700
                    @elseif($withdrawal->status === 'pending') bg-amber-100 text-amber-700
                    @else bg-rose-100 text-rose-700 @endif">
                    {{ ucfirst($withdrawal->status) }}
                </span>
            </div>

            @if($withdrawal->admin_notes)
            <div class="pt-4 border-t border-gray-100">
                <p class="text-sm text-gray-500 mb-1">Admin Notes</p>
                <p class="text-sm text-gray-700">{{ $withdrawal->admin_notes }}</p>
            </div>
            @endif
        </div>
    </div>

</div>
@endsection