@extends('frontend.master')

@section('frontend_css')
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p {
  text-align: center;
  font-size: 60px;
  margin-top: 0px;
}
</style>
@endsection

@section('frontend_content')

<main class="main login-page">
    <!-- Start of Page Header -->
    <div class="page-header">
        <div class="container">
            <h1 class="page-title mb-0">My Account</h1>
        </div>
    </div>
    <!-- End of Page Header -->

    <!-- Start of Breadcrumb -->
    <nav class="breadcrumb-nav">
        <div class="container">
            <ul class="breadcrumb">
                <li><a href="demo1.html">Home</a></li>
                <li>My account</li>
            </ul>
        </div>
    </nav>
    <!-- End of Breadcrumb -->
    <div class="page-content">
        <div class="container">
            <div class="login-popup">
                <div class="tab tab-nav-boxed tab-nav-center tab-nav-underline">
                    <ul class="nav nav-tabs text-uppercase" role="tablist">
                        <li class="nav-item">
                            <a href="#sign-up" class="nav-link active">Mobile Varification</a>
                        </li>
                    </ul>
                    <div class="tab-content">
                        <form method="POST" action="{{ route('register') }}">
                            @csrf
                            {{-- <div>
                                
                            </div> --}}
                            <div class="tab-pane active in" id="sign-up">
                                
                                <div class="form-group">
                                    <label>Verification Code *</label>
                                    <input id="name" type="number" class="form-control @error('name') is-invalid @enderror" name="name" value="{{ old('name') }}" required autocomplete="name" autofocus>
                                    <input type="hidden" name="phone" value="{{ $zodumodukodu }}">
                                    @error('name')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>
                                <button type="submit" class="btn btn-primary btn-block">
                                    {{ __('Submit') }}
                                </button>
                                <input type="text" name="{{ $request->number }}" id="">
                                <a href="" class="" id="resend" onclick="">resend</a>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <p id="demo"></p>
</main>
@endsection


@section('frontend_js')
<script>

  var sec = 60;
  var x = setInterval(function() {
    document.getElementById("demo").innerHTML =  sec + "s ";
    sec--;
    if (sec == 00) {
        clearInterval(x);
        document.getElementById("resend").disabled = true;
        document.getElementById("demo").innerHTML = "OPT Time Out";
       
    }

  }, 1000);




    // // Set the date we're counting down to
    // var countDownDate = new Date("Jan 5, 2024 15:37:25").getTime();
    
    // // Update the count down every 1 second
    // var x = setInterval(function() {
    
    //   // Get today's date and time
    //   var now = new Date().getTime();
        
    //   // Find the distance between now and the count down date
    //   var distance = countDownDate - now;
        
    //   // Time calculations for days, hours, minutes and seconds
    
    //   var seconds = Math.floor((distance % (1000 * 100)) / 1000);
        
    //   // Output the result in an element with id="demo"
    //   document.getElementById("demo").innerHTML =  seconds + "s ";
        
    //   // If the count down is over, write some text 
    //   if (seconds ==0) {
    //     clearInterval(x);
    //     document.getElementById("demo").innerHTML = "OPT Time Out";
    //   }
    // }, 1000);

    </script>
@endsection