{% extends "base.html" %}
{% block title %}Оплаты · Кабинет Директора{% endblock %}
{% block body %}
<div class="dash-shell">
  <header class="dash-top">
    <div class="dash-brand">◆ Кабинет Директора</div>
    <nav class="dash-nav">
      <a class="dash-nav-item" href="{{ url_for('tasks_page') }}">Задачи</a>
      <a class="dash-nav-item active" href="{{ url_for('payments_page') }}">Оплаты</a>
    </nav>
    <a class="dash-logout" href="{{ url_for('logout') }}">Выйти</a>
  </header>

  <div class="tasks-toolbar">
    <button id="btn-new-pay" class="btn-primary">＋ Новая оплата</button>
  </div>

  <main class="board">
    <!-- Дашборд -->
    <section class="pay-dash">
      <div class="pay-stat">
        <div class="pay-stat-label">К оплате (в очереди)</div>
        <div class="pay-stat-value" id="stat-queue-sum">0.00</div>
      </div>
      <div class="pay-stat">
        <div class="pay-stat-label">Оплат в очереди</div>
        <div class="pay-stat-value" id="stat-queue-count">0</div>
      </div>
      <div class="pay-stat">
        <div class="pay-stat-label">Проведено (сумма)</div>
        <div class="pay-stat-value ok" id="stat-paid-sum">0.00</div>
      </div>
      <div class="pay-stat">
        <div class="pay-stat-label">Проведено оплат</div>
        <div class="pay-stat-value ok" id="stat-paid-count">0</div>
      </div>
    </section>

    <!-- Две колонки -->
    <section class="pay-cols">
      <div class="pay-col">
        <div class="pay-col-head">Очередь оплат <span class="pay-col-badge" id="q-badge">0</span></div>
        <div id="pay-queue" class="pay-list"></div>
      </div>
      <div class="pay-col">
        <div class="pay-col-head">Проведённые оплаты <span class="pay-col-badge ok" id="p-badge">0</span></div>
        <div id="pay-paid" class="pay-list"></div>
      </div>
    </section>
  </main>
</div>

<!-- ===== Модалка: новая оплата ===== -->
<div class="modal-overlay" id="pay-modal" style="display:none;">
  <div class="modal">
    <div class="modal-head">
      <h2>Новая оплата</h2>
      <button class="modal-x" id="pay-close">✕</button>
    </div>
    <div class="modal-body">
      <label class="fld-label">Кому *</label>
      <input type="text" id="p-payee" class="fld" placeholder="Поставщик, подрядчик, ФИО...">

      <div class="row-2">
        <div>
          <label class="fld-label">Дедлайн</label>
          <input type="date" id="p-deadline" class="fld">
        </div>
        <div>
          <label class="fld-label">Сумма *</label>
          <input type="number" id="p-amount" class="fld" min="0" step="0.01" placeholder="0.00">
        </div>
      </div>

      <label class="fld-label">Комментарий</label>
      <textarea id="p-comment" class="fld" rows="3" placeholder="Назначение платежа, детали..."></textarea>

      <label class="fld-label">Документ или фото</label>
      <div id="p-files" class="pay-files"></div>
      <input type="file" id="p-file-input" accept="image/*,.pdf,.doc,.docx,.xls,.xlsx,.txt,.csv,.rtf,.odt,.ods" multiple style="display:none;">
      <button type="button" id="p-add-file" class="btn-ghost">＋ Прикрепить файл</button>
    </div>
    <div class="modal-foot">
      <span style="flex:1;"></span>
      <button id="pay-cancel" class="btn-ghost">Отмена</button>
      <button id="pay-save" class="btn-primary">Сохранить</button>
    </div>
  </div>
</div>

<script src="{{ url_for('static', filename='js/payments.js') }}"></script>
{% endblock %}