@extends('app')
@section('content')

<!-- Main Page -->
<main>
    <section class="login">
        <div class="container">
            <div class="login__wrapper">
                <div class="login__left">
                    <form class="login__form" action="{{ route('AuthAccount') }}" method="post">
                        @csrf
                        <p class="login__form-title">Вход на Ремонт.рф</p>
                        <div class="login__form-list">
                            <div class="form-group">
                                <label class="form-group__label" for="login-email">Email</label>
                                <input class="login__form-input input-main" name="email" id="login-email" type="text">
                                @error('email')
                                <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="password-container">
                                <label class="form-group__label" for="login-password">Пароль</label>
                                <input class="register__form-input input-main" name="password" id="login-password" type="password" placeholder="Введите пароль">
                                <span class="password-toggle" id="login-password-toggle">
                    <!-- Видимая иконка "показать" -->
                    <svg xmlns="http://www.w3.org/2000/svg" style="margin-top: 24px" 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" style="margin-top: 24px" 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>
                                <span class="error-text" id="login-password-error"></span>
                                @error('password')
                                <span class="error-text">{{ $message }}</span>
                                @enderror
                            </div>
                            <label class="checkbox__item">
                                <input type="checkbox" name="remember" class="checkbox__input">
                                <span class="login__form-checkbox fake"></span>
                                <span class="login__check-name checkbox__name">Запомнить меня</span>
                            </label>
                            <button class="login__form-btn btn-main">Войти</button>
                            <a href="{{route('index')}}">
                                <button class="login__form-btn btn-outline btn-google" style="margin-top: 4px; width: 100%;" type="button">
                                    <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 class="login__form-btn">
                                <a href="{{ route('showForgotPage') }}" class="form-link">Забыли пароль?</a>
                            </div>
                        </div>
                        <div class="login__bottom">
                            <div class="login__bottom-title"><span>У вас нет учетной записи? <a href="{{route('showRegisterOnePage')}}" class="form-link">Зарегистрироваться</a></span></div>
                            <div class="login__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="login__right">
                    <div class="login__right--img">
                        <img src="https://dev2.xn--e1aoddhq.xn--p1ai/assets/images/login.webp" alt="Вход на ремонт.рф">
                    </div>
                    {{-- <a href="{{route('index')}}">
                        <button class="login__form-btn btn-outline btn-google" style="margin-top: 4px">
                            <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="login__bottom">--}}
{{--                <div class="login__bottom-title"><span>У вас нет учетной записи? <a href="{{route('showRegisterOnePage')}}" class="form-link">Зарегистрироваться</a></span></div>--}}
{{--                <div class="login__bottom-info">--}}
{{--				<p>Регистрируясь, входя или продолжая, я соглашаюсь с <a href="https://dev2.xn--e1aoddhq.xn--p1ai/user-agreement"target="_blank" class="colorLink">Условиями использования Ремонт.рф</a>. Я согласен с тем, что Ремонт.рф может использовать мой адрес электронной почты в маркетинговых целях.</p>--}}
{{--                </div>--}}
{{--            </div>--}}
        </div>
    </section>


</main>
<style>
    .text-danger{
        color: red;
    }
    .password-container {
        position: relative;
    }

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

    .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 passwordInput = document.getElementById('login-password');
        const passwordToggle = document.getElementById('login-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>

@endsection