{% extends "base.html" %}

{% block content %}
<div class="page-header">
    <h2>Ручное тестирование добавления партнера</h2>
    <a href="{{ url_for('partners') }}" class="btn-back">Назад к списку</a>
</div>

<div class="test-container">
    <div class="test-info">
        <h3>Инструкция</h3>
        <p>Заполните форму ниже и нажмите "Проверить данные". Тест покажет, пройдет ли проверку введенная информация.</p>
        <p><strong>Правила валидации:</strong></p>
        <ul>
            <li>Наименование партнера - обязательно</li>
            <li>Email - должен быть корректным (содержать @ и .)</li>
            <li>ИНН - должен содержать 10 или 12 цифр</li>
            <li>Телефон - форматируется автоматически</li>
        </ul>
    </div>

    <div class="test-form">
        <form id="partnerTestForm">
            <div class="form-section">
                <h3>Данные партнера</h3>

                <div class="form-group">
                    <label for="name">Наименование партнера *</label>
                    <input type="text" id="name" name="name" class="test-input" placeholder="Например: ООО Ромашка">
                </div>

                <div class="form-group">
                    <label for="director">Директор</label>
                    <input type="text" id="director" name="director" class="test-input" placeholder="Например: Иванов И.И.">
                </div>

                <div class="form-row">
                    <div class="form-group half">
                        <label for="email">Email *</label>
                        <input type="email" id="email" name="email" class="test-input" placeholder="test@mail.ru">
                    </div>

                    <div class="form-group half">
                        <label for="phone">Телефон</label>
                        <input type="tel" id="phone" name="phone" class="test-input" placeholder="+7 (999) 123-45-67">
                    </div>
                </div>

                <div class="form-group">
                    <label for="legal_address">Юридический адрес</label>
                    <textarea id="legal_address" name="legal_address" class="test-input" rows="2" placeholder="г. Москва, ул. Тестовая, д. 1"></textarea>
                </div>

                <div class="form-row">
                    <div class="form-group half">
                        <label for="inn">ИНН *</label>
                        <input type="text" id="inn" name="inn" class="test-input" placeholder="10 или 12 цифр">
                        <small class="form-text">10 или 12 цифр</small>
                    </div>
                </div>
            </div>

            <div class="test-actions">
                <button type="button" onclick="runTest()" class="btn-submit">Проверить данные</button>
                <button type="button" onclick="fillValidData()" class="btn-valid">Заполнить валидные данные</button>
                <button type="button" onclick="fillInvalidData()" class="btn-invalid">Заполнить невалидные данные</button>
                <button type="reset" class="btn-reset">Очистить форму</button>
            </div>
        </form>
    </div>

    <div class="test-result" id="testResult" style="display: none;">
        <h3>Результат тестирования</h3>
        <div id="resultContent"></div>
    </div>
</div>

