@extends('layouts.app')

@section('title', '工時填寫')

@push('styles')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.5.1/css/all.min.css">
<style>
/* 週/日 選擇器 */
.week-select-group { width: 300px; }
.day-select-group  { width: 200px; }

/* 工時記錄列 */
.time-record-item { transition: background-color 0.15s; }
.time-record-item:last-child { border-bottom: none !important; }
.time-record-header { transition: background-color 0.15s; cursor: default; }
.time-record-header:hover { background-color: rgba(13,110,253,.05); }

/* 工時輸入框 */
.hours-input-wrapper { width: 100px; }

/* 展開箭頭動畫 */
.collapse-toggle-btn .fa-chevron-down { transition: transform 0.2s; }
.collapse-toggle-btn[aria-expanded="true"] .fa-chevron-down { transform: rotate(180deg); }

/* 展開區塊 */
.collapse-content {
    padding: 0 1.25rem 1rem;
    background-color: #fafbfc;
}
[data-bs-theme="dark"] .collapse-content { background: #2b2d30; }

/* 展開欄位對齊 */
.collapse-col-labels {
    display: flex; flex-direction: column; gap: .5rem; min-height: 4.5rem;
}
.collapse-col-bordered {
    border-right: 1px solid #dee2e6;
}
[data-bs-theme="dark"] .collapse-col-bordered { border-right-color: #444; }
.billable-select { width: 70px; }

/* pulse 動畫 */
@keyframes pulse {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.05); }
    100% { transform: scale(1); }
}
.pulse { animation: pulse 0.3s ease-in-out; }
</style>
@endpush

@section('content')
@php
    $srcIssue     = (bool) \App\Models\SystemSetting::get('time_source_issue',   false);
    $srcApi       = (bool) \App\Models\SystemSetting::get('time_source_api',     false);
    $srcBoard     = (bool) \App\Models\SystemSetting::get('time_source_board',   false);
    $srcProject   = (bool) \App\Models\SystemSetting::get('time_source_project', false);
    $srcCount     = 1 + ($srcIssue ? 1 : 0) + ($srcApi ? 1 : 0) + ($srcBoard ? 1 : 0) + ($srcProject ? 1 : 0);
    $srcCountText = ['', '一', '二', '三', '四'][$srcCount] ?? (string)$srcCount;
