@extends('user.layouts.applogin-newui')

@section('content') 
    <section data-test="page-section" data-section-theme="white" class="page-section 
         full-bleed-section
         layout-engine-section
         background-width--full-bleed
         section-height--small
         content-width--wide
         horizontal-alignment--center
         vertical-alignment--middle
         white">
      <div class="section-border">
         <div class="section-background">
         </div>
      </div>  
      <div class="content-wrapper" style="">
          <div class="content content_over_wrapper">
             <div data-fluid-engine="true"> 
                 <div class="fluid-engine fe-66608f2b92ee81c96a558808"> 
                 <div class="fe-block fe-block-66608f2b3d44970e371204eb m-b-40" style="mix-blend-mode: normal;">
                     <h1 class="text-center mb-5 page_title" id="candidate-detail-title">Create Your ITN Profile</h1>
                     <div class="row justify-content-center">
                        <p class="text-muted mx-auto col-10 col-md-10 col-lg-10 text-center">
                            You will use your ITN Profile throughout the application process and during your program. After completing this step, you will be asked to complete a J-1 Eligibility Test through your ITN Profile.
                        </p>
                     </div> 
                 </div> 
                <div class="fe-block fe-block-66608f2b8dbb5260ed880dc5">
                    <div class="sqs-block website-component-block sqs-block-website-component sqs-block-code code-block" data-block-type="1337" data-definition-name="website.components.code" data-sqsp-block="code" id="block-66608f2b8dbb5260ed880dc5">
                       <div class="sqs-block-content">
                           <div class="row justify-content-center">
                                <div class="col-lg-8">
                                    <div class="card shadow border-0 content-card-invitationpage">
                                        <div class="card-body"> 
                                            <div class="alert alert-gray mb-4">
                                                <h6 class="fw-bold"><strong>Note:</strong></h6>

                                                <small>
                                                    Fields marked with <span class="text-danger">*</span> are required. 
                                                </small>

                                                <hr>

                                                <h6><strong>Password Requirements:</strong></h6>

                                                {!! $password_setting !!}

                                                <h6 class="mt-3"><strong>First & Last Name Requirements</strong></h6>

                                                <ul class="mb-0">
                                                    <li>Special characters are not allowed.</li>
                                                </ul>

                                            </div>

                                            <form method="POST" id="invitation_basicdetail">

                                                @csrf

                                                <input type="hidden"
                                                       name="invitation_token"
                                                       value="{{ $access_token }}">

                                                <input type="hidden"
                                                       name="contract_id"
                                                       value="{{ encrypt($contract_id) }}">

                                                <input type="hidden"
                                                       name="user_exist"
                                                       value="{{ $user_exist }}">

                                                @if($user_exist==2)
                                                <input type="hidden"
                                                       name="user_id"
                                                       value="{{ encrypt($user_id) }}">
                                                @endif

                                                <!-- First Name -->

                                                <div class="mb-3">

                                                    <label class="form-label">
                                                        First Name:
                                                        <span class="text-danger">*</span>
                                                    </label>

                                                    @if($user_exist==2)

                                                    <input type="text"
                                                           class="form-control"
                                                           value="{{$first_name}}"
                                                           disabled>

                                                    @else

                                                    <input
                                                        type="text"
                                                        name="first_name"
                                                        class="form-control"
                                                        value="{{ old('first_name') }}"
                                                        placeholder="First Name"
                                                        required>

                                                    @endif

                                                </div>

                                                <!-- Last Name -->

                                                <div class="mb-3">

                                                    <label class="form-label">
                                                        Last Name:
                                                        <span class="text-danger">*</span>
                                                    </label>

                                                    @if($user_exist==2)

                                                    <input type="text"
                                                           class="form-control"
                                                           value="{{$last_name}}"
                                                           disabled>

                                                    @else

                                                    <input
                                                        type="text"
                                                        name="last_name"
                                                        class="form-control"
                                                        value="{{ old('last_name') }}"
                                                        placeholder="Last Name"
                                                        required>

                                                    @endif

                                                </div>

                                                <!-- Email -->

                                                <div class="mb-3">

                                                    <label class="form-label">
                                                        Email Address:
                                                    </label>

                                                    <input
                                                        type="email"
                                                        class="form-control"
                                                        value="{{$email_address}}"
                                                        disabled>

                                                </div>

                                                <!-- Password -->

                                                <div class="mb-3">

                                                    <label class="form-label">
                                                        Password:
                                                        <span class="text-danger">*</span>
                                                    </label>

                                                    <input
                                                        type="password"
                                                        name="password"
                                                        class="form-control"
                                                        placeholder="Password"
                                                        required>

                                                </div>

                                                <!-- Confirm Password -->

                                                <div class="mb-4">

                                                    <label class="form-label">
                                                        Confirm Password:
                                                        <span class="text-danger">*</span>
                                                    </label>

                                                    <input
                                                        type="password"
                                                        name="password_confirmation"
                                                        class="form-control"
                                                        placeholder="Confirm Password"
                                                        required>

                                                </div>
                                                <div class="mb-3 {{ $errors->has('g-recaptcha-response') ? ' has-error' : '' }}">  
                                                    {!! NoCaptcha::renderJs() !!}
                                                    {!! NoCaptcha::display(['data-theme' => 'light']) !!} 
                                                    <div class="help-block with-errors">
                                                        @if ($errors->has('g-recaptcha-response')) {{ $errors->first('g-recaptcha-response') }} @endif
                                                    </div>  
                                                </div>

                                                <div class="text-center"> 
                                                    <button 
                                                        type="submit"
                                                        class="btn btn-info px-5"> 
                                                        Submit 
                                                    </button> 
                                                </div>

                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div> 
                       </div>
                    </div>
                 </div>
               </div>
            </div>
         </div>
      </div>
   </section>
