@php
  $allContracts = $contracts->groupBy('project_id')
      ->map(fn($g) => $g->map(fn($c) => [
          'id'         => $c->id,
          'name'       => $c->name,
          'start_date' => optional($c->start_date)->toDateString(),
          'end_date'   => optional($c->end_date)->toDateString(),
      ])->values());
@endphp

<div class="row g-3">

    {{-- 專案 --}}
    <div class="col-12">
        <label for="sprint_project_id" class="form-label fw-medium">專案 <span class="text-danger">*</span></label>
        <select name="project_id" id="sprint_project_id"
                class="form-select @error('project_id') is-invalid @enderror">
            <option value="">-- 選擇專案 --</option>
            @foreach($projects as $p)
                <option value="{{ $p->id }}"
                    {{ old('project_id', $sprint?->project_id ?? $selectedProjectId) == $p->id ? 'selected' : '' }}>
                    {{ $p->client?->name ? '[' . $p->client->name . '] ' : '' }}{{ $p->name }}
                </option>
            @endforeach
        </select>
        @error('project_id')<div class="invalid-feedback">{{ $message }}</div>@enderror
    </div>

    {{-- 合約（選專案後才顯示） --}}
    <div class="col-12" id="contract_row" style="{{ old('project_id', $sprint?->project_id ?? $selectedProjectId) ? '' : 'display:none' }}">
        <label for="sprint_contract_id" class="form-label fw-medium">對應合約</label>
        <select name="contract_id" id="sprint_contract_id"
                class="form-select @error('contract_id') is-invalid @enderror">
            <option value="">-- 不指定合約 --</option>
            @foreach($contracts->where('project_id', old('project_id', $sprint?->project_id ?? $selectedProjectId)) as $c)
                <option value="{{ $c->id }}"
                    {{ old('contract_id', $sprint?->contract_id) == $c->id ? 'selected' : '' }}>
                    {{ $c->name }}
                </option>
            @endforeach
        </select>
        @error('contract_id')<div class="invalid-feedback">{{ $message }}</div>@enderror
        <div class="form-text">選擇合約後自動帶入藍圖名稱與起訖日期</div>
    </div>

    {{-- Sprint 名稱 --}}
    <div class="col-12">
        <label for="sprint_name" class="form-label fw-medium">藍圖名稱 <span class="text-danger">*</span></label>
        <input type="text" name="name" id="sprint_name"
               class="form-control @error('name') is-invalid @enderror"
               value="{{ old('name', $sprint?->name) }}"
               placeholder="選擇合約後自動帶入，或自行填寫">
        @error('name')<div class="invalid-feedback">{{ $message }}</div>@enderror
    </div>

    {{-- 起訖日期 --}}
    <div class="col-md-6">
        <label for="sprint_start_date" class="form-label fw-medium">開始日期 <span class="text-danger">*</span></label>
        <input type="date" name="start_date" id="sprint_start_date"
               class="form-control @error('start_date') is-invalid @enderror"
               value="{{ old('start_date', $sprint?->start_date?->toDateString()) }}">
        @error('start_date')<div class="invalid-feedback">{{ $message }}</div>@enderror
    </div>

    <div class="col-md-6">
        <label for="sprint_end_date" class="form-label fw-medium">結束日期 <span class="text-danger">*</span></label>
        <input type="date" name="end_date" id="sprint_end_date"
               class="form-control @error('end_date') is-invalid @enderror"
               value="{{ old('end_date', $sprint?->end_date?->toDateString()) }}">
        @error('end_date')<div class="invalid-feedback">{{ $message }}</div>@enderror
    </div>

    {{-- 狀態 --}}
    <div class="col-md-6">
        <label for="sprint_status" class="form-label fw-medium">狀態 <span class="text-danger">*</span></label>
        <select name="status" id="sprint_status"
                class="form-select @error('status') is-invalid @enderror">
            @foreach(['planning'=>'規劃中','active'=>'進行中','completed'=>'已完成','cancelled'=>'已取消'] as $val => $lbl)
                <option value="{{ $val }}" {{ old('status', $sprint?->status ?? 'planning') === $val ? 'selected' : '' }}>
                    {{ $lbl }}
                </option>
            @endforeach
        </select>
        @error('status')<div class="invalid-feedback">{{ $message }}</div>@enderror
    </div>

    {{-- 目標 --}}
    <div class="col-12">
        <label for="sprint_goal" class="form-label fw-medium">目標說明</label>
        <textarea name="goal" id="sprint_goal"
                  class="form-control @error('goal') is-invalid @enderror"
                  rows="3" placeholder="描述此藍圖要達成的目標…">{{ old('goal', $sprint?->goal) }}</textarea>
        @error('goal')<div class="invalid-feedback">{{ $message }}</div>@enderror
    </div>

</div>

@push('scripts')
<script>
(function () {
    const projectSel  = document.getElementById('sprint_project_id');
    const contractSel = document.getElementById('sprint_contract_id');
    const contractRow = document.getElementById('contract_row');
    const nameInput   = document.getElementById('sprint_name');
    const startInput  = document.getElementById('sprint_start_date');
    const endInput    = document.getElementById('sprint_end_date');

    const allContracts = {!! json_encode($allContracts) !!};

    function refreshContracts(projectId, keepContractId) {
        const list = allContracts[projectId] ?? [];

        contractSel.innerHTML = '<option value="">-- 不指定合約 --</option>';
        list.forEach(c => {
            const opt = document.createElement('option');
            opt.value = c.id;
            opt.textContent = c.name;
            opt.dataset.start = c.start_date ?? '';
            opt.dataset.end   = c.end_date ?? '';
            if (keepContractId && String(c.id) === String(keepContractId)) opt.selected = true;
            contractSel.appendChild(opt);
        });

        contractRow.style.display = list.length ? '' : 'none';
    }

    function applyContract() {
        const opt = contractSel.options[contractSel.selectedIndex];
        if (!opt || !opt.value) return;

        // 帶入藍圖名稱（僅在空白時自動填）
        if (!nameInput.value.trim()) {
            nameInput.value = opt.textContent.trim();
        }
        // 帶入日期（僅在空白時自動填）
        if (!startInput.value && opt.dataset.start) startInput.value = opt.dataset.start;
        if (!endInput.value   && opt.dataset.end)   endInput.value   = opt.dataset.end;
    }

    // 切換專案 → 重整合約清單
    projectSel.addEventListener('change', function () {
        refreshContracts(this.value, null);
        nameInput.value  = '';
        startInput.value = '';
        endInput.value   = '';
    });

    // 切換合約 → 帶入名稱與日期
    contractSel.addEventListener('change', applyContract);

    // 頁面載入時，若已有選定的專案 → 確保 option data 齊全
    if (projectSel.value) {
        const keepContract = contractSel.value;
        refreshContracts(projectSel.value, keepContract);
    }
})();
</script>
@endpush