@extends('app')
@php
    $seoKey = 'register-user';
@endphp
@section('content')
<main>
    <section class="register">
        <div class="container">
            <div class="register__wrapper">
                <div class="register__left">
                    <form action="{{ route('CreateAccount') }}" method="post" class="register__form">
                        @csrf
                        <p class="register__form-title">Присоединяйтесь к Ремонт.рф!</p>
                        <div class="register__form-list">
                            <div class="form-group">
                                <label class="form-group__label" for="name">Имя</label>
                                <input class="register__form-input input-main" name="name" id="name" type="text" value="{{ old('name') }}">
                                @error('name')
                                <span class="error-text" id="name-error">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="form-group">
                                <label class="form-group__label" for="email">E-mail</label>
                                <input class="register__form-input input-main" name="email" id="email" type="email" value="{{ old('email') }}">
                                @error('email')
                                <span class="error-text">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="form-group">
                                <label class="form-group__label" for="password">Пароль</label>
                                <div class="password-container">
                                    <div class="container_password_register">
                                        <input class="register__form-input input-main" name="password" id="password" type="password" placeholder="Создать пароль">
                                        <span class="password-toggle" id="password-toggle">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-eye" viewBox="0 0 16 16">
                                                <path d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8M1.173 8a13 13 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5s3.879 1.168 5.168 2.457A13 13 0 0 1 14.828 8q-.086.13-.195.288c-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5s-3.879-1.168-5.168-2.457A13 13 0 0 1 1.172 8z"/>
                                                <path d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5M4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0"/>
                                            </svg>
                                            <svg xmlns="http://www.w3.org/2000/svg"  width="16" height="16" fill="currentColor" class="bi bi-eye-slash-fill" viewBox="0 0 16 16">
                                                <path d="m10.79 12.912-1.614-1.615a3.5 3.5 0 0 1-4.474-4.474l-2.06-2.06C.938 6.278 0 8 0 8s3 5.5 8 5.5a7 7 0 0 0 2.79-.588M5.21 3.088A7 7 0 0 1 8 2.5c5 0 8 5.5 8 5.5s-.939 1.721-2.641 3.238l-2.062-2.062a3.5 3.5 0 0 0-4.474-4.474z"/>
                                                <path d="M5.525 7.646a2.5 2.5 0 0 0 2.829 2.829zm4.95.708-2.829-2.83a2.5 2.5 0 0 1 2.829 2.829zm3.171 6-12-12 .708-.708 12 12z"/>
                                            </svg>
                                        </span>
                                    </div>
                                    @error('password')
                                    <span class="error-text" id="password-error">{{$message}}</span>
                                    @enderror
                                </div>
                            </div>
                            <button type="submit" class="register__form-btn btn-main">Регистрация через e-mail</button>
                            <a href="{{route('index')}}" >
                                <button class="login__form-btn btn-outline btn-google">
                                    <svg width="38" height="38" viewBox="0 0 43 42" fill="none"
                                         xmlns="http://www.w3.org/2000/svg">
                                        <ellipse cx="21.3818" cy="21" rx="21.3818" ry="21" fill="#0077FF"/>
                                        <path
                                            d="M22.4735 28.5C14.1245 28.5 9.36248 23.1509 9.16406 14.25H13.3462C13.4835 20.783 16.5666 23.5503 19.0087 24.1209V14.25H22.9468V19.8844C25.3584 19.6419 27.8918 17.0743 28.7465 14.25H32.6845C32.0282 17.7305 29.2808 20.298 27.3271 21.3536C29.2808 22.2095 32.4099 24.4489 33.6004 28.5H29.2655C28.3345 25.7898 26.0147 23.6929 22.9468 23.4077V28.5H22.4735Z"
                                            fill="white"/>
                                    </svg>
                                    Войти с VK
                                </button>
                            </a>
                        </div>
                        <div class="register__bottom">
                            <div class="register__bottom-title"><span> Уже зарегистрированы? <a href="{{route('login')}}"
                                                                                                class="form-link">Войти</a></span>
                            </div>
                            <div class="register__bottom-info">
                                <p>Регистрируясь, входя или продолжая, я соглашаюсь с <a href="https://dev2.xn--e1aoddhq.xn--p1ai/user-agreement"target="_blank" class="colorLink">Условиями использования Ремонт.рф</a>. Я согласен с тем, что Ремонт.рф может использовать мой адрес электронной почты в маркетинговых целях.</p>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="register__right">
                    <div class="login__right--img">
                        <img src="https://dev2.xn--e1aoddhq.xn--p1ai/assets/images/login.webp" alt="Регистрация на ремонт.рф">
                    </div>
{{--                    <a href="{{route('index')}}" style="margin-top: 36px;">--}}
{{--                        <button class="login__form-btn btn-outline btn-google">--}}
{{--                            <svg width="38" height="38" viewBox="0 0 43 42" fill="none"--}}
{{--                                 xmlns="http://www.w3.org/2000/svg">--}}
{{--                                <ellipse cx="21.3818" cy="21" rx="21.3818" ry="21" fill="#0077FF"/>--}}
{{--                                <path--}}
{{--                                    d="M22.4735 28.5C14.1245 28.5 9.36248 23.1509 9.16406 14.25H13.3462C13.4835 20.783 16.5666 23.5503 19.0087 24.1209V14.25H22.9468V19.8844C25.3584 19.6419 27.8918 17.0743 28.7465 14.25H32.6845C32.0282 17.7305 29.2808 20.298 27.3271 21.3536C29.2808 22.2095 32.4099 24.4489 33.6004 28.5H29.2655C28.3345 25.7898 26.0147 23.6929 22.9468 23.4077V28.5H22.4735Z"--}}
{{--                                    fill="white"/>--}}
{{--                            </svg>--}}
{{--                            Войти с VK--}}
{{--                        </button>--}}
{{--                    </a>--}}
                </div>
            </div>
{{--            <div class="register__bottom">--}}
{{--                <div class="register__bottom-title"><span> Уже зарегистрированы? <a href="{{route('showLoginPage')}}"--}}
{{--                                                                                    class="form-link">Войти</a></span>--}}
{{--                </div>--}}
{{--                <div class="register__bottom-info">--}}
{{--				<p>Регистрируясь, входя или продолжая, я соглашаюсь с <a href="https://xn--e1aoddhq.xn--p1ai/user-agreement"target="_blank" class="colorLink">Условиями использования Ремонт.рф</a>. Я согласен с тем, что Ремонт.рф может использовать мой адрес электронной почты в маркетинговых целях.</p>--}}
{{--                </div>--}}
{{--            </div>--}}
        </div>
    </section>


