{{-- resources/views/projects/time/index.blade.php --}}
@extends('layouts.app')

@push('styles')
<style>
.time-table th, .time-table td { vertical-align: middle; }
.time-table th { font-size: .78rem; color: #6c757d; font-weight: 600; white-space: nowrap; }
.time-table td { font-size: .85rem; padding-top: .6rem; padding-bottom: .6rem; }
.time-table .col-date    { white-space: nowrap; width: 96px; }
.time-table .col-member  { white-space: nowrap; width: 80px; font-weight: 500; color: #212529; }
.time-table .col-hours   { white-space: nowrap; width: 90px; }
.time-table .col-act     { white-space: nowrap; width: 64px; }
.time-table .col-contract{ max-width: 180px; }
.time-table .col-contract span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.time-table .col-issue   { max-width: 160px; }
.time-table .col-issue a,
.time-table .col-issue span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.time-table .col-notes   { max-width: 200px; }
.time-table .col-notes span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.time-table .col-action  { width: 56px; white-space: nowrap; }
</style>
@endpush

@section('content')
@include('projects._nav')
<div class="container-fluid py-3 px-4">
  <h5 class="mb-3 fw-bold"><i class="bi bi-clock-history me-2"></i>工時紀錄</h5>

  {{-- ── 上方三欄：工時總計 ／ 進度百分比 ／ 活動分佈 ── --}}
  <div class="row g-3 mb-3">

    {{-- 工時總計 --}}
    <div class="col-md-4">
      <div class="card shadow-sm h-100">
        <div class="card-header bg-white">
          <h6 class="mb-0 fw-semibold"><i class="bi bi-graph-up me-1"></i>工時總計</h6>
        </div>
        <div class="card-body pb-2">
          <div class="text-center mb-3">
            <div class="fs-2 fw-bold text-primary">{{ number_format($allHours, 2) }}</div>
            <div class="small text-muted">目前累計總工時（小時）</div>
            @if(request()->hasAny(['user_id','activity','contract_id','date_from','date_to']) || $activeContractId)
            <div class="small text-secondary mt-1">
              篩選小計：<strong>{{ number_format($totalHours, 2) }}</strong> 小時
            </div>
            @endif
          </div>
          @if($byUser->isNotEmpty())
            <p class="small fw-semibold text-muted mb-1">依成員</p>
            <canvas id="memberChart" style="width:100%;max-height:160px;"></canvas>
            <div class="mt-2">
              @foreach($byUser as $row)
              <div class="d-flex justify-content-between align-items-center mb-1">
                <span class="small text-truncate me-1">{{ $row['name'] }}</span>
                <span class="badge bg-primary text-nowrap">{{ number_format($row['hours'], 2) }} h</span>
              </div>
              @endforeach
            </div>
          @else
            <div class="text-center text-muted small py-3">尚無工時紀錄</div>
          @endif
        </div>
      </div>
    </div>

    {{-- 進度百分比 --}}
    <div class="col-md-4">
      <div class="card shadow-sm h-100">
        <div class="card-header bg-white d-flex justify-content-between align-items-center">
          <h6 class="mb-0 fw-semibold"><i class="bi bi-bar-chart-fill me-1"></i>進度百分比</h6>
          @if($canSetProgress)
            <span class="badge bg-success-subtle text-success" style="font-size:.75rem;">可編輯</span>
          @endif
        </div>
        <div class="card-body pb-3">
          <p class="small fw-semibold text-muted mb-1">實際進度（手動設定）</p>
          <div class="d-flex align-items-center gap-2 mb-1">
            <div class="progress flex-fill" style="height:20px;">
              <div class="progress-bar bg-success" role="progressbar"
                style="width:{{ $project->progress }}%"
                aria-valuenow="{{ $project->progress }}" aria-valuemin="0" aria-valuemax="100">
                @if($project->progress >= 8){{ $project->progress }}%@endif
              </div>
            </div>
            <span class="fw-bold text-success fs-5" style="min-width:48px;text-align:right;">{{ $project->progress }}%</span>
          </div>
          @if($canSetProgress)
          <form action="{{ route('projects.time.progress', $project) }}" method="POST" class="d-flex gap-2 align-items-center mt-2 mb-4">
            @csrf
            <label class="form-label small fw-semibold mb-0 text-nowrap">更新：</label>
            <input type="number" name="progress" class="form-control form-control-sm" style="width:80px;"
              value="{{ $project->progress }}" min="0" max="100" step="1" required>
            <span class="small text-muted">%</span>
            <button type="submit" class="btn btn-sm btn-success">儲存</button>
          </form>
          @else
          <div class="mb-4"></div>
          @endif
          <p class="small fw-semibold text-muted mb-1">累積人天比（系統計算）</p>
          @if($totalEstMd > 0)
            @php $mdPct = min($manDaysRatio, 100); $mdOver = $manDaysRatio > 100; @endphp
            <div class="d-flex align-items-center gap-2 mb-1">
              <div class="progress flex-fill" style="height:20px;">
                <div class="progress-bar {{ $mdOver ? 'bg-danger' : 'bg-warning' }}" role="progressbar"
                  style="width:{{ $mdPct }}%"
                  aria-valuenow="{{ $mdPct }}" aria-valuemin="0" aria-valuemax="100">
                  @if($mdPct >= 8){{ $manDaysRatio }}%@endif
                </div>
              </div>
              <span class="fw-bold {{ $mdOver ? 'text-danger' : 'text-warning-emphasis' }} fs-5" style="min-width:48px;text-align:right;">{{ $manDaysRatio }}%</span>
            </div>
            <div class="small text-muted mt-1">
              實際 <strong>{{ number_format($totalActualMd, 2) }}</strong> 人天
              ／ 評估 <strong>{{ number_format($totalEstMd, 1) }}</strong> 人天
            </div>
          @else
            <div class="text-muted small py-2">合約尚未設定評估人天</div>
          @endif
        </div>
      </div>
    </div>

    {{-- 活動分佈圖 --}}
    <div class="col-md-4">
      <div class="card shadow-sm h-100">
        <div class="card-header bg-white">
          <h6 class="mb-0 fw-semibold"><i class="bi bi-pie-chart me-1"></i>活動分佈</h6>
        </div>
        <div class="card-body d-flex flex-column align-items-center justify-content-center py-2">
          @if($byActivity->isNotEmpty())
            <div style="position:relative;width:180px;height:180px;">
              <canvas id="activityChart"></canvas>
              <div style="position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;pointer-events:none;">
                <div class="fw-bold text-primary" style="font-size:1.1rem;">{{ number_format($totalHours, 1) }}</div>
                <div class="text-muted" style="font-size:.65rem;">小時</div>
              </div>
            </div>
            <div class="mt-3 w-100">
              @foreach($byActivity as $row)
              <div class="d-flex justify-content-between align-items-center mb-1">
                <span class="d-flex align-items-center gap-1 small text-truncate me-1">
                  <span class="activity-dot" data-idx="{{ $loop->index }}"
                    style="display:inline-block;width:10px;height:10px;border-radius:50%;flex-shrink:0;"></span>
                  {{ $row['label'] }}
                </span>
                <span class="text-muted small text-nowrap">{{ number_format($row['hours'], 2) }} h</span>
              </div>
              @endforeach
            </div>
          @else
            <div class="text-center text-muted small py-4">
              <i class="bi bi-pie-chart fs-2 d-block mb-2 opacity-25"></i>尚無資料
            </div>
          @endif
        </div>
      </div>
    </div>

  </div>{{-- /row 上方 --}}

  {{-- ── 下方：工時輸入 ＋ 詳細紀錄 ── --}}
  <div class="row g-3">

    {{-- 工時紀錄輸入 --}}
    <div class="col-lg-4">
      <div class="card shadow-sm">
        <div class="card-header bg-white">
          <h6 class="mb-0 fw-semibold"><i class="bi bi-plus-circle me-1"></i>記錄工時</h6>
        </div>
        <div class="card-body">
          <form action="{{ route('projects.time.store', $project) }}" method="POST">
            @csrf
            @if($contracts->isEmpty())
            <div class="alert alert-warning small py-2 px-3 mb-2">
              此專案尚無合約，請先建立合約才能記錄工時。
            </div>
            @endif
            <div class="mb-2">
              <label class="form-label small fw-semibold" for="contract_id">專案/合約 <span class="text-danger">*</span></label>
              <select name="contract_id" class="form-select form-select-sm" id="contract_id" required
                {{ $contracts->isEmpty() ? 'disabled' : '' }}>
                @foreach($contracts as $c)
                  <option value="{{ $c->id }}" @selected($loop->first)>
                    {{ $c->name }}@if($c->start_date) （{{ $c->start_date->format('Y/m') }}）@endif
                  </option>
                @endforeach
              </select>
            </div>
            <div class="mb-2">
              <label class="form-label small fw-semibold" for="spent_on">日期</label>
              <input type="date" name="spent_on" id="spent_on" class="form-control form-control-sm"
                value="{{ date('Y-m-d') }}" required>
            </div>
            <div class="mb-2">
              <label class="form-label small fw-semibold" for="hours">工時（小時）</label>
              <input type="number" name="hours" id="hours" class="form-control form-control-sm"
                placeholder="例：2.5" 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" for="activity">活動類型</label>
              <select name="activity" class="form-select form-select-sm" id="activity">
                @foreach($activities as $act)
                  <option value="{{ $act->slug }}">{{ $act->label }}</option>
                @endforeach
              </select>
            </div>
            <div class="mb-2">
              <label class="form-label small fw-semibold" for="issue_id">關聯議題（選填）</label>
              <select name="issue_id" class="form-select form-select-sm" id="issue_id">
                <option value="">— 無 —</option>
                @foreach($issues as $issue)
                  <option value="{{ $issue->id }}">#{{ $issue->id }} {{ $issue->title }}</option>
                @endforeach
              </select>
            </div>
            <div class="mb-3">
              <label class="form-label small fw-semibold" for="comments">備註</label>
              <input type="text" name="comments" id="comments" class="form-control form-control-sm"
                placeholder="簡述工作內容" maxlength="500">
            </div>
            <button type="submit" class="btn btn-primary btn-sm w-100"
              {{ $contracts->isEmpty() ? 'disabled' : '' }}>記錄</button>
          </form>
        </div>
      </div>
    </div>

    {{-- 詳細工時紀錄 --}}
    <div class="col-lg-8">

      {{-- 篩選 --}}
      <form method="GET" action="{{ route('projects.time.index', $project) }}" class="card shadow-sm mb-3">
        <div class="card-body py-2">
          <div class="row g-2 align-items-end">
            <div class="col-sm-4">
              <label class="form-label small mb-1" for="filter_contract_id">合約</label>
              <select name="contract_id" class="form-select form-select-sm" id="filter_contract_id">
                <option value="">全部合約</option>
                @foreach($contracts as $c)
                  <option value="{{ $c->id }}" @selected($activeContractId == $c->id)>
                    {{ $c->name }}@if($c->start_date) （{{ $c->start_date->format('Y/m') }}）@endif
                  </option>
                @endforeach
              </select>
            </div>
            <div class="col-sm-3">
              <label class="form-label small mb-1" for="user_id">成員</label>
              <select name="user_id" class="form-select form-select-sm" id="user_id">
                <option value="">全部</option>
                @foreach($members as $m)
                  <option value="{{ $m->id }}" @selected(request('user_id') == $m->id)>{{ $m->name }}</option>
                @endforeach
              </select>
            </div>
            <div class="col-sm-3">
              <label class="form-label small mb-1" for="filter_activity">活動</label>
              <select name="activity" class="form-select form-select-sm" id="filter_activity">
                <option value="">全部</option>
                @foreach($activities as $act)
                  <option value="{{ $act->slug }}" @selected(request('activity') === $act->slug)>{{ $act->label }}</option>
                @endforeach
              </select>
            </div>
            <div class="col-sm-2 d-flex gap-1 align-self-end">
              <button type="submit" class="btn btn-sm btn-primary flex-fill">篩選</button>
              <a href="{{ route('projects.time.index', $project) }}" class="btn btn-sm btn-outline-secondary">清除</a>
            </div>
            <div class="col-sm-3">
              <label class="form-label small mb-1" for="date_from">從</label>
              <input type="date" name="date_from" id="date_from" class="form-control form-control-sm" value="{{ request('date_from') }}">
            </div>
            <div class="col-sm-3">
              <label class="form-label small mb-1" for="date_to">至</label>
              <input type="date" name="date_to" id="date_to" class="form-control form-control-sm" value="{{ request('date_to') }}">
            </div>
          </div>
        </div>
      </form>

      {{-- 工時紀錄表 --}}
      <div class="card shadow-sm">
        <div class="card-header bg-white d-flex justify-content-between align-items-center">
          <h6 class="mb-0 fw-semibold">工時紀錄（{{ $entries->count() }} 筆）</h6>
          <span class="text-primary fw-bold small">合計 {{ number_format($totalHours, 2) }} 小時</span>
        </div>
        <div class="table-responsive">
          <table class="table table-hover table-sm align-middle mb-0 time-table">
            <thead class="table-light">
              <tr>
                <th class="col-date">日期</th>
                <th class="col-member">成員</th>
                <th class="col-hours">工時</th>
                <th class="col-act">活動</th>
                <th class="col-contract">合約</th>
                <th class="col-issue">議題</th>
                <th class="col-notes">備註</th>
                <th class="col-action"></th>
              </tr>
            </thead>
            <tbody>
              @forelse($entries as $entry)
              <tr>
                <td class="col-date text-muted">{{ $entry->spent_on->format('Y/m/d') }}</td>
                <td class="col-member">{{ $entry->user?->name }}</td>
                <td class="col-hours"><span class="badge bg-primary">{{ number_format($entry->hours, 2) }} 小時</span></td>
                <td class="col-act"><span class="badge bg-light text-dark border">{{ $entry->activity_label }}</span></td>
                <td class="col-contract text-muted"><span title="{{ $entry->contract?->name ?? '' }}">{{ $entry->contract?->name ?? '—' }}</span></td>
                <td class="col-issue">
                  @if($entry->issue)
                    <a href="{{ route('projects.issues.show', [$project, $entry->issue]) }}" class="text-decoration-none"
                      title="#{{ $entry->issue_id }} {{ $entry->issue->title }}">
                      #{{ $entry->issue_id }} {{ $entry->issue->title }}
                    </a>
                  @else
                    <span class="text-muted">—</span>
                  @endif
                </td>
                <td class="col-notes text-muted"><span title="{{ $entry->comments ?? '' }}">{{ $entry->comments ?? '—' }}</span></td>
                <td>
                  @if($entry->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="{{ $entry->id }}"
                      data-spent-on="{{ $entry->spent_on->format('Y-m-d') }}"
                      data-hours="{{ $entry->hours }}"
                      data-activity="{{ $entry->activity }}"
                      data-comments="{{ $entry->comments }}"
                      data-issue-id="{{ $entry->issue_id ?? '' }}"
                      onclick="openEditEntry(this)" title="編輯">
                      <i class="bi bi-pencil"></i>
                    </button>
                    <form action="{{ route('projects.time.destroy', [$project, $entry]) }}" 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>
              @empty
              <tr><td colspan="8" class="text-center text-muted py-4">尚無工時紀錄</td></tr>
              @endforelse
            </tbody>
          </table>
        </div>
      </div>

    </div>{{-- /col-lg-8 --}}
  </div>{{-- /row 下方 --}}

</div>{{-- /container --}}

{{-- ── Edit Modal ── --}}
<div class="modal fade" id="editEntryModal" tabindex="-1" data-bs-backdrop="false">
  <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="editEntryForm" method="POST">
        @csrf @method('PUT')
        <div class="modal-body">
          <div class="mb-2">
            <label class="form-label small fw-semibold" for="edit_spent_on">日期</label>
            <input type="date" name="spent_on" id="edit_spent_on" class="form-control form-control-sm" required>
          </div>
          <div class="mb-2">
            <label class="form-label small fw-semibold" for="edit_hours">工時（小時）</label>
            <input type="number" name="hours" id="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" for="edit_activity">活動類型</label>
            <select name="activity" id="edit_activity" class="form-select form-select-sm">
              @foreach($activities as $act)
                <option value="{{ $act->slug }}">{{ $act->label }}</option>
              @endforeach
            </select>
          </div>
          <div class="mb-2">
            <label class="form-label small fw-semibold" for="edit_issue_id">關聯議題</label>
            <select name="issue_id" id="edit_issue_id" class="form-select form-select-sm">
              <option value="">— 無 —</option>
              @foreach($issues as $issue)
                <option value="{{ $issue->id }}">#{{ $issue->id }} {{ $issue->title }}</option>
              @endforeach
            </select>
          </div>
          <div class="mb-2">
            <label class="form-label small fw-semibold" for="edit_comments">備註</label>
            <textarea name="comments" id="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>

<script>
var BASE_UPDATE_URL = '{{ url("projects/{$project->id}/time") }}/';
function openEditEntry(btn) {
  document.getElementById('editEntryForm').action = BASE_UPDATE_URL + btn.dataset.id;
  document.getElementById('edit_spent_on').value  = btn.dataset.spentOn;
  document.getElementById('edit_hours').value     = btn.dataset.hours;
  document.getElementById('edit_activity').value  = btn.dataset.activity;
  document.getElementById('edit_issue_id').value  = btn.dataset.issueId || '';
  document.getElementById('edit_comments').value  = btn.dataset.comments || '';
  bootstrap.Modal.getOrCreateInstance(document.getElementById('editEntryModal')).show();
}
</script>

@if($byActivity->isNotEmpty() || $byUser->isNotEmpty())
<script src="/vendor/chartjs/chart.umd.min.js"></script>
<script>
(function () {
  var PALETTE = [
    '#0d6efd','#198754','#fd7e14','#dc3545','#0dcaf0',
    '#6f42c1','#d63384','#20c997','#ffc107','#6c757d'
  ];

  // ── 依成員橫向長條圖 ──
  @if($byUser->isNotEmpty())
  (function(){
    var members = @json($byUser->values()->map(fn($r) => ['name' => $r['name'], 'hours' => round($r['hours'], 2)]));
    new Chart(document.getElementById('memberChart').getContext('2d'), {
      type: 'bar',
      data: {
        labels: members.map(function(m){ return m.name; }),
        datasets: [{
          data: members.map(function(m){ return m.hours; }),
          backgroundColor: members.map(function(_,i){ return PALETTE[i % PALETTE.length] + 'cc'; }),
          borderColor:     members.map(function(_,i){ return PALETTE[i % PALETTE.length]; }),
          borderWidth: 1,
          borderRadius: 4,
        }]
      },
      options: {
        indexAxis: 'y',
        plugins: {
          legend: { display: false },
          tooltip: {
            callbacks: {
              label: function(ctx){ return ' ' + ctx.parsed.x + ' 小時'; }
            }
          }
        },
        scales: {
          x: { grid: { display: false }, ticks: { font: { size: 11 } } },
          y: { grid: { display: false }, ticks: { font: { size: 12 } } }
        },
        animation: { duration: 500 }
      }
    });
  })();
  @endif

  // ── 活動分佈甜甜圈 ──
  @if($byActivity->isNotEmpty())
  (function(){
    var data   = @json($byActivity->values()->map(fn($r) => ['label' => $r['label'], 'hours' => round($r['hours'], 2)]));
    var colors = data.map(function(_,i){ return PALETTE[i % PALETTE.length]; });

    document.querySelectorAll('.activity-dot').forEach(function(dot){
      dot.style.background = PALETTE[parseInt(dot.dataset.idx, 10) % PALETTE.length];
    });

    new Chart(document.getElementById('activityChart').getContext('2d'), {
      type: 'doughnut',
      data: {
        labels: data.map(function(d){ return d.label; }),
        datasets: [{ data: data.map(function(d){ return d.hours; }), backgroundColor: colors, borderWidth: 2, borderColor: '#fff', hoverOffset: 6 }]
      },
      options: {
        cutout: '62%',
        plugins: {
          legend: { display: false },
          tooltip: {
            callbacks: {
              label: function(ctx) {
                var total = ctx.chart.data.datasets[0].data.reduce(function(a,b){ return a+b; }, 0);
                var pct   = total > 0 ? Math.round(ctx.parsed / total * 1000) / 10 : 0;
                return ' ' + ctx.label + ': ' + ctx.parsed + ' h (' + pct + '%)';
              }
            }
          }
        },
        animation: { duration: 600 }
      }
    });
  })();
  @endif
})();
</script>
@endif
@endsection