@extends('layouts.app')
@section('title', $project->name . ' - 議題')

@section('content')
@include('projects._nav')

<div class="container-fluid px-4 py-3">

  {{-- 訊息 --}}
  @if(session('success'))
    <div class="alert alert-success alert-dismissible fade show">{{ session('success') }}<button type="button" class="btn-close" data-bs-dismiss="alert"></button></div>
  @endif

  {{-- 工具列 --}}
  <div class="d-flex flex-wrap justify-content-between align-items-center gap-2 mb-3">
    <div class="d-flex gap-2 flex-wrap">
      <a href="{{ route('projects.issues.index', $project) . ($showClosed ? '' : '?closed=1') }}"
         class="btn btn-sm {{ $showClosed ? 'btn-secondary' : 'btn-outline-secondary' }}">
        <i class="bi bi-archive"></i>
        <span class="btn-text ms-1">{{ $showClosed ? '隱藏已關閉' : '顯示已關閉' }}</span>
        <span class="badge bg-light text-dark ms-1">{{ $closedCount }}</span>
      </a>
      <a href="{{ route('projects.issues.index', $project) . ($showArchived ? '' : '?archived=1') }}"
         class="btn btn-sm {{ $showArchived ? 'btn-warning' : 'btn-outline-warning' }}">
        <i class="bi bi-box-seam"></i>
        <span class="btn-text ms-1">{{ $showArchived ? '離開封存檢視' : '查看封存議題' }}</span>
        <span class="badge bg-light text-dark ms-1">{{ $archivedCount }}</span>
      </a>
    </div>
    <div class="d-flex gap-2 flex-wrap">
      <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"></i>
        <span class="btn-text ms-1">匯出試算表</span>
      </button>
      @can('view', $project)
      <a href="{{ route('projects.issues.create', $project) }}" class="btn btn-primary btn-sm">
        <i class="bi bi-plus-lg"></i>
        <span class="btn-text ms-1">新增議題</span>
      </a>
      @endcan
    </div>
  </div>

  {{-- 篩選列 --}}
  <form class="row g-2 mb-3 align-items-end bg-light rounded p-2" method="GET">
    @if($showClosed)
      <input type="hidden" name="closed" value="1">
    @endif
    <div class="col-auto">
      <select name="tracker" class="form-select form-select-sm">
        <option value="">所有類型</option>
        @foreach($trackers as $k => $t)
          <option value="{{ $k }}" {{ request('tracker') == $k ? 'selected' : '' }}>{{ $t['label'] }}</option>
        @endforeach
      </select>
    </div>
    <div class="col-auto">
      <select name="priority" class="form-select form-select-sm">
        <option value="">所有優先度</option>
        @foreach($priorities as $k => $p)
          <option value="{{ $k }}" {{ request('priority') == $k ? 'selected' : '' }}>{{ $p['label'] }}</option>
        @endforeach
      </select>
    </div>
    <div class="col-auto">
      <select name="status" class="form-select form-select-sm">
        <option value="">所有狀態</option>
        @foreach($statuses as $k => $s)
          <option value="{{ $k }}" {{ request('status') == $k ? 'selected' : '' }}>{{ $s['label'] }}</option>
        @endforeach
      </select>
    </div>
    <div class="col-auto">
      <select name="assignee" class="form-select form-select-sm">
        <option value="">所有負責人</option>
        @foreach($members as $m)
          <option value="{{ $m->id }}" {{ request('assignee') == $m->id ? 'selected' : '' }}>{{ $m->name }}</option>
        @endforeach
      </select>
    </div>
    @if($versions->isNotEmpty())
    <div class="col-auto">
      <select name="version" class="form-select form-select-sm">
        <option value="">所有版本</option>
        <option value="0" {{ request('version') === '0' ? 'selected' : '' }}>（未指定版本）</option>
        @foreach($versions as $ver)
          <option value="{{ $ver->id }}" {{ request('version') == $ver->id ? 'selected' : '' }}>{{ $ver->name }}</option>
        @endforeach
      </select>
    </div>
    @endif
    <div class="col-auto">
      <input type="text" name="q" class="form-control form-control-sm" placeholder="關鍵字 或 編號（#123）" value="{{ request('q') }}">
    </div>
    <div class="col-auto">
      <button class="btn btn-secondary btn-sm">搜尋</button>
      @if(request()->hasAny(['tracker','priority','status','assignee','version','q']))
        <a href="{{ route('projects.issues.index', $project) . ($showClosed ? '?closed=1' : '') }}" class="btn btn-link btn-sm text-danger">清除</a>
      @endif
    </div>
  </form>

  {{-- 統計列 + 上方分頁 --}}
  <div class="d-flex justify-content-between align-items-center mb-2">
    <div class="d-flex gap-3 text-muted small">
      <span><strong class="text-danger">{{ $openCount }}</strong> 個進行中</span>
      <span><strong class="text-success">{{ $closedCount }}</strong> 個已關閉</span>
      <span>共 {{ $openCount + $closedCount }} 筆</span>
    </div>
    @if($issues->hasPages())
    <div>{{ $issues->links('pagination::bootstrap-5') }}</div>
    @endif
  </div>

  {{-- 批次操作列 --}}
  <div id="batch-bar" class="d-none alert alert-primary d-flex align-items-center gap-2 flex-wrap py-2 mb-2">
    <strong id="batch-count"></strong>
    <span class="text-muted small">批次變更：</span>

    <select id="batch-status" class="form-select form-select-sm" style="max-width:140px;" title="狀態">
      <option value="">── 狀態 ──</option>
      @foreach($statuses as $slug => $s)
        <option value="{{ $slug }}">{{ $s['label'] }}</option>
      @endforeach
    </select>

    <select id="batch-assignee" class="form-select form-select-sm" style="max-width:140px;" title="負責人">
      <option value="">── 負責人 ──</option>
      @foreach($members as $m)
        <option value="{{ $m->id }}">{{ $m->name }}</option>
      @endforeach
    </select>

    <select id="batch-tracker" class="form-select form-select-sm" style="max-width:120px;" title="類型">
      <option value="">── 類型 ──</option>
      @foreach($trackers as $k => $t)
        <option value="{{ $k }}">{{ $t['label'] }}</option>
      @endforeach
    </select>

    <button type="button" class="btn btn-sm btn-primary" onclick="submitBatch()">套用</button>
    <button type="button" class="btn btn-sm btn-outline-secondary" onclick="clearSelection()">取消</button>
  </div>

  {{-- 批次 Form (hidden) --}}
  <form id="batch-form" method="POST" action="{{ route('projects.issues.batchStatus', $project) }}" 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, $project): string {
      $dir = ($curSort === $col && $curDir === 'desc') ? 'asc' : 'desc';
      return route('projects.issues.index', $project)
        . '?' . 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:.35;margin-left:3px;font-size:10px;">⇅</span>'
        : ($curDir === 'asc'
          ? '<span class="sort-active" style="margin-left:3px;">↑</span>'
          : '<span class="sort-active" style="margin-left:3px;">↓</span>');
      return '<a href="' . $sortUrl($col) . '" style="color:inherit;text-decoration:none;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:55px">#</th>
          <th style="width:75px">類型</th>
          <th style="width:100px">狀態</th>
          <th>標題</th>
          <th style="width:75px">優先度</th>
          <th style="width:95px">{!! $thSort('負責人', 'assignee') !!}</th>
          @if($versions->isNotEmpty())
          <th style="width:90px">版本</th>
          @endif
          <th style="width:95px">{!! $thSort('截止日', 'due_date') !!}</th>
          <th style="width:88px">{!! $thSort('建立日', 'created_at') !!}</th>
          <th style="width:65px">完成度</th>
        </tr>
      </thead>
      <tbody>
        @forelse($issues as $issue)
        @php
          $sData   = $statuses[$issue->status] ?? null;
          $sLabel  = $sData['label'] ?? $issue->status;
          $sColor  = $sData['color'] ?? 'secondary';
          $tLabel  = $trackers[$issue->tracker]['label'] ?? $issue->tracker;
          $tColor  = $trackers[$issue->tracker]['color'] ?? 'secondary';
          $pLabel  = $priorities[$issue->priority]['label'] ?? $issue->priority;
          $pColor  = $priorities[$issue->priority]['color'] ?? 'secondary';
          $closedSlugs = array_keys(array_filter($statuses, fn($s) => $s['is_closed'] ?? false));
          $overdue = $issue->due_date && $issue->due_date->isPast() && !in_array($issue->status, $closedSlugs);
        @endphp
        <tr class="issue-row {{ in_array($issue->status, $closedSlugs) ? 'rm5-closed' : '' }}">
          <td style="text-align:center;"><input type="checkbox" class="issue-cb" value="{{ $issue->id }}"></td>
          <td style="color:#888;font-size:12px;white-space:nowrap;">
            <a href="{{ route('projects.issues.show', [$project, $issue]) }}" style="color:#888;text-decoration:none;">#{{ $issue->redmine_id }}</a>
          </td>
          <td><span class="badge bg-{{ $tColor }}">{{ $tLabel }}</span></td>
          <td><span class="badge bg-{{ $sColor }}">{{ $sLabel }}</span></td>
          <td>
            <a href="{{ route('projects.issues.show', [$project, $issue]) }}" class="rm5-title-link">{{ $issue->title }}</a>
            @if($issue->comments_count ?? 0)
              <span style="font-size:11px;color:#888;margin-left:4px;"><i class="bi bi-chat"></i> {{ $issue->comments_count }}</span>
            @endif
          </td>
          <td><span class="badge bg-{{ $pColor }}">{{ $pLabel }}</span></td>
          <td style="font-size:12px;color:#555;">{{ $issue->assignee?->name ?? '—' }}</td>
          @if($versions->isNotEmpty())
          <td>
            @if($issue->version)
              <span class="badge bg-info text-dark" style="font-size:.7em">{{ $issue->version->name }}</span>
            @else
              <span style="color:#bbb;">—</span>
            @endif
          </td>
          @endif
          <td style="white-space:nowrap;font-size:12px;{{ $overdue ? 'color:#c0392b;font-weight:bold;' : 'color:#888;' }}">
            {{ $issue->due_date?->format('Y-m-d') ?? '—' }}
          </td>
          <td style="white-space:nowrap;font-size:12px;color:#888;">{{ $issue->created_at?->format('Y-m-d') ?? '—' }}</td>
          <td>
            @if($issue->done_ratio > 0)
              <div class="rm5-prog-bg" title="{{ $issue->done_ratio }}%" style="border-radius:3px;height:6px;overflow:hidden;">
                <div style="background:#3498db;width:{{ $issue->done_ratio }}%;height:100%;"></div>
              </div>
              <small style="font-size:11px;color:#888;">{{ $issue->done_ratio }}%</small>
            @else
              <span style="color:#bbb;">—</span>
            @endif
          </td>
        </tr>
        @empty
        <tr>
          <td colspan="{{ $versions->isNotEmpty() ? 11 : 10 }}" style="text-align:center;padding:40px 10px;color:#888;">
            <i class="bi bi-inbox" style="font-size:2rem;display:block;margin-bottom:8px;"></i>
            沒有符合條件的議題
          </td>
        </tr>
        @endforelse
      </tbody>
    </table>
  </div>

  {{-- 分頁 --}}
  <div class="mt-3">{{ $issues->links('pagination::bootstrap-5') }}</div>
</div>

@push('styles')
<style>
.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: 6px 10px;
  font-weight: 600;
  white-space: nowrap;
  color: #333;
}
.rm5-issue-table tbody td {
  border: 1px solid #e8e8e8;
  padding: 6px 10px;
  vertical-align: middle;
}
.rm5-issue-table tbody tr:nth-child(even) {
  background: #fafafa;
}
.rm5-issue-table tbody tr:hover {
  background: #fffde7;
}
.rm5-issue-table tbody tr.rm5-closed {
  opacity: .55;
}
.rm5-title-link {
  color: #2c5f9a;
  text-decoration: none;
  font-weight: 500;
}
.rm5-title-link:hover {
  text-decoration: underline;
}
.sort-active { color: #2c5f9a; }
.rm5-prog-bg { background: #ddd; }
[data-bs-theme="dark"] .rm5-issue-table { background: #1e1e1e; }
[data-bs-theme="dark"] .rm5-issue-table thead th { background: #2d2d2d; border-color: #444; color: #ddd; }
[data-bs-theme="dark"] .rm5-issue-table tbody td { border-color: #333; color: #ccc !important; }
[data-bs-theme="dark"] .rm5-issue-table tbody tr:nth-child(even) { background: #252525; }
[data-bs-theme="dark"] .rm5-issue-table tbody tr:hover { background: #2a2800; }
[data-bs-theme="dark"] .rm5-title-link { color: #7aadda; }
[data-bs-theme="dark"] .sort-active { color: #7aadda; }
[data-bs-theme="dark"] .rm5-prog-bg { background: #3a3f4b; }
</style>
@endpush

@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.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();
});

checkboxes().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();
}
</script>
@endpush

{{-- 匯出 Modal --}}
<div class="modal fade" id="exportModal" tabindex="-1">
  <div class="modal-dialog">
    <form method="GET" action="{{ route('projects.issues.export', $project) }}" 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">建立日期區間</label>
          <div class="d-flex gap-2 align-items-center">
            <input type="date" name="date_from" class="form-control form-control-sm" placeholder="起始日">
            <span class="text-muted">～</span>
            <input type="date" name="date_to"   class="form-control form-control-sm" placeholder="結束日">
          </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__" id="export-all-opt">全部（含已關閉）</option>
            @foreach($statuses 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($members as $m)
              <option value="{{ $m->id }}">{{ $m->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($trackers 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($priorities as $k => $p)
              <option value="{{ $k }}">{{ $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" id="exportSubmitBtn">
          <i class="bi bi-download me-1"></i>下載 CSV
        </button>
      </div>
    </form>
  </div>
</div>

<script>
// 「全部（含已關閉）」選項用 include_closed 參數傳遞
document.querySelector('#exportModal form').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);
  }
});
</script>

@endsection