</main>

<style>
    .error-text {
        color: red;
        font-size: 14px;
        margin-top: 5px;
    }


    .success-text {
        color: green;
        font-size: 14px;
        margin-top: 5px;
    }

    .password-container {
        position: relative;
    }

    .container_password_register{
        position: relative;
    }

    .password-toggle {
        position: absolute;
        right: 10px;
        top: calc(10px + ((100% - 10px) / 2));
        cursor: pointer;
        display: flex;
        align-items: center;
        transform: translateY(-50%);
    }

    .password-toggle svg {
        display: none;
    }

    .password-toggle .bi-eye {
        display: block;
    }

    .password-container input[type="password"].show-password + .password-toggle .bi-eye {
        display: none;
    }

    .password-container input[type="password"].show-password + .password-toggle .bi-eye-slash-fill {
        display: block;
    }


</style>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const form = document.querySelector('.register__form');

        const nameInput = document.getElementById('name');
        const emailInput = document.getElementById('email');
        const passwordInput = document.getElementById('password');

        const nameError = document.getElementById('name-error');
        const emailError = document.getElementById('email-error');
        const passwordError = document.getElementById('password-error');

        function validateName() {
            const name = nameInput.value.trim();
            let errorMessage = '';

            if (!name) {
                errorMessage = 'Имя обязательно для заполнения.';
            } else if (name.length < 3) {
                errorMessage = 'Имя должно содержать не менее 3 символов.';
            } else if (name.length > 15) {
                errorMessage = 'Имя должно содержать не более 15 символов.';
            }

            nameError.textContent = errorMessage;
            return errorMessage === '';
        }

        function validateEmail() {
            const email = emailInput.value.trim();
            let errorMessage = '';

            const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
            if (!email) {
                errorMessage = 'Поле E-mail обязательно для заполнения.';
            } else if (!emailRegex.test(email)) {
                errorMessage = 'Введите корректный адрес электронной почты.';
            }

            emailError.textContent = errorMessage;
            return errorMessage === '';
        }

        function validatePassword() {
            const password = passwordInput.value;
            const minLength = 8;
            const regexLowerCase = /[a-zа-я]/;
            const regexUpperCase = /[A-ZА-Я]/;
            const regexDigit = /[0-9]/;
            const regexSpecialChar = /[@$!%*#?&()_\-+=<>/[\]{}|~:;]/;

            let errorMessage = '';

            if (!password) {
                errorMessage = 'Пароль обязателен для заполнения.';
            } else if (!regexLowerCase.test(password)) {
                errorMessage = 'Пароль должен содержать хотя бы одну строчную букву.';
            } else if (!regexUpperCase.test(password)) {
                errorMessage = 'Пароль должен содержать хотя бы одну заглавную букву.';
            } else if (!regexDigit.test(password)) {
                errorMessage = 'Пароль должен содержать хотя бы одну цифру.';
            } else if (!regexSpecialChar.test(password)) {
                errorMessage = 'Пароль должен содержать хотя бы один специальный символ.';
            } else if (password.length < minLength) {
                errorMessage = 'Пароль должен содержать не менее 8 символов.';
            } else {
                // Все проверки пройдены
                errorMessage = 'Пароль надежный.';
            }

            passwordError.textContent = errorMessage;

            if (errorMessage === 'Пароль надежный.') {
                passwordError.style.color = 'green';
            } else {
                passwordError.style.color = 'red';
            }

            return errorMessage === 'Пароль надежный.';
        }


        form.addEventListener('submit', function (event) {
            const isNameValid = validateName();
            const isEmailValid = validateEmail();
            const isPasswordValid = validatePassword();

            if (!isNameValid || !isEmailValid || !isPasswordValid) {
                event.preventDefault(); // Останавливаем отправку формы при наличии ошибок
            }
        });


        // Добавляем события input для обновления ошибок в реальном времени
        nameInput.addEventListener('input', validateName);
        emailInput.addEventListener('input', validateEmail);
        passwordInput.addEventListener('input', validatePassword);
    });
