@extends('layouts.login')
@section('content')

<div id="confirmAuthTokenComponent" v-cloak>
  <div class="d-flex align-items-center flex-column text-center p-3">
        <div class="flex-grow-1 single-form-heading font-weight-medium">Confirm Token</div>
    </div>
  <form action="{{route('process-confirm-auth-token')}}" class="form" method="post">
    <div class="icon_wrap">
      <img src="{{asset('/img/login_icon.svg')}}" alt="">
    </div>
    @csrf
    @if(session('message'))
    <div class="alert alert-info">{{session('message')}}</div>
    @endif
    <div class="form-group">
      <div class="p-2 text-center">
        <strong>
          Please enter the code sent to {{ $maskedCellNumber }}.
        </strong>
      </div>
      <input class="form-control" name="confirmation_token" autocomplete="off" autofocus placeholder="" required value="{{old('confirmation_token')}}">
    </div>
    <div class="row">
      <div class="col-12 text-center">
        <input type="submit" name="sendToken" value="Confirm Token" class="btn btn-orange text-uppercase py-2 px-4">
      </div>
    </div>
    <div class="text-center mt-3">
      <div class="d-flex align-items-center flex-wrap justify-content-center">
        <a href="#" class="text-pry" resend-token>
          <span v-if="!loading">resend token</span>
          <span v-else><i class="fas fa-circle-notch fa-spin"></i> Resending...</span>
        </a>
        <span class="mx-2 font-weight-bold">OR</span>
        <a href="{{ route('login') }}" class="text-pry">change phone number</a>
      </div>
    </div>
    <div v-if="response" class="text-center mb-4">
      <small v-if="!response.success" class="text-danger"><i class="fas fa-exclamation-triangle"></i> @{{ response.message }}</small>
      <small v-else class="text-success"><i class="fas fa-check-circle"></i> Confirmation code has been resent!</small>
    </div>
  </form>
</div>

<script>
  var confirmAuthTokenComponent = new Vue({
    el: '#confirmAuthTokenComponent',
    data: {
      loading: false,
      response: null
    },
    delimiters: ['@[[', ']]'],
    methods: {
      initResendConfirmationToken: function() {
        var self = this;
        $('[resend-token]').click(function(evt) {
          evt.preventDefault();
          if (self.loading) return;
          self.loading = true;
          $.post("{{ route('resend-sms-auth-token') }}", {}, function(response) {
            self.loading = false;
            self.response = response;
          }, 'json');
        });
      },
      init: function() {
        this.initResendConfirmationToken();
      },
    },
    mounted: function() {
      this.init();
	// @VJK Why is this needed?
	$('[name=confirmation_token]').focus();
    }
  });
</script>
@endsection