{% extends "base.html" %}

{% block title %}Rohteil — {{ program.program_no }}{% endblock %}
{% block heading %}Rohteil-Definition · {{ program.program_no }}{% endblock %}

{% block topbar_actions %}
  <a href="/programs/{{ program.id }}" class="btn btn-secondary btn-sm">← zurück zum Programm</a>
{% endblock %}

{% block content %}
<div style="max-width:1100px; margin:0 auto;">

  <div class="card" style="margin-bottom:14px;background:rgba(245,158,11,0.05);border-color:rgba(245,158,11,0.25);">
    <div class="card-body" style="padding:14px 18px;font-size:13px;line-height:1.55;color:#cbd5e1;">
      <strong style="color:#fbbf24;">📦 Bevor du den Code editierst, definiere zuerst das Rohteil.</strong>
      Maße, Material und Spannlage sind die Grundlage für die Schnittwerte, die 3D-Visualisierung
      des abzutragenden Materials sowie die Werkzeug-Prüfung auf der Zielmaschine.
    </div>
  </div>

  <form method="post" action="/programs/{{ program.id }}/blank">
    {{ csrf_field(request) }}

    <!-- ============= 1. FORM ============= -->
    <div class="card" style="margin-bottom:14px;">
      <div class="card-header">
        <h3 style="margin:0;">1. Rohteil-Form</h3>
        <p class="sub" style="margin:2px 0 0;">Wähle die Geometrie — die Maße passen sich automatisch an.</p>
      </div>
      <div class="card-body" style="padding:18px;">
        <div style="display:grid;grid-template-columns:repeat(5,1fr);gap:10px;">
          {% set current_shape = program.blank_shape or 'block' %}
          {% for sh, label, hint in [
            ('block',    '⬛ Block',      'BxHxL — Frästeile, Platte'),
            ('cylinder', '⚪ Zylinder',   'Ø × L — Drehteil, Rundmaterial'),
            ('tube',     '⊙ Rohr',       'Øa/Øi × L — Hohlwelle, Buchse'),
            ('hex',      '⬢ Sechskant',  'SW × L — Schraube, Achse'),
            ('custom',   '◧ Custom',     'Freiform / vordefinierte Gussform')
          ] %}
          <label style="cursor:pointer;display:block;">
            <input type="radio" name="blank_shape" value="{{ sh }}"
                   {% if current_shape == sh %}checked{% endif %}
                   onchange="toggleShape('{{ sh }}')"
                   style="display:none;">
            <div class="shape-card" data-shape="{{ sh }}"
                 style="border:2px solid {% if current_shape == sh %}#356692{% else %}rgba(255,255,255,0.12){% endif %};
                        background:{% if current_shape == sh %}rgba(53,102,146,0.15){% else %}rgba(255,255,255,0.03){% endif %};
                        border-radius:8px;padding:14px;text-align:center;transition:all .15s;">
              <div style="font-size:18px;font-weight:600;color:#fafafa;">{{ label }}</div>
              <div style="font-size:11px;color:#94a3b8;margin-top:4px;">{{ hint }}</div>
            </div>
          </label>
          {% endfor %}
        </div>
      </div>
    </div>

    <!-- ============= 2. MAßE ============= -->
    <div class="card" style="margin-bottom:14px;">
      <div class="card-header">
        <h3 style="margin:0;">2. Maße [mm]</h3>
      </div>
      <div class="card-body" style="padding:18px;">

        <!-- BLOCK: X × Y × Z -->
        <div class="shape-fields" data-shape="block" style="display:grid;grid-template-columns:repeat(3,1fr);gap:14px;">
          <div>
            <label class="lbl">Länge X (mm)</label>
            <input type="number" step="0.1" class="input w-full" name="blank_x_mm"
                   value="{{ program.blank_x_mm or '' }}" placeholder="z.B. 120" onchange="recalcWeight()">
          </div>
          <div>
            <label class="lbl">Breite Y (mm)</label>
            <input type="number" step="0.1" class="input w-full" name="blank_y_mm"
                   value="{{ program.blank_y_mm or '' }}" placeholder="z.B. 60" onchange="recalcWeight()">
          </div>
          <div>
            <label class="lbl">Höhe Z (mm)</label>
            <input type="number" step="0.1" class="input w-full" name="blank_z_mm"
                   value="{{ program.blank_z_mm or '' }}" placeholder="z.B. 20" onchange="recalcWeight()">
          </div>
        </div>

        <!-- CYLINDER: Ø × Länge -->
        <div class="shape-fields" data-shape="cylinder" style="display:none;grid-template-columns:repeat(2,1fr);gap:14px;">
          <div>
            <label class="lbl">Außendurchmesser Ø (mm)</label>
            <input type="number" step="0.1" class="input w-full" name="blank_d_outer_mm"
                   value="{{ program.blank_d_outer_mm or '' }}" placeholder="z.B. 32" onchange="recalcWeight()">
          </div>
          <div>
            <label class="lbl">Länge (mm)</label>
            <input type="number" step="0.1" class="input w-full" name="blank_length_mm"
                   value="{{ program.blank_length_mm or '' }}" placeholder="z.B. 120" onchange="recalcWeight()">
          </div>
        </div>

        <!-- TUBE: Øa / Øi × L -->
        <div class="shape-fields" data-shape="tube" style="display:none;grid-template-columns:repeat(3,1fr);gap:14px;">
          <div>
            <label class="lbl">Außen-Ø (mm)</label>
            <input type="number" step="0.1" class="input w-full" name="blank_d_outer_mm"
                   value="{{ program.blank_d_outer_mm or '' }}" placeholder="z.B. 50" onchange="recalcWeight()">
          </div>
          <div>
            <label class="lbl">Innen-Ø (mm)</label>
            <input type="number" step="0.1" class="input w-full" name="blank_d_inner_mm"
                   value="{{ program.blank_d_inner_mm or '' }}" placeholder="z.B. 35" onchange="recalcWeight()">
          </div>
          <div>
            <label class="lbl">Länge (mm)</label>
            <input type="number" step="0.1" class="input w-full" name="blank_length_mm"
                   value="{{ program.blank_length_mm or '' }}" placeholder="z.B. 80" onchange="recalcWeight()">
          </div>
        </div>

        <!-- HEX: SW × L -->
        <div class="shape-fields" data-shape="hex" style="display:none;grid-template-columns:repeat(2,1fr);gap:14px;">
          <div>
            <label class="lbl">Schlüsselweite SW (mm)</label>
            <input type="number" step="0.1" class="input w-full" name="blank_sw_mm"
                   value="{{ program.blank_sw_mm or '' }}" placeholder="z.B. 24" onchange="recalcWeight()">
          </div>
          <div>
            <label class="lbl">Länge (mm)</label>
            <input type="number" step="0.1" class="input w-full" name="blank_length_mm"
                   value="{{ program.blank_length_mm or '' }}" placeholder="z.B. 60" onchange="recalcWeight()">
          </div>
        </div>

        <!-- CUSTOM: nur Notiz -->
        <div class="shape-fields" data-shape="custom" style="display:none;">
          <label class="lbl">Beschreibung der Custom-Geometrie</label>
          <textarea name="blank_notes" rows="3" class="input w-full"
                    placeholder="z.B. Gussrohling 'GR-4711', Rohteil-Zeichnung im DMS">{{ program.blank_notes or '' }}</textarea>
        </div>

      </div>
    </div>

    <!-- ============= 3. MATERIAL ============= -->
    <div class="card" style="margin-bottom:14px;">
      <div class="card-header">
        <h3 style="margin:0;">3. Material</h3>
      </div>
      <div class="card-body" style="padding:18px;">
        <div style="display:grid;grid-template-columns:2fr 2fr 1fr 1fr;gap:14px;">
          <div>
            <label class="lbl">Werkstoff</label>
            <input list="dl-materials" class="input w-full" name="blank_material"
                   value="{{ program.blank_material or program.material or '' }}"
                   placeholder="z.B. C45, 1.4301, AlMgSi1"
                   onchange="recalcWeight()">
            <datalist id="dl-materials">
              {% for m in materials %}<option value="{{ m }}">{% endfor %}
            </datalist>
          </div>
          <div>
            <label class="lbl">Norm / Lieferform (optional)</label>
            <input type="text" class="input w-full" name="blank_norm"
                   value="{{ program.blank_norm or '' }}"
                   placeholder="z.B. EN 10025-2, DIN 1.7225 +QT">
          </div>
          <div>
            <label class="lbl">Dichte (g/cm³, optional)</label>
            <input type="number" step="0.01" class="input w-full" id="density-input"
                   placeholder="auto" onchange="recalcWeight()">
          </div>
          <div>
            <label class="lbl">Gewicht (kg)</label>
            <input type="number" step="0.001" class="input w-full" name="blank_weight_kg"
                   id="weight-input"
                   value="{{ '%.3f'|format(program.blank_weight_kg) if program.blank_weight_kg else '' }}"
                   placeholder="auto">
            <div style="font-size:10px;color:#64748b;margin-top:2px;">leer = auto-berechnen</div>
          </div>
        </div>
      </div>
    </div>

    <!-- ============= 4. SPANNUNG / NULLPUNKT / MASCHINE ============= -->
    <div class="card" style="margin-bottom:14px;">
      <div class="card-header">
        <h3 style="margin:0;">4. Spannlage &amp; Maschine</h3>
      </div>
      <div class="card-body" style="padding:18px;">
        <div style="display:grid;grid-template-columns:1fr 2fr 2fr;gap:14px;">
          <div>
            <label class="lbl">Nullpunkt-Versatz</label>
            <select class="select w-full" name="blank_zero_point">
              {% for zp in ['G54','G55','G56','G57','G58','G59','G54.1 P1','G54.1 P2'] %}
              <option value="{{ zp }}" {% if (program.blank_zero_point or 'G54') == zp %}selected{% endif %}>{{ zp }}</option>
              {% endfor %}
            </select>
          </div>
          <div>
            <label class="lbl">Spannmittel</label>
            <input type="text" class="input w-full" name="blank_clamping"
                   value="{{ program.blank_clamping or '' }}"
                   placeholder="z.B. 3-Backen-Futter Ø80 / Schraubstock 125 mm">
          </div>
          <div>
            <label class="lbl">Ziel-Maschine</label>
            <select class="select w-full" name="blank_machine_id">
              <option value="">— frei wählbar —</option>
              {% for m in machines %}
              <option value="{{ m.id }}"
                {% if program.blank_machine_id == m.id %}selected{% endif %}>
                {{ m.name }}{% if m.machine_no %} ({{ m.machine_no }}){% endif %}
                {%- if m.manufacturer %} · {{ m.manufacturer }}{% endif %}
              </option>
              {% endfor %}
            </select>
            <div style="font-size:10px;color:#64748b;margin-top:2px;">
              Werkzeugplan dieser Maschine wird beim Speichern geprüft
            </div>
          </div>
        </div>

        {% set _ = '' %}
        <div style="margin-top:14px;">
          <label class="lbl">Notiz / Hinweise (optional)</label>
          <textarea name="blank_notes" rows="2" class="input w-full"
                    placeholder="z.B. „Rohteil leicht übermaßig, abrichten" oder „kommt direkt aus Säge"">{{ program.blank_notes or '' }}</textarea>
        </div>
      </div>
    </div>

    <!-- ============= AKTION ============= -->
    <div style="display:flex;justify-content:space-between;align-items:center;margin:18px 0 40px;">
      <a href="/programs/{{ program.id }}" class="btn btn-secondary">Abbrechen</a>
      <button type="submit" class="btn btn-primary" style="padding:10px 24px;">
        💾 Rohteil speichern &amp; weiter zum Programm
      </button>
    </div>
  </form>

