{% 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">
            <div>
                <h3 class="mb-0"><i class="fas fa-shopping-cart"></i> {% trans "Consolidated Shopping List" %}</h3>
                {% if custom_item_name %}
                    <h5 class="text-info mt-2 mb-0">{% trans "For:" %} {{ custom_item_name }} (x{{ custom_item_quantity }})</h5>
                {% endif %}
            </div>
            <div>
                <button onclick="copyMultibuy()" class="btn btn-warning me-2" id="copyBtn"><i class="fas fa-copy"></i> {% trans "Copy for EVE Multibuy" %}</button>
                <a href="javascript:history.back()" class="btn btn-primary"><i class="fas fa-arrow-left"></i> {% trans "Back" %}</a>
            </div>
        </div>
    </div>



    <div class="card border-0 mb-4 bg-dark h-100">
        <div class="card-header border-bottom border-secondary d-flex justify-content-between align-items-center">
            <h3 class="card-title text-white mb-0">{% trans "Bill of Materials Overview" %}</h3>
            <span class="badge bg-primary fs-6">{{ bom_materials|length }} Materials</span>
        </div>
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-striped table-dark m-0">
                    <thead>
                        <tr>
                            <th>{% trans "Material" %}</th>
                            <th class="text-end">{% trans "Total Quantity Required" %}</th>
                            <th class="text-end">{% trans "Est. Jita Unit Price" %}</th>
                            <th class="text-end">{% trans "Est. Total Cost" %}</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for mat in bom_materials %}
                        <tr>
                            <td>
                                <div class="d-flex align-items-center">
                                    <img onerror="this.onerror=null; this.src='https://images.evetech.net/types/3514/icon?size=32';" src="https://images.evetech.net/types/{{ mat.type_id }}/icon?size=32" alt="{{ mat.name }}" width="24" height="24" class="me-2 rounded">
                                    <span>{{ mat.name }}</span>
                                </div>
                            </td>
                            <td class="text-end numeric">{{ mat.quantity|intcomma }}</td>
                            <td class="text-end numeric text-muted">{{ mat.price_per_unit|floatformat:2|intcomma }} ISK</td>
                            <td class="text-end numeric text-warning">{{ mat.total_price|floatformat:2|intcomma }} ISK</td>
                        </tr>
                        {% empty %}
                        <tr><td colspan="4" class="text-center py-4">No materials found.</td></tr>
                        {% endfor %}
                    </tbody>
                    <tfoot>
                        <tr>
                            <th colspan="3" class="text-end fs-4">{% trans "Estimated Total Materials Cost:" %}</th>
                            <th class="text-end fs-4 text-warning numeric">{{ total_bom_price|floatformat:2|intcomma }} ISK</th>
                        </tr>
                    </tfoot>
                </table>
            </div>
        </div>
    </div>
</div>

<textarea id="multibuyText" style="display:none;">{% for mat in bom_materials %}{{ mat.name }} {{ mat.quantity }}
{% endfor %}</textarea>

<script>
    function copyMultibuy() {
        var text = document.getElementById("multibuyText").value;
        navigator.clipboard.writeText(text).then(function() {
            var btn = document.getElementById("copyBtn");
            var oldHtml = btn.innerHTML;
            btn.innerHTML = '<i class="fas fa-check"></i> Copied!';
            btn.classList.remove('btn-warning');
            btn.classList.add('btn-success');
            setTimeout(function() {
                btn.innerHTML = oldHtml;
                btn.classList.remove('btn-success');
                btn.classList.add('btn-warning');
            }, 2000);
        });
    }
</script>
{% endblock %}