{% extends 'base.html' %}

{% block title %}Склад{% endblock %}

{% block content %}
<div class="container-fluid py-4">
    <div class="row mb-5">
        <div class="col-12">
            <h1 class="mb-2">Управление складом</h1>
            <p class="text-muted">Выберите операцию для работы</p>
        </div>
    </div>

    <!-- Основные операции -->
    <div class="row mb-5">
        <div class="col-12">
            <h5 class="text-uppercase text-muted mb-3">
                <small>Основные операции</small>
            </h5>
        </div>
    </div>

    <div class="row g-3 mb-5">
        <!-- Управление складами -->
        <div class="col-lg-4 col-md-6">
            <a href="{% url 'inventory:warehouse-list' %}" class="card-link">
                <div class="card h-100 compact-card primary-card">
                    <div class="card-body d-flex flex-column">
                        <div class="icon-wrapper primary-icon mb-3">
                            <i class="bi bi-building"></i>
                        </div>
                        <h6 class="card-title">Управление складами</h6>
                        <div class="mt-auto">
                            <span class="btn-text">Перейти →</span>
                        </div>
                    </div>
                </div>
            </a>
        </div>

        <!-- Приход товара -->
        <div class="col-lg-4 col-md-6">
            <a href="{% url 'inventory:incoming-list' %}" class="card-link">
                <div class="card h-100 compact-card success-card">
                    <div class="card-body d-flex flex-column">
                        <div class="icon-wrapper success-icon mb-3">
                            <i class="bi bi-arrow-down-square"></i>
                        </div>
                        <h6 class="card-title">Приход товара</h6>
                        <div class="mt-auto">
                            <span class="btn-text">Перейти →</span>
                        </div>
                    </div>
                </div>
            </a>
        </div>

        <!-- Реализация товара -->
        <div class="col-lg-4 col-md-6">
            <a href="{% url 'inventory:sale-list' %}" class="card-link">
                <div class="card h-100 compact-card warning-card">
                    <div class="card-body d-flex flex-column">
                        <div class="icon-wrapper warning-icon mb-3">
                            <i class="bi bi-arrow-up-square"></i>
                        </div>
                        <h6 class="card-title">Реализация товара</h6>
                        <div class="mt-auto">
                            <span class="btn-text">Перейти →</span>
                        </div>
                    </div>
                </div>
            </a>
        </div>

        <!-- Инвентаризация -->
        <div class="col-lg-4 col-md-6">
            <a href="{% url 'inventory:inventory-list' %}" class="card-link">
                <div class="card h-100 compact-card info-card">
                    <div class="card-body d-flex flex-column">
                        <div class="icon-wrapper info-icon mb-3">
                            <i class="bi bi-clipboard-check"></i>
                        </div>
                        <h6 class="card-title">Инвентаризация</h6>
                        <div class="mt-auto">
                            <span class="btn-text">Перейти →</span>
                        </div>
                    </div>
                </div>
            </a>
        </div>

        <!-- Списание товара -->
        <div class="col-lg-4 col-md-6">
            <a href="{% url 'inventory:writeoff-list' %}" class="card-link">
                <div class="card h-100 compact-card danger-card">
                    <div class="card-body d-flex flex-column">
                        <div class="icon-wrapper danger-icon mb-3">
                            <i class="bi bi-x-circle"></i>
                        </div>
                        <h6 class="card-title">Списание товара</h6>
                        <div class="mt-auto">
                            <span class="btn-text">Перейти →</span>
                        </div>
                    </div>
                </div>
            </a>
        </div>

        <!-- Перемещение товара -->
        <div class="col-lg-4 col-md-6">
            <a href="{% url 'inventory:transfer-list' %}" class="card-link">
                <div class="card h-100 compact-card secondary-card">
                    <div class="card-body d-flex flex-column">
                        <div class="icon-wrapper secondary-icon mb-3">
                            <i class="bi bi-arrow-left-right"></i>
                        </div>
                        <h6 class="card-title">Перемещение товара</h6>
                        <div class="mt-auto">
                            <span class="btn-text">Перейти →</span>
                        </div>
                    </div>
                </div>
            </a>
        </div>
    </div>

    <!-- Справочная информация -->
    <div class="row mb-5">
        <div class="col-12">
            <h5 class="text-uppercase text-muted mb-3">
                <small>Справочная информация</small>
            </h5>
        </div>
    </div>

    <div class="row g-3">
        <!-- Остатки товаров -->
        <div class="col-lg-4 col-md-6">
            <a href="{% url 'inventory:stock-list' %}" class="card-link">
                <div class="card h-100 compact-card stock-card">
                    <div class="card-body d-flex flex-column">
                        <div class="icon-wrapper stock-icon mb-3">
                            <i class="bi bi-box-seam"></i>
                        </div>
                        <h6 class="card-title">Остатки товаров</h6>
                        <div class="mt-auto">
                            <span class="btn-text">Перейти →</span>
                        </div>
                    </div>
                </div>
            </a>
        </div>

        <!-- Партии товаров -->
        <div class="col-lg-4 col-md-6">
            <a href="{% url 'inventory:batch-list' %}" class="card-link">
                <div class="card h-100 compact-card batch-card">
                    <div class="card-body d-flex flex-column">
                        <div class="icon-wrapper batch-icon mb-3">
                            <i class="bi bi-diagram-3"></i>
                        </div>
                        <h6 class="card-title">Партии товаров</h6>
                        <div class="mt-auto">
                            <span class="btn-text">Перейти →</span>
                        </div>
                    </div>
                </div>
            </a>
        </div>

        <!-- Журнал операций -->
        <div class="col-lg-4 col-md-6">
            <a href="{% url 'inventory:movement-list' %}" class="card-link">
                <div class="card h-100 compact-card journal-card">
                    <div class="card-body d-flex flex-column">
                        <div class="icon-wrapper journal-icon mb-3">
                            <i class="bi bi-journal-check"></i>
                        </div>
                        <h6 class="card-title">Журнал операций</h6>
                        <div class="mt-auto">
                            <span class="btn-text">Перейти →</span>
                        </div>
                    </div>
                </div>
            </a>
        </div>
    </div>
