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

{% block content %}
<div class="container mt-4">
    <h2 class="mb-4">Management Dashboard</h2>
    {% if pending_offer_count and pending_offer_count > 0 %}
        <div class="alert alert-warning d-flex justify-content-between align-items-center">
            <div>
                <strong>{{ pending_offer_count }}</strong> pending offer request{{ pending_offer_count|pluralize }} need review.
            </div>
            <a href="#offers" class="btn btn-sm btn-outline-dark" data-bs-toggle="tab">Go to Offers</a>
        </div>
    {% endif %}

    {% if accepted_offer_count or declined_offer_count %}
        <div class="alert alert-secondary d-flex flex-wrap gap-3 align-items-center mb-4">
            <div>
                <strong>{{ accepted_offer_count }}</strong> offer{{ accepted_offer_count|pluralize }} accepted
            </div>
            <div>
                <strong>{{ declined_offer_count }}</strong> offer{{ declined_offer_count|pluralize }} declined
            </div>
            <div class="ms-auto">
                <small class="text-muted">Updated in real time on dashboard load.</small>
            </div>
        </div>
    {% endif %}

    <!-- Nav tabs -->
    <ul class="nav nav-tabs" id="managementTabs" role="tablist">
        <li class="nav-item" role="presentation">
            <button class="nav-link active" id="orders-tab" data-bs-toggle="tab" data-bs-target="#orders" type="button" role="tab" aria-controls="orders" aria-selected="true">
                <i class="fas fa-shopping-cart"></i> Orders
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="transactions-tab" data-bs-toggle="tab" data-bs-target="#transactions" type="button" role="tab" aria-controls="transactions" aria-selected="false">
                <i class="fas fa-exchange-alt"></i> Transactions
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="wallet-tab" data-bs-toggle="tab" data-bs-target="#wallet" type="button" role="tab" aria-controls="wallet" aria-selected="false">
                <i class="fas fa-wallet"></i> Wallet
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="tickets-tab" data-bs-toggle="tab" data-bs-target="#tickets" type="button" role="tab" aria-controls="tickets" aria-selected="false">
                <i class="fas fa-ticket-alt"></i> Tickets
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="offers-tab" data-bs-toggle="tab" data-bs-target="#offers" type="button" role="tab" aria-controls="offers" aria-selected="false">
                <i class="fas fa-tags"></i> Offers
                {% if pending_offer_count and pending_offer_count > 0 %}
                    <span class="badge bg-danger ms-2">{{ pending_offer_count }}</span>
                {% endif %}
            </button>
        </li>
    </ul>

    <!-- Tab content -->
    <div class="tab-content mt-4" id="managementTabsContent">
        <!-- Orders Tab -->
        <div class="tab-pane fade show active" id="orders" role="tabpanel" aria-labelledby="orders-tab">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">Order Management</h5>
                </div>
                <div class="card-body">
                    <p>Manage customer orders here. View, process, and track orders.</p>
                    <!-- Add order management content here -->
                    <div class="alert alert-info">
                        <i class="fas fa-info-circle"></i> Orders tab content will be populated with order data and management tools.
                    </div>
                </div>
            </div>
        </div>

        <!-- Transactions Tab -->
        <div class="tab-pane fade" id="transactions" role="tabpanel" aria-labelledby="transactions-tab">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">Transaction History</h5>
                </div>
                <div class="card-body">
                    <p>View and manage all transactions including payments, refunds, and transfers.</p>
                    <!-- Add transaction management content here -->
                    <div class="alert alert-info">
                        <i class="fas fa-info-circle"></i> Transactions tab content will be populated with transaction logs and analytics.
                    </div>
                </div>
            </div>
        </div>

        <!-- Wallet Tab -->
        <div class="tab-pane fade" id="wallet" role="tabpanel" aria-labelledby="wallet-tab">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">Wallet Management</h5>
                </div>
                <div class="card-body">
                    <p>Manage wallet balances, top-ups, and withdrawals.</p>
                    <!-- Add wallet management content here -->
                    <div class="alert alert-info">
                        <i class="fas fa-info-circle"></i> Wallet tab content will be populated with balance information and wallet operations.
                    </div>
                </div>
            </div>
        </div>

        <!-- Tickets Tab -->
        <div class="tab-pane fade" id="tickets" role="tabpanel" aria-labelledby="tickets-tab">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">Support Tickets</h5>
                </div>
                <div class="card-body">
                    <p>Handle customer support tickets and inquiries.</p>
                    <!-- Add ticket management content here -->
                    <div class="alert alert-info">
                        <i class="fas fa-info-circle"></i> Tickets tab content will be populated with support ticket management interface.
                    </div>
                </div>
            </div>
        </div>

        <!-- Offers Tab -->
        <div class="tab-pane fade" id="offers" role="tabpanel" aria-labelledby="offers-tab">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">Offer Requests</h5>
                </div>
                <div class="card-body">
                    <p>Review customer offers and update their status.</p>
                    {% if offers %}
                        <div class="table-responsive">
                            <table class="table table-hover align-middle">
                                <thead>
                                    <tr>
                                        <th>#</th>
                                        <th>Customer</th>
                                        <th>Product</th>
                                        <th>Offer</th>
                                        <th>Status</th>
                                        <th>Submitted</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for offer in offers %}
                                        <tr>
                                            <td>{{ offer.id }}</td>
                                            <td>{{ offer.user.username }}</td>
                                            <td>{{ offer.product.name }}</td>
                                            <td>{{ offer.offered_price|floatformat:2 }}</td>
                                            <td>
                                                <span class="badge bg-{% if offer.status == 'Pending' %}warning{% elif offer.status == 'Accepted' %}success{% else %}danger{% endif %}">
                                                    {{ offer.status }}
                                                </span>
                                            </td>
                                            <td>{{ offer.created_at|date:'d M Y H:i' }}</td>
                                            <td>
                                                <a href="{% url 'shop:admin_offer_requests' %}#offer-{{ offer.id }}" class="btn btn-sm btn-outline-primary">Review</a>
                                            </td>
                                        </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    {% else %}
                        <div class="alert alert-info">
                            No offer requests have been submitted yet.
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}