@endphp
<div class="container py-4">

    <meta name="time-records-show-url" content="{{ route('time-records.show') }}">

    {{-- 頂部：返回 + 選擇器 --}}
    <div class="row mb-4 align-items-center">
        <div class="col-auto">
            <a href="{{ route('time-records.index') }}" class="btn btn-sm btn-outline-secondary">
                <i class="fas fa-arrow-left me-1"></i>返回
            </a>
        </div>
        <div class="col-auto ms-auto">
            <form method="GET" id="date-filter-form" class="d-flex gap-2 align-items-center">
                <div class="input-group input-group-sm week-select-group">
                    <span class="input-group-text bg-light border-end-0">
                        <i class="fas fa-calendar-week text-primary"></i>
                    </span>
                    <select name="week" id="week-select" class="form-select border-start-0 fw-medium">
                        @foreach($weekOptions as $option)
                            <option value="{{ $option['value'] }}"
                                {{ ($option['year'] == $currentYear && $option['week'] == $currentWeek) ? 'selected' : '' }}>
                                {{ $option['label'] }}
                            </option>
                        @endforeach
                    </select>
                </div>
                <div class="input-group input-group-sm day-select-group">
                    <span class="input-group-text bg-light border-end-0">
                        <i class="fas fa-calendar text-primary"></i>
                    </span>
                    <select name="day" id="day-select" class="form-select border-start-0 fw-medium">
                        @foreach($weekDays as $date => $label)
                            <option value="{{ $date }}" {{ $date == $selectedDay ? 'selected' : '' }}>{{ $label }}</option>
                        @endforeach
                    </select>
                </div>
            </form>
        </div>
    </div>

    @if (session('success'))
        <div class="alert alert-success alert-dismissible fade show" role="alert">
            {{ session('success') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    {{-- 當日概覽卡片 --}}
    <div class="row mb-4">
        <div class="col-md-4 mb-3 mb-md-0">
            <div class="card shadow-sm border-0 rounded-3 h-100">
                <div class="card-body p-4 text-center">
                    <h6 class="fw-medium text-muted mb-2">今日已記錄</h6>
                    <h3 class="fw-bold mb-0 text-primary">
                        {{ $dayStatistics['total_recorded_hours_display'] }} /
                        {{ $dayStatistics['day_hours'] }} 小時
                    </h3>
                </div>
            </div>
        </div>
        <div class="col-md-4 mb-3 mb-md-0">
            <div class="card shadow-sm border-0 rounded-3 h-100">
                <div class="card-body p-4 text-center">
                    <h6 class="fw-medium text-muted mb-2">有記錄專案</h6>
                    <h3 class="fw-bold mb-0 text-success">
                        {{ $dayStatistics['projects_with_records'] }} 個
                    </h3>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card shadow-sm border-0 rounded-3 h-100">
                <div class="card-body p-4 text-center">
                    <h6 class="fw-medium text-muted mb-2">選擇日期</h6>
                    <h3 class="fw-bold mb-0 text-info">{{ $selectedDay }}</h3>
                </div>
            </div>
        </div>
    </div>

    {{-- 新增工時表單 --}}
    <div class="card shadow-sm border-0 rounded-3 mb-4">
        <div class="card-header bg-white py-3 border-0">
            <h5 class="card-title fw-bold text-primary mb-0">新增工時記錄</h5>
        </div>
        <div class="card-body p-3">
            <form action="{{ route('time-records.store') }}" method="POST" class="row g-3">
                @csrf
                <input type="hidden" name="record_date" value="{{ $selectedDay }}">

                <div class="col-md-5">
                    <label for="project_search" class="form-label d-flex align-items-center justify-content-between mb-2">
                        <span class="fs-5">專案/合約</span>
                    </label>
                    <div class="project-combo position-relative">
                        <div class="input-group">
                            <input type="text" id="project_search" class="form-control"
                                   placeholder="輸入名稱搜尋，或點 ▾ 展開清單"
                                   autocomplete="off" spellcheck="false">
                            <button type="button" class="btn btn-outline-secondary px-3" id="project_toggle_btn"
                                    tabindex="-1" title="展開清單">
                                <i class="fas fa-chevron-down fa-xs"></i>
                            </button>
                        </div>
                        <input type="hidden" name="project_id" id="project_id">
                        <input type="hidden" name="contract_id" id="contract_id">
                        <input type="hidden" name="work_type" id="work_type">
                        <ul id="project_dropdown" class="list-unstyled mb-0 border rounded shadow-sm bg-white position-absolute w-100"
                            style="display:none;max-height:240px;overflow-y:auto;z-index:1055;top:calc(100% + 2px);left:0;">
                        </ul>
                    </div>
                </div>

                <div class="col-md-2">
                    <label for="hours" class="form-label d-flex align-items-center mb-2">
                        <span class="fs-5">工時（小時）</span>
                    </label>
                    <input type="number" step="0.5" min="0.5" max="24" name="hours" id="hours"
                           class="form-control" placeholder="例：4" required>
                </div>

                <div class="col-md-3">
                    <label for="comments" class="form-label d-flex align-items-center mb-2">
                        <span class="fs-5">工作內容 / 備註</span>
                    </label>
                    <textarea name="comments" id="comments" class="form-control" rows="1"
                              placeholder="簡述今日完成的工作內容"></textarea>
                </div>

                <div class="col-12 mt-4">
                    <button type="submit" class="btn btn-success px-4 py-2">
                        <i class="fas fa-save me-2"></i>新增工時
                    </button>
                </div>
            </form>
        </div>
    </div>

    {{-- 提示 --}}
    <div class="d-flex align-items-center mb-2">
        <span class="badge bg-info me-2"><i class="fas fa-info-circle"></i></span>
        <span class="small fw-bolder">點擊詳細可展開填寫備註</span>
    </div>

    {{-- 工時記錄列表 --}}
    <div class="card shadow-sm border-0 rounded-3">
        <div class="card-header bg-white py-3 border-0 d-flex justify-content-between align-items-center">
            <h5 class="card-title fw-bold text-primary mb-0">
                {{ $selectedDay }} 工時記錄
            </h5>
            <span class="badge bg-primary py-2 px-3">
                <span class="fw-bolder fs-6">
                    總計：{{ $dayStatistics['total_hours_display'] }} 小時
                </span>
            </span>
        </div>
        <div class="card-body p-0">
            @forelse($projectTimeRecords as $index => $record)
                <div class="time-record-item border-bottom">
                    {{-- 主要列 --}}
                    <div class="row align-items-center p-3 time-record-header g-0">
                        {{-- 第一欄：專案名稱與狀態 --}}
                        <div class="col time-record-title">
                            <div class="d-flex align-items-center gap-2 flex-wrap">
                                <span class="fw-bold">{{ $record['project_name'] }}</span>
                                <span class="badge bg-info text-dark">{{ $record['status_text'] }}</span>
                                @if($srcBoard && $record['day_record']->isFromBoard())
                                    <span class="badge bg-secondary" title="由看板完成卡片自動匯入">
                                        <i class="bi bi-kanban me-1"></i>看板同步
                                    </span>
                                @elseif($srcProject && $record['day_record']->source_time_entry_id)
                                    <span class="badge bg-success" title="由專案耗用工時頁面填報匯入">
                                        <i class="bi bi-folder me-1"></i>專案工時
                                    </span>
                                @elseif($srcIssue && $record['day_record']->isFromIssue())
                                    <span class="badge bg-info text-dark" title="由議題工時填報自動匯入">
                                        <i class="bi bi-bug me-1"></i>議題同步
                                    </span>
                                @elseif($srcApi && $record['day_record']->isFromApi())
                                    <span class="badge bg-warning text-dark" title="由 API 寫入">
                                        <i class="bi bi-code-slash me-1"></i>API 寫入
                                    </span>
                                @else
                                    <span class="badge bg-success" title="手動輸入">
                                        <i class="bi bi-pencil me-1"></i>手動輸入
                                    </span>
                                @endif
                            </div>
                            <small class="text-muted">{{ $record['client'] }}</small>
                        </div>

                        {{-- 第二欄：備註（置中） --}}
                        <div class="col text-center text-muted small d-none d-md-block">
                            @if($record['day_record']->comments)
                                <div class="text-truncate" style="max-width:200px; margin:0 auto;" title="{{ $record['day_record']->comments }}">
                                    {{ $record['day_record']->comments }}
                                </div>
                            @endif
                        </div>

                        {{-- 第三欄：工時輸入 + 操作按鈕 --}}
                        <div class="col-auto text-end">
                            <div class="d-flex align-items-center justify-content-end gap-2">
                                @if($record['day_record'])
                                    {{-- 已有記錄：顯示工時 + 儲存/刪除 --}}
                                    <form id="{{ $record['form_id'] }}"
                                          action="{{ route('time-records.update', $record['day_record']->id) }}"
                                          method="POST" class="d-inline">
                                        @csrf @method('PUT')
                                    </form>
                                    <div class="d-flex align-items-center gap-2">
                                        <span class="text-muted small">工時</span>
                                        <div class="hours-input-wrapper">
                                            <input type="number" form="{{ $record['form_id'] }}"
                                                   step="0.5" min="0.5" max="24" name="hours"
                                                   value="{{ $record['day_record']->hours }}"
                                                   class="form-control form-control-sm text-center"
                                                   placeholder="0.0">
                                        </div>
                                    </div>
                                    <div class="d-flex gap-1 action-buttons">
                                        <button type="submit" form="{{ $record['form_id'] }}"
                                                class="btn btn-sm btn-primary">
                                            <i class="fas fa-save me-1"></i>儲存
                                        </button>
                                        <form action="{{ route('time-records.destroy', $record['day_record']->id) }}"
                                              method="POST" class="d-inline">
                                            @csrf @method('DELETE')
                                            <button type="submit" class="btn btn-sm btn-outline-danger delete-confirm"
                                                    data-message="確定要刪除這筆工時記錄嗎？">
                                                <i class="fas fa-trash me-1"></i>刪除
                                            </button>
                                        </form>
                                        <button class="btn btn-sm btn-outline-secondary collapse-toggle-btn"
                                                data-bs-toggle="collapse"
                                                data-bs-target="#{{ $record['collapse_id'] }}"
                                                aria-expanded="false">
                                            詳細<i class="fas fa-chevron-down ms-1"></i>
                                        </button>
                                    </div>
                                @else
                                    {{-- 尚無記錄：快速新增 --}}
                                    <form id="{{ $record['form_id'] }}"
                                          action="{{ route('time-records.store') }}"
                                          method="POST" class="d-inline">
                                        @csrf
                                        <input type="hidden" name="project_id" value="{{ $record['project_id'] }}">
                                        <input type="hidden" name="record_date" value="{{ $selectedDay }}">
                                    </form>
                                    <div class="d-flex align-items-center gap-2">
                                        <span class="text-muted small">工時</span>
                                        <div class="hours-input-wrapper">
                                            <input type="number" form="{{ $record['form_id'] }}"
                                                   step="0.5" min="0.5" max="24" name="hours"
                                                   class="form-control form-control-sm text-center"
                                                   placeholder="0.0">
                                        </div>
                                        <button type="submit" form="{{ $record['form_id'] }}"
                                                class="btn btn-sm btn-success">
                                            <i class="fas fa-plus me-1"></i>新增
                                        </button>
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>

                    {{-- 展開區塊（僅已有記錄者） --}}
                    @if($record['day_record'])
                    <div class="collapse" id="{{ $record['collapse_id'] }}">
                        <div class="collapse-content">
                            <div class="row g-3 align-items-start">

                                {{-- 第一欄：專案資訊 --}}
                                <div class="col-md-4 collapse-col-bordered">
                                    <div class="d-flex flex-column gap-2 small">
                                        <div class="d-flex justify-content-between">
                                            <span class="text-muted">客戶</span>
                                            <span class="fw-medium">{{ $record['client'] }}</span>
                                        </div>
                                        <div class="d-flex justify-content-between">
                                            <span class="text-muted">評估工時</span>
                                            <span class="fw-medium">{{ $record['estimated_hours'] !== null ? rtrim(rtrim(number_format($record['estimated_hours'], 2), '0'), '.').' 小時' : '—' }}</span>
                                        </div>
                                        <div class="d-flex justify-content-between">
                                            <span class="text-muted">評估人天</span>
                                            <span class="fw-medium">{{ $record['estimated_man_days'] !== null ? $record['estimated_man_days'].' 天' : '—' }}</span>
                                        </div>
                                        <div class="d-flex justify-content-between">
                                            <span class="text-muted">已用（全員）</span>
                                            <span class="fw-medium">
                                                {{ number_format($record['used_man_days'], 1) }} 天
                                                @if($record['estimated_man_days'] && $record['estimated_man_days'] > 0)
                                                    <span class="text-muted">({{ number_format($record['used_man_days'] / $record['estimated_man_days'] * 100, 1) }}%)</span>
                                                @endif
                                            </span>
                                        </div>
                                        <div class="d-flex justify-content-between">
                                            <span class="text-muted">今日人天</span>
                                            <span class="fw-medium">{{ number_format((float)$record['day_record']->man_days, 2) }} 天</span>
                                        </div>
                                        @if((float)$record['day_record']->overtime_hours > 0)
                                        <div class="d-flex justify-content-between">
                                            <span class="text-muted">加班</span>
                                            <span class="fw-medium text-warning">{{ rtrim(rtrim(number_format((float)$record['day_record']->overtime_hours, 2), '0'), '.') }} 小時</span>
                                        </div>
                                        @endif
                                    </div>
                                </div>

                                {{-- 第二欄：週統計 --}}
                                <div class="col-md-3 collapse-col-bordered">
                                    <div class="d-flex flex-column gap-3 small">
                                        <div>
                                            <div class="text-muted mb-1">本週工時</div>
                                            <div class="fw-semibold fs-6">{{ rtrim(rtrim(number_format($record['this_week_hours'], 2), '0'), '.') }} 小時</div>
                                        </div>
                                        <div>
                                            <div class="text-muted mb-1">與上週差異</div>
                                            @php
                                                $diff = $record['week_diff'];
                                                $diffColor = $diff > 0 ? 'text-success' : ($diff < 0 ? 'text-danger' : 'text-muted');
                                                $diffIcon  = $diff > 0 ? '<i class="fas fa-arrow-up me-1"></i>+' : ($diff < 0 ? '<i class="fas fa-arrow-down me-1"></i>' : '');
                                                $diffText  = $diff != 0 ? number_format(abs($diff), 1) . ' 小時' : '—';
                                            @endphp
                                            <div class="fw-semibold fs-6 {{ $diffColor }}">{!! $diffIcon !!}{{ $diffText }}</div>
                                        </div>
                                    </div>
                                </div>

                                {{-- 第三欄：完成率 + 備註 --}}
                                <div class="col-md-5">
                                    {{-- 完成率 --}}
                                    @php
                                        // 優先：今日記錄 → 最近一次填報 → issues 計算
                                        $doneVal = $record['day_record']->done_ratio
                                            ?? $record['recent_done_ratio']
                                            ?? $record['project_done_ratio']
                                            ?? 0;
                                        $doneSource = $record['day_record']->done_ratio !== null
                                            ? ''
                                            : ($record['recent_done_ratio'] !== null ? '（帶入上次填報）' : '');
                                    @endphp
                                    <div class="mb-2">
                                        <label class="form-label small text-muted mb-1"
                                               for="done-ratio-{{ $record['collapse_id'] }}">
                                            專案完成率（%）
                                            @if($doneSource)
                                                <span class="text-info" style="font-size:.75rem">{{ $doneSource }}</span>
                                            @endif
                                        </label>
                                        <div class="d-flex align-items-center gap-2">
                                            <input type="range"
                                                   id="done-ratio-{{ $record['collapse_id'] }}"
                                                   form="{{ $record['form_id'] }}"
                                                   name="done_ratio"
                                                   min="0" max="100" step="1"
                                                   value="{{ $doneVal }}"
                                                   class="form-range flex-grow-1"
                                                   oninput="this.nextElementSibling.value=this.value">
                                            <input type="number"
                                                   form="{{ $record['form_id'] }}"
                                                   name="done_ratio_display"
                                                   min="0" max="100" step="1"
                                                   value="{{ $doneVal }}"
                                                   class="form-control form-control-sm text-center fw-bold"
                                                   style="width:70px"
                                                   aria-label="完成率數值"
                                                   oninput="syncDoneRatio(this)">
                                            <span class="text-muted small">%</span>
                                        </div>
                                    </div>
                                    {{-- 備註 --}}
                                    <label class="form-label small text-muted mb-1"
                                           for="comments-{{ $record['collapse_id'] }}">備註</label>
                                    <textarea id="comments-{{ $record['collapse_id'] }}"
                                              form="{{ $record['form_id'] }}" name="comments"
                                              class="form-control form-control-sm" rows="2"
                                              placeholder="工作內容...">{{ $record['day_record']->comments }}</textarea>
                                </div>

                            </div>
                        </div>
                    </div>
                    @endif
                </div>
            @empty
                <div class="text-center py-5 text-muted">
                    <i class="fas fa-clock fa-2x mb-2 d-block"></i>
                    <p class="mb-1 fw-medium">今日尚無工時記錄</p>
                    <p class="small">請使用上方表單新增工時</p>
                </div>
            @endforelse
        </div>
    </div>

    <div class="alert alert-light border mt-4 small text-muted">
        <i class="bi bi-info-circle me-1"></i>
        <strong>工時紀錄說明：</strong>
        工時紀錄會對應到每個專案，計算方式與來源如下：
        <ul class="mb-0 mt-1 ps-3">
            <li><strong>工時（小時）</strong>：直接填入本次實際花費的工作時數，系統依公司設定的每人天工時換算為人天數。</li>
            <li><strong>實際完成比（%）</strong>：填報您對該專案目前整體完成度的估計，若未填則系統自動帶入上次的填報值，工時總表會優先顯示此數值。</li>
            <li><strong>加班判斷</strong>：當日累計工時超過標準工時（依行事曆設定）時，超出部分自動計為加班。</li>
            <li>
                <strong>工時來源有{{ $srcCountText }}種：</strong>
                <ul class="mt-1">
                    <li><strong>手動輸入</strong>：在本頁上方「新增工時記錄」表單直接填報，為最基本的填報方式。</li>
                    @if($srcProject)
                    <li><span class="badge bg-success"><i class="bi bi-folder me-1"></i>專案工時</span>：在專案的「耗用工時」頁面填報工時後即時寫入。</li>
                    @endif
                    @if($srcBoard)
                    <li><span class="badge bg-secondary"><i class="bi bi-kanban me-1"></i>看板同步</span>：看板卡片完成（100%）時自動寫入，工時依卡片設定寫入指派者的紀錄。</li>
                    @endif
                    @if($srcIssue)
                    <li><span class="badge bg-info text-dark"><i class="bi bi-bug me-1"></i>議題同步</span>：在議題頁填報工時後即時寫入；議題標為完成時亦會同步當日尚未寫入的工時。備註會自動帶入議題標題。</li>
                    @endif
                    @if($srcApi)
                    <li><span class="badge bg-warning text-dark"><i class="bi bi-code-slash me-1"></i>API 寫入</span>：透過 API（<code>POST /api/timelog</code>）寫入，適用於外部工具或自動化腳本填報工時。</li>
                    @endif
                </ul>
            </li>
        </ul>
    </div>

</div>
@endsection

@push('scripts')
<script>
$(function () {

    // ── 專案 Combobox ──────────────────────────────────────────────
    const projects   = @json($availableProjects);
    const searchEl   = document.getElementById('project_search');
    const hiddenEl   = document.getElementById('project_id');
    const dropdownEl = document.getElementById('project_dropdown');
    const toggleBtn  = document.getElementById('project_toggle_btn');
    let   isOpen     = false;

    function buildItems(list) {
        dropdownEl.innerHTML = '';
        if (!list.length) {
            dropdownEl.innerHTML = '<li class="px-3 py-2 text-muted small">找不到相符的專案</li>';
            return;
        }
        list.forEach(p => {
            const li = document.createElement('li');
            li.textContent = p.option_text;
            li.className   = 'px-3 py-2 combo-item';
            li.style.cssText = 'cursor:pointer;font-size:.92rem;';
            li.addEventListener('mouseenter', () => li.classList.add('bg-primary', 'text-white'));
            li.addEventListener('mouseleave', () => li.classList.remove('bg-primary', 'text-white'));
            li.addEventListener('mousedown', e => {
                e.preventDefault();
                searchEl.value  = p.option_text;
                hiddenEl.value  = p.project_id;
                document.getElementById('contract_id').value = p.contract_id ?? '';
                document.getElementById('work_type').value   = p.work_type ?? '';
                closeDropdown();
                searchEl.classList.remove('is-invalid');
            });
            dropdownEl.appendChild(li);
        });
    }

    function openDropdown(list) {
        buildItems(list);
        dropdownEl.style.display = 'block';
        toggleBtn.querySelector('i').style.transform = 'rotate(180deg)';
        isOpen = true;
    }

    function closeDropdown() {
        dropdownEl.style.display = 'none';
        toggleBtn.querySelector('i').style.transform = '';
        isOpen = false;
    }

    searchEl.addEventListener('input', function () {
        hiddenEl.value = '';
        const q = this.value.trim().toLowerCase();
        const filtered = q
            ? projects.filter(p => p.option_text.toLowerCase().includes(q))
            : projects;
        openDropdown(filtered);
    });

    searchEl.addEventListener('focus', function () {
        if (!isOpen) {
            const q = this.value.trim().toLowerCase();
            const filtered = q
                ? projects.filter(p => p.option_text.toLowerCase().includes(q))
                : projects;
            openDropdown(filtered);
        }
    });

    toggleBtn.addEventListener('click', function () {
        if (isOpen) { closeDropdown(); } else { openDropdown(projects); searchEl.focus(); }
    });

    document.addEventListener('mousedown', function (e) {
        if (!e.target.closest('.project-combo')) closeDropdown();
    });

    // 鍵盤導覽
    searchEl.addEventListener('keydown', function (e) {
        const items = dropdownEl.querySelectorAll('.combo-item');
        const active = dropdownEl.querySelector('.combo-item.bg-primary');
        if (e.key === 'Escape') { closeDropdown(); return; }
        if (!items.length) return;
        if (e.key === 'ArrowDown') {
            e.preventDefault();
            const next = active ? active.nextElementSibling : items[0];
            if (next) { active?.classList.remove('bg-primary','text-white'); next.classList.add('bg-primary','text-white'); next.scrollIntoView({block:'nearest'}); }
        } else if (e.key === 'ArrowUp') {
            e.preventDefault();
            const prev = active ? active.previousElementSibling : items[items.length - 1];
            if (prev) { active?.classList.remove('bg-primary','text-white'); prev.classList.add('bg-primary','text-white'); prev.scrollIntoView({block:'nearest'}); }
        } else if (e.key === 'Enter') {
            if (active) { e.preventDefault(); active.dispatchEvent(new MouseEvent('mousedown')); }
        }
    });

    // 表單送出前驗證必填
    searchEl.closest('form').addEventListener('submit', function (e) {
        if (!hiddenEl.value) {
            e.preventDefault();
            searchEl.classList.add('is-invalid');
            searchEl.focus();
        }
    });

    // 週選擇 → 自動跳轉（保留當日）
    document.getElementById('week-select').addEventListener('change', function () {
        const val = this.value;
        const day  = document.getElementById('day-select').value;
        // 重新取得該週第一天，day 直接用新週第一天
        document.getElementById('date-filter-form').submit();
    });

    // 日選擇 → 自動跳轉
    document.getElementById('day-select').addEventListener('change', function () {
        document.getElementById('date-filter-form').submit();
    });

    // 刪除確認
    document.querySelectorAll('.delete-confirm').forEach(btn => {
        btn.addEventListener('click', function (e) {
            const msg = this.dataset.message || '確定要刪除嗎？';
            if (!confirm(msg)) e.preventDefault();
        });
    });

    // 數字輸入框聚焦選全
    document.querySelectorAll('input[type="number"]').forEach(el => {
        el.addEventListener('focus', function () { this.select(); });
        el.addEventListener('wheel', function () { this.blur(); });
    });

    // 展開箭頭旋轉
    document.querySelectorAll('.collapse-toggle-btn').forEach(btn => {
        const target = document.querySelector(btn.dataset.bsTarget);
        if (!target) return;
        target.addEventListener('show.bs.collapse',  () => btn.setAttribute('aria-expanded', 'true'));
        target.addEventListener('hide.bs.collapse',  () => btn.setAttribute('aria-expanded', 'false'));
    });

});

// 完成率：數字輸入框 → 同步到 range（透過 form.elements 精準指向）
function syncDoneRatio(numInput) {
    let v = parseInt(numInput.value, 10);
    if (isNaN(v)) v = 0;
    v = Math.min(100, Math.max(0, v));
    numInput.value = v;
    if (numInput.form) {
        const range = numInput.form.elements['done_ratio'];
        if (range) range.value = v;
    }
}
</script>
@endpush