@extends('layouts.noheaderlayout')

@section('content')



@if(isset($next_url) && !empty($next_url))

<div class="container mb-5 mt-3">
    <div class="d-flex pe-3 p-4 align-items-center alert alert-info alert-dismissible fade rounded-14 justify-content-between" role="alert" bis_skin_checked="1">
        <div class="d-flex align-items-center" bis_skin_checked="1">
            <span class="icon-info-circle fs-4 me-2"></span> 
            <span class="small fw-semibold text-black"> {{ optionByKey('private_content') }}</span>
        </div>
        <button type="button" class="close small" data-bs-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">×</span>
        </button>
    </div>
</div>		

@endif



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

			<div class="row">

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

					<h1 class="main-title home">

					   {{ optionByKey('login_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="login-form" class="mb-4" method="POST" action="{{ route('login') }}" autocomplete="off">

                        @csrf

                        <div class="row g-0">

                            

						

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

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

                                <input type="email" placeholder="{{ optionByKey('login_email')}}" value="{{ old('email') }}" class="form-control @error('email') is-invalid @enderror" id="E-mail" name="email">

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

								@error('email')

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

										{{ $message }}

									 </div>

								@enderror							

                            </div>

							

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

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

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

                                    <input id="password-field" placeholder="{{ optionByKey('login_password')}}"  type="password" class="form-control @error('password') is-invalid @enderror" name="password">

                                    <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>

                            </div>

							@error('password')

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

										{{ $message }}

									 </div>

							@enderror	

							

					

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

								<x-turnstile-captcha :language="substr(optionByKey('locale'), 0, 2)" />

							</div>

							@if (Session::has('msg'))

                                <div class="mb-4 alert ui-alert">
                                    <div class="alert__content">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="25" height="24" fill="none"><path fill="#DE1135" fill-rule="evenodd" d="M23 12c0 5.523-4.477 10-10 10S3 17.523 3 12 7.477 2 13 2s10 4.477 10 10M13 6.494a1.245 1.245 0 0 0-1.24 1.359l.497 5.462a.747.747 0 0 0 1.487 0l.496-5.462A1.244 1.244 0 0 0 13 6.494m0 11.012a1.19 1.19 0 1 0 0-2.38 1.19 1.19 0 0 0 0 2.38" clip-rule="evenodd"/></svg>
                                        <div class="alert__title-wrapper">
                                            <div class="alert__title">
                                                <div>
                                                    {{ Session::get('msg') }}
                                                </div>
                                            </div> 
                                        </div>
                                    </div>
                                </div>

                            @endif

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

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

                                   {{ optionByKey('login_button')}}

                                </button>

                            </div>

							

							

				        </div>

                    </form>

                    

                    <p class="text-center">
                        <a href="{{ url('c/password-recover') }}/">{{ optionByKey('login_forgot_pass')}}</a>
                    </p>
                    <hr>
                    <div class="d-flex flex-column button-normal">
                        <p class="text-center">
                            {{ optionByKey('dont_account')}} 
                        </p> 
                        <a class="btn btn-outline-primary block" href="{{ url('c/signup') }}/">{{ optionByKey('sign_up')}}</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>

    $('.fadoutbtn').click(function() {
    	$(this).attr('disabled', 'disabled');
    	$(this).parents('form').submit();
    });
    
    
    // Toggle For Password
    
    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");
                }
            }
        });
    });



    document.addEventListener('DOMContentLoaded', function() {
        function validateEmail(emailInput) {
            const emailValue = emailInput.value.trim();
            const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; 
            let errorMessage = '';
            if (!emailValue) {
                errorMessage = '{{ optionBykey('email_error') }}';
            } else if (!emailRegex.test(emailValue)) {
                errorMessage = '{{ optionBykey('email_error_regex') }}';
            }
            return errorMessage;
        }



        function validatePassword(passwordInput) {
            const passwordValue = passwordInput.value.trim();
            let errorMessage = '';
            if (!passwordValue) {
                errorMessage = '{{ optionBykey('pass_blank_error') }}';
            }
            return errorMessage;
        }



        function handleValidation(inputElement, validateFn, errorElementId) {
            const errorMessage = validateFn(inputElement);
            const errorElement = document.getElementById(errorElementId);
            if (errorMessage) {
                inputElement.classList.add('invalid');
                errorElement.textContent = errorMessage;
            } else {
                inputElement.classList.remove('invalid');
                errorElement.textContent = '';
            }
            return !errorMessage; 
        }



        document.getElementById('login-form').addEventListener('submit', function(event) {
            const emailInput = document.getElementById('E-mail');
            const passwordInput = document.getElementById('password-field');
            let hasErrors = false;
            let firstErrorField = null;
            const isEmailValid = handleValidation(emailInput, validateEmail, 'email-error');
            const isPasswordValid = handleValidation(passwordInput, validatePassword, 'password-error');
            if (!isEmailValid || !isPasswordValid) {
                hasErrors = true;
                if (!isEmailValid && !firstErrorField) {
                    firstErrorField = emailInput;
                }
                if (!isPasswordValid && !firstErrorField) {
                    firstErrorField = passwordInput;
                }
            }

            if (hasErrors) {
                event.preventDefault();
                if (firstErrorField) {
                    firstErrorField.focus();
                }
            }
        });

        document.getElementById('E-mail').addEventListener('input', function() {
            handleValidation(this, validateEmail, 'email-error');
        });

        document.getElementById('password-field').addEventListener('input', function() {
            handleValidation(this, validatePassword, 'password-error');
        });
    });

</script>

		

@endpush