@extends('app')
@php
    $seoKey = 'register-supplier';
@endphp
@section('content')
<main>
    <section class="register2">
        <div class="container">
            <div class="register2__wrapper">
                <div class="register2__left">
                    <h2 class="register2__title">Станьте нашим поставщиком и увеличьте продажи!</h2>
                    <p class="register2__subtitle">Регистрация и размещение товаров <span>бесплатно</span></p>
                </div>
                <div class="register2__right">
                    <form class="register2__form" action="{{ route('supplier.register.submit') }}" method="POST">
                        @csrf
                        <p class="register2__form-title">Зарегистрируй аккаунт поставщика бесплатно</p>
                        <div class="register2__form-list">
                            <div class="form-group">
                                <label>Название компании
                                    <input class="register2__form-input input-main" type="text" name="company_name" placeholder="ООО «Ваша компания»" value="{{ old('company_name') }}" required>
                                </label>
                                @error('company_name')
                                <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="form-group">
                                <label>ИНН
                                    <input class="register2__form-input input-main" type="text" name="inn" placeholder="123456789012" maxlength="12" value="{{ old('inn') }}" required>
                                </label>
                                @error('inn')
                                <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="form-group">
                                <label>ОГРН (необязательно)
                                    <input class="register2__form-input input-main" type="text" name="ogrn" placeholder="123456789012345" maxlength="15" value="{{ old('ogrn') }}">
                                </label>
                                @error('ogrn')
                                <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="form-group">
                                <label>Адрес компании
                                    <input class="register2__form-input input-main" type="text" name="address" placeholder="г. Москва, ул. Примерная, д. 1" value="{{ old('address') }}" required>
                                </label>
                                @error('address')
                                <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="form-group">
                                <label>Контактное лицо
                                    <input class="register2__form-input input-main" type="text" name="contact_person" placeholder="Иван Иванов" value="{{ old('contact_person') }}" required>
                                </label>
                                @error('contact_person')
                                <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="form-group">
                                <label>Email
                                    <input class="register2__form-input input-main" type="email" name="email" placeholder="contact@company.ru" value="{{ old('email') }}" required>
                                </label>
                                @error('email')
                                <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="form-group">
                                <label class="form-group__label">Телефон
                                    <input class="register2__form-input input-main" type="text" id="phone" name="phone" placeholder="+7 (XXX) XXX-XX-XX" autocomplete="off" value="{{ old('phone') }}" required>
                                </label>
                                @error('phone')
                                <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="form-group">
                                <div class="password-container">
                                    <label class="form-group__label">Пароль
                                        <input class="register__form-input input-main" name="password" id="password" type="password" placeholder="Придумайте пароль" required>
                                        <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>
                                    </label>
                                    @error('password')
                                    <span class="error-text" id="password-error">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="password-container">
                                    <label class="form-group__label">Подтверждение пароля
                                        <input class="register__form-input input-main" name="password_confirmation" id="password_confirmation" type="password" placeholder="Подтверди пароль" required>
                                    </label>
                                </div>
                            </div>
                            <div class="form-group">
                                <label>Описание деятельности (необязательно)
                                    <textarea class="register2__form-input input-main" name="description" placeholder="Расскажите о вашей компании и товарах" rows="3">{{ old('description') }}</textarea>
                                </label>
                                @error('description')
                                <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                            <label class="checkbox__item">
                                <input type="checkbox" name="terms" value="1" class="checkbox__input" id="termsCheckbox" {{ old('terms') ? 'checked' : '' }} required>
                                <span class="register2__form-checkbox fake"></span>
                                <span class="register2__check-name checkbox__name">Я ознакомлен и принимаю <a href="{{route('showUserAgreementPage')}}">Пользовательское соглашение</a> и <a href="{{route('showPrivacyPolicy')}}">Политика конфиденциальности</a></span>
                            </label>
                            @error('terms')
                            <span class="text-danger">{{ $message }}</span>
                            @enderror
                            <button class="register2__form-btn btn-main" id="registerButton">Зарегистрироваться как поставщик</button>
                            <div class="register__bottom-title"><span> Уже есть аккаунт поставщика? <a href="{{route('login')}}"
                                                                                                class="form-link">Войти</a></span>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </section>
    <section class="register2__info info">
        <div class="container">
            <div class="info__list">
                <div class="info__item">
                    <h3 class="info__title">Станьте поставщиком на Ремонт.рф</h3>
                    <p class="info__text"><strong>Ремонт.рф</strong> — это платформа, которая помогает поставщикам товаров для ремонта и строительства находить покупателей без посредников. Разместив товары, вы получаете прямые заказы от тысяч покупателей по всей России.</p>
                </div>
            </div>
        </div>
    </section>
