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

{% 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-shopping-cart"></i> {% trans "Member Orders Dashboard" %}</h3>
            <a href="{% url 'industry_reforged:create_order' %}" class="btn btn-success"><i class="fas fa-plus"></i> {% trans "New Order" %}</a>
        </div>
    </div>



    <div class="card border-0 mb-4">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h4 class="card-title mb-0">{% trans "My Active Orders" %}</h3>
            <button type="submit" form="shoppingListForm" class="btn btn-sm btn-warning"><i class="fas fa-shopping-cart"></i> {% trans "Generate Shopping List" %}</button>
        </div>
        <div class="card-body p-0">
            <form id="shoppingListForm" method="GET" action="{% url 'industry_reforged:shopping_list' %}">
                <div class="table-responsive">
                    <table class="table table-striped table-hover m-0">
                        <thead>
                            <tr>
                                <th style="width: 40px;" class="text-center"><input type="checkbox" id="selectAllOrders" onclick="toggleSelectAll(this)"></th>
                                <th>{% trans "Order ID" %}</th>
                                <th>{% trans "Character" %}</th>
                                <th>{% trans "Status" %}</th>
                                <th class="text-end">{% trans "Total Price" %}</th>
                                <th class="text-end">{% trans "Created" %}</th>
                                <th class="text-end">{% trans "Actions" %}</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for order in orders %}
                            <tr>
                                <td class="text-center">
                                    <input type="checkbox" name="order_ids" value="{{ order.id }}" class="order-checkbox">
                                </td>
                                <td class="numeric">#{{ order.id }}</td>
                                <td>{{ order.character.character_name }}</td>
                                <td>
                                    <div>
                                        {% if order.status == 'REQUESTED' %}<span class="badge bg-secondary">Requested</span>
                                        {% elif order.status == 'QUOTED' %}<span class="badge bg-primary">Quoted</span>
                                        {% elif order.status == 'ACCEPTED' %}<span class="badge bg-primary">Accepted</span>
                                        {% elif order.status == 'IN_PRODUCTION' %}<span class="badge bg-warning">In Production</span>
                                        {% elif order.status == 'READY' %}<span class="badge bg-primary">Ready</span>
                                        {% elif order.status == 'DELIVERED' %}<span class="badge bg-success">Delivered</span>
                                        {% elif order.status == 'REJECTED' %}<span class="badge bg-danger">Rejected</span>
                                        {% endif %}
                                    </div>
                                    {% if order.production_tasks.exists %}
                                    <div class="progress mt-1" title="{{ order.progress_percent }}% Completed">
                                        <div class="progress-bar bg-success" role="progressbar" style="width: {{ order.progress_percent }}%; box-shadow: 0 0 8px #28a745;" aria-valuenow="{{ order.progress_percent }}" aria-valuemin="0" aria-valuemax="100"></div>
                                    </div>
                                    {% endif %}
                                </td>
                                <td class="text-end numeric text-warning">{{ order.total_price|eve_isk }}</td>
                                <td class="text-end numeric">{{ order.created_at|date:"Y-m-d H:i" }}</td>
                                <td class="text-end">
                                    <a href="{% url 'industry_reforged:view_quote' order.id %}" class="btn btn-sm btn-primary show-loader"><i class="fas fa-eye"></i> {% trans "View" %}</a>
                                    {% if order.status == 'REQUESTED' or order.status == 'QUOTED' %}
                                    <button type="button" class="btn btn-sm btn-danger ms-1" data-bs-toggle="modal" data-bs-target="#deleteOrderModal" data-bs-delete-url="{% url 'industry_reforged:delete_order' order.id %}"><i class="fas fa-trash"></i></button>
                                    {% endif %}
                                </td>
                            </tr>
                            {% empty %}
                            <tr>
                                <td colspan="7" class="text-center">{% trans "You have no orders yet." %}</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </form>
        </div>
    </div>
</div>

<div class="modal fade" id="deleteOrderModal" tabindex="-1" aria-labelledby="deleteOrderModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="deleteOrderModalLabel">{% trans "Confirm Deletion" %}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                {% trans "Are you sure you want to delete this order? This action cannot be undone." %}
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{% trans "Cancel" %}</button>
                <a href="#" id="confirmDeleteOrderBtn" class="btn btn-danger">{% trans "Delete Order" %}</a>
            </div>
        </div>
    </div>
</div>

<script>
    function toggleSelectAll(source) {
        checkboxes = document.getElementsByClassName('order-checkbox');
        for(var i=0, n=checkboxes.length;i<n;i++) {
            checkboxes[i].checked = source.checked;
        }
    }

    var deleteOrderModal = document.getElementById('deleteOrderModal')
    if (deleteOrderModal) {
        deleteOrderModal.addEventListener('show.bs.modal', function (event) {
            var button = event.relatedTarget
            var deleteUrl = button.getAttribute('data-bs-delete-url')
            var confirmBtn = deleteOrderModal.querySelector('#confirmDeleteOrderBtn')
            confirmBtn.setAttribute('href', deleteUrl)
        })
    }
</script>
{% endblock %}