{% extends 'inventory/base_inventory_minimal.html' %}

{% block inventory_title %}Инвентаризации{% endblock %}
{% block breadcrumb_current %}Инвентаризация{% endblock %}

{% block inventory_content %}
<!-- Компактный заголовок с фильтрами -->
<div class="d-flex justify-content-between align-items-center mb-2">
    <h5 class="mb-0">Инвентаризации</h5>
    <a href="{% url 'inventory:inventory-create' %}" class="btn btn-sm btn-dark">
        <i class="bi bi-plus"></i> Новая
    </a>
</div>

<!-- Компактная панель фильтров -->
<div class="filter-bar mb-2">
    <form method="get" class="d-flex gap-2 align-items-center">
        <select name="warehouse" class="form-select form-select-sm" onchange="this.form.submit()">
            <option value="">Все склады</option>
            {% load inventory_tags %}
            {% get_warehouses as warehouses %}
            {% for warehouse in warehouses %}
                <option value="{{ warehouse.id }}" {% if request.GET.warehouse == warehouse.id|stringformat:"s" %}selected{% endif %}>
                    {{ warehouse.name }}
                </option>
            {% endfor %}
        </select>

        <select name="status" class="form-select form-select-sm" onchange="this.form.submit()">
            <option value="">Все статусы</option>
            <option value="draft" {% if request.GET.status == 'draft' %}selected{% endif %}>Черновик</option>
            <option value="processing" {% if request.GET.status == 'processing' %}selected{% endif %}>В обработке</option>
            <option value="completed" {% if request.GET.status == 'completed' %}selected{% endif %}>Завершена</option>
        </select>

        {% if request.GET.warehouse or request.GET.status %}
        <a href="{% url 'inventory:inventory-list' %}" class="btn btn-sm btn-outline-secondary">
            <i class="bi bi-x"></i>
        </a>
        {% endif %}
    </form>
</div>

<!-- Минималистичная таблица -->
{% if inventories %}
<div class="table-wrapper">
    <table class="table table-sm table-hover minimal-table">
        <thead>
            <tr>
                <th>Номер</th>
                <th>Склад</th>
                <th>Статус</th>
                <th>Провёл</th>
                <th>Дата</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            {% for inventory in inventories %}
            <tr>
                <td class="fw-medium">{{ inventory.document_number|default:"—" }}</td>
                <td class="fw-medium">{{ inventory.warehouse.name }}</td>
                <td>
                    <span class="status-dot status-{{ inventory.status }}"></span>
                    <span class="status-text">
                        {% if inventory.status == 'draft' %}Черновик
                        {% elif inventory.status == 'processing' %}В обработке
                        {% else %}Завершена{% endif %}
                    </span>
                </td>
                <td class="text-muted">{{ inventory.conducted_by|default:"—" }}</td>
                <td class="text-muted">{{ inventory.date|date:"d.m.Y H:i" }}</td>
                <td class="text-end">
                    <div class="d-inline-flex gap-1 action-buttons-container">
                        <a href="{% url 'inventory:inventory-detail' inventory.pk %}" class="btn-icon" 
                           title="{% if inventory.status == 'completed' %}Открыть для просмотра{% else %}Открыть для редактирования{% endif %}">
                            <i class="bi {% if inventory.status == 'completed' %}bi-eye{% else %}bi-pencil-square{% endif %}"></i>
                        </a>
                        <button type="button" class="btn-icon text-danger {% if inventory.status == 'completed' %}invisible{% endif %}" 
                                {% if inventory.status != 'completed' %}
                                data-bs-toggle="modal" 
                                data-bs-target="#confirmDeleteModal{{ inventory.pk }}"
                                {% endif %}
                                title="Удалить инвентаризацию">
                            <i class="bi bi-trash"></i>
                        </button>
                    </div>
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>

<!-- Компактная пагинация -->
{% if is_paginated %}
<nav class="pagination-wrapper">
    <ul class="pagination pagination-sm mb-0">
        {% if page_obj.has_previous %}
        <li class="page-item">
            <a class="page-link" href="?page={{ page_obj.previous_page_number }}{% if request.GET.warehouse %}&warehouse={{ request.GET.warehouse }}{% endif %}{% if request.GET.status %}&status={{ request.GET.status }}{% endif %}">
                <i class="bi bi-chevron-left"></i>
            </a>
        </li>
        {% endif %}

        <li class="page-item disabled">
            <span class="page-link">{{ page_obj.number }} / {{ page_obj.paginator.num_pages }}</span>
        </li>

        {% if page_obj.has_next %}
        <li class="page-item">
            <a class="page-link" href="?page={{ page_obj.next_page_number }}{% if request.GET.warehouse %}&warehouse={{ request.GET.warehouse }}{% endif %}{% if request.GET.status %}&status={{ request.GET.status }}{% endif %}">
                <i class="bi bi-chevron-right"></i>
            </a>
        </li>
        {% endif %}
    </ul>
