{% extends "base.html" %}

{% block title %}Партнеры офисной мебели{% endblock %}

{% block content %}
    <!-- Заголовок и кнопка добавления (в стиле заказов) -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h2 class="page-title">Партнеры офисной мебели</h2>
        <a href="{{ url_for('add_client') }}" class="btn btn-primary">
            <i class="fas fa-plus"></i> Новый партнер
        </a>
    </div>

    <!-- Поиск и сортировка -->
    <div class="filter-section mb-4">
        <h4 class="filter-title">Поиск и сортировка</h4>
        <form method="GET" action="{{ url_for('index') }}" id="filterForm">
            <div class="row">
                <div class="col-md-4 mb-3">
                    <label for="search" class="form-label">Поиск по названию или ИНН:</label>
                    <div class="input-group">
                        <input type="text" class="form-control" name="search" id="search" 
                               placeholder="Введите название или ИНН..." 
                               value="{{ request.args.get('search', '') }}">
                        <button class="btn btn-primary" type="submit">
                            <i class="fas fa-search"></i> Найти
                        </button>
                    </div>
                </div>
                <div class="col-md-3 mb-3">
                    <label for="sort" class="form-label">Сортировать по:</label>
                    <select class="form-select" name="sort" id="sort">
                        <option value="name_asc" {% if request.args.get('sort') == 'name_asc' or not request.args.get('sort') %}selected{% endif %}>Названию (А-Я)</option>
                        <option value="name_desc" {% if request.args.get('sort') == 'name_desc' %}selected{% endif %}>Названию (Я-А)</option>
                        <option value="rating_desc" {% if request.args.get('sort') == 'rating_desc' %}selected{% endif %}>Рейтингу (сначала высокий)</option>
                        <option value="rating_asc" {% if request.args.get('sort') == 'rating_asc' %}selected{% endif %}>Рейтингу (сначала низкий)</option>
                    </select>
                </div>
                <div class="col-md-3 mb-3">
                    <label for="type" class="form-label">Тип партнера:</label>
                    <select class="form-select" name="type" id="type">
                        <option value="all" {% if request.args.get('type') == 'all' or not request.args.get('type') %}selected{% endif %}>Все типы</option>
                        <option value="ЗАО" {% if request.args.get('type') == 'ЗАО' %}selected{% endif %}>ЗАО</option>
                        <option value="ОАО" {% if request.args.get('type') == 'ОАО' %}selected{% endif %}>ОАО</option>
                        <option value="ООО" {% if request.args.get('type') == 'ООО' %}selected{% endif %}>ООО</option>
                        <option value="ПАО" {% if request.args.get('type') == 'ПАО' %}selected{% endif %}>ПАО</option>
                    </select>
                </div>
                <div class="col-md-2 mb-3">
                    <label for="rating" class="form-label">Мин. рейтинг:</label>
                    <select class="form-select" name="rating" id="rating">
                        <option value="0" {% if request.args.get('rating') == '0' or not request.args.get('rating') %}selected{% endif %}>Любой</option>
                        <option value="4" {% if request.args.get('rating') == '4' %}selected{% endif %}>4+</option>
                        <option value="4.5" {% if request.args.get('rating') == '4.5' %}selected{% endif %}>4.5+</option>
                        <option value="4.8" {% if request.args.get('rating') == '4.8' %}selected{% endif %}>4.8+</option>
                    </select>
                </div>
            </div>
            <div class="row mt-2">
                <div class="col-12">
                    <a href="{{ url_for('index') }}" class="btn btn-secondary">
                        <i class="fas fa-times"></i> Сбросить все фильтры
                    </a>
                </div>
            </div>
        </form>
    </div>

    <!-- Список партнеров -->
    {% if partners %}
        <div class="row">
            {% for partner in partners %}
                {% include 'components/partner_card.html' %}
            {% endfor %}
        </div>
        
        <!-- Информация о результатах поиска -->
        <div class="row mt-3">
            <div class="col-12">
                <p class="text-muted">
                    <i class="fas fa-info-circle"></i> 
                    Найдено партнеров: <strong>{{ partners|length }}</strong>
                    {% if request.args.get('search') %}
                        по запросу "{{ request.args.get('search') }}"
                    {% endif %}
                    {% if request.args.get('type') and request.args.get('type') != 'all' %}
                        , тип: {{ request.args.get('type') }}
                    {% endif %}
                    {% if request.args.get('rating') and request.args.get('rating') != '0' %}
                        , рейтинг ≥ {{ request.args.get('rating') }}
                    {% endif %}
                </p>
            </div>
        </div>
    {% else %}
        <div class="alert alert-info">
            <i class="fas fa-info-circle"></i> 
            {% if request.args.get('search') or request.args.get('type') != 'all' or request.args.get('rating') != '0' %}
                <strong>Ничего не найдено</strong> по вашему запросу.
                <br><a href="{{ url_for('index') }}" class="alert-link">Сбросить все фильтры</a>
            {% else %}
                Нет данных о партнере. <a href="{{ url_for('add_client') }}" class="alert-link">Добавьте первого партнера</a>.
            {% endif %}
        </div>
    {% endif %}

    <!-- JavaScript для автоматической сортировки -->
    <script>
        document.getElementById('sort').addEventListener('change', function() {
            document.getElementById('filterForm').submit();
        });
        
        document.getElementById('type').addEventListener('change', function() {
            document.getElementById('filterForm').submit();
        });
        
        document.getElementById('rating').addEventListener('change', function() {
            document.getElementById('filterForm').submit();
        });
        
        let searchTimeout;
        document.getElementById('search').addEventListener('input', function() {
            clearTimeout(searchTimeout);
            searchTimeout = setTimeout(() => {
                if (this.value.length >= 2 || this.value.length === 0) {
                    document.getElementById('filterForm').submit();
                }
            }, 800);
        });
        
        document.getElementById('search').addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                e.preventDefault();
                document.getElementById('filterForm').submit();
            }
        });
    </script>

    <style>
        .page-title {
            color: var(--steel-blue);
            font-size: 1.8rem;
            font-weight: 600;
            font-family: 'Franklin Gothic', 'Arial Narrow', Arial, sans-serif;
        }
        
        .filter-section {
            background-color: var(--alice-blue);
            padding: 20px;
            border-radius: 12px;
            border: 1px solid var(--light-steel-blue);
            margin-bottom: 20px;
        }
        
        .filter-title {
            color: var(--steel-blue);
            margin-bottom: 20px;
            font-size: 1.25rem;
            font-weight: 500;
            font-family: 'Franklin Gothic', 'Arial Narrow', Arial, sans-serif;
        }
        
        .form-label {
            font-family: 'Franklin Gothic', 'Arial Narrow', Arial, sans-serif;
            color: var(--steel-blue);
            font-weight: 500;
        }
        
        .form-control, .form-select {
            font-family: 'Franklin Gothic', 'Arial Narrow', Arial, sans-serif;
            border: 1px solid var(--light-steel-blue);
            border-radius: 8px;
        }
        
        .form-control:focus, .form-select:focus {
            border-color: var(--steel-blue);
            box-shadow: 0 0 0 0.2rem rgba(70, 130, 180, 0.25);
        }
        
        .btn {
            font-family: 'Franklin Gothic', 'Arial Narrow', Arial, sans-serif;
            border: none;
            border-radius: 8px;
            padding: 10px 20px;
            transition: all 0.3s ease;
        }
        
        .btn-primary {
            background: linear-gradient(135deg, var(--steel-blue) 0%, #3a6d99 100%);
            color: white;
        }
        
        .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%);
            color: #2c3e50;
        }
        
        .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);
            color: #2c3e50;
        }
        
        .input-group .btn {
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
        }
        
        .card {
            border: 1px solid var(--light-steel-blue);
            border-radius: 12px;
        }
        
        .text-muted {
            font-family: 'Franklin Gothic', 'Arial Narrow', Arial, sans-serif;
        }
        
        .alert {
            border-radius: 12px;
            border: 1px solid var(--light-steel-blue);
            background: linear-gradient(135deg, var(--alice-blue) 0%, #E6F2FF 100%);
            border-left: 6px solid var(--steel-blue);
            font-family: 'Franklin Gothic', 'Arial Narrow', Arial, sans-serif;
        }
        
        .alert-link {
            color: var(--steel-blue);
            font-weight: 600;
        }
    </style>
{% endblock %}