@extends('layouts.app')
@section('title', '議題清單')

@push('head')
<link rel="stylesheet" href="/vendor/tom-select/tom-select.bootstrap5.min.css">
@endpush

@section('content')
@php
  $isMyIssuesTab = request()->filled('assignee') && (string)request('assignee') === (string)auth()->id();
  $activeTab     = $isMyIssuesTab ? 'myissues' : 'issues';

  $curSort = request('sort');
  $curDir  = request('dir', 'desc');
  $sortUrl = function(string $col) use ($curSort, $curDir): string {
    $dir = ($curSort === $col && $curDir === 'desc') ? 'asc' : 'desc';
    return route('projects.globalIssues')
      . '?' . http_build_query(array_merge(request()->except(['sort','dir','page']), ['sort' => $col, 'dir' => $dir]));
  };
  $sortIcon = function(string $col) use ($curSort, $curDir): string {
    if ($curSort !== $col) return '<i class="bi bi-arrow-down-up text-muted opacity-50 ms-1 small"></i>';
    return $curDir === 'asc'
      ? '<i class="bi bi-arrow-up ms-1 small text-primary"></i>'
      : '<i class="bi bi-arrow-down ms-1 small text-primary"></i>';
  };
@endphp

@include('projects._list_tabs', ['activeTab' => $activeTab])

