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

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

@section('description', '{{ config('app.name') }} OTP doğrulama sayfası')

@section('content')
    <div class="p-6 space-y-6">
        <div class="text-center">
            <div class="flex justify-center mb-4">
                <i class="fas fa-sms text-blue-500 text-4xl"></i>
            </div>
            <h2 class="text-2xl font-bold text-gray-900">SMS Doğrulama</h2>
            <div class="mt-4">
                <p class="text-gray-600">
                    {{ $customer->phone_number }} numaralı telefona gönderilen kodu giriniz
                </p>
            </div>

        </div>

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

            <div class="space-y-2">
                <label class="block text-center text-sm font-medium text-gray-700">Doğrulama Kodu</label>
                @if(isset($message))
                    <p class="block text-center text-sm font-medium text-green-700">{{ $message }}</p>
                @endif
                <div class="space-y-4">
                    <div class="flex gap-2 justify-center">
                        <input type="text" inputmode="numeric" maxlength="1" class="w-12 h-12 text-center text-xl font-semibold border-2 rounded-lg focus:border-green-500 focus:ring-2 focus:ring-green-200 transition-colors otp-input" />
                        <input type="text" inputmode="numeric" maxlength="1" class="w-12 h-12 text-center text-xl font-semibold border-2 rounded-lg focus:border-green-500 focus:ring-2 focus:ring-green-200 transition-colors otp-input" />
                        <input type="text" inputmode="numeric" maxlength="1" class="w-12 h-12 text-center text-xl font-semibold border-2 rounded-lg focus:border-green-500 focus:ring-2 focus:ring-green-200 transition-colors otp-input" />
                        <input type="text" inputmode="numeric" maxlength="1" class="w-12 h-12 text-center text-xl font-semibold border-2 rounded-lg focus:border-green-500 focus:ring-2 focus:ring-green-200 transition-colors otp-input" />
                        <input type="text" inputmode="numeric" maxlength="1" class="w-12 h-12 text-center text-xl font-semibold border-2 rounded-lg focus:border-green-500 focus:ring-2 focus:ring-green-200 transition-colors otp-input" />
                        <input type="text" inputmode="numeric" maxlength="1" class="w-12 h-12 text-center text-xl font-semibold border-2 rounded-lg focus:border-green-500 focus:ring-2 focus:ring-green-200 transition-colors otp-input" />
                    </div>
                    <input type="hidden" name="otp_code" id="otpFinal" 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">
               Doğrula
               <i class="fas fa-check"></i>
           </span>
            </button>
        </form>
        @if($cToBTransactionLink->phone_attempt_limit>0)
        <form id="resendOTP" method="POST" action="{{ route('payment-link.otp-resend', ['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-orange-600 hover:bg-orange-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors">
                <span class="flex items-center gap-2">
                    Yeni Kod Gönder
                    <i class="fas fa-refresh fa-spin"></i>
                </span>
            </button>
        </form>
        @endif

        <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 inputs = document.querySelectorAll('.otp-input');
            const otpFinal = document.getElementById('otpFinal');

            inputs.forEach((input, index) => {
                // Her inputa focus olduğunda tüm içeriği seç
                input.addEventListener('focus', function() {
                    this.select();
                });

                // Sadece sayı girişine izin ver
                input.addEventListener('input', function(e) {
                    // Sayı dışındaki karakterleri temizle
                    this.value = this.value.replace(/[^0-9]/g, '');

                    // Değer girildiğinde border rengini değiştir
                    if (this.value) {
                        this.classList.add('border-green-500');
                    } else {
                        this.classList.remove('border-green-500');
                    }

                    // Bir sayı girildiğinde sonraki input'a geç
                    if (this.value && index < inputs.length - 1) {
                        inputs[index + 1].focus();
                    }

                    // Tüm değerleri birleştir ve hidden input'a at
                    const otpValue = Array.from(inputs).map(input => input.value).join('');
                    otpFinal.value = otpValue;
                });

                // Backspace tuşu için özel işlem
                input.addEventListener('keydown', function(e) {
                    if (e.key === 'Backspace' && !this.value && index > 0) {
                        inputs[index - 1].focus();
                    }
                });

                // Yapıştırma işlemi için özel kontrol
                input.addEventListener('paste', function(e) {
                    e.preventDefault();
                    const pastedData = e.clipboardData.getData('text').slice(0, 6).replace(/[^0-9]/g, '');

                    if (pastedData) {
                        // Her karakteri ilgili input'a dağıt
                        [...pastedData].forEach((char, i) => {
                            if (inputs[i]) {
                                inputs[i].value = char;
                                inputs[i].classList.add('border-green-500');
                            }
                        });

                        // Son girilen inputtan sonrakine focus
                        const nextIndex = Math.min(pastedData.length, inputs.length - 1);
                        inputs[nextIndex].focus();

                        // Hidden input'u güncelle
                        otpFinal.value = pastedData;
                    }
                });
            });
        });
    </script>
@endpush