@extends('layouts.app')
@section('title', '新增議題 - ' . $project->name)

@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.index', $project) }}" class="btn btn-sm btn-outline-secondary">
          <i class="bi bi-arrow-left"></i>
        </a>
        <h5 class="mb-0 fw-bold">新增議題</h5>
      </div>

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

      <div class="card shadow-sm">
        <div class="card-body">
          <form method="POST" action="{{ route('projects.issues.store', $project) }}" enctype="multipart/form-data">
            @csrf

            <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" value="{{ old('title') }}" required autofocus id="title">
            </div>

            @if($versions->isNotEmpty())
            <div class="mb-3">
              <label class="form-label" for="version_id">版本</label>
              <select name="version_id" class="form-select" id="version_id">
                <option value="">— 未指定 —</option>
                @foreach($versions as $ver)
                  <option value="{{ $ver->id }}" {{ old('version_id') == $ver->id ? 'selected' : '' }}>
                    {{ $ver->name }}{{ $ver->due_date ? '（' . $ver->due_date->format('Y-m-d') . '）' : '' }}
                  </option>
                @endforeach
              </select>
            </div>
            @endif

            <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', $contracts->first()?->id) == $c->id ? 'selected' : '' }}>
                    {{ $c->name }}{{ $c->start_date ? '（' . $c->start_date->format('Y/m') . '）' : '' }}
                  </option>
                @endforeach
              </select>
            </div>

            <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','task') === $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','normal') === $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','pending') === $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') == $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') == $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="6" placeholder="詳細描述問題或需求…" id="description">{{ old('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') }}" 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') }}" 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') }}" 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" value="{{ old('estimated_hours') }}" id="estimated_hours">
              </div>
              <div class="col-sm-3">
                <label class="form-label" for="done_ratio">完成度 (%)</label>
                <input type="number" name="done_ratio" class="form-control" min="0" max="100" value="{{ old('done_ratio', 0) }}" id="done_ratio">
              </div>
            </div>

            <div class="mb-3">
              <label class="form-label" for="attachments">附件</label>
              <input type="file" name="attachments[]" class="form-control" id="attachments" multiple
                     accept=".pdf,.doc,.docx,.odt,.jpg,.jpeg,.png">
              <div class="form-text">允許格式：PDF、DOC / DOCX、ODT、JPG、PNG，單檔上限 20 MB</div>
            </div>

            <div class="d-flex gap-2">
              <button type="submit" id="issue-submit-btn" class="btn btn-primary">建立議題</button>
              <a href="{{ route('projects.issues.index', $project) }}" class="btn btn-outline-secondary">取消</a>
            </div>
          </form>
        </div>
      </div>

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

@push('styles')
<link rel="stylesheet" href="/vendor/tom-select/tom-select.bootstrap5.min.css">
<link rel="stylesheet" href="/vendor/flatpickr/flatpickr.min.css">
@endpush

@push('scripts')
<script src="/vendor/tom-select/tom-select.complete.min.js"></script>
<script src="/vendor/flatpickr/flatpickr.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', () => {
  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);
  new TomSelect('#parent_id', {
    plugins: ['clear_button'], maxOptions: null, placeholder: '搜尋母議題…',
  });

  // 防止重複送出：按下後立即 disable 按鈕
  const form = document.querySelector('form');
  const btn  = document.getElementById('issue-submit-btn');
  if (form && btn) {
    form.addEventListener('submit', function () {
      btn.disabled = true;
      btn.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span>送出中…';
    });
  }
});
</script>
@endpush