@extends('layouts.auth')

@section('content')
<section class="sptb">
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            {{-- timer --}}
            <div id="timerContainer" style="display:none" class="bg-primary-transparent w-25 shadow mx-auto border border-primary-transparent p-3 br-3 mb-4 text-center">
                <span class="h4 text-primary mb-0 font-weight-bold" id="timer"></span>
            </div>
            {{-- expiration alert --}}
            <div class="alert alert-outline alert-outline-warning alert-block mx-auto w-80" id="alertExpired" style="display:none">
                <button type="button" class="close" data-bs-dismiss="alert">×</button> 
                        
                        <strong>
                            <i class="fa fa-frown-o me-2" aria-hidden="true"></i>
                            @lang('auth.code expired')
                            <a class="btn btn-link " href="{{ route('vp.resend') }}">@lang('auth.resend code')</a>
                        </strong>
            </div>
            <div class="card">
                <div class="card-header">@lang('auth.whatsapp verification')</div>
  
                <div class="card-body">
                    
                    <form method="POST" action="{{ route('vp.post') }}">
                        @csrf
                        <div class="row">
                            <div class="col-md-6 ms-lg-9 mt-2">
                                <p class="text-center">@lang('auth.sent code') {{ auth()->user()->phone }}</p>
                            </div>
                            <div class="col-md-3 mb-4">
                                <a id="change" value="{{auth()->user()->id}}" class="btn btn-link text-primary" data-bs-toggle="modal" data-bs-target="#change_number">@lang('auth.change number')</a>
                            </div>
                        </div>    
                        <div class="row">
                            <label for="code" class="col-md-4 col-form-label text-md-end">@lang('auth.code')</label>
  
                            <div class="col-md-6">
                                <input id="code" type="text" class="form-control @error('code') is-invalid @enderror" name="code" value="{{ old('code') }}" required autocomplete="code" onkeyup="if (/\D/g.test(this.value)) this.value = this.value.replace(/\D/g,'')" autofocus>
  
                                @error('code')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>
                        <div class="form-group row mb-0">
                            <div class="col-md-8 offset-md-4">
                                {{-- <a class="btn btn-link" href="{{ route('vp.resend') }}">@lang('auth.resend code')</a> --}}
                            </div>
                        </div>
  
                        <div class="form-group row mb-0 mt-4">
                            <div class="col-md-8 offset-md-4">
                                <button type="submit" class="btn btn-primary">
                                    @lang('auth.submit')
                                </button>
  
                            </div>
                        </div>
                    </form>
                </div>
            </div>
       
          </div>
    </div>
</div>
</section>

<!-- Message Modal -->
<div class="modal fade effect-flip-horizontal" id="change_number" tabdocumentation="-1" role="dialog"  aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="example-Modal3">@lang('auth.update whatsapp number')</h5>
                <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="phone_form" method="post" action="{{route('vp.updatePhone',auth()->user()->id)}}">
                    @csrf
                    <div class="row">

                        <label class="form-control-label">@lang('auth.whatsapp'):</label>
                        <div class="form-group col-md-6 col-lg-6">
                            <select id="phoneCountryCode" name="phoneCountryCode" class="form-control select2-show-search">
                                @foreach ($countries as $country)   
                                <option data-countryCode="{{$country->iso}}" value="{{$country->phonecode}}">{{$country->nicename}} ({{$country->phonecode}})</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="form-group col-md-6 col-lg-6">
                            <input type="phone" name="phone" class="form-control" id="phone" required onkeyup="if (/\D/g.test(this.value)) this.value = this.value.replace(/\D/g,'')">
                        </div>

                        
                    </div>
                
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">@lang('auth.close')</button>
                <input type="submit" class="btn btn-primary" value="@lang('auth.submit')">
            </div>
        </form>
        </div>
    </div>
</div>

@endsection

@section('auth-js')
<script>
    // get user phone
    $(document).ready(function(){
        // Get Record data using it's id
        // jQuery('body').on('click', '#change', function () {
        //     var user_id = $(this).attr("value");
        //     $.get('vp/editPhone/' + user_id, function (data) {
        //         jQuery('#phoneCountryCode').val(data.phone.country_id).change();
        //         jQuery('#phone').val(data.phone.phone);
        //     })
        // });


        // Count Down Timer
        var end='{{$code->updated_at->add(new DateInterval('PT' . 2 . 'M'))}}'
        
        var countDownDate = new Date(end).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 minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
           var seconds = Math.floor((distance % (1000 * 60)) / 1000);
               
           // Output the result
           document.getElementById('timerContainer').style.display = "block";
           document.getElementById('timer').innerHTML = minutes + 'm ' + seconds + 's ';
           
               
           // If the count down is over, write some text 
           if (distance < 0) {
               clearInterval(x);
               document.getElementById('timer').innerHTML = ' ';
               document.getElementById('alertExpired').style.display = 'block';
               document.getElementById('timerContainer').style.display = 'none';
               document.getElementById('code').disabled = true;
               document.getElementById('code').placeholder = '@lang("auth.expired code")';
           }
       }, 1000);

	})
    
       //Don't allow user to start the phone number with zero
        // $("#phone").on("input", function() {
       
        // if (/^0/.test(this.value)) {
        //     this.value = this.value.replace(/^0/, "")
        // }
        
        // })
    
          
</script>
@endsection