{% extends "admin/base.html" %}
{% block page_title %}Нове замовлення{% endblock %}
{% block content %}
<a class="muted" style="font-size:12.5px;" href="{{ url_for('admin.orders_list') }}">← До замовлень</a>
<h1>🧾 Нове замовлення</h1>
<p class="muted field-hint">Для замовлень по телефону, за столиком або на самовивозі, які клієнт зробив не через Telegram-бот — щоб вони теж потрапили в статистику та автоматично списали сировину зі складу.</p>

{% if not products %}
<div class="card">
  <p class="muted" style="margin:0;">У меню ще немає активних товарів — спочатку додайте їх на сторінці <a href="{{ url_for('admin.products_list') }}">Товари</a>.</p>
</div>
{% else %}
<div class="card" style="max-width:640px;margin:0 auto;">
  <form method="post" action="{{ url_for('admin.orders_new') }}">
    <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 }}">{{ order_type_labels[t] }}</option>
      {% endfor %}
    </select>

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

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

    <div id="fields-pickup" class="order-type-fields">
      <label>Час прибуття</label>
      <input type="text" name="pickup_time" 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" placeholder="напр. 5">
    </div>

    <label>Товари</label>
    <div id="order-rows">
      <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 }}">{{ 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>
    </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">Разом: 0 грн</div>

    <h2 style="margin-top:22px;">Оплата й статус</h2>
    <div class="row">
      <div>
        <label>Спосіб оплати</label>
        <select name="payment_method">
          <option value="cash">💵 Готівка</option>
          <option value="card">💳 Картка</option>
        </select>
      </div>
      <div>
        <label>Оплата</label>
        <select name="payment_status">
          <option value="unpaid">Не оплачено</option>
          <option value="paid">Вже оплачено</option>
        </select>
      </div>
    </div>
    <label>Початковий статус</label>
    <select name="status">
      {% for s in statuses %}
      <option value="{{ s }}" {{ 'selected' if s == 'new' }}>{{ {'new': 'Нове', 'confirmed': 'Підтверджено', 'cooking': 'Готується', 'ready': 'Готове', 'courier': "Передано кур'єру", 'completed': 'Виконано', 'cancelled': 'Скасовано'}.get(s, s) }}</option>
      {% endfor %}
    </select>

    <button class="btn" type="submit" style="margin-top:18px;">Створити замовлення</button>
  </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 %}
      <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>
{% endif %}
{% endblock %}