{% extends "base.html" %}
{% block title %}Data{% endblock %}
{% block scripts %}
<script>
const picker = document.getElementById('add-kind'), form = document.getElementById('add-form'),
      soon = document.getElementById('on-request');
function show() {
  const opt = picker.selectedOptions[0], kind = opt.value, later = opt.dataset.soon !== undefined;
  document.querySelector('[data-pane=upload]').hidden = kind !== 'upload';
  form.hidden = kind === 'upload' || later;
  soon.hidden = !later;
  if (later) soon.querySelector('b').textContent = opt.textContent.replace(' (on request)', '');
  if (kind === 'upload' || later) return;
  form.querySelector('[name=type]').value = kind;
  form.querySelectorAll('.tab').forEach(t => { const on = t.dataset.for === kind; t.hidden = !on;
    t.querySelectorAll('input,select').forEach(i => i.disabled = !on); });
  form.querySelector('button.primary').textContent = kind === 'xero' ? 'Connect Xero' : 'Connect';
}
picker.addEventListener('change', show);
show();
</script>
{% endblock %}
{% block content %}
<div class="page-head"><div><h1>Data</h1><p>Where the figures in your emails come from.</p></div>
  <button class="btn primary" onclick="document.getElementById('add-data').hidden = !document.getElementById('add-data').hidden">{{ icon('plus') }} Add Data</button></div>
