@extends('app')
@php
    $seoKey = 'social';
@endphp
@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('addContactInfo')}}" 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">Telegram </label>
                                <input class="input-main settings__input" name="telegram" value="{{$professional->specialistInfo->telegram}}" type="url">
                            </div>
                            <div class="form-group">
                                <label class="settings__label">VK</label>
                                <input class="input-main settings__input" name="vkontakte" value="{{$professional->specialistInfo->vkontakte}}" type="url">
                            </div>
                            <div class="form-group">
                                <label class="settings__label">WhatsApp</label>
                                <input class="input-main settings__input" name="instagram" value="{{$professional->specialistInfo->instagram}}" type="url">
                            </div>
                            <div class="form-group">
                                <label class="settings__label">Сайт или блог</label>
                                <input class="input-main settings__input" name="website" value="{{$professional->specialistInfo->website}}" type="url">
                            </div>

                        </div>
                    </div>
                    <div class="settings__save">
                        <button class="btn-main settings__btn settings__save-btn">Обновить</button>
                    </div>
                    </form>
                </div>
            </div>
        </div>
    </section>
</main>


<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');
        });
    });


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

<style>
    .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;
        }

        /* Адаптация навигации */
        .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;
        }
    }
</style>

@endsection