{% extends "base.html" %}

{% block title %}Редактирование поставщика{% endblock %}

{% block content %}
<div class="container mt-4">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <!-- Хлебные крошки -->
            <nav aria-label="breadcrumb" class="mb-3">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ url_for('index') }}">Поставщики</a></li>
                    <li class="breadcrumb-item"><a href="{{ url_for('order_history', client_id=client.id) }}">{{ client.name }}</a></li>
                    <li class="breadcrumb-item active">Редактирование</li>
                </ol>
            </nav>

            <div class="form-card">
                <div class="form-card-header">
                    <h2 class="form-card-title">
                        <i class="fas fa-truck"></i> Редактирование поставщика
                    </h2>
                </div>
                
                <div class="form-card-body">
                    <!-- Flash сообщения -->
                    {% with messages = get_flashed_messages(with_categories=true) %}
                        {% if messages %}
                            {% for category, message in messages %}
                                <div class="alert alert-{{ 'danger' if category == 'error' else 'success' }} alert-dismissible fade show">
                                    <i class="fas fa-{{ 'exclamation-circle' if category == 'error' else 'check-circle' }} me-2"></i>
                                    {{ message }}
                                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                                </div>
                            {% endfor %}
                        {% endif %}
                    {% endwith %}

                    <form method="POST" id="supplierForm">
                        <div class="row">
                            <!-- Основная информация -->
                            <div class="col-md-6">
                                <h5 class="section-title">
                                    <i class="fas fa-info-circle"></i> Основная информация
                                </h5>

                                <div class="form-group">
                                    <label for="name" class="form-label">
                                        <i class="fas fa-building"></i>
                                        Название компании
                                    </label>
                                    <input type="text" class="form-control modern-input" id="name" name="name"
                                           value="{{ client.name }}" required maxlength="255"
                                           onkeypress="return blockNumbers(event)" onpaste="return blockNumbersPaste(event)">
                                </div>

                                <div class="form-group">
                                    <label for="director" class="form-label">
                                        <i class="fas fa-user-tie"></i>
                                        Директор (ФИО)
                                    </label>
                                    <input type="text" class="form-control modern-input" id="director" name="director"
                                           value="{{ client.director or '' }}" maxlength="255"
                                           onkeypress="return blockNumbers(event)" onpaste="return blockNumbersPaste(event)">
                                </div>

                                <div class="form-group">
                                    <label for="contractor_type_id" class="form-label">
                                        <i class="fas fa-tag"></i>
                                        Тип поставщика
                                    </label>
                                    <div class="select-wrapper">
                                        <select class="form-select modern-select" id="contractor_type_id" name="contractor_type_id" required>
                                            <option value="" disabled>Выберите тип поставщика</option>
                                            {% for type in contractor_types %}
                                                <option value="{{ type.id }}"
                                                        {% if type.id == client.contractor_type_id %}selected{% endif %}>
                                                    {{ type.type_name }}
                                                </option>
                                            {% endfor %}
                                        </select>
                                        <i class="fas fa-chevron-down select-arrow"></i>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label for="rating" class="form-label">
                                        <i class="fas fa-star"></i>
                                        Рейтинг надежности
                                    </label>
                                    <input type="number" class="form-control modern-input" id="rating" name="rating"
                                           min="0" max="5" step="0.1" value="{{ client.rating or 0.0 }}">
                                    <div class="form-text">От 0.0 до 5.0 (чем выше, тем надежнее)</div>
                                </div>
                            </div>

                            <!-- Контактная информация -->
                            <div class="col-md-6">
                                <h5 class="section-title">
                                    <i class="fas fa-address-card"></i> Контактные данные
                                </h5>

                                <div class="form-group">
                                    <label for="email" class="form-label">
                                        <i class="fas fa-envelope"></i>
                                        Email
                                    </label>
                                    <input type="email" class="form-control modern-input" id="email" name="email"
                                           value="{{ client.email }}" required maxlength="255">
                                </div>

                                <div class="form-group">
                                    <label for="phone" class="form-label">
                                        <i class="fas fa-phone"></i>
                                        Телефон
                                    </label>
                                    <div class="phone-input-container">
                                        <input type="tel" class="form-control modern-input" id="phone" name="phone"
                                               value="{{ client.phone or '' }}" maxlength="18"
                                               onkeypress="return allowPhoneCharacters(event)"
                                               onkeyup="formatPhoneNumber(this)"
                                               onblur="validatePhoneNumber(this)"
                                               placeholder="+7 (999) 999-99-99">
                                        <i class="fas fa-phone phone-icon"></i>
                                    </div>
                                    <div class="phone-hint" id="phoneHint">
                                        <i class="fas fa-info-circle"></i> Формат: +7 (XXX) XXX-XX-XX
                                    </div>
                                    <div class="phone-error" id="phoneError" style="display: none;">
                                        <i class="fas fa-exclamation-circle"></i>
                                        <span id="phoneErrorMessage"></span>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label for="inn" class="form-label">
                                        <i class="fas fa-id-card"></i>
                                        ИНН
                                    </label>
                                    <input type="text" class="form-control modern-input" id="inn" name="inn"
                                           value="{{ client.inn or '' }}" maxlength="12"
                                           onkeypress="return allowOnlyNumbers(event)" onpaste="return allowNumbersPaste(event)">
                                    <div class="form-text">10 или 12 цифр</div>
                                </div>
                            </div>

                            <!-- Адрес на всю ширину -->
                            <div class="col-12">
                                <div class="form-group">
                                    <label for="address" class="form-label">
                                        <i class="fas fa-map-marker-alt"></i>
                                        Юридический адрес
                                    </label>
                                    <textarea class="form-control modern-input" id="address" name="address"
                                              rows="3" maxlength="500">{{ client.address or '' }}</textarea>
                                </div>
                            </div>
                        </div>

                        <!-- Кнопки -->
                        <div class="form-actions">
                            <div>
                                <a href="{{ url_for('index') }}" class="btn btn-outline">
                                    <i class="fas fa-times"></i> Отмена
                                </a>
                            </div>
                            <div class="d-flex gap-2">
                                <a href="{{ url_for('order_history', client_id=client.id) }}"
                                   class="btn btn-info">
                                    <i class="fas fa-history"></i> История заказов
                                </a>
                                <button type="submit" class="btn btn-primary">
                                    <i class="fas fa-save"></i> Сохранить
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    /* ===== ОСНОВНЫЕ ПЕРЕМЕННЫЕ ===== */
    :root {
        --antique-white: #FAEBD7;
        --light-brown: #DEB887;
        --brown: #A0522D;
        --dark-brown: #8B4513;
        --error-red: #dc3545;
        --success-green: #28a745;
    }

    /* ===== ХЛЕБНЫЕ КРОШКИ ===== */
    .breadcrumb {
        background: none;
        padding: 0;
    }
    
    .breadcrumb-item a {
        color: var(--brown);
        text-decoration: none;
        font-family: 'Verdana', sans-serif;
    }
    
    .breadcrumb-item a:hover {
        text-decoration: underline;
    }
    
    .breadcrumb-item.active {
        color: #6c757d;
        font-family: 'Verdana', sans-serif;
    }
    
    .breadcrumb-item + .breadcrumb-item::before {
        color: var(--light-brown);
    }

    /* ===== КАРТОЧКА ФОРМЫ ===== */
    .form-card {
        background: white;
        border: 1px solid var(--light-brown);
        border-radius: 16px;
        box-shadow: 0 4px 20px rgba(160, 82, 45, 0.1);
        overflow: hidden;
    }
    
    .form-card-header {
        background: linear-gradient(135deg, var(--brown) 0%, var(--dark-brown) 100%);
        padding: 20px 25px;
        color: white;
    }
    
    .form-card-title {
        font-size: 1.4rem;
        font-weight: 600;
        font-family: 'Verdana', sans-serif;
        margin: 0;
    }
    
    .form-card-title i {
        margin-right: 10px;
        color: white;
    }
    
    .form-card-body {
        padding: 25px;
    }

    /* ===== ЗАГОЛОВКИ СЕКЦИЙ ===== */
    .section-title {
        color: var(--brown);
        font-size: 1.1rem;
        font-weight: 600;
        margin-bottom: 20px;
        padding-bottom: 10px;
        border-bottom: 2px solid var(--light-brown);
        font-family: 'Verdana', sans-serif;
    }
    
    .section-title i {
        color: var(--brown);
        margin-right: 8px;
    }

    /* ===== ЭЛЕМЕНТЫ ФОРМЫ ===== */
    .form-group {
        margin-bottom: 20px;
    }
    
    .form-label {
        display: flex;
        align-items: center;
        gap: 6px;
        color: var(--brown);
        font-weight: 600;
        font-size: 0.95rem;
        margin-bottom: 6px;
        font-family: 'Verdana', sans-serif;
    }
    
    .form-label i {
        color: var(--brown);
        font-size: 1rem;
    }
    
    .modern-input {
        width: 100%;
        height: 42px;
        padding: 0 12px;
        border: 2px solid var(--light-brown);
        border-radius: 10px;
        font-size: 0.95rem;
        font-family: 'Verdana', sans-serif;
        transition: all 0.2s ease;
        background: white;
    }
    
    .modern-input:focus {
        outline: none;
        border-color: var(--brown);
        box-shadow: 0 0 0 3px rgba(160, 82, 45, 0.1);
    }
    
    .modern-input:hover {
        border-color: var(--brown);
    }
    
    textarea.modern-input {
        height: auto;
        padding: 10px 12px;
        resize: vertical;
    }

    /* Специальные стили для поля телефона */
    .phone-input-container {
        position: relative;
    }
    
    .phone-input-container .modern-input {
        padding-left: 40px;
    }
    
    .phone-icon {
        position: absolute;
        left: 15px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--light-brown);
        pointer-events: none;
        transition: color 0.2s ease;
    }
    
    .phone-input-container .modern-input:focus + .phone-icon {
        color: var(--brown);
    }
    
    .phone-hint {
        font-size: 0.8rem;
        color: #6c757d;
        margin-top: 4px;
        font-family: 'Verdana', sans-serif;
        display: flex;
        align-items: center;
        gap: 4px;
    }
    
    .phone-hint i {
        color: var(--light-brown);
        font-size: 0.75rem;
    }
    
    .phone-error {
        font-size: 0.8rem;
        color: var(--error-red);
        margin-top: 4px;
        font-family: 'Verdana', sans-serif;
        display: flex;
        align-items: center;
        gap: 4px;
    }
    
    .phone-error i {
        color: var(--error-red);
        font-size: 0.75rem;
    }
    
    .select-wrapper {
        position: relative;
    }
    
    .modern-select {
        width: 100%;
        height: 42px;
        padding: 0 35px 0 12px;
        border: 2px solid var(--light-brown);
        border-radius: 10px;
        font-size: 0.95rem;
        font-family: 'Verdana', sans-serif;
        background: white;
        cursor: pointer;
        appearance: none;
        transition: all 0.2s ease;
    }
    
    .modern-select:focus {
        outline: none;
        border-color: var(--brown);
        box-shadow: 0 0 0 3px rgba(160, 82, 45, 0.1);
    }
    
    .modern-select:hover {
        border-color: var(--brown);
    }
    
    .select-arrow {
        position: absolute;
        right: 15px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--brown);
        pointer-events: none;
    }
    
    .form-text {
        font-size: 0.8rem;
        color: #6c757d;
        margin-top: 4px;
        font-family: 'Verdana', sans-serif;
    }

    /* ===== КНОПКИ ===== */
    .form-actions {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 25px;
        padding-top: 20px;
        border-top: 2px solid var(--light-brown);
    }
    
    .btn {
        padding: 10px 20px;
        border-radius: 10px;
        font-size: 0.95rem;
        font-weight: 500;
        font-family: 'Verdana', sans-serif;
        transition: all 0.2s ease;
        border: none;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        text-decoration: none;
    }
    
    .btn-primary {
        background: var(--brown);
        color: white;
    }
    
    .btn-primary:hover {
        background: var(--dark-brown);
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(160, 82, 45, 0.3);
    }
    
    .btn-info {
        background: var(--light-brown);
        color: #2c3e50;
    }
    
    .btn-info:hover {
        background: var(--brown);
        color: white;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(160, 82, 45, 0.3);
    }
    
    .btn-outline {
        background: white;
        border: 2px solid var(--light-brown);
        color: var(--brown);
    }
    
    .btn-outline:hover {
        background: var(--antique-white);
        border-color: var(--brown);
        transform: translateY(-2px);
    }
    
    .d-flex.gap-2 {
        gap: 10px;
    }

    /* ===== АЛЕРТЫ ===== */
    .alert {
        border-radius: 10px;
        border: 1px solid var(--light-brown);
        font-family: 'Verdana', sans-serif;
        margin-bottom: 20px;
    }
    
    .alert-success {
        background: var(--antique-white);
        color: var(--brown);
        border-left: 4px solid #28a745;
    }
    
    .alert-danger {
        background: var(--antique-white);
        color: #721c24;
        border-left: 4px solid #dc3545;
    }

    /* ===== ИКОНКИ ===== */
    i {
        color: var(--brown);
    }
    
    .btn-primary i, .btn-info i, .btn-outline i {
        color: inherit;
    }

    /* ===== АДАПТИВНОСТЬ ===== */
    @media (max-width: 768px) {
        .form-card-body {
            padding: 20px;
        }
        
        .form-actions {
            flex-direction: column-reverse;
            gap: 10px;
        }
        
        .form-actions > div {
            width: 100%;
        }
        
        .d-flex.gap-2 {
            flex-direction: column;
            width: 100%;
        }
        
        .d-flex.gap-2 .btn {
            width: 100%;
            justify-content: center;
        }
        
        .btn-outline {
            width: 100%;
            justify-content: center;
        }
        
        .col-md-6 {
            width: 100%;
        }
        
        .section-title {
            margin-top: 15px;
        }
        
        .section-title:first-of-type {
            margin-top: 0;
        }
    }
