{% load i18n static %}
<div class="mbom-root" id="mbom-root">

  <!-- ===================== Toolbar ===================== -->
  <div class="mbom-toolbar">
    <h5 class="mbom-toolbar-title">
      <i class="fas fa-cogs"></i>
      {% trans "Manufacturing Routing (mBOM)" %}
      {% if routing %}
        <span style="font-size:0.72rem;font-weight:400;opacity:0.55;margin-left:4px;">
          #{{ routing.pk }}
        </span>
      {% endif %}
      {% if part.locked %}
        <span class="mbom-badge mbom-badge--locked" title="{% trans 'Part is locked. Changes prohibited.' %}">
          <i class="fas fa-lock"></i> {% trans "Locked" %}
        </span>
      {% endif %}
    </h5>

    <!-- Batch size control -->
    <div class="mbom-batch-info">
      <i class="fas fa-layer-group" title="Standard batch size"></i>
      <label for="mbom-batch-input" style="margin:0;font-size:0.78rem;">Batch:</label>
      <input type="number" id="mbom-batch-input"
             value="{{ routing.standard_batch_size|default:1 }}"
             min="1"
             {% if part.locked %}disabled title="{% trans 'Part is locked' %}" style="width:64px;opacity:0.6;cursor:not-allowed;"{% else %}style="width:64px;"{% endif %}>
    </div>

    <!-- Last modified timestamp & user -->
    <div class="mbom-last-updated" id="mbom-last-updated" {% if not routing or not routing.updated %}style="display:none;"{% endif %} title="Last modified timestamp and user">
      <i class="fas fa-history"></i>
      <span class="mbom-last-updated-label">Last Changed:</span>
      <span class="mbom-last-updated-value" id="mbom-last-updated-text">{% if routing and routing.updated %}{{ routing.updated|date:"Y-m-d H:i" }}{% if routing.updated_by %} · {{ routing.updated_by.get_full_name|default:routing.updated_by.username }}{% endif %}{% else %}—{% endif %}</span>
    </div>

    <div class="mbom-toolbar-actions">
      <a class="mbom-btn mbom-btn--ghost"
         href="/web/settings/system/mbom-settings-panel" target="_blank"
         title="{% trans 'Manage central labor rates, machines, and templates in Settings' %}">
        <i class="fas fa-sliders-h"></i>
        <span>{% trans "Rates &amp; Tariffs" %} ↗</span>
      </a>
      {% if not part.locked %}
      <button class="mbom-btn mbom-btn--ghost"
              data-action="open-template-dialog"
              title="Seed routing from a process template">
        <i class="fas fa-magic"></i>
        <span>{% trans "Apply Template" %}</span>
      </button>
      <button class="mbom-btn mbom-btn--success"
              data-action="open-add-op"
              title="Add a new operation manually">
        <i class="fas fa-plus"></i>
        <span>{% trans "Add Operation" %}</span>
      </button>
      {% endif %}
    </div>
  </div>

  {% if part.locked %}
  <div class="mbom-locked-banner">
    <i class="fas fa-lock"></i>
    <span>{% trans "This part is locked. Manufacturing routing operations, timing, and batch configurations cannot be modified." %}</span>
  </div>
  {% endif %}

  <!-- ===================== Cost Summary Cards ===================== -->
  <div class="mbom-summary-grid">

    <div class="mbom-card mbom-card--material">
      <div class="mbom-card__label">
        <i class="fas fa-boxes"></i> {% trans "Material (eBOM)" %}
      </div>
      <div class="mbom-card__value loading" id="mbom-c-material">…</div>
      <div class="mbom-card__sub">{% trans "native InvenTree pricing" %}</div>
    </div>

    <div class="mbom-card mbom-card--labor">
      <div class="mbom-card__label">
        <i class="fas fa-user-hard-hat"></i> {% trans "Labor" %}
      </div>
      <div class="mbom-card__value loading" id="mbom-c-labor">…</div>
      <div class="mbom-card__sub">{% trans "setup + cycle × qty" %}</div>
    </div>

    <div class="mbom-card mbom-card--machine">
      <div class="mbom-card__label">
        <i class="fas fa-cog"></i> {% trans "Machine" %}
      </div>
      <div class="mbom-card__value loading" id="mbom-c-machine">…</div>
      <div class="mbom-card__sub">{% trans "setup + cycle × qty" %}</div>
    </div>

    <div class="mbom-card mbom-card--total">
      <div class="mbom-card__label">
        <i class="fas fa-calculator"></i> {% trans "Total / Unit" %}
      </div>
      <div class="mbom-card__value loading" id="mbom-c-total">…</div>
      <div class="mbom-card__sub">
        {% trans "batch" %}: <span id="mbom-batch-display">{{ routing.standard_batch_size|default:1 }}</span>
      </div>
    </div>

    <div class="mbom-card mbom-card--co2" style="grid-column: span 1;">
      <div class="mbom-card__label">
        <i class="fas fa-leaf"></i> CO₂
      </div>
      <div class="mbom-card__value loading" id="mbom-c-co2">…</div>
      <div class="mbom-card__sub">{% trans "total batch emissions" %}</div>
    </div>

  </div>

  <!-- ===================== Operations Table / Empty State ===================== -->
  <div id="mbom-ops-container">
    {% if not routing %}
      {% if part.locked %}
      <div class="mbom-empty mbom-quickstart-hero">
        <div class="mbom-quickstart-icon">🔒</div>
        <h4 class="mbom-quickstart-title">{% trans "Manufacturing Routing (mBOM)" %}</h4>
        <p class="mbom-quickstart-sub">{% trans "This assembly has no routing defined, and editing is disabled because the part is locked." %}</p>
      </div>
      {% else %}
      <div class="mbom-empty mbom-quickstart-hero">
        <div class="mbom-quickstart-icon">⚙️</div>
        <h4 class="mbom-quickstart-title">{% trans "Manufacturing Routing (mBOM)" %}</h4>
        <p class="mbom-quickstart-sub">{% trans "This assembly has no routing defined yet. Select a process template to generate operations instantly, or start with a custom routing." %}</p>
        
        <div class="mbom-quickstart-actions">
          <div class="mbom-quickstart-template-bar">
            <select id="mbom-quick-template-select" class="mbom-select">
              <option value="">— {% trans "Select Process Template…" %} —</option>
              {% for t in templates %}
                <option value="{{ t.pk }}" {% if forloop.first %}selected{% endif %}>{{ t.name }}</option>
              {% endfor %}
            </select>
            <div style="display:flex;align-items:center;gap:6px;">
              <label for="mbom-quick-batch" style="font-size:0.8rem;opacity:0.75;">{% trans "Batch" %}:</label>
              <input type="number" id="mbom-quick-batch" value="50" min="1" style="width:60px;" class="mbom-input">
            </div>
            <button class="mbom-btn mbom-btn--primary" data-action="quick-apply-template">
              <i class="fas fa-magic"></i>
              <span>{% trans "Apply &amp; Generate Routing" %}</span>
            </button>
          </div>

          <div class="mbom-quickstart-divider"><span>{% trans "or" %}</span></div>

          <button class="mbom-btn mbom-btn--ghost" data-action="create-empty-routing">
            <i class="fas fa-plus"></i>
            <span>{% trans "+ Create Empty Routing" %}</span>
          </button>
        </div>
      </div>
      {% endif %}
    {% else %}
    <div style="text-align:center;padding:32px 16px;color:#6b7280;">
      <span class="mbom-spinner"></span>&nbsp;{% trans "Loading routing…" %}
    </div>
    {% endif %}
  </div>

