@extends('layouts.noheaderlayout')



@section('content')



        <div class="container mt-5 mb-5">

            <div class="row">

                <div class="col-md-12 text-center">                    

                    <h1 class="main-title home">

                         {{ optionBykey('reg_heading') }}

                    </h1>

                </div>

                <div class="col-md-12">

                    <div class="d-flex justify-content-center tipsaccount">

                        <div id="incontroelegantePromoCarousel" data-bs-ride="carousel" class="carousel slide">

                            <div class="carousel-inner">

                                {!! optionByKey('login_page_slider') !!}

                            </div>

                        </div>

                    </div>

                       

                </div>

            </div>

        </div>

        <div class="container mt-5 mb-5 loginpanel">

            <div class="row">

                <div class="col-md-12">

                 <form id="signup-form" class="mb-4" action="{{ route('register') }}" method="post" autocomplete="off">

						@csrf

                        <div class="row g-0">

                            <div class="col-md-12 mb-3">

                                <label for="E-mail" class="form-label">{{ optionBykey('reg_email') }}</label>

                                <input type="email" placeholder="{{ optionBykey('reg_email') }}" class="form-control" id="E-mail" name="email" autocomplete="off">

                                <div id="email-error" class="error-message"></div>

								@error('email')

                                <div id="password-error" class="error-message">{{ $message }}</div>

                                @enderror

								

                            </div>

                            <div class="col-md-12 mb-3">

                                <label for="password-field" class="form-label">{{ optionBykey('reg_password') }}</label>

                                <div class="eye-icon-add position-relative">

                                    <input id="password-field" placeholder="{{ optionBykey('reg_password') }}" type="password" class="form-control" name="password" autocomplete="off">

                                    <span toggle="#password-field" class="fa-fw icon-eye-slash field-icon toggle-password togglePassword"></span>

                                </div>

                                <div id="password-error" class="error-message"></div>

								

								@error('password')

									<div id="password-error" class="error-message">{{ $message }}</div>

                                @enderror

							  

                            </div> 

                            <div class="col-md-12 mb-3">                           

                                <div>

                                    <div class="progress"><div class="progress-bar"></div></div>

                                </div>

                                <div id="message" role="alert" class="m-0 alert alert-loginpanel">

                                   {!! optionBykey('reg_pass_error') !!}

                                </div>

                            </div>

                            <div class="col-md-12 mb-3">

                                <div class="row">

                                    <div class="col-md-2">

                                        <label for="terms" class="switch switch-left-right">

                                            <input id="terms" type="checkbox" name="terms" class="switch-input form-control"> 

                                            <span data-on="{{optionBykey('yes_btn')}}" data-off="{{optionBykey('no_btn')}}" class="switch-label"></span> 

                                            <span class="switch-handle"></span>

                                        </label>

                                    </div>

                                    <div class="col-md-10 txt_privacy">

                                         {!! optionBykey('reg_privicy_content') !!}

                                        <div id="termsFeedback" role="alert" class="error-message"></div>

                                    </div>

                                </div>



                                <div class="row">

                                    <div class="col-md-2">

                                        <label for="adv_accept" class="switch switch-left-right">

                                            <input id="adv_accept" type="checkbox" name="adv_accept" class="switch-input form-control" /> <span data-on="{{optionBykey('yes_btn')}}" data-off="{{optionBykey('no_btn')}}" class="switch-label"></span> <span class="switch-handle"></span>

                                        </label>

                                    </div>

                                    <div class="col-md-10 txt_privacy">

										{!! optionBykey('reg_adv_accept') !!}

                                    </div>

                                </div>



                                

                            </div>

							

                            <div class="col-md-12 mb-4">
								<x-turnstile-captcha :language="substr(optionByKey('locale'), 0, 2)" />								
							</div>

							

                            <div class="col-md-12">

                                <button disabled type="submit" class="btn btn-primary btn-block w-100 m-0 frm-btn">

                                   {{ optionBykey('reg_submit_button') }}

                                </button>

                            </div>

                        </div>

                    </form>

                    
                    <hr>
                    <div class="d-flex flex-column button-normal">
                        <p class="text-center">
                            {{ optionByKey('already_account')}} 
                        </p> 
                        <a class="btn btn-outline-primary block" href="{{ url('c/login') }}/">{{ optionBykey('login_button') }}</a>
                        
                    </div>                  

                </div>

            </div>

        </div>



@endsection



@push('css-styles')

<link rel="stylesheet" href="/static/css/login-signup.css?v={{time()}}" type="text/css">

@endpush





@push('scripts')


