@extends('components.main')
@section('custom-style')

<style>
    body {
        position: relative;
        min-height: 100vh;
        padding-bottom: 13%
    }

    footer {
        /* position: relative; */
        position: absolute;
        bottom: 0px;
        rigth: 0px;
        width: 100%;
    }
</style>
@endsection
@section('content')
@if(session('message'))
<section class="verified">
    <div class="contain">
        <img src="{{ asset('main_site/img/shielded.svg')}}" alt="">
        <p>You Account has been Verified</p>
    </div>
</section>
@else

<section class="login">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-10">
                <div class="row align-items-center">
                    <div class="col-md-5">
                        <div class="login-form">
                            <h1>Mobile Verification</h1>
                            <p>Please take a moment to verify your phone number</p>
                            <form action="{{ route('verify.post') }}" method="POST">
                                @csrf
                                <input type="hidden" name="phone_number"
                                    value="@auth {{ auth()->user()->phone_number }} @else {{session('phone_number')}} @endauth ">
                                <div class="row">
                                    <div class="col-3">
                                        <input style="text-align: center;" type="number" name="number[]" id="" />
                                    </div>
                                    <div class="col-3">
                                        <input style="text-align: center;" type="number" name="number[]" id="" />
                                    </div>
                                    <div class="col-3">
                                        <input style="text-align: center;" type="number" name="number[]" id="" />
                                    </div>
                                    <div class="col-3">
                                        <input style="text-align: center;" type="number" name="number[]" id="" />
                                    </div>

                                    <div class="col-md-12">
                                        <button type="submit">Verify</button>
                                    </div>
                            </form>
                            <div class="col-md-12">
                                <button type="button" id="resend" style="
                          opacity: 0.7;
                          pointer-events: none;
                          cursor: default;
                        " class="signup re">Resend code <span>(60)</span></button>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-6 offset-md-1">
                    <img src="{{ asset('main_site/img/5.svg')}}" style="height: auto; width: 100%;" alt="" />
                </div>
            </div>
        </div>
    </div>
    </div>
</section>
@endisset
@endsection

@section('custom-script')

<script type="text/javascript">
    $('#resend').click(function()
      {

      
      $.ajax({
          url:"{{ route('resend.code') }}",
          type:"POST",
          data:{'_token':"{{ csrf_token() }}",'phone_number':"{{ session('phone_number') }}"},
          success:function(data){
            alert('success');
          },
          error:function(){
              alert('error');
          }
      });
    });
  
   

</script>
@endsection