<div class="card" id="add-data" {{ '' if not sources else 'hidden' }}>
  <h2>Add Data</h2>

  <div class="field" style="max-width:420px"><label>Where does the data come from?</label>
    <select id="add-kind">
      <optgroup label="Files">
        <option value="upload">Upload a spreadsheet</option>
        <option value="email_in">Emailed to an inbox</option>
        <option value="folder_watch">Folder on this computer (Dropbox, OneDrive…)</option>
        <option value="web_link">Web link / Google Sheet</option>
      </optgroup>
      <optgroup label="Accounting">
        <option value="xero">Xero</option>
        <option value="odoo">Odoo</option>
        {% for n in on_request.accounting %}<option value="soon" data-soon>{{ n }} (on request)</option>{% endfor %}
      </optgroup>
      <optgroup label="CRM">
        <option value="hubspot">HubSpot</option>
        <option value="pipedrive">Pipedrive</option>
        {% for n in on_request.crm %}<option value="soon" data-soon>{{ n }} (on request)</option>{% endfor %}
      </optgroup>
      <optgroup label="Other">
        <option value="api">Another system with an API</option>
      </optgroup>
    </select></div>
  <div id="on-request" class="sub" hidden>
    <p><b></b> isn't built in yet{% if product.maker and product.maker != product.name %}. Ask {{ product.maker }} to add it{% endif %}.</p>
    <p class="hint">Meanwhile, most systems can email a report on a schedule: set it to email an Excel or CSV export to one of your inboxes, then choose <i>Emailed to an inbox</i> above.</p>
  </div>
  <form method="post" action="{{ url_for('data_add') }}" id="add-form" class="tab-pane" data-pane="connect">
    <p class="muted">{{ product.name }} checks for new data every few minutes, so nobody has to upload files.</p>
    <input type="hidden" name="type" value="email_in">
    <div class="field"><label>Name</label><input type="text" name="label" placeholder="e.g. Weekly aging report" required></div>
    <div class="tab" data-for="email_in">
      <p class="hint">Whoever produces the report just emails it (as an Excel or CSV attachment) to one of your connected inboxes. Each new attachment becomes the latest data.</p>
      <div class="row">
        <div class="field"><label>Inbox to watch</label><select name="mailbox">{% for k, r in roles.items() %}<option value="{{ k }}">{{ r.name }} ({{ r.email }})</option>{% endfor %}</select></div>
        <div class="field"><label>Only from (optional)</label><input type="text" name="from_contains" placeholder="e.g. finance@company.com"></div>
        <div class="field"><label>Subject contains (optional)</label><input type="text" name="subject_contains" placeholder="e.g. aging report"></div>
      </div></div>
    <div class="tab" data-for="folder_watch" hidden>
      <p class="hint">The newest spreadsheet in a folder. Works with Dropbox, Google Drive, OneDrive and SharePoint folders synced to this computer. Only works when {{ product.name }} runs on that computer.</p>
      <div class="row">
        <div class="field"><label>Folder</label><input type="text" name="folder" placeholder="/Users/you/Dropbox/Finance reports"></div>
        <div class="field"><label>File name contains (optional)</label><input type="text" name="name_contains" placeholder="e.g. aging"></div>
      </div></div>
    <div class="tab" data-for="web_link" hidden>
      <p class="hint">A link to an Excel/CSV file, or a Google Sheet shared as “Anyone with the link can view”. Checked every 15 minutes.</p>
      <div class="field"><label>Link</label><input type="text" name="url" placeholder="https://docs.google.com/spreadsheets/d/…"></div></div>
    <div class="tab" data-for="hubspot" hidden>
      <p class="hint">Your deals from HubSpot. In HubSpot: Settings → Integrations → Private apps → Create, allow “crm.objects.deals.read”, and copy the access token.</p>
      <div class="field"><label>Access token</label><input type="password" name="secret" autocomplete="off"></div></div>
    <div class="tab" data-for="xero" hidden>
      {% if xero_ready %}
      <p class="hint">You'll sign in to Xero and choose your organisation. {{ product.name }} only reads data; it can't change anything in Xero.</p>
      <div class="field" style="max-width:320px"><label>What to bring in</label>
        <select name="fetch">{% for k, label in xero_fetch.items() %}<option value="{{ k }}">{{ label }}</option>{% endfor %}</select></div>
      {% else %}
      <p class="flash error">Xero isn't set up for this app yet: add the Xero app's client ID in <a href="{{ url_for('settings') }}#xero">Settings → Connections</a>.</p>
      {% endif %}</div>
    <div class="tab" data-for="pipedrive" hidden>
      <p class="hint">Your open deals from Pipedrive. In Pipedrive: your name (top right) → Personal preferences → API, and copy your personal API token.</p>
      <div class="field"><label>API token</label><input type="password" name="secret" autocomplete="off" disabled></div></div>
    <div class="tab" data-for="odoo" hidden>
      <p class="hint">Unpaid customer invoices from Odoo. Create an API key in Odoo under your user's Preferences → Account Security.</p>
      <div class="row">
        <div class="field"><label>Odoo address</label><input type="text" name="url" placeholder="https://yourcompany.odoo.com" disabled></div>
        <div class="field"><label>Database</label><input type="text" name="database"></div>
        <div class="field"><label>Username (email)</label><input type="text" name="username"></div>
        <div class="field"><label>API key</label><input type="password" name="secret" autocomplete="off" disabled></div>
      </div></div>
    <div class="tab" data-for="api" hidden>
      <p class="hint">Any system with a JSON API. Your IT person or the system's support can give you these details.</p>
      <div class="row">
        <div class="field"><label>Address</label><input type="text" name="url" placeholder="https://api.example.com/invoices" disabled></div>
        <div class="field"><label>Where the list is (optional)</label><input type="text" name="list_path" placeholder="e.g. data.items"></div>
        <div class="field"><label>Key header (optional)</label><input type="text" name="auth_header" placeholder="Authorization"></div>
        <div class="field"><label>Key</label><input type="password" name="secret" autocomplete="off" disabled></div>
      </div></div>
    <button class="btn primary">Connect</button>
  </form>
  <form method="post" enctype="multipart/form-data" class="tab-pane" data-pane="upload">
  <p class="muted">Upload an Excel (.xlsx) or CSV file. The first row should be the column names. Upload a new version any time: automations set to “when something new comes in” will send it.</p>
  <div class="row" style="align-items:end">
    <div class="field"><label>Name</label><input type="text" name="label" placeholder="e.g. Open invoices" required></div>
    <div class="field"><label>File</label><input type="file" name="file" accept=".xlsx,.xlsm,.csv" required></div>
    <div class="field"><button class="btn primary">Upload</button></div>
  </div>
  </form>
</div>


