@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>
:root {
    --sticky-default: #ffffff;
    --sticky-dev:     #f2f6ff;
    --sticky-warranty:#fffef2;
    --sticky-other:   #f8f9fa;
}
[data-bs-theme="dark"] {
    --sticky-default: #1c1f26;
    --sticky-dev:     #1a2f4a;
    --sticky-warranty:#2c2610;
    --sticky-other:   #272a30;
}

.timesheet-table th,
.timesheet-table td { white-space: nowrap; vertical-align: middle; }
.timesheet-table td.project-name-cell { white-space: normal; min-width: 140px; }

.sticky-col,
.sticky-col2,
.sticky-col3,
.sticky-col4 { position: sticky; left: 0; z-index: 3; }
thead .sticky-col,
thead .sticky-col2,
thead .sticky-col3,
thead .sticky-col4 { z-index: 4; }

/* tbody sticky 必須實色背景，避免捲動透視 */
.timesheet-table tbody td.sticky-col,
.timesheet-table tbody td.sticky-col2,
.timesheet-table tbody td.sticky-col3,
.timesheet-table tbody td.sticky-col4 { background-color: var(--sticky-default); }

.project-row-開發   td.sticky-col,
.project-row-開發   td.sticky-col2,
.project-row-開發   td.sticky-col3,
.project-row-開發   td.sticky-col4 { background-color: var(--sticky-dev); }

.project-row-保固   td.sticky-col,
.project-row-保固   td.sticky-col2,
.project-row-保固   td.sticky-col3,
.project-row-保固   td.sticky-col4,
.project-row-維護   td.sticky-col,
.project-row-維護   td.sticky-col2,
.project-row-維護   td.sticky-col3,
.project-row-維護   td.sticky-col4 { background-color: var(--sticky-warranty); }

.project-row-商品   td.sticky-col,
.project-row-商品   td.sticky-col2,
.project-row-商品   td.sticky-col3,
.project-row-商品   td.sticky-col4,
.project-row-結束   td.sticky-col,
.project-row-結束   td.sticky-col2,
.project-row-結束   td.sticky-col3,
.project-row-結束   td.sticky-col4 { background-color: var(--sticky-other); }

.timesheet-table tbody tr:hover td.sticky-col,
.timesheet-table tbody tr:hover td.sticky-col2,
.timesheet-table tbody tr:hover td.sticky-col3,
.timesheet-table tbody tr:hover td.sticky-col4 { filter: brightness(.96); }

/* 列類型背景（非 sticky 欄位） */
.project-row-開發 { background-color: rgba(13,110,253,.05); }
.project-row-保固,
.project-row-維護 { background-color: rgba(255,193,7,.05); }
.project-row-商品,
.project-row-結束 { background-color: rgba(108,117,125,.05); }
</style>
@endpush

