@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.transfer') }}" 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>
        Go Back
    </a>

    <h1 class="text-2xl font-bold text-gray-900 mb-8">Confirm Transfer</h1>

    <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6 sm:p-8 mb-6">
        <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">From</span>
                <div class="text-right">
                    <p class="text-sm font-medium text-gray-900">{{ $transfer->sourceAccount->type ?? 'Account' }} (****{{ substr($transfer->source_account_number ?? '0000', -4) }})</p>
                </div>
            </div>

            <div class="flex items-center justify-between py-3 border-b border-gray-100">
                <span class="text-sm text-gray-500">To</span>
                <div class="text-right">
                    <p class="text-sm font-medium text-gray-900">{{ $transfer->recipient_name }}</p>
                    <p class="text-xs text-gray-500">{{ $transfer->recipient_account_number }} @if(isset($transfer->bank_name)) &middot; {{ $transfer->bank_name }} @endif</p>
                </div>
            </div>

            <div class="flex items-center justify-between py-3 border-b border-gray-100">
                <span class="text-sm text-gray-500">Amount</span>
                <p class="text-2xl font-bold text-gray-900">${{ number_format($transfer->amount, 2) }}</p>
            </div>

            <div class="flex items-center justify-between py-3 border-b border-gray-100">
                <span class="text-sm text-gray-500">Fee</span>
                <p class="text-sm font-medium text-gray-900">${{ number_format($transfer->fee ?? 0, 2) }}</p>
            </div>

            <div class="flex items-center justify-between py-3 border-b border-gray-100">
                <span class="text-sm text-gray-700 font-medium">Total</span>
                <p class="text-lg font-bold text-[#0D6B58]">${{ number_format($transfer->amount + ($transfer->fee ?? 0), 2) }}</p>
            </div>

            @if($transfer->description)
            <div class="py-3 border-b border-gray-100">
                <span class="text-sm text-gray-500">Description</span>
                <p class="text-sm text-gray-900 mt-1">{{ $transfer->description }}</p>
            </div>
            @endif
        </div>
    </div>

    <div class="bg-amber-50 border border-amber-200 rounded-xl p-4 mb-6">
        <div class="flex items-start space-x-3">
            <svg class="w-5 h-5 text-amber-500 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z"/>
            </svg>
            <p class="text-sm text-amber-700">Please verify all details before confirming. This action cannot be undone.</p>
        </div>
    </div>

    <form method="POST" action="{{ route('customer.transfer.confirm') }}">
        @csrf
        @method('POST')

        <input type="hidden" name="transfer_id" value="{{ $transfer->id }}">

        <div class="mb-6">
            <label class="block text-sm font-medium text-gray-700 mb-3">Enter Transaction PIN</label>
            <div class="flex justify-center space-x-3" id="pin-container">
                <input type="password" maxlength="1" class="pin-input w-12 h-14 text-center text-xl font-bold border border-gray-200 rounded-lg focus:ring-2 focus:ring-[#0D6B58]/20 focus:border-[#0D6B58]" data-index="0" inputmode="numeric" pattern="[0-9]" required>
                <input type="password" maxlength="1" class="pin-input w-12 h-14 text-center text-xl font-bold border border-gray-200 rounded-lg focus:ring-2 focus:ring-[#0D6B58]/20 focus:border-[#0D6B58]" data-index="1" inputmode="numeric" pattern="[0-9]">
                <input type="password" maxlength="1" class="pin-input w-12 h-14 text-center text-xl font-bold border border-gray-200 rounded-lg focus:ring-2 focus:ring-[#0D6B58]/20 focus:border-[#0D6B58]" data-index="2" inputmode="numeric" pattern="[0-9]">
                <input type="password" maxlength="1" class="pin-input w-12 h-14 text-center text-xl font-bold border border-gray-200 rounded-lg focus:ring-2 focus:ring-[#0D6B58]/20 focus:border-[#0D6B58]" data-index="3" inputmode="numeric" pattern="[0-9]">
            </div>
            <input type="hidden" name="pin" id="pin-hidden">
            @error('pin')
            <p class="mt-2 text-sm text-rose-600 text-center">{{ $message }}</p>
            @enderror
        </div>

        <button type="submit" id="confirm-btn" class="w-full py-3 bg-[#0D6B58] text-white font-semibold rounded-lg hover:bg-[#0A5A49] transition disabled:opacity-50 disabled:cursor-not-allowed" disabled>
            Confirm Transfer
        </button>
    </form>

</div>

<script>
const pinInputs = document.querySelectorAll('.pin-input');
const pinHidden = document.getElementById('pin-hidden');
const confirmBtn = document.getElementById('confirm-btn');

pinInputs.forEach((input, index) => {
    input.addEventListener('input', function() {
        if (this.value.length === 1 && index < pinInputs.length - 1) {
            pinInputs[index + 1].focus();
        }
        updatePin();
    });
    input.addEventListener('keydown', function(e) {
        if (e.key === 'Backspace' && !this.value && index > 0) {
            pinInputs[index - 1].focus();
        }
    });
});

function updatePin() {
    const pin = Array.from(pinInputs).map(i => i.value).join('');
    pinHidden.value = pin;
    confirmBtn.disabled = pin.length !== 4;
}
</script>
@endsection