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

{% block details %}
<style>
    .drilldown-btn[aria-expanded="true"] .transition-icon {
        transform: rotate(180deg);
    }
    .transition-icon {
        transition: transform 0.2s ease-in-out;
    }
    /* Fix for HTMX wrapper breaking Bootstrap tab-content > tab-pane CSS */
    #bom-panes-wrapper > .tab-pane {
        display: none;
    }
    #bom-panes-wrapper > .tab-pane.active {
        display: block;
    }
    /* Explicitly define HTMX indicator CSS to avoid CSP/Bootstrap conflicts */
    .htmx-indicator {
        opacity: 0 !important;
        pointer-events: none;
        transition: opacity 200ms ease-in;
    }
    .htmx-request .htmx-indicator,
    .htmx-request.htmx-indicator {
        opacity: 1 !important;
        pointer-events: auto;
    }
</style>
<div class="container-fluid">
    <div class="row mb-4">
        <div class="col-12">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{% url 'industry_reforged:index' %}">{% trans "Dashboard" %}</a></li>
                    <li class="breadcrumb-item"><a href="{% url 'industry_reforged:orders_dashboard' %}">{% trans "My Orders" %}</a></li>
                    <li class="breadcrumb-item active" aria-current="page">{% trans "Order #" %}{{ order.id }}</li>
                </ol>
            </nav>
            <div class="d-flex justify-content-between align-items-center">
                <h2 class="mb-0">{% trans "Order #" %}<span class="numeric">{{ order.id }}</span></h2>
                <div>
                    {% if order.status == 'REQUESTED' %}
                        {% if perms.industry_reforged.corp_access %}
                            <span class="text-warning fw-bold me-3"><i class="fas fa-exclamation-triangle"></i> {% trans "Requires Quote" %}</span>
                        {% else %}
                            <span class="text-muted fst-italic me-3">{% trans "Pending Quote from Director" %}</span>
                        {% endif %}
                    {% elif order.status == 'QUOTED' %}
                        {% if is_owner %}
                            <a href="{% url 'industry_reforged:reject_quote' order.id %}" class="btn btn-outline-danger me-2"><i class="fas fa-times"></i> {% trans "Reject" %}</a>
                            <a href="{% url 'industry_reforged:accept_quote' order.id %}" class="btn btn-success"><i class="fas fa-check"></i> {% trans "Accept Quote" %}</a>
                        {% else %}
                            <span class="text-muted fst-italic me-3">{% trans "Pending Acceptance by User" %}</span>
                        {% endif %}
                    {% endif %}
                    {% if order.status == 'REQUESTED' or order.status == 'QUOTED' %}
                        {% if is_owner or perms.industry_reforged.corp_access %}
                            <button type="button" class="btn btn-danger me-2" data-bs-toggle="modal" data-bs-target="#deleteOrderModal"><i class="fas fa-trash"></i> {% trans "Delete Order" %}</button>
                        {% endif %}
                    {% endif %}
                    <a href="{% url 'industry_reforged:orders_dashboard' %}" onclick="history.back(); return false;" class="btn btn-primary"><i class="fas fa-arrow-left"></i> {% trans "Back" %}</a>
                </div>
            </div>
        </div>
    </div>

    <!-- Suborder Notice -->
    {% if order.parent_order %}
    <div class="row mb-4">
        <div class="col-12">
            <div class="alert alert-info border-info text-white" style="background-color: rgba(13, 202, 240, 0.1);">
                <h5 class="alert-heading"><i class="fas fa-sitemap"></i> {% trans "Suborder Notice" %}</h5>
                <p class="mb-3">{% trans "This is a suborder. It is managed entirely through its parent order." %}</p>
                <div class="d-flex align-items-center">
                    {% if order.root_order and order.root_order != order.parent_order %}
                    <a href="{% url 'industry_reforged:view_quote' order.root_order.id %}" class="btn btn-sm btn-outline-info me-2"><i class="fas fa-arrow-up"></i> {% trans "Main Order" %} #{{ order.root_order.id }}</a>
                    <span class="text-muted me-2"><i class="fas fa-chevron-right"></i></span>
                    {% endif %}
                    <a href="{% url 'industry_reforged:view_quote' order.parent_order.id %}" class="btn btn-sm btn-outline-info"><i class="fas fa-level-up-alt"></i> {% trans "Parent Order" %} #{{ order.parent_order.id }}</a>
                </div>
            </div>
        </div>
    </div>
    {% endif %}

    <!-- Quote Submission Form for Directors -->
    {% if order.status == 'REQUESTED' and perms.industry_reforged.corp_access and not order.parent_order %}
    <div class="row mb-4">
        <div class="col-12">
            <div class="card border-warning bg-dark">
                <div class="card-header border-warning text-warning">
                    <h4 class="card-title mb-0"><i class="fas fa-hand-holding-usd"></i> {% trans "Provide Quote" %}</h4>
                </div>
                <div class="card-body">
                    <p class="text-white">{% trans "Review the order details and the estimated BOM cost, then provide a final quote." %}</p>

                    {% if order.child_orders.exists or order.parent_order %}
                    <div class="alert alert-secondary mb-4 border-secondary text-white" style="background-color: rgba(255,255,255,0.05);">
                        <h5 class="alert-heading text-info"><i class="fas fa-network-wired"></i> {% trans "Order Family Overview" %}</h5>
                        <p class="mb-2">{% trans "This order is part of a larger production group. The final unified quote sent to the customer will be the sum of all orders in this group:" %} <strong class="text-warning">{% if order.parent_order %}{{ order.parent_order.grand_total|eve_isk }}{% else %}{{ order.grand_total|eve_isk }}{% endif %}</strong></p>

                        {% with family_parent=order.parent_order|default:order %}
                        <div class="list-group list-group-flush border border-secondary rounded">
                            <div class="list-group-item bg-dark text-white border-secondary d-flex justify-content-between align-items-center {% if order == family_parent %}border-warning border-start border-start-5{% endif %}">
                                <div>
                                    <i class="fas fa-box text-muted me-2"></i> <strong>{% trans "Parent Order" %} #{{ family_parent.id }}</strong>
                                    {% for item in family_parent.items.all %}
                                        <span class="badge bg-secondary ms-1">{{ item.item_type.name }}</span>
                                    {% endfor %}
                                    <span class="ms-2 badge {% if family_parent.status == 'REQUESTED' %}bg-secondary{% else %}bg-primary{% endif %}">{{ family_parent.get_status_display }}</span>
                                </div>
                                <div class="d-flex align-items-center">
                                    <span class="text-warning fw-bold me-3">{{ family_parent.total_price|eve_isk }}</span>
                                    {% if order != family_parent %}
                                        <a href="{% url 'industry_reforged:view_quote' family_parent.id %}" class="btn btn-sm btn-outline-info show-loader"><i class="fas fa-external-link-alt"></i> {% trans "View" %}</a>
                                    {% endif %}
                                </div>
                            </div>
                            {% for child in family_parent.child_orders.all %}
                            <div class="list-group-item bg-dark text-white border-secondary d-flex justify-content-between align-items-center ps-5 {% if order == child %}border-warning border-start border-start-5{% endif %}">
                                <div>
                                    <i class="fas fa-level-up-alt fa-rotate-90 text-muted me-2"></i> {% trans "Child Order" %} #{{ child.id }}
                                    {% for item in child.items.all %}
                                        <span class="badge bg-secondary ms-1">{{ item.item_type.name }}</span>
                                    {% endfor %}
                                    <span class="ms-2 badge {% if child.status == 'REQUESTED' %}bg-secondary{% else %}bg-primary{% endif %}">{{ child.get_status_display }}</span>
                                </div>
                                <div class="d-flex align-items-center">
                                    <span class="text-warning fw-bold me-3" style="opacity: 0.8;">{{ child.total_price|eve_isk }}</span>
                                    {% if order != child %}
                                        <a href="{% url 'industry_reforged:view_quote' child.id %}" class="btn btn-sm btn-outline-info show-loader"><i class="fas fa-external-link-alt"></i> {% trans "View" %}</a>
                                    {% endif %}
                                </div>
                            </div>
                            {% endfor %}
                        </div>
                        {% endwith %}
                    </div>
                    {% endif %}

                    <form id="quoteForm" method="post" action="{% url 'industry_reforged:provide_quote' order.id %}" class="row gx-3 gy-2 align-items-center">
                        {% csrf_token %}
                        <div class="col-sm-3">
                            <label class="form-label text-white mb-1 small">Total Price</label>
                            <div class="input-group">
                                <span class="input-group-text bg-secondary border-secondary text-white">ISK</span>
                                <input type="number" step="0.01" class="form-control bg-dark text-white border-secondary isk-format-input" id="quoteTotal" name="total_price" value="{{ order.total_price|stringformat:'.2f' }}" required>
                            </div>
                            <div class="form-text mt-1 text-info">
                                {% trans "Est. Value:" %} {{ order.total_price|eve_isk_short }} <span id="quoteTotal-helper" class="text-warning fw-bold ms-2"></span>
                            </div>
                        </div>
                        <div class="col-sm-3">
                            <label class="form-label text-white mb-1 small">{% trans "Target Production Facility" %}</label>
                            <select name="target_facility" id="id_target_facility" class="form-select bg-dark text-white border-secondary">
                                <option value="">-- {% trans "Default / No Facility" %} --</option>
                                {% for fac in facilities %}
                                <option value="{{ fac.facility_id }}" {% if order.target_facility_id == fac.facility_id %}selected{% endif %}>{{ fac.name }} ({{ fac.get_security_space_display }})</option>
                                {% endfor %}
                            </select>
                            <div class="form-text mt-1 text-muted d-flex align-items-center">
                                {% trans "Page will reload on change" %}
                            </div>
                        </div>
                        <div class="col-sm-3">
                            <label class="form-label text-white mb-1 small">{% trans "Upfront Payment (ISK)" %}</label>
                            <div class="input-group">
                                <span class="input-group-text bg-secondary border-secondary text-white">ISK</span>
                                <input type="number" step="0.01" class="form-control bg-dark text-white border-secondary isk-format-input" id="quoteUpfront" name="upfront_payment" value="0.00" required>
                            </div>
                            <div class="form-text mt-1 text-muted">
                                {% trans "Optional ISK downpayment" %} <span id="quoteUpfront-helper" class="text-warning fw-bold ms-2"></span>
                            </div>
                        </div>
                        <div class="col-sm-3">
                            <label class="form-label text-white mb-1 small">{% trans "Upfront Payment (PLEX)" %}</label>
                            <div class="input-group">
                                <span class="input-group-text bg-secondary border-secondary text-white"><i class="fas fa-coins text-warning"></i></span>
                                <input type="number" step="1" class="form-control bg-dark text-white border-secondary" id="quoteUpfrontPlex" name="upfront_payment_plex" value="{{ order.upfront_payment_plex|default:'0' }}" required>
                            </div>
                            <div class="form-text mt-1 text-muted">
                                1 PLEX = {{ plex_price|eve_isk_short }} <span id="quoteUpfrontPlex-helper" class="text-warning fw-bold ms-2"></span>
                            </div>
                        </div>
                        <div class="col-sm-3">
                            <label class="form-label text-white mb-1 small">{% translate "Note" %}</label>
                            <input type="text" class="form-control bg-dark text-white border-secondary" name="note" placeholder="e.g. 50% upfront required">
                            <div class="form-text mt-1 text-muted">
                                {% trans "Optional quote note" %}
                            </div>
                        </div>

                        <div class="col-12 mt-4 d-flex justify-content-between align-items-center">
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" role="switch" id="ignoreDiscounts" name="ignore_discounts" {% if order.ignore_discounts %}checked{% endif %}>
                                <label class="form-check-label text-warning" for="ignoreDiscounts">{% trans "Disable Corp Discounts for this order" %}</label>
                            </div>
                            <button type="submit" class="btn btn-warning" id="submitQuoteBtn"><i class="fas fa-check-circle"></i> {% trans "Submit Quote" %}</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    {% endif %}

    <div class="card border-0 mb-4 bg-transparent">
        <div class="card-header p-0 border-bottom-0">
            <ul class="nav nav-tabs" id="order-tabs" role="tablist">
                {% if order.status == 'REQUESTED' or order.status == 'QUOTED' %}
                <li class="nav-item" role="presentation">
                    <button class="nav-link active" id="pnl-tab" data-bs-toggle="tab" data-bs-target="#pnl-pane" type="button" role="tab" aria-controls="pnl-pane" aria-selected="true"><i class="fas fa-chart-line"></i> {% trans "Profit & Loss (Quote)" %}</button>
                </li>
                {% endif %}
                <li class="nav-item" role="presentation">
                    <button class="nav-link {% if order.status != 'REQUESTED' and order.status != 'QUOTED' %}active{% endif %}" id="details-tab" data-bs-toggle="tab" data-bs-target="#details-pane" type="button" role="tab" aria-controls="details-pane" aria-selected="{% if order.status != 'REQUESTED' and order.status != 'QUOTED' %}true{% else %}false{% endif %}">{% trans "Order Details" %}</button>
                </li>
                {% if perms.industry_reforged.industrialist_access or perms.industry_reforged.corp_access %}
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="bom-tab" data-bs-toggle="tab" data-bs-target="#bom-pane" type="button" role="tab" aria-controls="bom-pane" aria-selected="false">{% trans "Bill of Materials" %}</button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="tree-tab" data-bs-toggle="tab" data-bs-target="#tree-pane" type="button" role="tab" aria-controls="tree-pane" aria-selected="false">{% trans "Full Production Tree" %}</button>
                </li>
                {% endif %}
                {% if perms.industry_reforged.corp_access %}
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="me-tab" data-bs-toggle="tab" data-bs-target="#me-pane" type="button" role="tab" aria-controls="me-pane" aria-selected="false">{% trans "ME & BPC Overrides" %}</button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="missing-bp-tab" data-bs-toggle="tab" data-bs-target="#missing-bp-pane" type="button" role="tab" aria-controls="missing-bp-pane" aria-selected="false">
                        {% trans "Missing Blueprints" %}
                        {% if missing_bps|length > 0 %}
                            <span class="badge bg-danger rounded-pill ms-2">{{ missing_bps|length }}</span>
                        {% endif %}
                    </button>
                </li>
                {% endif %}
            </ul>
        </div>
        <div class="card-body p-0 mt-3">
            <div class="tab-content" id="order-tabsContent">

                {% if order.status == 'REQUESTED' or order.status == 'QUOTED' %}
                <!-- TAB: P&L -->
                <div class="tab-pane fade show active" id="pnl-pane" role="tabpanel" aria-labelledby="pnl-tab" tabindex="0">
                    <div class="row m-0">
                        <div class="col-md-8 mb-4 px-1">
                            <div class="card border-0 bg-dark">
                                <div class="card-header border-bottom border-secondary">
                                    <h3 class="card-title text-white"><i class="fas fa-chart-line"></i> {% trans "Profit & Loss (Quote Analysis)" %}</h3>
                                </div>
                                <div class="card-body p-0">
                                    <div class="table-responsive">
                                        <table class="table table-striped table-dark m-0 fs-5">
                                            <tbody>
                                                <tr>
                                                    <td>{% trans "Jita Sell Value (Requested Items)" %}</td>
                                                    <td class="text-end text-info numeric">{{ original_price|eve_isk }}</td>
                                                </tr>
                                                <tr>
                                                    <td>{% trans "Material Cost (BOM Jita Sell)" %}</td>
                                                    <td class="text-end text-danger numeric">-{{ total_bom_price|eve_isk }}</td>
                                                </tr>
                                                <tr>
                                                    <td>{% trans "Estimated Build Cost" %}</td>
                                                    <td class="text-end text-danger numeric">-{{ estimated_build_cost|eve_isk }}</td>
                                                </tr>
                                                <tr>
                                                    <td class="border-top border-secondary fw-bold">{% trans "Suggested Price" %}</td>
                                                    <td class="border-top border-secondary text-end text-warning fw-bold numeric" id="pnlSuggestedPrice">{{ order.total_price|eve_isk }}</td>
                                                </tr>
                                                <tr>
                                                    <td class="fw-bold">{% trans "Profit Margin" %}</td>
                                                    <td class="text-end {% if profit_margin < 0 %}text-danger{% else %}text-success{% endif %} fw-bold numeric" id="pnlProfitMargin">{{ profit_margin|eve_isk }}</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                        {% include "industry_reforged/_order_details_sidebar.html" %}
                    </div>
                </div>
                {% endif %}

                <!-- TAB 1: ORDER DETAILS -->
                <div class="tab-pane fade {% if order.status != 'REQUESTED' and order.status != 'QUOTED' %}show active{% endif %}" id="details-pane" role="tabpanel" aria-labelledby="details-tab" tabindex="0">
                    <div class="row m-0">
                        <div class="col-md-8 mb-4 px-1">
                            {% if order_items %}
                            <div class="card border-0">
                                <div class="card-header">
                                    <h3 class="card-title"><i class="fas fa-file-invoice-dollar"></i> {% trans "Itemized Invoice" %}</h3>
                                </div>
                                <div class="card-body p-0">
                                    <div class="table-responsive">
                                        {% if order.status == 'REQUESTED' and perms.industry_reforged.corp_access %}
                                        <form method="post" action="{% url 'industry_reforged:split_order' order.id %}">
                                            {% csrf_token %}
                                        {% endif %}
                                        <table class="table table-striped m-0">
                                            <thead>
                                                <tr>
                                                    {% if order.status == 'REQUESTED' and perms.industry_reforged.corp_access %}
                                                    <th width="40" class="text-center">
                                                        <input class="form-check-input" type="checkbox" id="selectAllSplitItems">
                                                    </th>
                                                    {% endif %}
                                                    <th>{% trans "Item" %}</th>
                                                    <th class="text-end">{% trans "Quantity" %}</th>
                                                    <th class="text-end">{% trans "Discount" %}</th>
                                                    <th class="text-end">{% trans "Unit Price" %}</th>
                                                    <th class="text-end">{% trans "Total" %}</th>
                                                </tr>
                                            </thead>
                                        <tbody>
                                            {% if build_items %}
                                            {% if buy_items %}
                                            <tr>
                                                <td colspan="6" class="bg-dark text-white fw-bold py-1 px-3 border-bottom border-secondary"><i class="fas fa-hammer me-1 text-warning"></i> {% trans "Manufactured Items" %}</td>
                                            </tr>
                                            {% endif %}
                                            {% for item in build_items %}
                                            <tr>
                                                {% if order.status == 'REQUESTED' and perms.industry_reforged.corp_access %}
                                                <td class="text-center align-middle">
                                                    <input class="form-check-input split-item-checkbox" type="checkbox" name="item_ids" value="{{ item.id }}">
                                                </td>
                                                {% endif %}
                                                <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/{{ item.item_type.id }}/icon?size=32" alt="{{ item.item_type.name }}" width="24" height="24" class="me-2 rounded">
                                                        <span>{{ item.item_type.name }}</span>
                                                    </div>
                                                </td>
                                                <td class="text-end numeric">
                                                    <span id="qty_display_{{ item.id }}">{{ item.quantity }}</span>
                                                    {% if order.status == 'REQUESTED' and perms.industry_reforged.corp_access %}
                                                    <input type="number" class="form-control form-control-sm d-none split-qty-input ms-auto" style="width: 80px;" name="split_qty_{{ item.id }}" id="split_qty_{{ item.id }}" value="{{ item.quantity }}" max="{{ item.quantity }}" min="1">
                                                    {% endif %}
                                                </td>
                                                <td class="text-end numeric">
                                                    {% if item.discount_applied > 0 %}
                                                        <span class="text-success">{{ item.discount_applied }}%</span>
                                                    {% else %}
                                                        -
                                                    {% endif %}
                                                </td>
                                                <td class="text-end numeric">
                                                    {% if item.discount_applied > 0 %}
                                                        <del class="text-muted small">{{ item.original_price_per_unit|eve_isk }}</del><br>
                                                    {% endif %}
                                                    {{ item.price_per_unit|eve_isk }}
                                                </td>
                                                <td class="text-end fw-bold numeric text-warning">{{ item.line_total|eve_isk }}</td>
                                            </tr>
                                            {% endfor %}
                                            {% endif %}

                                            {% if buy_items %}
                                            <tr>
                                                <td colspan="6" class="bg-dark text-white fw-bold py-1 px-3 border-bottom border-info border-top"><i class="fas fa-shopping-cart me-1 text-info"></i> {% trans "Buy Products (Jita Price)" %}</td>
                                            </tr>
                                            {% for item in buy_items %}
                                            <tr>
                                                {% if order.status == 'REQUESTED' and perms.industry_reforged.corp_access %}
                                                <td class="text-center align-middle">
                                                    <input class="form-check-input split-item-checkbox" type="checkbox" name="item_ids" value="{{ item.id }}">
                                                </td>
                                                {% endif %}
                                                <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/{{ item.item_type.id }}/icon?size=32" alt="{{ item.item_type.name }}" width="24" height="24" class="me-2 rounded">
                                                        <span>{{ item.item_type.name }}</span>
                                                    </div>
                                                </td>
                                                <td class="text-end numeric">
                                                    <span id="qty_display_{{ item.id }}">{{ item.quantity }}</span>
                                                    {% if order.status == 'REQUESTED' and perms.industry_reforged.corp_access %}
                                                    <input type="number" class="form-control form-control-sm d-none split-qty-input ms-auto" style="width: 80px;" name="split_qty_{{ item.id }}" id="split_qty_{{ item.id }}" value="{{ item.quantity }}" max="{{ item.quantity }}" min="1">
                                                    {% endif %}
                                                </td>
                                                <td class="text-end numeric">
                                                    {% if item.discount_applied > 0 %}
                                                        <span class="text-success">{{ item.discount_applied }}%</span>
                                                    {% else %}
                                                        -
                                                    {% endif %}
                                                </td>
                                                <td class="text-end numeric">
                                                    {% if item.discount_applied > 0 %}
                                                        <del class="text-muted small">{{ item.original_price_per_unit|eve_isk }}</del><br>
                                                    {% endif %}
                                                    {{ item.price_per_unit|eve_isk }}
                                                </td>
                                                <td class="text-end fw-bold numeric text-warning">{{ item.line_total|eve_isk }}</td>
                                            </tr>
                                            {% endfor %}
                                            {% endif %}
                                            
                                            {% if not build_items and not buy_items %}
                                                <tr><td colspan="6" class="text-center">No items found.</td></tr>
                                            {% endif %}
                                        </tbody>
                                        <tfoot>
                                            <tr>
                                                <th colspan="4" class="text-end text-muted">{% trans "Original Jita Price (Est.):" %}</th>
                                                <th class="text-end text-muted numeric">{{ original_price|eve_isk }}</th>
                                            </tr>
                                            {% if savings > 0 %}
                                            <tr>
                                                <th colspan="4" class="text-end text-success">{% trans "Your Savings (Corp Discount / Adjustment):" %}</th>
                                                <th class="text-end text-success numeric">-{{ savings|eve_isk }}</th>
                                            </tr>
                                            {% endif %}
                                            <tr>
                                                <th colspan="4" class="text-end fs-4">{% trans "Current Quote Total:" %}</th>
                                                <th class="text-end fs-4 text-warning numeric">{{ order.total_price|eve_isk }}</th>
                                            </tr>
                                            {% if order.upfront_payment > 0 %}
                                            <tr>
                                                <th colspan="4" class="text-end fs-5 text-warning">{% trans "Upfront Payment Required:" %}</th>
                                                <th class="text-end fs-5 text-warning numeric">{{ order.upfront_payment|eve_isk }}</th>
                                            </tr>
                                            {% endif %}
                                            {% if order.upfront_payment_plex > 0 %}
                                            <tr>
                                                <th colspan="4" class="text-end fs-5 text-warning">
                                                    {% trans "Upfront Payment Required (PLEX):" %}
                                                    <br><small class="text-muted fw-normal">{% trans "Current rate" %}: 1 PLEX = {{ plex_price|eve_isk_short }}</small>
                                                </th>
                                                <th class="text-end fs-5 text-warning align-middle">{{ order.upfront_payment_plex }} PLEX</th>
                                            </tr>
                                            {% endif %}
                                            {% if order.upfront_payment > 0 or order.upfront_payment_plex > 0 %}
                                            <tr>
                                                <th colspan="4" class="text-end fs-4 text-info mt-2">{% trans "Remaining Balance on Delivery:" %}</th>
                                                <th class="text-end fs-4 text-info mt-2 numeric">{{ order.remaining_balance|eve_isk }}</th>
                                            </tr>
                                            {% endif %}
                                        </tfoot>
                                        </table>
                                        {% if order.status == 'REQUESTED' and perms.industry_reforged.corp_access %}
                                        <div class="p-3 bg-dark border-top border-secondary d-flex align-items-center justify-content-between">
                                            <div class="d-flex align-items-center">
                                                <select name="target_facility" class="form-select bg-secondary text-white border-secondary me-2 form-select-sm" style="width: auto;">
                                                    <option value="">-- {% trans "Default / No Facility" %} --</option>
                                                    {% for fac in facilities %}
                                                    <option value="{{ fac.facility_id }}" {% if fac.is_default %}selected{% endif %}>{{ fac.name }}</option>
                                                    {% endfor %}
                                                </select>
                                                <button type="submit" class="btn btn-warning btn-sm" id="splitOrderBtn" disabled><i class="fas fa-cut"></i> {% trans "Split to new Order" %}</button>
                                            </div>
                                            <small class="text-muted">{% trans "Select items to split them into a new Child Order." %}</small>
                                        </div>
                                        </form>

                                        <script>
                                            document.addEventListener('DOMContentLoaded', function() {
                                                const selectAll = document.getElementById('selectAllSplitItems');
                                                const itemCheckboxes = document.querySelectorAll('.split-item-checkbox');
                                                const splitBtn = document.getElementById('splitOrderBtn');

                                                function updateBtnState() {
                                                    const anyChecked = Array.from(itemCheckboxes).some(cb => cb.checked);
                                                    if(splitBtn) splitBtn.disabled = !anyChecked;

                                                    // Toggle quantity inputs
                                                    itemCheckboxes.forEach(cb => {
                                                        const itemId = cb.value;
                                                        const input = document.getElementById(`split_qty_${itemId}`);
                                                        const display = document.getElementById(`qty_display_${itemId}`);
                                                        if (input && display) {
                                                            if (cb.checked) {
                                                                input.classList.remove('d-none');
                                                                display.classList.add('d-none');
                                                            } else {
                                                                input.classList.add('d-none');
                                                                display.classList.remove('d-none');
                                                            }
                                                        }
                                                    });
                                                }

                                                if (selectAll) {
                                                    selectAll.addEventListener('change', function() {
                                                        itemCheckboxes.forEach(cb => cb.checked = this.checked);
                                                        updateBtnState();
                                                    });
                                                }

                                                itemCheckboxes.forEach(cb => {
                                                    cb.addEventListener('change', updateBtnState);
                                                });
                                            });
                                        </script>
                                        {% endif %}
                                    </div>
                                </div>
                            </div>
                            {% endif %}

                            {% if display_child_orders and order.child_orders.exists %}
                            {% for child in order.child_orders.all %}
                            <div class="card border-0 mt-4">
                                <div class="card-header bg-secondary">
                                    <h3 class="card-title text-white"><i class="fas fa-level-up-alt fa-rotate-90"></i> {% trans "Split Order #" %}{{ child.id }}</h3>
                                </div>
                                <div class="card-body p-0">
                                    <div class="table-responsive">
                                        <table class="table table-striped m-0">
                                            <thead>
                                                <tr>
                                                    <th>{% trans "Item" %}</th>
                                                    <th class="text-end">{% trans "Quantity" %}</th>
                                                    <th class="text-end">{% trans "Discount" %}</th>
                                                    <th class="text-end">{% trans "Unit Price" %}</th>
                                                    <th class="text-end">{% trans "Total" %}</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                {% for item in child.items.all %}
                                                <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/{{ item.item_type.id }}/icon?size=32" alt="{{ item.item_type.name }}" width="24" height="24" class="me-2 rounded">
                                                            <span>{{ item.item_type.name }}</span>
                                                        </div>
                                                    </td>
                                                    <td class="text-end numeric">{{ item.quantity }}</td>
                                                    <td class="text-end numeric">
                                                        {% if item.discount_applied > 0 %}
                                                            <span class="text-success">{{ item.discount_applied }}%</span>
                                                        {% else %}
                                                            -
                                                        {% endif %}
                                                    </td>
                                                    <td class="text-end numeric">
                                                        {% if item.discount_applied > 0 %}
                                                            <del class="text-muted small">{{ item.original_price_per_unit|eve_isk }}</del><br>
                                                        {% endif %}
                                                        {{ item.price_per_unit|eve_isk }}
                                                    </td>
                                                    <td class="text-end fw-bold numeric text-warning">{{ item.line_total|eve_isk }}</td>
                                                </tr>
                                                {% empty %}
                                                <tr><td colspan="5" class="text-center">No items found.</td></tr>
                                                {% endfor %}
                                            </tbody>
                                            <tfoot>
                                                <tr>
                                                    <th colspan="4" class="text-end fs-5">{% trans "Target Facility:" %}</th>
                                                    <th class="text-end fs-5 text-info">{% if child.target_facility %}{{ child.target_facility.name }}{% else %}{% trans "Default" %}{% endif %}</th>
                                                </tr>
                                                <tr>
                                                    <th colspan="4" class="text-end fs-5">{% trans "Child Order Total:" %}</th>
                                                    <th class="text-end fs-5 text-warning numeric">{{ child.total_price|eve_isk }}</th>
                                                </tr>
                                            </tfoot>
                                        </table>
                                    </div>
                                </div>
                            </div>
                            {% endfor %}

                            <div class="card border-0 bg-dark mt-4 border-warning">
                                <div class="card-body d-flex justify-content-between align-items-center">
                                    <h3 class="mb-0 text-white">{% trans "Grand Total (All Orders):" %}</h3>
                                    <h3 class="mb-0 text-warning numeric fw-bold">{{ order.grand_total|eve_isk }}</h3>
                                </div>
                            </div>
                            {% endif %}

                        </div>
                        {% include "industry_reforged/_order_details_sidebar.html" %}
                    </div> <!-- End Row -->
                </div> <!-- End Tab 1 -->

                {% if perms.industry_reforged.corp_access %}
                <!-- TAB: ME OVERRIDES -->
                <div class="tab-pane fade" id="me-pane" role="tabpanel" aria-labelledby="me-tab" tabindex="0">
                    <div class="row m-0">
                        <div class="col-12 mb-4 px-1">
                            <form id="meFormInner" action="{% url 'industry_reforged:update_quote_me_overrides' order.id %}" method="post">
                            {% csrf_token %}
                            <input type="hidden" name="target_facility" id="hidden_target_facility">
                            <div class="card border-0 h-100 position-relative">
                                <div class="card-header border-bottom border-secondary bg-dark text-white d-flex justify-content-between align-items-center">
                                    <h3 class="card-title mb-0"><i class="fas fa-sliders-h text-warning me-2"></i> {% trans "Required Blueprints (ME & BPC Overrides)" %}</h3>
                                    {% if order.status == 'REQUESTED' %}
                                    <div class="d-flex align-items-center">
                                        <button type="submit" class="btn btn-warning btn-sm" onclick="document.getElementById('hidden_target_facility').value = document.querySelector('select[name=\'target_facility\']')?.value || ''; document.getElementById('me-loading').style.display = 'inline-block';">
                                            <i class="fas fa-sync"></i> {% trans "Apply Overrides & Recalculate BOM" %}
                                        </button>
                                        <div id="me-loading" style="display:none;" class="spinner-border spinner-border-sm text-warning ms-2" role="status"></div>
                                    </div>
                                    {% endif %}
                                </div>
                                <div class="card-body p-0">
                                    <div class="table-responsive">
                                        <table class="table table-striped table-dark m-0">
                                            <thead>
                                                <tr>
                                                    <th>{% trans "Blueprint" %}</th>
                                                    <th width="150">{% trans "Material Efficiency" %}</th>
                                                    <th width="150">{% trans "Max Runs (BPC)" %}</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                {% for p in products_me %}
                                                <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/{{ p.type_id }}/icon?size=32" alt="{{ p.name }}" width="24" height="24" class="me-2 rounded">
                                                            <span>{{ p.name }}</span>
                                                            {% if p.missing_bp and p.has_blueprint %}
                                                            <span class="badge bg-danger ms-2" title="{% trans 'Corporation does not own this Blueprint' %}"><i class="fas fa-exclamation-triangle"></i></span>
                                                            {% endif %}
                                                        </div>
                                                    </td>
                                                    <td>
                                                        {% if not p.has_blueprint %}
                                                        <span class="text-muted fst-italic">N/A</span>
                                                        {% else %}
                                                            {% if order.status == 'REQUESTED' %}
                                                            <div class="input-group input-group-sm">
                                                                <input type="number" class="form-control bg-dark text-white border-secondary" name="bp_me_{{ p.type_id }}" value="{{ p.current_me }}" min="0" max="10">
                                                                <span class="input-group-text bg-secondary text-white border-secondary">%</span>
                                                            </div>
                                                            {% else %}
                                                            <span class="text-white">{{ p.current_me }}%</span>
                                                            {% endif %}
                                                        {% endif %}
                                                    </td>
                                                    <td>
                                                        {% if not p.has_blueprint %}
                                                        <span class="text-muted fst-italic">N/A</span>
                                                        {% else %}
                                                            {% if order.status == 'REQUESTED' %}
                                                            <div class="input-group input-group-sm">
                                                                <input type="number" class="form-control bg-dark text-white border-secondary" name="bp_runs_{{ p.type_id }}" value="{{ p.current_max_runs }}" min="0" placeholder="0 = infinite">
                                                            </div>
                                                            {% else %}
                                                            <span class="text-white">{% if p.current_max_runs == 0 %}Infinite (BPO){% else %}{{ p.current_max_runs }}{% endif %}</span>
                                                            {% endif %}
                                                        {% endif %}
                                                    </td>
                                                </tr>
                                                {% empty %}
                                                <tr><td colspan="2" class="text-center text-muted p-3">{% trans "No blueprints required for this order." %}</td></tr>
                                                {% endfor %}
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                            </form>
                        </div>
                    </div>
                </div> <!-- End Tab ME -->
                
                <!-- TAB: MISSING BLUEPRINTS -->
                <div class="tab-pane fade" id="missing-bp-pane" role="tabpanel" aria-labelledby="missing-bp-tab" tabindex="0">
                    <div class="row m-0">
                        <div class="col-md-12 mb-4 px-1">
                            <div class="card border-0 bg-dark">
                                <div class="card-header border-bottom border-secondary d-flex justify-content-between align-items-center">
                                    <h3 class="card-title mb-0"><i class="fas fa-exclamation-triangle text-danger me-2"></i> {% trans "Missing Blueprints" %}</h3>
                                </div>
                                <div class="card-body p-0">
                                    <div class="table-responsive">
                                        <table class="table table-striped table-dark m-0 align-middle">
                                            <thead>
                                                <tr>
                                                    <th>{% trans "Item" %}</th>
                                                    <th class="text-center" style="width:120px;">{% trans "Status" %}</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                {% for p in missing_bps %}
                                                <tr>
                                                    <td>
                                                        <img src="https://images.evetech.net/types/{{ p.type_id }}/icon?size=32" class="rounded me-2" alt="icon">
                                                        {{ p.name }}
                                                    </td>
                                                    <td class="text-center">
                                                        <span class="badge bg-danger"><i class="fas fa-times"></i> {% trans "Missing" %}</span>
                                                    </td>
                                                </tr>
                                                {% empty %}
                                                <tr><td colspan="2" class="text-center text-success p-3"><i class="fas fa-check-circle me-1"></i> {% trans "All required blueprints are available in the corporation." %}</td></tr>
                                                {% endfor %}
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div> <!-- End Tab Missing BPs -->
                {% endif %}

                <div id="bom-panes-wrapper">
                    {% include "industry_reforged/partials/quote_bom_panes.html" %}
                </div>

            </div>
        </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="{% url 'industry_reforged:delete_order' order.id %}" class="btn btn-danger">{% trans "Delete Order" %}</a>
            </div>
        </div>
    </div>
