@extends('layouts.app')
@section('title', isset($version) ? '編輯版本' : '新增版本')

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

<div class="container py-4" style="max-width:680px;">
  <h5 class="fw-bold mb-4">
    <i class="bi bi-tag me-2 text-primary"></i>
    {{ isset($version) ? '編輯版本：' . $version->name : '新增版本' }}
  </h5>

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

  <form method="POST"
        action="{{ isset($version)
          ? route('projects.versions.update', [$project, $version])
          : route('projects.versions.store', $project) }}">
    @csrf
    @if (isset($version)) @method('PUT') @endif

    <div class="card shadow-sm mb-4">
      <div class="card-body">

        {{-- 對應合約（若有） --}}
        @if(isset($contracts) && $contracts->isNotEmpty())
        <div class="mb-3">
          <label class="form-label fw-semibold" for="contract_id">對應合約</label>
          <select name="contract_id" class="form-select" id="contract_id">
            <option value="">— 不指定合約 —</option>
            @foreach($contracts as $c)
              <option value="{{ $c->id }}"
                      data-start="{{ $c->start_date?->format('Y-m-d') ?? '' }}"
                      data-end="{{ $c->end_date?->format('Y-m-d') ?? '' }}"
                      {{ old('contract_id', $version->contract_id ?? '') == $c->id ? 'selected' : '' }}>
                {{ $c->name }}
                @if($c->start_date) （{{ $c->start_date->format('Y-m-d') }}）@endif
              </option>
            @endforeach
          </select>
          <div class="form-text">選擇合約後可自動帶入版本名稱與完成日</div>
        </div>
        @endif

        <div class="mb-3">
          <label class="form-label fw-semibold">版本名稱 <span class="text-danger">*</span></label>
          <input type="text" name="name" id="version_name" class="form-control" required maxlength="100"
                 value="{{ old('name', $version->name ?? '') }}" placeholder="例：第一期、v1.0、2026年度維護">
        </div>

        <div class="mb-3">
          <label class="form-label fw-semibold" for="description">描述</label>
          <textarea name="description" class="form-control" rows="3" placeholder="版本說明（選填）" id="description">{{ old('description', $version->description ?? '') }}</textarea>
        </div>

        <div class="row g-3">
          <div class="col-md-6">
            <label class="form-label fw-semibold">目標完成日</label>
            <input type="date" name="due_date" id="version_due_date" class="form-control"
                   value="{{ old('due_date', isset($version) ? $version->due_date?->format('Y-m-d') : '') }}">
          </div>
          <div class="col-md-6">
            <label class="form-label fw-semibold" for="status">狀態</label>
            <select name="status" class="form-select" id="status">
              @foreach (['open'=>'開放','locked'=>'鎖定','closed'=>'關閉'] as $val => $label)
                <option value="{{ $val }}" {{ old('status', $version->status ?? 'open') === $val ? 'selected' : '' }}>{{ $label }}</option>
              @endforeach
            </select>
          </div>
        </div>
      </div>
    </div>

    {{-- 繼承（僅新增時顯示） --}}
    @if (!isset($version) && $existingVersions->isNotEmpty())
    <div class="card shadow-sm mb-4" id="inheritCard">
      <div class="card-header py-2 d-flex align-items-center gap-2">
        <i class="bi bi-arrow-repeat text-primary"></i>
        <span class="fw-semibold">從現有版本繼承（延續案）</span>
        <span class="text-muted small ms-1">— 選填</span>
      </div>
      <div class="card-body">
        <div class="mb-3">
          <label class="form-label">來源版本</label>
          <select name="inherit_from" class="form-select" id="inheritFrom">
            <option value="">— 不繼承 —</option>
            @foreach ($existingVersions as $ev)
              <option value="{{ $ev->id }}" {{ old('inherit_from') == $ev->id ? 'selected' : '' }}>
                {{ $ev->name }}
                @if ($ev->due_date) （{{ $ev->due_date->format('Y-m-d') }}）@endif
              </option>
            @endforeach
          </select>
        </div>

        <div id="inheritOptions" class="{{ old('inherit_from') ? '' : 'd-none' }}">
          <div class="d-flex flex-column gap-2">
            <div class="form-check">
              <input class="form-check-input" type="checkbox" name="inherit_issues" value="1" id="chkIssues" {{ old('inherit_issues', '1') ? 'checked' : '' }}>
              <label class="form-check-label" for="chkIssues">
                <i class="bi bi-bug me-1 text-danger"></i>複製未完成議題
                <span class="text-muted small">（狀態重設為「待處理」）</span>
              </label>
            </div>
            <div class="form-check text-muted">
              <input class="form-check-input" type="checkbox" disabled checked>
              <label class="form-check-label">
                <i class="bi bi-file-earmark-text me-1"></i>文件 / Wiki
                <span class="small">（以版本標籤管理，可在文件頁面指定版本）</span>
              </label>
            </div>
            <div class="form-check text-muted">
              <input class="form-check-input" type="checkbox" disabled checked>
              <label class="form-check-label">
                <i class="bi bi-people me-1"></i>成員
                <span class="small">（已共用，無需複製）</span>
              </label>
            </div>
          </div>
        </div>
      </div>
    </div>
    @endif

    {{-- 版本成員 --}}
    @if($projectMembers->isNotEmpty())
    <div class="card shadow-sm mb-4">
      <div class="card-header py-2 d-flex align-items-center gap-2">
        <i class="bi bi-people text-primary"></i>
        <span class="fw-semibold">版本成員限制</span>
        <span class="text-muted small ms-1">— 選填</span>
      </div>
      <div class="card-body">
        <p class="text-muted small mb-3">
          勾選的成員只能看到此版本的議題與文件，未勾選（或完全不設定）則沿用專案層級的存取權限。
        </p>
        <div class="row g-2">
          @foreach($projectMembers as $m)
          <div class="col-md-4 col-sm-6">
            <div class="form-check">
              <input class="form-check-input" type="checkbox"
                     name="members[]" value="{{ $m->id }}"
                     id="member_{{ $m->id }}"
                     {{ in_array($m->id, old('members', $versionMemberIds ?? [])) ? 'checked' : '' }}>
              <label class="form-check-label" for="member_{{ $m->id }}">{{ $m->name }}</label>
            </div>
          </div>
          @endforeach
        </div>
        <div class="mt-2">
          <button type="button" class="btn btn-link btn-sm p-0 text-muted"
                  onclick="document.querySelectorAll('[name=\'members[]\']').forEach(c=>c.checked=true)">全選</button>
          <span class="text-muted mx-1">·</span>
          <button type="button" class="btn btn-link btn-sm p-0 text-muted"
                  onclick="document.querySelectorAll('[name=\'members[]\']').forEach(c=>c.checked=false)">清除</button>
        </div>
      </div>
    </div>
    @endif

    <div class="d-flex gap-2">
      <button type="submit" class="btn btn-primary">
        <i class="bi bi-check-lg me-1"></i>{{ isset($version) ? '儲存變更' : '建立版本' }}
      </button>
      <a href="{{ route('projects.roadmap', $project) }}" class="btn btn-outline-secondary">取消</a>
    </div>
  </form>
</div>

@push('scripts')
<script>
  document.getElementById('inheritFrom')?.addEventListener('change', function () {
    document.getElementById('inheritOptions').classList.toggle('d-none', !this.value);
  });

  const contractSel = document.getElementById('contract_id');
  if (contractSel) {
    contractSel.addEventListener('change', function () {
      const opt = this.options[this.selectedIndex];
      if (!opt || !opt.value) return;
      const nameEl    = document.getElementById('version_name');
      const dueDateEl = document.getElementById('version_due_date');
      if (nameEl && !nameEl.value.trim()) {
        nameEl.value = opt.textContent.replace(/（.*）/, '').trim();
      }
      if (dueDateEl && !dueDateEl.value && opt.dataset.end) {
        dueDateEl.value = opt.dataset.end;
      }
    });
  }
</script>
@endpush
@endsection