@extends('layouts.app')

@section('title', '區間統計表')

@push('styles')
<link rel="stylesheet" href="/vendor/fontawesome/css/all.min.css">
<style>
/* ── 專案類型 chip 篩選器 ── */
.type-chips-wrap {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 6px;
    scrollbar-width: thin;
    scrollbar-color: #dee2e6 transparent;
}
.type-chips-wrap::-webkit-scrollbar { height: 4px; }
.type-chips-wrap::-webkit-scrollbar-thumb { background: #dee2e6; border-radius: 2px; }
.type-chip {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    border: 1.5px solid var(--chip-border, #adb5bd);
    background: var(--chip-light, rgba(108,117,125,.1));
    color: var(--chip-border, #6c757d);
    border-radius: 20px;
    padding: 4px 14px;
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, color .15s, box-shadow .15s;
    white-space: nowrap;
    line-height: 1.4;
    letter-spacing: .01em;
}
.type-chip.active {
    background: var(--chip-border, #6c757d);
    color: var(--chip-active-text, #fff);
    box-shadow: 0 2px 6px color-mix(in srgb, var(--chip-border, #6c757d) 40%, transparent);
}
.type-chip:not(.active):hover {
    background: var(--chip-light, rgba(108,117,125,.18));
    filter: brightness(.95);
}
[data-bs-theme="dark"] .type-chip {
    background: color-mix(in srgb, var(--chip-border, #6c757d) 20%, transparent);
    color: color-mix(in srgb, var(--chip-border, #6c757d) 90%, #fff);
    border-color: color-mix(in srgb, var(--chip-border, #6c757d) 70%, transparent);
}
[data-bs-theme="dark"] .type-chip.active {
    background: var(--chip-border, #6c757d);
    color: var(--chip-active-text, #fff);
}

: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; }
    .cat-badge { display:inline-block; padding:1px 5px; border-radius:3px; font-size:.65rem; font-weight:700; margin-right:5px; vertical-align:middle; line-height:1.4; }
    .cat-badge-product { background:#fef3c7; color:#92400e; border:1px solid #fcd34d; }
    .cat-badge-project { background:#dbeafe; color:#1e40af; border:1px solid #93c5fd; }

.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); }

@foreach($projectTypes as $pt)
.project-row-{{ $pt->label }} td.sticky-col,
.project-row-{{ $pt->label }} td.sticky-col2,
.project-row-{{ $pt->label }} td.sticky-col3,
.project-row-{{ $pt->label }} td.sticky-col4 { background-color: var(--sticky-dev); }
@endforeach

.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 欄位） */
@foreach($projectTypes as $pt)
.project-row-{{ $pt->label }} { background-color: rgba(13,110,253,.05); }
@endforeach
.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

    {{-- 類型篩選 --}}
    @php
    $bsSolid = ['primary'=>'#0d6efd','success'=>'#198754','warning'=>'#e0a800','danger'=>'#dc3545','info'=>'#06a3b7','secondary'=>'#6c757d','dark'=>'#343a40','light'=>'#6c757d'];
    $chipActiveTx = ['warning'=>'#fff','info'=>'#fff'];
    $bsLight = ['primary'=>'rgba(13,110,253,.15)','success'=>'rgba(25,135,84,.15)','warning'=>'rgba(255,193,7,.2)','danger'=>'rgba(220,53,69,.15)','info'=>'rgba(6,163,183,.15)','secondary'=>'rgba(108,117,125,.15)','dark'=>'rgba(52,58,64,.15)','light'=>'rgba(108,117,125,.1)'];
    @endphp
    <div class="mb-1">
        <div class="type-chips-wrap" id="typeChipsWrap">
            <button class="type-chip active" data-type="all"
                style="--chip-border:#6c757d;--chip-active-text:#fff;">
                全部
            </button>
            @foreach($projectTypes as $pt)
            <button class="type-chip" data-type="{{ $pt->label }}"
                style="--chip-border:{{ $bsSolid[$pt->color] ?? '#6c757d' }};--chip-active-text:{{ $chipActiveTx[$pt->color] ?? '#fff' }};--chip-light:{{ $bsLight[$pt->color] ?? 'rgba(108,117,125,.15)' }};">
                <span class="chip-dot"></span>{{ $pt->label }}
            </button>
            @endforeach
        </div>
        <div class="form-check mt-2 mb-0">
            <input class="form-check-input" type="checkbox" id="hideEmpty" autocomplete="off">
            <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 = $projectTypes->pluck('label')->all(); @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">
                                        @if($project->project_category === '產品')
                                          <span class="cat-badge cat-badge-product">產品</span>
                                        @elseif($project->project_category === '專案')
                                          <span class="cat-badge cat-badge-project">專案</span>
                                        @endif
                                        <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 = {!! json_encode($projectTypes->pluck('label')->all()) !!};

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

    function applyFilters() {
        const sel       = window._currentTypeFilter || '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('#typeChipsWrap .type-chip').forEach(chip => {
        chip.addEventListener('click', () => {
            document.querySelectorAll('#typeChipsWrap .type-chip').forEach(c => c.classList.remove('active'));
            chip.classList.add('active');
            window._currentTypeFilter = chip.dataset.type;
            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