</style>

{% block scripts %}
<script>
    // Запрет на ввод цифр в текстовые поля (название компании, ФИО)
    function blockNumbers(event) {
        const key = event.key;
        // Разрешаем: буквы, пробел, backspace, delete, tab, enter, стрелки
        if (key === ' ' || key === 'Backspace' || key === 'Delete' || key === 'Tab' || 
            key === 'Enter' || key === 'ArrowLeft' || key === 'ArrowRight' || 
            key === 'ArrowUp' || key === 'ArrowDown' || key === 'Home' || key === 'End') {
            return true;
        }
        
        // Запрещаем цифры
        if (key >= '0' && key <= '9') {
            event.preventDefault();
            alert('Цифры запрещены в этом поле');
            return false;
        }
        
        // Разрешаем буквы (любые)
        return true;
    }
    
    // Запрет на вставку цифр через Ctrl+V
    function blockNumbersPaste(event) {
        event.preventDefault();
        const pastedText = (event.clipboardData || window.clipboardData).getData('text');
        // Удаляем все цифры из вставляемого текста
        const cleanedText = pastedText.replace(/[0-9]/g, '');
        
        // Вставляем очищенный текст
        const input = event.target;
        const start = input.selectionStart;
        const end = input.selectionEnd;
        const currentValue = input.value;
        const newValue = currentValue.substring(0, start) + cleanedText + currentValue.substring(end);
        input.value = newValue;
        
        // Возвращаем курсор в конец вставленного текста
        input.selectionStart = input.selectionEnd = start + cleanedText.length;
        
        if (pastedText.match(/[0-9]/)) {
            alert('Цифры были удалены из вставленного текста');
        }
    }
    
    // Разрешаем только цифры (для ИНН)
    function allowOnlyNumbers(event) {
        const key = event.key;
        // Разрешаем: цифры, backspace, delete, tab, enter, стрелки
        if (key === 'Backspace' || key === 'Delete' || key === 'Tab' || 
            key === 'Enter' || key === 'ArrowLeft' || key === 'ArrowRight' || 
            key === 'ArrowUp' || key === 'ArrowDown' || key === 'Home' || key === 'End') {
            return true;
        }
        
        // Разрешаем только цифры
        if (key >= '0' && key <= '9') {
            return true;
        }
        
        event.preventDefault();
        alert('Только цифры разрешены в этом поле');
        return false;
    }
    
    // Разрешаем вставку только цифр (для ИНН)
    function allowNumbersPaste(event) {
        event.preventDefault();
        const pastedText = (event.clipboardData || window.clipboardData).getData('text');
        // Оставляем только цифры
        const cleanedText = pastedText.replace(/[^0-9]/g, '');
        
        // Вставляем очищенный текст
        const input = event.target;
        const start = input.selectionStart;
        const end = input.selectionEnd;
        const currentValue = input.value;
        const newValue = currentValue.substring(0, start) + cleanedText + currentValue.substring(end);
        input.value = newValue;
        
        // Возвращаем курсор в конец вставленного текста
        input.selectionStart = input.selectionEnd = start + cleanedText.length;
        
        if (pastedText.match(/[^0-9]/)) {
            alert('Были вставлены только цифры, остальные символы удалены');
        }
    }
    
    // Для поля телефона разрешаем цифры и необходимые символы
    function allowPhoneCharacters(event) {
        const key = event.key;
        // Разрешаем: цифры, +, -, (, ), пробел, backspace и т.д.
        const allowedKeys = ['+', '-', '(', ')', ' '];
        
        if (key === 'Backspace' || key === 'Delete' || key === 'Tab' || 
            key === 'Enter' || key === 'ArrowLeft' || key === 'ArrowRight' || 
            key === 'ArrowUp' || key === 'ArrowDown' || key === 'Home' || key === 'End') {
            return true;
        }
        
        if (allowedKeys.includes(key)) {
            return true;
        }
        
        if (key >= '0' && key <= '9') {
            return true;
        }
        
        event.preventDefault();
        return false;
    }
    
    // Форматирование номера телефона
    function formatPhoneNumber(input) {
        let value = input.value.replace(/\D/g, '');
        
        // Если номер начинается с 8 или 7, заменяем на +7
        if (value.length > 0) {
            if (value[0] === '8') {
                value = '7' + value.substring(1);
            }
            
            // Форматируем номер
            if (value.length <= 11) {
                let formattedValue = '';
                
                if (value.length > 0) {
                    formattedValue = '+7';
                    
                    if (value.length > 1) {
                        formattedValue += ' (' + value.substring(1, Math.min(4, value.length));
                        
                        if (value.length >= 4) {
                            formattedValue += ') ';
                            
                            if (value.length >= 7) {
                                formattedValue += value.substring(4, 7);
                                
                                if (value.length >= 9) {
                                    formattedValue += '-' + value.substring(7, 9);
                                    
                                    if (value.length >= 11) {
                                        formattedValue += '-' + value.substring(9, 11);
                                    }
                                }
                            } else if (value.length > 4) {
                                formattedValue += value.substring(4);
                            }
                        }
                    }
                }
                
                input.value = formattedValue;
            }
        }
        
        // Проверяем валидность номера
        validatePhoneNumber(input);
    }
    
    // Валидация номера телефона
    function validatePhoneNumber(input) {
        const phoneValue = input.value.replace(/\D/g, '');
        const phoneError = document.getElementById('phoneError');
        const phoneErrorMessage = document.getElementById('phoneErrorMessage');
        const phoneHint = document.getElementById('phoneHint');
        
        if (phoneValue.length === 0) {
            // Пустое поле - допустимо
            phoneError.style.display = 'none';
            phoneHint.style.display = 'flex';
            input.style.borderColor = 'var(--light-brown)';
            return true;
        }
        
        if (phoneValue.length === 11 && phoneValue[0] === '7') {
            // Валидный номер
            phoneError.style.display = 'none';
            phoneHint.style.display = 'flex';
            input.style.borderColor = 'var(--success-green)';
            return true;
        } else {
            // Невалидный номер
            phoneError.style.display = 'flex';
            phoneHint.style.display = 'none';
            input.style.borderColor = 'var(--error-red)';
            
            if (phoneValue.length !== 11) {
                phoneErrorMessage.textContent = 'Номер должен содержать 11 цифр (включая код страны)';
            } else if (phoneValue[0] !== '7') {
                phoneErrorMessage.textContent = 'Номер должен начинаться с 7 или 8';
            }
            
            return false;
        }
    }
    
    // Валидация формы
    document.getElementById('supplierForm').addEventListener('submit', function(e) {
        const inn = document.getElementById('inn').value;
        const name = document.getElementById('name').value;
        const director = document.getElementById('director').value;
        const phone = document.getElementById('phone').value;

        // Проверка на наличие цифр в названии компании
        if (name.match(/[0-9]/)) {
            e.preventDefault();
            alert('Название компании не должно содержать цифры');
            return false;
        }
        
        // Проверка на наличие цифр в ФИО директора
        if (director && director.match(/[0-9]/)) {
            e.preventDefault();
            alert('ФИО директора не должно содержать цифры');
            return false;
        }

        // Проверка ИНН
        if (inn && !/^\d{10,12}$/.test(inn)) {
            e.preventDefault();
            alert('ИНН должен содержать 10 или 12 цифр');
            return false;
        }

        // Проверка телефона
        if (phone) {
            const phoneDigits = phone.replace(/\D/g, '');
            if (phoneDigits.length > 0) {
                if (phoneDigits.length !== 11 || phoneDigits[0] !== '7') {
                    e.preventDefault();
                    alert('Пожалуйста, введите корректный номер телефона в формате: +7 (XXX) XXX-XX-XX');
                    return false;
                }
            }
        }

        // Проверка рейтинга
        const rating = parseFloat(document.getElementById('rating').value);
        if (rating < 0 || rating > 5) {
            e.preventDefault();
            alert('Рейтинг должен быть от 0.0 до 5.0');
            return false;
        }

        // Проверка email
        const email = document.getElementById('email').value;
        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        if (!emailRegex.test(email)) {
            e.preventDefault();
            alert('Введите корректный email адрес');
            return false;
        }
    });

    // Форматирование телефона при загрузке страницы
    window.addEventListener('load', function() {
        const phoneInput = document.getElementById('phone');
        if (phoneInput.value) {
            formatPhoneNumber(phoneInput);
        }
    });
</script>
{% endblock %}
{% endblock %}