@section('content')
<div class="container-fluid py-4">

    {{-- 控制區 --}}
    <div class="card shadow-sm border-0 rounded-3 mb-4">
        <div class="card-body p-3">
            <form method="GET" action="{{ route('time-sheets.range') }}" class="row g-3 align-items-end">
                <div class="col-auto">
                    <label class="form-label mb-1 small fw-medium">開始日期</label>
                    <input type="date" name="start_date" class="form-control" value="{{ $startDate }}">
                </div>
                <div class="col-auto">
                    <label class="form-label mb-1 small fw-medium">結束日期</label>
                    <input type="date" name="end_date" class="form-control" value="{{ $endDate }}">
                </div>
                <div class="col-auto d-flex gap-2">
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-search me-1"></i>查詢
                    </button>
                    {{-- 快捷按鈕 --}}
                    <a href="{{ route('time-sheets.range', ['start_date' => now()->startOfMonth()->toDateString(), 'end_date' => now()->toDateString()]) }}"
                       class="btn btn-outline-secondary">本月</a>
                    <a href="{{ route('time-sheets.range', ['start_date' => now()->subMonth()->startOfMonth()->toDateString(), 'end_date' => now()->subMonth()->endOfMonth()->toDateString()]) }}"
                       class="btn btn-outline-secondary">上月</a>
                    <a href="{{ route('time-sheets.range', ['start_date' => now()->startOfQuarter()->toDateString(), 'end_date' => now()->toDateString()]) }}"
                       class="btn btn-outline-secondary">本季</a>
                </div>
                <div class="col-auto ms-auto align-self-center">
                    <div class="btn-group" role="group">
                        <input type="radio" class="btn-check" name="timeUnit" id="rHours" value="hours" checked>
                        <label class="btn btn-outline-info btn-sm" for="rHours"><i class="fas fa-clock me-1"></i>小時</label>
                        <input type="radio" class="btn-check" name="timeUnit" id="rDays" value="manDays">
                        <label class="btn btn-outline-info btn-sm" for="rDays"><i class="fas fa-user-clock me-1"></i>人天</label>
                    </div>
                </div>
            </form>
        </div>
    </div>

    @if(count($userStats) === 0)
        <div class="alert alert-info">此區間尚無工時記錄。</div>
    @else

    {{-- 類型篩選 --}}
    <div class="mb-3 d-flex gap-2 flex-wrap align-items-center">
        @foreach(['all' => '全部', '開發' => '開發', '維護' => '維護', '保固' => '保固', '其他' => '其他'] as $val => $lbl)
        <input type="radio" class="btn-check" name="typeFilter" id="tf-{{ $val }}" value="{{ $val }}" {{ $val === 'all' ? 'checked' : '' }}>
        <label class="btn btn-outline-primary btn-sm" for="tf-{{ $val }}">{{ $lbl }}</label>
        @endforeach
        <div class="ms-3 form-check mb-0">
            <input class="form-check-input" type="checkbox" id="hideEmpty" checked>
            <label class="form-check-label small" for="hideEmpty">隱藏無工時專案</label>
        </div>
    </div>

    {{-- 矩陣表格 --}}
    <div class="card shadow-sm border-0 rounded-3 mb-4">
        <div class="card-header py-3 border-0">
            <h5 class="fw-bold text-primary mb-0">
                區間工時矩陣 — {{ $startDate }} ～ {{ $endDate }}
            </h5>
        </div>
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-bordered table-hover mb-0 timesheet-table">
                    <thead class="table-dark">
                        <tr>
                            <th class="sticky-col  text-center" style="min-width:80px;background:#212529">客戶</th>
                            <th class="sticky-col2 text-center project-name-cell" style="min-width:140px;background:#212529">專案名稱</th>
                            <th class="sticky-col3 text-center" style="min-width:100px;background:#212529">預計結案日</th>
                            <th class="sticky-col4 text-center" style="min-width:70px;background:#212529">評估人天</th>
                            @foreach($userStats as $uid => $stat)
                                <th class="text-center" data-user-id="{{ $uid }}" style="min-width:90px">
                                    {{ $stat['user']->name }}<br>
                                    <small class="fw-normal">
                                        <span class="hours-display">{{ rtrim(rtrim(number_format($stat['total_hours'], 2), '0'), '.') }}小時</span>
                                        <span class="man-days-display" style="display:none">{{ number_format($stat['total_man_days'], 2) }}天</span>
                                    </small>
                                </th>
                            @endforeach
                            <th class="text-center" style="min-width:80px">合計</th>
                        </tr>
                    </thead>
                    <tbody>
                        @php $MAIN_TYPES = ['開發','維護','保固']; @endphp
                        @foreach($projectsByType as $type => $projects)
                            <tr class="table-secondary type-group-row" data-type="{{ $type }}">
                                <th colspan="{{ count($userStats) + 5 }}" class="text-center fw-bold">{{ $type }}</th>
                            </tr>
                            @foreach($projects as $project)
                                @php
                                    $rowTotal = $rowTotalMd = 0;
                                    foreach(array_keys($userStats) as $uid) {
                                        $rowTotal   += $matrix[$project->id][$uid]['hours']    ?? 0;
                                        $rowTotalMd += $matrix[$project->id][$uid]['man_days'] ?? 0;
                                    }
                                @endphp
                                <tr class="project-row project-row-{{ $type }}"
                                    data-type="{{ $type }}"
                                    data-has-hours="{{ $rowTotal > 0 ? '1' : '0' }}">
                                    <td class="sticky-col text-center align-middle">
                                        <small>{{ $project->client?->name ?? '—' }}</small>
                                    </td>
                                    <td class="sticky-col2 project-name-cell align-middle">
                                        <span class="fw-medium">{{ $project->name }}</span>
                                    </td>
                                    <td class="sticky-col3 text-center align-middle">
                                        <small>{{ $project->end_date ? \Carbon\Carbon::parse($project->end_date)->format('Y-m-d') : '—' }}</small>
                                    </td>
                                    <td class="sticky-col4 text-center align-middle">
                                        @if(!is_null($estimatedManDays[$project->project_id] ?? null))
                                            <small>{{ $estimatedManDays[$project->project_id] }}天</small>
                                        @else
                                            <small class="text-muted">—</small>
                                        @endif
                                    </td>
                                    @foreach(array_keys($userStats) as $uid)
                                        @php
                                            $h  = $matrix[$project->id][$uid]['hours']    ?? 0;
                                            $md = $matrix[$project->id][$uid]['man_days'] ?? 0;
                                        @endphp
                                        <td class="text-center align-middle" data-user-id="{{ $uid }}">
                                            @if($h > 0)
                                                <span class="hours-display fw-medium">{{ number_format($h, 1) }}小時</span>
                                                <span class="man-days-display fw-medium" style="display:none">{{ number_format($md, 2) }}天</span>
                                            @else
                                                <span class="text-muted">—</span>
                                            @endif
                                        </td>
                                    @endforeach
                                    <td class="text-center align-middle fw-bold text-primary">
                                        <span class="hours-display">{{ $rowTotal > 0 ? number_format($rowTotal, 1).'小時' : '—' }}</span>
                                        <span class="man-days-display" style="display:none">{{ $rowTotalMd > 0 ? number_format($rowTotalMd, 2).'天' : '—' }}</span>
                                    </td>
                                </tr>
                            @endforeach
                        @endforeach
                    </tbody>
                    <tfoot>
                        {{-- 實際執行人天 --}}
                        <tr class="table-dark">
                            <td class="sticky-col" style="background:#212529" colspan="4"><strong>實際執行人天</strong></td>
                            @foreach($userStats as $uid => $stat)
                                <td class="text-center" data-user-id="{{ $uid }}">
                                    {{ number_format($stat['total_man_days'], 1) }}天（{{ rtrim(rtrim(number_format($stat['total_hours'], 2), '0'), '.') }}小時）
                                </td>
                            @endforeach
                            <td class="text-center fw-bold">
                                {{ number_format($totals['man_days'], 1) }}天（{{ rtrim(rtrim(number_format($totals['hours'], 2), '0'), '.') }}小時）
                            </td>
                        </tr>
                        {{-- 應執行人天（區間標準） --}}
                        <tr class="table-dark">
                            <td class="sticky-col" style="background:#212529" colspan="4"><strong>應執行人天（區間標準）</strong></td>
                            @foreach($userStats as $uid => $stat)
                                <td class="text-center" data-user-id="{{ $uid }}">{{ $rangeStandardDays }}天</td>
                            @endforeach
                            <td class="text-center fw-bold">{{ number_format($rangeStandardHours, 1) }}小時</td>
                        </tr>
                        {{-- 加班時數 --}}
                        <tr class="table-dark">
                            <td class="sticky-col" style="background:#212529" colspan="4"><strong>加班時數</strong></td>
                            @foreach($userStats as $uid => $stat)
                                @php $ot = max(0, $stat['total_hours'] - $rangeStandardHours); @endphp
                                <td class="text-center {{ $ot > 0 ? 'text-warning' : '' }}" data-user-id="{{ $uid }}">
                                    {{ $ot > 0 ? number_format($ot, 1).'小時' : '—' }}
                                </td>
                            @endforeach
                            <td class="text-center fw-bold">
                                @php $totalOt = max(0, $totals['hours'] - $rangeStandardHours * count($userStats)); @endphp
                                {{ $totalOt > 0 ? number_format($totalOt, 1).'小時' : '—' }}
                            </td>
                        </tr>
                    </tfoot>
                </table>
            </div>
        </div>
    </div>
    @endif
