{% 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-amarr"><i class="fas fa-boxes"></i>
                    Inventory Analytics</a>
                <a href="{% url 'industry_reforged:director_config' %}" class="btn btn-amarr-solid"><i class="fas fa-cogs"></i>
                    Configurations</a>
            </div>
        </div>
    </div>

    <!-- Active Orders Management -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card border-0 mb-4">
                <div class="card-header">
                    <h4 class="card-title mb-0">{% trans "Active Member Orders" %}</h4>
                </div>
                <div class="card-body p-0" style="max-height: 400px; overflow-y: auto;">
                    <div class="table-responsive">
                        <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 badge-glass">{{ order.get_status_display }}</span></td>
                                    <td>
                                        <div class="progress mt-1"
                                            style="height: 5px; background-color: rgba(255,255,255,0.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>
                                        <!-- In a real scenario, this would post to a view to manage the order -->
                                        <button class="btn btn-sm btn-outline-danger"><i class="fas fa-times"></i>
                                            Cancel</button>
                                    </td>
                                </tr>
                                {% empty %}
                                <tr>
                                    <td colspan="6" class="text-center">No orders found.</td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Production Tasks Management -->
    <div class="row">
        <div class="col-12">
            <div class="card border-0 mb-4">
                <div class="card-header">
                    <h4 class="card-title mb-0">{% trans "Production Task Management" %}</h4>
                </div>
                <div class="card-body p-0" style="max-height: 400px; overflow-y: auto;">
                    <div class="table-responsive">
                        <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 badge-glass">{{ task.get_status_display }}</span></td>
                                    <td>
                                        <span
                                            class="badge {% if task.priority == 'HIGH' %}bg-danger{% elif task.priority == 'NORMAL' %}badge-amarr{% else %}badge-glass{% 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 %}