@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 for="supplier-company-name">Название компании</label>
                                <input class="register2__form-input input-main" type="text" name="company_name" id="supplier-company-name" placeholder="ООО «Ваша компания»" value="{{ old('company_name') }}">
                                @error('company_name')
                                <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="form-group">
                                <label for="inn">ИНН</label>
                                <input class="register2__form-input input-main" type="text" name="inn" id="inn" placeholder="123456789012" maxlength="12" value="{{ old('inn') }}">
                                <div id="inn-error" class="text-danger" style="display: none;"></div>
                                @error('inn')
                                <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="form-group">
                                <label for="ogrn">ОГРН/ОГРНИП (необязательно)</label>
                                <input class="register2__form-input input-main" type="text" name="ogrn" id="ogrn" placeholder="123456789012345" maxlength="15" value="{{ old('ogrn') }}">
                                <div id="ogrn-error" class="text-danger" style="display: none;"></div>
                                @error('ogrn')
                                <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="form-group">
                                <label for="supplier-address">Адрес компании</label>
                                <input class="register2__form-input input-main" type="text" name="address" id="supplier-address" placeholder="г. Москва, ул. Примерная, д. 1" value="{{ old('address') }}">
                                @error('address')
                                <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="form-group">
                                <label for="supplier-contact-person">Контактное лицо</label>
                                <input class="register2__form-input input-main" type="text" name="contact_person" id="supplier-contact-person" placeholder="Иван Иванов" value="{{ old('contact_person') }}">
                                @error('contact_person')
                                <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="form-group">
                                <label for="supplier-email">Email</label>
                                <input class="register2__form-input input-main" type="email" name="email" id="supplier-email" placeholder="contact@company.ru" value="{{ old('email') }}">
                                @error('email')
                                <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="form-group">
                                <label class="form-group__label" for="supplier-phone">Телефон</label>
                                <input class="register2__form-input input-main" type="text" id="supplier-phone" name="phone" placeholder="+7 (XXX) XXX-XX-XX" autocomplete="off" value="{{ old('phone') }}">
                                @error('phone')
                                <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="form-group">
                                <div class="password-container">
                                    <label class="form-group__label">Пароль
                                        <div class="container_password_register">
                                            <input class="register__form-input input-main" name="password" id="password" type="password" placeholder="Придумайте пароль" minlength="8" 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>
                                        </div>
                                        <small style="display:block;color:#888;margin-top:6px">Минимум 8 символов, буквы верх/низ, цифра и спецсимвол</small>
                                    </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 style="anchor-name: --input_password2">
                                    </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' : '' }}>
                                <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>
    @media (max-width: 767.98px) {
        .register2__form-list{
            gap:0;
        }
        .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;
        }
        .register2__form{
            padding:60px 20px!important;
        }
    }
    .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;
    }

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

    .register2__form-input.textarea {
        resize: vertical;
        min-height: 80px;
    }
</style>

