@extends('layouts.app')
@section('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">
                    @if (session('error'))
                    <div class="alert alert-danger" role="alert">
                        {{session('error')}}
                    </div>
                    @endif

                    @if(session('message'))
                    <div class="alert alert-success" role="alert">
                    {{session('message')}}
                    </div>
                    @endif
                    
                    <h5 class='text-center'>Please enter the OTP sent to your number: {{Auth::User()->phone}}</h5>
                    <form  method="POST" action="{{route('verify.verify')}}">
                        @CSRF
                    
                    <div class='row d-flex justify-content-center'>
                        <div class="col-md-8">
                            <div class="form-group">
                                    <input type="hidden" name="phone" value="{{Auth::User()->phone}}" placeholder='Verification Code'>
                                    <input id="verification_code" type="tel"
                                        class="form-control @error('verification_code') is-invalid @enderror"
                                        name="verification_code" value="{{ old('verification_code') }}" placeholder='Verification Code' required>
                                    @error('verification_code')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                    @enderror
                            </div>
                            <div class="form-group">
                                    <button type="submit" class="btn btn-primary">
                                        {{ __('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="{{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='{{route("change-phone-number")}}'>
                        @CSRF
                        <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='{{Auth::User()->phone}}' class='form-control'>
                                        <span class="countryerror" role="alert">
                                        <strong></strong>
                                    </span>
                                    </div>
                                    <div class="form-group mb-0">
                                            <button type="submit" class="btn btn-success">
                                                {{ __('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: '{{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: "us",
                    onlyCountries: ["us","ca"],
                    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() {
                    var isValid = iti.isValidNumber();
                    var countryCode = iti.getSelectedCountryData().iso2;
                    if (isValid && (countryCode === "us" || countryCode === "ca")) {
                        var currentNumber = iti.getNumber(intlTelInputUtils.numberFormat.E164);
                        $('#phone_number').val(currentNumber);
                        console.log('Phone number is valid and from US or Canada');
                        return true;
                    } else {
                        console.log('Phone number is invalid or not from US or Canada');
                        return false;
                    }
                }

                function handleInput() {
                    var countryCode = iti.getSelectedCountryData().dialCode;
                    var currentNumber = iti.getNumber(intlTelInputUtils.numberFormat.E164);
                    $('#phone_number').val(currentNumber);
                    validateInput();
                }
                function restrictInputLength() {
                    var maxLength = iti.getSelectedCountryData().dialCode.length + 10; // US and Canada numbers have up to 10 digits
                    var currentNumber = input.value.replace(/\D/g, ''); // Remove non-digit characters
                    if (currentNumber.length > maxLength) {
                        input.value = currentNumber.slice(0, maxLength);
                    }
                }

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

                    $('#change_number').on('submit', function(e) {
                        if (!validateInput()) {
                            e.preventDefault();
                            $('.countryerror strong').text("Please enter a valid phone number from the US or Canada.");
                        }
                    });
                });

            } 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>


@endsection