</div><!-- /mbom-root -->


<!-- ===================== Apply Template Dialog ===================== -->
<div class="mbom-backdrop" id="mbom-tmpl-backdrop">
  <div class="mbom-dialog">
    <div class="mbom-dialog__header">
      <h6 class="mbom-dialog__title">
        <i class="fas fa-magic"></i>
        {% trans "Apply Process Template" %}
      </h6>
      <button class="mbom-dialog__close" data-action="close-dialog">
        <i class="fas fa-times"></i>
      </button>
    </div>
    <div class="mbom-dialog__body">
      <div class="mbom-form-grid full">
        <div class="mbom-field">
          <label>{% trans "Process Template" %}</label>
          <select id="mbom-tmpl-select">
            <option value="">— {% trans "Select a template" %} —</option>
            {% for t in templates %}
              <option value="{{ t.pk }}">{{ t.name }}</option>
            {% empty %}
              <option disabled>{% trans "No templates defined yet" %}</option>
            {% endfor %}
          </select>
        </div>
      </div>
      <div class="mbom-form-grid" style="margin-top:10px;">
        <div class="mbom-field">
          <label>{% trans "Standard Batch Size" %}</label>
          <input type="number" id="mbom-tmpl-batch" value="{{ routing.standard_batch_size|default:1 }}" min="1">
        </div>
        <div class="mbom-field">
          <label>{% trans "If routing already exists" %}</label>
          <select id="mbom-tmpl-overwrite">
            <option value="add">{% trans "Add (combine with existing)" %}</option>
            <option value="overwrite">{% trans "Overwrite (replace operations)" %}</option>
            <option value="skip">{% trans "Keep existing (skip)" %}</option>
          </select>
        </div>
      </div>
    </div>
    <div class="mbom-dialog__footer">
      <button class="mbom-btn mbom-btn--ghost" data-action="close-dialog">
        {% trans "Cancel" %}
      </button>
      <button class="mbom-btn mbom-btn--primary" id="mbom-tmpl-apply-btn" data-action="apply-template">
        <i class="fas fa-magic"></i> {% trans "Apply" %}
      </button>
    </div>
  </div>
</div>


