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

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

<div class="container-fluid px-4 py-4">
  <div class="row justify-content-center">
    <div class="col-lg-9">

      <div class="d-flex align-items-center gap-2 mb-4">
        <a href="{{ route('projects.issues.show', [$project, $issue]) }}" class="btn btn-sm btn-outline-secondary">
          <i class="bi bi-arrow-left"></i>
        </a>
        <h5 class="mb-0 fw-bold">編輯議題 <span class="text-muted">#{{ $issue->redmine_id }}</span></h5>
      </div>

      @if($errors->any())
        <div class="alert alert-danger">{{ $errors->first() }}</div>
      @endif

      <div class="card shadow-sm">
        <div class="card-body">
          <form id="issueEditForm" method="POST" action="{{ route('projects.issues.update', [$project, $issue]) }}">
            @csrf @method('PUT')

            <div class="mb-3">
              <label class="form-label fw-semibold" for="title">標題 <span class="text-danger">*</span></label>
              <input type="text" name="title" class="form-control" id="title" value="{{ old('title', $issue->title) }}" required autofocus>
            </div>

            @if($contracts->isNotEmpty())
            <div class="mb-3">
              <label class="form-label" 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 }}" {{ old('contract_id', $issue->contract_id) == $c->id ? 'selected' : '' }}>
                    {{ $c->name }}{{ $c->start_date ? '（' . $c->start_date->format('Y/m') . '）' : '' }}
                  </option>
                @endforeach
              </select>
            </div>
            @endif

            <div class="row g-3 mb-3">
              <div class="col-sm-4">
                <label class="form-label" for="tracker">類型</label>
                <select name="tracker" class="form-select" id="tracker">
                  @foreach($trackers as $k => $t)
                    <option value="{{ $k }}" {{ old('tracker', $issue->tracker) === $k ? 'selected' : '' }}>{{ $t['label'] }}</option>
                  @endforeach
                </select>
              </div>
              <div class="col-sm-4">
                <label class="form-label" for="priority">優先度</label>
                <select name="priority" class="form-select" id="priority">
                  @foreach($priorities as $k => $p)
                    <option value="{{ $k }}" {{ old('priority', $issue->priority) === $k ? 'selected' : '' }}>{{ $p['label'] }}</option>
                  @endforeach
                </select>
              </div>
              <div class="col-sm-4">
                <label class="form-label" for="status">狀態</label>
                <select name="status" class="form-select" id="status">
                  @foreach($statuses as $k => $s)
                    <option value="{{ $k }}" {{ old('status', $issue->status) === $k ? 'selected' : '' }}>{{ $s['label'] }}</option>
                  @endforeach
                </select>
              </div>
            </div>

            <div class="mb-3">
              <label class="form-label" for="assigned_to_id">負責人</label>
              <select name="assigned_to_id" class="form-select" id="assigned_to_id">
                <option value="">（未指派）</option>
                @foreach($allUsers as $u)
                  <option value="{{ $u->id }}" {{ old('assigned_to_id', $issue->assigned_to_id) == $u->id ? 'selected' : '' }}>{{ $u->name }}</option>
                @endforeach
              </select>
            </div>

            <div class="mb-3">
              <label class="form-label" for="parent_id">母議題</label>
              <select name="parent_id" class="form-select" id="parent_id">
                <option value=""></option>
                @foreach($allIssues as $i)
                  <option value="{{ $i->id }}" {{ old('parent_id', $issue->parent_id) == $i->id ? 'selected' : '' }}>#{{ $i->id }} {{ Str::limit($i->title, 50) }}</option>
                @endforeach
              </select>
            </div>

            <div class="mb-3">
              <label class="form-label" for="description">描述</label>
              <textarea name="description" class="form-control" rows="8" id="description">{{ old('description', $issue->description) }}</textarea>
            </div>

            <div class="row g-3 mb-3">
              <div class="col-sm-2">
                <label class="form-label" for="start_date">開始日期</label>
                <input type="text" name="start_date" id="start_date" class="form-control form-control-sm"
                       value="{{ old('start_date', $issue->start_date?->format('Y-m-d H:i')) }}"
                       placeholder="年-月-日 時:分" autocomplete="off">
              </div>
              <div class="col-sm-2">
                <label class="form-label" for="due_date">到期日</label>
                <input type="text" name="due_date" id="due_date" class="form-control form-control-sm"
                       value="{{ old('due_date', $issue->due_date?->format('Y-m-d H:i')) }}"
                       placeholder="年-月-日 時:分" autocomplete="off">
              </div>
              <div class="col-sm-2">
                <label class="form-label" for="completed_on">完成日</label>
                <input type="text" name="completed_on" id="completed_on" class="form-control form-control-sm"
                       value="{{ old('completed_on', $issue->completed_on?->format('Y-m-d H:i')) }}"
                       placeholder="年-月-日 時:分" autocomplete="off">
              </div>
              <div class="col-sm-3">
                <label class="form-label" for="estimated_hours">預估工時（小時）</label>
                <input type="number" name="estimated_hours" class="form-control" step="0.5" min="0" id="estimated_hours" value="{{ old('estimated_hours', $issue->estimated_hours) }}">
              </div>
              <div class="col-sm-3">
                <label class="form-label" for="doneRatioInput">完成度 (%)</label>
                <div class="input-group">
                  <input type="number" name="done_ratio" class="form-control" min="0" max="100"
                         value="{{ old('done_ratio', $issue->done_ratio) }}"
                         id="doneRatioInput">
                  <span class="input-group-text">%</span>
                </div>
              </div>
            </div>

            <div class="d-flex gap-2 align-items-center">
              <button type="submit" id="issueSubmitBtn" class="btn btn-primary" disabled title="尚未異動任何欄位">儲存</button>
              <a href="{{ route('projects.issues.show', [$project, $issue]) }}" class="btn btn-outline-secondary">取消</a>
              <span id="issueNoChangeHint" class="text-muted small ms-1">（尚未異動任何欄位）</span>
            </div>
          </form>
        </div>
      </div>

    </div>
  </div>
