{% extends "journal/base.html" %}
{% block title %}Add Trade — Setup Log Pro{% endblock %}
{% block content %}
<h1>Add Trade</h1>
<p style="opacity:0.75;">Log a trade manually by entering its fills. Build the position with multiple entry rows and close it (fully or partially) with multiple exit rows — mirrors how DAS Trader CSV imports are detected. Tags, stop-loss/target and the price chart can be added afterward from the trade's detail page.</p>

{% if not licensed %}
  {% if trade_creation_blocked %}
  <p style="background:color-mix(in srgb, #c0392b 12%, transparent); border:1px solid #c0392b; border-radius:8px; padding:0.75rem 1rem; font-size:0.85rem; max-width:1100px;">
    <b>Free limit reached.</b> {{ lifetime_trades_created }} of {{ free_trade_limit }} free trades used —
    a license is needed to add more. See the footer for how to get one.
  </p>
  {% else %}
  <p style="background:color-mix(in srgb, #F59E0B 12%, transparent); border:1px solid #F59E0B; border-radius:8px; padding:0.75rem 1rem; font-size:0.85rem; max-width:1100px;">
    Free tier: {{ lifetime_trades_created }} of {{ free_trade_limit }} trades used. See the footer for how
    to get a license once you reach the limit.
  </p>
  {% endif %}
{% endif %}

<p>Risk per trade (used for R-multiples):</p>
<form method="post" style="display:flex; gap:0.5rem; align-items:center; margin-bottom:2rem;">
  {% csrf_token %}
  <input type="hidden" name="action" value="update_risk">
  {{ risk_form.risk_per_trade }}
  <button type="submit">Save</button>
</form>

