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

@section('content') 
<!-- Wrapper -->
<div class="main-card">
    <h1 class="text-center mb-4 page_title">
        Accept Invitation from {{$agency_name}}
    </h1>
    
    <p class="text-muted mx-auto mb-5 col-11 col-md-10 col-lg-10 text-center">
        Complete your account information below to activate your invitation.
    </p> 
    <div class="row justify-content-center">

        <div class="col-lg-7">

            <div class="card shadow border-0 content-card-invitationpage">
                <div class="card-body">

                    <!-- Note -->
                    <div class="alert alert-gray mb-4">
                        <h6 class="fw-bold"><strong>Note</strong></h6>

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

                        <hr>

                        <h6><strong>Password Hint</strong></h6>

                        {!! $password_setting !!}

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

                        <ul class="mb-0">
                            <li>No special characters 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="form-check mb-4">

                            <input
                                class="form-check-input"
                                type="checkbox"
                                id="agree"
                                required>

                            <label class="form-check-label" for="agree"> 
                                I agree to the 
                                <a href="{{ route('terms-condition') }}"
                                   target="_blank"> 
                                    Terms & Conditions 
                                </a> 
                                and 
                                <a href="{{ route('privacy-notice') }}" target="_blank"> 
                                    Privacy Notice 
                                </a> 
                            </label>

                        </div>

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

                    </form>

                </div>
            </div>

        </div>

    </div>
</div>
<!-- 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 = '<div class="alert swl-alert-success"><ul><li>'+ response.message+ '</li></ul></div>'; 
                notifyResponseTimerAlert(Html,"success","Success");
                window.location.href="{{ route('application-status-newui') }}";
            }
            else{ 
                var Html = '<div class="alert swl-alert-danger"><ul>'; 
                $.each( response.message, function( key, value ) {
                    Html += '<li>' + value+ '</li>';  
                });
                Html += '</ul></div>';  
                notifyResponseTimerAlert(Html,"error","Error");
                grecaptcha.reset();
            }
        }
    });
}
 
</script> 
@stop