{% extends "industry_reforged/base.html" %}
{% load i18n humanize %}

{% block details %}
<div class="container-fluid">
    <div class="row mb-3">
        <div class="col-12 d-flex justify-content-between align-items-center">
            <h3><i class="fas fa-chess-king"></i> {% trans "Director Control Panel" %}</h3>
            <div>
                <a href="{% url 'industry_reforged:director_inventory' %}" class="btn btn-primary"><i class="fas fa-boxes"></i>
                    Inventory Analytics</a>
                <a href="{% url 'industry_reforged:director_wallets' %}" class="btn btn-primary"><i class="fas fa-wallet"></i>
                    Wallets</a>
                <a href="{% url 'industry_reforged:director_config' %}" class="btn btn-success"><i class="fas fa-cogs"></i>
                    Configurations</a>
            </div>
        </div>
    </div>


    <div class="card border-0 mb-4">
        <div class="card-header p-0 border-bottom-0">
            <ul class="nav nav-tabs" id="director-tabs" role="tablist">
                <li class="nav-item" role="presentation">
                    <button class="nav-link active" id="orders-tab" data-bs-toggle="tab" data-bs-target="#orders-pane"
                        type="button" role="tab" aria-controls="orders-pane" aria-selected="true">
                        <i class="fas fa-shopping-cart"></i> Active Member Orders
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="tasks-tab" data-bs-toggle="tab" data-bs-target="#tasks-pane"
                        type="button" role="tab" aria-controls="tasks-pane" aria-selected="false">
                        <i class="fas fa-hammer"></i> Production Tasks
                    </button>
                </li>
            </ul>
        </div>
        <div class="card-body">
            <div class="tab-content" id="director-tabContent">
                <!-- Orders Tab -->
                <div class="tab-pane fade show active" id="orders-pane" role="tabpanel" aria-labelledby="orders-tab" tabindex="0">
                    <div class="table-responsive" style="max-height: 500px; overflow-y: auto;">
                        <table class="table table-striped table-hover m-0">
                            <thead>
                                <tr>
                                    <th>Order ID</th>
                                    <th>Character</th>
                                    <th>Total Price</th>
                                    <th>Status</th>
                                    <th>Progress</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for order in all_orders %}
                                <tr>
                                    <td>#{{ order.id }}</td>
                                    <td>{{ order.character.character_name }}</td>
                                    <td class="numeric text-warning text-end">{{order.total_price|floatformat:2|intcomma }} ISK</td>
                                    <td><span class="badge bg-secondary">{{ order.get_status_display }}</span></td>
                                    <td>
                                        <div class="progress mt-1"
                                            >
                                            <div class="progress-bar bg-success" role="progressbar"
                                                style="width: {{ order.progress_percent }}%; box-shadow: 0 0 8px #28a745;">

                                            </div>
                                        </div>
                                        <small class="numeric">{{ order.progress_percent|floatformat:2 }}%</small>
                                    </td>
                                    <td>
                                        <a href="{% url 'industry_reforged:view_quote' order.id %}" class="btn btn-sm btn-primary"><i class="fas fa-eye"></i> View</a>
                                    </td>
                                </tr>
                                {% empty %}
                                <tr>
                                    <td colspan="6" class="text-center">No orders found.</td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>

                <!-- Tasks Tab -->
                <div class="tab-pane fade" id="tasks-pane" role="tabpanel" aria-labelledby="tasks-tab" tabindex="0">
                    <div class="table-responsive" style="max-height: 500px; overflow-y: auto;">
                        <table class="table table-striped table-hover m-0">
                            <thead>
                                <tr>
                                    <th>Item</th>
                                    <th>Quantity</th>
                                    <th>Status</th>
                                    <th>Priority</th>
                                    <th>Assigned To</th>
                                    <th>Hidden</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for task in all_tasks %}
                                <tr>
                                    <td>{{ task.item_type.name }}</td>
                                    <td class="numeric">{{ task.quantity }}</td>
                                    <td><span class="badge bg-secondary">{{ task.get_status_display }}</span></td>
                                    <td>
                                        <span
                                            class="badge {% if task.priority == 'HIGH' %}bg-danger{% elif task.priority == 'NORMAL' %}bg-primary{% else %}bg-secondary{% endif %}">
                                            {{ task.priority }}
                                        </span>
                                    </td>
                                    <td>{{ task.assigned_to.character_name|default:"-" }}</td>
                                    <td>{% if task.hidden %}<i class="fas fa-eye-slash text-danger"></i>{% else %}<i
                                            class="fas fa-eye text-success"></i>{% endif %}</td>
                                </tr>
                                {% empty %}
                                <tr>
                                    <td colspan="6" class="text-center">No tasks found.</td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}
