{{-- Weekly Tasks → Export picker. Same three scopes as the Monthly Summary's modal, in weeks
     instead of months, plus the format. Plain GET to /weekly/export so the browser handles the
     download. Always team-wide (a non-lead gets their own log, as the module shows them).
     Params: $wxQuarter, $wxIsLead, $wxWeeks (PeriodService::weeksInQuarter), $wxCurrentWeek. --}}
@once
<style>
  .wx-modal-foot { display:flex; justify-content:flex-end; gap:.5rem; padding:.8rem 1.1rem;
    border-top:1px solid var(--line); }
  .wx-opts { display:flex; flex-direction:column; gap:.4rem; margin-top:.35rem; }
  .wx-opts-row { flex-direction:row; }
  .wx-opts-row .wx-opt { flex:1 1 0; min-width:0; }
  .wx-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); }
  .wx-opt:hover { border-color:var(--primary); }
  .wx-opt.on { border-color:var(--primary); background:var(--primary-soft); }
  .wx-opt input { margin-top:.15rem; flex:none; }
  .wx-opt b { display:block; font-size:.88rem; }
  .wx-opt small { display:block; color:var(--muted); font-size:.74rem; line-height:1.35; }
  .wx-label { display:block; font-size:.82rem; font-weight:600; color:var(--ink); margin-bottom:.3rem; }
</style>
@endonce

@php
  // Default to the active week, else the quarter's last (a fully past/future quarter).
  $wxStarts = array_column($wxWeeks, 'start');
  $wxDefault = in_array($wxCurrentWeek, $wxStarts, true) ? $wxCurrentWeek : (end($wxStarts) ?: '');
@endphp

<div x-data="{
       open: false,
       scope: 'overall',
       week: '{{ $wxDefault }}',
       format: 'excel',
       url() {
         {{-- No member param: the export is always team-wide (the server decides, and holds
              a non-lead to their own log). --}}
         let u = '/weekly/export?format=' + this.format + '&scope=' + this.scope
               + '&quarter={{ urlencode($wxQuarter) }}';
         if (this.scope === 'week') u += '&week=' + encodeURIComponent(this.week);
         return u;
       },
       go() { window.location = this.url(); this.open = false; }
     }">
  <button type="button" class="wk-scope-btn" @click="open = true"
          title="Download this log 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 Weekly Tasks <span class="muted" style="font-weight:400">· {{ $wxQuarter }}
          · {{ $wxIsLead ? 'all members' : 'your log' }}</span></strong>
        <button type="button" class="wk-modal-close" @click="open = false">✕</button>
      </div>
      <div class="wk-modal-body" style="display:block">
        <span class="wx-label">What to export</span>
        <div class="wx-opts">
          <label class="wx-opt" :class="{ on: scope === 'week' }">
            <input type="radio" value="week" x-model="scope">
            <span><b>Up to a week</b><small>The week you pick <em>plus the earlier weeks of the
              quarter</em>. Pick the first week to get it on its own.</small></span>
          </label>
          <label class="wx-opt" :class="{ on: scope === 'quarter' }">
            <input type="radio" value="quarter" x-model="scope">
            <span><b>Quarter only</b><small>Every task of the quarter grouped by module, with no
              week-by-week split.</small></span>
          </label>
          <label class="wx-opt" :class="{ on: scope === 'overall' }">
            <input type="radio" value="overall" x-model="scope">
            <span><b>Overall</b><small>The week × module summary <em>and</em> every week's log —
              the whole module as shown.</small></span>
          </label>
        </div>

        <div x-show="scope === 'week'" x-cloak style="margin-top:.8rem">
          <span class="wx-label">Up to and including</span>
          <select x-model="week" style="width:100%">
            @foreach ($wxWeeks as $i => $w)
              {{-- NB: keep a space before @endif — Blade will not compile a directive that
                   sits directly after a word character. --}}
              <option value="{{ $w['start'] }}">{{ $w['label'] }}@if ($i > 0) · with the {{ $i }} week{{ $i === 1 ? '' : 's' }} before it @endif</option>
            @endforeach
          </select>
        </div>

        <div style="margin-top:.9rem">
          <span class="wx-label">Format</span>
          <div class="wx-opts wx-opts-row">
            <label class="wx-opt" :class="{ on: format === 'excel' }">
              <input type="radio" value="excel" x-model="format">
              <span><b>Excel</b><small>Summary matrix + the log, laid out like this page.</small></span>
            </label>
            <label class="wx-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">
          @if ($wxIsLead)
            Covers <b>every member</b> whatever the page is filtered to, with an Owner column on
            each row.
          @else
            Covers your own log — the same tasks this page shows you.
          @endif
          Every Jira key — the task's own and any stories a grouped row covers — stays a clickable
          link in both formats.
        </p>
      </div>
      <div class="wx-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>
</div>