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

@section('content')
<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;}
/* 覆蓋 tabs-right 內 <a> 的 tab 樣式 */
.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:1200px;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,.rm5-filter-bar a.clear{padding:2px 10px;background:#e4e4e4;border:1px solid #bbb;border-radius:2px;font-size:12px;cursor:pointer;text-decoration:none;color:#333;}
.rm5-filter-bar button:hover,.rm5-filter-bar a.clear:hover{background:#d0d0d0;}
.rm5-filter-bar a.clear{color:#c0392b;border-color:#e0a0a0;background:#fff5f5;}

/* 議題表格 */
.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 #e0e0e0;padding:5px 10px;vertical-align:top;}
.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-status-badge{display:inline-block;padding:1px 7px;border-radius:2px;font-size:11px;font-weight:bold;}
.rm5-status-pending{background:#e0e0e0;color:#555;}
.rm5-status-in_progress{background:#fff3cd;color:#856404;}
.rm5-status-hold{background:#d1ecf1;color:#0c5460;}
.rm5-status-watching{background:#cce5ff;color:#004085;}
.rm5-status-completed{background:#d4edda;color:#155724;}
.rm5-empty{color:#888;font-size:13px;text-align:center;padding:40px 0;}
</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('issues.index') }}" 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">
  <p class="rm5-page-title">議題清單</p>

  @if(session('success'))
    <div style="background:#d4edda;border:1px solid #c3e6cb;color:#155724;padding:6px 12px;border-radius:2px;margin-bottom:12px;font-size:13px;">
      {{ session('success') }}
    </div>
  @endif

  {{-- 篩選 --}}
  <form method="GET" action="{{ route('issues.index') }}">
    <div class="rm5-filter-bar">
      <label for="fi-module">功能模組</label>
      <select id="fi-module" name="module_id">
        <option value="">所有功能</option>
        @foreach($modules as $m)
          <option value="{{ $m->id }}" {{ $req->module_id == $m->id ? 'selected' : '' }}>{{ $m->name }}</option>
        @endforeach
      </select>

      <label for="fi-cat">類型</label>
      <select id="fi-cat" name="category_id">
        <option value="">所有類型</option>
        @foreach($categories as $c)
          <option value="{{ $c->id }}" {{ $req->category_id == $c->id ? 'selected' : '' }}>{{ $c->name }}</option>
        @endforeach
      </select>

      <label for="fi-status">狀態</label>
      <select id="fi-status" name="status">
        <option value="">所有狀態</option>
        <option value="pending"     {{ $req->status == 'pending'     ? 'selected' : '' }}>待處理</option>
        <option value="in_progress" {{ $req->status == 'in_progress' ? 'selected' : '' }}>處理中</option>
        <option value="hold"        {{ $req->status == 'hold'        ? 'selected' : '' }}>暫不處理</option>
        <option value="watching"    {{ $req->status == 'watching'    ? 'selected' : '' }}>觀察</option>
        <option value="completed"   {{ $req->status == 'completed'   ? 'selected' : '' }}>完成</option>
      </select>

      <label for="fi-q">關鍵字</label>
      <input id="fi-q" type="text" name="q" value="{{ $req->q ?? '' }}" placeholder="標題或內容">

      <button type="submit">搜尋</button>
      @if(request()->hasAny(['module_id','category_id','status','q']))
        <a href="{{ route('issues.index') }}" class="clear">清除</a>
      @endif

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

  {{-- 表格 --}}
  @if($issues->isEmpty())
    <div class="rm5-empty">目前沒有符合條件的議題。</div>
  @else
    <div class="table-responsive"><table class="rm5-issue-table">
      <thead>
        <tr>
          <th>功能模組</th>
          <th>類型</th>
          <th>標題</th>
          <th>回報內容</th>
          <th>回報人</th>
          <th>狀態</th>
          <th>建立時間</th>
          @if(auth()->user()->role === 'admin')
            <th>操作</th>
          @endif
        </tr>
      </thead>
      <tbody>
        @foreach($issues as $i)
          @php
            $statusMap = ['pending'=>'待處理','in_progress'=>'處理中','hold'=>'暫不處理','watching'=>'觀察','completed'=>'完成'];
          @endphp
          <tr>
            <td>{{ $i->module?->name ?? '—' }}</td>
            <td>{{ $i->category?->name ?? '—' }}</td>
            <td>{{ $i->title }}</td>
            <td style="max-width:280px;word-break:break-word;">{{ Str::limit($i->description, 80) }}</td>
            <td>{{ $i->user?->name ?? '—' }}</td>
            <td>
              @if(auth()->user()->role === 'admin')
                <form method="POST" action="{{ route('issues.updateStatus', $i) }}" style="margin:0">
                  @csrf
                  <select name="status" style="border:1px solid #ccc;border-radius:2px;padding:1px 4px;font-size:12px;" onchange="this.form.submit()">
                    <option value="pending"     {{ $i->status=='pending'     ? 'selected':'' }}>待處理</option>
                    <option value="in_progress" {{ $i->status=='in_progress' ? 'selected':'' }}>處理中</option>
                    <option value="hold"        {{ $i->status=='hold'        ? 'selected':'' }}>暫不處理</option>
                    <option value="watching"    {{ $i->status=='watching'    ? 'selected':'' }}>觀察</option>
                    <option value="completed"   {{ $i->status=='completed'   ? 'selected':'' }}>完成</option>
                  </select>
                </form>
              @else
                <span class="rm5-status-badge rm5-status-{{ $i->status }}">
                  {{ $statusMap[$i->status] ?? $i->status }}
                </span>
              @endif
            </td>
            <td style="white-space:nowrap;">{{ $i->created_at?->format('Y-m-d H:i') ?? '—' }}</td>
            @if(auth()->user()->role === 'admin')
              <td><a href="{{ route('issues.show', $i) }}" style="color:#2c5f9a;font-size:12px;">檢視</a></td>
            @endif
          </tr>
        @endforeach
      </tbody>
    </table></div>
  @endif
</div>
@endsection