{% extends "base.html" %}
{% block body_class %}page-bg bg-orders{% endblock %}
{% block content %}
<style>
  body.bg-orders {
    background-color: #B3B3DA;
    background-image:
      linear-gradient(rgba(179, 179, 218, 0.75), rgba(179, 179, 218, 0.75)),
      url('{{ url_for("static", filename="bg/bg_zakaz.png", v=1) }}');
    background-size: auto 40vh;
  }
  .orders-page .card {
    background-color: #B3B3DA;
    border: 1px solid #B3B3DA;
    box-shadow: none;
  }
  .orders-page .card-body {
    background-color: transparent;
  }
  .orders-page .form-control,
  .orders-page .form-select {
    background-color: #ffffff;
    border: 1px solid #B3B3DA;
  }
  .orders-page .form-control:focus,
  .orders-page .form-select:focus {
    box-shadow: 0 0 0 0.1rem rgba(0, 0, 0, 0.15);
    border-color: #B3B3DA;
  }
</style>
<div class="orders-page">
<div class="d-flex align-items-center justify-content-between mb-3">
  <h3 class="mb-0">Заказанные картриджи</h3>
  <div class="d-flex gap-2">
    {% if session.get('role') in ('admin','storekeeper') %}
    <button class="btn btn-outline-primary" type="button" id="toggleOrderAdd">Добавить заказ</button>
    <form method="post" action="/orders/clear" onsubmit="return confirm('Очистить все заказы?');">
      <button class="btn btn-outline-danger" type="submit">Очистить заказы</button>
    </form>
    {% endif %}
    <a class="btn btn-success" href="/report/orders.xlsx">Экспорт в Excel</a>
  </div>
</div>

<div class="card mb-3 d-none" id="orderAddCard">
  <div class="card-body">
    <form method="post" action="/order_by_model" class="row g-2 align-items-center">
      <div class="col-md-6">
        <input name="model" class="form-control" placeholder="Модель картриджа">
      </div>
      <div class="col-md-2">
        <input name="quantity" class="form-control" placeholder="Количество" value="1">
      </div>
      <div class="col-md-2 d-grid">
        <button class="btn btn-primary">Добавить в заказ</button>
      </div>
    </form>
  </div>
</div>

<script>
  (function() {
    const toggleBtn = document.getElementById('toggleOrderAdd');
    const card = document.getElementById('orderAddCard');
    if (!toggleBtn || !card) return;
    toggleBtn.addEventListener('click', () => {
      card.classList.toggle('d-none');
    });
  })();
</script>

<table class="table table-striped table-sm">
  <tr><th>Дата</th><th>Штрихкод</th><th>Модель</th><th>Количество</th></tr>
  {% for last_date, barcode, model, qty in rows %}
  <tr>
    <td>{{ last_date }}</td>
    <td>{{ barcode }}</td>
    <td>{{ model }}</td>
    <td>{{ qty }}</td>
  </tr>
  {% endfor %}
</table>
</div>
{% endblock %}