@extends('layouts.v2.frontend')

@section('title', '| Mobile Verification')

@section('content')
<div class="login-section">
    <div class="row align-items-center">
        <div class="col-xl-6 col-lg-6">
            <div class="left-img shine-effect">
                <img src="{{url('v2/images/contact-img.png')}}" alt="">
            </div>
        </div>
        <div class="col-xl-6 col-lg-6">
            <div class="login-form-area">

                @if(session('payment_error'))
                    <div class="alert alert-danger">
                        {{ session('payment_error') }}
                    </div>
                @endif
                
              <div id="otp-screen" class="row justify-content-center text-center mb-5 d-flex align-items-center" style="min-height: 60vh; margin-top: -80px;">
                
                <div class="col-md-12 my-5">
                  <img src="{{url('v2/images/mobile-verification.png')}}" alt="Mobile Verification" width="100px"/>
                </div>
                <div class="col-md-12">
                  <div class="payment-successful-title">
                    Verification Code Confirmation
                  </div>
                </div>
                @php
                    if ($is_mobile_number_updated) {
                        $cancelRequestUrl = route('cancel-request-to-update-mobile-number', ['id' => $history_id]);
                        $text = 'We have sent you a verification code to your requested phone number +' . $formattedNumber . ' to update your mobile number.  <br/><a href="#" id="cancelRequestLink" class="profile_edit_request_link">Click here</a> to cancel the update request.';
                    } else {
                        $text = 'We have sent you a verification code to your phone number +' . $formattedNumber;
                    }
                @endphp
                <div class="col-md-12 mb-2">
                    <div class="d-flex justify-content-center col-gap">
                        <p class="mobile_verification_content">{!! $text !!}</p>
                    </div>
                </div>
          
                <!-- Hidden form to cancel the request -->
                <form id="cancelRequestForm" method="POST" action="{{ route('cancel-request-to-update-mobile-number')}}" style="display: none;">
                    @csrf
                    <input type="hidden" name="history_id" value="{{$history_id}}"/>
                    <!-- Add any necessary hidden fields here -->
                </form>
                
                <form id="otpForm" method="POST" action="{{ route('mobile.verification.code.verify') }}">
                  @csrf
                 
                  <input type="hidden" name="is_mobile_number_updated" value="{{$is_mobile_number_updated}}"/>
                  <input type="hidden" name="history_id" value="{{$history_id}}"/>
                  <div id="otp" class="otp_inputs d-flex flex-row justify-content-center mt-2 mx-auto" style="width: fit-content; margin: 0 auto;">
                    <input class="text-center form-control rounded" style="width: 45px; height: 45px; padding: 0; font-size: 20px; margin: 0 2.5px;" type="text" id="first" maxlength="1" required autocomplete="off"/>
