{% extends "allianceauth/base-bs5.html" %}
{% load i18n %}
{% load static %}
{% load humanize %}

{% block page_title %}{{ bp_name }} - {% trans "Crafting Requirements" %}{% endblock page_title %}

{% block extra_css %}
<link rel="stylesheet" href="{% static 'indy_hub/css/blueprints.css' %}">
<link rel="stylesheet" href="{% static 'indy_hub/css/craft_bp.css' %}">
{% endblock extra_css %}

{% block content %}
<div class="container my-4 bg-body">
    <div class="blueprint-header mb-4">
        <div class="d-flex flex-wrap align-items-center justify-content-between gap-3">
            <div class="d-flex align-items-center gap-3">
                {% if product_type_id %}
                <span class="blueprint-icon" style="width:64px;height:64px;">
                    <img src="https://images.evetech.net/types/{{ product_type_id }}/icon?size=64" alt="{{ bp_name }}" style="width:64px;height:64px;object-fit:cover;border-radius:12px;background:#f3f4f6;" onerror="this.style.display='none';this.nextElementSibling.style.display='flex';">
                    <span class="fallback" style="display:none;"><i class="fas fa-industry"></i></span>
                </span>
                {% else %}
                <span class="blueprint-icon" style="width:64px;height:64px;">
                    <span class="fallback" style="display:flex;"><i class="fas fa-industry"></i></span>
                </span>
                {% endif %}
                <div>
                    <h1 class="h2 mb-1">
                        <i class="fas fa-tools me-2"></i>{{ bp_name }}
                    </h1>
                    <p class="mb-0 opacity-75">{% trans "Material requirements for blueprint production" %}</p>
                </div>
            </div>
            <div class="d-flex gap-2">
                <a href="{{ request.GET.next|default:request.META.HTTP_REFERER|default:'#' }}" class="btn btn-outline-light">
                    <i class="fas fa-arrow-left me-1"></i>{% trans "Back" %}
                </a>
            </div>
        </div>
        <i class="fas fa-industry header-bg"></i>
    </div>
    <div class="mb-3">
        <div class="card bg-light border-light">
            <div class="card-body py-2 px-3">
                <form method="get" class="mb-0">
            <div class="input-group input-group-sm">
                <span class="input-group-text fw-bold">{% trans "Runs" %}</span>
                <input type="number" min="1" name="runs" id="runsInput" value="{{ num_runs|default:1 }}" class="form-control">
                <span class="input-group-text fw-bold">ME</span>
                <input type="number" min="0" max="10" name="me" id="meInput" value="{{ me }}" class="form-control">
                <span class="input-group-text fw-bold">TE</span>
                <input type="number" min="0" max="20" name="te" id="teInput" value="{{ te }}" class="form-control">
                <button class="btn btn-primary" type="submit"><i class="fas fa-sync-alt me-1"></i>{% trans "Update" %}</button>
            </div>
            {% if request.GET.next %}
                <input type="hidden" name="next" value="{{ request.GET.next|escape }}">
            {% endif %}
            <!-- Preserve active tab -->
            <input type="hidden" name="active_tab" id="activeTabInput" value="{{ request.GET.active_tab|default:'materials' }}">
                </form>
            </div>
        </div>
    </div>
    <div style="color: #fff; background: #c00; font-size: 2rem; font-weight: bold; text-align: center; padding: 1rem; margin-bottom: 2rem; border-radius: 0.5rem;">
    🚧 IN ACTIVE DEVELOPMENT / DO NOT USE 🚧
    </div>
    {# Tabs to switch between required materials and full production tree #}
    <ul class="nav nav-pills nav-justified mb-4" role="tablist">
        <li class="nav-item" role="presentation">
            <button class="nav-link active" id="materials-tab" data-bs-toggle="tab" data-bs-target="#tab-materials" type="button" role="tab">
                <i class="fas fa-cubes me-2"></i>{% trans "Required Materials" %}
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="tree-tab" data-bs-toggle="tab" data-bs-target="#tab-tree" type="button" role="tab">
                <i class="fas fa-sitemap me-2"></i>{% trans "Full Production Tree" %}
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="financial-tab" data-bs-toggle="tab" data-bs-target="#tab-financial" type="button" role="tab">
                <i class="fas fa-dollar-sign me-2"></i>{% trans "Financial" %}
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="needed-tab" data-bs-toggle="tab" data-bs-target="#tab-needed" type="button" role="tab">
                <i class="fas fa-shopping-cart me-2"></i>{% trans "Purchase List" %}
            </button>
        </li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane fade show active" id="tab-materials" role="tabpanel">
            <div class="card shadow-sm">
                <div class="card-header bg-light fw-bold d-flex align-items-center justify-content-between">
                    <span><i class="fas fa-cubes me-2"></i>{% trans "Required Materials" %}</span>
                </div>
                <div class="card-body p-0">
                    {% if materials %}
                    <table class="table table-striped mb-0">
                        <thead>
                            <tr>
                                <th></th>
                                <th>{% trans "Material" %}</th>
                                <th>{% trans "Quantity" %}</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for mat in materials %}
                            <tr>
                                <td style="width:48px;">
                                    <span class="blueprint-icon" style="width:40px;height:40px;">
                                        <img src="https://images.evetech.net/types/{{ mat.type_id }}/icon?size=32" alt="{{ mat.type_name }}" style="width:40px;height:40px;object-fit:cover;border-radius:8px;background:#f3f4f6;" onerror="this.style.display='none';this.nextElementSibling.style.display='flex';">
                                        <span class="fallback" style="display:none;"><i class="fas fa-cube"></i></span>
                                    </span>
                                </td>
                                <td>{{ mat.type_name }}</td>
                                <td class="text-end" data-qty="{{ mat.quantity }}">{{ mat.quantity }}</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                    {% else %}
                    <div class="p-4 text-center text-muted">{% trans "No materials found for this blueprint." %}</div>
                    {% endif %}
                </div>
            </div>
        </div>
        <div class="tab-pane fade" id="tab-tree" role="tabpanel">
            <div class="card shadow-sm mt-4">
                <div class="card-header bg-info text-white fw-bold">
                    <i class="fas fa-sitemap me-2"></i>{% trans "Full Production Tree" %}
                </div>
                <div class="card-body p-0">
                    {% if materials_tree %}
                        <div class="p-3">
                            {% include "indy_hub/material_tree.html" with materials=materials_tree level=0 %}
                        </div>
                    {% else %}
                        <div class="p-4 text-center text-muted">{% trans "No sub-productions detected for this blueprint." %}</div>
                    {% endif %}
                </div>
            </div>
        </div>
        <div class="tab-pane fade" id="tab-financial" role="tabpanel">
            <div class="card shadow-sm">
                <div class="card-header bg-success text-white fw-bold d-flex align-items-center justify-content-between">
                    <span><i class="fas fa-file-invoice-dollar me-2"></i>{% trans "Invoice / Financial Analysis" %}</span>
                </div>
                <div class="card-body p-3">
                    <div class="invoice-box p-3">
                        <h4 class="mb-4 text-center text-primary"><i class="fas fa-file-invoice"></i> {% trans "Production Invoice" %}</h4>
                        <div class="table-responsive">
                        <table class="table table-hover table-bordered mb-3">
                            <thead class="table-dark">
                                <tr>
                                    <th>{% trans "Item" %}</th>
                                    <th class="text-end">{% trans "Qty" %}</th>
                                    <th class="text-end">{% trans "Unit Price" %}</th>
                                    <th class="text-end">{% trans "Line Total" %}</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for mat in materials %}
                                <tr>
                                    <td>{{ mat.type_name }}</td>
                                    <td class="text-end" data-qty="{{ mat.quantity }}">{{ mat.quantity }}</td>
                                    <td class="text-end"><input type="number" min="0" step="0.01" class="form-control form-control-sm unit-cost text-end" data-type-id="{{ mat.type_id }}" value="0"></td>
                                    <td class="text-end total-cost">0</td>
                                </tr>
                                {% endfor %}
                                <tr class="table-success fw-bold">
                                    <td>{% trans "Final Product" %}</td>
                                    <td class="text-end" data-qty="{{ final_product_qty|default:num_runs }}">{{ final_product_qty|default:num_runs }}</td>
                                    <td class="text-end"><input type="number" min="0" step="0.01" class="form-control form-control-sm sale-price-unit text-end" data-type-id="{{ product_type_id }}" value="0"></td>
                                    <td class="text-end total-revenue">0</td>
                                </tr>
                            </tbody>
                            <tfoot>
                                <tr>
                                    <th colspan="3" class="text-end">{% trans "Total Cost" %}</th>
                                    <th class="text-end grand-total-cost">0</th>
                                </tr>
                                <tr>
                                    <th colspan="3" class="text-end">{% trans "Total Revenue" %}</th>
                                    <th class="text-end grand-total-rev">0</th>
                                </tr>
                                <tr>
                                    <th colspan="3" class="text-end">{% trans "Profit" %}</th>
                                    <th class="text-end profit">0 <span class="profit-pct text-muted">(0%)</span></th>
                                </tr>
                            </tfoot>
                        </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="tab-pane fade" id="tab-needed" role="tabpanel">
            <div class="card shadow-sm mt-4">
                <div class="card-header bg-warning text-dark fw-bold">
                    <i class="fas fa-shopping-cart me-2"></i>{% trans "Items to Purchase" %}
                </div>
                <div class="card-body p-3">
                    <p class="text-muted">{% trans "Select which intermediate products you will buy, then click " %}<button id="compute-needed" class="btn btn-sm btn-outline-primary">{% trans "Compute List" %}</button></p>
                    <div class="table-responsive">
                        <table class="table table-striped" id="needed-table">
                            <thead>
                                <tr>
                                    <th>{% trans "Item" %}</th>
                                    <th class="text-end">{% trans "Qty" %}</th>
                                    <th class="text-end">{% trans "Unit Price" %}</th>
                                    <th class="text-end">{% trans "Line Total" %}</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                            <tfoot>
                                <tr>
                                    <th colspan="3" class="text-end">{% trans "Total Cost" %}</th>
                                    <th class="text-end purchase-total">0</th>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock content %}

{% block extra_javascript %}
<script src="{% static 'indy_hub/js/craft_bp.js' %}"></script>
<script>
// Initialize CraftBP module with Django context
document.addEventListener('DOMContentLoaded', function() {
    window.CraftBP.init({
        productTypeId: '{{ product_type_id }}',
        fuzzworkPriceUrl: '{% url 'indy_hub:fuzzwork_price' %}'
    });
});
</script>
{% endblock extra_javascript %}