</div>

<script>
    var searchTimeout = null;

    function filterTreeDelay() {
        var overlay = document.getElementById('treeLoadingOverlay');
        overlay.style.setProperty('display', 'flex', 'important');

        clearTimeout(searchTimeout);
        searchTimeout = setTimeout(function() {
            filterTree();
            overlay.style.setProperty('display', 'none', 'important');
        }, 300);
    }

    function filterTree() {
        var query = document.getElementById('treeSearchInput').value.toLowerCase();
        var allNodes = document.querySelectorAll('.bom-node');
        var allRows = document.querySelectorAll('.bom-node > .d-flex');

        if (!query) {
            allNodes.forEach(function(node) {
                node.style.setProperty('display', '', '');
            });
            return;
        }

        // Hide all first
        allNodes.forEach(function(node) {
            node.style.setProperty('display', 'none', 'important');
        });

        // Find matches and reveal parents
        allRows.forEach(function(row) {
            var nameEl = row.querySelector('strong');
            if (nameEl && nameEl.innerText.toLowerCase().includes(query)) {
                var node = row.closest('.bom-node');
                if (node) {
                    node.style.setProperty('display', '', '');

                    var parent = node.parentElement.closest('.bom-node');
                    while (parent) {
                        parent.style.setProperty('display', '', '');
                        var bsCollapseEl = parent.querySelector('.collapse');
                        if (bsCollapseEl) {
                            var bsCollapse = bootstrap.Collapse.getOrCreateInstance(bsCollapseEl, {toggle: false});
                            bsCollapse.show();
                            var btn = parent.querySelector('.drilldown-btn');
                            if (btn) btn.setAttribute('aria-expanded', 'true');
                        }
                        parent = parent.parentElement.closest('.bom-node');
                    }
                }
            }
        });
    }

    function toggleAllDrilldowns(btn) {
        var isExpanding = btn.getAttribute('data-expanded') !== 'true';
        var elements = document.querySelectorAll('.bom-node .collapse');
        var overlay = document.getElementById('treeLoadingOverlay');

        // Show loading overlay
        overlay.style.setProperty('display', 'flex', 'important');
        btn.disabled = true;

        // Allow browser to render the overlay before freezing the thread
        setTimeout(function() {
            elements.forEach(function(el) {
                var bsCollapse = bootstrap.Collapse.getOrCreateInstance(el, {toggle: false});
                if (isExpanding) {
                    bsCollapse.show();
                } else {
                    bsCollapse.hide();
                }

                // Sync aria-expanded on the individual buttons so the chevron rotates
                var drilldownBtn = document.querySelector('[data-bs-target="#' + el.id + '"]');
                if (drilldownBtn) {
                    drilldownBtn.setAttribute('aria-expanded', isExpanding ? 'true' : 'false');
                }
            });

            if (isExpanding) {
                btn.innerHTML = '<i class="fas fa-compress-arrows-alt"></i> {% trans "Collapse All" %}';
                btn.setAttribute('data-expanded', 'true');
            } else {
                btn.innerHTML = '<i class="fas fa-expand-arrows-alt"></i> {% trans "Expand All" %}';
                btn.setAttribute('data-expanded', 'false');
            }

            // Hide loading overlay
            overlay.style.setProperty('display', 'none', 'important');
            btn.disabled = false;
        }, 50);
    }
