<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title><%= title %> — STOA</title>
  <link rel="stylesheet" href="/css/style.css">
  <style>
    body.lots-page {
      margin: 0;
      min-height: 100vh;
      background: #1a1a1a;
      color: #f0f0f0;
      font-family: Inter, system-ui, sans-serif;
    }
    .lots-wrap {
      max-width: 960px;
      margin: 0 auto;
      padding: 1.5rem;
    }
    .lots-head {
      display: flex;
      justify-content: space-between;
      gap: 1rem;
      align-items: flex-start;
      margin-bottom: 1.25rem;
    }
    .lots-head h1 {
      margin: 0;
      font-size: 1.5rem;
      font-weight: 300;
    }
    .lots-meta { color: #a3a3a3; margin: 0.35rem 0 0; font-size: 0.9rem; }
    .lots-table {
      width: 100%;
      border-collapse: collapse;
      background: #242424;
      border: 1px solid #3d3d3d;
    }
    .lots-table th,
    .lots-table td {
      border-bottom: 1px solid #3d3d3d;
      border-right: 1px solid #3d3d3d;
      padding: 0.45rem 0.5rem;
      text-align: left;
    }
    .lots-table th:last-child,
    .lots-table td:last-child { border-right: none; }
    .lots-table th {
      font-size: 0.72rem;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: #a3a3a3;
      background: #2e2e2e;
    }
    .lots-table .num { text-align: right; }
    .lots-table input {
      width: 100%;
      box-sizing: border-box;
      border: none;
      background: transparent;
      color: #f0f0f0;
      font: inherit;
      text-align: right;
      padding: 0.25rem;
    }
    .lots-table input[name="designation"] { text-align: left; }
    .lots-table input:focus {
      outline: 1px solid #cfcfcf;
      background: #141414;
    }
    .lots-summary {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1px;
      background: #3d3d3d;
      border: 1px solid #3d3d3d;
      margin: 1rem 0;
    }
    .lots-status-summary {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1px;
      background: #3d3d3d;
      border: 1px solid #3d3d3d;
      margin: 0 0 1rem;
    }
    .lots-status-summary > div {
      background: #242424;
      padding: 0.7rem 1rem;
    }
    .lots-table select {
      width: 100%;
      border: 1px solid #3d3d3d;
      background: #141414;
      color: #f0f0f0;
      font: inherit;
      padding: 0.3rem 0.4rem;
    }
    .lot-status-dispo { border-left: 3px solid #dc2626; }
    .lot-status-reserve { border-left: 3px solid #f59e0b; }
    .lot-status-vendu { border-left: 3px solid #16a34a; }
    .lot-num-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 2rem;
      padding: 0.2rem 0.45rem;
      border: 1px solid #3d3d3d;
      background: #2e2e2e;
      color: #f0f0f0;
      font-variant-numeric: tabular-nums;
    }
    .lots-table [data-lot-row].is-focused td {
      background: rgba(34, 197, 94, 0.12);
      box-shadow: inset 0 0 0 1px rgba(34, 197, 94, 0.35);
    }
    .lots-summary > div {
      background: #242424;
      padding: 0.85rem 1rem;
    }
    .lots-summary label {
      display: block;
      font-size: 0.72rem;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: #a3a3a3;
      margin-bottom: 0.35rem;
    }
    .lots-summary strong,
    .lots-summary input {
      font-size: 1.15rem;
      font-weight: 600;
    }
    .lots-summary input {
      width: 100%;
      border: none;
      background: transparent;
      color: #fff;
      font: inherit;
      text-align: left;
      padding: 0;
    }
    .lots-actions {
      display: flex;
      gap: 0.6rem;
      margin-top: 1rem;
    }
    .empty {
      padding: 1.25rem;
      border: 1px solid #3d3d3d;
      background: #242424;
      color: #a3a3a3;
    }
  </style>
</head>
<body class="lots-page">
  <div class="lots-wrap">
    <div class="lots-head">
      <div>
        <p class="eyebrow">Détail du prix de vente</p>
        <h1><%= programme.nom_commercial %></h1>
        <p class="lots-meta">
          <%= formatInteger(programme.nombre_lots || 0) %> lot(s)
          · <code><%= programme.code_interne %></code>
        </p>
      </div>
      <div class="actions">
        <a href="/programmes/<%= programme.id %>/budget" class="btn btn-ghost" onclick="if (window.opener) { window.opener.location.reload(); window.close(); return false; }">Fermer</a>
      </div>
    </div>

    <% if (saved) { %>
      <div class="notice">Lots enregistrés — le prix de vente a été mis à jour.</div>
    <% } %>

    <% if (!lots.length) { %>
      <p class="empty">
        Aucun lot. Indiquez le <strong>nombre de lots</strong> sur la
        <a href="/programmes/<%= programme.id %>/modifier">fiche programme</a>.
      </p>
    <% } else { %>
      <form method="POST" action="/programmes/<%= programme.id %>/budget/lots" id="lots-form">
        <div class="lots-summary">
          <div>
            <label>Surface totale (m²)</label>
            <strong data-total-surface><%= formatNumber(totalSurface, { digits: 2 }) %></strong>
          </div>
          <div>
            <label>Prix total HT</label>
            <input
              type="text"
              id="prix-total-ht"
              class="js-thousand"
              data-digits="0"
              data-round="100"
              value="<%= formatMoney(totalPrixHt, '0') %>"
              inputmode="decimal"
              autocomplete="off"
            >
          </div>
          <div>
            <label>Prix moyen €/m²</label>
            <strong data-prix-m2-moyen><%= formatNumber(prixM2Moyen, { digits: 2 }) %></strong>
          </div>
        </div>

        <div class="lots-status-summary">
          <% statuts.forEach(function(s) { %>
            <div>
              <label><%= s.label %></label>
              <strong><%= byStatut[s.value] || 0 %></strong>
            </div>
          <% }) %>
        </div>

        <table class="lots-table">
          <thead>
            <tr>
              <th>Lot</th>
              <th>Désignation</th>
              <th>Statut</th>
              <th class="num">Surface (m²)</th>
              <th class="num">Prix HT</th>
              <th class="num">Prix €/m²</th>
            </tr>
          </thead>
          <tbody>
            <% lots.forEach(function(lot) { %>
              <tr data-lot-row data-lot-numero="<%= lot.numero %>" id="lot-<%= lot.numero %>" class="lot-status-<%= lot.statut %>">
                <td>
                  <input type="hidden" name="numero" value="<%= lot.numero %>">
                  <span class="lot-num-badge"><%= lot.numero %></span>
                </td>
                <td>
                  <input type="text" name="designation" value="<%= lot.designation %>">
                </td>
                <td>
                  <select name="statut">
                    <% statuts.forEach(function(s) { %>
                      <option value="<%= s.value %>" <%= lot.statut === s.value ? 'selected' : '' %>><%= s.label %></option>
                    <% }) %>
                  </select>
                </td>
                <td class="num">
                  <input
                    type="text"
                    name="surface"
                    class="js-thousand js-lot-surface"
                    data-digits="2"
                    value="<%= formatNumber(lot.surface, { digits: 2, empty: '0,00' }) %>"
                    inputmode="decimal"
                    autocomplete="off"
                  >
                </td>
                <td class="num">
                  <input
                    type="text"
                    name="prix_ht"
                    class="js-thousand js-lot-prix"
                    data-digits="0"
                    data-round="100"
                    value="<%= formatMoney(lot.prix_ht, '0') %>"
                    inputmode="decimal"
                    autocomplete="off"
                  >
                </td>
                <td class="num">
                  <input
                    type="text"
                    class="js-thousand js-lot-prix-m2"
                    data-digits="2"
                    value="<%= formatNumber(lot.prix_m2, { digits: 2, empty: '0,00' }) %>"
                    inputmode="decimal"
                    autocomplete="off"
                  >
                </td>
              </tr>
            <% }) %>
          </tbody>
        </table>

        <div class="lots-actions">
          <button type="submit" class="btn btn-primary">Enregistrer</button>
          <button type="button" class="btn btn-ghost" onclick="if (window.opener) { window.opener.location.reload(); } window.close();">Fermer</button>
        </div>
      </form>
    <% } %>
  </div>

  <script src="/js/format-numbers.js"></script>
  <script src="/js/budget-lots.js"></script>
</body>
</html>
