{% extends "base.html" %}

{% block content %}
<div class="page-header">
    <h2>Партнеры</h2>
    <a href="{{ url_for('add_partner') }}" class="btn-add-light">+ Добавить партнера</a>
</div>

<div class="header-actions" style="margin-bottom: 20px;">
    <input type="text" id="searchInput" placeholder="Поиск по названию или ИНН..." class="search-input" onkeyup="filterPartners()">
</div>

{% if partners %}
    <div class="partners-grid" id="partnersGrid">
        {% for partner in partners %}
        <div class="partner-card" data-name="{{ partner.name.lower() }}" data-inn="{{ partner.inn }}">
            <div class="partner-header">
                <h3>{{ partner.name }}</h3>
            </div>
            <div class="partner-body">
                <p><strong>Директор:</strong> {{ partner.director or 'Не указан' }}</p>
                <p><strong>ИНН:</strong> {{ partner.inn }}</p>
                <p><strong>Email:</strong> {{ partner.email }}</p>
                <p><strong>Телефон:</strong> {{ partner.phone or 'Не указан' }}</p>
                <p><strong>Адрес:</strong> {{ partner.legal_address or 'Не указан' }}</p>

                <div class="partner-stats">
                    <p><strong>Заказов:</strong> {{ partner.orders_count }}</p>
                    <p><strong>Общая сумма закупок:</strong> {{ "%.2f"|format(partner.total_purchases) }} ₽</p>
                    <p><strong>Текущая скидка:</strong> {{ partner.discount_desc }}</p>
                </div>
            </div>
            <div class="partner-footer">
                <a href="{{ url_for('edit_partner', partner_id=partner.id) }}" class="btn-edit">Редактировать</a>
                <a href="{{ url_for('index') }}?partner={{ partner.id }}" class="btn-view">Заказы</a>
            </div>
        </div>
        {% endfor %}
    </div>
{% else %}
    <div class="empty-state">
        <p>Партнеров пока нет</p>
        <a href="{{ url_for('add_partner') }}" class="btn-add-light">Добавить первого партнера</a>
    </div>
{% endif %}

<script>
function filterPartners() {
    const searchText = document.getElementById('searchInput').value.toLowerCase();
    const partners = document.querySelectorAll('.partner-card');

    partners.forEach(partner => {
        const name = partner.dataset.name;
        const inn = partner.dataset.inn;

        if (name.includes(searchText) || inn.includes(searchText)) {
            partner.style.display = 'block';
        } else {
            partner.style.display = 'none';
        }
    });
}
</script>

<style>
.partner-stats {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #E0E0E0;
    background-color: #F5F5F5;
    padding: 10px;
    border-radius: 4px;
}

.partner-footer {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.partners-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.partner-card {
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    transition: transform 0.3s;
    display: flex;
    flex-direction: column;
}

.partner-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.15);
}

.partner-header {
    background-color: #E0E0E0;
    padding: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.partner-header h3 {
    color: #696969;
    font-size: 1.2rem;
    margin: 0;
}

.partner-body {
    padding: 15px;
    flex: 1;
}

.partner-body p {
    margin-bottom: 8px;
}

.search-input {
    padding: 10px;
    border: 1px solid #E0E0E0;
    border-radius: 4px;
    width: 300px;
    font-family: 'Calibri', sans-serif;
}

.btn-add-light {
    background-color: #E0E0E0;
    color: #696969;
    padding: 8px 16px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 600;
    transition: background-color 0.3s;
    border: 1px solid #696969;
}

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

.btn-edit, .btn-view {
    padding: 8px 16px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 500;
    transition: background-color 0.3s;
}

.btn-edit {
    background-color: #E0E0E0;
    color: #696969;
}

.btn-view {
    background-color: #F5F5F5;
    color: #696969;
    border: 1px solid #E0E0E0;
}

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

.btn-view:hover {
    background-color: #E0E0E0;
}

.empty-state {
    text-align: center;
    padding: 60px 20px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.empty-state p {
    font-size: 1.2rem;
    color: #666;
    margin-bottom: 20px;
}

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    flex-wrap: wrap;
    gap: 15px;
}

.page-header h2 {
    font-size: 2rem;
    color: #696969;
    font-weight: 500;
    margin: 0;
}

@media (max-width: 768px) {
    .search-input {
        width: 100%;
    }

    .page-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .btn-add-light {
        width: 100%;
        text-align: center;
    }
}
</style>
{% endblock %}