</script>

<!-- Split Component Modal -->
<div class="modal fade" id="splitComponentModal" tabindex="-1" aria-labelledby="splitComponentModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <form method="post" action="{% url 'industry_reforged:split_bom_component' order.id %}">
            {% csrf_token %}
            <input type="hidden" name="type_id" id="split_type_id">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="splitComponentModalLabel">{% trans "Split Sub-Component" %}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p>{% trans "You are splitting the following component into its own Child Order. It will be removed from the Parent Order's BOM calculation." %}</p>
                    <h4 id="split_component_name" class="text-info mb-3"></h4>

                    <div class="mb-3">
                        <label for="split_quantity" class="form-label">{% trans "Quantity to Split" %}</label>
                        <input type="number" class="form-control" name="quantity" id="split_quantity" min="1" required>
                    </div>

                    <div class="mb-3">
                        <label for="split_target_facility" class="form-label">{% trans "Target Facility for Child Order" %}</label>
                        <select name="target_facility" id="split_target_facility" class="form-select" required>
                            <option value="">-- {% trans "Select Facility" %} --</option>
                            {% for fac in facilities %}
                            <option value="{{ fac.facility_id }}" {% if fac.is_default %}selected{% endif %}>{{ fac.name }}</option>
                            {% endfor %}
                        </select>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{% trans "Cancel" %}</button>
                    <button type="submit" class="btn btn-info"><i class="fas fa-code-branch"></i> {% trans "Create Child Order" %}</button>
                </div>
            </div>
        </form>
    </div>
