{% extends "admin/base_site.html" %}

{% block content %}
<h1 style="margin-bottom: 20px;">📦 Admin Stock</h1>

<!-- Total Sales -->
<div style="padding: 20px; margin-bottom: 30px; background:#f8f9fa; border-radius:10px; box-shadow:0 2px 5px rgba(0,0,0,0.1);">
  <h2 style="color:#333;">💰 Total Sales Today: <span style="color:green;">KSh {{ total_sales_today }}</span></h2>
</div>

<!-- 🌍 Global Stock Totals -->
<h2 style="margin-top: 20px;">🌍 Global Stock Totals</h2>
<div style="display:flex; flex-wrap:wrap; gap:15px; margin-bottom:30px;">
  {% for stock in global_stock %}
    <div style="width:160px; height:100px; border-radius:10px;
                background:#007bff; color:white; font-weight:bold; display:flex;
                flex-direction:column; align-items:center; justify-content:center;
                box-shadow:0 2px 5px rgba(0,0,0,0.2);">
      <div>{{ stock.product__name }}</div>
      <div style="font-size:20px;">{{ stock.total_qty }}</div>
    </div>
  {% empty %}
    <p>No global stock data available.</p>
  {% endfor %}
</div>

<!-- 🏪 Per Location -->
<h2>🏪 Stock Per Location</h2>
<div style="display:flex; flex-wrap:wrap; gap:20px;">
  {% for stock in stock_levels %}
    <div style="width:140px; height:140px; border-radius:50%;
                display:flex; flex-direction:column; align-items:center; justify-content:center;
                {% if stock.quantity > 20 %}
                  background-color:green;
                {% elif stock.quantity > 10 %}
                  background-color:orange;
                {% else %}
                  background-color:red;
                {% endif %}
                color:white; font-weight:bold; text-align:center; box-shadow:0 2px 5px rgba(0,0,0,0.2);">
      <div style="font-size:14px;">{{ stock.product.name }}</div>
      <div style="font-size:20px;">{{ stock.quantity }}</div>
      <div style="font-size:12px;">{{ stock.location.name }}</div>
    </div>
  {% empty %}
    <p>No stock data available.</p>
  {% endfor %}
</div>

{% endblock %}