<?php $__env->startSection('content'); ?>
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card mt-4 pb-4">
                <div class="card-body">
                    <?php if(session('error')): ?>
                    <div class="alert alert-danger" role="alert">
                        <?php echo e(session('error')); ?>

                    </div>
                    <?php endif; ?>

                    <?php if(session('message')): ?>
                    <div class="alert alert-success" role="alert">
                    <?php echo e(session('message')); ?>

                    </div>
                    <?php endif; ?>
                    
                    <h5 class='text-center'>Please enter the OTP sent to your number: <?php echo e(Auth::User()->phone); ?></h5>
                    <form  method="POST" action="<?php echo e(route('verify.verify')); ?>">
                        <?php echo csrf_field(); ?>
                    
                    <div class='row d-flex justify-content-center'>
                        <div class="col-md-8">
                            <div class="form-group">
                                    <input type="hidden" name="phone" value="<?php echo e(Auth::User()->phone); ?>" placeholder='Verification Code'>
                                    <input id="verification_code" type="tel"
                                        class="form-control <?php $__errorArgs = ['verification_code'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?> is-invalid <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>"
                                        name="verification_code" value="<?php echo e(old('verification_code')); ?>" placeholder='Verification Code' required>
                                    <?php $__errorArgs = ['verification_code'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?>
                                    <span class="invalid-feedback" role="alert">
                                        <strong><?php echo e($message); ?></strong>
                                    </span>
                                    <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
                            </div>
                            <div class="form-group">
                                    <button type="submit" class="btn btn-primary">
                                        <?php echo e(__('Verify Phone Number')); ?>

                                    </button>
                            </div>
                        </div>
                    </div>
                    </form>
                   
                    <div class="row d-flex justify-content-center">
                    <div class="col-md-8">
                    <form id='resend_code' style='display:inline-block !important;'>
                        <input type='hidden' name='phone' value="<?php echo e(Auth::User()->phone); ?>">
                        <button class='resend-btn' type='submit'>Resend otp</button>
                    </form><span> Or <a href='#' id='change_number_btn'>Change Number?</a> </span>
                    </div>
                    </div>

                    <!-- change number option -->

                    <form id='change_number' class='mt-3' method='POST' action='<?php echo e(route("change-phone-number")); ?>'>
                        <?php echo csrf_field(); ?>
                        <div class="row d-flex justify-content-center">
                            <div class="col-md-8">
                                <div class='form-group'>
                                    <label for="verification_code">New Phone Number:</label>                    
                                        <input name='phone' id='phone_number' value='<?php echo e(Auth::User()->phone); ?>' class='form-control'>
                                    </div>
                                    <div class="form-group mb-0">
                                            <button type="submit" class="btn btn-success">
                                                <?php echo e(__('Change Phone Number')); ?>

                                            </button>
                                    </div>
                                </div>
                        </div>
                    </form>
                   

                   
                    <div id="otp-resend-status" style="margin-top: 20px;"></div>
                </div>
            </div>
        </div>
    </div>
</div>
 <script>
    $(document).ready(function(){
        $('#resend_code').on('submit', function(e) {
        e.preventDefault(); 
        var formData = $(this).serialize();
        $.ajax({
            headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            type: 'POST',
            url: '<?php echo e(route("resend-otp")); ?>',
            data: formData, // Pass serialized form data
            success: function(response) {
                    $('#otp-resend-status').html('<div class="alert alert-success">' + response.status + '</div>');
                },
                error: function(response) {
                    $('#otp-resend-status').html('<div class="alert alert-danger">Failed to resend OTP. Please try again.</div>');
                }
        });
        
      });
    });
    </script>
      
      <script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/intlTelInput.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/utils.js"></script>

      <script>
    document.addEventListener('DOMContentLoaded', function() {
        console.log('DOM fully loaded and parsed');
        var input = document.querySelector("#phone_number");
        if (input) {
            console.log('Phone input found', input);
            try {
                var iti = window.intlTelInput(input, {
                    initialCountry: "auto",
                    geoIpLookup: function(callback) {
                        $.get('https://ipinfo.io', function() {}, "jsonp").always(function(resp) {
                            var countryCode = (resp && resp.country) ? resp.country : "us";
                            callback(countryCode);
                        });
                    },
                    utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/utils.js"
                });

                function validateInput() {
                    if (iti.isValidNumber()) {
                        var countryCode = iti.getSelectedCountryData().dialCode;
                    var currentNumber = iti.getNumber(intlTelInputUtils.numberFormat.E164);
                    $('#phone_number').val(currentNumber);
                        console.log('Phone number is valid');
                    } else {
                        console.log('Phone number is invalid');
                    }
                }

                function handleInput() {
                    var countryCode = iti.getSelectedCountryData().dialCode;
                    var currentNumber = iti.getNumber(intlTelInputUtils.numberFormat.E164);
                    $('#phone_number').val(currentNumber);
                    validateInput();
                }

                $(document).ready(function() {
                    $('.iti__flag-container').click(handleInput);
                    $('#phone_number').on('blur', validateInput);
                });

            } catch (error) {
                console.error('Error initializing intlTelInput', error);
            }
        } else {
            console.error('Phone input element not found');
        }
    });
</script>

<script>
 $(document).ready(function(){
    $('#change_number_btn').click(function(){
        $('#change_number').toggle();
    });
 });

</script>


<?php $__env->stopSection(); ?>
<?php echo $__env->make('layouts.app', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH /Applications/XAMPP/xamppfiles/htdocs/tprproject/get-myaio-app/resources/views/auth/verify.blade.php ENDPATH**/ ?>