{% extends "pos/base.html" %}
{% load static %}
{% block title %}Distributor Sales Data Export{% endblock %}

{% block stylesheets %}
<style>
  :root { --ink:#1f2933; --muted:#6b7280; --line:#e5e7eb; --brand:#0f766e; }
  * { box-sizing: border-box; }
  body { margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
         color:var(--ink); background:#f7f8fa; }
  .wrap { max-width: 560px; margin: 48px auto; padding: 0 16px; }
  .card { background:#fff; border:1px solid var(--line); border-radius:14px;
          padding:28px 26px; box-shadow:0 1px 2px rgba(0,0,0,.04); }
  h1 { font-size: 20px; margin:0 0 4px; }
  p.sub { margin:0 0 22px; color:var(--muted); font-size:13px; }
  label { display:block; font-size:13px; font-weight:600; margin:16px 0 6px; }
  select, input { width:100%; padding:10px 12px; border:1px solid var(--line);
                  border-radius:9px; font-size:14px; background:#fff; }
  select:focus, input:focus { outline:none; border-color:var(--brand);
                  box-shadow:0 0 0 3px rgba(15,118,110,.12); }
  .grid2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
  .hint { font-size:12px; color:var(--muted); margin-top:6px; }
  button { margin-top:24px; width:100%; padding:12px; border:0; border-radius:10px;
           background:var(--brand); color:#fff; font-size:15px; font-weight:600;
           cursor:pointer; }
  button:hover { filter:brightness(.95); }
  .files { margin-top:18px; font-size:12px; color:var(--muted); }
  .files code { background:#f1f5f4; padding:1px 6px; border-radius:5px; }
</style>
{% endblock %}
{% block content %}
  <div class="wrap">
    <div class="card">
      <h1>Distributor Sales Data Export</h1>

      <form method="post">
        {% csrf_token %}

        <label for="company_tid">Company</label>
        <select id="company_tid" name="company_tid" required>
          <option value="" disabled selected>— Select company —</option>
          {% for c in companies %}
            <option value="{{ c.t_id }}">{{ c.name }}</option>
          {% endfor %}
        </select>

        <div class="grid2">
          <div>
            <label for="start_date">Start Date</label>
            <input type="date" id="start_date" name="start_date" required>
          </div>
          <div>
            <label for="end_date">End Date</label>
            <input type="date" id="end_date" name="end_date" required>
          </div>
        </div>
        <div class="hint">Daily file ke liye: start = mahine ki 1 tareekh, end = aaj ki tareekh.</div>

        <label for="bpcode">BPCODE</label>
        <input type="text" id="bpcode" name="bpcode" placeholder="e.g. BP00123" required>

        <button type="submit">Generate &amp; Download ZIP</button>
      </form>

      <div class="files">
        Files: <code>BPCust.txt</code> · <code>BPProd.txt</code> · <code>BPBrick.txt</code> ·
        <code>BPTran.txt</code> · <code>BPStock.txt</code> · <code>BPValue.txt</code>
      </div>
    </div>
  </div>
{% endblock %}