@extends('layouts.default')
@section('content')
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-6">
                <div class="text-center mb-4">
                    <h2 class="fw-400">{{__('İşlem Doğrulama')}}</h2>
                    <p class="lead">{{__('Test OTP Doğrulama Sayfası')}}</p>
                </div>

                <div class="bg-white shadow-sm rounded p-4">
                    @if ($errors->any())
                        <div class="alert alert-danger">
                            @foreach ($errors->all() as $error)
                                {{ $error }}
                            @endforeach
                        </div>
                    @endif

                    <div class="mb-4 text-center">
                        <button type="button" id="sendOtpBtn" class="btn btn-success btn-lg mb-4">
                            {{__('OTP Gönder')}}
                        </button>
                    </div>

                    <form action="{{ route('otp.verify') }}" method="POST">
                        @csrf
                        <div class="mb-4">
                            <label for="otp_code" class="form-label">{{__('Doğrulama Kodu')}}</label>
                            <input type="text"
                                   class="form-control form-control-lg text-center"
                                   id="otp_code"
                                   name="otp_code"
                                   required
                                   maxlength="6"
                                   autocomplete="off"
                                   placeholder="000000">
                            <div class="form-text text-center">
                                {{__('E-posta adresinize gönderilen 6 haneli kodu giriniz')}}
                            </div>
                        </div>

                        <div class="d-grid gap-2">
                            <button type="submit" class="btn btn-primary btn-lg">
                                {{__('Doğrula')}}
                            </button>
                            <button type="button" class="btn btn-outline-secondary" onclick="window.history.back();">
                                {{__('İptal')}}
                            </button>
                        </div>
                    </form>
                </div>

                <div class="text-center mt-4">
                    <p class="text-muted small">
                        {{__('Doğrulama kodu 5 dakika boyunca geçerlidir')}}
                    </p>
                </div>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const otpInput = document.getElementById('otp_code');
            const sendOtpBtn = document.getElementById('sendOtpBtn');

            // OTP Gönderme işlemi
            sendOtpBtn.addEventListener('click', function() {
                sendOtpBtn.disabled = true;
                sendOtpBtn.innerHTML = 'Gönderiliyor...';

                fetch('{{ route("otp.send") }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    body: JSON.stringify({
                        email: '{{ auth()->user()->email }}'
                    })
                })
                    .then(response => response.json())
                    .then(data => {
                        if (!data.success) {
                            showNotification(data.message, 'error');
                            return;
                        }
                        showNotification('Doğrulama kodu gönderildi', 'success');
                    })
                    .catch(error => {
                        showNotification('Bir hata oluştu', 'error');
                    })
                    .finally(() => {
                        sendOtpBtn.disabled = false;
                        sendOtpBtn.innerHTML = 'OTP Gönder';
                    });
            });

            // Sadece sayısal değer girişine izin ver
            otpInput.addEventListener('input', function(e) {
                this.value = this.value.replace(/[^0-9]/g, '');
            });

            // Otomatik form gönderimi
            otpInput.addEventListener('input', function(e) {
                if (this.value.length === 6) {
                    this.closest('form').submit();
                }
            });
        });
    </script>
@endsection