<!-- ===================== Add / Edit Operation Dialog ===================== -->
<div class="mbom-backdrop" id="mbom-op-backdrop">
  <div class="mbom-dialog">
    <div class="mbom-dialog__header">
      <h6 class="mbom-dialog__title" id="mbom-op-dialog-title">
        <i class="fas fa-plus"></i> {% trans "Add Operation" %}
      </h6>
      <button class="mbom-dialog__close" data-action="close-dialog">
        <i class="fas fa-times"></i>
      </button>
    </div>
    <div class="mbom-dialog__body">
      <input type="hidden" id="mbom-op-id">
      <div class="mbom-form-grid">

        <div class="mbom-field">
          <label>{% trans "Sequence Number" %} *</label>
          <input type="text" id="mbom-op-seq" placeholder="e.g. 10, 10.1, 20">
        </div>

        <div class="mbom-field" id="mbom-op-parent-field">
          <label>{% trans "Parent Operation" %}</label>
          <select id="mbom-op-parent">
            <option value="">— {% trans "None (top-level)" %} —</option>
            <!-- Populated by JS -->
          </select>
        </div>

        <div class="mbom-field" style="grid-column: 1 / -1;">
          <label>{% trans "Operation Name" %} *</label>
          <input type="text" id="mbom-op-name" placeholder="e.g. SMT Assembly, CNC Turning, Final Inspection">
        </div>

        <!-- Section: Resources -->
        <div class="mbom-field--section-label">
          <i class="fas fa-users-cog"></i> {% trans "Resources" %}
        </div>

        <div class="mbom-field">
          <label>{% trans "Labor Rate" %}</label>
          <select id="mbom-op-labor">
            <option value="">— {% trans "None" %} —</option>
            {% for lr in labor_rates %}
              <option value="{{ lr.pk }}">{{ lr.name }}  ({{ lr.hourly_rate }} {{ lr.currency }}/hr)</option>
            {% endfor %}
          </select>
        </div>

        <div class="mbom-field">
          <label>{% trans "Machine Center" %}</label>
          <select id="mbom-op-machine">
            <option value="">— {% trans "None" %} —</option>
            {% for mc in machine_centers %}
              <option value="{{ mc.pk }}">{{ mc.name }}  ({{ mc.hourly_rate }} {{ mc.currency }}/hr)</option>
            {% endfor %}
          </select>
        </div>

        <!-- Section: Times -->
        <div class="mbom-field--section-label">
          <i class="fas fa-clock"></i> {% trans "Cycle Times" %}
        </div>

        <div class="mbom-field">
          <label>{% trans "Setup Time (min)" %}</label>
          <input type="number" id="mbom-op-setup" value="0" min="0" step="1"
                 placeholder="Fixed per batch">
        </div>

        <div class="mbom-field">
          <label>{% trans "Cycle Time / Unit (min)" %}</label>
          <input type="number" id="mbom-op-cycle" value="0" min="0" step="1"
                 placeholder="Recurring per unit">
        </div>

        <!-- Section: Notes -->
        <div class="mbom-field--section-label">
          <i class="fas fa-sticky-note"></i> {% trans "Notes" %}
        </div>

        <div class="mbom-field" style="grid-column: 1 / -1;">
          <label>{% trans "Description / Tool Notes" %}</label>
          <textarea id="mbom-op-desc" rows="2"
                    placeholder="{% trans 'Optional tool spec, fixture ID, quality note…' %}"></textarea>
        </div>

      </div>
    </div>
    <div class="mbom-dialog__footer">
      <button class="mbom-btn mbom-btn--ghost" data-action="close-dialog">
        {% trans "Cancel" %}
      </button>
      <button class="mbom-btn mbom-btn--success" id="mbom-op-save-btn" data-action="save-op">
        <i class="fas fa-save"></i> {% trans "Save" %}
      </button>
    </div>
  </div>
</div>

<!-- ===================== Panel Bootstrap Script & JSON Config ===================== -->
<script type="application/json" id="mbom-config-data">
{
  "partId": {{ part.pk }},
  "isLocked": {% if part.locked %}true{% else %}false{% endif %},
  "routingId": {% if routing %}{{ routing.pk }}{% else %}null{% endif %},
  "updated": {% if routing and routing.updated %}"{{ routing.updated.isoformat }}"{% else %}null{% endif %},
  "updatedBy": {% if routing and routing.updated_by %}"{{ routing.updated_by.get_full_name|default:routing.updated_by.username|escapejs }}"{% else %}null{% endif %},
  "pluginBase": "/plugin/inventree-mbom",
  "currency": "{{ currency|default:'EUR' }}",
  "batchSize": {{ routing.standard_batch_size|default:1 }},
  "laborRates": [
    {% for lr in labor_rates %}
    {"pk": {{ lr.pk }}, "name": "{{ lr.name|escapejs }}", "hourly_rate": "{{ lr.hourly_rate }}", "currency": "{{ lr.currency }}"}{% if not forloop.last %},{% endif %}
    {% endfor %}
  ],
  "machineCenters": [
    {% for mc in machine_centers %}
    {"pk": {{ mc.pk }}, "name": "{{ mc.name|escapejs }}", "hourly_rate": "{{ mc.hourly_rate }}", "currency": "{{ mc.currency }}"}{% if not forloop.last %},{% endif %}
    {% endfor %}
  ],
  "templates": [
    {% for t in templates %}
    {"pk": {{ t.pk }}, "name": "{{ t.name|escapejs }}"}{% if not forloop.last %},{% endif %}
    {% endfor %}
  ]
}
</script>