@extends('layouts.app')

@section('title', 'Para Yatır')

@section('content')
<div class="container mx-auto px-4 py-8">
    <div class="max-w-3xl mx-auto space-y-6">
        <div>
            <h1 class="text-3xl font-bold text-white mb-2">Para Yatır</h1>
            <p class="text-zinc-400">Tutarı yazın, ödeme adımına geçin ve işlemi admin onayına gönderin.</p>
        </div>

        @if(session('success_message'))
            <div class="rounded-lg border border-lime-500/40 bg-lime-500/10 p-4 text-lime-300">
                {{ session('success_message') }}
            </div>
        @endif

        @if(session('error_message'))
            <div class="rounded-lg border border-red-500/40 bg-red-500/10 p-4 text-red-300">
                {{ session('error_message') }}
            </div>
        @endif

        @if(isset($errors) && $errors->any())
            <div class="rounded-lg border border-red-500/40 bg-red-500/10 p-4 text-red-300">
                {{ $errors->first() }}
            </div>
        @endif

        <div class="rounded-lg border border-zinc-800 bg-zinc-950/80 p-6 shadow-xl">
            <form id="manualDepositForm" method="GET" action="{{ route('odeme-sayfasi') }}" class="space-y-5">
                <div>
                    <label for="amount" class="block text-sm font-medium text-zinc-300 mb-2">Yatırılacak Tutar</label>
                    <div class="relative">
                        <input
                            id="amount"
                            name="amount"
                            type="number"
                            min="50"
                            max="100000"
                            step="1"
                            value="{{ old('amount', 500) }}"
                            class="w-full rounded-lg border border-zinc-700 bg-black/50 px-4 py-4 pr-16 text-lg font-semibold text-white outline-none transition focus:border-lime-400"
                            placeholder="500">
                        <span class="absolute right-4 top-1/2 -translate-y-1/2 text-zinc-400">TL</span>
                    </div>
                    <p class="mt-2 text-xs text-zinc-500">Minimum 50 TL, maksimum 100.000 TL.</p>
                </div>

                <div class="grid grid-cols-3 gap-2 sm:grid-cols-6">
                    @foreach([100, 250, 500, 1000, 2500, 5000] as $quickAmount)
                        <button
                            type="button"
                            class="quick-amount rounded-lg border border-zinc-700 bg-zinc-900 px-3 py-2 text-sm text-zinc-200 transition hover:border-lime-400 hover:text-lime-300"
                            data-amount="{{ $quickAmount }}">
                            {{ number_format($quickAmount, 0, ',', '.') }} TL
                        </button>
                    @endforeach
                </div>

                <div>
                    <label for="payment_method_id" class="block text-sm font-medium text-zinc-300 mb-2">Ödeme Yöntemi</label>
                    @if($paymentMethods->count())
                        <select
                            id="payment_method_id"
                            name="payment_method_id"
                            class="w-full rounded-lg border border-zinc-700 bg-black/50 px-4 py-3 text-white outline-none transition focus:border-lime-400">
                            @foreach($paymentMethods as $method)
                                <option value="{{ $method->id }}" data-min="{{ $method->min_amount }}" data-max="{{ $method->max_amount }}">
                                    {{ $method->method_name }} - Min {{ number_format($method->min_amount, 0, ',', '.') }} TL
                                </option>
                            @endforeach
                        </select>
                    @else
                        <div class="rounded-lg border border-red-500/30 bg-red-500/10 p-4 text-red-300">
                            Şu anda aktif ödeme yöntemi yok. Lütfen daha sonra tekrar deneyin.
                        </div>
                    @endif
                </div>

                <button
                    type="submit"
                    @if(!$paymentMethods->count()) disabled @endif
                    class="w-full rounded-lg bg-lime-400 px-5 py-4 font-bold text-black transition hover:bg-lime-300">
                    Ödeme Sayfasına Geç
                </button>
            </form>
        </div>

        <div class="rounded-lg border border-zinc-800 bg-zinc-950/70 p-5">
            <h2 class="mb-4 text-lg font-semibold text-white">Son Yatırım Taleplerim</h2>

            @if(isset($recentDeposits) && $recentDeposits->count())
                <div class="space-y-3">
                    @foreach($recentDeposits as $deposit)
                        <div class="flex items-center justify-between rounded-lg border border-zinc-800 bg-black/30 px-4 py-3">
                            <div>
                                <p class="font-semibold text-white">{{ number_format((float) $deposit->miktar, 2, ',', '.') }} TL</p>
                                <p class="text-xs text-zinc-500">{{ $deposit->tarih ? $deposit->tarih->format('d.m.Y H:i') : '-' }} - {{ $deposit->banka }}</p>
                            </div>
                            @if((int) $deposit->durum === 0)
                                <span class="rounded-full border border-amber-500/30 bg-amber-500/10 px-3 py-1 text-xs font-medium text-amber-300">İşleniyor</span>
                            @elseif((int) $deposit->durum === 1)
                                <span class="rounded-full border border-lime-500/30 bg-lime-500/10 px-3 py-1 text-xs font-medium text-lime-300">Onaylandı</span>
                            @else
                                <span class="rounded-full border border-red-500/30 bg-red-500/10 px-3 py-1 text-xs font-medium text-red-300">Reddedildi</span>
                            @endif
                        </div>
                    @endforeach
                </div>
            @else
                <p class="text-sm text-zinc-500">Henüz yatırım talebiniz yok.</p>
            @endif
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function () {
    const amountInput = document.getElementById('amount');

    document.querySelectorAll('.quick-amount').forEach(function (button) {
        button.addEventListener('click', function () {
            amountInput.value = this.dataset.amount;
        });
    });
});
</script>
@endsection