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

@section('content')
<section>
  <h2>Import Performance Appraisal</h2>
  <p class="muted">Upload a QA member's <strong>Job Scorecard / Performance Appraisal</strong> workbook (<code>.xlsx</code>). Pick the member, the quarter, and the worksheet name to read (e.g. <code>Q2 2026 PA</code>). The scorecard's three sections are parsed and become editable in <a href="/performance">Performance</a>. Re-importing a member + quarter replaces that scorecard.</p>

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

  <div class="account-form" style="margin-bottom:1rem"
       x-data="{ quarter: '{{ $currentQuarter }}',
                 sheet(){ let m = this.quarter.match(/(\d{4})-Q(\d)/); return m ? ('Q'+m[2]+' '+m[1]+' PA') : ''; } }">
    <form method="post" action="/pa-import/upload" enctype="multipart/form-data"
          style="display:flex;gap:.75rem;align-items:end;flex-wrap:wrap">
      @csrf
      <div class="dz-field">
        <span class="dz-label">Member</span>
        <select name="member" required>
          @foreach ($members as $m)<option value="{{ $m->email }}">{{ $m->display_name ?: $m->email }}</option>@endforeach
        </select>
      </div>
      <div class="dz-field">
        <span class="dz-label">Quarter</span>
        <select name="quarter" required x-model="quarter" @change="$refs.sheet.value = sheet()">
          @foreach ($quarters as $q)<option value="{{ $q }}" @selected($q === $currentQuarter)>{{ $q }}</option>@endforeach
        </select>
      </div>
      <div class="dz-field">
        <span class="dz-label">Worksheet name</span>
        <input type="text" name="sheet" x-ref="sheet" x-init="$refs.sheet.value = sheet()" required style="min-width:11rem">
      </div>
      <div class="dz-field dz-grow">
        <span class="dz-label">Excel / CSV file</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=".xlsx,.xls,.csv,text/csv" required 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 .xlsx here, or click to browse'"></span>
        </label>
      </div>
      <button type="submit">Import</button>
    </form>
    <p class="muted" style="margin-top:.5rem">The parser targets the BellKenz JSC template and reads the selected quarter's columns. Anything it misses is editable on the Performance page.</p>
  </div>

  @if ($scorecards->count())
    <div class="import-imports">
      <div class="import-imports-label">Imported scorecards</div>
      @foreach ($scorecards as $sc)
        <div class="import-quarter">
          <span class="import-quarter-name">{{ $names[$sc->owner_email] ?? $sc->owner_email }} <span class="muted">· {{ $sc->quarter }} · {{ $sc->objectives()->count() }} objectives</span></span>
          <a href="/performance?member={{ urlencode($sc->owner_email) }}&quarter={{ $sc->quarter }}" class="import-quarter-open">Open</a>
          <form method="post" action="/pa-import/delete" style="display:inline;margin:0"
                onsubmit="return confirm('Delete {{ $names[$sc->owner_email] ?? $sc->owner_email }}\'s {{ $sc->quarter }} scorecard? This cannot be undone.')">
            @csrf
            <input type="hidden" name="member" value="{{ $sc->owner_email }}">
            <input type="hidden" name="quarter" value="{{ $sc->quarter }}">
            <button type="submit" class="wk-del">Delete</button>
          </form>
        </div>
      @endforeach
    </div>
  @endif
</section>
@endsection