<script src="{{ asset('assets/libs/inputmask/inputmask.min.js') }}"></script>
<script>
    document.addEventListener('DOMContentLoaded', function(){
        // Маска для телефона
        const phoneInput = document.getElementById('phone');
        if(phoneInput && typeof Inputmask !== 'undefined'){
            try {
                const maskOptions = {
                    mask: '+7 (999) 999-99-99',
                    placeholder: '_',
                    showMaskOnHover: false,
                    clearIncomplete: true,
                    showMaskOnFocus: true,
                    removeMaskOnSubmit: false
                };
                const im = new Inputmask(maskOptions);
                im.mask(phoneInput);
            } catch (error) {
                console.log('InputMask initialization failed:', error);
                // Fallback: simple manual formatting
                phoneInput.addEventListener('input', function(e) {
                    let value = e.target.value.replace(/\D/g, '');
                    if (value.length > 0) {
                        if (value.length <= 1) {
                            value = '+7';
                        } else if (value.length <= 4) {
                            value = '+7 (' + value.slice(1);
                        } else if (value.length <= 7) {
                            value = '+7 (' + value.slice(1, 4) + ') ' + value.slice(4);
                        } else if (value.length <= 9) {
                            value = '+7 (' + value.slice(1, 4) + ') ' + value.slice(4, 7) + '-' + value.slice(7);
                        } else {
                            value = '+7 (' + value.slice(1, 4) + ') ' + value.slice(4, 7) + '-' + value.slice(7, 9) + '-' + value.slice(9, 11);
                        }
                    }
                    e.target.value = value;
                });
            }
        }

        // Валидация ИНН
        const innInput = document.getElementById('inn');
        const innError = document.getElementById('inn-error');
        if(innInput){
            innInput.addEventListener('input', function(e) {
                e.target.value = e.target.value.replace(/\D/g, '').substring(0, 12);
                validateINN();
            });

            innInput.addEventListener('blur', function(e) {
                validateINN();
            });
        }

        // Валидация ОГРН
        const ogrnInput = document.getElementById('ogrn');
        const ogrnError = document.getElementById('ogrn-error');
        if(ogrnInput){
            ogrnInput.addEventListener('input', function(e) {
                e.target.value = e.target.value.replace(/\D/g, '').substring(0, 15);
                validateOGRN();
            });

            ogrnInput.addEventListener('blur', function(e) {
                validateOGRN();
            });
        }

        // Функция валидации ИНН
        function validateINN() {
            const value = innInput.value.trim();
            const innError = document.getElementById('inn-error');

            if (value === '') {
                innError.style.display = 'none';
                innError.textContent = '';
                return true;
            }

            if (!/^\d+$/.test(value)) {
                innError.style.display = 'block';
                innError.textContent = 'ИНН должен содержать только цифры';
                return false;
            }

            if (value.length !== 10 && value.length !== 12) {
                innError.style.display = 'block';
                innError.textContent = 'ИНН должен содержать 10 цифр (для ООО) или 12 цифр (для ИП)';
                return false;
            }

            innError.style.display = 'none';
            innError.textContent = '';
            return true;
        }

        // Функция валидации ОГРН
        function validateOGRN() {
            const value = ogrnInput.value.trim();
            const ogrnError = document.getElementById('ogrn-error');

            if (value === '') {
                ogrnError.style.display = 'none';
                ogrnError.textContent = '';
                return true;
            }

            if (!/^\d+$/.test(value)) {
                ogrnError.style.display = 'block';
                ogrnError.textContent = 'ОГРН должен содержать только цифры';
                return false;
            }

            if (value.length !== 13 && value.length !== 15) {
                ogrnError.style.display = 'block';
                ogrnError.textContent = 'ОГРН должен содержать 13 цифр (для ООО) или 15 цифр (для ИП)';
                return false;
            }

            ogrnError.style.display = 'none';
            ogrnError.textContent = '';
            return true;
        }

        // Переключение видимости пароля
        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 hasLower = /[a-zа-я]/iu.test(password);
            const hasUpper = /[A-ZА-Я]/u.test(password);
            const hasDigit = /[0-9]/.test(password);
            const hasSpecial = /[@$!%*#?&()_\-\+=<>\/\[\]{}|~:;]/.test(password);
            return password.length >= 8 && hasLower && hasUpper && hasDigit && hasSpecial;
        }

        if(form){
            form.addEventListener('submit', function(e) {
                let isValid = true;

                // Валидация ИНН
                if (innInput && !validateINN()) {
                    isValid = false;
                }

                // Валидация ОГРН
                if (ogrnInput && !validateOGRN()) {
                    isValid = false;
                }

                // Валидация пароля
                if(passwordInput && passwordConfirmInput){
                    if(passwordInput.value !== passwordConfirmInput.value){
                        e.preventDefault();
                        alert('Пароли не совпадают');
                        return false;
                    }

                    if(!validatePassword()){
                        e.preventDefault();
                        alert('Пароль должен быть сложным: 8+, буквы верх/низ, цифра, спецсимвол');
                        return false;
                    }
                }

                if (!isValid) {
                    e.preventDefault();
                    return false;
                }
            });
        }
    });
</script>
@endsection