@extends('user::layouts/panel')

@push('module-links')
@vite(['Modules/Task/resources/assets/css/time-records.css'])
@endpush

@section('module-content')
<!-- 路由資料（供 JS 使用） -->
<meta name="time-records-index-url" content="{{ route('panel.staff.time-records') }}">
<meta name="time-records-show-url" content="{{ route('panel.staff.time-records.show', ['year' => 'YEAR', 'week' => 'WEEK']) }}">

<!-- 返回按鈕與日期選擇器 -->
<div class="row mb-4 align-items-center">
    <div class="col-auto">
        @include('custom::components.reply-btn', ['url' => route('panel.staff.time-records')])
    </div>
    <div class="col-auto ms-auto">
        <form method="GET" 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>

<!-- 當日總覽卡片 -->
<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">
        <h4 class="card-title fw-bold text-primary mb-0">
            新增工時記錄
        </h4>
    </div>
    <div class="card-body p-3">
        <form action="{{ route('panel.staff.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="task_project_assignment_id" class="form-label d-flex align-items-center justify-content-between mb-2">
                    <span class="fs-5">選擇專案</span>
                    <button type="button" class="btn btn-sm btn-outline-info" id="viewAllProjectsBtn">
                        <i class="fas fa-list me-1"></i>查看所有專案
                    </button>
                </label>
                <select name="task_project_assignment_id" id="task_project_assignment_id" class="form-select select2-project" required>
                    <option value="">請選擇專案</option>
                    @foreach($availableProjects as $project)
                        <option value="{{ $project['assignment_id'] }}">{{ $project['option_text'] }}</option>
                    @endforeach
                </select>
            </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.01" min="0.01" max="24" name="hours" id="hours"
                       class="form-control" placeholder="填寫工時" required>
            </div>

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

            @if(Auth::user()->need_task_record)
            <div class="col-md-2">
                <label for="is_billable" class="form-label d-flex align-items-center mb-2">
                    <i class="fas fa-tag me-2 text-secondary"></i>
                    <span class="fs-5">工時類型</span>
                </label>
                <select name="is_billable" id="is_billable" class="form-select">
                    <option value="1" selected>正常工時</option>
                    <option value="0">測試工時</option>
                </select>
            </div>
            @else
            <input type="hidden" name="is_billable" value="1">
            @endif

            <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">
        <h4 class="card-title fw-bold text-primary mb-0">
            {{ $selectedDay }} 工時記錄
        </h4>
        <div class="d-flex align-items-center gap-2">
            @if(Auth::user()->complete_rate_edit)
                <button type="button" class="btn btn-sm btn-outline-primary"
                        data-bs-toggle="modal" data-bs-target="#adjustProgressModal">
                    <i class="fas fa-chart-pie me-1"></i>調整完成率
                </button>
            @endif
            <span class="badge bg-primary py-2 px-3">
                <span class="fw-bolder fs-6">
                    總計: {{ $dayStatistics['total_hours_display'] }} 小時
                </span>
            </span>
        </div>
    </div>
    <div class="card-body p-0">
        @foreach($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>
                            @if($record['project']->serial_number)
                                <span class="text-muted small text-nowrap record-serial-number">#{{ $record['project']->serial_number }}</span>
                            @endif
                            <span class="text-muted small text-nowrap record-client-name">{{ $record['client'] }}</span>
                            <span class="badge bg-info text-nowrap">{{ $record['status_text'] }}</span>
                        </div>
                    </div>

                    <!-- 第二欄：日期資訊（中間） -->
                    <div class="col text-center text-muted small">
                        <span>{{ $record['date_text'] }}</span>
                    </div>

                    <!-- 第三欄：工時輸入與按鈕 -->
                    <div class="col text-end">
                        <div class="d-flex align-items-center justify-content-end gap-2">
                            <!-- 工時輸入 -->
                            <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.01" min="0.01" 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">
                                @if($record['day_record'])
                                    <form id="{{ $record['form_id'] }}" action="{{ route('panel.staff.time-records.update', $record['day_record']->id) }}" method="POST" class="d-inline">
                                        @csrf
                                        @method('PUT')
                                        <button type="submit" class="btn btn-sm btn-primary" title="儲存">
                                            <i class="fas fa-save"></i>
                                        </button>
                                    </form>
                                    <form action="{{ route('panel.staff.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="確定要刪除這筆工時記錄嗎？" title="刪除">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                    </form>
                                @else
                                    <form id="{{ $record['form_id'] }}" action="{{ route('panel.staff.time-records.store') }}" method="POST" class="d-inline">
                                        @csrf
                                        <input type="hidden" name="task_project_assignment_id" value="{{ $record['assignment_id'] }}">
                                        <input type="hidden" name="record_date" value="{{ $selectedDay }}">
                                        <input type="hidden" name="hours" value="" class="hours-input">
                                        <input type="hidden" name="remark" value="" class="remark-input">
                                        <input type="hidden" name="completion_percentage" value="" class="completion-percentage-input">
                                        @if(Auth::user()->need_task_record)
                                        <input type="hidden" name="is_billable" value="1" class="is-billable-input">
                                        @endif
                                        <button type="submit" class="btn btn-sm btn-success" title="新增">
                                            <i class="fas fa-plus"></i>
                                        </button>
                                    </form>
                                @endif

                                <!-- 展開按鈕 -->
                                <button class="btn btn-sm btn-outline-secondary collapse-toggle-btn"
                                        data-bs-toggle="collapse" data-bs-target="#{{ $record['collapse_id'] }}" title="展開詳情">
                                    <i class="fas fa-chevron-down"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 展開內容 -->
                <div class="collapse" id="{{ $record['collapse_id'] }}">
                    <div class="collapse-content">
                        <div class="row g-3">
                            <!-- 第 1 欄：專案標籤 -->
                            <div class="col-1">
                                <div class="collapse-col-labels">
                                    <span class="text-muted">客戶</span>
                                    <span class="text-muted">評估</span>
                                    <span class="text-muted">已用</span>
                                </div>
                            </div>
                            <!-- 第 2 欄：專案值 -->
                            <div class="col-2 collapse-col-bordered">
                                <div class="collapse-col-labels">
                                    <span class="fw-medium">{{ $record['client'] }}</span>
                                    <span class="fw-medium">{{ number_format($record['estimated_man_days'], 1) }} 人天</span>
                                    <span class="fw-medium">{{ number_format($record['total_man_days'], 1) }} 天 ({{ number_format($record['man_day_percentage'], 1) }}%)</span>
                                </div>
                            </div>
                            <!-- 第 3 欄：進度標籤 -->
                            <div class="col-1">
                                <div class="collapse-col-labels-between">
                                    <span class="text-muted">完成率</span>
                                    <span class="text-muted">與上週差異</span>
                                </div>
                            </div>
                            <!-- 第 4 欄：進度值 -->
                            <div class="col-2 collapse-col-bordered">
                                <div class="collapse-col-labels-between">
                                    <div class="input-group input-group-sm">
                                        <input type="number" form="{{ $record['form_id'] }}" step="1" min="0" max="100"
                                               name="completion_percentage" value="{{ $record['actual_completion_percentage'] }}"
                                               class="form-control" placeholder="%">
                                        <span class="input-group-text">%</span>
                                    </div>
                                    <span class="fw-medium text-{{ $record['actual_percentage_change'] >= 0 ? 'success' : 'danger' }}">
                                        <i class="fas {{ $record['actual_percentage_change'] >= 0 ? 'fa-arrow-up' : 'fa-arrow-down' }}"></i>
                                        {{ $record['actual_percentage_change'] >= 0 ? '+' : '' }}{{ number_format($record['actual_percentage_change'], 1) }}%
                                    </span>
                                </div>
                            </div>
                            <!-- 第 5 欄：備註 -->
                            <div class="col">
                                <span class="text-muted d-block mb-1">備註</span>
                                <div class="d-flex gap-2">
                                    <textarea form="{{ $record['form_id'] }}" name="remark"
                                              class="form-control form-control-sm flex-grow-1" rows="2"
                                              placeholder="工作內容...">{{ $record['day_record']?->remark }}</textarea>
                                    @if(Auth::user()->need_task_record)
                                    <select name="is_billable" form="{{ $record['form_id'] }}" class="form-select form-select-sm billable-select">
                                        <option value="1" {{ $record['day_record']?->is_billable ? 'selected' : '' }}>正常</option>
                                        <option value="0" {{ !$record['day_record']?->is_billable ? 'selected' : '' }}>測試</option>
                                    </select>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        @endforeach

        @if(count($projectTimeRecords) == 0)
            <div class="text-center py-5 text-muted">
                <i class="fas fa-clipboard fa-2x mb-2"></i>
                <p class="mb-0">尚無專案工時記錄</p>
            </div>
        @endif
    </div>
</div>

@if(Auth::user()->complete_rate_edit)
{{-- 調整完成率：不必先有自己的工時記錄就能改，清單取這個週期團隊碰過的專案 --}}
<div class="modal fade" id="adjustProgressModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="fas fa-chart-pie me-2"></i>調整完成率 - {{ $currentYear }}年第{{ $currentWeek }}週
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form action="{{ route('panel.task.project-progress.update-batch') }}" method="POST"
                  class="d-flex flex-column overflow-hidden">
                @csrf
                <input type="hidden" name="sprint_id" value="{{ $currentSprint->id }}">
                <div class="modal-body">
                    @if(count($adjustableProgressProjects) > 0)
                        <p class="text-muted small mb-2">
                            <i class="fas fa-info-circle me-1"></i>完成率為專案共用的數字，調整後不會影響任何人的工時記錄。
                        </p>
                        {{-- 專案數量多，沒有搜尋很難找 --}}
                        <div class="input-group input-group-sm mb-3">
                            <span class="input-group-text bg-light">
                                <i class="fas fa-search text-muted"></i>
                            </span>
                            <input type="text" id="progressSearch" class="form-control"
                                   placeholder="搜尋專案名稱、客戶或編號..." autocomplete="off">
                        </div>
                        <div class="text-muted small mb-2">
                            共 <span id="progressVisibleCount">{{ count($adjustableProgressProjects) }}</span> 個專案
                        </div>
                        <table class="table table-sm align-middle" id="progressTable">
                            <thead class="table-light">
                                <tr>
                                    <th>專案名稱</th>
                                    <th>客戶</th>
                                    <th class="progress-percentage-col">完成率</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($adjustableProgressProjects as $item)
                                <tr>
                                    <td>
                                        {{ $item['project']->name }}
                                        @if($item['project']->serial_number)
                                            <span class="text-muted small text-nowrap ms-1">#{{ $item['project']->serial_number }}</span>
                                        @endif
                                    </td>
                                    <td class="text-muted">{{ $item['project']->taskClient?->name }}</td>
                                    <td>
                                        <div class="input-group input-group-sm">
                                            <input type="hidden" name="project_ids[]" value="{{ $item['project']->id }}">
                                            <input type="number" name="percentages[]" step="1" min="0" max="100"
                                                   value="{{ (float) $item['completion_percentage'] }}" class="form-control">
                                            <span class="input-group-text">%</span>
                                        </div>
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    @else
                        <p class="text-center text-muted my-4">本週期還沒有任何專案的工時記錄</p>
                    @endif
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="submit" class="btn btn-primary" @disabled(count($adjustableProgressProjects) === 0)>儲存</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endif

<!-- 查看所有專案模態框 -->
@include('task::panel.time-records.partials.projects-modal')
@endsection

@push('module-scripts')
    @vite('Modules/Task/resources/assets/js/time-records/show.js')
@endpush