{% extends "base.html" %}

{% block content %}
<div class="page-header">
    <h2>Результаты поиска: "{{ query }}"</h2>
    <a href="javascript:history.back()" class="btn-back">Назад</a>
</div>

{% if results %}
    <div class="search-filters">
        <p>Найдено: {{ results|length }} результатов</p>
        <select id="resultTypeFilter" onchange="filterResults()">
            <option value="all">Все типы</option>
            <option value="order">Заказы</option>
            <option value="product">Товары</option>
            <option value="supplier">Поставщики</option>
        </select>
    </div>

    <ul class="search-results">
        {% for result in results %}
        <li class="search-result-item" data-type="{{ result.result_type }}">
            <span class="result-type {{ result.result_type }}">{{ result.result_type }}</span>

            {% if result.result_type == 'order' %}
                <h3><a href="{{ url_for('order_detail', order_id=result.id) }}">{{ result.display_name }}</a></h3>
                <p>Дата: {{ result.order_date }} | Статус: {{ result.status }}</p>
                {% if result.notes %}
                <p class="result-notes">{{ result.notes[:100] }}{% if result.notes|length > 100 %}...{% endif %}</p>
                {% endif %}

            {% elif result.result_type == 'product' %}
                <h3><a href="#">{{ result.display_name }}</a></h3>
                <p>Артикул: {{ result.article }} | Тип: {{ result.type_name }}</p>
                <p>Цена: {{ result.min_partner_price }} ₽ | Остаток: {{ result.quantity_in_stock }} шт.</p>

            {% elif result.result_type == 'supplier' %}
                <h3><a href="{{ url_for('edit_supplier', supplier_id=result.id) }}">{{ result.display_name }}</a></h3>
                <p>ИНН: {{ result.inn }} | Email: {{ result.email }}</p>
                <p>Рейтинг: {{ result.rating }} | Телефон: {{ result.phone or 'Не указан' }}</p>
            {% endif %}

            <div class="result-actions">
                {% if result.result_type == 'order' %}
                    <a href="{{ url_for('order_detail', order_id=result.id) }}" class="btn-view-small">Подробнее</a>
                {% elif result.result_type == 'product' %}
                    <button onclick="quickAddToCart({{ result.id }}, '{{ result.product_name }}', {{ result.min_partner_price }})"
                            class="btn-add-small">В корзину</button>
                {% elif result.result_type == 'supplier' %}
                    <a href="{{ url_for('edit_supplier', supplier_id=result.id) }}" class="btn-edit-small">Редактировать</a>
                {% endif %}
            </div>
        </li>
        {% endfor %}
    </ul>
{% else %}
    <div class="empty-state">
        <p>По запросу "{{ query }}" ничего не найдено</p>
        <p>Попробуйте изменить поисковый запрос</p>
    </div>
{% endif %}

<script>
function filterResults() {
    const filter = document.getElementById('resultTypeFilter').value;
    const results = document.querySelectorAll('.search-result-item');

    results.forEach(item => {
        if (filter === 'all' || item.dataset.type === filter) {
            item.style.display = 'block';
        } else {
            item.style.display = 'none';
        }
    });
}

function quickAddToCart(productId, productName, price) {
    // Используем ту же логику корзины, что и на странице товаров
    if (window.opener && !window.opener.closed) {
        window.opener.addToCart(productId, productName, price);
        window.close();
    } else {
        alert('Добавлено в корзину! Перейдите на страницу товаров для оформления заказа.');
    }
}
</script>

<style>
.search-filters {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding: 15px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.search-filters select {
    padding: 8px 12px;
    border: 1px solid #E0E0E0;
    border-radius: 4px;
}

.result-notes {
    color: #666;
    font-style: italic;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed #E0E0E0;
}

.result-actions {
    margin-top: 10px;
}

.btn-add-small {
    background-color: #696969;
    color: white;
    border: none;
    padding: 5px 10px;
    border-radius: 4px;
    cursor: pointer;
}

.btn-add-small:hover {
    background-color: #555;
}
</style>
{% endblock %}