@extends('layouts.app')
@section('title', '工時評估 — ' . $project->name)

@section('content')
@include('projects._nav', ['project' => $project])

@php
  $fmtDays = fn ($v) => $v === null ? null : rtrim(rtrim(number_format((float) $v, 1), '0'), '.');
  $showEdit = $errors->any();
@endphp

<div class="container-fluid px-4 py-4" style="max-width:1200px;">
  <div class="d-flex justify-content-between align-items-center mb-4">
    <div class="d-flex align-items-center gap-3">
      <h5 class="mb-0 fw-bold"><i class="bi bi-calculator me-2 text-primary"></i>工時評估</h5>
      @if($activeContract)
        <span class="badge bg-primary-subtle text-primary border border-primary-subtle">
          <i class="bi bi-file-earmark-text me-1"></i>{{ $activeContract->name }}
        </span>
      @else
        <span class="badge bg-secondary-subtle text-secondary border border-secondary-subtle">全部合約（未篩選）</span>
      @endif
    </div>
    <button type="button" class="btn btn-primary btn-sm" id="enterEditBtn">
      <i class="bi bi-pencil me-1"></i>編輯
    </button>
  </div>

  @if(!$activeContractId && $contracts->count() > 1)
    <div class="alert alert-warning py-2 px-3 small mb-3">
      <i class="bi bi-info-circle me-1"></i>
      此專案有多個合約，請從右上角切換合約後，再為各合約分別填寫工時評估。
    </div>
  @endif

  @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

  @if ($errors->any())
    <div class="alert alert-danger">
      <ul class="mb-0">@foreach ($errors->all() as $e)<li>{{ $e }}</li>@endforeach</ul>
    </div>
  @endif

  {{-- ══════════ 檢視模式 ══════════ --}}
  <div id="viewModeBlock" style="{{ $showEdit ? 'display:none;' : '' }}">

    @if (!$hasSavedCategories)
      <div class="text-center text-muted py-5">
        <i class="bi bi-calculator fs-1 d-block mb-3 opacity-25"></i>
        @if($activeContract)
          尚未設定「{{ $activeContract->name }}」的工時評估。
        @else
          尚未設定工時評估。
        @endif
        <a href="#" class="d-block mt-2" id="startSetupLink">開始設定</a>
      </div>
    @else
      @foreach ($categories as $cat)
      <div class="card shadow-sm mb-3">
        <div class="card-header d-flex align-items-center gap-2 py-2">
          <span class="fw-semibold">{{ $cat->name }}</span>
          <span class="text-muted small ms-auto">小計 {{ $fmtDays($cat->estimations->sum('estimated_man_days')) ?? 0 }} 天</span>
        </div>
        <div class="card-body">
          @if ($cat->estimations->isEmpty())
            <p class="text-muted small mb-0">此分類尚無項目。</p>
          @else
          <div class="table-responsive">
            <table class="table table-sm align-middle mb-0">
              <thead>
                <tr>
                  <th style="width:50px;">項次</th>
                  <th>功能</th>
                  <th>描述</th>
                  <th>評估人天</th>
                  <th>評估者</th>
                  <th>風險高低</th>
                  <th>備註</th>
                </tr>
              </thead>
              <tbody>
                @foreach ($cat->estimations as $ii => $item)
                <tr>
                  <td class="text-muted small">{{ $ii + 1 }}</td>
                  <td>{{ $item->function }}</td>
                  <td class="text-muted small">{{ $item->description ?: '—' }}</td>
                  <td>{{ $fmtDays($item->estimated_man_days) ?? '—' }}</td>
                  <td>{{ $item->estimator?->name ?? '—' }}</td>
                  <td>
                    @if ($item->risk_level)
                      <span class="badge bg-{{ $item->risk_level === '高' ? 'danger' : ($item->risk_level === '中' ? 'warning' : 'success') }}">{{ $item->risk_level }}</span>
                    @else
                      <span class="text-muted">—</span>
                    @endif
                  </td>
                  <td class="text-muted small">{{ $item->notes ?: '—' }}</td>
                </tr>
                @endforeach
              </tbody>
            </table>
          </div>
          @endif
        </div>
      </div>
      @endforeach
      <div class="text-muted mb-3">合計評估人天：<strong>{{ $fmtDays($categories->flatMap->estimations->sum('estimated_man_days')) ?? 0 }}</strong> 天</div>
    @endif
  </div>

  {{-- ══════════ 編輯／新增模式 ══════════ --}}
  <div id="editModeBlock" style="{{ $showEdit ? '' : 'display:none;' }}">
  <form method="POST" action="{{ route('projects.estimations.update', $project) }}">
    @csrf
    @method('PUT')

    <div id="categoriesContainer">
      @foreach ($categories as $ci => $cat)
      <div class="card shadow-sm mb-3 category-block" data-cat-idx="{{ $ci }}" data-item-idx="{{ $cat->estimations->count() }}">
        <div class="card-header d-flex align-items-center gap-2 py-2">
          <input type="hidden" name="categories[{{ $ci }}][id]" value="{{ $cat->id }}">
          <input type="text" name="categories[{{ $ci }}][name]" class="form-control form-control-sm fw-semibold cat-name-input"
                 style="max-width:220px;" required maxlength="100"
                 value="{{ old("categories.$ci.name", $cat->name) }}">
          <span class="text-muted small ms-auto cat-subtotal">小計 0 天</span>
          <button type="button" class="btn btn-sm btn-outline-danger remove-category-btn" title="移除此分類">×</button>
        </div>
        <div class="card-body">
          <div class="table-responsive">
            <table class="table table-sm align-middle mb-0 item-table">
              <thead>
                <tr>
                  <th style="width:50px;">項次</th>
                  <th style="width:15%;">功能</th>
                  <th style="width:20%;">描述</th>
                  <th style="width:9%;">評估人天</th>
                  <th style="width:13%;">評估者</th>
                  <th style="width:8%;">風險高低</th>
                  <th style="width:15%;">備註</th>
                  <th style="width:40px;"></th>
                </tr>
              </thead>
              <tbody>
                @foreach ($cat->estimations as $ii => $item)
                <tr class="item-row">
                  <td class="text-muted small seq-no">{{ $ii + 1 }}</td>
                  <td>
                    <input type="hidden" name="categories[{{ $ci }}][items][{{ $ii }}][id]" value="{{ $item->id }}">
                    <input type="text" name="categories[{{ $ci }}][items][{{ $ii }}][function]" class="form-control form-control-sm" required maxlength="150"
                           value="{{ old("categories.$ci.items.$ii.function", $item->function) }}">
                  </td>
                  <td>
                    <input type="text" name="categories[{{ $ci }}][items][{{ $ii }}][description]" class="form-control form-control-sm"
                           value="{{ old("categories.$ci.items.$ii.description", $item->description) }}">
                  </td>
                  <td>
                    <input type="number" name="categories[{{ $ci }}][items][{{ $ii }}][estimated_man_days]" class="form-control form-control-sm man-days-input"
                           min="0" max="9999" step="0.5" placeholder="未設定"
                           value="{{ old("categories.$ci.items.$ii.estimated_man_days", $item->estimated_man_days) }}">
                  </td>
                  <td>
                    <select name="categories[{{ $ci }}][items][{{ $ii }}][estimator_id]" class="form-select form-select-sm">
                      <option value="">— 未指定 —</option>
                      @foreach ($users as $u)
                        <option value="{{ $u->id }}" {{ (int) old("categories.$ci.items.$ii.estimator_id", $item->estimator_id) === $u->id ? 'selected' : '' }}>{{ $u->name }}</option>
                      @endforeach
                    </select>
                  </td>
                  <td>
                    <select name="categories[{{ $ci }}][items][{{ $ii }}][risk_level]" class="form-select form-select-sm">
                      <option value="">—</option>
                      @foreach (['高', '中', '低'] as $r)
                        <option value="{{ $r }}" {{ old("categories.$ci.items.$ii.risk_level", $item->risk_level) === $r ? 'selected' : '' }}>{{ $r }}</option>
                      @endforeach
                    </select>
                  </td>
                  <td>
                    <input type="text" name="categories[{{ $ci }}][items][{{ $ii }}][notes]" class="form-control form-control-sm"
                           value="{{ old("categories.$ci.items.$ii.notes", $item->notes) }}">
                  </td>
                  <td class="text-end">
                    <button type="button" class="btn btn-sm btn-outline-danger remove-row-btn" title="移除此項目">×</button>
                  </td>
                </tr>
                @endforeach
              </tbody>
            </table>
          </div>
          <button type="button" class="btn btn-sm btn-outline-primary mt-2 add-item-btn">
            <i class="bi bi-plus-lg me-1"></i>新增項目
          </button>
        </div>
      </div>
      @endforeach
    </div>

    <button type="button" class="btn btn-outline-primary mb-3" id="addCategoryBtn">
      <i class="bi bi-plus-lg me-1"></i>新增分類
    </button>

    <div class="d-flex align-items-center gap-3 mb-3">
      <span class="text-muted">合計評估人天：<strong id="totalManDays">0</strong> 天</span>
    </div>

    <div class="d-flex gap-2">
      <button type="submit" class="btn btn-primary">
        <i class="bi bi-check-lg me-1"></i>儲存
      </button>
      <a href="{{ route('projects.estimations.index', $project) }}" class="btn btn-outline-secondary">取消</a>
    </div>
  </form>
  </div>
