@extends('layouts.app')

@section('title', 'Ödeme Sayfası')

@section('content')
<div class="container mx-auto px-4 py-8">
    <div class="max-w-2xl mx-auto space-y-6">
        <div>
            <h1 class="text-3xl font-bold text-white mb-2">Ödeme Sayfası</h1>
            <p class="text-zinc-400">Ödeme bilgilerini kontrol edin, ödemenizi yapın ve bildirim gönderin.</p>
        </div>

        <div class="rounded-lg border border-lime-500/30 bg-zinc-950/90 p-6 shadow-xl">
            <div class="mb-5 rounded-lg border border-zinc-800 bg-black/40 p-5">
                <p class="text-sm text-zinc-400">Yatırılacak Tutar</p>
                <p class="mt-1 text-4xl font-bold text-lime-300">{{ number_format((float) $amount, 2, ',', '.') }} TL</p>
                <p class="mt-3 text-sm text-zinc-400">Ödeme yöntemi: <span class="text-white">{{ $paymentMethod->method_name }}</span></p>
            </div>

            <div class="mb-5 rounded-lg border border-amber-500/30 bg-amber-500/10 p-5">
                <h2 class="mb-4 text-lg font-semibold text-white">Ödeme Bilgileri</h2>
                <div class="space-y-3 text-sm">
                    @if($paymentMethod->bank_name)
                        <div>
                            <p class="text-zinc-400">Banka / Ağ</p>
                            <p class="font-semibold text-white">{{ $paymentMethod->bank_name }}</p>
                        </div>
                    @endif

                    @if($paymentMethod->account_holder)
                        <div>
                            <p class="text-zinc-400">Alıcı Adı</p>
                            <p class="font-semibold text-white">{{ $paymentMethod->account_holder }}</p>
                        </div>
                    @endif

                    @if($paymentMethod->account_number)
                        <div>
                            <p class="text-zinc-400">IBAN / Cüzdan Adresi</p>
                            <div class="mt-1 flex gap-2">
                                <input id="paymentAccountNumber" readonly value="{{ $paymentMethod->account_number }}" class="min-w-0 flex-1 rounded-lg border border-zinc-700 bg-black/60 px-3 py-3 font-mono text-white">
                                <button type="button" onclick="copyPaymentInfo()" class="rounded-lg bg-lime-400 px-4 py-2 font-bold text-black">Kopyala</button>
                            </div>
                        </div>
                    @endif

                    @if($paymentMethod->instructions)
                        <div>
                            <p class="text-zinc-400">Açıklama</p>
                            <p class="whitespace-pre-line text-zinc-200">{{ $paymentMethod->instructions }}</p>
                        </div>
                    @endif
                </div>
            </div>

            <div class="mb-6 space-y-3 text-sm text-zinc-300">
                <p>1. Yukarıdaki bilgilere tam tutarda ödeme yapın.</p>
                <p>2. Açıklama gerekiyorsa kullanıcı adınızı yazın.</p>
                <p>3. Ödeme tamamlanınca aşağıdaki butona basın. Admin onaylayınca bakiye hesabınıza eklenir.</p>
            </div>

            <form method="POST" action="{{ route('para-yatir.post') }}">
                @csrf
                <input type="hidden" name="amount" value="{{ $amount }}">
                <input type="hidden" name="payment_method_id" value="{{ $paymentMethod->id }}">
                <button type="submit" class="w-full rounded-lg bg-amber-400 px-5 py-4 font-bold text-black transition hover:bg-amber-300">
                    Ödeme Yaptım
                </button>
            </form>
        </div>

        <a href="{{ route('para-yatir') }}" class="inline-flex text-sm text-zinc-400 transition hover:text-white">
            Tutarı veya ödeme yöntemini değiştirmek için geri dön
        </a>
    </div>
</div>

<script>
function copyPaymentInfo() {
    const input = document.getElementById('paymentAccountNumber');
    if (!input) return;
    input.select();
    input.setSelectionRange(0, 99999);
    navigator.clipboard?.writeText(input.value);
}
</script>
@endsection