<!-- Wrapper --> 
<!-- End Wrapper -->
@endsection
@section('scripts')
<script>
var user_exist = "{{ @$user_exist }}";
var url = '';
url = "{{ route('accept.invitation') }}";
if(user_exist == 2){
    url = "{{ route('accept.invitation.to.set.pwd') }}";
}
 
(function() { 
    var formselection = "#invitation_basicdetail";
    ajaxFormValidator(formselection,saveDetail);
})();

function ajaxFormValidator(selector, submit_function) {
    const form = document.querySelector(selector);
    if (!form) return;

    form.addEventListener("submit", function (e) {
        e.preventDefault();

        let valid = true;
        const inputs = form.querySelectorAll("input, textarea, select");

        inputs.forEach(input => {
            const value = input.value.trim();

            if (input.hasAttribute("required") && value === "") {
                input.classList.add("is-invalid");
                valid = false;
            } else {
                input.classList.remove("is-invalid");
            }
        });

        if (!valid) return;

        if (typeof submit_function === "function") {
            submit_function(form);
        }
    });
}

function saveDetail(element){ 
    var formId = $(element).attr("id"); 
    var formID = $("#"+formId).serialize();
    var btn_ele = $(element).find('button[type="submit"]');
    var btn_name = $(btn_ele).html();
    btnLoader(btn_ele);
    $.ajax({
        type: 'post',
        url: url, 
        headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
        data: formID,
        dataType: 'json',
        success: function(response) {
            btnLoader(btn_ele,'hide',btn_name);
            /* remove success box after display success message */
            var $has_success = $("#"+formId).find('.form-group'); 
            $has_success.removeClass('has-success');
            var $right_tick = $("#"+formId).find('.form-control-feedback');
            $right_tick.removeClass('form-control-feedback fa fa-check'); 
            if(response.type == 'success')
            {    
                var Html = "<ul style='list-style:none;'><li>Your ITN Profile has been created, and you will be redirected to it now.</li></ul>"; 
                notifyResponseTimerAlert(Html,"success","Success");
                window.location.href="{{ route('application-status-newui') }}";
            }
            else{ 
                var Html = "<ul style='list-style:none;'>"; 
                $.each( response.message, function( key, value ) {
                    Html += '<li>' + value+ '</li>';  
                });
                Html += '</ul>';  
                notifyResponseTimerAlert(Html,"error","Error");
                grecaptcha.reset();
            }
        }
    });
}
 
</script> 
@stop