</div>
<!-- Loading Modal -->
<div class="modal fade" id="loadingModal" tabindex="-1" aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content bg-dark border-secondary">
            <div class="modal-body text-center p-4">
                <h5 class="text-white mb-3" id="loadingModalText">{% trans "Processing..." %}</h5>
                <div class="progress mb-3" style="height: 20px;">
                    <div class="progress-bar progress-bar-striped progress-bar-animated bg-warning w-100" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
                </div>
                <p class="text-muted small mb-0" id="loadingModalDesc">{% trans "Please wait while we update the quote." %}</p>
            </div>
        </div>
    </div>
</div>

<script>
    function openSplitComponentModal(typeId, name, quantity) {
        document.getElementById('split_type_id').value = typeId;
        document.getElementById('split_component_name').innerText = name;

        let qtyInput = document.getElementById('split_quantity');
        qtyInput.value = quantity;
        qtyInput.max = quantity;

        var splitModal = new bootstrap.Modal(document.getElementById('splitComponentModal'));
        splitModal.show();
    }
</script>
<script>
    document.addEventListener("DOMContentLoaded", function() {
        // Activate tab based on URL hash or sessionStorage
        let hash = window.location.hash;
        if (!hash) {
            hash = sessionStorage.getItem('activeTab_' + window.location.pathname);
        }
        if (hash) {
            let targetTab = document.querySelector(`button[data-bs-target="${hash}"]`);
            if (targetTab) {
                let tab = new bootstrap.Tab(targetTab);
                tab.show();
            }
        }

        // Update URL hash and sessionStorage when a tab is shown
        document.querySelectorAll('button[data-bs-toggle="tab"]').forEach(btn => {
            btn.addEventListener('shown.bs.tab', function (e) {
                let target = e.target.getAttribute('data-bs-target');
                history.replaceState(null, null, target);
                sessionStorage.setItem('activeTab_' + window.location.pathname, target);
            });
        });

        function formatISK(val) {
            if(!val) return "";
            let num = parseFloat(val);
            if(isNaN(num)) return "";
            if(num >= 1000000000) return (num / 1000000000).toFixed(2) + "b";
            if(num >= 1000000) return (num / 1000000).toFixed(2) + "m";
            if(num >= 1000) return (num / 1000).toFixed(2) + "k";
            return num.toFixed(2);
        }

        document.querySelectorAll('.isk-format-input').forEach(input => {
            function updateHelper() {
                let helper = document.getElementById(input.id + '-helper');
                if(helper) {
                    let formatted = formatISK(input.value);
                    helper.textContent = formatted ? `( ${formatted} )` : '';
                }
            }
            input.addEventListener('input', updateHelper);
            updateHelper(); // trigger on load
        });

        // Target facility change handler (compatible with Select2 and standard selects)
        function submitFacilityOrDiscountChange() {
            var loadingModal = new bootstrap.Modal(document.getElementById('loadingModal'));
            document.getElementById('loadingModalText').textContent = "{% trans 'Recalculating Quote...' %}";
            document.getElementById('loadingModalDesc').textContent = "{% trans 'Applying new settings and fetching updated blueprint data.' %}";
            loadingModal.show();

            let facility = $('#id_target_facility').val();
            let ignore = $('#ignoreDiscounts').is(':checked') ? 'on' : 'off';
            let form = document.createElement('form');
            form.method = 'POST';
            form.action = "{% url 'industry_reforged:update_quote_me_overrides' order.id %}";

            let csrf = document.createElement('input');
            csrf.type = 'hidden';
            csrf.name = 'csrfmiddlewaretoken';
            csrf.value = document.querySelector('[name=csrfmiddlewaretoken]').value;
            form.appendChild(csrf);

            let tf = document.createElement('input');
            tf.type = 'hidden';
            tf.name = 'target_facility';
            tf.value = facility;
            form.appendChild(tf);

            let ign = document.createElement('input');
            ign.type = 'hidden';
            ign.name = 'ignore_discounts';
            ign.value = ignore;
            form.appendChild(ign);

            document.body.appendChild(form);
            form.submit();
        }

        $('#id_target_facility').on('change', submitFacilityOrDiscountChange);
        $('#ignoreDiscounts').on('change', submitFacilityOrDiscountChange);

        $('#quoteForm').on('submit', function() {
            var loadingModal = new bootstrap.Modal(document.getElementById('loadingModal'));
            document.getElementById('loadingModalText').textContent = "{% trans 'Submitting Quote...' %}";
            document.getElementById('loadingModalDesc').textContent = "{% trans 'Saving quote details and updating order status.' %}";
            loadingModal.show();
        });

        // Dynamic P&L calculation
        const buildCost = {{ estimated_build_cost|stringformat:".2f" }};
        $('#quoteTotal').on('input', function() {
            let newPrice = parseFloat($(this).val()) || 0;
            let margin = newPrice - buildCost;
            
            let formatOpts = { minimumFractionDigits: 2, maximumFractionDigits: 2 };
            $('#pnlSuggestedPrice').text(newPrice.toLocaleString('en-US', formatOpts) + ' ISK');
            
            let marginEl = $('#pnlProfitMargin');
            marginEl.text(margin.toLocaleString('en-US', formatOpts) + ' ISK');
            
            if (margin < 0) {
                marginEl.removeClass('text-success').addClass('text-danger');
            } else {
                marginEl.removeClass('text-danger').addClass('text-success');
            }
        });

        // Dynamic PLEX ISK value
        const plexPrice = {{ plex_price|stringformat:".2f" }};
        $('#quoteUpfrontPlex').on('input', function() {
            let plexQty = parseInt($(this).val()) || 0;
            let totalIsk = plexQty * plexPrice;
            
            let helper = $('#quoteUpfrontPlex-helper');
            if(totalIsk > 0) {
                helper.text('(= ' + formatISK(totalIsk) + ' ISK)');
            } else {
                helper.text('');
            }
        }).trigger('input');
    });
</script>
{% endblock %}