@extends('layouts.user')

@section('page-title', __('Manual Payment'))

@section('content')
<div class="max-w-2xl mx-auto">
    <div class="bg-white rounded-xl border border-gray-200 p-6">
        <h2 class="font-semibold text-lg mb-2">{{ __('Complete Your Payment') }}</h2>
        <p class="text-sm text-gray-500 mb-6">{{ __('Send the exact amount using the details below. Your balance will be credited after verification.') }}</p>

        <div class="p-4 bg-indigo-50 rounded-lg mb-6 text-center">
            <p class="text-sm text-gray-600">{{ __('Amount to pay') }}</p>
            <p class="text-3xl font-bold text-indigo-600">{{ currency($deposit->total) }} {{ $deposit->currency }}</p>
        </div>

        @if(!empty($deposit->payload['qr_code']))
            <div class="text-center mb-6">
                <img src="{{ asset($deposit->payload['qr_code']) }}" alt="Payment QR" class="w-48 h-48 mx-auto border border-gray-200 rounded-lg">
            </div>
        @endif

        @if(!empty($deposit->payload['upi_id']))
            <div class="p-4 border border-gray-200 rounded-lg mb-4">
                <p class="text-xs text-gray-500">{{ __('UPI ID') }}</p>
                <p class="font-mono font-semibold select-all">{{ $deposit->payload['upi_id'] }}</p>
            </div>
        @endif

        @foreach(collect($deposit->payload)->except(['instructions', 'qr_code', 'upi_id', 'upi_intent'])->all() as $key => $value)
            @if(is_string($value) && $value)
                <div class="p-4 border border-gray-200 rounded-lg mb-4">
                    <p class="text-xs text-gray-500">{{ ucfirst(str_replace('_', ' ', $key)) }}</p>
                    <p class="font-mono font-semibold select-all break-all">{{ $value }}</p>
                </div>
            @endif
        @endforeach

        @if(!empty($deposit->payload['instructions']))
            <div class="p-4 bg-yellow-50 border border-yellow-200 rounded-lg mb-6">
                <p class="text-sm font-medium text-yellow-800 mb-1">{{ __('Instructions') }}</p>
                <p class="text-sm text-yellow-700 whitespace-pre-line">{!! $deposit->payload['instructions'] !!}</p>
            </div>
        @endif

        <div class="flex gap-3">
            <a href="{{ route('user.wallet') }}" class="flex-1 text-center px-4 py-2.5 text-sm font-medium border border-gray-300 rounded-lg hover:bg-gray-50">{{ __('Back to wallet') }}</a>
            <form action="{{ route('user.wallet.cancel', $deposit->code) }}" method="POST">
                @csrf
                <button type="submit" class="px-4 py-2.5 text-sm font-medium text-red-600 border border-red-300 rounded-lg hover:bg-red-50">{{ __('Cancel') }}</button>
            </form>
        </div>
    </div>
</div>
@endsection