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

@push('module-links')
<link rel="stylesheet" href="{{ Module::asset('task: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>
        <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">
        @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">
                            <span class="fw-bold">{{ $record['project_name'] }}</span>
                            <span class="badge bg-info">{{ $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>

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

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