{% extends 'base.html' %}
{% load static %}

{% block title %}Vendor Dashboard - {{ vendor.business_name }}{% endblock %}

{% block content %}
<div class="container py-5">
    <div class="row mb-5 align-items-center">
        <div class="col-md-8">
            <h1 class="fw-bold mb-0">Welcome, {{ vendor.business_name }}</h1>
            <p class="text-muted">Manage your products and track your orders from one place.</p>
        </div>
        <div class="col-md-4 text-md-end">
            <a href="{% url 'vendor_product_add' %}" class="btn btn-primary rounded-pill px-4">
                <i class="bi bi-plus-lg me-2"></i> Add New Product
            </a>
        </div>
    </div>

    <!-- Stats Row -->
    <div class="row g-4 mb-5">
        <div class="col-md-3">
            <div class="card border-0 shadow-sm p-4">
                <div class="d-flex align-items-center">
                    <div class="bg-primary-subtle text-primary rounded-circle p-3 me-3">
                        <i class="bi bi-box-seam fs-4"></i>
                    </div>
                    <div>
                        <h3 class="fw-bold mb-0">{{ products.count }}</h3>
                        <small class="text-muted">Active Products</small>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card border-0 shadow-sm p-4">
                <div class="d-flex align-items-center">
                    <div class="bg-success-subtle text-success rounded-circle p-3 me-3">
                        <i class="bi bi-cart-check fs-4"></i>
                    </div>
                    <div>
                        <h3 class="fw-bold mb-0">{{ order_items.count }}</h3>
                        <small class="text-muted">Total Sales</small>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card border-0 shadow-sm p-4">
                <div class="d-flex align-items-center">
                    <div class="bg-warning-subtle text-warning rounded-circle p-3 me-3">
                        <i class="bi bi-clock-history fs-4"></i>
                    </div>
                    <div>
                        <h3 class="fw-bold mb-0">{% if not vendor.is_verified %}Pending{% else %}Verified{% endif %}</h3>
                        <small class="text-muted">Account Status</small>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card border-0 shadow-sm p-4">
                <div class="d-flex align-items-center">
                    <div class="bg-info-subtle text-info rounded-circle p-3 me-3">
                        <i class="bi bi-geo-alt fs-4"></i>
                    </div>
                    <div>
                        <h6 class="fw-bold mb-0 text-truncate">{{ vendor.address }}</h6>
                        <small class="text-muted">Business Location</small>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Tabs for Products and Orders -->
    <ul class="nav nav-tabs border-0 mb-4" id="dashboardTabs" role="tablist">
        <li class="nav-item" role="presentation">
            <button class="nav-link active fw-bold border-0 bg-transparent text-dark px-4 py-3 border-bottom-primary" id="products-tab" data-bs-toggle="tab" data-bs-target="#products" type="button" role="tab">
                My Products
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link fw-bold border-0 bg-transparent text-dark px-4 py-3" id="orders-tab" data-bs-toggle="tab" data-bs-target="#orders" type="button" role="tab">
                Recent Orders
            </button>
        </li>
    </ul>

    <div class="tab-content" id="dashboardTabsContent">
        <!-- Products Tab -->
        <div class="tab-pane fade show active" id="products" role="tabpanel">
            <div class="card border-0 shadow-sm overflow-hidden">
                <div class="table-responsive">
                    <table class="table table-hover align-middle mb-0">
                        <thead class="bg-light text-muted small text-uppercase">
                            <tr>
                                <th class="px-4 py-3">Product</th>
                                <th class="py-3">Category</th>
                                <th class="py-3">Price</th>
                                <th class="py-3">Stock</th>
                                <th class="py-3">Status</th>
                                <th class="py-3 text-end px-4">Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for product in products %}
                            <tr>
                                <td class="px-4 py-3">
                                    <div class="d-flex align-items-center">
                                        {% if product.image %}
                                        <img src="{{ product.image.url }}" alt="{{ product.name }}" class="rounded-3 me-3" style="width: 48px; height: 48px; object-fit: cover;">
                                        {% else %}
                                        <div class="bg-light rounded-3 me-3 d-flex align-items-center justify-content-center" style="width: 48px; height: 48px;">
                                            <i class="bi bi-image text-muted"></i>
                                        </div>
                                        {% endif %}
                                        <div>
                                            <h6 class="fw-bold mb-0">{{ product.name }}</h6>
                                            <small class="text-muted">Added {{ product.created_at|date:"M d, Y" }}</small>
                                        </div>
                                    </div>
                                </td>
                                <td class="py-3 text-muted">{{ product.category.name }}</td>
                                <td class="py-3 fw-bold text-primary">{{ product.price }} ETB</td>
                                <td class="py-3">
                                    <span class="badge {% if product.stock > 10 %}bg-success-subtle text-success{% elif product.stock > 0 %}bg-warning-subtle text-warning{% else %}bg-danger-subtle text-danger{% endif %} rounded-pill px-3">
                                        {{ product.stock }} in stock
                                    </span>
                                </td>
                                <td class="py-3">
                                    {% if product.is_available %}
                                    <span class="badge bg-success rounded-pill px-2">Visible</span>
                                    {% else %}
                                    <span class="badge bg-secondary rounded-pill px-2">Hidden</span>
                                    {% endif %}
                                </td>
                                <td class="py-3 text-end px-4">
                                    <div class="btn-group">
                                        <a href="{% url 'vendor_product_edit' product.pk %}" class="btn btn-outline-secondary btn-sm rounded-pill px-3 me-2">
                                            <i class="bi bi-pencil me-1"></i> Edit
                                        </a>
                                        <a href="{% url 'vendor_product_delete' product.pk %}" class="btn btn-outline-danger btn-sm rounded-pill px-3">
                                            <i class="bi bi-trash"></i>
                                        </a>
                                    </div>
                                </td>
                            </tr>
                            {% empty %}
                            <tr>
                                <td colspan="6" class="text-center py-5">
                                    <div class="mb-3 text-muted">
                                        <i class="bi bi-box-seam display-1"></i>
                                    </div>
                                    <h5>No products added yet</h5>
                                    <p class="text-muted">Start selling by adding your first product to the marketplace.</p>
                                    <a href="{% url 'vendor_product_add' %}" class="btn btn-primary rounded-pill">Add Product</a>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <!-- Orders Tab -->
        <div class="tab-pane fade" id="orders" role="tabpanel">
            <div class="card border-0 shadow-sm overflow-hidden">
                <div class="table-responsive">
                    <table class="table table-hover align-middle mb-0">
                        <thead class="bg-light text-muted small text-uppercase">
                            <tr>
                                <th class="px-4 py-3">Order ID</th>
                                <th class="py-3">Customer</th>
                                <th class="py-3">Product</th>
                                <th class="py-3">Total</th>
                                <th class="py-3">Status</th>
                                <th class="py-3 text-end px-4">Update Status</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for item in order_items %}
                            <tr>
                                <td class="px-4 py-3 fw-bold">#ORD-{{ item.order.id }}</td>
                                <td class="py-3">
                                    <div class="fw-bold">{{ item.order.full_name }}</div>
                                    <small class="text-muted">{{ item.order.phone }}</small>
                                </td>
                                <td class="py-3">
                                    <div class="text-truncate" style="max-width: 200px;">{{ item.product.name }}</div>
                                    <small class="text-muted">Qty: {{ item.quantity }}</small>
                                </td>
                                <td class="py-3 fw-bold text-primary">{{ item.total_price }} ETB</td>
                                <td class="py-3">
                                    <span class="badge rounded-pill px-3 {% if item.order.status == 'Delivered' %}bg-success{% elif item.order.status == 'Processing' %}bg-info{% elif item.order.status == 'Shipped' %}bg-primary{% elif item.order.status == 'Cancelled' %}bg-danger{% else %}bg-warning{% endif %}">
                                        {{ item.order.status }}
                                    </span>
                                </td>
                                <td class="py-3 text-end px-4">
                                    <form action="{% url 'vendor_order_status_update' item.order.id %}" method="POST" class="d-inline-flex gap-2">
                                        {% csrf_token %}
                                        <select name="status" class="form-select form-select-sm rounded-pill" style="width: auto;">
                                            <option value="Pending" {% if item.order.status == 'Pending' %}selected{% endif %}>Pending</option>
                                            <option value="Processing" {% if item.order.status == 'Processing' %}selected{% endif %}>Processing</option>
                                            <option value="Shipped" {% if item.order.status == 'Shipped' %}selected{% endif %}>Shipped</option>
                                            <option value="Delivered" {% if item.order.status == 'Delivered' %}selected{% endif %}>Delivered</option>
                                            <option value="Cancelled" {% if item.order.status == 'Cancelled' %}selected{% endif %}>Cancelled</option>
                                        </select>
                                        <button type="submit" class="btn btn-sm btn-dark rounded-pill px-3">Update</button>
                                    </form>
                                </td>
                            </tr>
                            {% empty %}
                            <tr>
                                <td colspan="6" class="text-center py-5">
                                    <div class="mb-3 text-muted">
                                        <i class="bi bi-cart-x display-1"></i>
                                    </div>
                                    <h5>No orders yet</h5>
                                    <p class="text-muted">Once customers purchase your products, they will appear here.</p>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    .border-bottom-primary {
        border-bottom: 3px solid #0d6efd !important;
    }
    .nav-tabs .nav-link:hover {
        border-color: transparent;
        color: #0d6efd !important;
    }
</style>
{% endblock %}
