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

@section('title', 'Telefon Doğrulama - {{ config('app.name') }}')

@section('content')
    <div class="p-6 space-y-6">
        <div class="text-center">
            <h2 class="text-2xl font-bold text-gray-900">Ödeme İşlemi</h2>
            <p class="mt-2 text-sm text-gray-600">
                Güvenli ödeme için telefon numaranızı doğrulayın
            </p>
        </div>

        @if(isset($amount) && $amount > 0)
            <div class="bg-blue-50 rounded-xl p-4">
                <div class="flex justify-between items-center">
                    <span class="text-gray-700">Ödeme Tutarı:</span>
                    <span class="text-lg font-semibold text-blue-600">
                    {{ number_format($amount, 2) }} {{ $currency }}
                </span>
                </div>
            </div>
        @endif

        <form id="phoneForm" method="POST" action="{{ route('payment-link.otp-send', ['hash' => $cToBTransactionLink->hash]) }}">
            @csrf
            <input type="hidden" name="hash" value="{{ $cToBTransactionLink->hash }}">

            <div class="space-y-4">
                <div>
                    <label for="phone_number" class="block text-sm font-medium text-gray-700">
                        Telefon Numarası
                    </label>
                    <div class="mt-1 relative">
                        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                            <i class="fas fa-phone text-gray-400"></i>
                        </div>
                        <input type="tel" id="phone_number" name="phone_number"
                               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"
                               placeholder="+90 5XX XXX XX XX" required>
                    </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">
                    Devam Et
                    <i class="fas fa-arrow-right"></i>
                </span>
                </button>
            </div>
        </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>
        const phoneInput = document.getElementById('phone_number');
        phoneInput.addEventListener('input', function(e) {
            let value = e.target.value.replace(/\D/g, '');
            if (value.length > 0 && !value.startsWith('90')) {
                value = '90' + value;
            }
            if (value.length > 12) {
                value = value.slice(0, 12);
            }
            const groups = value.match(/(\d{2})(\d{3})(\d{3})(\d{2})(\d{2})/);
            if (groups) {
                e.target.value = `+90 ${groups[2]} ${groups[3]} ${groups[4]} ${groups[5]}`; // Değişiklik burada yapıldı
            } else {
                e.target.value = value;
            }
        });
    </script>
@endpush