<script>
function runTest() {
    // Собираем данные из формы
    const name = document.getElementById('name').value.trim();
    const director = document.getElementById('director').value.trim();
    const email = document.getElementById('email').value.trim();
    const phone = document.getElementById('phone').value.trim();
    const legal_address = document.getElementById('legal_address').value.trim();
    const inn = document.getElementById('inn').value.trim();

    // Выполняем валидацию
    const validation = validatePartnerData(name, email, inn);

    // Показываем результат
    const resultDiv = document.getElementById('testResult');
    const resultContent = document.getElementById('resultContent');

    let html = '<table class="result-table">';
    html += '<tr><th>Поле</th><th>Значение</th><th>Статус</th><th>Комментарий</th></tr>';

    // Проверка имени
    html += '<tr>';
    html += '<td>Наименование</td>';
    html += `<td>${name || '(пусто)'}</td>`;
    if (name) {
        html += '<td class="success">✓ OK</td>';
        html += '<td>Поле заполнено</td>';
    } else {
        html += '<td class="error">✗ Ошибка</td>';
        html += '<td>Наименование обязательно</td>';
    }
    html += '</tr>';

    // Проверка email
    html += '<tr>';
    html += '<td>Email</td>';
    html += `<td>${email || '(пусто)'}</td>`;
    const emailValid = validateEmail(email);
    if (emailValid) {
        html += '<td class="success">✓ OK</td>';
        html += '<td>Корректный email</td>';
    } else {
        html += '<td class="error">✗ Ошибка</td>';
        html += '<td>Некорректный email (должен содержать @ и .)</td>';
    }
    html += '</tr>';

    // Проверка ИНН
    html += '<tr>';
    html += '<td>ИНН</td>';
    html += `<td>${inn || '(пусто)'}</td>`;
    const innValid = validateINN(inn);
    if (innValid) {
        html += '<td class="success">✓ OK</td>';
        html += '<td>Корректный ИНН (10 или 12 цифр)</td>';
    } else {
        html += '<td class="error">✗ Ошибка</td>';
        if (!inn) {
            html += '<td>ИНН обязателен</td>';
        } else {
            html += '<td>ИНН должен содержать 10 или 12 цифр</td>';
        }
    }
    html += '</tr>';

    // Директор (опционально)
    html += '<tr>';
    html += '<td>Директор</td>';
    html += `<td>${director || '(не указан)'}</td>`;
    html += '<td class="info">ℹ Опционально</td>';
    html += '<td>Поле необязательное</td>';
    html += '</tr>';

    // Телефон (опционально)
    html += '<tr>';
    html += '<td>Телефон</td>';
    html += `<td>${phone || '(не указан)'}</td>`;
    html += '<td class="info">ℹ Опционально</td>';
    html += '<td>Поле необязательное</td>';
    html += '</tr>';

    // Адрес (опционально)
    html += '<tr>';
    html += '<td>Адрес</td>';
    html += `<td>${legal_address || '(не указан)'}</td>`;
    html += '<td class="info">ℹ Опционально</td>';
    html += '<td>Поле необязательное</td>';
    html += '</tr>';

    html += '</table>';

    // Общий результат
    const allValid = name && emailValid && innValid;
    html += '<div class="summary">';
    if (allValid) {
        html += '<p class="success-message">✅ Все обязательные поля заполнены корректно! Форма может быть отправлена.</p>';
    } else {
        html += '<p class="error-message">❌ Есть ошибки в заполнении формы. Исправьте их перед отправкой.</p>';
    }
    html += '</div>';

    resultContent.innerHTML = html;
    resultDiv.style.display = 'block';

    // Прокрутка к результатам
    resultDiv.scrollIntoView({ behavior: 'smooth' });
}

function validatePartnerData(name, email, inn) {
    return {
        nameValid: !!name,
        emailValid: validateEmail(email),
        innValid: validateINN(inn)
    };
}

function validateEmail(email) {
    if (!email) return false;
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    return emailRegex.test(email);
}

function validateINN(inn) {
    if (!inn) return false;
    const innRegex = /^\d{10}$|^\d{12}$/;
    return innRegex.test(inn);
}

function fillValidData() {
    document.getElementById('name').value = 'ООО "Тестовая компания"';
    document.getElementById('director').value = 'Петров Петр Петрович';
    document.getElementById('email').value = 'test@company.ru';
    document.getElementById('phone').value = '+7 (495) 123-45-67';
    document.getElementById('legal_address').value = 'г. Москва, ул. Тестовая, д. 10, офис 5';
    document.getElementById('inn').value = '7701123456';

    // Автоматически запускаем тест
    runTest();
}

function fillInvalidData() {
    document.getElementById('name').value = '';
    document.getElementById('director').value = '';
    document.getElementById('email').value = 'invalid-email';
    document.getElementById('phone').value = '12345';
    document.getElementById('legal_address').value = '';
    document.getElementById('inn').value = '123';

    // Автоматически запускаем тест
    runTest();
}

// Форматирование телефона
document.getElementById('phone').addEventListener('input', function(e) {
    let x = e.target.value.replace(/\D/g, '').match(/(\d{0,1})(\d{0,3})(\d{0,3})(\d{0,2})(\d{0,2})/);
    e.target.value = !x[2] ? x[1] : '+' + x[1] + ' (' + x[2] + ') ' + x[3] + (x[4] ? '-' + x[4] : '') + (x[5] ? '-' + x[5] : '');
});