</div>

<style>
.lbl {
  display:block; font-size:10px; text-transform:uppercase;
  letter-spacing:1px; font-weight:600; color:#94a3b8; margin-bottom:6px;
}
.shape-card:hover { background:rgba(255,255,255,0.06)!important; }
</style>

<script>
const DENSITIES = {{ densities_json|safe }};

function toggleShape(shape) {
  document.querySelectorAll('.shape-card').forEach(el => {
    if (el.dataset.shape === shape) {
      el.style.border = '2px solid #356692';
      el.style.background = 'rgba(53,102,146,0.15)';
    } else {
      el.style.border = '2px solid rgba(255,255,255,0.12)';
      el.style.background = 'rgba(255,255,255,0.03)';
    }
  });
  document.querySelectorAll('.shape-fields').forEach(el => {
    el.style.display = (el.dataset.shape === shape) ? 'grid' : 'none';
  });
  recalcWeight();
}

function getNum(name) {
  const el = document.querySelector('[name="' + name + '"]');
  if (!el || !el.value) return 0;
  return parseFloat(el.value.replace(',', '.')) || 0;
}

function recalcWeight() {
  const shape = document.querySelector('[name="blank_shape"]:checked').value;
  const material = (document.querySelector('[name="blank_material"]').value || '').trim();
  const densityInput = document.getElementById('density-input');
  let density = parseFloat(densityInput.value) || DENSITIES[material] || 7.85;

  let v_cm3 = 0;
  if (shape === 'block') {
    v_cm3 = (getNum('blank_x_mm') * getNum('blank_y_mm') * getNum('blank_z_mm')) / 1000;
  } else if (shape === 'cylinder') {
    const r = getNum('blank_d_outer_mm') / 2;
    v_cm3 = (Math.PI * r * r * getNum('blank_length_mm')) / 1000;
  } else if (shape === 'tube') {
    const ro = getNum('blank_d_outer_mm') / 2;
    const ri = getNum('blank_d_inner_mm') / 2;
    v_cm3 = (Math.PI * (ro * ro - ri * ri) * getNum('blank_length_mm')) / 1000;
  } else if (shape === 'hex') {
    const sw = getNum('blank_sw_mm');
    const a = sw / Math.sqrt(3);
    const area_mm2 = 1.5 * Math.sqrt(3) * a * a;
    v_cm3 = (area_mm2 * getNum('blank_length_mm')) / 1000;
  }
  const weight = v_cm3 * density / 1000;
  if (weight > 0) {
    document.getElementById('weight-input').placeholder = weight.toFixed(3) + ' kg (auto)';
    if (!document.getElementById('weight-input').value) {
      // Show calculated value in placeholder, but only auto-fill if empty
    }
  }
}

// Initial-Setup
document.addEventListener('DOMContentLoaded', function() {
  const checked = document.querySelector('[name="blank_shape"]:checked');
  if (checked) toggleShape(checked.value);
  recalcWeight();
});
</script>
{% endblock %}