</div>
@endsection

@push('styles')
<link rel="stylesheet" href="/vendor/select2/css/select2.min.css">
<link rel="stylesheet" href="/vendor/select2/css/select2-bootstrap-5-theme.min.css">
<link rel="stylesheet" href="/vendor/flatpickr/flatpickr.min.css">
@endpush

@push('scripts')
<script src="/vendor/select2/js/select2.min.js"></script>
<script src="/vendor/flatpickr/flatpickr.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
  const fpConfig = { enableTime: true, time_24hr: true, dateFormat: 'Y-m-d H:i', minuteIncrement: 5, allowInput: true };
  flatpickr('#start_date',   fpConfig);
  flatpickr('#due_date',     fpConfig);
  flatpickr('#completed_on', fpConfig);
  const form = document.getElementById('issueEditForm');
  const btn  = document.getElementById('issueSubmitBtn');
  const hint = document.getElementById('issueNoChangeHint');

  @if($errors->any())
  btn.disabled = false;
  hint.style.display = 'none';
  @endif

  function enableSubmit() {
    btn.disabled = false;
    hint.style.display = 'none';
  }

  // 先掛事件，再初始化第三方套件，確保任何情況都不會中斷
  form.addEventListener('input',  enableSubmit);
  form.addEventListener('change', enableSubmit);

  // 母議題搜尋：用 Select2（已存在於 vendor）
  $('#parent_id').select2({
    theme: 'bootstrap-5',
    placeholder: '搜尋母議題…',
    allowClear: true,
    width: '100%',
  }).on('change', enableSubmit);

  form.addEventListener('submit', function () {
    btn.disabled = true;
    btn.innerHTML = '<span class="spinner-border spinner-border-sm me-1" role="status"></span>儲存中…';
    hint.style.display = 'none';
  });
});
</script>
@endpush