// Валидация в реальном времени
document.getElementById('name').addEventListener('input', function() {
    this.style.borderColor = this.value ? '#4CAF50' : '#ff6b6b';
});

document.getElementById('email').addEventListener('input', function() {
    const valid = validateEmail(this.value);
    this.style.borderColor = valid ? '#4CAF50' : '#ff6b6b';
});

document.getElementById('inn').addEventListener('input', function() {
    const valid = validateINN(this.value);
    this.style.borderColor = valid ? '#4CAF50' : '#ff6b6b';
});
</script>

<style>
.test-container {
    max-width: 800px;
    margin: 0 auto;
}

.test-info {
    background-color: #F5F5F5;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 30px;
    border-left: 4px solid #696969;
}

.test-info h3 {
    color: #696969;
    margin-bottom: 15px;
}

.test-info ul {
    margin-left: 20px;
    margin-top: 10px;
}

.test-info li {
    margin-bottom: 5px;
}

.test-form {
    background: white;
    border-radius: 8px;
    padding: 25px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    margin-bottom: 30px;
}

.form-section {
    margin-bottom: 20px;
}

.form-section h3 {
    color: #696969;
    margin-bottom: 20px;
}

.form-group {
    margin-bottom: 15px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
    color: #555;
}

.test-input {
    width: 100%;
    padding: 10px;
    border: 2px solid #E0E0E0;
    border-radius: 4px;
    font-family: 'Calibri', sans-serif;
    font-size: 1rem;
    transition: border-color 0.3s;
}

.test-input:focus {
    outline: none;
    border-color: #696969;
}

.form-row {
    display: flex;
    gap: 20px;
}

.form-group.half {
    flex: 1;
}

.form-text {
    display: block;
    color: #666;
    font-size: 0.85rem;
    margin-top: 5px;
}

.test-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 30px;
}

.btn-submit {
    background-color: #696969;
    color: white;
    border: none;
    padding: 12px 25px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 600;
    transition: background-color 0.3s;
}

.btn-submit:hover {
    background-color: #555;
}

.btn-valid {
    background-color: #4CAF50;
    color: white;
    border: none;
    padding: 12px 25px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 600;
    transition: background-color 0.3s;
}

.btn-valid:hover {
    background-color: #45a049;
}

.btn-invalid {
    background-color: #ff6b6b;
    color: white;
    border: none;
    padding: 12px 25px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 600;
    transition: background-color 0.3s;
}

.btn-invalid:hover {
    background-color: #ff5252;
}

.btn-reset {
    background-color: #E0E0E0;
    color: #696969;
    border: none;
    padding: 12px 25px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 600;
    transition: background-color 0.3s;
}

.btn-reset:hover {
    background-color: #D0D0D0;
}

.test-result {
    background: white;
    border-radius: 8px;
    padding: 25px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    border-top: 4px solid #696969;
}

.test-result h3 {
    color: #696969;
    margin-bottom: 20px;
}

.result-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}

.result-table th {
    background-color: #696969;
    color: white;
    padding: 10px;
    text-align: left;
}

.result-table td {
    padding: 10px;
    border-bottom: 1px solid #E0E0E0;
}

.result-table .success {
    color: #4CAF50;
    font-weight: 600;
}

.result-table .error {
    color: #ff6b6b;
    font-weight: 600;
}

.result-table .info {
    color: #2196F3;
    font-weight: 600;
}

.summary {
    text-align: center;
    padding: 15px;
    background-color: #F5F5F5;
    border-radius: 4px;
}

.success-message {
    color: #4CAF50;
    font-weight: 600;
    font-size: 1.1rem;
}

.error-message {
    color: #ff6b6b;
    font-weight: 600;
    font-size: 1.1rem;
}

@media (max-width: 768px) {
    .form-row {
        flex-direction: column;
        gap: 0;
    }

    .test-actions {
        flex-direction: column;
    }

    .btn-submit, .btn-valid, .btn-invalid, .btn-reset {
        width: 100%;
    }
}
</style>
{% endblock %}