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

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

@section('content')
@php
  // $allStatuses、$allTrackers、$allPriorities 由 controller 傳入
@endphp

<style>
body{background:#f5f5f5;}
.rm5-topbar{background:#48536b;color:#fff;padding:0 20px;display:flex;align-items:center;min-height:48px;}
.rm5-topbar-brand{font-size:18px;font-weight:bold;color:#fff;text-decoration:none;}
.rm5-tabs{background:#5d6880;display:flex;align-items:flex-end;padding:0 12px;gap:2px;min-height:36px;flex-wrap:wrap;}
.rm5-tabs a{display:block;padding:7px 13px 5px;color:#ccd6ee;font-size:13px;text-decoration:none;border:1px solid transparent;border-bottom:none;border-radius:3px 3px 0 0;white-space:nowrap;}
.rm5-tabs a:hover{background:#697598;color:#fff;}
.rm5-tabs a.active{background:#f5f5f5;color:#333;border-color:#aaa;border-bottom-color:#f5f5f5;font-weight:bold;}
.rm5-tabs-spacer{flex:1;}
.rm5-tabs-right{display:flex;align-items:center;padding-bottom:4px;gap:6px;}
.rm5-btn-sm{display:inline-block;padding:2px 9px;background:#e8e8e8;border:1px solid #aaa;border-radius:2px;font-size:12px;color:#333;text-decoration:none;cursor:pointer;white-space:nowrap;}
.rm5-btn-sm:hover{background:#d0d0d0;color:#222;text-decoration:none;}
.rm5-btn-toggle{background:#e8eef7;border-color:#aabcd8;color:#2c5f9a;font-size:11px;}
.rm5-btn-toggle:hover{background:#d5e3f5;}
.rm5-tabs-right a.rm5-btn-sm{display:inline-block;padding:2px 9px;border-radius:2px;border:1px solid #aaa;font-size:12px;background:#e8e8e8;color:#333;}
.rm5-tabs-right a.rm5-btn-sm.rm5-btn-toggle{background:#e8eef7;border-color:#aabcd8;color:#2c5f9a;}

.rm5-content{max-width:1400px;margin:0 auto;padding:14px 20px 40px;}
.rm5-page-title{font-size:20px;font-weight:bold;color:#333;margin:0 0 14px;}

.rm5-filter-bar{background:#fff;border:1px solid #d8dae0;padding:8px 14px;border-radius:2px;margin-bottom:14px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:13px;}
.rm5-filter-bar label{color:#555;font-size:12px;white-space:nowrap;}
.rm5-filter-bar select,.rm5-filter-bar input[type=text]{border:1px solid #ccc;border-radius:2px;padding:2px 6px;font-size:12px;}
.rm5-filter-bar button{padding:2px 10px;background:#e4e4e4;border:1px solid #bbb;border-radius:2px;font-size:12px;cursor:pointer;}
.rm5-filter-bar button:hover{background:#d0d0d0;}
.rm5-filter-bar a.clear{padding:2px 8px;background:#fff5f5;border:1px solid #e0a0a0;border-radius:2px;font-size:12px;color:#c0392b;text-decoration:none;}

.rm5-issue-table{width:100%;border-collapse:collapse;background:#fff;font-size:13px;}
.rm5-issue-table thead th{background:#e4e4e4;border:1px solid #d0d0d0;padding:5px 10px;font-size:12px;font-weight:bold;color:#444;text-align:left;white-space:nowrap;}
.rm5-issue-table tbody td{border:1px solid #e8e8e8;padding:5px 10px;vertical-align:middle;}
.rm5-issue-table tbody tr:hover td{background:#fffde7;}
.rm5-issue-table tbody tr:nth-child(even) td{background:#fafafa;}
.rm5-issue-table tbody tr:nth-child(even):hover td{background:#fffde7;}
.rm5-issue-table a{color:#2c5f9a;text-decoration:none;}
.rm5-issue-table a:hover{text-decoration:underline;}
.rm5-tracker-badge{display:inline-block;padding:1px 6px;border-radius:2px;font-size:11px;font-weight:bold;border:1px solid currentColor;}
.rm5-status-badge{display:inline-block;padding:1px 6px;border-radius:2px;font-size:11px;}
.rm5-id{color:#888;font-size:11px;}
.rm5-pagination{margin-top:12px;display:flex;gap:4px;font-size:13px;}
.rm5-pagination a,.rm5-pagination span{display:inline-block;padding:2px 8px;border:1px solid #ccc;border-radius:2px;text-decoration:none;color:#2c5f9a;background:#fff;}
.rm5-pagination span.current{background:#e8eef7;border-color:#aabcd8;color:#2c5f9a;font-weight:bold;}
.rm5-pagination span.disabled{color:#aaa;cursor:default;}
</style>

{{-- 頂部 --}}
<div class="rm5-topbar">
  <a href="{{ route('projects.list') }}" class="rm5-topbar-brand">{{ config('app.company_name') }} 專案管理平台</a>
</div>

{{-- Tab --}}
<div class="rm5-tabs">
  <a href="{{ route('projects.list') }}">專案清單</a>
  <a href="{{ route('projects.activity') }}">活動</a>
  <a href="{{ route('projects.globalIssues') }}" class="active">議題清單</a>
  <div class="rm5-tabs-spacer"></div>
  <div class="rm5-tabs-right">
    <form method="POST" action="{{ route('projects.view-toggle') }}" style="margin:0">
      @csrf
      <button type="submit" class="rm5-btn-sm rm5-btn-toggle">切換新版介面 &rarr;</button>
    </form>
    <a href="{{ route('projects.list') }}" class="rm5-btn-sm rm5-btn-toggle">&#8592; 返回列表</a>
  </div>
</div>

<div class="rm5-content">
  <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;">
    <p class="rm5-page-title" style="margin:0;">{{ $showArchived ? '封存議題' : '議題清單' }}</p>
    <div style="display:flex;gap:8px;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') }}"
         style="font-size:12px;padding:4px 10px;border-radius:4px;border:1px solid {{ $showArchived ? '#e67e22' : '#aaa' }};color:{{ $showArchived ? '#e67e22' : '#888' }};text-decoration:none;white-space:nowrap;">
        <span>&#x1F4E6;</span>
        {{ $showArchived ? '離開封存檢視' : '查看封存議題 (' . $archivedCount . ')' }}
      </a>
    </div>
  </div>

  {{-- 篩選 --}}
  <form method="GET" action="{{ route('projects.globalIssues') }}">
    @if($showArchived)<input type="hidden" name="archived" value="1">@endif
    <div class="rm5-filter-bar">
      <label for="gfi-tracker">類型</label>
      <select id="gfi-tracker" name="tracker">
        <option value="">全部</option>
        @foreach($allTrackers as $k => $t)
          <option value="{{ $k }}" {{ request('tracker')==$k ? 'selected':'' }}>{{ $t['label'] }}</option>
        @endforeach
      </select>

      <label for="gfi-status">狀態</label>
      <select id="gfi-status" name="status">
        <option value="">全部</option>
        @foreach($allStatuses as $k => $s)
          <option value="{{ $k }}" {{ request('status')==$k ? 'selected':'' }}>{{ $s['label'] }}</option>
        @endforeach
      </select>

      <label for="gfi-priority">優先權</label>
      <select id="gfi-priority" name="priority">
        <option value="">全部</option>
        @foreach($allPriorities as $k=>$p)
          <option value="{{ $k }}" {{ request('priority')==$k ? 'selected':'' }}>{{ $p['label'] }}</option>
        @endforeach
      </select>

      <label for="gfi-assignee">被指派者</label>
      <select id="gfi-assignee" name="assignee">
        <option value="">全部</option>
        @foreach($allUsers as $u)
          <option value="{{ $u->id }}" {{ request('assignee')==$u->id ? 'selected':'' }}>{{ $u->name }}</option>
        @endforeach
      </select>

      <label for="gfi-creator">建立者</label>
      <select id="gfi-creator" name="creator">
        <option value="">全部</option>
        @foreach($allUsers as $u)
          <option value="{{ $u->id }}" {{ request('creator')==$u->id ? 'selected':'' }}>{{ $u->name }}</option>
        @endforeach
      </select>

      <label for="gfi-q">主旨 / 編號</label>
      <input id="gfi-q" type="text" name="q" value="{{ request('q') }}" placeholder="關鍵字 或 編號（#123）">

      <button type="submit">套用</button>
      @if(request()->hasAny(['tracker','status','priority','assignee','creator','q']))
        <a href="{{ route('projects.globalIssues') . ($showArchived ? '?archived=1' : '') }}" class="clear">清除</a>
      @endif

      <span style="margin-left:auto;color:#888;font-size:12px;">共 {{ $issues->total() }} 筆</span>
    </div>
  </form>

  {{-- 批次操作列 --}}
  <div id="batch-bar" style="display:none;background:#2c5f9a;color:#fff;padding:8px 14px;border-radius:4px;margin-bottom:10px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;">
    <span id="batch-count" style="font-size:13px;font-weight:bold;"></span>
    <label style="font-size:13px;margin:0;">批次變更：</label>
    <select id="batch-status" style="border:1px solid #aabcd8;border-radius:3px;padding:2px 8px;font-size:13px;">
      <option value="">── 狀態 ──</option>
      @foreach($allStatuses as $slug => $s)
        <option value="{{ $slug }}">{{ $s['label'] }}</option>
      @endforeach
    </select>
    <select id="batch-assignee" style="border:1px solid #aabcd8;border-radius:3px;padding:2px 8px;font-size:13px;">
      <option value="">── 負責人 ──</option>
      @foreach($allUsers as $u)
        <option value="{{ $u->id }}">{{ $u->name }}</option>
      @endforeach
    </select>
    <select id="batch-tracker" style="border:1px solid #aabcd8;border-radius:3px;padding:2px 8px;font-size:13px;">
      <option value="">── 類型 ──</option>
      @foreach($allTrackers as $k => $t)
        <option value="{{ $k }}">{{ $t['label'] }}</option>
      @endforeach
    </select>
    <button type="button" onclick="submitBatch()" style="padding:3px 14px;background:#e8eef7;color:#2c5f9a;border:1px solid #aabcd8;border-radius:3px;font-size:13px;cursor:pointer;font-weight:bold;">套用</button>
    <button type="button" onclick="clearSelection()" style="padding:3px 10px;background:transparent;color:#ccd6ee;border:1px solid #7890bb;border-radius:3px;font-size:13px;cursor:pointer;">取消</button>
  </div>

  {{-- 批次 Form (hidden) --}}
  <form id="batch-form" method="POST" action="{{ route('projects.globalIssues.batchStatus') }}" style="display: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>

  {{-- 表格 --}}
  @php
    $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]));
    };
    $thSort = function(string $label, string $col) use ($curSort, $curDir, $sortUrl): string {
      $icon = $curSort !== $col
        ? '<span style="opacity:.4;margin-left:3px;">⇅</span>'
        : ($curDir === 'asc' ? '<span style="color:#2c5f9a;margin-left:3px;">↑</span>' : '<span style="color:#2c5f9a;margin-left:3px;">↓</span>');
      return '<a href="' . $sortUrl($col) . '" style="color:inherit;text-decoration:none;display:inline-flex;align-items:center;white-space:nowrap;">'
        . $label . $icon . '</a>';
    };
  @endphp
  <div class="table-responsive"><table class="rm5-issue-table">
    <thead>
      <tr>
        <th style="width:32px;text-align:center;"><input type="checkbox" id="select-all" title="全選"></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">{!! $thSort('被分配', 'assignee') !!}</th>
        <th style="width:90px">建立者</th>
        <th style="width:100px">{!! $thSort('更新日期', 'updated_at') !!}</th>
        <th style="width:100px">{!! $thSort('建立日期', 'created_at') !!}</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 style="text-align:center;"><input type="checkbox" class="issue-cb" value="{{ $issue->id }}"></td>
          <td class="rm5-id">#{{ $issue->redmine_id }}</td>
          <td>
            <a href="{{ route('projects.show', $issue->project_id) }}">{{ $projName }}</a>
          </td>
          <td>
            <span class="badge bg-{{ $tColor }}">{{ $tLabel }}</span>
          </td>
          <td>
            <span class="badge text-bg-{{ $sBs }}">{{ $sLabel }}</span>
          </td>
          <td style="{{ $pColor ? 'color:'.$pColor : '' }}">
            {{ $pLabel }}
          </td>
          <td>
            <a href="{{ route('projects.issues.show', [$issue->project_id, $issue]) }}">
              {{ $issue->title }}
            </a>
          </td>
          <td>{{ $issue->assignee?->name ?? '—' }}</td>
          <td style="color:#888;font-size:12px;">{{ $issue->user?->name ?? '—' }}</td>
          <td style="white-space:nowrap;color:#888;font-size:12px;">{{ $issue->updated_at?->format('Y-m-d') ?? '—' }}</td>
          <td style="white-space:nowrap;color:#888;font-size:12px;">{{ $issue->created_at?->format('Y-m-d') ?? '—' }}</td>
        </tr>
      @empty
        <tr>
          <td colspan="11" style="text-align:center;padding:30px;color:#888;">目前沒有符合條件的議題。</td>
        </tr>
      @endforelse
    </tbody>
  </table></div>

  {{-- 分頁 --}}
  @if($issues->hasPages())
    <div class="rm5-pagination">
      @if($issues->onFirstPage())
        <span class="disabled">&#8249; 上一頁</span>
      @else
        <a href="{{ $issues->previousPageUrl() }}">&#8249; 上一頁</a>
      @endif
      @foreach($issues->getUrlRange(max(1,$issues->currentPage()-3), min($issues->lastPage(),$issues->currentPage()+3)) as $page => $url)
        @if($page == $issues->currentPage())
          <span class="current">{{ $page }}</span>
        @else
          <a href="{{ $url }}">{{ $page }}</a>
        @endif
      @endforeach
      @if($issues->hasMorePages())
        <a href="{{ $issues->nextPageUrl() }}">下一頁 &#8250;</a>
      @else
        <span class="disabled">下一頁 &#8250;</span>
      @endif
    </div>
  @endif
</div>

@push('scripts')
<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.style.display = 'flex';
    batchCount.textContent = `已選取 ${checked.length} 筆`;
  } else {
    batchBar.style.display = '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();
}

// ── 匯出 Modal
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

{{-- 匯出 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>

@endsection