<% layout('layouts/main') %>
<% const clientBase = typeof clientBaseUrl !== 'undefined' ? clientBaseUrl : '/client'; %>
<div class="app-shell">
  <%- partial('partials/client-nav') %>
  <section class="content">
    <div class="page-head"><div><p class="eyebrow">Devis</p><h1><%= quote.quote_number %></h1></div><span class="badge"><%= ui.label(quote.status) %></span></div>
    <div class="panel quote-accept-summary">
      <% if (quote.description) { %><p><%= quote.description %></p><% } %>
      <div class="mobile-list compact-list">
        <% items.forEach(i=>{ %>
          <article class="line-card"><strong><%= i.description %></strong><span><%= i.quantity %> x <%= ui.money(i.unit_price) %></span><b><%= ui.money(i.total) %></b></article>
        <% }) %>
      </div>
      <div class="detail-grid compact">
        <div class="detail-item"><span>Total</span><strong><%= ui.money(quote.total) %></strong></div>
        <div class="detail-item"><span>TVA</span><strong><%= quote.vat_label || 'TVA non applicable' %></strong></div>
      </div>
      <a class="button secondary" href="/quotes/<%= quote.id %>/pdf">Télécharger le PDF</a>
    </div>
    <% if (quote.status === 'envoye') { %>
      <form method="post" action="<%= clientBase %>/devis/<%= quote.id %>/accepter" class="panel form-grid acceptance-box" data-confirm="Confirmer l’acceptation du devis ?">
        <h2>Récapitulatif avant acceptation</h2>
        <div class="detail-grid compact">
          <div class="detail-item"><span>Devis</span><strong><%= quote.quote_number %></strong></div>
          <div class="detail-item"><span>Prestation</span><strong><%= quote.service_type %></strong></div>
          <div class="detail-item"><span>Total à valider</span><strong><%= ui.money(quote.total) %></strong></div>
          <div class="detail-item"><span>Validité</span><strong><%= ui.date(quote.valid_until) %></strong></div>
        </div>
        <input type="hidden" name="_csrf" value="<%= csrfToken %>">
        <label>Nom du signataire<input name="signer_name" value="<%= [currentUser?.first_name, currentUser?.last_name].filter(Boolean).join(' ') %>" required></label>
        <div class="signature-pad-block" data-signature-form>
          <div class="compact-heading">
            <div>
              <h3>Signature</h3>
              <p class="muted">Signez avec le doigt, le stylet ou la souris.</p>
            </div>
            <button type="button" class="secondary" data-clear-signature>Effacer</button>
          </div>
          <canvas width="680" height="220" data-signature-canvas aria-label="Zone de signature"></canvas>
          <input type="hidden" name="signature_data" data-signature-input>
        </div>
        <label class="check premium-check"><input type="checkbox" name="accept_terms" required><span><strong>J’accepte ce devis</strong><small>Votre accord sera horodaté avec une signature électronique simple, votre adresse IP et votre navigateur.</small></span></label>
        <button>Accepter le devis</button>
      </form>
      <form method="post" action="<%= clientBase %>/devis/<%= quote.id %>/refuser" class="panel" data-confirm="Refuser ce devis ?">
        <input type="hidden" name="_csrf" value="<%= csrfToken %>">
        <button class="secondary">Refuser le devis</button>
      </form>
    <% } %>
    <script>
      (() => {
        const form = document.querySelector('[data-signature-form]')?.closest('form');
        if (!form) return;
        const canvas = form.querySelector('[data-signature-canvas]');
        const input = form.querySelector('[data-signature-input]');
        const clear = form.querySelector('[data-clear-signature]');
        const ctx = canvas.getContext('2d');
        let drawing = false;
        let hasInk = false;
        const setup = () => {
          const rect = canvas.getBoundingClientRect();
          const ratio = window.devicePixelRatio || 1;
          canvas.width = Math.max(320, Math.round(rect.width * ratio));
          canvas.height = Math.round(220 * ratio);
          ctx.scale(ratio, ratio);
          ctx.lineWidth = 2;
          ctx.lineCap = 'round';
          ctx.strokeStyle = '#172536';
        };
        const point = (event) => {
          const rect = canvas.getBoundingClientRect();
          const source = event.touches ? event.touches[0] : event;
          return { x: source.clientX - rect.left, y: source.clientY - rect.top };
        };
        const start = (event) => { drawing = true; hasInk = true; const p = point(event); ctx.beginPath(); ctx.moveTo(p.x, p.y); event.preventDefault(); };
        const move = (event) => { if (!drawing) return; const p = point(event); ctx.lineTo(p.x, p.y); ctx.stroke(); event.preventDefault(); };
        const stop = () => { drawing = false; };
        setup();
        canvas.addEventListener('mousedown', start);
        canvas.addEventListener('mousemove', move);
        canvas.addEventListener('mouseup', stop);
        canvas.addEventListener('mouseleave', stop);
        canvas.addEventListener('touchstart', start, { passive: false });
        canvas.addEventListener('touchmove', move, { passive: false });
        canvas.addEventListener('touchend', stop);
        clear?.addEventListener('click', () => { ctx.clearRect(0, 0, canvas.width, canvas.height); hasInk = false; input.value = ''; });
        form.addEventListener('submit', () => { input.value = hasInk ? canvas.toDataURL('image/png') : ''; });
      })();
    </script>
  </section>
</div>