</div>

<style>
    .card-link {
        text-decoration: none;
        color: inherit;
    }

    .compact-card {
        border: none;
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        transition: all 0.3s ease;
        min-height: 160px;
    }

    .compact-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
    }

    .card-body {
        padding: 1.25rem;
    }

    .card-title {
        font-size: 0.95rem;
        font-weight: 600;
        margin: 0;
        line-height: 1.3;
    }

    .icon-wrapper {
        width: 50px;
        height: 50px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.75rem;
        font-weight: 600;
    }

    /* Цветовые схемы для иконок */
    .primary-icon {
        background: rgba(13, 110, 253, 0.15);
        color: #0d6efd;
    }

    .success-icon {
        background: rgba(25, 135, 84, 0.15);
        color: #198754;
    }

    .warning-icon {
        background: rgba(255, 193, 7, 0.15);
        color: #ffc107;
    }

    .info-icon {
        background: rgba(23, 162, 184, 0.15);
        color: #17a2b8;
    }

    .danger-icon {
        background: rgba(220, 53, 69, 0.15);
        color: #dc3545;
    }

    .secondary-icon {
        background: rgba(108, 117, 125, 0.15);
        color: #6c757d;
    }

    .stock-icon {
        background: rgba(13, 202, 240, 0.15);
        color: #0dcaf0;
    }

    .batch-icon {
        background: rgba(111, 66, 193, 0.15);
        color: #6f42c1;
    }

    .journal-icon {
        background: rgba(253, 126, 20, 0.15);
        color: #fd7e14;
    }

    .btn-text {
        font-size: 0.85rem;
        font-weight: 500;
        color: #6c757d;
        transition: all 0.2s ease;
    }

    .compact-card:hover .btn-text {
        color: #0d6efd;
    }

    /* Легкий фон для вызва категорий */
    .text-uppercase {
        letter-spacing: 1px;
        font-weight: 600;
        font-size: 0.75rem;
    }

    /* Адаптивность */
    @media (max-width: 768px) {
        .compact-card {
            min-height: 140px;
        }

        .icon-wrapper {
            width: 45px;
            height: 45px;
            font-size: 1.5rem;
        }

        .card-title {
            font-size: 0.9rem;
        }
    }
</style>
{% endblock %}