<div class="container py-4">

  {{-- 標題列 --}}
  <div class="d-flex align-items-center justify-content-between mb-3 flex-wrap gap-2">
    <h5 class="mb-0 fw-bold">
      @if($isMyIssuesTab)
        <i class="bi bi-person-check me-2 text-primary"></i>我的議題
      @elseif($showArchived)
        <i class="bi bi-archive me-2 text-warning"></i>封存議題
      @else
        <i class="bi bi-bug me-2 text-danger"></i>議題清單
      @endif
    </h5>
    <div class="d-flex gap-2 align-items-center">
      <button type="button" class="btn btn-outline-success btn-sm"
        data-bs-toggle="modal" data-bs-target="#exportModal">
        <i class="bi bi-file-earmark-spreadsheet me-1"></i>匯出試算表
      </button>
      <a href="{{ route('projects.globalIssues') . ($showArchived ? '' : '?archived=1') }}"
         class="btn btn-sm {{ $showArchived ? 'btn-warning' : 'btn-outline-secondary' }}">
        <i class="bi bi-archive me-1"></i>
        {{ $showArchived ? '離開封存檢視' : '封存議題 (' . $archivedCount . ')' }}
      </a>
    </div>
  </div>

  {{-- 篩選列 --}}
  <form method="GET" action="{{ route('projects.globalIssues') }}" class="mb-3">
    @if($showArchived)<input type="hidden" name="archived" value="1">@endif
    <div class="card border-0 shadow-sm">
      <div class="card-body py-2 px-3">
        <div class="row g-2 align-items-end">
          <div class="col-6 col-md-auto">
            <label class="form-label mb-1 small fw-semibold">類型</label>
            <select name="tracker" class="form-select form-select-sm">
              <option value="">全部</option>
              @foreach($allTrackers as $k => $t)
                <option value="{{ $k }}" {{ request('tracker')==$k ? 'selected':'' }}>{{ $t['label'] }}</option>
              @endforeach
            </select>
          </div>
          <div class="col-6 col-md-auto">
            <label class="form-label mb-1 small fw-semibold">狀態</label>
            <select name="status" class="form-select form-select-sm">
              <option value="">全部</option>
              @foreach($allStatuses as $k => $s)
                <option value="{{ $k }}" {{ request('status')==$k ? 'selected':'' }}>{{ $s['label'] }}</option>
              @endforeach
            </select>
          </div>
          <div class="col-6 col-md-auto">
            <label class="form-label mb-1 small fw-semibold">優先權</label>
            <select name="priority" class="form-select form-select-sm">
              <option value="">全部</option>
              @foreach($allPriorities as $k => $p)
                <option value="{{ $k }}" {{ request('priority')==$k ? 'selected':'' }}>{{ $p['label'] }}</option>
              @endforeach
            </select>
          </div>
          <div class="col-6 col-md-auto">
            <label class="form-label mb-1 small fw-semibold">被指派者</label>
            <select name="assignee" class="form-select form-select-sm">
              <option value="">全部</option>
              @foreach($allUsers as $u)
                <option value="{{ $u->id }}" {{ request('assignee')==$u->id ? 'selected':'' }}>{{ $u->name }}</option>
              @endforeach
            </select>
          </div>
          <div class="col-6 col-md-auto">
            <label class="form-label mb-1 small fw-semibold">建立者</label>
            <select name="creator" class="form-select form-select-sm">
              <option value="">全部</option>
              @foreach($allUsers as $u)
                <option value="{{ $u->id }}" {{ request('creator')==$u->id ? 'selected':'' }}>{{ $u->name }}</option>
              @endforeach
            </select>
          </div>
          <div class="col col-md">
            <label class="form-label mb-1 small fw-semibold">主旨 / 編號</label>
            <input type="text" name="q" value="{{ request('q') }}"
              class="form-control form-control-sm" placeholder="關鍵字 或 #123">
          </div>
          <div class="col-auto">
            <button type="submit" class="btn btn-sm btn-primary">套用</button>
            @if(request()->hasAny(['tracker','status','priority','assignee','creator','q']))
              <a href="{{ route('projects.globalIssues') . ($showArchived ? '?archived=1' : '') }}"
                 class="btn btn-sm btn-outline-danger ms-1">清除</a>
            @endif
          </div>
          <div class="col-auto ms-auto">
            <span class="text-muted small">共 {{ $issues->total() }} 筆</span>
          </div>
        </div>
      </div>
    </div>
  </form>

  {{-- 批次操作列 --}}
  <div id="batch-bar" class="rounded-3 p-2 px-3 mb-3 d-none"
       style="background:#1e3a5f;color:#fff;">
    <div class="d-flex align-items-center gap-2 flex-wrap">
      <span id="batch-count" class="fw-bold small"></span>
      <label class="small mb-0">批次變更：</label>
      <select id="batch-status" class="form-select form-select-sm" style="width:auto;">
        <option value="">── 狀態 ──</option>
        @foreach($allStatuses as $slug => $s)
          <option value="{{ $slug }}">{{ $s['label'] }}</option>
        @endforeach
      </select>
      <select id="batch-assignee" class="form-select form-select-sm" style="width:auto;">
        <option value="">── 負責人 ──</option>
        @foreach($allUsers as $u)
          <option value="{{ $u->id }}">{{ $u->name }}</option>
        @endforeach
      </select>
      <select id="batch-tracker" class="form-select form-select-sm" style="width:auto;">
        <option value="">── 類型 ──</option>
        @foreach($allTrackers as $k => $t)
          <option value="{{ $k }}">{{ $t['label'] }}</option>
        @endforeach
      </select>
      <button type="button" onclick="submitBatch()" class="btn btn-sm btn-light fw-semibold">套用</button>
      <button type="button" onclick="clearSelection()" class="btn btn-sm btn-outline-light">取消</button>
    </div>
  </div>

  {{-- 批次 Form (hidden) --}}
  <form id="batch-form" method="POST"
        action="{{ route('projects.globalIssues.batchStatus') }}" class="d-none">
    @csrf
    <input type="hidden" name="status"          id="batch-status-input">
    <input type="hidden" name="assigned_to_id"  id="batch-assignee-input">
    <input type="hidden" name="tracker"         id="batch-tracker-input">
    <div id="batch-ids-container"></div>
  </form>

  {{-- 表格 --}}
  <div class="card border-0 shadow-sm">
    <div class="table-responsive">
      <table class="table table-sm table-hover align-middle mb-0" style="font-size:.88rem;">
        <thead style="background:#f8fafc;">
          <tr>
            <th style="width:36px;" class="text-center ps-3">
              <input type="checkbox" id="select-all" class="form-check-input">
            </th>
            <th style="width:60px;">#</th>
            <th>專案</th>
            <th style="width:80px;">類型</th>
            <th style="width:90px;">狀態</th>
            <th style="width:60px;">優先權</th>
            <th>主旨</th>
            <th style="width:100px;">
              <a href="{{ $sortUrl('assignee') }}" class="text-decoration-none text-dark">
                被分配{!! $sortIcon('assignee') !!}
              </a>
            </th>
            <th style="width:90px;">建立者</th>
            <th style="width:100px;">
              <a href="{{ $sortUrl('updated_at') }}" class="text-decoration-none text-dark">
                更新{!! $sortIcon('updated_at') !!}
              </a>
            </th>
            <th style="width:100px;">
              <a href="{{ $sortUrl('created_at') }}" class="text-decoration-none text-dark">
                建立{!! $sortIcon('created_at') !!}
              </a>
            </th>
          </tr>
        </thead>
        <tbody>
          @forelse($issues as $issue)
            @php
              $tLabel  = $allTrackers[$issue->tracker]['label'] ?? $issue->tracker;
              $tColor  = $allTrackers[$issue->tracker]['color'] ?? 'secondary';
              $sData   = $allStatuses[$issue->status] ?? null;
              $sLabel  = $sData['label'] ?? $issue->status;
              $sBs     = $sData['color'] ?? 'secondary';
              $pLabel  = $allPriorities[$issue->priority]['label'] ?? $issue->priority;
              $pColor  = $allPriorities[$issue->priority]['color'] ?? null;
              $projName = $issue->project->name ?? '—';
            @endphp
            <tr class="issue-row">
              <td class="text-center ps-3">
                <input type="checkbox" class="form-check-input issue-cb" value="{{ $issue->id }}">
              </td>
              <td class="text-muted small">#{{ $issue->redmine_id }}</td>
              <td>
                <a href="{{ route('projects.show', $issue->project_id) }}"
                   class="text-decoration-none text-dark fw-semibold small">{{ $projName }}</a>
              </td>
              <td>
                <span class="badge bg-{{ $tColor }}">{{ $tLabel }}</span>
              </td>
              <td>
                <span class="badge text-bg-{{ $sBs }}">{{ $sLabel }}</span>
              </td>
              <td class="small" style="{{ $pColor ? 'color:'.$pColor.';font-weight:600;' : '' }}">
                {{ $pLabel }}
              </td>
              <td>
                <a href="{{ route('projects.issues.show', [$issue->project_id, $issue]) }}"
                   class="text-decoration-none">{{ $issue->title }}</a>
              </td>
              <td class="small text-muted">{{ $issue->assignee?->name ?? '—' }}</td>
              <td class="small text-muted">{{ $issue->user?->name ?? '—' }}</td>
              <td class="small text-muted text-nowrap">{{ $issue->updated_at?->format('Y-m-d') ?? '—' }}</td>
              <td class="small text-muted text-nowrap">{{ $issue->created_at?->format('Y-m-d') ?? '—' }}</td>
            </tr>
          @empty
            <tr>
              <td colspan="11" class="text-center text-muted py-5">目前沒有符合條件的議題。</td>
            </tr>
          @endforelse
        </tbody>
      </table>
    </div>
  </div>

  {{-- 分頁 --}}
  @if($issues->hasPages())
    <div class="d-flex justify-content-center mt-3">
      {{ $issues->withQueryString()->links() }}
    </div>
  @endif