<input class="text-center form-control rounded" style="width: 45px; height: 45px; padding: 0; font-size: 20px; margin: 0 3px;" type="text" id="second" maxlength="1" required autocomplete="off"/>
<input class="text-center form-control rounded" style="width: 45px; height: 45px; padding: 0; font-size: 20px; margin: 0 3px;" type="text" id="third" maxlength="1" required autocomplete="off"/>
<input class="text-center form-control rounded" style="width: 45px; height: 45px; padding: 0; font-size: 20px; margin: 0 3px;" type="text" id="fourth" maxlength="1" required autocomplete="off"/>
<input class="text-center form-control rounded" style="width: 45px; height: 45px; padding: 0; font-size: 20px; margin: 0 3px;" type="text" id="fifth" maxlength="1" required autocomplete="off"/>
<input class="text-center form-control rounded" style="width: 45px; height: 45px; padding: 0; font-size: 20px; margin: 0 3px;" type="text" id="sixth" maxlength="1" required autocomplete="off"/>
                  </div>
                  <div class="col-md-12 mt-3 mb-3">
                    <a href="#" id="resendOtpBtn" class="back_dashboard_btn"><u>Resend verification code</u></a>

                    <!-- 
                    Commeting because we are are verifying user on Regsiter page . And no use of registration_complete now
                    @if(!$user_details->registration_complete)
                    <a href="#" id="changeNumberBtn" class="back_dashboard_btn mx-5"><u>Change Number</u></a>
                    @endif -->
                  </div>
                  <div class="mt-4"> 
                    <button type="submit" id="verifyBtn" class="px-5 validate">Verify Now</button> 
                  </div>
                </form>
          
                <div class="col-md-12 mb-2">
                  <div id="loadingMessage" class="mt-3"></div>
                  <!-- Response Message -->
                  <div id="responseMessage" class="mt-3"></div>
                </div>
              </div>
            @if(!$user_details->registration_complete)
              <div id="change-number-screen" class="otp-verification-section" style="display: none;">
                <div class="container">
                  <div class="row justify-content-center">
                        <h5>Change Mobile Number</h5>

                        <div id="updateResponseMessage" class="mb-3"></div>

                        <form id="changeNumberForm">
                            <div class="mb-3">
                                <div class="row">
                                    <div class="col-3">
                                      <div class="d-flex gap-1">
                                        <span class="input-group-text">+</span>
                                        <input id="phone_country_code" type="text"  oninput="validateInputNumber()" class="number_validation @error('phone_country_code') is-invalid @enderror" name="phone_country_code" value="{{ old('phone_country_code') ?? '1' }}"  placeholder="CC" maxlength="10"  required style="max-width: 80px;" readonly>
                                      </div>
                                    </div>
                                    <div class="col-9">
                                      <input id="phone_number" type="text" oninput="formatPhoneNumber()" class="number_validation @error('phone_number') is-invalid @enderror" name="phone_number" value="{{ old('phone_number') }}" placeholder="Phone Number"maxlength="12"  required>
                                    </div>
                                    <div class="col-md-12">
                                      @error('phone_country_code')
                                        <span class="invalid-feedback d-block" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                      @enderror
                                      @error('phone_number')
                                        <span class="invalid-feedback d-block" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                      @enderror
                                    </div>
                                  </div>
                            </div>
                          <button type="submit" id="updateNumberBtn" class="form-control login-button mt-4">Update Mobile Number</button>
                        </form>
                        <div class="text-center mt-3">
                            <a href="#" class="back_dashboard_btn" id="cancelUpdateBtn">Back to Verification</a>
                        </div>
                  </div>
                </div>
              </div>
            @endif


            </div>
        </div>
    </div>
</div>

<!-- START - Pop up for confirm Cancel the Mobile Number change request Together-->
<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true" id="confirm-cancel-mobile-number-request-modal">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            
            <div class="modal-body text-center" id="cancelSubmitDisclaimerMessageModalBody">
                <div class="text-center mb-4 mt-4">
                    <h4 class="dislaimer-header"> <b> Warning </b></h4>
                </div>

                <!-- Disclaimer message content -->
                <p class="dislaimer-message text-center"><strong>It seems you want to cancel your request to change your mobile number. <br/>Are you confirm to cancel the request?  <br/>Please click on "Agree & Continue" if you want to proceed.</strong></p>

                <div class="submit-button-multiple mt-4 mb-4">
                    <button type="button" id="modal-btn-no-cancel-mobile-number-update" data-bs-dismiss="modal" >Cancel</button>
                    <button type="button" id="modal-btn-cancel-mobile-number-update">Agree & Continue</button>
                </div>
            </div>
            
        </div>
    </div>
</div>
<!-- END - Pop up for  confirm Cancel the Mobile Number change request Together -->
@endsection

@section('page-js')
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
 
