{% extends "base.html" %}

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

{% block content %}
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header" style="background: linear-gradient(135deg, var(--steel-blue) 0%, var(--light-steel-blue) 100%); color: white;">
                    <h2 class="card-title mb-0">
                        <i class="fas fa-edit"></i> Редактирование товара
                    </h2>
                </div>
                <div class="card-body">
                    <!-- Информация о партнере (только для чтения) -->
                    {% if client %}
                    <div class="alert alert-info mb-3">
                        <i class="fas fa-info-circle"></i> Редактирование товара партнера: 
                        <strong>{{ client.name }}</strong>
                        <input type="hidden" name="client_id" value="{{ client.id }}">
                    </div>
                    {% endif %}

                    <!-- 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">
                                    {{ message }}
                                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                                </div>
                            {% endfor %}
                        {% endif %}
                    {% endwith %}

                    <form method="POST" id="productForm">
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="product_name" class="form-label">Наименование</label>
                                <input type="text" class="form-control" id="product_name" name="product_name" 
                                       value="{{ product.product_name }}" required maxlength="255" 
                                       onkeypress="return isLetterKey(event)" 
                                       oninput="this.value = this.value.replace(/[^а-яА-ЯёЁa-zA-Z\s]/g, '')">
                                <small class="form-text text-muted">Только буквы</small>
                            </div>
                            
                            <div class="col-md-6 mb-3">
                                <label for="article" class="form-label">Артикул</label>
                                <input type="text" class="form-control" id="article" name="article" 
                                       value="{{ product.article }}" required maxlength="100" readonly>
                                <small class="form-text text-muted">Не изменяется</small>
                            </div>
                            
                            <div class="col-md-6 mb-3">
                                <label for="category_id" class="form-label">Категория</label>
                                <select class="form-select" id="category_id" name="category_id" required>
                                    <option value="">Выберите категорию</option>
                                    {% for category in categories %}
                                        <option value="{{ category.id }}" {% if category.id == product.category_id %}selected{% endif %}>
                                            {{ category.category_name }}
                                        </option>
                                    {% endfor %}
                                </select>
                            </div>
                            
                            <div class="col-md-6 mb-3">
                                <label for="material_id" class="form-label">Материал</label>
                                <select class="form-select" id="material_id" name="material_id">
                                    <option value="">Не выбран</option>
                                    {% for material in materials %}
                                        <option value="{{ material.id }}" {% if material.id == product.material_id %}selected{% endif %}>
                                            {{ material.material_name }}
                                        </option>
                                    {% endfor %}
                                </select>
                            </div>
                            
                            <div class="col-12 mb-3">
                                <label for="description" class="form-label">Описание</label>
                                <textarea class="form-control" id="description" name="description" rows="3" maxlength="500">{{ product.description or '' }}</textarea>
                            </div>
                            
                            <!-- Скрытое поле с client_id (неизменяемый) -->
                            <input type="hidden" name="client_id" value="{{ product.client_id }}">
                            
                            <div class="col-md-6 mb-3">
                                <label for="production_time_days" class="form-label">Время изготовления (дней)</label>
                                <input type="number" class="form-control" id="production_time_days" name="production_time_days" 
                                       min="1" value="{{ product.production_time_days or 1 }}" required 
                                       onkeypress="return isNumberKey(event)">
                                <small class="form-text text-muted">Сколько дней нужно на производство</small>
                            </div>
                            
                            <div class="col-md-6 mb-3">
                                <label for="min_price" class="form-label">Цена</label>
                                <input type="number" class="form-control" id="min_price" name="min_price" 
                                       min="0" step="0.01" required value="{{ product.min_price }}" 
                                       onkeypress="return isNumberKey(event)">
                            </div>
                            
                            <div class="col-md-6 mb-3">
                                <label for="quantity_in_stock" class="form-label">Количество на складе</label>
                                <input type="number" class="form-control" id="quantity_in_stock" name="quantity_in_stock" 
                                       min="0" value="{{ product.quantity_in_stock or 0 }}" 
                                       onkeypress="return isNumberKey(event)">
                            </div>
                        </div>
                        
                        <div class="row mt-4">
                            <div class="col-12">
                                <div class="d-flex justify-content-between">
                                    <a href="{{ url_for('catalog') }}" class="btn btn-secondary">
                                        <i class="fas fa-arrow-left"></i> Назад
                                    </a>
                                    <button type="submit" class="btn btn-primary">
                                        <i class="fas fa-save"></i> Сохранить изменения
                                    </button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
