@extends('layouts.app')
@section('title', 'Import Target · QA Dashboard')

@section('content')
<section>
  <h2>Import Target</h2>
  <p class="muted">Set each project's <strong>Quarter Targets</strong>. Pick the quarter, then upload the BA target sheet as <strong>CSV</strong> (in Google Sheets: File → Download → CSV), paste Jira links, or do both in one go.</p>

  @if (session('status'))<div class="alert ok">{{ session('status') }}</div>@endif
  @if ($errors->any())<div class="alert error">{{ $errors->first() }}</div>@endif

  @foreach ($projects as $name => $p)
  <div class="account-form" style="margin-bottom:1rem">
    <h3>{{ $name }}
      @if ($p['total'])<span class="badge status-done" style="margin-left:.5rem">{{ $p['total'] }} stories imported</span>@endif
    </h3>

    <form method="post" action="/import-target/{{ $name }}/import" enctype="multipart/form-data">
      @csrf
      <div style="display:flex;gap:.75rem;align-items:end;flex-wrap:wrap">
        <div class="dz-field">
          <span class="dz-label">Quarter</span>
          <select name="quarter" required>
            @foreach ($quarters as $q)<option value="{{ $q }}">{{ $q }}</option>@endforeach
          </select>
        </div>
        <div class="dz-field dz-grow">
          <span class="dz-label">Target sheet (CSV)</span>
          <label class="dropzone"
                 x-data="{ over:false, name:'', set(fs){ if(fs && fs.length){ this.$refs.f.files = fs; this.name = fs[0].name; } } }"
                 @dragover.prevent="over=true" @dragleave.prevent="over=false"
                 @drop.prevent="over=false; set($event.dataTransfer.files)"
                 :class="{ over: over }">
            <input type="file" name="file" accept=".csv,text/csv" class="dz-input" x-ref="f"
                   @change="name = $event.target.files.length ? $event.target.files[0].name : ''">
            <span class="dz-icon">⬆</span>
            <span class="dz-text" x-text="name || 'Drag &amp; drop CSV here, or click to browse'"></span>
          </label>
        </div>
      </div>

      <div class="dz-field" style="margin-top:.75rem">
        <span class="dz-label">Jira links</span>
        <textarea name="jira_links" rows="3" style="width:100%;resize:vertical"
                  placeholder="One per line — https://bellkenz.atlassian.net/browse/ESCM-1234 or just ESCM-1234"></textarea>
      </div>

      <div style="display:flex;gap:.75rem;align-items:center;margin-top:.75rem">
        <button type="submit">Import {{ $name }}</button>
        @if (!empty($p['by_quarter']))
          <a href="/quarter-targets/{{ $name }}"><button type="button" class="wk-confirm-cancel">Open targets</button></a>
        @endif
      </div>
    </form>

    <p class="muted" style="margin-top:.75rem">A CSV <strong>replaces</strong> that quarter's target list (your confirmed matches carry over); Jira links are <strong>added</strong> to it. Rows with a Jira key auto-link, keyless rows are title-matched for you to confirm.</p>

    @if (!empty($p['by_quarter']))
      <div class="import-imports">
        <div class="import-imports-label">Imported quarters</div>
        @foreach ($p['by_quarter'] as $q => $c)
          <div class="import-quarter">
            <span class="import-quarter-name">{{ $q }} <span class="muted">· {{ $c }} stories</span></span>
            <a href="/quarter-targets/{{ $name }}?quarter={{ $q }}" class="import-quarter-open">Open</a>
          </div>
        @endforeach
      </div>
    @endif
  </div>
  @endforeach

  <p class="muted" style="margin-top:1rem">Expected CSV columns: a story/title column (e.g. <code>Module</code>, <code>Story</code>, <code>Target story</code>) and, where available, a Jira key column (<code>Jira</code>, <code>Key</code>, <code>Issue</code>).</p>
</section>
@endsection