$(document).ready(function() {

     // Safely embed the user role slug from Laravel into JavaScript
     var userRoleSlug = {!! json_encode(auth()->check() ? auth()->user()->roles->first()->slug : null) !!};

    // Ensure only numeric input and move to the next input on keyup
    $('#otp input').on('input', function() {
      $('#responseMessage').empty();
        this.value = this.value.replace(/[^0-9]/g, '');
        if (this.value.length === 1) {
            $(this).next('input').focus();
        }
    });

    $('#otp input').on('keydown', function(e) {
        if (e.key === "Backspace" && this.value.length === 0) {
            $(this).prev('input').focus();
        }
    });

    // Show modal on "Click here"
    $('#cancelRequestLink').on('click', function(e) {
        e.preventDefault();
        $('#confirm-cancel-mobile-number-request-modal').modal('show');
    });

    // Handle modal confirmation
    $('#modal-btn-cancel-mobile-number-update').on('click', function() {
        $('#cancelRequestForm').submit();
    });

    // Handle form submission via AJAX
    $('#otpForm').on('submit', function(e) {
        e.preventDefault();

        const otp = $('#otp input').map(function() {
            return $(this).val();
        }).get().join('');

        // const userId = $('input[name="userId"]').val();
        const is_mobile_number_updated = $('input[name="is_mobile_number_updated"]').val();
        const history_id = $('input[name="history_id"]').val();

        // Disable inputs and button
        $('#otp input').prop('disabled', true);
        $('#verifyBtn').prop('disabled', true);

        // Disable the resend button and update the cursor style
        $('#resendOtpBtn').prop('disabled', true).css({
            'cursor': 'not-allowed',
            'pointer-events': 'none'
        });

        $('#responseMessage').empty();
        setTimeout(function () {
            // Show loading message with fade-in effect
            $('#loadingMessage').html('<div class=" text-center"  id="spinner"><h6 class="loading_payment_form">Please wait, verifying code...</h6><div class="spinner-border loading_payment_form" role="status"><span class="sr-only loading_payment_form">Please wait, verifying code...</span> </div></div>').fadeIn();
        }, 1000); // 1000 milliseconds (2 seconds) delay

        $.ajax({
            url: '{{ route('mobile.verification.code.verify') }}',
            method: 'POST',
            data: {
                _token: '{{ csrf_token() }}',
                mobile_verification_code: otp,
                // userId: userId,
                is_mobile_number_updated: is_mobile_number_updated,
                history_id: history_id
            },
            success: function(data) {
              setTimeout(function () {
                  // Hide the loading message after showing the response
                  $('#loadingMessage').hide();
                
                  const responseMessage = $('#responseMessage');
                  if (data.success) {
                      responseMessage.html('<p class="mt-1 text-success">'+data.message+'</p>').fadeIn();

                       // Disable inputs and button
                      $('#otp input').prop('disabled', true);
                      $('#verifyBtn').prop('disabled', true);

                      // Disable the resend button and update the cursor style
                      $('#resendOtpBtn').prop('disabled', true).css({
                          'cursor': 'not-allowed',
                          'pointer-events': 'none'
                      });

                      if(is_mobile_number_updated){
                        //Redirect to welcome route after a short delay to show the success message
                        setTimeout(function() {
                            window.location.href = '{{ route("profile") }}';
                        }, 2000); // Adjust the delay time as needed
                      }else{
                        // //Redirect to welcome route after a short delay to show the success message
                        // setTimeout(function() {
                        //     window.location.href = '{{ route("userhomePage") }}';
                        // }, 2000); // Adjust the delay time as needed

                        // Example redirection logic based on role
                        //alert(userRoleSlug);
                        if (userRoleSlug === 'admin' || userRoleSlug === 'attorney' || userRoleSlug === 'super-admin') {
                            setTimeout(function() {
                                window.location.href = '{{ route("adminHome") }}';
                            }, 2000); // Adjust the delay time as needed
                        } else {
                            setTimeout(function() {
                                window.location.href = '{{ route("userhomePage") }}';
                            }, 2000); // Adjust the delay time as needed
                        } 
                      }
                      

                  } else {
                      responseMessage.html('<p class="mt-1 text-danger">'+data.message+'</p>').fadeIn();

                      //empty inputs value
                      $('#otp input').val('');

                      // Enable inputs and button
                      $('#otp input').prop('disabled', false);
                      $('#verifyBtn').prop('disabled', false);

                      // Enable the resend button and update the cursor style
                      $('#resendOtpBtn').prop('disabled', false).css({
                          'cursor': 'pointer',
                          'pointer-events': 'auto'
                      });
                  }

                  
                }, 3000); // 3000 milliseconds (2 seconds) delay
            },
            error: function(jqXHR, textStatus, errorThrown) {
                console.error('Error:', textStatus, errorThrown);
                $('#responseMessage').html('<p class="mt-1 text-danger">An error occurred. Please try again.</p>');

                // Enable inputs and button
                $('#otp input').prop('disabled', false);
                $('#verifyBtn').prop('disabled', false);

                // Enable the resend button and update the cursor style
                $('#resendOtpBtn').prop('disabled', false).css({
                    'cursor': 'pointer',
                    'pointer-events': 'auto'
                });

                //empty inputs value
                $('#otp input').val('');
            }
        });
    });

    // Handle resend OTP via AJAX
    $('#resendOtpBtn').on('click', function(e) {
        //empty inputs value
        $('#otp input').val('');

        e.preventDefault();

        // const userId = $('input[name="userId"]').val();
        const is_mobile_number_updated = $('input[name="is_mobile_number_updated"]').val();
        const history_id = $('input[name="history_id"]').val();

        // Disable the resend button
        $('#resendOtpBtn').prop('disabled', true);

        $('#responseMessage').empty();
        setTimeout(function () {
            // Show loading message with fade-in effect
            $('#loadingMessage').html('<div class=" text-center"  id="spinner"><h6 class="loading_payment_form">Please wait, sending Verification code...</h6><div class="spinner-border loading_payment_form" role="status"><span class="sr-only loading_payment_form">Please wait, sending Verification code...</span> </div></div>').fadeIn();
        }, 1000); // 1000 milliseconds (2 seconds) delay

        $.ajax({
            url: '{{ route('mobile.verification.code.resend') }}',
            method: 'POST',
            data: {
                _token: '{{ csrf_token() }}',
                // userId: userId,
                is_mobile_number_updated: is_mobile_number_updated,
                history_id: history_id
            },
            success: function(data) {

              setTimeout(function () {
                  // Hide the loading message after showing the response
                  $('#loadingMessage').hide();

                    const responseMessage = $('#responseMessage');
                    if (data.success) {
                        responseMessage.html('<p class="mt-1 text-success">'+data.message+'</p>').fadeIn();
                    } else {
                        responseMessage.html('<p class="mt-1 text-danger">'+data.message+'</p>').fadeIn();
                    }

                    // Enable the resend button
                    $('#resendOtpBtn').prop('disabled', false);
                  }, 3000); // 3000 milliseconds (2 seconds) delay
            },
            error: function(jqXHR, textStatus, errorThrown) {
                console.error('Error:', textStatus, errorThrown);
                $('#responseMessage').html('<p class="mt-1 text-danger">An error occurred. Please try again.</p>');

                // Enable the resend button
                $('#resendOtpBtn').prop('disabled', false);
            }
        });
    });
});
</script>
@if(!$user_details->registration_complete)
<script src="{{ url('frontend/assets/js/common.js') }}"></script>
    <script>
    document.addEventListener("DOMContentLoaded", () => {
        const otpScreen = document.getElementById("otp-screen");
        const changeNumberScreen = document.getElementById("change-number-screen");
        const changeNumberBtn = document.getElementById("changeNumberBtn");
        const changeNumberForm = document.getElementById("changeNumberForm");
        const responseMessage = document.getElementById("responseMessage");
        const updateResponseMessage = document.getElementById("updateResponseMessage");
        const cancelUpdateBtn = document.getElementById("cancelUpdateBtn");

        // Back to OTP Screen
        cancelUpdateBtn.addEventListener("click", (e) => {
            e.preventDefault(); // Prevent default anchor behavior (no page reload)
            changeNumberScreen.style.display = "none";
            otpScreen.style.display = "block";
        });

        // Show Change Number Form
        changeNumberBtn.addEventListener("click", (e) => {
            e.preventDefault();
            otpScreen.style.display = "none";
            changeNumberScreen.style.display = "block";
        });

        // Handle Change Number Form Submission
        changeNumberForm.addEventListener("submit", (e) => {
            e.preventDefault();

            // Get form values
            const phoneCountryCode = document.getElementById("phone_country_code").value;
            const phoneNumber = document.getElementById("phone_number").value;

            updateResponseMessage.textContent = "Updating number...";
            updateResponseMessage.className = "";

            fetch("{{ route('update.number') }}", {
                method: "POST",
                headers: {
                    "Content-Type": "application/json",
                    "X-CSRF-TOKEN": "{{ csrf_token() }}",
                },
                body: JSON.stringify({ phone_country_code: phoneCountryCode, phone_number: phoneNumber }),
            })
                .then((response) => response.json())
                .then((data) => {
                    if (data.success) {
                        updateResponseMessage.textContent = data.message;
                        updateResponseMessage.className = "text-success mb-4";

                        // Switch back to OTP screen
                        setTimeout(() => {
                            location.reload(); // This will refresh the page
                            //changeNumberScreen.style.display = "none";
                            //otpScreen.style.display = "block";
                        }, 2000);
                    } else {
                        updateResponseMessage.textContent = data.message;
                        updateResponseMessage.className = "text-danger mb-4";
                    }
                })
                .catch((error) => {
                    updateResponseMessage.textContent = "An error occurred. Please try again.";
                    updateResponseMessage.className = "text-danger mb-4";
                });
        });
    });
    </script>
@endif
@endsection