<% layout('layouts/main') %>
<% const adminBase = typeof adminBaseUrl !== 'undefined' ? adminBaseUrl : '/admin'; %>
<div class="app-shell">
  <%- partial('partials/admin-nav') %>
  <section class="content invoice-page">
    <div class="page-head"><div><p class="eyebrow">Facturation</p><h1>Créer une facture</h1></div></div>
    <% if (!bankAccounts.length) { %>
      <p class="panel">Aucun compte bancaire actif n’est configuré. Ajoutez un compte dans les paramètres pour générer une QR-facture complète.</p>
    <% } %>
    <form method="post" action="<%= adminBase %>/factures" class="invoice-editor" data-invoice-form>
      <input type="hidden" name="_csrf" value="<%= csrfToken %>">

      <section class="invoice-section">
        <div class="section-title"><span>1</span><h2>Client & paiement</h2></div>
        <div class="form-grid two">
          <label>Client<select name="user_id"><% clients.forEach(c=>{ %><option value="<%= c.id %>"><%= c.first_name %> <%= c.last_name %> - <%= c.email %></option><% }) %></select></label>
          <label>Compte bancaire QR-facture
            <select name="bank_account_id">
              <option value="">Aucun compte / pas de QR-facture</option>
              <% bankAccounts.forEach(account=>{ %><option value="<%= account.id %>" <%= account.is_default ? 'selected' : '' %>><%= account.label %> - <%= account.iban %></option><% }) %>
            </select>
          </label>
        </div>
        <div class="form-grid two">
          <label>Conditions de paiement
            <select name="payment_terms_days" data-payment-terms>
              <option value="10">A 10 jours</option>
              <option value="30" selected>A 30 jours</option>
            </select>
          </label>
          <label>Échéance automatique<input type="date" name="due_date" data-due-date></label>
        </div>
        <p class="field-help">L’échéance est calculée automatiquement depuis la date d’émission de la facture.</p>
      </section>

      <section class="invoice-section">
        <div class="section-title"><span>2</span><h2>Prestation</h2></div>
        <label>Prestation<input name="service_type" placeholder="Ex. Nettoyage régulier, fin de bail, vitres, conciergerie" required></label>
        <label>Description<textarea name="description" placeholder="Détail visible sur la facture"></textarea></label>
      </section>

      <section class="invoice-section">
        <div class="section-title"><span>3</span><h2>Lignes de facture</h2></div>
        <p class="field-help">Choisissez l’unité adaptée. Pour les heures, vous pouvez saisir par exemple 1h35, 1:35 ou 1.5.</p>
        <div class="invoice-lines-head"><span>Description</span><span>Quantité</span><span>Unité</span><span>Prix unitaire</span><span>Total</span><span></span></div>
        <div id="invoice-lines" class="invoice-lines">
          <div class="line-row invoice-line" data-invoice-line>
            <label class="mini-field"><span>Description</span><input name="item_description" placeholder="Description"></label>
            <label class="mini-field"><span data-quantity-label>Quantité</span><input name="item_quantity" value="1" placeholder="1" inputmode="decimal" data-line-quantity></label>
            <label class="mini-field"><span>Unité</span><select name="item_unit" data-line-unit>
              <option value="forfait">Forfait</option>
              <option value="heure">Heures</option>
              <option value="m2">m²</option>
              <option value="piece">Pièce</option>
              <option value="fenetre">Fenêtre</option>
              <option value="store">Store</option>
              <option value="jour">Jour</option>
              <option value="deplacement">Déplacement</option>
            </select></label>
            <label class="mini-field"><span data-price-label>Prix unitaire</span><input name="item_price" placeholder="Prix" inputmode="decimal" data-line-price></label>
            <div class="line-total"><span>Total</span><strong data-line-total>CHF 0.00</strong></div>
            <button type="button" class="icon-danger" data-remove-line aria-label="Supprimer cette ligne">×</button>
          </div>
        </div>
        <button type="button" class="secondary" data-add-line="#invoice-lines">Ajouter une ligne</button>
      </section>

      <section class="invoice-section">
        <div class="section-title"><span>4</span><h2>TVA & finalisation</h2></div>
        <div class="form-grid two">
          <label class="check premium-check"><input type="checkbox" name="vat_enabled"><span><strong>TVA active</strong><small>Le taux est appliqué au total des lignes.</small></span></label>
          <label>Taux TVA<input name="vat_rate" value="<%= app.tvaRate %>" inputmode="decimal"></label>
        </div>
        <label>Conditions internes ou note optionnelle<textarea name="conditions" placeholder="Optionnel"></textarea></label>
        <button>Créer la facture avec QR-facture</button>
      </section>
    </form>
  </section>
</div>