</div>

{{-- 匯出 Modal --}}
<div class="modal fade" id="exportModal" tabindex="-1">
  <div class="modal-dialog">
    <form method="GET" action="{{ route('projects.globalIssues.export') }}"
          id="exportForm" class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">
          <i class="bi bi-file-earmark-spreadsheet me-2"></i>匯出議題試算表
        </h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <p class="text-muted small mb-3">可選擇篩選條件，留空代表全部匯出。</p>

        <div class="mb-3">
          <label class="form-label fw-semibold">
            專案 <small class="text-muted fw-normal">（可多選，留空代表全部）</small>
          </label>
          <select name="project_ids[]" id="exportProjectSelect" multiple
            class="form-select form-select-sm" placeholder="輸入名稱搜尋…">
            @foreach($allProjects as $p)
              <option value="{{ $p->id }}">{{ $p->name }}</option>
            @endforeach
          </select>
        </div>

        <div class="mb-3">
          <label class="form-label fw-semibold">建立日期區間</label>
          <div class="d-flex gap-2 align-items-center">
            <input type="date" name="date_from" class="form-control form-control-sm">
            <span class="text-muted">～</span>
            <input type="date" name="date_to" class="form-control form-control-sm">
          </div>
        </div>

        <div class="mb-3">
          <label class="form-label fw-semibold">狀態</label>
          <select name="status" class="form-select form-select-sm">
            <option value="">全部（不含已關閉）</option>
            <option value="__all__">全部（含已關閉）</option>
            @foreach($allStatuses as $k => $s)
              <option value="{{ $k }}">{{ $s['label'] }}</option>
            @endforeach
          </select>
        </div>

        <div class="mb-3">
          <label class="form-label fw-semibold">負責人</label>
          <select name="assignee" class="form-select form-select-sm">
            <option value="">全部人員</option>
            @foreach($allUsers as $u)
              <option value="{{ $u->id }}">{{ $u->name }}</option>
            @endforeach
          </select>
        </div>

        <div class="mb-3">
          <label class="form-label fw-semibold">類型</label>
          <select name="tracker" class="form-select form-select-sm">
            <option value="">全部類型</option>
            @foreach($allTrackers as $k => $t)
              <option value="{{ $k }}">{{ $t['label'] }}</option>
            @endforeach
          </select>
        </div>

        <div class="mb-3">
          <label class="form-label fw-semibold">優先度</label>
          <select name="priority" class="form-select form-select-sm">
            <option value="">全部優先度</option>
            @foreach($allPriorities as $k => $p)
              <option value="{{ $k }}" {{ request('priority')==$k ? 'selected':'' }}>{{ $p['label'] }}</option>
            @endforeach
          </select>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">取消</button>
        <button type="submit" class="btn btn-success btn-sm">
          <i class="bi bi-download me-1"></i>下載 CSV
        </button>
      </div>
    </form>
  </div>
