{% extends "admin/base.html" %}
{% block page_title %}Склад{% endblock %}
{% block content %}
<h1>📦 Склад</h1>
<p class="muted field-hint">Тут — скільки сировини залишилось, і система сама підказує, коли й що докупити. Кожна страва «з'їдає» свою сировину автоматично при замовленні.</p>

<div class="stat-grid">
  <div class="stat-card">
    <div class="stat-top">
      <div class="stat-label">Усього інгредієнтів</div>
      <div class="stat-icon violet">📦</div>
    </div>
    <div class="stat-value">{{ stats.total }}</div>
  </div>
  <div class="stat-card">
    <div class="stat-top">
      <div class="stat-label">Закінчується</div>
      <div class="stat-icon yellow">⚠️</div>
    </div>
    <div class="stat-value" style="color:{{ 'var(--warning)' if stats.low else 'inherit' }};">{{ stats.low }}</div>
  </div>
  <div class="stat-card">
    <div class="stat-top">
      <div class="stat-label">Немає в наявності</div>
      <div class="stat-icon red">🚫</div>
    </div>
    <div class="stat-value" style="color:{{ 'var(--danger)' if stats.critical else 'inherit' }};">{{ stats.critical }}</div>
  </div>
  {% if stats.value %}
  <div class="stat-card">
    <div class="stat-top">
      <div class="stat-label">Вартість складу</div>
      <div class="stat-icon green">💰</div>
    </div>
    <div class="stat-value">{{ stats.value|fmt_qty }} грн</div>
  </div>
  {% endif %}
</div>

{% if open_request and open_request.items %}
<div class="flash warning" style="display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;">
  <span>🛒 <b>{{ open_request.items|length }}</b> {{ 'інгредієнт' if open_request.items|length == 1 else 'інгредієнтів' }} закінчується — сформована заявка на поповнення.</span>
  <a class="btn small" style="background:var(--warning);color:#3a2c00;box-shadow:none;" href="{{ url_for('admin.inventory_restock') }}">Переглянути заявку →</a>
</div>
{% endif %}

<div class="filters" style="margin-bottom:16px;">
  <a class="btn secondary small" href="{{ url_for('admin.inventory_recipes') }}">🧾 Рецептура страв (що з чого готується)</a>
  <a class="btn secondary small" href="{{ url_for('admin.inventory_restock') }}">🛒 Заявки на поповнення</a>
</div>

