@extends('layouts.landing_page.master')

@section('title', __('Register'))

@push('styles')
    <meta http-equiv="cache-control" content="private, max-age=0, no-cache">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="expires" content="0">
    <link href="{{ asset('frontend/styles/css/page-css/login-register-page.css') }}" rel="stylesheet">
@endpush

@section('content')
    <section id="signin" class="h-100vh">
        <div class="container bgm-shadows">
            <div class="row">
                <div class="col-lg-7 col-md-12 col-sm-12 col-12 my-auto">
                    <img class="d-block" src="{{ asset('frontend/images/logo.png') }}" alt="..." width="95px"
                         height="95px" />
                    <h2 class="lgm-title mt-2">{{ __('Sign Up To Continue') }}</h2>
                </div>
                <div class="col-lg-1 col-md-12 col-sm-12 col-1"></div>
                <div class="col-lg-4 col-md-12 col-sm-12 col-12">
                    <form method="POST" action="{{ url('user/register') }}" id="registerForm" onsubmit="return false;">
                        <input type="hidden" name="sponsor_id">
                        <div id="form1" class="grid md:grid-cols-1 gap-3">
                            <div class="grid md:grid-cols-2 gap-3">
                                <div class="relative z-0 w-full mb-1 group">
                                    <input type="text" name="first_name" id="first_name" data-character-limit="20"
                                           class="form-control name-validation border-clr p-2.5 w-full text-sm text-gray-900 bg-transparent border-0 border-b-2 border-gray-700 appearance-none dark:text-white dark:border-gray-600 dark:focus:border-blue-500 focus:outline-none focus:ring-0 focus:border-blue-600 peer"
                                           placeholder="" aria-describedby="inputGroupPrependFirst" />
                                    <label for="first_name" class="ml-2 p-2 py-0 peer-focus:font-medium absolute text-sm text-gray-500 dark:text-gray-400 duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:start-0 rtl:peer-focus:translate-x-1/4 peer-focus:text-blue-600 peer-focus:dark:text-blue-500 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6 bg-white">{{ __('First Name') }}</label>
                                </div>
                                <div class="relative z-0 w-full mb-1 group">
                                    <input type="text" name="last_name"
                                           id="last_name" data-character-limit="20"
                                           class="form-control name-validation border-clr p-2.5 w-full text-sm text-gray-900 bg-transparent border-0 border-b-2 border-gray-700 appearance-none dark:text-white dark:border-gray-600 dark:focus:border-blue-500 focus:outline-none focus:ring-0 focus:border-blue-600 peer"
                                           placeholder="" aria-describedby="inputGroupPrependLast" />
                                    <label for="last_name" class="ml-2 p-2 py-0 peer-focus:font-medium absolute text-sm text-gray-500 dark:text-gray-400 duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:start-0 rtl:peer-focus:translate-x-1/4 peer-focus:text-blue-600 peer-focus:dark:text-blue-500 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6 bg-white">{{ __('Last Name') }}</label>
                                </div>
                            </div>

                            <div class="relative z-0 w-full mb-1 group">
                                <input type="text" name="username"
                                       id="username"
                                       class="form-control account-username-validation border-clr p-2.5 w-full text-sm text-gray-900 bg-transparent border-0 border-b-2 border-gray-700 appearance-none dark:text-white dark:border-gray-600 dark:focus:border-blue-500 focus:outline-none focus:ring-0 focus:border-blue-600 peer"
                                       placeholder="" aria-describedby="inputGroupPrependUsername" />
                                <label for="username" class="ml-2 p-2 py-0 peer-focus:font-medium absolute text-sm text-gray-500 dark:text-gray-400 duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:start-0 rtl:peer-focus:translate-x-1/4 peer-focus:text-blue-600 peer-focus:dark:text-blue-500 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6 bg-white">{{ __('Username') }}</label>
                            </div>

                            <div class="relative z-0 w-full group">
                                <input type="text" name="sponsor_username"
                                       id="sponsor_username"
                                       class="form-control account-username-validation border-clr p-2.5 w-full text-sm text-gray-900 @if(isset($sponserUser->details->username)) bg-gray-100 @else bg-transparent @endif border-0 border-b-2 border-gray-700 appearance-none dark:text-white dark:border-gray-600 dark:focus:border-blue-500 focus:outline-none focus:ring-0 focus:border-blue-600 peer"
                                       placeholder="" aria-describedby="inputGroupPrependsponser" value="{{ $sponserUser->details->username ?? '' }}"
                                       @if(isset($sponserUser->details->username)) disabled @endif  />
                                <label for="sponsor_username" class="ml-2 p-2 py-0 peer-focus:font-medium absolute text-sm text-gray-500 dark:text-gray-400 duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:start-0 rtl:peer-focus:translate-x-1/4 peer-focus:text-blue-600 peer-focus:dark:text-blue-500 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6 bg-white">{{ __('Sponsor Username') }}</label>
                            </div>

                            <button type="button" id="nextBtn" class="w-full primarym-btn text-center mt1">{!! renderIconHtml('next') !!}{{ __('Next') }}</button>
                        </div>

                        <div id="form2" class="grid md:grid-cols-1 gap-3" style="display: none;">
                            <div class="relative z-0 w-full mb-1 group">
                                <select id="country_id" name="country_id" class="form-select select2 border-clr p-2.5 w-full text-sm text-gray-900 bg-transparent border-0 border-b-2 border-gray-700 appearance-none focus:outline-none focus:ring-0 focus:border-blue-600 peer">
                                    <option value="">Select Country</option>
                                    @foreach ($country as $row)
                                        <option value="{{$row->id}}" {{isset($user) && $user->country_id == $row->id ? 'selected' : ''}}>{{$row->country_name}}</option>
                                    @endforeach
                                </select>
                                <label for="country" class="ml-2 p-2 py-0 peer-focus:font-medium absolute text-sm text-gray-500 dark:text-gray-400 duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:start-0 rtl:peer-focus:translate-x-1/4 peer-focus:text-blue-600 peer-focus:dark:text-blue-500 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6 bg-white">{{ __('Country') }}</label>
                            </div>
                            <div class="relative z-0 w-full mb-1 group state-input">
                                <select id="state_id" name="state_id" class="form-select select2 border-clr p-2.5 w-full text-sm text-gray-900 bg-transparent border-0 border-b-2 border-gray-700 appearance-none focus:outline-none focus:ring-0 focus:border-blue-600 peer">
                                    <option value="">Select Region / State / Province</option>
                                </select>
                                <label for="state" class="ml-2 p-2 py-0 peer-focus:font-medium absolute text-sm text-gray-500 dark:text-gray-400 duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:start-0 rtl:peer-focus:translate-x-1/4 peer-focus:text-blue-600 peer-focus:dark:text-blue-500 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6 bg-white">{{ __('Region / State / Province') }}</label>
                            </div>
                            <div class="relative z-0 w-full mb-1 group">
                                <input type="text" name="city"
                                       id="city" data-character-limit="50"
                                       class="form-control name-validation border-clr p-2.5 w-full text-sm text-gray-900 bg-transparent border-0 border-b-2 border-gray-700 appearance-none dark:text-white dark:border-gray-600 dark:focus:border-blue-500 focus:outline-none focus:ring-0 focus:border-blue-600 peer"
                                       placeholder=""  aria-describedby="inputGroupPrependemail" />
                                <label for="city" class="ml-2 p-2 py-0 peer-focus:font-medium absolute text-sm text-gray-500 dark:text-gray-400 duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:start-0 rtl:peer-focus:translate-x-1/4 peer-focus:text-blue-600 peer-focus:dark:text-blue-500 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6 bg-white">{{ __('City') }}</label>
                            </div>

                            <button type="button" id="nextBtn2" class="w-full primarym-btn text-center mt1">{!! renderIconHtml('next') !!}{{ __('Next') }}</button>

                        </div>

                        <div id="form3" class="grid md:grid-cols-1 gap-3" style="display: none;">
                            <div class="form-group mb-2">
                                <div class="relative z-0 w-full mb-1 group">
                                    <input type="text" name="email"
                                           id="email"
                                           class="form-control email-validation border-clr p-2.5 w-full text-sm text-gray-900 bg-transparent border-0 border-b-2 border-gray-700 appearance-none dark:text-white dark:border-gray-600 dark:focus:border-blue-500 focus:outline-none focus:ring-0 focus:border-blue-600 peer"
                                           placeholder=""  aria-describedby="inputGroupPrependemail" />
                                    <label for="email" class="ml-2 p-2 py-0 peer-focus:font-medium absolute text-sm text-gray-500 dark:text-gray-400 duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:start-0 rtl:peer-focus:translate-x-1/4 peer-focus:text-blue-600 peer-focus:dark:text-blue-500 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6 bg-white">{{ __('Email') }}</label>
                                    <span id="email_error" class="custom-error m-0 p-0"></span>
                                </div>
                            </div>


                            <div class="form-group mb-2">
                                <div class="relative z-0 w-full group">
                                    <input type="password" id="password" name="password" class="form-control border-clr password-validation p-2.5 w-full text-sm text-gray-900 bg-transparent border-gray-300 appearance-none focus:outline-none border-0 focus:ring-0 focus:border-indigo-400 peer pl-15 password login-form signin-input w-full" aria-label="password" placeholder="" value="" autocomplete="off">
                                    <label for="password" class="ml-2 p-2 py-0 peer-focus:font-medium absolute text-sm text-gray-600 duration-300 transform -translate-y-6 scale-75 top-3 origin-[0] peer-focus:start-0 rtl:peer-focus:translate-x-1/4 peer-focus:text-indigo-400 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6 bg-white peer-focus:z-10">{{ __('Password') }}</label>
                                    <div class="input-group-prepend rounded-right"> <i class="cursor-pointer bi bi-eye" onclick="passwordToText($(this))"></i> </div>
                                </div>
                                <span id="password_error" class="custom-error m-0 p-0"></span>
                            </div>

                            <div class="form-group mb-2">
                                <div class="relative z-0 w-full group">
                                    <input type="password" id="password_confirmation" name="password_confirmation" class="form-control border-clr p-2.5 w-full text-sm text-gray-900 bg-transparent border-gray-300 appearance-none focus:outline-none border-0 focus:ring-0 focus:border-indigo-400 peer pl-15 password login-form signin-input w-full" aria-label="password" placeholder="" value="" autocomplete="off">
                                    <label for="password_confirmation" class="ml-2 p-2 py-0 peer-focus:font-medium absolute text-sm text-gray-600 duration-300 transform -translate-y-6 scale-75 top-3 origin-[0] peer-focus:start-0 rtl:peer-focus:translate-x-1/4 peer-focus:text-indigo-400 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6 bg-white peer-focus:z-10">{{ __('Confirm Password') }}</label>
                                    <div class="input-group-prepend rounded-right"> <i class="cursor-pointer bi bi-eye" onclick="passwordToText($(this))"></i> </div>
                                </div>
                                <span id="password_confirmation_error" class="custom-error m-0 p-0"></span>
                            </div>

                            <div class="items-center">
                                <div class="flex">
                                <input id="termsofuse" name="termsofuse" type="checkbox" value="Yes" class="w-4 h-4 text-amber-900-600 bg-gray-100 border-gray-300 rounded dark:ring-offset-ring-yellow-950  dark:bg-gray-700 dark:border-gray-600">
                                    <?php $termUrl = getDocuments(1)->upload_file ?? null; ?>
                                <label for="termsofuse" class="ms-2 text-xs remember-txt">{{__('I have read and accept the ')}}{{__('Terms And Conditions')}}({{__('click')}}  <a href="{{ (!empty($termUrl) ? env('DOCUMENTS_PATH').''.$termUrl : '') }}" class="terms linked" target="_blank"> {{__('here')}} </a> {{__('to view')}})</label>
                                </div>
                                <p id="termsofuse_error" class="custom-error m-0 p-0"></p>
                            </div>

                            <button type="submit" class="w-full primarym-btn text-center mt1">{!! renderIconHtml('save') !!}{{ __('Sign up') }}</button>
                        </div>
                    </form>
                    <!--START for form 4 -->
                    <div id="form4" class="grid md:grid-cols-1 gap-3" style="display: none;">
                        <h1 class="text-center fw-bold fs-5">{{ __('Verify your email address') }}</h1>
                        <div class="col-lg-12 col-md-12 col-sm-12 col-12">
                            <form method="POST" action="{{ route('member.verification.resend') }}" id="resendLinkForm" onsubmit="return false;">
                                <div id="form3" class="grid md:grid-cols-1 gap-1">
                                    @if (session('resent'))
                                        <div class="alert alert-success" role="alert">
                                            {{__('Verification link has been sent to your email address.')}}
                                        </div>
                                    @else
                                        <div class="relative z-0 w-full mb-1 group">
                                            <p class="top-notes">
                                                <b>{{ __('Before proceeding, please check your email for a verification link.') }}</b> </br>
                                                {{ __('If you did not receive the email, please check your spam or junk folder.') }} </br>  {{ __('You can also request a new verification link below.') }}
                                            </p>
                                        </div>

                                        <button type="submit" class="w-full primarym-btn text-center resend-btn" onclick="postreq(event, 'resendLinkForm')" >{!! renderIconHtml('link') !!}Resend Link</button>
                                        <p class="txt-title text-center mt-3">Lost access to your email? <a href="javascript:void(0)" class="linked wantToUpdateEmailBtn">{{ __('Update it now.') }}</a></p>
                                    @endif
                                </div>
                            </form>
                            <form method="POST" action="{{ route('member.verification.update') }}" class="mt-2" id="updateEmailForm" style="display: none">
                                <div id="form2" class="grid md:grid-cols-1 gap-1">
                                    <div class="relative z-0 w-full mb-1 group">
                                        <input type="text" name="email"
                                               id="updateEmailFormEmail"
                                               class="form-control email-validation block border-clr p-2.5 w-full text-sm text-gray-900 bg-transparent border-0 border-b-2 border-gray-700 appearance-none dark:text-white dark:border-gray-600 dark:focus:border-blue-500 focus:outline-none focus:ring-0 focus:border-blue-600 peer"
                                               placeholder="" aria-describedby="inputGroupPrependchangeemail" />
                                        <label for="updateEmailFormEmail" class="ml-2 p-2 py-0 peer-focus:font-medium absolute text-sm text-gray-500 dark:text-gray-400 duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:start-0 rtl:peer-focus:translate-x-1/4 peer-focus:text-blue-600 peer-focus:dark:text-blue-500 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6 bg-white">{{ __('New email') }}</label>

                                        <span id="email_error" class="custom-error m-0 p-0"></span>
                                    </div>
                                </div>

                                <button type="submit" class="w-full primarym-btn text-center mt-2 update-email-btn" onclick="postreq(event,'updateEmailForm')">{!! renderIconHtml('link') !!}{{ __('Change email & send link') }}</button>
                                <p class="txt-title text-center mt-3"><a href="javascript:void(0)" class="linked backBtn">{!! renderIconHtml('back') !!}{{ __('Back') }}</a></p>
                            </form>
                        </div>
                    </div>
                    <div class="text-center mt-3">
                        <p class="txt-title">Already Have An Account? <a href="{{ route('member.login') }}" class="linked">{{ __('Sign In') }}</a></p>
                    </div>
                    <div class="d-flex align-content-center items-center gap-2 mt-2" style="display: none;">
                        <ul class="d-flex align-center items-center justify-center gap-2 paginatem w-100">
                            <li id="registerForm1Btn" class="active cursor-pointer" onclick="showRegisterForm1()" data-disabled="false">{{ __('1') }}</li>
                            <li id="registerForm2Btn" class="cursor-no-drop" onclick="showRegisterForm2()" data-disabled="true">{{ __('2') }}</li>
                            <li id="registerForm3Btn" class="cursor-no-drop" onclick="">{{ __('3') }}</li>
                            <li id="registerForm4Btn" class="cursor-no-drop" onclick="">{{ __('4') }}</li>
                        </ul>
                    </div>

                </div>
            </div>
        </div>
    </section>

    <!-- Modal -->
    <div class="modal fade" id="withOutSponsorModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true" role="dialog" data-keyboard="false" data-backdrop="static">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <div class="modal-header text-center flex-column">
                    <i class="bi bi-info-circle text-primary h1 mb-2"></i>
                    <h5 class="h5 w-100 m-0 popup-title">{{__('You are registering without a personal sponsor.')}}</h5>
                </div>
                <div class="modal-body text-center">
                    <p class="mb-2">{{ __('Joining without a sponsor means you may miss out on valuable support, mentorship, and personalized guidance that a sponsor typically provides. Having a personal sponsor can significantly enhance your experience, helping you achieve your goals more effectively and efficiently.') }}</p>
                    <p class="mb-2">{{ __('We strongly encourage you to connect with the person who introduced you to this opportunity, as their assistance can be pivotal during your registration and throughout your journey.') }}</p>
                    <p class="mb-2"><b>{{__('Important:')}}</b> {{__('Once your registration is complete, your personal sponsor cannot be changed or added later. Please consider this carefully before proceeding.')}}</p>
                    <p class="mb-2">{{__('Would you like to continue without a sponsor?')}}</p>
                </div>
                <div class="modal-footer text-center">
                    <button type="button" class="btn btn-success btn-solid" onclick="continueWithOutSponsor()">{!! renderIconHtml('confirmyes') !!}{{__('Yes')}}</button>
                    <button type="button" class="btn btn-danger btn-solid" onclick="hideWithOutSponsorModal()">{!! renderIconHtml('cancel') !!}{{__('No')}}</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="invalidSponsorModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true" role="dialog" data-keyboard="false" data-backdrop="static">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header text-center">
                    <h5 class="h5 w-100 popup-title">{{ __('Invalid Sponsor Name') }}</h5>
                </div>
                <div class="modal-body text-center">
                    <p>
                        {{ __('Please contact the person who introduced you and ask for their assistance with the signup process.') }}
                    </p>
                </div>
                <div class="modal-footer text-center">
                    <button type="button" class="btn btn-success btn-solid" data-dismiss="modal">{!! renderIconHtml('confirmyes') !!}{{__('Ok')}}</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
<script src="{{asset('frontend/js/page-js/login.js')}}"></script>
<script src="{{ asset('frontend/js/sweetalert2/sweetalert2.js') }}"></script>
<script>
    window.Icons = @json(getIconClassMap());

    function renderIconTag(name, extraClass = 'me-1') {
        const iconClass = window.Icons?.[name];
        if (!iconClass) return '';
        return `<i class="${extraClass} ${iconClass}"></i>`;
    }
</script>
<script>
    const csrnowUrl = @json(config('csrnow.api.live_endpoint'));
    const csrnowApiKey = laravelEncrypt({ apikey: '{{ config('csrnow.api.auth_key') }}' });
</script>
@endpush
