{% extends 'base.html' %}

{% block title %}Dashboard - Admin{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <h2><i class="fas fa-tachometer-alt"></i> Admin Dashboard</h2>
    <div>
        <span class="badge bg-success"><i class="fas fa-user-shield"></i> System Administrator</span>
    </div>
</div>

<!-- Stats Overview -->
<div class="row">
    <div class="col-md-3">
        <div class="card stat-card">
            <div class="card-body">
                <div class="stat-value">{{ total_products }}</div>
                <div class="stat-label">Total Products</div>
                <i class="fas fa-tags fa-2x text-primary mt-2"></i>
            </div>
        </div>
    </div>
    
    <div class="col-md-3">
        <div class="card stat-card">
            <div class="card-body">
                <div class="stat-value">GH₵ {{ total_inventory_value|floatformat:2 }}</div>
                <div class="stat-label">Warehouse Value</div>
                <i class="fas fa-warehouse fa-2x text-success mt-2"></i>
            </div>
        </div>
    </div>
    
    <div class="col-md-3">
        <div class="card stat-card">
            <div class="card-body">
                <div class="stat-value">{{ total_shops }}</div>
                <div class="stat-label">Total Shops</div>
                <i class="fas fa-store fa-2x text-warning mt-2"></i>
            </div>
        </div>
    </div>
    
    <div class="col-md-3">
        <div class="card stat-card">
            <div class="card-body">
                <div class="stat-value">{{ low_stock_count }}</div>
                <div class="stat-label">Low Stock Items</div>
                <i class="fas fa-exclamation-triangle fa-2x text-danger mt-2"></i>
            </div>
        </div>
    </div>
</div>

<!-- Main Content -->
<div class="row mt-4">
    <!-- Low Stock Alerts -->
    <div class="col-md-6">
        <div class="card">
            <div class="card-header">
                <h5><i class="fas fa-exclamation-circle text-warning"></i> Low Stock Alerts</h5>
            </div>
            <div class="card-body">
                {% if low_stock_items %}
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>Product</th>
                                <th>Current Stock</th>
                                <th>Reorder Level</th>
                                <th>Status</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for item in low_stock_items %}
                            <tr>
                                <td>{{ item.product.name }}</td>
                                <td>
                                    <span class="badge bg-{% if item.available < 5 %}danger{% else %}warning{% endif %}">
                                        {{ item.available }}
                                    </span>
                                </td>
                                <td>{{ item.reorder_point }}</td>
                                <td>
                                    {% if item.available == 0 %}
                                    <span class="badge bg-danger">Out of Stock</span>
                                    {% else %}
                                    <span class="badge bg-warning">Low Stock</span>
                                    {% endif %}
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
                {% else %}
                <div class="text-center py-4">
                    <i class="fas fa-check-circle fa-3x text-success mb-3"></i>
                    <p class="text-muted">All products have sufficient stock</p>
                </div>
                {% endif %}
            </div>
        </div>
    </div>
    
    <!-- Recent Transfers -->
    <div class="col-md-6">
        <div class="card">
            <div class="card-header">
                <h5><i class="fas fa-truck-moving"></i> Recent Transfers</h5>
            </div>
            <div class="card-body">
                {% if recent_transfers %}
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>Transfer #</th>
                                <th>From</th>
                                <th>To</th>
                                <th>Status</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for transfer in recent_transfers %}
                            <tr>
                                <td>
                                    <a href="{% url 'transfer_detail' transfer.pk %}" class="text-decoration-none">
                                        {{ transfer.transfer_number }}
                                    </a>
                                </td>
                                <td>{{ transfer.from_shop.code }}</td>
                                <td>{{ transfer.to_shop.code }}</td>
                                <td>
                                    {% if transfer.status == 'pending' %}
                                    <span class="badge bg-warning">Pending</span>
                                    {% elif transfer.status == 'approved' %}
                                    <span class="badge bg-info">Approved</span>
                                    {% elif transfer.status == 'shipped' %}
                                    <span class="badge bg-primary">Shipped</span>
                                    {% elif transfer.status == 'delivered' %}
                                    <span class="badge bg-success">Delivered</span>
                                    {% endif %}
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
                {% else %}
                <div class="text-center py-4">
                    <i class="fas fa-info-circle fa-3x text-info mb-3"></i>
                    <p class="text-muted">No recent transfers</p>
                </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<!-- Quick Actions -->
<div class="row mt-4">
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <h5><i class="fas fa-bolt"></i> Quick Actions</h5>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-3 mb-3">
                        <a href="{% url 'create_sale' %}" class="btn btn-success btn-lg w-100 py-3">
                            <i class="fas fa-cash-register fa-2x mb-2"></i><br>
                            New Sale
                        </a>
                    </div>
                    <div class="col-md-3 mb-3">
                        <a href="{% url 'transfer_create' %}" class="btn btn-primary btn-lg w-100 py-3">
                            <i class="fas fa-truck-loading fa-2x mb-2"></i><br>
                            New Transfer
                        </a>
                    </div>
                    <div class="col-md-3 mb-3">
                        <a href="{% url 'product_create' %}" class="btn btn-info btn-lg w-100 py-3">
                            <i class="fas fa-plus-circle fa-2x mb-2"></i><br>
                            Add Product
                        </a>
                    </div>
                    <div class="col-md-3 mb-3">
                        <a href="{% url 'reports_dashboard' %}" class="btn btn-warning btn-lg w-100 py-3">
                            <i class="fas fa-chart-bar fa-2x mb-2"></i><br>
                            View Reports
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Shop Inventory Summary -->
<div class="row mt-4">
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <h5><i class="fas fa-chart-pie"></i> Shop Inventory Value</h5>
            </div>
            <div class="card-body">
                {% if shop_inventory_list %}
                <div class="table-responsive">
                    <table class="table">
                        <thead>
                            <tr>
                                <th>Shop</th>
                                <th>Type</th>
                                <th>Inventory Value</th>
                                <th>Status</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for shop in shop_inventory_list %}
                            <tr>
                                <td>
                                    <strong>{{ shop.name }}</strong><br>
                                    <small class="text-muted">{{ shop.code }}</small>
                                </td>
                                <td>
                                    {% if "RS" in shop.code %}
                                    <span class="badge bg-info">Retail</span>
                                    {% elif "WS" in shop.code %}
                                    <span class="badge bg-warning">Wholesale</span>
                                    {% else %}
                                    <span class="badge bg-secondary">{{ shop.code|slice:":2" }}</span>
                                    {% endif %}
                                </td>
                                <td>
                                    <strong>GH₵ {{ shop.value|floatformat:2 }}</strong>
                                </td>
                                <td>
                                    <span class="badge bg-success">Active</span>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
                {% else %}
                <div class="text-center py-4">
                    <i class="fas fa-store-slash fa-3x text-muted mb-3"></i>
                    <p class="text-muted">No shop inventory data available</p>
                </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>
{% endblock %}