</div>

@push('scripts')
<script>
(function () {
  const enterEditBtn = document.getElementById('enterEditBtn');
  const startSetupLink = document.getElementById('startSetupLink');
  const viewBlock = document.getElementById('viewModeBlock');
  const editBlock = document.getElementById('editModeBlock');

  function enterEdit(e) {
    if (e) e.preventDefault();
    viewBlock.style.display = 'none';
    editBlock.style.display = '';
  }
  enterEditBtn?.addEventListener('click', enterEdit);
  startSetupLink?.addEventListener('click', enterEdit);

  const container   = document.getElementById('categoriesContainer');
  const addCatBtn    = document.getElementById('addCategoryBtn');
  const totalEl      = document.getElementById('totalManDays');
  let catIdx = document.querySelectorAll('.category-block').length;

  const userOptions = @json($users->map(fn ($u) => ['value' => $u->id, 'text' => $u->name])->values());
  const riskOptions = ['高', '中', '低'];

  function itemRowTemplate(ci, ii) {
    const uOpts = userOptions.map(o => `<option value="${o.value}">${o.text}</option>`).join('');
    const rOpts = riskOptions.map(r => `<option value="${r}">${r}</option>`).join('');
    return `<tr class="item-row">
      <td class="text-muted small seq-no"></td>
      <td>
        <input type="hidden" name="categories[${ci}][items][${ii}][id]" value="">
        <input type="text" name="categories[${ci}][items][${ii}][function]" class="form-control form-control-sm" maxlength="150">
      </td>
      <td><input type="text" name="categories[${ci}][items][${ii}][description]" class="form-control form-control-sm"></td>
      <td><input type="number" name="categories[${ci}][items][${ii}][estimated_man_days]" class="form-control form-control-sm man-days-input" min="0" max="9999" step="0.5" placeholder="未設定"></td>
      <td><select name="categories[${ci}][items][${ii}][estimator_id]" class="form-select form-select-sm"><option value="">— 未指定 —</option>${uOpts}</select></td>
      <td><select name="categories[${ci}][items][${ii}][risk_level]" class="form-select form-select-sm"><option value="">—</option>${rOpts}</select></td>
      <td><input type="text" name="categories[${ci}][items][${ii}][notes]" class="form-control form-control-sm"></td>
      <td class="text-end"><button type="button" class="btn btn-sm btn-outline-danger remove-row-btn" title="移除此項目">×</button></td>
    </tr>`;
  }

  function categoryTemplate(ci) {
    return `<div class="card shadow-sm mb-3 category-block" data-cat-idx="${ci}" data-item-idx="0">
      <div class="card-header d-flex align-items-center gap-2 py-2">
        <input type="hidden" name="categories[${ci}][id]" value="">
        <input type="text" name="categories[${ci}][name]" class="form-control form-control-sm fw-semibold cat-name-input" style="max-width:220px;" required maxlength="100" placeholder="分類名稱">
        <span class="text-muted small ms-auto cat-subtotal">小計 0 天</span>
        <button type="button" class="btn btn-sm btn-outline-danger remove-category-btn" title="移除此分類">×</button>
      </div>
      <div class="card-body">
        <div class="table-responsive">
          <table class="table table-sm align-middle mb-0 item-table">
            <thead>
              <tr>
                <th style="width:50px;">項次</th>
                <th style="width:15%;">功能</th>
                <th style="width:20%;">描述</th>
                <th style="width:9%;">評估人天</th>
                <th style="width:13%;">評估者</th>
                <th style="width:8%;">風險高低</th>
                <th style="width:15%;">備註</th>
                <th style="width:40px;"></th>
              </tr>
            </thead>
            <tbody></tbody>
          </table>
        </div>
        <button type="button" class="btn btn-sm btn-outline-primary mt-2 add-item-btn">
          <i class="bi bi-plus-lg me-1"></i>新增項目
        </button>
      </div>
    </div>`;
  }

  function renumberSeq(block) {
    block.querySelectorAll('tbody .item-row').forEach((row, i) => {
      row.querySelector('.seq-no').textContent = i + 1;
    });
  }

  function recalcTotal() {
    let grand = 0;
    document.querySelectorAll('.category-block').forEach(function (block) {
      let sub = 0;
      block.querySelectorAll('.man-days-input').forEach(function (input) {
        const v = parseFloat(input.value);
        if (!isNaN(v)) sub += v;
      });
      block.querySelector('.cat-subtotal').textContent = '小計 ' + (sub % 1 === 0 ? sub.toFixed(0) : sub.toFixed(1)) + ' 天';
      grand += sub;
    });
    totalEl.textContent = grand % 1 === 0 ? grand.toFixed(0) : grand.toFixed(1);
  }

  addCatBtn.addEventListener('click', function () {
    container.insertAdjacentHTML('beforeend', categoryTemplate(catIdx++));
    recalcTotal();
  });

  container.addEventListener('click', function (e) {
    if (e.target.closest('.add-item-btn')) {
      const block = e.target.closest('.category-block');
      const ci = block.dataset.catIdx;
      let ii = parseInt(block.dataset.itemIdx, 10);
      block.querySelector('tbody').insertAdjacentHTML('beforeend', itemRowTemplate(ci, ii));
      block.dataset.itemIdx = ii + 1;
      renumberSeq(block);
      recalcTotal();
      return;
    }
    if (e.target.closest('.remove-row-btn')) {
      const block = e.target.closest('.category-block');
      e.target.closest('tr').remove();
      renumberSeq(block);
      recalcTotal();
      return;
    }
    if (e.target.closest('.remove-category-btn')) {
      e.target.closest('.category-block').remove();
      recalcTotal();
      return;
    }
  });

  container.addEventListener('input', function (e) {
    if (e.target.matches('.man-days-input')) recalcTotal();
  });

  recalcTotal();
})();
</script>
@endpush
@endsection