</script>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const passwordInput = document.getElementById('password');
        const passwordToggle = document.getElementById('password-toggle');
        const eyeIcon = passwordToggle.querySelector('.bi-eye');
        const eyeSlashIcon = passwordToggle.querySelector('.bi-eye-slash-fill');

        passwordToggle.addEventListener('click', function () {
            if (passwordInput.type === 'password') {
                passwordInput.type = 'text';
                eyeIcon.style.display = 'none';
                eyeSlashIcon.style.display = 'block';
            } else {
                passwordInput.type = 'password';
                eyeIcon.style.display = 'block';
                eyeSlashIcon.style.display = 'none';
            }
        });
    });

</script>
<style>
    @media (max-width: 767.98px) {
        .register2__form-list{
            gap: 0 !important;;
        }
        .form-group{
            margin-bottom: 0
        }
        .form-group__label{
            margin-top: 0;
        }
        .register2__form-checkbox.fake{
            max-width: 23px;
            max-height: 24px;
            height: 20px !important;
            width: 20px !important;
            margin-right: 13px;
            min-width: 20px !important;
            margin-bottom: 12px;
        }
        .register2__check-name.checkbox__name{
            margin-bottom: 10px
        }
        .register__bottom-title{
            margin-top: 15px;
        }

        .register__form-list{
            gap:0;
        }
        .form-group{
            margin-bottom: 0
        }
        .form-group__label{
            margin-top: 0;
        }
        .register__form-checkbox.fake{
            max-width: 23px;
            max-height: 24px;
            height: 20px !important;
            width: 20px !important;
            margin-right: 13px;
            min-width: 20px !important;

        }
        .register__check-name.checkbox__name{
            margin-bottom: 10px
        }
        .register__bottom-title{
            margin-top: 15px;
        }
        .register__form-btn.btn-main{
            margin-bottom: 15px
        }
    }
    /* Исправление стилей регистрации заказчика - обеспечение правильного отображения */
    /* Используем высокую специфичность для переопределения основных стилей */

    /* Десктоп - убеждаемся, что стили применяются */
    /* section.register .register__wrapper,
    .register .register__wrapper,
    main .register__wrapper {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 32px !important;
        justify-content: unset !important;
    }

    section.register .register__form,
    .register .register__form,
    main .register__form {
        border-radius: 20px !important;
        background: white !important;
        padding: 60px 40px !important;
    }

    section.register .register__form-list,
    .register .register__form-list,
    main .register__form-list {
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
    }

    section.register .register__left,
    .register .register__left,
    main .register__left {
        padding-right: 32px !important;
        border-right: 1px solid #eaeaea !important;
        max-width: unset !important;
        width: auto !important;
    }

    section.register .register__right,
    .register .register__right,
    main .register__right {
        padding-left: 32px !important;
        display: flex !important;
    } */

    /* Планшет */
    /* @media (max-width: 1024px) {
        section.register .register__wrapper,
        .register .register__wrapper,
        main .register__wrapper {
            grid-template-columns: repeat(1, 1fr) !important;
            gap: 40px !important;
        }

        section.register .register__left,
        .register .register__left,
        main .register__left {
            padding-right: 0 !important;
            border-right: none !important;
        }

        section.register .register__right,
        .register .register__right,
        main .register__right {
            padding-left: 0 !important;
        }
    } */

    /* Мобильные устройства */
    /* @media (max-width: 768px) {
        section.register .register__wrapper,
        .register .register__wrapper,
        main .register__wrapper {
            gap: 30px !important;
        }

        section.register .register__title,
        .register .register__title,
        main .register__title {
            font-size: 32px !important;
            text-align: center !important;
        }

        section.register .register__subtitle,
        .register .register__subtitle,
        main .register__subtitle {
            font-size: 22px !important;
            text-align: center !important;
        }

        section.register .register__form,
        .register .register__form,
        main .register__form {
            padding: 40px 20px !important;
        }

        section.register .register__form-title,
        .register .register__form-title,
        main .register__form-title {
            font-size: 24px !important;
        }
    } */

    /* Маленькие мобильные */
    /* @media (max-width: 480px) {
        section.register .register__form,
        .register .register__form,
        main .register__form {
            padding: 30px 15px !important;
        }

        section.register .register__title,
        .register .register__title,
        main .register__title {
            font-size: 28px !important;
        }

        section.register .register__subtitle,
        .register .register__subtitle,
        main .register__subtitle {
            font-size: 18px !important;
        }
    } */
</style>
@endsection