</div>

@push('scripts')
<script src="/vendor/tom-select/tom-select.complete.min.js"></script>
<script>
const batchBar   = document.getElementById('batch-bar');
const batchCount = document.getElementById('batch-count');
const selectAll  = document.getElementById('select-all');
const checkboxes = () => document.querySelectorAll('.issue-cb');

function updateBatchBar() {
  const checked = [...checkboxes()].filter(c => c.checked);
  if (checked.length > 0) {
    batchBar.classList.remove('d-none');
    batchCount.textContent = `已選取 ${checked.length} 筆`;
  } else {
    batchBar.classList.add('d-none');
  }
}

selectAll.addEventListener('change', function () {
  checkboxes().forEach(cb => cb.checked = this.checked);
  updateBatchBar();
});

document.querySelectorAll('.issue-cb').forEach(cb => {
  cb.addEventListener('change', function () {
    selectAll.checked = [...checkboxes()].every(c => c.checked);
    updateBatchBar();
  });
});

function clearSelection() {
  checkboxes().forEach(cb => cb.checked = false);
  selectAll.checked = false;
  updateBatchBar();
}

function submitBatch() {
  const status   = document.getElementById('batch-status').value;
  const assignee = document.getElementById('batch-assignee').value;
  const tracker  = document.getElementById('batch-tracker').value;
  if (!status && !assignee && !tracker) {
    alert('請至少選擇一個要變更的欄位（狀態、負責人或類型）');
    return;
  }
  const checked = [...checkboxes()].filter(c => c.checked);
  if (!checked.length) { alert('請先勾選議題'); return; }

  document.getElementById('batch-status-input').value   = status;
  document.getElementById('batch-assignee-input').value = assignee;
  document.getElementById('batch-tracker-input').value  = tracker;
  const container = document.getElementById('batch-ids-container');
  container.innerHTML = '';
  checked.forEach(cb => {
    const inp = document.createElement('input');
    inp.type = 'hidden'; inp.name = 'ids[]'; inp.value = cb.value;
    container.appendChild(inp);
  });
  document.getElementById('batch-form').submit();
}

document.getElementById('exportForm').addEventListener('submit', function (e) {
  const sel = this.querySelector('[name=status]');
  if (sel.value === '__all__') {
    sel.value = '';
    const inp = document.createElement('input');
    inp.type = 'hidden'; inp.name = 'include_closed'; inp.value = '1';
    this.appendChild(inp);
  }
});

new TomSelect('#exportProjectSelect', {
  plugins: ['remove_button'],
  placeholder: '輸入名稱搜尋專案…',
  maxOptions: null,
});
</script>
@endpush

@endsection