@extends('site.components.form.layout.element')

@section('form-element-area-' . $formElementCodeName)

    <input class="c-input @if(!empty($isFormInputClean) && $isFormInputClean == true) c-input--clean @endif"
           type="email"
           id="{{$formElementCodeName}}"
           name="{{$formElementCodeName}}"
           dusk="{{$formElementCodeName}}"
           placeholder="{{ isset($formElementPlaceholder) ? $formElementPlaceholder : __('site/form.'.$formElementCodeName.'.placeholder') }}"
           @if(isset($formElementValue))
                value="{{$formElementValue}}"
           @elseif(isset($forceOnlyOld) && $forceOnlyOld)
                value="{{ old($formElementCodeName, '') }}"
           @else
                value="{{ old_session($formElementCodeName, '') }}"
           @endif
           onblur="validateEmail(this);"
           autocomplete="email"/>

    <script>
        function validateEmail(email) {
            const emailError = document.querySelector('#{{$formElementCodeName}}-error');
            if (emailError) emailError.parentNode.removeChild(emailError);

            if (email.value) {
                const regexMatch = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(email.value);
                if (!regexMatch)
                    email.insertAdjacentHTML('afterend', '<div id="{{$formElementCodeName}}-error" class="c-form-element__error">Het ingevulde e-mail adres is niet geldig.</div>');
            }
        }
    </script>
@endsection