<div class="grid-2-even" style="margin-bottom:16px;">
  <div class="card" style="margin:0;">
    <h3 style="margin-top:0;">📥 Поточний стан складу</h3>
    <p class="muted field-hint" style="margin-top:-6px;">Знімок залишків, мінімумів і вартості складу на зараз.</p>
    <div style="display:flex;gap:10px;">
      <a class="btn secondary small" href="{{ url_for('admin.inventory_report_snapshot', fmt='xlsx') }}">📊 Excel</a>
      <a class="btn secondary small" href="{{ url_for('admin.inventory_report_snapshot', fmt='pdf') }}">📄 PDF</a>
    </div>
  </div>
  <div class="card" style="margin:0;">
    <h3 style="margin-top:0;">📥 Історія руху складу</h3>
    <form method="get" action="{{ url_for('admin.inventory_report_movements', fmt='xlsx') }}">
      <div class="row">
        <div>
          <label>З дати <span class="muted">(необов'язково)</span></label>
          <input type="date" name="date_from">
        </div>
        <div>
          <label>По дату <span class="muted">(необов'язково)</span></label>
          <input type="date" name="date_to">
        </div>
      </div>
      <div style="display:flex;gap:10px;margin-top:10px;">
        <button class="btn secondary small" type="submit">📊 Excel</button>
        <button class="btn secondary small" type="submit" formaction="{{ url_for('admin.inventory_report_movements', fmt='pdf') }}">📄 PDF</button>
      </div>
    </form>
  </div>
</div>

<div class="card">
  <div class="card-head">
    <h3>Усі інгредієнти</h3>
    <input type="text" id="ingredient-search" placeholder="🔍 Пошук за назвою…" style="margin:0;max-width:220px;" oninput="filterIngredients(this.value)">
  </div>
  <div class="table-wrap">
    <table class="responsive-table" id="ingredients-table">
      <tr><th>Інгредієнт</th><th>Залишок</th><th>Мінімум</th><th>Ціна/од.</th><th>Постачальник</th><th>Статус</th><th></th></tr>
      {% for i in ingredients %}
      <tr class="ingredient-row" data-name="{{ i.name|lower }}" onclick="location.href='{{ url_for('admin.inventory_detail', ingredient_id=i.id) }}'" style="cursor:pointer;">
        <td data-label="Інгредієнт">{{ i.name }}{% if not i.is_active %} <span class="muted">(неактивний)</span>{% endif %}</td>
        <td data-label="Залишок"><b>{{ i.current_stock|fmt_qty }}</b> {{ i.unit }}</td>
        <td data-label="Мінімум" class="muted">{{ i.reorder_threshold|fmt_qty }} {{ i.unit }}</td>
        <td data-label="Ціна/од." class="muted">{{ (i.cost_per_unit|fmt_qty ~ ' грн') if i.cost_per_unit else '—' }}</td>
        <td data-label="Постачальник" class="muted">{{ i.supplier.name if i.supplier else '—' }}</td>
        <td data-label="Статус">
          {% if i.stock_status == 'critical' %}<span class="badge cancelled">🚫 Немає</span>
          {% elif i.stock_status == 'low' %}<span class="badge confirmed">⚠️ Закінчується</span>
          {% else %}<span class="badge completed">✅ В нормі</span>{% endif %}
        </td>
        <td data-label=""><span class="muted">Деталі →</span></td>
      </tr>
      {% else %}
      <tr><td colspan="7" class="muted">Інгредієнтів ще немає — додайте перший нижче 👇</td></tr>
      {% endfor %}
    </table>
    <div id="no-search-results" class="muted" style="display:none;padding:14px 4px;">Нічого не знайдено за цим запитом.</div>
  </div>
</div>

<h2>➕ Додати новий інгредієнт</h2>
<div class="card" style="max-width:520px;">
  <form method="post" action="{{ url_for('admin.inventory_new') }}">
    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
    <label>Назва</label>
    <input type="text" name="name" required placeholder="напр. Яловичий фарш">

    <label>Одиниця виміру</label>
    <select name="unit" id="new-ingredient-unit" onchange="syncUnitSteps()">
      {% for u in units %}<option value="{{ u }}">{{ u }}{% if u in whole_units %} (тільки ціле число){% endif %}</option>{% endfor %}
    </select>

    <label>Скільки є зараз (початковий залишок)</label>
    <input type="number" step="1" min="0" name="current_stock" value="0" class="qty-input" data-new-ingredient-qty>

    <div class="row">
      <div>
        <label>Мінімальний залишок <span class="muted">— нижче цього система сама створить заявку на поповнення</span></label>
        <input type="number" step="1" min="0" name="reorder_threshold" value="0" class="qty-input" data-new-ingredient-qty>
      </div>
      <div>
        <label>До скількох поповнювати <span class="muted">— скільки закупити, щоб вистачило надовго</span></label>
        <input type="number" step="1" min="0" name="target_stock" value="0" class="qty-input" data-new-ingredient-qty>
      </div>
    </div>
    <label>Вартість за одиницю, грн <span class="muted">(необов'язково — потрібно лише для оцінки вартості складу)</span></label>
    <input type="number" step="0.01" min="0" name="cost_per_unit" placeholder="0">

    {% if suppliers %}
    <label>Основний постачальник <span class="muted">(необов'язково)</span></label>
    <select name="supplier_id">
      <option value="">— не вказано —</option>
      {% for s in suppliers %}
      <option value="{{ s.id }}">{{ s.name }}</option>
      {% endfor %}
    </select>
    {% endif %}

    <button class="btn" type="submit" style="margin-top:14px;">Додати інгредієнт</button>
  </form>
</div>

<script>
  function filterIngredients(query) {
    query = query.trim().toLowerCase();
    var rows = document.querySelectorAll('#ingredients-table .ingredient-row');
    var visibleCount = 0;
    rows.forEach(function (row) {
      var match = row.dataset.name.indexOf(query) !== -1;
      row.style.display = match ? '' : 'none';
      if (match) visibleCount++;
    });
    document.getElementById('no-search-results').style.display = (rows.length && visibleCount === 0) ? 'block' : 'none';
  }

  function syncUnitSteps() {
    var unit = document.getElementById('new-ingredient-unit').value;
    var whole = {{ whole_units|list|tojson }};
    var step = whole.indexOf(unit) !== -1 ? '1' : '0.01';
    document.querySelectorAll('[data-new-ingredient-qty]').forEach(function (input) {
      input.step = step;
    });
  }
  syncUnitSteps();
</script>
{% endblock %}