@extends('layouts.app')
@section('title', '#' . ($issue->redmine_id) . ' ' . $issue->title)

@push('styles')
<style>
.activity-timeline { position: relative; padding-left: 2rem; }
.activity-timeline::before {
    content: '';
    position: absolute;
    left: .75rem;
    top: 0; bottom: 0;
    width: 2px;
    background: #e5e7eb;
}
.activity-item { position: relative; margin-bottom: 1.25rem; }
.activity-icon {
    position: absolute;
    left: -2.1rem;
    top: .1rem;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .7rem;
    color: #fff;
    flex-shrink: 0;
}
.activity-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: .5rem;
    padding: .6rem .9rem;
}
.change-row { font-size: .82rem; }
.change-old { color: #dc2626; text-decoration: line-through; margin-right: .3rem; }
.change-new { color: #16a34a; font-weight: 600; }
@media (prefers-color-scheme: dark) {
  .activity-card { background: #1f2937; border-color: #374151; }
  .activity-timeline::before { background: #374151; }
}
</style>
@endpush

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

<div class="container-fluid px-4 py-4">
  @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="mb-3">
    <a href="{{ route('projects.issues.index', $project) }}" class="btn btn-sm btn-outline-secondary">
      <i class="bi bi-arrow-left me-1"></i>返回議題清單
    </a>
  </div>

  <div class="row g-4">
    {{-- 左欄：可操作 --}}
    <div class="col-lg-8">

      {{-- 議題標題 --}}
      <div class="d-flex align-items-start gap-2 mb-3">
        <div class="flex-grow-1">
          <h4 class="mb-1 fw-bold">
            <span class="badge bg-{{ $trackers[$issue->tracker]['color'] ?? 'secondary' }} me-2">
              類型：{{ $trackers[$issue->tracker]['label'] ?? $issue->tracker }}
            </span>
            {{ $issue->title }}
          </h4>
          <small class="text-muted">
            #{{ $issue->redmine_id }} &nbsp;·&nbsp;
            由 <strong>{{ $issue->user?->name ?? '（已刪除）' }}</strong> 建立於 {{ $issue->created_at?->format('Y-m-d H:i') }}
            @if($issue->updated_at && $issue->updated_at != $issue->created_at)
              &nbsp;·&nbsp; 最後更新 {{ $issue->updated_at->diffForHumans() }}
            @endif
          </small>
        </div>
        <div class="d-flex gap-1 flex-shrink-0">
          @can('editIssue', [$project, $issue])
            <a href="{{ route('projects.issues.edit', [$project, $issue]) }}" class="btn btn-sm btn-outline-secondary">
              <i class="bi bi-pencil"></i> 編輯
            </a>
          @endcan
          @can('update', $project)
            <form method="POST" action="{{ route('projects.issues.destroy', [$project, $issue]) }}"
                  onsubmit="return confirm('確定刪除此議題？')">
              @csrf @method('DELETE')
              <button class="btn btn-sm btn-outline-danger"><i class="bi bi-trash"></i></button>
            </form>
          @endcan
        </div>
      </div>

      {{-- 快速更新狀態（只送 status，不動其他欄位） --}}
      <div class="card shadow-sm mb-4 border-start border-primary border-3">
        <div class="card-body py-2 px-3">
          <form method="POST" action="{{ route('projects.issues.quick-status', [$project, $issue]) }}" id="quickStatusForm">
            @csrf @method('PUT')
            <div class="d-flex align-items-center gap-3">
              <small class="text-primary fw-semibold text-nowrap"><i class="bi bi-arrow-repeat me-1"></i>快速更新狀態</small>
              <select name="status" class="form-select form-select-sm" onchange="this.form.submit()">
                @foreach($statuses as $k => $s)
                  <option value="{{ $k }}" {{ $issue->status === $k ? 'selected' : '' }}>
                    {{ $s['label'] }}
                  </option>
                @endforeach
              </select>
            </div>
          </form>
        </div>
      </div>

      {{-- 附件 --}}
      <div class="card shadow-sm mb-4" id="attachments">
        <div class="card-header d-flex justify-content-between align-items-center">
          <h6 class="mb-0"><i class="bi bi-paperclip me-1"></i>附件 ({{ $issue->attachments->count() }})</h6>
        </div>
        @if($issue->attachments->isNotEmpty())
        <ul class="list-group list-group-flush">
          @foreach($issue->attachments as $att)
          <li class="list-group-item px-3 py-2 d-flex justify-content-between align-items-center">
            <div class="d-flex align-items-center gap-2 text-truncate">
              <i class="bi bi-file-earmark text-muted"></i>
              <a href="{{ Storage::disk('public')->url($att->path) }}" target="_blank" class="text-decoration-none text-truncate" title="{{ $att->filename }}">
                {{ $att->filename }}
              </a>
              @if($att->uploader)
                <small class="text-muted text-nowrap">由 {{ $att->uploader }}</small>
              @endif
            </div>
            <form method="POST" action="{{ route('projects.issues.attachments.destroy', [$project, $issue, $att]) }}"
                  onsubmit="return confirm('確定刪除此附件？')" class="ms-2 flex-shrink-0">
              @csrf @method('DELETE')
              <button class="btn btn-sm btn-outline-danger py-0 px-1"><i class="bi bi-trash"></i></button>
            </form>
          </li>
          @endforeach
        </ul>
        @endif
        <div class="card-footer bg-transparent">
          <form method="POST" action="{{ route('projects.issues.attachments.store', [$project, $issue]) }}"
                enctype="multipart/form-data" class="d-flex gap-2 align-items-center">
            @csrf
            <div>
              <input type="file" name="file" class="form-control form-control-sm" style="max-width:320px;" required
                     accept=".pdf,.doc,.docx,.odt,.jpg,.jpeg,.png">
              <div class="form-text">PDF、DOC / DOCX、ODT、JPG、PNG，上限 20 MB</div>
            </div>
            <button class="btn btn-sm btn-outline-secondary text-nowrap align-self-start"><i class="bi bi-upload me-1"></i>上傳</button>
          </form>
        </div>
      </div>

      @if(\App\Models\SystemSetting::get('time_source_issue'))
      @php $timeEntries = $issue->timeEntries()->with('user:id,name')->orderBy('spent_on','desc')->get(); @endphp
      <div class="card shadow-sm mb-4" id="log-time">
        <div class="card-header d-flex align-items-center justify-content-between">
          <div class="d-flex align-items-center gap-2">
            <i class="bi bi-clock-fill text-primary"></i>
            <h6 class="mb-0 fw-bold">記錄工時</h6>
          </div>
          @if($timeEntries->isNotEmpty())
            <span class="badge bg-primary">合計 {{ number_format($timeEntries->sum('hours'), 2) }} 小時</span>
          @endif
        </div>
        <div class="card-body">
          @php $issueContracts = $project->contracts()->orderByDesc('start_date')->get(['id','name','start_date']); @endphp
          @if($issueContracts->isEmpty())
            <div class="alert alert-warning py-2 small mb-0">此專案尚無合約，無法記錄工時。</div>
          @else
          <form action="{{ route('projects.time.store', $project) }}" method="POST">
            @csrf
            <input type="hidden" name="issue_id" value="{{ $issue->id }}">
            <div class="row g-2 align-items-end">
              <div class="col-sm-3">
                <label for="lt_contract_id" class="form-label form-label-sm mb-1">專案/合約 <span class="text-danger">*</span></label>
                <select id="lt_contract_id" name="contract_id" class="form-select form-select-sm" required>
                  @foreach($issueContracts as $c)
                    <option value="{{ $c->id }}" @selected($loop->first)>
                      {{ $c->name }}{{ $c->start_date ? '（'.$c->start_date->format('Y/m').'）' : '' }}
                    </option>
                  @endforeach
                </select>
              </div>
              <div class="col-sm-2">
                <label for="lt_spent_on" class="form-label form-label-sm mb-1">日期</label>
                <input type="date" id="lt_spent_on" name="spent_on" class="form-control form-control-sm"
                  value="{{ date('Y-m-d') }}" required>
              </div>
              <div class="col-sm-2">
                <label for="lt_hours" class="form-label form-label-sm mb-1">小時數 <span class="text-muted fw-normal" style="font-size:.7rem;">（最小 0.25）</span></label>
                <input type="number" id="lt_hours" name="hours" class="form-control form-control-sm"
                  placeholder="例：2" min="0.25" max="24" step="0.25" required>
              </div>
              <div class="col-sm-2">
                <label for="lt_activity" class="form-label form-label-sm mb-1">活動類型</label>
                <select id="lt_activity" name="activity" class="form-select form-select-sm">
                  @foreach(\App\Models\TimeActivity::asMap() as $val => $lbl)
                    <option value="{{ $val }}">{{ $lbl }}</option>
                  @endforeach
                </select>
              </div>
              <div class="col-sm-3">
                <label for="lt_comments" class="form-label form-label-sm mb-1">備註（選填）</label>
                <input type="text" id="lt_comments" name="comments" class="form-control form-control-sm" placeholder="簡短說明…">
              </div>
              <div class="col-12 mt-1">
                <button type="submit" class="btn btn-primary btn-sm px-4">
                  <i class="bi bi-check-lg me-1"></i>送出工時
                </button>
              </div>
            </div>
          </form>
          @endif
        </div>
        @if($timeEntries->isNotEmpty())
        <div class="table-responsive border-top">
          <table class="table table-sm align-middle mb-0">
            <thead class="table-light">
              <tr><th>日期</th><th>成員</th><th>工時</th><th>活動</th><th>備註</th><th></th></tr>
            </thead>
            <tbody>
              @foreach($timeEntries as $te)
              <tr>
                <td class="small text-muted">{{ $te->spent_on->format('Y/m/d') }}</td>
                <td class="small">{{ $te->user?->name }}</td>
                <td><span class="badge bg-primary">{{ number_format($te->hours,2) }} 小時</span></td>
                <td><span class="badge bg-light text-dark border small">{{ $te->activity_label }}</span></td>
                <td class="small text-muted">{{ $te->comments ?? '—' }}</td>
                <td>
                  @if($te->user_id === auth()->id() || auth()->user()->role === 'admin')
                  <div class="d-flex gap-1">
                    <button type="button" class="btn btn-sm btn-outline-secondary py-0 px-1"
                      data-id="{{ $te->id }}"
                      data-spent-on="{{ $te->spent_on->format('Y-m-d') }}"
                      data-hours="{{ $te->hours }}"
                      data-activity="{{ $te->activity }}"
                      data-comments="{{ $te->comments }}"
                      onclick="openIssueEditEntry(this)"
                      title="編輯">
                      <i class="bi bi-pencil"></i>
                    </button>
                    <form action="{{ route('projects.time.destroy', [$project, $te]) }}" method="POST" class="m-0">
                      @csrf @method('DELETE')
                      <button type="submit" class="btn btn-sm btn-outline-danger py-0 px-1"
                        onclick="return confirm('確定刪除？\n連動的工時紀錄表也會一起刪除。')" title="刪除">
                        <i class="bi bi-trash"></i>
                      </button>
                    </form>
                  </div>
                  @endif
                </td>
              </tr>
              @endforeach
            </tbody>
          </table>
        </div>
        @endif
      </div>
      @endif

      {{-- 留言記錄 --}}
      <div id="comments">
        <h6 class="fw-bold mb-3">
          <i class="bi bi-chat-dots me-2"></i>
          留言記錄 ({{ $issue->comments->count() }})
        </h6>

        @foreach($issue->comments as $comment)
        <div class="card shadow-sm mb-3">
          <div class="card-header bg-light d-flex justify-content-between align-items-center py-2">
            <div>
              <i class="bi bi-person-circle me-1"></i>
              <strong>{{ $comment->user?->name ?? '（系統）' }}</strong>
              <small class="text-muted ms-2">{{ $comment->created_at?->format('Y-m-d H:i') }}</small>
              @if($comment->redmine_journal_id)
                <span class="badge bg-light text-muted ms-1" title="從 Redmine 匯入">R</span>
              @endif
            </div>
            @if(auth()->user()->isAdmin() || $comment->user_id === auth()->id())
            <form method="POST" action="{{ route('projects.issues.comments.destroy', [$project, $issue, $comment]) }}"
                  onsubmit="return confirm('刪除此留言？')">
              @csrf @method('DELETE')
              <button class="btn btn-link btn-sm text-danger p-0"><i class="bi bi-x-lg"></i></button>
            </form>
            @endif
          </div>
          <div class="card-body py-2">
            {!! nl2br(e($comment->content)) !!}
          </div>
        </div>
        @endforeach

        {{-- 新增留言 --}}
        <div class="card shadow-sm">
          <div class="card-header"><h6 class="mb-0">新增留言</h6></div>
          <div class="card-body">
            <form method="POST" action="{{ route('projects.issues.comments.store', [$project, $issue]) }}">
              @csrf
              <textarea name="content" class="form-control mb-2" rows="4" placeholder="輸入留言內容…" required>{{ old('content') }}</textarea>
              @error('content')<div class="text-danger small mb-2">{{ $message }}</div>@enderror
              <button class="btn btn-primary btn-sm">送出留言</button>
            </form>
          </div>
        </div>
      </div>

      {{-- 操作紀錄 --}}
      @if($issue->activities->isNotEmpty())
      <div class="mt-4" id="activity-log">
        <h6 class="fw-bold mb-3">
          <i class="bi bi-clock-history me-2"></i>操作紀錄
          <span class="badge bg-secondary fw-normal ms-1">{{ $issue->activities->count() }}</span>
        </h6>
        <div class="activity-timeline">
          @foreach($issue->activities->sortByDesc('created_at') as $act)
          @php
            $iconBg = $act->actionColor();
          @endphp
          <div class="activity-item">
            <div class="activity-icon" style="background:{{ $iconBg }}">
              <i class="bi {{ $act->actionIcon() }}"></i>
            </div>
            <div class="activity-card">
              <div class="d-flex justify-content-between align-items-start flex-wrap gap-1 mb-1">
                <span class="fw-semibold small">
                  {{ $act->user->name }}
                  <span class="text-muted fw-normal ms-1">{{ $act->actionLabel() }}</span>
                </span>
                <small class="text-muted text-nowrap">{{ $act->created_at?->format('Y-m-d H:i') }}</small>
              </div>
              @if($act->note)
                <div class="small text-muted fst-italic">"{{ $act->note }}"</div>
              @endif
              @if($act->changes)
                <div class="mt-1">
                  @foreach($act->changes as $change)
                  <div class="change-row d-flex align-items-baseline gap-1 flex-wrap">
                    <span class="badge bg-light text-dark border fw-normal small">{{ $change['label'] }}</span>
                    @if($change['old_label'] ?? '')
                      <span class="change-old">{{ $change['old_label'] }}</span>
                      <span class="text-muted">→</span>
                    @endif
                    <span class="change-new">{{ $change['new_label'] }}</span>
                  </div>
                  @endforeach
                </div>
              @endif
            </div>
          </div>
          @endforeach
        </div>
      </div>
      @endif

    </div>

    {{-- 右欄：議題資訊（唯讀） --}}
    <div class="col-lg-4">
      <div class="bg-light" style="border-radius:.5rem; padding:1rem;">
      <small class="text-secondary fw-semibold text-uppercase d-block mb-3" style="letter-spacing:.05em">
        <i class="bi bi-info-circle me-1"></i>議題資訊
      </small>

      <div class="card shadow-sm mb-3">
        <div class="card-header py-2"><h6 class="mb-0 small fw-semibold">議題資訊</h6></div>
        <div class="list-group list-group-flush">

          @if($issue->redmine_id)
          <div class="list-group-item px-3 py-2">
            <div class="d-flex justify-content-between align-items-center">
              <small class="text-muted">議題 #</small>
              <small class="fw-semibold">{{ $issue->redmine_id }}</small>
            </div>
          </div>
          @endif

          <div class="list-group-item px-3 py-2">
            <div class="d-flex justify-content-between align-items-center">
              <small class="text-muted">類型</small>
              <span class="badge bg-{{ $trackers[$issue->tracker]['color'] ?? 'secondary' }}">
                {{ $trackers[$issue->tracker]['label'] ?? $issue->tracker }}
              </span>
            </div>
          </div>

          <div class="list-group-item px-3 py-2">
            <div class="d-flex justify-content-between align-items-center">
              <small class="text-muted">狀態</small>
              <span class="badge bg-{{ $statuses[$issue->status]['color'] ?? 'secondary' }}">
                {{ $statuses[$issue->status]['label'] ?? $issue->status }}
              </span>
            </div>
          </div>

          <div class="list-group-item px-3 py-2">
            <div class="d-flex justify-content-between align-items-center">
              <small class="text-muted">優先度</small>
              <span class="badge bg-{{ $priorities[$issue->priority]['color'] ?? 'secondary' }}">
                {{ $priorities[$issue->priority]['label'] ?? $issue->priority }}
              </span>
            </div>
          </div>

          <div class="list-group-item px-3 py-2">
            <div class="d-flex justify-content-between align-items-center">
              <small class="text-muted">負責人</small>
              <span>{{ $issue->assignee?->name ?? '（未指派）' }}</span>
            </div>
          </div>

          @if ($issue->version)
          <div class="list-group-item px-3 py-2">
            <div class="d-flex justify-content-between align-items-center">
              <small class="text-muted">版本（期）</small>
              <a href="{{ route('projects.roadmap', $project) }}" class="text-decoration-none">
                <span class="badge bg-info text-dark">{{ $issue->version->name }}</span>
              </a>
            </div>
          </div>
          @endif

          <div class="list-group-item px-3 py-2">
            <div class="d-flex justify-content-between align-items-center">
              <small class="text-muted">回報人</small>
              <span>{{ $issue->user?->name ?? '—' }}</span>
            </div>
          </div>

          @if($issue->start_date || $issue->due_date)
          <div class="list-group-item px-3 py-2">
            <div class="d-flex justify-content-between align-items-center">
              <small class="text-muted">開始日期</small>
              <span>{{ $issue->start_date?->format('Y-m-d') ?? '—' }}</span>
            </div>
          </div>
          <div class="list-group-item px-3 py-2">
            <div class="d-flex justify-content-between align-items-center">
              <small class="text-muted">到期日</small>
              <span class="{{ $issue->due_date && $issue->due_date->isPast() && !in_array($issue->status,['completed','rejected']) ? 'text-danger fw-bold' : '' }}">
                {{ $issue->due_date?->format('Y-m-d') ?? '—' }}
              </span>
            </div>
          </div>
          @endif

          @if($issue->estimated_hours)
          <div class="list-group-item px-3 py-2">
            <div class="d-flex justify-content-between align-items-center">
              <small class="text-muted">預估工時</small>
              <span>{{ $issue->estimated_hours }} 小時</span>
            </div>
          </div>
          @endif

          @php $spentHours = $issue->spentHours(); @endphp
          @if($spentHours > 0 || $issue->estimated_hours)
          <div class="list-group-item px-3 py-2">
            <div class="d-flex justify-content-between align-items-center">
              <small class="text-muted">耗用工時</small>
              <span class="text-primary fw-semibold">{{ number_format($spentHours, 2) }} 小時</span>
            </div>
            @if($issue->estimated_hours && $issue->estimated_hours > 0)
              @php $pct = min(100, round($spentHours / $issue->estimated_hours * 100)); @endphp
              <div class="progress mt-1" style="height:4px">
                <div class="progress-bar {{ $pct > 100 ? 'bg-danger' : 'bg-info' }}" style="width:{{ $pct }}%"></div>
              </div>
              <small class="text-muted">{{ $pct }}% 預估</small>
            @endif
          </div>
          @endif

          <div class="list-group-item px-3 py-2">
            <small class="text-muted d-block mb-1">完成度</small>
            <div class="progress" style="height:8px">
              <div class="progress-bar {{ $issue->done_ratio == 100 ? 'bg-success' : '' }}"
                   style="width:{{ $issue->done_ratio }}%"></div>
            </div>
            <small class="text-muted">{{ $issue->done_ratio }}%</small>
          </div>

          <div class="list-group-item px-3 py-2">
            <small class="text-muted d-block mb-1">描述</small>
            @if($issue->description)
              <div class="issue-description small">{!! nl2br(e($issue->description)) !!}</div>
            @else
              <span class="text-muted fst-italic small">（無描述）</span>
            @endif
          </div>

        </div>
      </div>

      </div>{{-- end info panel --}}
    </div>
  </div>
</div>

{{-- ── Issue Time Edit Modal ── --}}
<div class="modal fade" id="issueEditEntryModal" tabindex="-1">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <div class="modal-header py-2">
        <h6 class="modal-title"><i class="bi bi-pencil me-2"></i>編輯工時紀錄</h6>
        <button type="button" class="btn-close btn-sm" data-bs-dismiss="modal"></button>
      </div>
      <form id="issueEditEntryForm" method="POST">
        @csrf @method('PUT')
        <div class="modal-body">
          <div class="mb-2">
            <label class="form-label small fw-semibold">日期</label>
            <input type="date" name="spent_on" id="issue_edit_spent_on" class="form-control form-control-sm" required>
          </div>
          <div class="mb-2">
            <label class="form-label small fw-semibold">工時（小時）</label>
            <input type="number" name="hours" id="issue_edit_hours" class="form-control form-control-sm"
              min="0.25" max="24" step="0.25" required>
            <div class="form-text">最小填寫單位：0.25 小時（15 分鐘）</div>
          </div>
          <div class="mb-2">
            <label class="form-label small fw-semibold">活動類型</label>
            <select name="activity" id="issue_edit_activity" class="form-select form-select-sm">
              @foreach(\App\Models\TimeActivity::asMap() as $val => $lbl)
                <option value="{{ $val }}">{{ $lbl }}</option>
              @endforeach
            </select>
          </div>
          <div class="mb-2">
            <label class="form-label small fw-semibold">備註</label>
            <textarea name="comments" id="issue_edit_comments" class="form-control form-control-sm" rows="2"></textarea>
          </div>
          <p class="small text-muted mb-0"><i class="bi bi-info-circle me-1"></i>儲存後連動更新工時紀錄表</p>
        </div>
        <div class="modal-footer py-2">
          <button type="button" class="btn btn-sm btn-outline-secondary" data-bs-dismiss="modal">取消</button>
          <button type="submit" class="btn btn-sm btn-primary">儲存</button>
        </div>
      </form>
    </div>
  </div>
</div>

@push('scripts')
<script>
var ISSUE_TIME_BASE_URL = '{{ url("projects/{$project->id}/time") }}/';

function openIssueEditEntry(btn) {
  var id       = btn.dataset.id;
  var spentOn  = btn.dataset.spentOn;
  var hours    = btn.dataset.hours;
  var activity = btn.dataset.activity;
  var comments = btn.dataset.comments || '';
  document.getElementById('issueEditEntryForm').action = ISSUE_TIME_BASE_URL + id;
  document.getElementById('issue_edit_spent_on').value  = spentOn;
  document.getElementById('issue_edit_hours').value      = hours;
  document.getElementById('issue_edit_activity').value   = activity;
  document.getElementById('issue_edit_comments').value   = comments;
  bootstrap.Modal.getOrCreateInstance(document.getElementById('issueEditEntryModal')).show();
}
</script>
@endpush
@endsection