</nav>
{% endif %}

{% else %}
<div class="empty-state">
    <i class="bi bi-inbox"></i>
    <p>Инвентаризаций не найдено.</p>
    <a href="{% url 'inventory:inventory-create' %}" class="btn btn-sm btn-dark">Начать инвентаризацию</a>
</div>
{% endif %}

<!-- Модальные окна подтверждения удаления -->
{% for inventory in inventories %}
{% if inventory.status != 'completed' %}
<div class="modal fade" id="confirmDeleteModal{{ inventory.pk }}" tabindex="-1" aria-labelledby="confirmDeleteModalLabel{{ inventory.pk }}" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header bg-danger text-white">
                <h5 class="modal-title" id="confirmDeleteModalLabel{{ inventory.pk }}">
                    <i class="bi bi-exclamation-triangle-fill"></i> Удалить инвентаризацию?
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p>Вы уверены, что хотите удалить эту инвентаризацию?</p>
                <div class="alert alert-danger">
                    <i class="bi bi-exclamation-triangle-fill"></i>
                    <strong>Внимание!</strong> Это действие нельзя отменить. Все строки инвентаризации будут удалены.
                </div>
                <p class="mb-0">
                    <strong>Склад:</strong> {{ inventory.warehouse.name }}<br>
                    {% if inventory.document_number %}
                    <strong>Номер документа:</strong> {{ inventory.document_number }}<br>
                    {% endif %}
                    <strong>Дата:</strong> {{ inventory.date|date:"d.m.Y H:i" }}
                </p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Отмена</button>
                <form method="post" action="{% url 'inventory:inventory-delete' inventory.pk %}" style="display: inline;">
                    {% csrf_token %}
                    <button type="submit" class="btn btn-danger">Удалить инвентаризацию</button>
                </form>
            </div>
        </div>
    </div>
</div>
{% endif %}
{% endfor %}

<!-- Подсказка для пользователя -->
<div class="alert alert-info mt-3" style="font-size: 0.875rem;">
    <i class="bi bi-info-circle"></i>
    <strong>Как использовать:</strong> Создайте инвентаризацию, затем откройте её (иконка карандаша) для добавления товаров и указания фактических количеств. 
    После завершения будут автоматически созданы документы списания и оприходования (черновики), которые можно провести отдельно.
</div>

<style>
/* Минималистичная таблица */
.minimal-table {
    font-size: 0.875rem;
    border-collapse: separate;
    border-spacing: 0;
}

.minimal-table thead th {
    background: transparent;
    border-bottom: 2px solid #dee2e6;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #6c757d;
    padding: 0.5rem 0.75rem;
    border-top: none;
}

.minimal-table tbody td {
    padding: 0.625rem 0.75rem;
    border-top: 1px solid #f0f0f0;
    vertical-align: middle;
}

.minimal-table tbody tr:hover {
    background-color: #f8f9fa;
}

/* Статусные индикаторы */
.status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 6px;
}

.status-dot.status-draft {
    background-color: #adb5bd;
}

.status-dot.status-processing {
    background-color: #ffc107;
}

.status-dot.status-completed {
    background-color: #28a745;
}

.status-text {
    font-size: 0.875rem;
    color: #495057;
}

/* Кнопки-иконки */
.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    background: transparent;
    color: #6c757d;
    text-decoration: none;
    border-radius: 4px;
    transition: all 0.15s;
}

.btn-icon:hover {
    background-color: #e9ecef;
    color: #212529;
}

/* Фильтры */
.filter-bar .form-select-sm {
    width: auto;
    min-width: 150px;
    font-size: 0.875rem;
}

/* Пагинация */
.pagination-wrapper {
    display: flex;
    justify-content: center;
    margin-top: 1rem;
}

.pagination-sm .page-link {
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    border-color: #dee2e6;
}

.pagination-sm .page-item.disabled .page-link {
    background-color: transparent;
    border-color: transparent;
    color: #6c757d;
}

/* Пустое состояние */
.empty-state {
    text-align: center;
    padding: 3rem 1rem;
    color: #6c757d;
}

.empty-state i {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.3;
}

.empty-state p {
    margin-bottom: 1rem;
    font-size: 0.875rem;
}

/* Утилиты */
.fw-medium {
    font-weight: 500;
}

.gap-2 {
    gap: 0.5rem !important;
}

.gap-1 {
    gap: 0.25rem !important;
}

/* Фиксированная ширина для контейнера кнопок действий */
.action-buttons-container {
    width: 60px;
    justify-content: flex-end;
}

.action-buttons-container .btn-icon {
    flex-shrink: 0;
}
</style>
{% endblock %}
