{% 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-3">
        <div class="col-12 d-flex justify-content-between align-items-center">
            <h3>{% trans "Order #" %}<span class="numeric">{{ order.id }}</span></h3>
            <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>

    <!-- Quote Submission Form for Directors -->
    {% if order.status == 'REQUESTED' and perms.industry_reforged.corp_access %}
    <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">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 id="facility-loading" style="display:none;" class="spinner-border spinner-border-sm text-warning ms-2" role="status"></div>
                            </div>
                        </div>
                        <div class="col-sm-3">
                            <label class="form-label text-white mb-1 small">Upfront Payment</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 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">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 text-end">
                            <button type="submit" class="btn btn-warning"><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">
                <li class="nav-item" role="presentation">
                    <button class="nav-link active" id="details-tab" data-bs-toggle="tab" data-bs-target="#details-pane" type="button" role="tab" aria-controls="details-pane" aria-selected="true">{% 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 Overrides" %}</button>
                </li>
                {% endif %}
            </ul>
        </div>
        <div class="card-body p-0 mt-3">
            <div class="tab-content" id="order-tabsContent">

                <!-- TAB 1: ORDER DETAILS -->
                <div class="tab-pane fade show active" id="details-pane" role="tabpanel" aria-labelledby="details-tab" tabindex="0">
                    <div class="row">
                        <div class="col-md-8 mb-4">
                            <div class="card border-0 h-100">
                                <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>
                                            {% for item in order.items.all %}
                                            <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">{{ 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 %}
                                            {% if not order.child_orders.exists %}
                                                <tr><td colspan="6" class="text-center">No items found in parent.</td></tr>
                                            {% endif %}
                                            {% endfor %}

                                            {% for child in order.child_orders.all %}
                                                {% for item in child.items.all %}
                                                <tr {% if perms.industry_reforged.corp_access %}style="opacity: 0.85;"{% endif %}>
                                                    {% if order.status == 'REQUESTED' and perms.industry_reforged.corp_access %}
                                                    <td class="text-center align-middle">
                                                        <!-- Cannot split an item that is already in a suborder -->
                                                    </td>
                                                    {% endif %}
                                                    <td>
                                                        <div class="d-flex align-items-center">
                                                            {% if perms.industry_reforged.corp_access %}
                                                                <i class="fas fa-level-up-alt fa-rotate-90 text-muted me-2 ms-2"></i>
                                                            {% endif %}
                                                            <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>
                                                            {% if perms.industry_reforged.corp_access %}
                                                                <span class="badge bg-secondary ms-2 small">Sub-order #{{ child.id }}</span>
                                                            {% endif %}
                                                        </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>
                                                {% endfor %}
                                            {% endfor %}
                                        </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.grand_total|eve_isk }}</th>
                                            </tr>
                                        </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 }}">{{ 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;
                                                }

                                                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>

                            {% 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>
                        <div class="col-md-4 mb-4">
                            <div class="card border-0 bg-dark h-100">
                                <div class="card-header border-bottom border-secondary">
                                    <h3 class="card-title text-white">{% trans "Order Details" %}</h3>
                                </div>
                                <div class="card-body">
                                    <dl class="row">
                                        <dt class="col-sm-4">{% trans "Status" %}</dt>
                                        <dd class="col-sm-8">
                                            <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-2"  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>
                                                <small class="text-muted numeric">{{ order.progress_percent }}% completed</small>
                                            {% endif %}
                                        </dd>

                                        <dt class="col-sm-4">{% trans "Character" %}</dt>
                                        <dd class="col-sm-8 mb-3">{{ order.character.character_name }}</dd>

                                        <dt class="col-sm-4 text-muted"><i class="fas fa-calendar-plus"></i> {% trans "Created" %}</dt>
                                        <dd class="col-sm-8 text-muted numeric">{{ order.created_at|date:"Y-m-d H:i" }}</dd>

                                        {% if order.quoted_at %}
                                        <dt class="col-sm-4 text-warning"><i class="fas fa-file-invoice-dollar"></i> {% trans "Quoted" %}</dt>
                                        <dd class="col-sm-8 text-warning numeric">{{ order.quoted_at|date:"Y-m-d H:i" }}</dd>
                                        {% endif %}

                                        {% if order.accepted_at %}
                                        <dt class="col-sm-4 text-success"><i class="fas fa-check-circle"></i> {% trans "Accepted" %}</dt>
                                        <dd class="col-sm-8 text-success numeric">{{ order.accepted_at|date:"Y-m-d H:i" }}</dd>
                                        {% endif %}

                                        {% if order.status != 'REQUESTED' and order.status != 'REJECTED' %}
                                        <div class="w-100 my-2 border-bottom border-secondary"></div>


                                        <dt class="col-sm-4 text-info">{% trans "Amount Paid" %}</dt>
                                        <dd class="col-sm-8 text-info numeric">{{ order.amount_paid|eve_isk }}</dd>

                                        <dt class="col-sm-4 text-danger">{% trans "Remaining" %}</dt>
                                        <dd class="col-sm-8 text-danger numeric">{{ order.remaining_balance|eve_isk }}</dd>
                                        {% endif %}
                                    </dl>

                                    {% if order.notes %}
                                    <div class="card bg-dark border-info mb-4 shadow">
                                        <div class="card-header border-info bg-info bg-opacity-10 text-info fw-bold fs-5">
                                            <i class="fas fa-comment-dots me-2"></i> {% trans "Order Notes / Quote" %}
                                        </div>
                                        <div class="card-body">
                                            <div style="white-space: pre-wrap; font-family: inherit; font-size: 1.1rem; line-height: 1.5;" class="text-light">{{ order.notes }}</div>
                                        </div>
                                    </div>
                                    {% endif %}

                                    {% if order.fit %}
                                    <hr style="border-color: rgba(255,255,255,0.1);">
                                    <h5 class="text-warning">{% trans "Raw Fit" %}</h5>
                                    <pre class="bg-dark p-2 text-white border border-secondary rounded" style="max-height: 200px; overflow-y: auto;"><code>{{ order.fit.raw_fit_text }}</code></pre>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                    </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">
                        <div class="col-12 mb-4">
                            <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 Override)" %}</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>
                                                </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>
                                                        </div>
                                                    </td>
                                                    <td>
                                                        {% if order.status == 'REQUESTED' %}
                                                        <input type="number" class="form-control form-control-sm bg-dark text-white border-secondary" name="bp_me_{{ p.type_id }}" value="{{ p.current_me }}" min="0" max="10">
                                                        {% else %}
                                                        <span class="text-white">{{ p.current_me }}%</span>
                                                        {% 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 -->
                {% 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 }}">{{ 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>

<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
        let hash = window.location.hash;
        if (hash) {
            let targetTab = document.querySelector(`button[data-bs-target="${hash}"]`);
            if (targetTab) {
                let tab = new bootstrap.Tab(targetTab);
                tab.show();
            }
        }

        // Update URL hash 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);
            });
        });

        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)
        $('#id_target_facility').on('change', function() {
            $('#facility-loading').show();
            let facility = $(this).val();
            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);

            document.body.appendChild(form);
            form.submit();
        });
    });
</script>
{% endblock %}