@extends('app')
@section('content')
<main>
    <section class="profile">
        <div class="container">
            {{-- Используем единый компонент шапки профиля --}}
            <x-profile-header :user="$professional" />
        </div>
    </section>
    <section class="settings">
        <div class="container">
            <div class="settings__inner">
                <button class="settings-menu__btn">Настройки</button>
                {{-- Используем единый компонент настроек профиля --}}
                <x-profile-settings :user="$professional" />
                <div class="settings__main">
                    <form action="{{route('changePassword')}}" method="POST">
                        @csrf
                        <div class="settings__social">
                            <p class="settings-title settings__social-title">Изменение пароля</p>
                            <div class="settings__social-list">
                                <div class="form-group">
                                    <label class="settings__label">Текущий пароль</label>
                                    <div class="input-group">
                                        <input class="input-main settings__input" type="password" name="current_password" required>
                                        <span class="input-group-append">
                    <i class="fa fa-eye toggle-password" aria-hidden="true"></i>
                </span>
                                    </div>
                                </div>
                                <div class="form-group" style="margin-top: 20px">
                                    <label class="settings__label">Новый пароль</label>
                                    <div class="input-group">
                                        <input class="input-main settings__input" type="password" name="new_password" required>
                                        <span class="input-group-append">
                    <i class="fa fa-eye toggle-password" aria-hidden="true"></i>
                </span>
                                    </div>
                                    <span class="error-text" id="new_password"></span>
                                </div>
                                <div class="form-group" style="margin-top: 20px">
                                    <label class="settings__label">Подтвердите новый пароль</label>
                                    <div class="input-group">
                                        <input class="input-main settings__input" type="password" name="new_password_confirmation" required>
                                        <span class="input-group-append">
                    <i class="fa fa-eye toggle-password" aria-hidden="true"></i>
                </span>
                                    </div>
                                    <span class="error-text" id="new_password_confirmation"></span>
                                </div>
                            </div>
                        </div>
                    <div class="settings__save">
                        <button class="btn-main settings__btn settings__save-btn" style="height: max-content;">Изменить пароль</button>
                    </div>
                    </form>
                </div>
            </div>
        </div>
    </section>
</main>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const currentPasswordInput = document.querySelector('input[name="current_password"]');
        const newPasswordInput = document.querySelector('input[name="new_password"]');
        const confirmPasswordInput = document.querySelector('input[name="new_password_confirmation"]');
        const newPasswordError = document.getElementById('new_password');
        const confirmPasswordError = document.getElementById('new_password_confirmation');
        const form = document.querySelector('form');

        // Функция для проверки нового пароля
        function validateNewPassword() {
            const password = newPasswordInput.value;
            const minLength = 8;
            const regexLowerCase = /[a-zа-я]/; // Строчные буквы (латинские и русские)
            const regexUpperCase = /[A-ZА-Я]/; // Заглавные буквы (латинские и русские)
            const regexDigit = /[0-9]/; // Цифры
            const regexSpecialChar = /[@$!%*#?&()_\-+=<>/[\]{}|~:;]/; // Спецсимволы

            let errorMessage = '';
            let errorClass = 'error-text';

            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 = 'Пароль надежный';
                errorClass = 'success-text';
            }

            newPasswordError.textContent = errorMessage;
            newPasswordError.className = errorClass;

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

        // Функция для проверки совпадения паролей
        function validatePasswordMatch() {
            if (newPasswordInput.value === confirmPasswordInput.value && newPasswordInput.value !== '') {
                confirmPasswordError.textContent = 'Пароли совпадают';
                confirmPasswordError.className = 'success-text';
                return true;
            } else {
                confirmPasswordError.textContent = 'Пароли не совпадают';
                confirmPasswordError.className = 'error-text';
                return false;
            }
        }

        // События на ввод данных
        newPasswordInput.addEventListener('input', validateNewPassword);
        confirmPasswordInput.addEventListener('input', validatePasswordMatch);

        // Валидация при отправке формы
        form.addEventListener('submit', function (event) {
            const isPasswordValid = validateNewPassword();
            const isMatchValid = validatePasswordMatch();

            if (!isPasswordValid || !isMatchValid) {
                event.preventDefault();
                if (!isPasswordValid) {
                    newPasswordError.textContent = 'Исправьте пароль, чтобы продолжить.';
                }
                if (!isMatchValid) {
                    confirmPasswordError.textContent = 'Пароли должны совпадать.';
                }
            }
        });
    });
