@extends('payment-link.layouts.app')

@section('title', 'Ödeme Tutarı - {{ config('app.name') }}')

@section('description', '{{ config('app.name') }} ödeme tutarı onay sayfası')

    @section('content')
        <div class="p-6 space-y-6">
            <div class="text-center">
                <h2 class="text-2xl font-bold text-gray-900">Ödeme Onayı</h2>
                <h3 class="text-xl font-bold mt-4 text-gray-800">Cüzdan Bakiyesi: {{ number_format($walletBalance, 2, ',', '.') }} {{$currency->short_name_two}}</h3>

                @if(!$isWalletBalanceEnought)
                    <div class="mt-4 p-4 bg-yellow-50 rounded-lg">
                        <h4 class="text-base text-yellow-700 font-medium">
                            <i class="fas fa-exclamation-triangle mr-2"></i>
                            Cüzdan bakiyeniz yeterli değil. Lütfen Tutarı güncelleyiniz
                        </h4>
                    </div>
                @endif
            </div>

            <form action="{{ route('payment-link.send',['hash'=>$cToBTransactionLink->hash]) }}" method="POST" class="space-y-4 mt-6">
                @csrf
                <input type="hidden" name="hash" value="{{ $cToBTransactionLink->hash }}">

                <div class="space-y-2">
                    <label class="block text-sm font-medium text-gray-700">
                        Tutar ({{ $cToBTransactionLink->amount }})
                    </label>
                    <div class="relative">
                        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                            <i class="fas fa-money-bill-wave text-gray-400"></i>
                        </div>
                        <input
                                type="text"
                                name="amount"
                                value="{{ number_format($cToBTransactionLink->amount ?? 100.00, 2, ',', '.') }}"
                                class="block w-full pl-10 pr-3 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 {{ !$isEditedAmount ? 'bg-gray-50' : '' }}"
                                required
                                @if(!$isEditedAmount) readonly @endif
                        >
                    </div>
                </div>

                @if ($errors->any())
                    <div class="rounded-lg bg-red-50 p-4">
                        <div class="flex">
                            <div class="flex-shrink-0">
                                <i class="fas fa-exclamation-circle text-red-400"></i>
                            </div>
                            <div class="ml-3">
                                @foreach ($errors->all() as $error)
                                    <p class="text-sm text-red-700">{{ $error }}</p>
                                @endforeach
                            </div>
                        </div>
                    </div>
                @endif

                <button type="submit"
                        class="w-full flex justify-center py-3 px-4 border border-transparent rounded-lg text-sm font-semibold text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors">
            <span class="flex items-center gap-2">
                Ödemeyi Tamamla
                <i class="fas fa-check"></i>
            </span>
                </button>
            </form>
            <form id="cancelForm" method="POST" action="{{ route('payment-link.payment-cancel', ['hash' => $cToBTransactionLink->hash]) }}">
                @csrf
                <input type="hidden" name="hash" value="{{ $cToBTransactionLink->hash }}">
                <button type="submit"
                        class="w-full flex justify-center py-3 px-4 border border-transparent rounded-lg text-sm font-semibold text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors">
                <span class="flex items-center gap-2">
                    İptal Et
                    <i class="fas fa-times"></i>
                </span>
                </button>
            </form>
        </div>
    @endsection
@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const amountInput = document.querySelector('input[name="amount"]');

            amountInput.addEventListener('input', function(e) {
                // Tüm nokta ve virgülleri kaldır, sadece rakamları al
                let value = e.target.value.replace(/[^\d]/g, '');

                // Değeri kuruşlu formata çevir (100 -> 1,00)
                value = (parseInt(value) / 100).toFixed(2);

                // Binlik ayracı ve virgül formatı uygula
                value = value.replace('.', ',');
                value = value.replace(/\B(?=(\d{3})+(?!\d))/g, '.');

                // Input değerini güncelle
                e.target.value = value;
            });

            // Form gönderilmeden önce değeri düzelt
            amountInput.closest('form').addEventListener('submit', function(e) {
                e.preventDefault();

                // Değeri decimal formata çevir
                const value = amountInput.value.replace(/\./g, '').replace(',', '.');

                // Değeri kontrol et
                if (isNaN(value) || parseFloat(value) <= 0) {
                    alert('Lütfen geçerli bir tutar giriniz');
                    return;
                }

                // Decimal değeri inputa ata ve formu gönder
                amountInput.value = parseFloat(value).toFixed(2);
                this.submit();
            });
        });
    </script>
@endpush