{% for name, src in sources.items() %}
{% set p = previews[name] %}
<details class="card" {{ 'open' if show == name or (not show and loop.first) }}>
  <summary style="cursor:pointer;list-style:none">
    <div class="page-head" style="margin:0">
      <div><h2 style="margin:0">{{ src.label or name }}</h2>
        <span class="muted small">{{ {'mock_finance':'Demo finance data','mock_sales':'Demo sales data','folder':'Files uploaded on Sales materials','quotes':'Quotes created in {{ product.name }}'}.get(src.type) or source_types.get(src.type, src.type) }}
        {% if users.get(name) %} · used by {{ users[name]|join(', ') }}{% else %} · not used by any automation yet{% endif %}</span></div>
      {% if p.error %}<span class="pill review">Problem</span>{% elif p.item %}<span class="pill on">Has data</span>{% else %}<span class="pill">Empty</span>{% endif %}
    </div>
  </summary>
  {% if p.error %}<div class="flash error" style="margin-top:12px">{{ p.error }}</div>{% endif %}
  {% if errors.get(name) %}<div class="flash error" style="margin-top:12px">Last check failed: {{ errors[name] }}</div>{% endif %}
  {% if src.type in ('folder_watch', 'web_link', 'email_in', 'api', 'hubspot', 'odoo', 'xero', 'pipedrive') %}
  <div class="actions" style="margin-top:10px">
    {% if src.type == 'xero' %}<a class="btn small" href="{{ url_for('xero_start', name=name) }}">{{ 'Reconnect Xero' if src.tenant_id else 'Connect Xero' }}</a>{% endif %}
    <form method="post" action="{{ url_for('data_refresh', name=name) }}" class="inline"><button class="btn small">Check for New Data Now</button></form>
    <form method="post" action="{{ url_for('data_delete', name=name) }}" class="inline" data-confirm="Remove this data source?"><button class="btn small danger">Remove</button></form>
  </div>{% endif %}
  {% if p.item %}
    <p class="small muted" style="margin-top:12px">Latest: <b>{{ p.item.title }}</b></p>
    {% if p.item.summary %}<div class="figures">{% for k, v in p.item.summary.items() if v is not mapping %}<div><span>{{ k.replace('_', ' ')|capitalize }}</span><b>{{ fmt(v) }}</b></div>{% endfor %}</div>{% endif %}
    {% if p.item.table %}
      <div style="overflow-x:auto;margin-top:12px"><table class="people small">
        <tr>{% for c in p.item.table.columns %}<th>{{ c }}</th>{% endfor %}</tr>
        {% for r in p.item.table.rows[:8] %}<tr>{% for v in r %}<td>{{ fmt(v) }}</td>{% endfor %}</tr>{% endfor %}
      </table></div>
      {% if p.item.table.rows|length > 8 %}<p class="muted small">First 8 of {{ p.item.table.rows|length }} rows.</p>{% endif %}
    {% endif %}
  {% endif %}
  {% if p.item and p.item.table and src.type not in ('mock_finance', 'mock_sales', 'folder', 'quotes') %}
  <form method="post" action="{{ url_for('data_columns', name=name) }}" class="sub" style="margin-top:14px">
    <b class="small">What do the columns mean?</b> <span class="muted small">{{ product.name }} guessed; correct anything that's wrong.</span>
    <div class="row" style="margin-top:8px">
      {% for key, label in role_labels.items() %}
      <div class="field small"><label>{{ label }}</label><select name="{{ key }}"><option value="">(none)</option>
        {% for c in p.item.table.columns if c != 'Days overdue' %}<option value="{{ c }}" {{ 'selected' if (p.item.meta or {}).get(key) == c }}>{{ c }}</option>{% endfor %}</select></div>
      {% endfor %}
    </div>
    <button class="btn small">Save Column Meanings</button>
  </form>
  {% endif %}
  {% if brands|length > 1 and not scoped %}
  <form method="post" action="{{ url_for('data_brand', name=name) }}" class="actions small" style="margin-top:10px">
    <span>Belongs to:</span><select name="brand" style="width:auto" onchange="this.form.submit()"><option value="">The whole group (only people who see every company)</option>
      {% for k, b in brands.items() %}<option value="{{ k }}" {{ 'selected' if src.brand == k }}>{{ b.name }}</option>{% endfor %}</select></form>
  {% endif %}
  {% if p.item and p.item.table and src.type not in ('mock_sales', 'folder', 'quotes') %}
  <form method="post" action="{{ url_for('data_track', name=name) }}" class="actions small" style="margin-top:10px">
    <span>{{ 'Each invoice is tracked on the Receivables page.' if src.track else 'Track each invoice (status, promises, paid) on the Receivables page?' }}</span>
    <button class="btn small">{{ 'Stop Tracking' if src.track else 'Track Each Invoice' }}</button></form>
  {% endif %}
  {% if src.type == 'spreadsheet' %}
  <form method="post" enctype="multipart/form-data" class="actions" style="margin-top:12px">
    <input type="hidden" name="source" value="{{ name }}"><input type="hidden" name="label" value="{{ src.label }}">
    <input type="file" name="file" accept=".xlsx,.xlsm,.csv" required><button class="btn small">Upload a New Version</button></form>
  {% endif %}
</details>
{% endfor %}
{% endblock %}