@extends('layouts.delegate_join_request_layout')

@section('style')

@endsection

@section('content')
<div class="w-md-50  m-auto round10 p-3 form-cont">
    <form id="verification" class="container ">
        {{csrf_field()}}
        <h6 class="bold border-bottom pt-3 pb-3 mb-3">{{awtTrans(' كود التحقق ')}}</h6>
        <div class="p-5 text-center">
            <img src="{{URL::to('site/imgs/icons/code.png')}}" alt="">
        </div>
        <div class="form-group">
            <div style="direction: ltr;flex-wrap: nowrap;" class="row justify-content-center">
                <div class="pt-1 d-inline-block code-input pb-1 pl-0 pr-2">
                    <input name='code[]'  type='number' class='code-input form-control code' required/>
                </div>
                <div class="pt-1 d-inline-block code-input pb-1 pl-0 pr-2">
                    <input name='code[]' type='number' class='code-input form-control code' required/>
                </div>
                <div class="pt-1 d-inline-block code-input pb-1 pl-0 pr-2">
                    <input name='code[]' type='number' class='code-input form-control code' required/>
                </div>
                <div class="pt-1 d-inline-block code-input pb-1 pl-0 pr-2">
                    <input name='code[]' type='number' class='code-input form-control code' required/>
                </div>
            </div>
        </div>
        <div>
            <div class="font12 text-center">
                <p style="display:none" id="resend_code"> {{awtTrans('  لم تستلم الكود؟ ')}}  <a class="resend" href="#"> {{awtTrans(' إعادة الارسال ')}}  </a></p>
            </div>
            <span class="timer">
              <span>الوقت المتبقي :</span>
              <span id="counter"></span>
            </span>    
            <span id="time_ended"></span>
        </div>
        
        <button class="verification button1 w-100 mt-3">{{awtTrans('ارسال كود التحقق ')}}
            <i class="spinner-ajax fa fa-spinner fa-spin"></i>
        </button>
        
    </form>

</div>
@endsection

@section('scripts')
    <script>
        function countdown() {
        var seconds = 59;
        function tick() {
          var counter = document.getElementById("counter");
          seconds--;
          counter.innerHTML =
            "0:" + (seconds < 10 ? "0" : "") + String(seconds);
          if (seconds > 0) {
            setTimeout(tick, 1000);
          } else {
            $.ajax({
                    type: "post",
                    url: '/delegate_join_request/invalidateCode',
                    data: {
                        "_token" : "{{csrf_token()}}"
                    },
                    dataType: "json",
                    success:  (response) => {
                        
                        
                    }
                });
            ele = document.getElementById('time_ended');
            ele.textContent = 'انتهاء الوقت';
            ele.style.color = "red";
            resend_code = document.getElementById('resend_code');
            resend_code.style.display = "block";
          }
        }
        tick();
      }
      countdown();
    </script>
    <script>
        $(document).on('click','.verification',function (e) {
            e.preventDefault();

            //get form data
            var form = $('#verification').get(0);
            var formData = new FormData(form);

            //disable the submitted button and show he spinner
            $(this).prop('disabled', true).css({opacity: '0.5'});
            $('.spinner-ajax').css({display: 'inline-block'});

            $.ajax({
                url: "{{route('delegate_join_request.verification.post')}}",
                type: "POST",
                data: formData,
                dataType: "json",
                processData: false,
                contentType: false,
                cache: false,
                success: function (data) {
                    // undisable the submitted button and hide the spinner
                    $('.verification').removeAttr("disabled").css({opacity: '1'});
                    $('.spinner-ajax').css({display: 'none'});
                    //got a resposne?
                    if (data.key == 'success') {
                        location.assign(data.url);
                    } else {
                        swal({
                            title: data.msg,
                            type: 'error',
                            timer: 3000,
                            showCloseButton: true,
                            showConfirmButton: false,
                            animation: true,
                        }).catch(swal.noop);
                    }
                }
            });
        });
    </script>
    <script>
            const inputElements = [...document.querySelectorAll('input.code-input')]
            inputElements.forEach((ele,index)=>{
            ele.addEventListener('keydown',(e)=>{
                if(e.keyCode === 8 && e.target.value==='') inputElements[Math.max(0,index-1)].focus()
            })
            ele.addEventListener('input',(e)=>{
                const [first,...rest] = e.target.value
                e.target.value = first ?? ''
                if(index!==inputElements.length-1 && first!==undefined) {
                inputElements[index+1].focus()
                inputElements[index+1].value = rest.join('')
                inputElements[index+1].dispatchEvent(new Event('input'))
                }
            })
            })
            function onSubmit(e){
            e.preventDefault()
            const code = [...document.getElementsByTagName('input')]
                .filter(({name})=>name)
                .map(({value})=>value)
                .join('')
            }
    </script>
    <script>
        $('.resend').on('click',function(e){
            e.preventDefault();

            $.ajax({
                url:"{{route('delegate_join_request.resend')}}",
                type:"GET",
                dataType: "json",
                processData: false,
                contentType: false,
                cache: false,
                success:function(data){
                    if(data.key =='success') {
                        swal({
                            title: data.msg,
                            position:'top',
                            timer: 3000,
                            type:'success',
                            showCloseButton: false,
                            showConfirmButton:false,
                            animation: true
                        })
                        location.assign(data.location);
                    }else{
                        swal({
                            title: data.msg,
                            position:'top',
                            timer: 3000,
                            type:'error',
                            showCloseButton: false,
                            showConfirmButton:false,
                            animation: true
                        })
                    }
                }
            });
        });
    </script>
@endsection