<script>
            document.addEventListener('DOMContentLoaded', function() {
                $(".toggle-password").click(function() {
                    $(this).toggleClass("icon-eye icon-eye-slash");
                    var input = $($(this).attr("toggle"));
                    if (input.length) {
                        if (input.attr("type") === "password") {
                            input.attr("type", "text");
                        } else {
                            input.attr("type", "password");
                        }
                    }
                });
            });

            //Form Validation For Signup

            document.addEventListener('DOMContentLoaded', function() {
            document.getElementById("E-mail").focus();
            function validateEmail(emailInput) {
                const emailValue = emailInput.value.trim();
                const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
                let errorMessage = '';
                let errorElementww = document.getElementById('email-error');
                let isValid = 1;
                if (!emailValue) {
                    isValid = 0;
                    errorMessage = '{{ optionBykey('email_error') }}';
                    errorElementww.innerHTML = errorMessage ? '<p class="error">' + errorMessage + '</p>' : '';

                } else if (!emailRegex.test(emailValue)) {
                    isValid = 0;
                    errorMessage = '{{ optionBykey('email_error_regex') }}';
                    errorElementww.innerHTML = errorMessage ? '<p class="error">' + errorMessage + '</p>' : '';
                } else {
                    errorElementww.innerHTML = '';
                }
                return { isValid, errorMessage };
            }



            function validatePassword(passwordInput) {
                const passwordValue = passwordInput.value.trim();
                const minLength = 8;
                const hasLowerCase = /[a-z]/.test(passwordValue);
                const hasUpperCase = /[A-Z]/.test(passwordValue);
                const hasNumber = /[0-9]/.test(passwordValue);
                const isValidLength = passwordValue.length >= minLength;
                const errorElementw = document.getElementById('password-error');
                if (!passwordValue) {
                    errorElementw.innerHTML = '<p class="error">Fill in the password</p>';
                }
                const criteria = [
                    { check: hasLowerCase, message: 'A <b>lowercase</b> letter' },
                    { check: hasUpperCase, message: 'A <b>uppercase</b> letter' },
                    { check: hasNumber, message: 'A <b>number</b>' },
                    { check: isValidLength, message: 'Minimum <b>8 characters</b>' }
                ];
                const invalidMessages = criteria.filter(c => !c.check).map(c => c.message);
                const isValid = invalidMessages.length === 0;
                if (!passwordValue) {
                    errorElementw.innerHTML = '<p class="error">{{ optionBykey('pass_blank_error') }}</p>';
                } else if (!isValid) {
                    errorElementw.innerHTML = '<p class="error">{{ optionBykey('pass_error') }}</p>';
                } else {
                    errorElementw.innerHTML = '';
                }

                return { isValid, invalidMessages, criteria };
            }



            function validateTerms(termsInput) {
                const isChecked = termsInput.checked;
                const errorMessage = isChecked ? '' : '{{ optionBykey('terms_error') }}';
                return { isValid: isChecked, errorMessage };
            }



            function handleValidation(inputElement, validateFn, errorElementId) {
                const result = validateFn(inputElement);
                const { isValid, invalidMessages, criteria, errorMessage } = result;
                const errorElement = document.getElementById(errorElementId);
                if (!errorElement) {
                    console.error(`Element not found for ID: ${inputElement?.id ?? errorElementId}`);
                    return false;
                }

                if (errorElementId === 'password-error') {
                    const errorElement2 = document.getElementById('message');
                    const messageListItems = errorElement2.querySelectorAll('li');
                    messageListItems.forEach((item, index) => {
                        if (index < criteria.length) {
                            if (criteria[index].check) {
                                item.classList.add('valid');
                                item.classList.remove('invalid');
                            } else {
                                item.classList.add('invalid');
                                item.classList.remove('valid');
                            }
                        }
                    });
                } else if (errorElementId === 'termsFeedback') {
                    errorElement.innerHTML = errorMessage ? '<p class="error">' + errorMessage + '</p>' : '';
                }

                if (errorElementId === 'termsFeedback') {
                    const switchContainer = document.querySelector('.switch-left-right');
                    switchContainer.style.border = isValid ? '0px solid green' : '1px solid red';
                } else {
                    inputElement.classList.toggle('valid', isValid);
                    inputElement.classList.toggle('invalid', !isValid);
                }

                if (errorElementId === 'password-error') {
                    updateProgressBar(invalidMessages.length);
                }
                return isValid;
            }


            const passwordInput1 = document.querySelector('input[name="password"]');
            const emailInput1 = document.getElementById('E-mail');
            const termsInput1 = document.getElementById('terms');
            emailInput1.addEventListener('input', function() {
                handleValidation(emailInput1, validateEmail, 'email-error');
            });

            passwordInput1.addEventListener('input', function() {
                handleValidation(passwordInput1, validatePassword, 'password-error');
            });

            document.getElementById('terms').addEventListener('change', function() {
                handleValidation(termsInput1, validateTerms, 'termsFeedback');
            });

            function scrollToError(errorElement) {
                if (!errorElement) return;    
                errorElement.scrollIntoView({
                    behavior: 'smooth',
                    block: 'center' 
                });

                const inputElement = document.querySelector(`#${errorElement.id.replace('-error', '')}`);
                if (inputElement) {
                    inputElement.focus();
                }

            }

            

            document.getElementById('signup-form').addEventListener('submit', function(event) {
                const passwordInput = document.querySelector('input[name="password"]');
                const emailInput = document.getElementById('E-mail');
                const termsInput = document.getElementById('terms');
                const isEmailValid = handleValidation(emailInput, validateEmail, 'email-error');
                const isPasswordValid = handleValidation(passwordInput, validatePassword, 'password-error');
                const isTermsValid = handleValidation(termsInput, validateTerms, 'termsFeedback');
                if (!isEmailValid || !isPasswordValid || !isTermsValid) {
                    event.preventDefault();
                    if (!isEmailValid) {
                        scrollToError(document.getElementById('email-error')); 
                    } else if (!isPasswordValid) {
                        scrollToError(document.getElementById('password-error')); 
                    } else if (!isTermsValid) {
                        scrollToError(document.getElementById('termsFeedback')); 
                    }
                }
            });


            function updateProgressBar(numOfInvalid) {
                const progressBar = document.querySelector('.progress-bar');
                const progress = (4 - numOfInvalid) * 25; 
                progressBar.style.width = '${progress}%';
                if (progress === 100) {
                    progressBar.classList.add('bg-success');
                } else {
                    progressBar.classList.remove('bg-success');
                }
            }

        });


 </script>



@endpush