{% extends "base.html" %}
{% load i18n static %}

{% block title %}{% trans "Vendor Dashboard" %}{% endblock %}

{% block content %}
<div class="container py-5">
  <div class="d-flex justify-content-between align-items-center mb-5">
    <div>
      <h1 class="fw-bold mb-1">{{ vendor.business_name }}</h1>
      <p class="text-muted mb-0">{% trans "Manage your products and orders" %}</p>
    </div>
    <a href="{% url 'admin:core_product_add' %}" class="btn btn-primary">
      <i class="bi bi-plus-lg"></i> {% trans "Add New Product" %}
    </a>
  </div>

  <div class="row g-4">
    <!-- Products Summary -->
    <div class="col-md-4">
      <div class="card border-0 shadow-sm p-4 text-center">
        <h6 class="text-muted text-uppercase small fw-bold mb-2">{% trans "Total Products" %}</h6>
        <h2 class="fw-bold mb-0">{{ products.count }}</h2>
      </div>
    </div>
    <!-- Orders Summary -->
    <div class="col-md-4">
      <div class="card border-0 shadow-sm p-4 text-center">
        <h6 class="text-muted text-uppercase small fw-bold mb-2">{% trans "Total Orders" %}</h6>
        <h2 class="fw-bold mb-0">{{ orders.count }}</h2>
      </div>
    </div>
    <!-- Status -->
    <div class="col-md-4">
      <div class="card border-0 shadow-sm p-4 text-center">
        <h6 class="text-muted text-uppercase small fw-bold mb-2">{% trans "Status" %}</h6>
        {% if vendor.is_verified %}
          <span class="badge bg-success py-2 px-3">{% trans "Verified" %}</span>
        {% else %}
          <span class="badge bg-warning text-dark py-2 px-3">{% trans "Pending Verification" %}</span>
        {% endif %}
      </div>
    </div>
  </div>

  <div class="mt-5">
    <ul class="nav nav-tabs mb-4" id="dashboardTabs" role="tablist">
      <li class="nav-item" role="presentation">
        <button class="nav-link active" id="products-tab" data-bs-toggle="tab" data-bs-target="#products" type="button" role="tab">{% trans "Your Products" %}</button>
      </li>
      <li class="nav-item" role="presentation">
        <button class="nav-link" id="orders-tab" data-bs-toggle="tab" data-bs-target="#orders" type="button" role="tab">{% trans "Recent Orders" %}</button>
      </li>
    </ul>
    
    <div class="tab-content" id="dashboardTabsContent">
      <div class="tab-pane fade show active" id="products" role="tabpanel">
        <div class="table-responsive">
          <table class="table align-middle">
            <thead>
              <tr>
                <th>{% trans "Product" %}</th>
                <th>{% trans "Category" %}</th>
                <th>{% trans "Price" %}</th>
                <th>{% trans "Status" %}</th>
                <th>{% trans "Actions" %}</th>
              </tr>
            </thead>
            <tbody>
              {% for product in products %}
              <tr>
                <td>{{ product.name }}</td>
                <td>{{ product.category.name }}</td>
                <td>{{ product.price }} ETB</td>
                <td>
                  {% if product.is_available %}
                    <span class="badge bg-success">{% trans "Available" %}</span>
                  {% else %}
                    <span class="badge bg-danger">{% trans "Out of Stock" %}</span>
                  {% endif %}
                </td>
                <td>
                  <a href="{% url 'admin:core_product_change' product.id %}" class="btn btn-sm btn-outline-secondary">{% trans "Edit" %}</a>
                </td>
              </tr>
              {% empty %}
              <tr>
                <td colspan="5" class="text-center py-4">{% trans "No products found." %}</td>
              </tr>
              {% endfor %}
            </tbody>
          </table>
        </div>
      </div>
      <div class="tab-pane fade" id="orders" role="tabpanel">
        <div class="table-responsive">
          <table class="table align-middle">
            <thead>
              <tr>
                <th>{% trans "Order ID" %}</th>
                <th>{% trans "Product" %}</th>
                <th>{% trans "Customer" %}</th>
                <th>{% trans "Total" %}</th>
                <th>{% trans "Status" %}</th>
              </tr>
            </thead>
            <tbody>
              {% for item in orders %}
              <tr>
                <td>#{{ item.order.id }}</td>
                <td>{{ item.product.name }}</td>
                <td>{{ item.order.full_name }}</td>
                <td>{{ item.total_price }} ETB</td>
                <td>{{ item.order.status }}</td>
              </tr>
              {% empty %}
              <tr>
                <td colspan="5" class="text-center py-4">{% trans "No orders found." %}</td>
              </tr>
              {% endfor %}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}