{{-- Project Status → Export picker. Scopes follow the page's two halves: the roll-up panels,
     the target hierarchy, or both. Plain GET to /projects/{project}/export so the browser
     handles the download. Params: $pxProject, $pxTq. --}}
@once
<style>
  .px-modal-foot { display:flex; justify-content:flex-end; gap:.5rem; padding:.8rem 1.1rem;
    border-top:1px solid var(--line); }
  .px-opts { display:flex; flex-direction:column; gap:.4rem; margin-top:.35rem; }
  .px-opts-row { flex-direction:row; }
  .px-opts-row .px-opt { flex:1 1 0; min-width:0; }
  .px-opt { display:flex; align-items:flex-start; gap:.5rem; cursor:pointer; padding:.5rem .6rem;
    border:1px solid var(--line); border-radius:var(--r-sm); background:var(--card); }
  .px-opt:hover { border-color:var(--primary); }
  .px-opt.on { border-color:var(--primary); background:var(--primary-soft); }
  .px-opt input { margin-top:.15rem; flex:none; }
  .px-opt b { display:block; font-size:.88rem; }
  .px-opt small { display:block; color:var(--muted); font-size:.74rem; line-height:1.35; }
  .px-label { display:block; font-size:.82rem; font-weight:600; color:var(--ink); margin-bottom:.3rem; }
  body.is-export .px-export { display:none; }
</style>
@endonce

<span class="px-export"
      x-data="{
        open: false, scope: 'overall', format: 'excel',
        url() {
          return '/projects/{{ rawurlencode($pxProject) }}/export?format=' + this.format
               + '&scope=' + this.scope + '&tq={{ urlencode($pxTq) }}';
        },
        go() { window.location = this.url(); this.open = false; }
      }">
  <button type="button" class="wk-scope-btn" @click="open = true"
          title="Download this page as Excel or PDF, laid out as it is here">⬇ Export</button>

  <div class="wk-modal" x-show="open" x-cloak style="display:flex"
       @click.self="open = false" @keydown.escape.window="open = false">
    <div class="wk-modal-card" style="width:min(560px,94vw)">
      <div class="wk-modal-head">
        <strong>Export Project Status <span class="muted" style="font-weight:400">· {{ $pxTq }}
          · all projects</span></strong>
        <button type="button" class="wk-modal-close" @click="open = false">✕</button>
      </div>
      <div class="wk-modal-body" style="display:block">
        <span class="px-label">What to export</span>
        <div class="px-opts">
          <label class="px-opt" :class="{ on: scope === 'summary' }">
            <input type="radio" value="summary" x-model="scope">
            <span><b>Summary only</b><small>Completion, the Jira status breakdown, monthly progress,
              by story type and Assigned QA — no per-story detail.</small></span>
          </label>
          <label class="px-opt" :class="{ on: scope === 'targets' }">
            <input type="radio" value="targets" x-model="scope">
            <span><b>Target stories only</b><small>Every target story with its linked Jira issues,
              grouped under its epic exactly as below.</small></span>
          </label>
          <label class="px-opt" :class="{ on: scope === 'overall' }">
            <input type="radio" value="overall" x-model="scope">
            <span><b>Overall</b><small>The summary panels <em>and</em> the full target hierarchy —
              the whole page as shown.</small></span>
          </label>
        </div>

        <div style="margin-top:.9rem">
          <span class="px-label">Format</span>
          <div class="px-opts px-opts-row">
            <label class="px-opt" :class="{ on: format === 'excel' }">
              <input type="radio" value="excel" x-model="format">
              <span><b>Excel</b><small>An all-projects sheet, then one per project.</small></span>
            </label>
            <label class="px-opt" :class="{ on: format === 'pdf' }">
              <input type="radio" value="pdf" x-model="format">
              <span><b>PDF</b><small>This page's layout on paper, landscape.</small></span>
            </label>
          </div>
        </div>

        <p class="muted" style="font-size:.75rem;margin:.8rem 0 0">
          Covers <b>ERP, CRM and SMPP</b> for {{ $pxTq }}, not just this tab — one sheet (or page)
          each, after an all-projects comparison. Projects with no import for the quarter are left
          out. Every Jira key — targets, epics and linked issues — stays a clickable link.
        </p>
      </div>
      <div class="px-modal-foot">
        <button type="button" class="wk-scope-btn all-year" @click="open = false">Cancel</button>
        <button type="button" class="wk-scope-btn" @click="go()">⬇ Export</button>
      </div>
    </div>
  </div>
</span>