{% extends 'core/base.html' %}
{% load static %}
{% load currency_filters %}

{% block title %}Inventory Dashboard - SwiftPOS{% endblock %}

{% block topbar_title %}
Inventory
{% endblock %}

{% block content %}
<div class="container-fluid px-0">
    <!-- Toast Messages -->
    <div class="swiftpos-toast-container">
        {% if messages %}
            {% for message in messages %}
                <div class="swiftpos-toast swiftpos-toast-{{ message.tags }}">
                    <div class="toast-icon">
                        {% if message.tags == 'success' %}
                            <i class="fas fa-check-circle"></i>
                        {% elif message.tags == 'error' or message.tags == 'danger' %}
                            <i class="fas fa-exclamation-circle"></i>
                        {% elif message.tags == 'warning' %}
                            <i class="fas fa-exclamation-triangle"></i>
                        {% else %}
                            <i class="fas fa-info-circle"></i>
                        {% endif %}
                    </div>
                    <div class="toast-text">
                        {{ message }}
                    </div>
                </div>
            {% endfor %}
        {% endif %}
    </div>

    <!-- Premium Metric Cards -->
    <style>
        .premium-card {
            border: none;
            border-radius: 16px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.03);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            background: white;
            overflow: hidden;
            position: relative;
        }
        .premium-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 30px rgba(0,0,0,0.06);
        }
        .premium-icon-wrap {
            width: 48px;
            height: 48px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.25rem;
            flex-shrink: 0;
        }
        .premium-list-item {
            border: none;
            border-bottom: 1px solid rgba(0,0,0,0.03);
            padding: 1rem 1.25rem;
            transition: background-color 0.2s ease;
        }
        .premium-list-item:hover {
            background-color: #f8fafc;
        }
        .premium-list-item:last-child {
            border-bottom: none;
        }
    </style>
    
    <!-- Hero Metric: Net Worth -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="premium-card p-4 p-md-5" style="background: linear-gradient(135deg, #4f46e5 0%, #312e81 100%);">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <div class="text-white-50 small fw-bold text-uppercase tracking-wide mb-2" style="letter-spacing: 1px;">Estimated Net Worth</div>
                        <h2 class="fw-bolder mb-1 text-white display-6">{% money total_inventory_worth %}</h2>
                        <div class="fw-medium text-white-50 mt-2">Combined value of all active stock in inventory</div>
                    </div>
                    <div class="premium-icon-wrap bg-white bg-opacity-25 text-white d-none d-sm-flex" style="width: 80px; height: 80px; font-size: 2.5rem; border-radius: 24px;">
                        <i class="fas fa-coins"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Secondary Metrics (4 columns) -->
    <div class="row g-3 mb-4">
        <div class="col-12 col-sm-6 col-xl-3">
            <div class="premium-card h-100 p-4">
                <div class="d-flex justify-content-between align-items-start">
                    <div>
                        <div class="text-muted small fw-bold text-uppercase tracking-wide mb-2" style="letter-spacing: 0.5px; font-size: 0.7rem;">Total Products</div>
                        <h3 class="fw-bolder mb-1 text-dark">{{ total_products }}</h3>
                        <div class="small text-secondary fw-medium">Unique SKUs</div>
                    </div>
                    <div class="premium-icon-wrap" style="background: rgba(79, 70, 229, 0.1); color: #4f46e5;">
                        <i class="fas fa-box-open"></i>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-12 col-sm-6 col-xl-3">
            <div class="premium-card h-100 p-4">
                <div class="d-flex justify-content-between align-items-start">
                    <div>
                        <div class="text-muted small fw-bold text-uppercase tracking-wide mb-2" style="letter-spacing: 0.5px; font-size: 0.7rem;">Total Stock Count</div>
                        <h3 class="fw-bolder mb-1 text-dark">{{ total_stock }}</h3>
                        <div class="small text-secondary fw-medium">All units combined</div>
                    </div>
                    <div class="premium-icon-wrap" style="background: rgba(16, 185, 129, 0.1); color: #10b981;">
                        <i class="fas fa-cubes"></i>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-12 col-sm-6 col-xl-3">
            <div class="premium-card h-100 p-4">
                <div class="d-flex justify-content-between align-items-start">
                    <div>
                        <div class="text-muted small fw-bold text-uppercase tracking-wide mb-2" style="letter-spacing: 0.5px; font-size: 0.7rem;">Low Stock</div>
                        <h3 class="fw-bolder mb-1 text-warning">{{ low_stock_count }}</h3>
                        <div class="small text-secondary fw-medium">Needs Attention</div>
                    </div>
                    <div class="premium-icon-wrap" style="background: rgba(245, 158, 11, 0.1); color: #f59e0b;">
                        <i class="fas fa-exclamation-triangle"></i>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-12 col-sm-6 col-xl-3">
            <div class="premium-card h-100 p-4">
                <div class="d-flex justify-content-between align-items-start">
                    <div>
                        <div class="text-muted small fw-bold text-uppercase tracking-wide mb-2" style="letter-spacing: 0.5px; font-size: 0.7rem;">Out of Stock</div>
                        <h3 class="fw-bolder mb-1 text-danger">{{ out_of_stock_count }}</h3>
                        <div class="small text-secondary fw-medium">Action Required</div>
                    </div>
                    <div class="premium-icon-wrap" style="background: rgba(239, 68, 68, 0.1); color: #ef4444;">
                        <i class="fas fa-times-circle"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Low stock & out-of-stock lists -->
    <div class="row g-4">
        <div class="col-lg-6">
            <div class="premium-card h-100">
                <div class="p-3 bg-light bg-opacity-50 border-bottom d-flex justify-content-between align-items-center">
                    <h6 class="mb-0 fw-bold text-dark d-flex align-items-center gap-2">
                        <i class="fas fa-arrow-down-wide-short text-warning"></i> Low Stock Alert
                    </h6>
                    <a href="{% url 'inventory:product_list' %}" class="btn btn-sm btn-outline-warning text-dark fw-medium rounded-pill px-3">
                        View all
                    </a>
                </div>
                <div class="list-group list-group-flush p-0 m-0">
                    {% if low_stock_products %}
                        {% for product in low_stock_products %}
                            <div class="premium-list-item d-flex justify-content-between align-items-center">
                                <div>
                                    <div class="fw-bold text-dark mb-1">{{ product.name }}</div>
                                    <div class="text-muted small fw-medium text-uppercase">{{ product.sku }}</div>
                                </div>
                                <div>
                                    <span class="badge rounded-pill bg-warning text-dark px-3 py-2 fw-bold shadow-sm">
                                        {{ product.stock_quantity }} left
                                    </span>
                                </div>
                            </div>
                        {% endfor %}
                    {% else %}
                        <div class="text-center py-5">
                            <div class="premium-icon-wrap mx-auto mb-3" style="background: rgba(16, 185, 129, 0.1); color: #10b981; width: 64px; height: 64px; font-size: 2rem;">
                                <i class="fas fa-check"></i>
                            </div>
                            <h6 class="fw-bold text-dark mb-1">Stock is Healthy</h6>
                            <p class="text-muted small mb-0">No items are currently running low.</p>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>

        <div class="col-lg-6">
            <div class="premium-card h-100">
                <div class="p-3 bg-light bg-opacity-50 border-bottom d-flex justify-content-between align-items-center">
                    <h6 class="mb-0 fw-bold text-dark d-flex align-items-center gap-2">
                        <i class="fas fa-ban text-danger"></i> Out of Stock
                    </h6>
                    <a href="{% url 'inventory:product_list' %}" class="btn btn-sm btn-outline-danger text-danger fw-medium rounded-pill px-3">
                        Restock
                    </a>
                </div>
                <div class="list-group list-group-flush p-0 m-0">
                    {% if out_of_stock_products %}
                        {% for product in out_of_stock_products %}
                            <div class="premium-list-item d-flex justify-content-between align-items-center">
                                <div>
                                    <div class="fw-bold text-dark mb-1">{{ product.name }}</div>
                                    <div class="text-muted small fw-medium text-uppercase">{{ product.sku }}</div>
                                </div>
                                <div>
                                    <span class="badge rounded-pill bg-danger px-3 py-2 fw-bold shadow-sm">
                                        Empty
                                    </span>
                                </div>
                            </div>
                        {% endfor %}
                    {% else %}
                        <div class="text-center py-5">
                            <div class="premium-icon-wrap mx-auto mb-3" style="background: rgba(16, 185, 129, 0.1); color: #10b981; width: 64px; height: 64px; font-size: 2rem;">
                                <i class="fas fa-box-open"></i>
                            </div>
                            <h6 class="fw-bold text-dark mb-1">Fully Stocked</h6>
                            <p class="text-muted small mb-0">You have no empty products.</p>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}