// Функция для проверки ввода только цифр
function isNumberKey(evt) {
    var charCode = (evt.which) ? evt.which : evt.keyCode;
    if (charCode > 31 && (charCode < 48 || charCode > 57)) {
        return false;
    }
    return true;
}

// Функция для проверки ввода только букв
function isLetterKey(evt) {
    var charCode = (evt.which) ? evt.which : evt.keyCode;
    // Разрешаем буквы, пробел, backspace, delete, tab, enter
    if (charCode == 32 || charCode == 8 || charCode == 46 || charCode == 9 || charCode == 13) {
        return true;
    }
    // Русские и английские буквы
    if ((charCode >= 65 && charCode <= 90) || (charCode >= 97 && charCode <= 122) || 
        (charCode >= 1040 && charCode <= 1103)) {
        return true;
    }
    return false;
}

document.getElementById('productForm').addEventListener('submit', function(e) {
    const price = parseFloat(document.getElementById('min_price').value);
    if (price <= 0) {
        e.preventDefault();
        alert('Цена должна быть больше 0');
        return false;
    }
    
    const prodDays = parseInt(document.getElementById('production_time_days').value);
    if (prodDays < 1) {
        e.preventDefault();
        alert('Время изготовления должно быть не менее 1 дня');
        return false;
    }
    
    // Проверяем наименование на наличие цифр
    const productName = document.getElementById('product_name').value;
    if (/\d/.test(productName)) {
        e.preventDefault();
        alert('Наименование не должно содержать цифры');
        return false;
    }
});

// Очищаем поле наименования от цифр при вводе
document.getElementById('product_name').addEventListener('input', function() {
    this.value = this.value.replace(/[0-9]/g, '');
});
</script>

<style>
    .card {
        border: 1px solid var(--light-steel-blue);
        border-radius: 15px;
        box-shadow: 0 4px 10px rgba(70, 130, 180, 0.1);
    }
    
    .form-label {
        color: var(--steel-blue);
        font-weight: 500;
        font-family: 'Franklin Gothic', 'Arial Narrow', Arial, sans-serif;
    }
    
    .form-control, .form-select {
        border: 2px solid var(--light-steel-blue);
        border-radius: 8px;
        padding: 10px 15px;
        font-family: 'Franklin Gothic', 'Arial Narrow', Arial, sans-serif;
    }
    
    .form-control:focus, .form-select:focus {
        border-color: var(--steel-blue);
        box-shadow: 0 0 0 0.2rem rgba(70, 130, 180, 0.25);
        outline: none;
    }
    
    .btn-primary {
        background: linear-gradient(135deg, var(--steel-blue) 0%, #3a6d99 100%);
        border: none;
        border-radius: 8px;
        padding: 10px 20px;
        font-family: 'Franklin Gothic', 'Arial Narrow', Arial, sans-serif;
    }
    
    .btn-primary:hover {
        background: linear-gradient(135deg, #3a6d99 0%, var(--steel-blue) 100%);
        transform: translateY(-2px);
        box-shadow: 0 4px 10px rgba(70, 130, 180, 0.3);
    }
    
    .btn-secondary {
        background: linear-gradient(135deg, var(--light-steel-blue) 0%, #9fb6d4 100%);
        border: none;
        border-radius: 8px;
        padding: 10px 20px;
        color: #2c3e50;
        font-family: 'Franklin Gothic', 'Arial Narrow', Arial, sans-serif;
    }
    
    .btn-secondary:hover {
        background: linear-gradient(135deg, #9fb6d4 0%, var(--light-steel-blue) 100%);
        transform: translateY(-2px);
        box-shadow: 0 4px 10px rgba(176, 196, 222, 0.3);
    }
    
    .form-text {
        font-family: 'Franklin Gothic', 'Arial Narrow', Arial, sans-serif;
        color: #6c757d;
    }
    
    .alert {
        border-radius: 10px;
        border: 1px solid var(--light-steel-blue);
        font-family: 'Franklin Gothic', 'Arial Narrow', Arial, sans-serif;
    }
    
    .alert-success {
        background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
        color: #155724;
        border-left: 6px solid #28a745;
    }
    
    .alert-danger {
        background: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%);
        color: #721c24;
        border-left: 6px solid #dc3545;
    }
    
    .alert-info {
        background: linear-gradient(135deg, #d1ecf1 0%, #bee5eb 100%);
        color: #0c5460;
        border-left: 6px solid #17a2b8;
    }
    
    textarea.form-control {
        resize: vertical;
        min-height: 80px;
    }
    
    /* Стиль для readonly поля */
    #article[readonly] {
        background-color: #f8f9fa;
        cursor: not-allowed;
    }
</style>
{% endblock %}