@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>
.timesheet-table th,
.timesheet-table td { white-space: nowrap; vertical-align: middle; font-size: .85rem; }
.timesheet-table td.project-name-cell { white-space: normal; min-width: 140px; }

.sticky-col  { position: sticky; left: 0;     z-index: 3; }
.sticky-col2 { position: sticky; left: 80px;  z-index: 3; }
.sticky-col3 { position: sticky; left: 220px; z-index: 3; }
.sticky-col4 { position: sticky; left: 320px; z-index: 3; }
thead .sticky-col,
thead .sticky-col2,
thead .sticky-col3,
thead .sticky-col4 { z-index: 4; }
</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">
            <div class="d-flex flex-wrap gap-3 align-items-center">
                <form method="GET" action="{{ route('time-sheets.yearly') }}" class="d-flex align-items-center gap-2">
                    <label class="fw-medium mb-0">年度</label>
                    <select name="year" class="form-select" style="width:120px" onchange="this.form.submit()">
                        @foreach($yearOptions as $y)
                            <option value="{{ $y }}" {{ $y == $currentYear ? 'selected' : '' }}>{{ $y }} 年</option>
                        @endforeach
                    </select>
                </form>
                <div class="ms-auto">
                    <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>
            </div>
        </div>
    </div>

    {{-- 類型篩選 --}}
    <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>

    @if($projectsByType->isEmpty())
        <div class="alert alert-info">{{ $currentYear }} 年尚無工時記錄。</div>
    @else

    <div class="card shadow-sm border-0 rounded-3">
        <div class="card-header bg-white py-3 border-0">
            <h5 class="fw-bold text-primary mb-0">{{ $currentYear }} 年度工時統計</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(range(1, 12) as $m)
                                <th class="text-center" style="min-width:75px">{{ $m }}月</th>
                            @endforeach
                            <th class="text-center" style="min-width:85px">合計</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($projectsByType as $type => $projects)
                            <tr class="table-secondary type-group-row" data-type="{{ $type }}">
                                <th colspan="17" class="text-center fw-bold">{{ $type }}</th>
                            </tr>
                            @foreach($projects as $project)
                                @php
                                    $rowTotal = $rowTotalMd = 0;
                                    for($m = 1; $m <= 12; $m++) {
                                        $rowTotal   += $matrix[$project->id][$m]['hours']    ?? 0;
                                        $rowTotalMd += $matrix[$project->id][$m]['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" style="background:inherit">
                                        <small>{{ $project->client?->name ?? '—' }}</small>
                                    </td>
                                    <td class="sticky-col2 project-name-cell align-middle" style="background:inherit">
                                        <span class="fw-medium">{{ $project->name }}</span>
                                    </td>
                                    <td class="sticky-col3 text-center align-middle" style="background:inherit">
                                        <small>{{ $project->end_date ? \Carbon\Carbon::parse($project->end_date)->format('Y-m-d') : '—' }}</small>
                                    </td>
                                    <td class="sticky-col4 text-center align-middle" style="background:inherit">
                                        @if(!is_null($estimatedManDays[$project->project_id] ?? null))
                                            <small>{{ $estimatedManDays[$project->project_id] }}天</small>
                                        @else
                                            <small class="text-muted">—</small>
                                        @endif
                                    </td>
                                    @foreach(range(1, 12) as $m)
                                        @php
                                            $h  = $matrix[$project->id][$m]['hours']    ?? 0;
                                            $md = $matrix[$project->id][$m]['man_days'] ?? 0;
                                        @endphp
                                        <td class="text-center align-middle">
                                            @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" colspan="4" style="background:#212529"><strong>月合計</strong></td>
                            @foreach(range(1, 12) as $m)
                                <td class="text-center">
                                    <span class="hours-display">{{ ($monthTotals[$m]['hours'] ?? 0) > 0 ? rtrim(rtrim(number_format($monthTotals[$m]['hours'], 2), '0'), '.') : '—' }}</span>
                                    <span class="man-days-display" style="display:none">{{ ($monthTotals[$m]['man_days'] ?? 0) > 0 ? number_format($monthTotals[$m]['man_days'], 2) : '—' }}</span>
                                </td>
                            @endforeach
                            <td class="text-center fw-bold">
                                <span class="hours-display">{{ rtrim(rtrim(number_format($totals['hours'], 2), '0'), '.') }}小時</span>
                                <span class="man-days-display" style="display:none">{{ number_format($totals['man_days'], 2) }}天</span>
                            </td>
                        </tr>
                    </tfoot>
                </table>
            </div>
        </div>
    </div>
    @endif
</div>
@endsection

@push('scripts')
<script>
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 ? '' : 'none');
            document.querySelectorAll('.man-days-display').forEach(el => el.style.display = showH ? 'none' : '');
        });
    });
});
</script>
@endpush