</div>
@endsection

@push('scripts')
<script>
function recalcStickyLeft() {
    const table = document.querySelector('.timesheet-table');
    if (!table) return;
    const headerCells = table.querySelectorAll('thead tr:first-child th');
    if (headerCells.length < 4) return;
    const classes = ['sticky-col', 'sticky-col2', 'sticky-col3', 'sticky-col4'];
    let offset = 0;
    for (let i = 0; i < 4; i++) {
        const left = offset + 'px';
        table.querySelectorAll('.' + classes[i]).forEach(el => { el.style.left = left; });
        offset += headerCells[i].offsetWidth;
    }
}
document.addEventListener('DOMContentLoaded', recalcStickyLeft);
window.addEventListener('resize', recalcStickyLeft);

document.addEventListener('DOMContentLoaded', function () {
    const MAIN_TYPES = ['開發','維護','保固'];

    function typeMatches(rowType, sel) {
        if (sel === 'all')  return true;
        if (sel === '其他') return !MAIN_TYPES.includes(rowType);
        return rowType === sel;
    }

    function applyFilters() {
        const sel       = document.querySelector('input[name="typeFilter"]:checked')?.value || 'all';
        const hideEmpty = document.getElementById('hideEmpty').checked;

        document.querySelectorAll('tr.project-row').forEach(row => {
            const match = typeMatches(row.dataset.type, sel) && (!hideEmpty || row.dataset.hasHours === '1');
            row.style.display = match ? '' : 'none';
        });

        document.querySelectorAll('tr.type-group-row').forEach(gr => {
            const any = Array.from(document.querySelectorAll(`tr.project-row[data-type="${gr.dataset.type}"]`))
                             .some(r => r.style.display !== 'none');
            gr.style.display = any ? '' : 'none';
        });
    }

    document.querySelectorAll('input[name="typeFilter"]').forEach(r => r.addEventListener('change', applyFilters));
    document.getElementById('hideEmpty').addEventListener('change', applyFilters);
    applyFilters();

    // 小時 / 人天 切換
    document.querySelectorAll('input[name="timeUnit"]').forEach(r => {
        r.addEventListener('change', function () {
            const showH = this.value === 'hours';
            document.querySelectorAll('.hours-display').forEach(el => el.style.display = showH ? 'inline' : 'none');
            document.querySelectorAll('.man-days-display').forEach(el => el.style.display = showH ? 'none' : 'inline');
        });
    });
});
</script>
@endpush