@extends('welcome')
@section('content')
<style>
    .galleryno {
        display: none;
    }
input::-webkit-outer-spin-button,input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

</style>
<section class="page-header page-header-classic">
    <div class="container">
        <div class="row">
            <div class="col">
                <ul class="breadcrumb">
                    <li><a href="{{URL::to('index')}}">Home </a></li>
                    <li class="active">OTP </li>
                </ul>
            </div>
        </div>
        <div class="row">
            <div class="col p-static">
                <span class="page-header-title-border visible" style="width: 216.938px;"></span>
                <h1 data-title-border="">OTP  </h1>

            </div>
        </div>
    </div>
</section>
<section class="about-us padding-section yellow-bg">
    <div class="container">

        <div class="row py-4">
            <div class="col-lg-6 mx-auto">
                <div class="card shadow-lg">
                    <div class="card-body">
                        <h2 class="font-weight-bold text-5 mt-2 mb-0 text-center">Enter Your OTP</h2>

                        <form id="contact-form" action="{{route('otp-verify')}}" method="post">
                            @csrf
                            <div class="contact-form-success alert alert-success d-none mt-4">
                                <strong>Success!</strong> Your message has been sent to us.
                            </div>
                            <!--@if($err=Session::get('error'))-->
                            <!--<div class="contact-form-error alert alert-danger mt-4">-->
                            <!--    <strong >Error!</strong><span id=""> {{$err}}</span>-->
                            <!--    <span class="mail-error-message text-1 d-block"></span>-->
                            <!--</div>-->
                            <!--@endif-->
                            <!--@if(isset($success))-->
                            <!--<div class="contact-form-error alert alert-success mt-4">-->
                            <!--    <strong >Success!</strong><span id=""> {{$success}}</span>-->
                            <!--    <span class="mail-error-message text-1 d-block"></span>-->
                            <!--</div>-->
                            <!--@else-->
                            <!--<div class="contact-form-error alert alert-danger mt-4">-->
                            <!--    <strong >Error!</strong><span id=""> {{$error}}</span>-->
                            <!--    <span class="mail-error-message text-1 d-block"></span>-->
                            <!--</div>-->
                            <!--@endif-->
                             <span id="message_success" class="text-primary text-center" ></span>
                            <span id="message_error" class="text-danger text-center"></span>
                            <div class="row">
                                <div class="form-group col-lg-12">
                                <input type="hidden" name="mobile" value="{{$mobile }}">
                                    <label class="form-label text-2">Enter OTP<sup class="text-danger">*</sup></label>
                                    <input type="number" id="otp" data-isRequire="true" placeholder="Enter OTP*"  class="form-control text-3 h-auto py-2" name="otp">
                                    @if($errors->any('name'))
                                    <p class="text-danger">{{$errors->first('name')}}</p>
                                    @endif
                                </div>
                                 <div class="text-end m-0">
                                <a class="link text-primary text-decoration-none pointer outline-none ms-auto text-end" id="resendOtpVerification" style="cursor:pointer" >Resend Verification OTP</a>&nbsp;&nbsp;&nbsp;<span class="time"></span>
                                </div>
                            </div>
                     <button class="btn btn-primary">Submit</button>
                        </form>
                    </div>
                </div>
            </div>


        </div>

    </div>

</section>
@if(isset($success))
<script>
     Swal.fire({
     title: 'Message',
     text: '{{$success}}'
     });
</script>
@endif
@if(isset($error))
    <script>
      Swal.fire({
     icon: 'error',
    title: 'Error',
    text: '{{$error}}'
     });
</script>
@endif
<script>
    $(document).ready(function(){
    
        $('#resendOtpVerification').click(function(){
            $(this).text('Wait...');
            var userMobile = @json($mobile);
            $.ajax({
                url:"{{ route('resendOtp') }}",
                type:"GET",
                data: {mobile:userMobile },
                success:function(res){
                    console.log(res);
                    $('#resendOtpVerification').text('Resend Verification OTP');
                    if(res.success){
                        timer();
                        // $('#message_success').text(res.msg);
                        Swal.fire({
                         title: 'Message',
                           text: res.msg
                        });
                        setTimeout(() => {
                            $('#message_success').text('');
                        }, 3000);
                    }
                    else{
                        // $('#message_error').text(res.msg);
                         Swal.fire({
                               icon: 'error',
                                title: 'Error',
                                 text:  res.msg,
                              });
                        setTimeout(() => {
                            $('#message_error').text('');
                        }, 3000);
                    }
                }
            });

        });
    });

    function timer()
    {
        var seconds = 30;
        var minutes = 1;

        var timer = setInterval(() => {

            if(minutes < 0){
                $('.time').text('');
                clearInterval(timer);
            }
            else{
                let tempMinutes = minutes.toString().length > 1? minutes:'0'+minutes;
                let tempSeconds = seconds.toString().length > 1? seconds:'0'+seconds;

                $('.time').text(tempMinutes+':'+tempSeconds);
            }

            if(seconds <= 0){
                minutes--;
                seconds = 59;
            }

            seconds--;

        }, 1000);
    }

    timer();

</script>
@stop