<style>
  .add-trade-row { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 0.6rem; }
  .add-trade-row label { width: 140px; flex: 0 0 140px; text-align: right; font-size: 0.85rem; opacity: 0.85; padding-top: 0.4rem; }
  .add-trade-field { flex: 1; max-width: 300px; }
  .add-trade-field input, .add-trade-field select, .add-trade-field textarea { width: 100%; box-sizing: border-box; }
  .trade-top-row { display: flex; gap: 1rem; margin-bottom: 1rem; }
  .trade-top-row label {
    flex: 1; display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.72rem; opacity: 0.8;
    border: 1px solid var(--border); border-radius: 8px; padding: 0.5rem 0.7rem; background: var(--surface);
  }
  .trade-top-row input, .trade-top-row select { width: 100%; box-sizing: border-box; font-size: 0.9rem; }
  .fill-panels { display: flex; gap: 1.5rem; margin: 1.5rem 0; flex-wrap: wrap; }
  .fill-panel {
    flex: 1; min-width: 320px; background: var(--surface); border: 1px solid var(--border);
    border-radius: 12px; padding: 0.85rem 1.1rem;
  }
  .fill-panel h3 { margin-top: 0; margin-bottom: 0.15rem; }
  .fill-panel .side-hint { font-weight: 400; opacity: 0.6; font-size: 0.8rem; }
  .fill-table { width: 100%; border-collapse: collapse; margin-top: 0.5rem; }
  .fill-table th { text-align: left; font-size: 0.7rem; text-transform: uppercase; opacity: 0.7; padding: 0.2rem 0.4rem; }
  .fill-table td { padding: 0.2rem 0.4rem; }
  .fill-table input { width: 100%; box-sizing: border-box; }
  .fill-table td.remove-cell { width: 1.5rem; }
  .remove-row-btn { border: none; background: transparent; color: #c0392b; cursor: pointer; font-size: 1rem; opacity: 0.6; padding: 0 0.3rem; }
  .remove-row-btn:hover { opacity: 1; }
  .add-row-btn { font-size: 0.8rem; padding: 0.25rem 0.6rem; margin-top: 0.4rem; }
</style>

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

  <div class="trade-top-row">
    <label for="f-symbol">Symbol
      <input id="f-symbol" name="symbol" style="text-transform:uppercase;" value="{{ posted.symbol|default:'' }}" required>
    </label>
    <label for="f-direction">Direction
      <select id="f-direction" name="direction" onchange="updateSideLabels()" required>
        <option value="">— Select —</option>
        <option value="LONG" {% if posted.direction == "LONG" %}selected{% endif %}>Long</option>
        <option value="SHORT" {% if posted.direction == "SHORT" %}selected{% endif %}>Short</option>
      </select>
    </label>
    <label for="f-portfolio">Portfolio
      <select id="f-portfolio" name="portfolio">
        <option value="">No portfolio</option>
        {% for p in portfolios %}
        <option value="{{ p.id }}" {% if posted.portfolio_id == p.id|stringformat:"s" %}selected{% endif %}>{{ p.name }}</option>
        {% endfor %}
      </select>
    </label>
    <label for="f-trade-date">Trade date
      <input id="f-trade-date" type="date" name="trade_date" value="{{ posted.trade_date|default:today|date:'Y-m-d' }}" required>
    </label>
  </div>

  <p style="font-size:0.8rem; opacity:0.7; margin-bottom:0;">All fill times below use the trade date above.</p>
  <div class="fill-panels">
    <div class="fill-panel">
      <h3>Entries <span class="side-hint" id="entry-side-label"></span></h3>
      <table class="fill-table" id="entries-table">
        <thead><tr><th>Time</th><th>Price</th><th>Qty</th><th></th></tr></thead>
        <tbody>
          {% for row in posted.entry_rows %}
          <tr>
            <td><input type="time" step="1" name="entry_time" value="{{ row.0 }}" required></td>
            <td><input type="number" step="0.0001" name="entry_price" value="{{ row.1 }}" required></td>
            <td><input type="number" step="0.0001" min="0.0001" name="entry_qty" value="{{ row.2 }}" required></td>
            <td class="remove-cell"><button type="button" class="remove-row-btn" onclick="removeFillRow(this)">&times;</button></td>
          </tr>
          {% empty %}
          <tr>
            <td><input type="time" step="1" name="entry_time" required></td>
            <td><input type="number" step="0.0001" name="entry_price" required></td>
            <td><input type="number" step="0.0001" min="0.0001" name="entry_qty" required></td>
            <td class="remove-cell"><button type="button" class="remove-row-btn" onclick="removeFillRow(this)">&times;</button></td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
      <button type="button" class="add-row-btn" onclick="addFillRow('entries-table')">+ Add entry</button>
    </div>
    <div class="fill-panel">
      <h3>Exits <span class="side-hint" id="exit-side-label"></span></h3>
      <table class="fill-table" id="exits-table">
        <thead><tr><th>Time</th><th>Price</th><th>Qty</th><th></th></tr></thead>
        <tbody>
          {% for row in posted.exit_rows %}
          <tr>
            <td><input type="time" step="1" name="exit_time" value="{{ row.0 }}"></td>
            <td><input type="number" step="0.0001" name="exit_price" value="{{ row.1 }}"></td>
            <td><input type="number" step="0.0001" min="0.0001" name="exit_qty" value="{{ row.2 }}"></td>
            <td class="remove-cell"><button type="button" class="remove-row-btn" onclick="removeFillRow(this)">&times;</button></td>
          </tr>
          {% empty %}
          <tr>
            <td><input type="time" step="1" name="exit_time"></td>
            <td><input type="number" step="0.0001" name="exit_price"></td>
            <td><input type="number" step="0.0001" min="0.0001" name="exit_qty"></td>
            <td class="remove-cell"><button type="button" class="remove-row-btn" onclick="removeFillRow(this)">&times;</button></td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
      <button type="button" class="add-row-btn" onclick="addFillRow('exits-table')">+ Add exit</button>
      <p style="opacity:0.65; font-size:0.75rem; margin-bottom:0;">Leave exits empty for a trade that's still open. Exit qty less than entry qty leaves the rest open.</p>
    </div>
  </div>

  <div class="add-trade-row">
    <label for="f-comment">Comment</label>
    <div class="add-trade-field"><textarea id="f-comment" name="comment" rows="3">{{ posted.comment|default:'' }}</textarea></div>
  </div>

  <button type="submit">Save trade</button>
</form>

<script>
function addFillRow(tableId) {
  var tbody = document.querySelector('#' + tableId + ' tbody');
  var newRow = tbody.rows[0].cloneNode(true);
  newRow.querySelectorAll('input').forEach(function(input) { input.value = ''; });
  tbody.appendChild(newRow);
}
function removeFillRow(btn) {
  var tbody = btn.closest('tbody');
  if (tbody.rows.length > 1) {
    btn.closest('tr').remove();
  } else {
    btn.closest('tr').querySelectorAll('input').forEach(function(input) { input.value = ''; });
  }
}
function updateSideLabels() {
  var dir = document.getElementById('f-direction').value;
  var entryLabel = document.getElementById('entry-side-label');
  var exitLabel = document.getElementById('exit-side-label');
  if (dir === 'LONG') {
    entryLabel.textContent = '(Buy)';
    exitLabel.textContent = '(Sell)';
  } else if (dir === 'SHORT') {
    entryLabel.textContent = '(Short sell)';
    exitLabel.textContent = '(Buy to cover)';
  } else {
    entryLabel.textContent = '';
    exitLabel.textContent = '';
  }
}
updateSideLabels();
</script>
{% endblock %}