@extends('layouts.app',['header' => 'event' , 'header_image' => true])
@section('content')
<section class="main-sec member-sec">
    <div class="container">
        <div class="signup-wrapper">
            <div class="sec-heading">
                <h2>Enter Challenge Code
                   </h2>
                <p>
                    Enter the code provided by Admin to enter their Challenge
                    Enter Code*
              </p>
            </div>
            <form action="{{ route('member.challenge.joins') }}" method='post' id='eventCodeForm'>
                @csrf
                <div class="email-form-box">
                    <div class="form-group">
                        <div class="formfield verify-no">
                            <input type="text" maxlength="1" size="1" min="0" max="9" pattern="[0-9]{1}" class="form-control event-code" name="event_code[]">
                            <input type="text" maxlength="1" size="1" min="0" max="9" pattern="[0-9]{1}" class="form-control event-code" name="event_code[]">
                            <input type="text" maxlength="1" size="1" min="0" max="9" pattern="[0-9]{1}" class="form-control event-code" name="event_code[]">
                            <input type="text" maxlength="1" size="1" min="0" max="9" pattern="[0-9]{1}" class="form-control event-code" name="event_code[]">
                        </div>
                    </div>
                    <button type='submit' class="button primary-btn full-btn" data-bs-toggle="modal" data-bs-target="#discount-modal">Enter Challenge <div
                        class="spinner-border d-none" role="status">
                        <span class="sr-only">Loading...</span>
                    </div></button>
                </div>
            </form>
        </div>
    </div>
</section>
@endsection
@push('scripts')
   <script>
        jQuery(document).ready(function(){
            $('.event-code').on('keyup  keypress', function(e) {
                var $this = $(this);
                var index = $this.index();

                if (e.which === 8) { // Check if the key pressed is the backspace key
                    e.preventDefault(); // Prevent default backspace behavior

                    if (index > 0) {
                        index--;
                        // Clear the value of the current input field


                        // Move focus to the previous input field
                        $('.event-code').eq(index).focus();
                        if (index === 0) {
                            $('.event-code').eq(0).focus();
                        }
                    }
                } else if ($this.val().length === 1) {
                    if (index < 4) { // Assuming there are 4 OTP input fields (index 0 to 3)
                        // Move focus to the next input fieldx`
                        var inputValue = $(this).val().replace(/\D/g, '');

                        $this.val(inputValue)
                        $('.event-code').eq(index + 1).focus();
                    }
                }
            });

          jQuery('#eventCodeForm').submit(function(e){
            e.preventDefault();

            //show loader
            jQuery(this).find('button').children('.spinner-border').removeClass('d-none')
            jQuery(this).find('button').attr('disabled', true)

            let url = jQuery(this).attr('action');
            let data = new FormData(jQuery(this)[0]);
            let response = ajaxCall(url , 'post' ,data);
            response.then((response)=>{
                if(response.status){
                    errorShow('Success',response.message,'OK' );
                    setTimeout(() => {
                        window.location.href = response.url;
                    }, 1500);
                } else{
                      //hide loader
                    jQuery(this).find('button').children('.spinner-border').addClass('d-none')
                    jQuery(this).find('button').attr('disabled', false)
                    errorShow('Error',response.message,'Try Again');
                    // empty fields of event code
                    jQuery('input[name="event_code[]"]').val(' ');
                }
            })
          })
        })
   </script>
   <script src="{{ asset('custom-js/custom.js') }}"></script>
@endpush