@extends('layout.app')

@section('page-css')

  <style media="screen">

    input {
      margin: 5px;
      text-align: center;
      line-height: 40px;
      font-size: 25px;
      border: solid 1px #ccc;
      box-shadow: 0 0 5px #ccc inset;
      outline: none;
      width: 15%;
      transition: all .2s ease-in-out;
      border-radius: 3px;

      /* &:focus {
        border-color: purple;
        box-shadow: 0 0 5px purple inset;
      }

      &::selection {
        background: transparent;
      } */
    }
  </style>
@endsection

@section('page-content')
<section class=" bg-cover bg-size--cover " style="background-image:url('{{ asset('images/download.png')}}'); ;height:100vh">
    <span class="mask alpha-6 bg-tertiary"></span>

    <div class="card  col-lg-4 float-right bg-white text-dark" style="height:100vh">

        <div class="card-body justify-content-center mt-5">
            <span class="clearfix"></span>
            <h4 class="headin h3 text-dark text-center pt-3 pb-5">SCANCOM PLC<br>(MTN Ghana) <br>
                Conflict of Interest Policy <br>
                & Code of Ethics
            </h4>
                @include('alert')
            <h6 class="m-4 text-center ">Enter OTP to Continue</h6>
            <form class="" method="POST" action="{{route('policy')}}">
                @csrf
                <div class="form-group text-center">
                    <input type="tel" name="one"  maxLength="1" size="1" min="0" max="9" pattern="[0-9]{1}" />
                    <input type="tel" name="two"  maxLength="1" size="1" min="0" max="9" pattern="[0-9]{1}" />
                    <input type="tel" name="three"  maxLength="1" size="1" min="0" max="9" pattern="[0-9]{1}" />
                    <input type="tel" name="four"  maxLength="1" size="1" min="0" max="9"
                      pattern="[0-9]{1}" />
                </div>
                <input type="hidden" name="email" value="{{ $email }}">

                <button type="submit" class="btn btn-block btn-teriary btn-lg mt-4" style="background-color:#FFCB05; color:#000">Continue</button>
            </form>
            <div class="text-center">
              {{-- <a type="button" href="#" onclick="resend()" class="btn btn-sm btn-link btn-icon"> --}}
    {{-- <span class="btn-inner--text">Resend Code</span></a> --}}
            </div>
            <div class="text-center">
              @php


              @endphp

              @if (Session::get('met') == 'mail')
                @if ($email !== null)
                  <form class="" id="mailresend" action="{!! route('resendmailcode') !!}" method="post">
                    @csrf
                    <input type="hidden" name="email" value="{{ $email }}">
                    <button type="submit" id="send_otp_btnmail"  class="btn btn-sm btn-link btn-icon">
          <span class="btn-inner--text">Resend Code</span></button>
                  </form>

        @else
          <a type="button" href="{!! route('failed.validation') !!}" class="btn btn-sm btn-link btn-icon">
<span class="btn-inner--text">Resend Code</span></a>
                @endif


      @else
              @if ($email !== null)
                <form class="" id="phoneresend" action="{!! route('resendphonecode') !!}" method="post">
                  @csrf
                  <input type="hidden" name="email" value="{{ $email }}">
                  <button type="submit" id="send_otp_btnphone"  class="btn btn-sm btn-link btn-icon">
        <span class="btn-inner--text">Resend Code</span></button>
                </form>
                {{-- <a type="button" href="{!! route('resendphonecode',$email) !!}" class="btn btn-sm btn-link btn-icon">
        <span class="btn-inner--text">Resend Code</span></a> --}}
        @else
          <a type="button" href="{!! route('failed.validation') !!}" class="btn btn-sm btn-link btn-icon">
  <span class="btn-inner--text">Resend Code</span></a>
        @endif

              @endif

    {{-- <span class="btn-inner--icon"><i class="fas redo-alt"></i></span> --}}

           </div>
        </div>
        <div class="card-footer text-center" >

            <p class="p-0 m-0">Having issues logging in?</p> <br> <a class="btn btn-tertiary btn-sm col-lg-8" href="{!! route('coi.prelogin.help') !!}"  class="">Get Assistance </a>
        </div>
    </div>
</section>
@endsection


@section('page-js')
  <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/js/all.min.js" integrity="sha512-Tn2m0TIpgVyTzzvmxLNuqbSJH3JP8jm+Cy3hvHrW7ndTDcJ1w5mBiksqDBb8GpE2ksktFvDB/ykZ0mDpsZj20w==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  <script type="text/javascript">
  var body = $('body');
  $('#send_otp_btnmail').click(function(){

    $(this).attr('disabled',true);
    $("#mailresend").attr("action","/resendmcode");
             $('#mailresend').submit();

    })

    $('#send_otp_btnphone').click(function(){

      $(this).attr('disabled',true);
      $("#phoneresend").attr("action","/resendpcode");
               $('#phoneresend').submit();

      })
function goToNextInput(e) {
  var key = e.which,
    t = $(e.target),
    sib = t.next('input');

  if (key != 9 && (key < 48 || key > 57)) {
    e.preventDefault();
    return false;
  }

  if (key === 9) {
    return true;
  }

  if (!sib || !sib.length) {
    sib = body.find('input').eq(0);
  }
  sib.select().focus();
}

function onKeyDown(e) {
  var key = e.which;

  if (key === 9 || (key >= 48 && key <= 57)) {
    return true;
  }

  e.preventDefault();
  return false;
}

function onFocus(e) {
  $(e.target).select();
}

body.on('keyup', 'input', goToNextInput);
// body.on('keydown', 'input', onKeyDown);
body.on('click', 'input', onFocus);

  </script>

  {{-- <script type="text/javascript">
    function resend(){
      window.location.reload()
    }
  </script> --}}
@endsection