</main>

<style>
    .error-text {
        position: absolute;
        bottom: -18px;
        left: 0;
        color: red;
        font-size: 13px;
    }

    .text-danger {
        color: red;
        font-size: 13px;
        margin-top: 5px;
    }

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

    .password-container {
        position: relative;
    }

    .password-toggle {
        position: absolute;
        right: 10px;
        top: calc(50% + 10px);
        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;
    }

    .register2__form-input.textarea {
        resize: vertical;
        min-height: 80px;
    }
    @media (max-width: 767.98px) {
        .password-toggle {

            top: 45%;

        }
        .register2__form{
            padding:60px 20px!important;
        }
    }
</style>

<script src="{{ asset('assets/libs/inputmask/inputmask.min.js') }}"></script>
<script>
    document.addEventListener('DOMContentLoaded', function(){
        // Маска для телефона
        const phoneInput = document.getElementById('phone');
        if(phoneInput){
            const maskOptions = {
                mask: '+7 (999) 999-99-99',
                placeholder: '_',
                showMaskOnHover: false,
                clearIncomplete: true
            };
            if(typeof Inputmask !== 'undefined'){
                const im = new Inputmask(maskOptions);
                phoneInput.addEventListener('focus', function handler(){
                    im.mask(phoneInput);
                    phoneInput.removeEventListener('focus', handler);
                });
            }
        }

        // Маска для ИНН
        const innInput = document.querySelector('input[name="inn"]');
        if(innInput){
            innInput.addEventListener('input', function(e) {
                e.target.value = e.target.value.replace(/\D/g, '').substring(0, 12);
            });
        }

        // Маска для ОГРН
        const ogrnInput = document.querySelector('input[name="ogrn"]');
        if(ogrnInput){
            ogrnInput.addEventListener('input', function(e) {
                e.target.value = e.target.value.replace(/\D/g, '').substring(0, 15);
            });
        }

        // Переключение видимости пароля
        const passwordToggle = document.getElementById('password-toggle');
        const passwordInput = document.getElementById('password');

        if(passwordToggle && passwordInput){
            passwordToggle.addEventListener('click', function() {
                if (passwordInput.type === 'password') {
                    passwordInput.type = 'text';
                    passwordInput.classList.add('show-password');
                } else {
                    passwordInput.type = 'password';
                    passwordInput.classList.remove('show-password');
                }
            });
        }

        // Валидация пароля
        const form = document.querySelector('.register2__form');
        const passwordConfirmInput = document.getElementById('password_confirmation');

        function validatePassword() {
            const password = passwordInput.value;
            const hasMinLength = password.length >= 8;
            const hasUpperCase = /[A-Z]/.test(password);
            const hasLowerCase = /[a-z]/.test(password);
            const hasNumbers = /\d/.test(password);
            const hasSpecialChar = /[!@#$%^&*(),.?\":{}|<>]/.test(password);

            return hasMinLength && hasUpperCase && hasLowerCase && hasNumbers && hasSpecialChar;
        }

        if(form){
            form.addEventListener('submit', function(e) {
                if(passwordInput && passwordConfirmInput){
                    if(passwordInput.value !== passwordConfirmInput.value){
                        e.preventDefault();
                        alert('Пароли не совпадают');
                        return false;
                    }

                    if(!validatePassword()){
                        e.preventDefault();
                        alert('Пароль должен содержать минимум 8 символов, включая заглавные, строчные буквы, цифры и спецсимволы');
                        return false;
                    }
                }
            });
        }
    });
</script>
@endsection