</script>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        // Получаем все ссылки
        const links = document.querySelectorAll('.settings__links-url');

        // Обработчик клика для каждой ссылки
        links.forEach(link => {
            link.addEventListener('click', function () {
                // Удаляем активный класс у всех ссылок
                links.forEach(item => {
                    item.classList.remove('settings__links-url--active');
                });

                // Добавляем активный класс к текущей ссылке
                this.classList.add('settings__links-url--active');
            });
        });

        // Проверяем, какая ссылка активна при загрузке страницы
        const currentRoute = window.location.pathname.split('/').pop(); // Получаем текущий маршрут
        links.forEach(link => {
            if (link.getAttribute('href').includes(currentRoute)) {
                link.classList.add('settings__links-url--active');
            }
        });
    });

</script>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const filterButton = document.querySelector('.settings-menu__btn');
        const asideFilter = document.querySelector('.settings__inner-aside');

        filterButton.addEventListener('click', function () {
            asideFilter.classList.toggle('show-mobile');
        });
    });


    document.querySelectorAll('.toggle-password').forEach(item => {
        item.addEventListener('click', function () {
            let input = this.parentElement.previousElementSibling;
            let type = input.getAttribute('type') === 'password' ? 'text' : 'password';
            input.setAttribute('type', type);
            this.classList.toggle('fa-eye');
            this.classList.toggle('fa-eye-slash');
        });
    });

</script>

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


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

    .input-group {
        position: relative;
        display: flex;
        align-items: center;
    }

    .input-group .settings__input {
        padding-right: 30px;
    }

    .input-group-append {
        position: absolute;
        right: 10px;
        cursor: pointer;
    }

    .profile__navigation-item--active .profile__navigation-link {
        color: #217b00;
    }

    /* Адаптивные стили для мобильных устройств */
    @media (max-width: 768px) {
        .container {
            padding: 15px !important;
        }

        .settings__main {
            padding: 15px !important;
        }

        .settings-title {
            font-size: 20px !important;
            margin-bottom: 20px !important;
        }

        .form-group {
            margin-bottom: 20px !important;
        }

        .settings__label {
            font-size: 16px !important;
            margin-bottom: 8px !important;
        }

        .input-main, .settings__input {
            padding: 12px !important;
            font-size: 16px !important;
        }

        .settings__save {
            margin-top: 30px !important;
        }

        .settings__save-btn {
            width: 100% !important;
            padding: 12px 20px !important;
            font-size: 16px !important;
        }

        .error-text, .success-text {
            font-size: 14px !important;
        }

        /* Адаптация навигации */
        .settings-menu__btn {
            padding: 10px 15px !important;
            font-size: 14px !important;
        }

        .settings__inner-aside {
            padding: 15px !important;
        }

        .settings__links-title {
            font-size: 16px !important;
            margin-bottom: 10px !important;
        }

        .settings__links-url {
            font-size: 14px !important;
            padding: 8px 0 !important;
        }
    }

    @media (max-width: 480px) {
        .container {
            padding: 10px !important;
        }

        .settings__main {
            padding: 10px !important;
        }

        .settings-title {
            font-size: 18px !important;
        }

        .settings__label {
            font-size: 14px !important;
        }

        .input-main, .settings__input {
            padding: 10px !important;
            font-size: 14px !important;
        }

        .error-text, .success-text {
            font-size: 12px !important;
        }
    }

</style>

@endsection