{% extends "admin/base.html" %}
{% block page_title %}Редагувати замовлення {{ order.display_number() }}{% endblock %}
{% block content %}
<a class="muted" style="font-size:12.5px;" href="{{ url_for('admin.orders_detail', order_id=order.id) }}">← До замовлення</a>
<h1>✏️ Редагувати замовлення {{ order.display_number() }}</h1>

{% if order.fiscal_status == 'done' %}
<div class="flash warning" style="max-width:640px;margin:0 auto 16px;">
  ⚠️ По цьому замовленню вже сформовано фіскальний чек — зміна суми чи товарів тут <b>не</b> оновить сам чек у Checkbox/податковій.
</div>
{% endif %}

<div class="card" style="max-width:640px;margin:0 auto;">
  <form method="post" action="{{ url_for('admin.orders_edit', order_id=order.id) }}">
    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">

    <label>Тип замовлення</label>
    <select name="order_type" id="order-type" onchange="syncOrderTypeFields()">
      {% for t in order_types %}
      <option value="{{ t }}" {{ 'selected' if order.order_type == t }}>{{ order_type_labels[t] }}</option>
      {% endfor %}
    </select>

    <div class="row">
      <div>
        <label>Ім'я клієнта <span class="muted">(необов'язково)</span></label>
        <input type="text" name="customer_name" value="{{ order.customer_name or '' }}" placeholder="Гість">
      </div>
      <div>
        <label>Телефон <span class="muted">(необов'язково)</span></label>
        <input type="text" name="customer_phone" value="{{ order.customer_phone or '' }}" placeholder="+380...">
      </div>
    </div>

    <div id="fields-delivery" class="order-type-fields">
      <label>Місто</label>
      <input type="text" name="address_city" value="{{ order.address_city or '' }}" placeholder="Київ">
      <div class="row">
        <div>
          <label>Вулиця</label>
          <input type="text" name="address_street" value="{{ order.address_street or '' }}">
        </div>
        <div>
          <label>Будинок</label>
          <input type="text" name="address_house" value="{{ order.address_house or '' }}">
        </div>
      </div>
      <label>Квартира / офіс <span class="muted">(необов'язково)</span></label>
      <input type="text" name="address_apartment" value="{{ order.address_apartment or '' }}">
    </div>

    <div id="fields-pickup" class="order-type-fields">
      <label>Час прибуття</label>
      <input type="text" name="pickup_time" value="{{ order.pickup_time or '' }}" placeholder="напр. 19:30">
    </div>

    <div id="fields-dine_in" class="order-type-fields">
      <label>Номер столика <span class="muted">(необов'язково)</span></label>
      <input type="text" name="table_number" value="{{ order.table_number or '' }}" placeholder="напр. 5">
    </div>

    <label>Товари</label>
    <div id="order-rows">
      {% for item in order.items %}
      <div class="recipe-row">
        <select name="product_id" onchange="onProductChange(this)">
          <option value="">— оберіть товар —</option>
          {% for p in products %}
          <option value="{{ p.id }}" data-price="{{ p.effective_unit_price }}" {{ 'selected' if p.id == item.product_id }}>{{ p.name }} — {{ '≈' if p.pricing_mode == 'per_100g' }}{{ p.effective_unit_price }} грн{{ '' if p.is_active else ' (знято з продажу)' }}</option>
          {% endfor %}
        </select>
        <input type="number" name="quantity" min="1" value="{{ item.quantity }}" oninput="recalcTotal()">
        <input type="number" name="unit_price" min="0" value="{{ item.product_price }}" oninput="this.dataset.touched='1'; recalcTotal();" title="Ціна за одиницю (можна змінити вручну)">
        <button type="button" class="btn small danger" onclick="this.closest('.recipe-row').remove(); recalcTotal();" aria-label="Прибрати рядок">✕</button>
      </div>
      {% endfor %}
    </div>
    <button type="button" class="btn secondary small" onclick="addOrderRow();" style="margin-top:10px;">+ Додати товар</button>

    <div style="text-align:right;font-weight:700;font-size:16px;margin-top:14px;" id="order-total">Разом товарів: {{ order.items_total }} грн</div>
    <p class="muted field-hint" style="text-align:right;">Доставку/знижку самовивозу перерахує система при збереженні за поточними налаштуваннями.</p>

    <h2 style="margin-top:22px;">🏷️ Персональна знижка</h2>
    <div class="row">
      <div>
        <label>Сума знижки, грн</label>
        <input type="number" name="manual_discount_amount" min="0" value="{{ order.manual_discount_amount or 0 }}">
      </div>
      <div>
        <label>Причина <span class="muted">(необов'язково)</span></label>
        <input type="text" name="manual_discount_note" value="{{ order.manual_discount_note or '' }}" placeholder="напр. постійний клієнт">
      </div>
    </div>
    {% if order.promo_code %}
    <p class="muted field-hint">Промокод «{{ order.promo_code }}» (−{{ order.promo_discount_amount }} грн) застосований окремо й лишається без змін.</p>
    {% endif %}

    <h2 style="margin-top:22px;">Оплата</h2>
    <div class="row">
      <div>
        <label>Спосіб оплати</label>
        <select name="payment_method">
          <option value="cash" {{ 'selected' if order.payment_method == 'cash' }}>💵 Готівка</option>
          <option value="card" {{ 'selected' if order.payment_method == 'card' }}>💳 Картка</option>
        </select>
      </div>
      <div>
        <label>Оплата</label>
        <select name="payment_status">
          <option value="unpaid" {{ 'selected' if order.payment_status != 'paid' }}>Не оплачено</option>
          <option value="paid" {{ 'selected' if order.payment_status == 'paid' }}>Оплачено</option>
        </select>
      </div>
    </div>
    <p class="muted field-hint">Статус виконання (Нове / Готується / Виконано тощо) редагується окремо, на сторінці замовлення.</p>

    <div style="margin-top:16px;display:flex;gap:10px;">
      <button class="btn" type="submit">Зберегти зміни</button>
      <a class="btn secondary" href="{{ url_for('admin.orders_detail', order_id=order.id) }}">Скасувати</a>
    </div>
  </form>
</div>

<template id="order-row-template">
  <div class="recipe-row">
    <select name="product_id" onchange="onProductChange(this)">
      <option value="">— оберіть товар —</option>
      {% for p in products if p.is_active %}
      <option value="{{ p.id }}" data-price="{{ p.effective_unit_price }}">{{ p.name }} — {{ '≈' if p.pricing_mode == 'per_100g' }}{{ p.effective_unit_price }} грн</option>
      {% endfor %}
    </select>
    <input type="number" name="quantity" min="1" value="1" oninput="recalcTotal()">
    <input type="number" name="unit_price" min="0" value="" oninput="this.dataset.touched='1'; recalcTotal();" title="Ціна за одиницю (можна змінити вручну)">
    <button type="button" class="btn small danger" onclick="this.closest('.recipe-row').remove(); recalcTotal();" aria-label="Прибрати рядок">✕</button>
  </div>
</template>

<script>
  function syncOrderTypeFields() {
    var type = document.getElementById('order-type').value;
    document.querySelectorAll('.order-type-fields').forEach(function (el) {
      el.style.display = (el.id === 'fields-' + type) ? 'block' : 'none';
    });
  }

  function addOrderRow() {
    var tpl = document.getElementById('order-row-template');
    document.getElementById('order-rows').appendChild(tpl.content.cloneNode(true));
    recalcTotal();
  }

  function onProductChange(select) {
    var row = select.closest('.recipe-row');
    var priceInput = row.querySelector('input[name="unit_price"]');
    var option = select.options[select.selectedIndex];
    var price = option ? (option.dataset.price || '0') : '0';
    // Only auto-fill if this row's price hasn't been hand-edited yet, so
    // switching products doesn't clobber a deliberate manual override.
    if (!priceInput.dataset.touched) priceInput.value = price;
    recalcTotal();
  }

  function recalcTotal() {
    var total = 0;
    document.querySelectorAll('#order-rows .recipe-row').forEach(function (row) {
      var priceInput = row.querySelector('input[name="unit_price"]');
      var qtyInput = row.querySelector('input[name="quantity"]');
      var price = parseFloat(priceInput.value || '0');
      var qty = parseInt(qtyInput.value, 10) || 0;
      total += price * qty;
    });
    document.getElementById('order-total').textContent = 'Разом товарів: ' + total + ' грн';
  }

  syncOrderTypeFields();
  recalcTotal();
</script>
{% endblock %}