{% extends 'base.html' %}
{% block title %}Contracts{% endblock %}
{% block content %}

<div class="page-header">
  <div class="page-title">Sale Contracts <small>Manage and track all sale contracts</small></div>
  <div class="d-flex gap-2 no-print">
    <a href="{{ url_for('new_contract') }}" class="btn btn-primary btn-sm">
      <i class="bi bi-plus-lg me-1"></i> New Contract
    </a>
  </div>
</div>

<!-- Tabs -->
<div class="tabs no-print">
  <button class="tab-btn {% if status_filter=='open' %}active{% endif %}"
    onclick="location.href='{{ url_for('contracts', status='open', factory=factory_filter, month=month_filter, search=search) }}'">
    <i class="bi bi-folder2-open me-1"></i> Open
  </button>
  <button class="tab-btn {% if status_filter=='closed' %}active{% endif %}"
    onclick="location.href='{{ url_for('contracts', status='closed', factory=factory_filter, month=month_filter, search=search) }}'">
    <i class="bi bi-archive me-1"></i> Closed
  </button>
</div>

<!-- Filters -->
<form class="filters-bar no-print" method="get">
  <input type="hidden" name="status" value="{{ status_filter }}">
  <span class="filters-label">Filter</span>
  <select name="factory" onchange="this.form.submit()" style="border:1.5px solid #d1d5db;border-radius:6px;padding:5px 8px;font-size:12.5px;background:#f9fafb">
    <option value="">All Factories</option>
    {% for code, name in factories.items() %}
    <option value="{{ code }}" {% if factory_filter==code %}selected{% endif %}>{{ code }} – {{ name }}</option>
    {% endfor %}
  </select>
  <input type="month" name="month" value="{{ month_filter }}" onchange="this.form.submit()">
  <input type="text" name="search" value="{{ search or '' }}" placeholder="Search contract, customer…" style="min-width:160px">
  <button type="submit" class="btn btn-outline-secondary btn-sm"><i class="bi bi-search"></i></button>
  {% if factory_filter or month_filter or search %}
  <a href="{{ url_for('contracts', status=status_filter) }}" class="btn btn-outline-secondary btn-sm"><i class="bi bi-x"></i> Clear</a>
  {% endif %}
</form>

<!-- Table -->
<div class="card">
  <div class="table-wrap">
    <table style="font-size:12.5px">
      <thead>
        <tr>
          <th style="min-width:110px">Contract No</th>
          <th style="min-width:80px">Sale Order</th>
          <th style="min-width:140px">Customer</th>
          <th style="min-width:40px">Fac.</th>
          <th style="min-width:120px">Materials</th>
          <th class="text-right" style="min-width:70px">Price</th>
          <th style="min-width:60px">Broker</th>
          <th class="text-right" style="min-width:80px">Declared</th>
          <th class="text-right" style="min-width:80px">Delivered</th>
          <th class="text-right" style="min-width:80px">Balance</th>
          <th style="min-width:90px">Due Date</th>
          <th style="min-width:60px">Status</th>
          <th class="no-print" style="min-width:100px"></th>
        </tr>
      </thead>
      <tbody>
      {% set td = namespace(val=0) %} {% set tv = namespace(val=0) %} {% set tb = namespace(val=0) %}
      {% for c in contracts %}
        {% set td.val = td.val + c.qty %}
        {% set tv.val = tv.val + c.delivered %}
        {% set tb.val = tb.val + [c.balance,0]|max %}
        <tr {% if c.overdue %}class="row-overdue"{% endif %}>
          <td style="font-family:'IBM Plex Mono',monospace;font-size:11.5px">
            <a href="{{ url_for('view_contract', cid=c.id) }}" class="tlink fw-semibold">{{ c.contract_no }}</a>
          </td>
          <td class="text-muted" style="font-size:12px">{{ c.sale_order_no or '–' }}</td>
          <td class="fw-500 td-wrap" style="max-width:160px">{{ c.customer_name }}</td>
          <td><span class="factory-chip fchip-{{ c.factory_code }}">{{ c.factory_code }}</span></td>
          <td class="text-muted td-wrap" style="max-width:130px;font-size:12px">{{ c.material_names }}</td>
          <td class="text-right number" style="font-size:12px">{{ "{:,.2f}".format(c.price) if c.price else '–' }}</td>
          <td class="text-muted" style="font-size:12px">{{ c.broker or '–' }}</td>
          <td class="text-right number">{{ "{:,.0f}".format(c.qty) }}</td>
          <td class="text-right number">{{ "{:,.3f}".format(c.delivered) }}</td>
          <td class="text-right number fw-600">
            {% if c.balance < 0 %}
              <span style="color:#7c3aed">({{ "{:,.3f}".format(c.balance|abs) }} over)</span>
            {% else %}
              {{ "{:,.3f}".format(c.balance) }}
            {% endif %}
          </td>
          <td style="font-size:12px">{{ c.delivery_due }}</td>
          <td><span class="badge badge-{{ c.status }}">{{ c.status|capitalize }}</span></td>
          <td class="no-print" style="white-space:nowrap">
            <a href="{{ url_for('view_contract', cid=c.id) }}" class="btn btn-outline-secondary btn-sm">View</a>
            {% if can_edit() %}
            <a href="{{ url_for('edit_contract', cid=c.id) }}" class="btn btn-outline-secondary btn-sm">Edit</a>
            {% endif %}
          </td>
        </tr>
      {% else %}
        <tr><td colspan="13" class="empty-state">
          No {{ status_filter }} contracts found
          {% if factory_filter or month_filter or search %} – try adjusting filters{% endif %}
        </td></tr>
      {% endfor %}
      </tbody>
      {% if contracts %}
      <tfoot>
        <tr>
          <td colspan="7" style="font-size:12px"><strong>Totals ({{ contracts|length }} contracts)</strong></td>
          <td class="text-right number">{{ "{:,.0f}".format(td.val) }}</td>
          <td class="text-right number">{{ "{:,.3f}".format(tv.val) }}</td>
          <td class="text-right number">{{ "{:,.3f}".format(tb.val) }}</td>
          <td colspan="3"></td>
        </tr>
      </tfoot>
      {% endif %}
    </table>
  </div>
</div>

{% endblock %}