`views/partials/coi-request.ejs`

99 lines
<%# Shared "Request COI" section used by all installer-template variants.
    Renders nothing for unclaimed studios or studios without insurance_on_file.
    Expects: installer, csrfToken in scope. %>
<% if (installer.insurance_on_file && installer.claim_status !== 'unclaimed') { %>
  <section id="coi-section" class="profile-section coi-section" style="max-width:680px;margin:32px auto;padding:24px;border:1px solid var(--border,#ddd);border-radius:8px">
    <h2 style="margin:0 0 4px;font-size:22px;letter-spacing:0.01em">Certificate of Insurance — on request</h2>
    <p class="muted" style="margin:0 0 16px;font-size:14px;line-height:1.55">
      For luxury commercial &amp; hospitality jobs that need <em>your firm</em> named as additional insured per project. Skip the 3-day phone-tag — fill the form and the cert lands in your inbox in 1–3 business days.
    </p>
    <button type="button" class="btn btn-primary btn-sm" data-coi-toggle>Request COI →</button>
    <p class="muted" style="font-size:12px;margin:12px 0 0">
      Routed directly to <%= installer.business_name %><% if (installer.insurance && installer.insurance.broker_email) { %> + their broker<% } %>. No NPH escrow, no fees.
    </p>

    <form id="coi-request-form" method="POST" action="/installer/<%= installer.slug %>/coi-request"
          style="display:none;margin-top:20px;display:grid;gap:14px">
      <input type="hidden" name="_csrf" value="<%= csrfToken %>">

      <fieldset style="border:none;padding:0;margin:0;display:grid;gap:10px">
        <legend style="font-size:12px;text-transform:uppercase;letter-spacing:0.08em;color:#999;margin-bottom:6px;padding:0">You (the designer)</legend>
        <label>Name <span style="color:#dc2626">*</span><br>
          <input type="text" name="designer_name" required maxlength="120" style="width:100%">
        </label>
        <label>Design firm
          <input type="text" name="designer_company" maxlength="200" style="width:100%">
        </label>
        <div style="display:grid;grid-template-columns:1fr 1fr;gap:10px">
          <label>Email <span style="color:#dc2626">*</span><br>
            <input type="email" name="designer_email" required maxlength="200" style="width:100%">
          </label>
          <label>Phone
            <input type="tel" name="designer_phone" maxlength="40" style="width:100%">
          </label>
        </div>
      </fieldset>

      <fieldset style="border:none;padding:0;margin:0;display:grid;gap:10px">
        <legend style="font-size:12px;text-transform:uppercase;letter-spacing:0.08em;color:#999;margin-bottom:6px;padding:0">The project</legend>
        <label>Project name
          <input type="text" name="project_name" maxlength="200" style="width:100%" placeholder="e.g. Riviera Suite — Beverly Hills">
        </label>
        <label>Project address
          <input type="text" name="project_address" maxlength="400" style="width:100%">
        </label>
        <div style="display:grid;grid-template-columns:1fr 1fr;gap:10px">
          <label>Install start date
            <input type="date" name="project_start_date" style="width:100%">
          </label>
          <label>Approx. install value
            <input type="text" name="project_value_usd" maxlength="14" style="width:100%" placeholder="$"
                   pattern="[0-9.,$\s]*" inputmode="decimal">
          </label>
        </div>
      </fieldset>

      <fieldset style="border:none;padding:0;margin:0;display:grid;gap:10px">
        <legend style="font-size:12px;text-transform:uppercase;letter-spacing:0.08em;color:#999;margin-bottom:6px;padding:0">Name on the certificate</legend>
        <label>Additional insured (exact phrasing) <span style="color:#dc2626">*</span><br>
          <input type="text" name="additional_insured_name" required maxlength="200" style="width:100%" placeholder="e.g. ACME Design LLC, its officers and directors">
        </label>
        <label>Their address
          <input type="text" name="additional_insured_address" maxlength="400" style="width:100%">
        </label>
        <label>Notes for the broker
          <textarea name="notes" maxlength="800" rows="3" style="width:100%" placeholder="Anything special — waiver of subrogation, primary/non-contributory wording, etc."></textarea>
        </label>
      </fieldset>

      <div style="display:flex;gap:10px;align-items:center;margin-top:6px">
        <button type="submit" class="btn btn-primary">Send request →</button>
        <button type="button" class="btn btn-ghost btn-sm" data-coi-cancel>Cancel</button>
      </div>
    </form>

    <script>
      (function(){
        var sec = document.getElementById('coi-section');
        if (!sec) return;
        var t = sec.querySelector('[data-coi-toggle]');
        var c = sec.querySelector('[data-coi-cancel]');
        var f = document.getElementById('coi-request-form');
        if (!t || !f) return;
        t.addEventListener('click', function(){
          f.style.display = 'grid';
          t.style.display = 'none';
          f.scrollIntoView({behavior:'smooth', block:'start'});
          var first = f.querySelector('input[name="designer_name"]');
          if (first) first.focus();
        });
        if (c) c.addEventListener('click', function(){
          f.style.display = 'none';
          t.style.display = '';
          t.scrollIntoView({behavior:'smooth'});
        });
      })();
    </script>
  </section>
<% } %>