@extends('layouts.app')

@php
    // One duration format across every report and export — see App\Support\Duration.
    $hm = fn ($sec) => \App\Support\Duration::hhmmOrDash((int) $sec);

    // The free-time rules live in App\Support\FreeTime — Live People colours its
    // active-hours badge by the same figure, and the two must not drift.
    $freeMinutes = fn ($sec) => \App\Support\FreeTime::minutes((int) $sec);
    $hmSigned    = fn ($sec) => \App\Support\FreeTime::label((int) $sec);
    $freeClass   = fn ($sec) => \App\Support\FreeTime::textClass((int) $sec);
@endphp

@section('header')
    <div class="row g-2 align-items-center">
        <div class="col">
            <div class="page-pretitle">Reports</div>
            <h2 class="page-title">Timesheet</h2>
        </div>
    </div>
@endsection

@section('content')
{{-- Filters --}}
<div class="card mb-3">
    <div class="card-body">
        <form method="GET" action="{{ route('reports.timesheet') }}" class="row g-2 align-items-end" id="ts-form">
            <div class="col-sm-6 col-md-4 col-lg-3">
                <label class="form-label">Date range</label>
                <div class="input-icon">
                    <span class="input-icon-addon"><i class="ti ti-calendar"></i></span>
                    {{-- Display only. The real values ride in the hidden inputs
                         below, so the server contract stays ?from=&to= and the
                         form still submits the current range if JS never runs. --}}
                    <input type="text" class="form-control" id="ts-range" autocomplete="off"
                           placeholder="Pick a date or range"
                           value="{{ $from->toDateString() === $to->toDateString()
                                     ? $from->format('d M Y')
                                     : $from->format('d M Y') . ' → ' . $to->format('d M Y') }}">
                </div>
                <input type="hidden" name="from" id="ts-from" value="{{ $from->toDateString() }}">
                <input type="hidden" name="to"   id="ts-to"   value="{{ $to->toDateString() }}">
            </div>
            <div class="col-auto">
                <x-employee-status-filter :selected="$status" label-class="form-label" />
            </div>
            <div class="col-sm-6 col-md">
                <label class="form-label">Employee</label>
                <div class="input-icon">
                    <span class="input-icon-addon"><i class="ti ti-search"></i></span>
                    <input type="text" class="form-control" name="q" value="{{ $q }}" placeholder="Name or employee id…">
                </div>
            </div>
            <div class="col-auto">
                <button class="btn btn-primary"><i class="ti ti-filter me-1"></i>Apply</button>
            </div>
            <div class="col-auto">
                {{-- type=button: inside the filter form, a default submit would
                     reload the page instead of exporting. --}}
                <button type="button" class="btn" id="ts-export" @disabled($rows->isEmpty())>
                    <i class="ti ti-file-spreadsheet me-1"></i>Export CSV
                </button>
            </div>
            @if ($q !== '' || $status !== \App\Support\EmployeeStatus::ACTIVE || request()->hasAny(['from', 'to']))
                <div class="col-auto">
                    <a href="{{ route('reports.timesheet') }}" class="btn btn-link">Reset</a>
                </div>
            @endif
        </form>
    </div>
</div>

<div class="card">
    <div class="table-responsive">
        <table class="table table-vcenter card-table table-striped">
            <thead>
                {{-- Every column sorts except the first: in grouped mode it holds
                     a span rather than a point in time, and the server has
                     already ordered the rows sensibly for both modes. --}}
                <tr>
                    <th>{{ $grouped ? 'Date Range' : 'Shift Date' }}</th>
                    <th class="ts-sort" data-type="text">Employee</th>
                    <th class="text-end ts-sort" data-type="num">Total Working</th>
                    <th class="text-end ts-sort" data-type="num">Total Active Hours</th>
                    <th class="text-end ts-sort" data-type="num">Input Activity</th>
                    <th class="text-end ts-sort" data-type="num">Idle/Free Time</th>
                </tr>
            </thead>
            <tbody>
                @forelse ($rows as $r)
                    {{-- data-csv carries the exact export value per cell. The
                         first two columns render more than they export (a
                         Working badge, the clock range, employee id, shift), so
                         scraping their text would drag all of that into the
                         file. --}}
                    <tr>
                        @if ($grouped)
                            @php
                                // One shift in a wide range still reads as a single
                                // date — "04 Aug – 04 Aug 2026" is just noise.
                                $span = $r['first_date'] === $r['last_date']
                                    ? \Illuminate\Support\Carbon::parse($r['first_date'])->format('d M Y')
                                    : \Illuminate\Support\Carbon::parse($r['first_date'])->format('d M')
                                      . ' – ' . \Illuminate\Support\Carbon::parse($r['last_date'])->format('d M Y');
                            @endphp
                            <td data-csv="{{ $span }}">
                                <div>
                                    {{ $span }}
                                    @if ($r['in_progress'])
                                        <span class="badge bg-green-lt ms-1"
                                              title="A shift in this range is still running — totals are still rising">
                                            <span class="status-dot status-dot-animated bg-green me-1"></span>Working
                                        </span>
                                    @endif
                                </div>
                                {{-- The row is a sum, so say how many shifts it sums.
                                     Without this a light week and a full one look
                                     identical until you read the hours. --}}
                                <div class="text-secondary small">
                                    {{ $r['shifts'] }} shift{{ $r['shifts'] === 1 ? '' : 's' }}
                                </div>
                            </td>
                        @else
                            <td data-csv="{{ \Illuminate\Support\Carbon::parse($r['shift_date'])->format('D, d M Y') }}">
                                <div>
                                    {{ \Illuminate\Support\Carbon::parse($r['shift_date'])->format('D, d M Y') }}
                                    @if ($r['in_progress'])
                                        {{-- Shift hasn't reached its scheduled end, so every
                                             figure on this row is still climbing. --}}
                                        <span class="badge bg-green-lt ms-1"
                                              title="Shift ends {{ $r['ends_at']->copy()->tz($r['tz'])->format('D H:i') }} — totals are still rising">
                                            <span class="status-dot status-dot-animated bg-green me-1"></span>Working
                                        </span>
                                    @endif
                                </div>
                                <div class="text-secondary small">
                                    {{ $r['started_at']->copy()->tz($r['tz'])->format('H:i') }}
                                    →
                                    {{ $r['ended_at']->copy()->tz($r['tz'])->format('H:i') }}
                                    @if ($r['ended_at']->copy()->tz($r['tz'])->toDateString() !== $r['shift_date'])
                                        <span class="badge bg-purple-lt ms-1" title="Ran past midnight into the next day">+1d</span>
                                    @endif
                                </div>
                            </td>
                        @endif
                        <td data-csv="{{ $r['name'] }}" data-sort="{{ mb_strtolower($r['name']) }}">
                            <div>{{ $r['name'] }}</div>
                            <div class="text-secondary small">
                                {{ $r['employee_id'] ?: $r['designation'] ?: '—' }}
                                @if ($r['shift_start'])
                                    <span class="ms-1">· shift {{ substr($r['shift_start'], 0, 5) }}–{{ substr($r['shift_end'], 0, 5) }}</span>
                                @else
                                    <span class="ms-1 text-secondary"
                                          title="No shift configured — calendar days, {{ \App\Services\Reports\TimesheetService::DEFAULT_SHIFT_HOURS }}h assumed">· no shift set</span>
                                @endif
                            </div>
                        </td>
                        <td class="text-end" data-sort="{{ (int) $r['working_sec'] }}" data-csv="{{ $hm($r['working_sec']) }}">{{ $hm($r['working_sec']) }}</td>
                        <td class="text-end" data-sort="{{ (int) $r['active_sec'] }}" data-csv="{{ $hm($r['active_sec']) }}">{{ $hm($r['active_sec']) }}</td>
                        {{-- Measured keyboard/mouse time, with the share of the
                             session it was measured against. An em dash means the
                             agent never sampled — a pre-1.15.0 row — which is not
                             the same as having sat still. --}}
                        {{-- The percentage alone. The measured duration stays on
                             hover: as a column it competed with Total Active
                             Hours right beside it, and the share is the thing
                             being compared between rows. --}}
                        <td class="text-end"
                            data-sort="{{ $r['activity_pct'] === null ? -1 : (int) $r['activity_pct'] }}"
                            {{-- Bare number in the export: a spreadsheet reads "62%"
                                 as text and refuses to average a column of them.
                                 The sign stays on screen, where it is a label
                                 rather than a value. --}}
                            data-csv="{{ $r['activity_pct'] === null ? '—' : $r['activity_pct'] }}">
                            @if ($r['activity_pct'] === null)
                                <span class="text-secondary" title="Not measured — recorded before the agent sampled input">—</span>
                            @else
                                <span title="{{ \App\Support\Duration::compact((int) $r['input_sec']) }} of input across {{ \App\Support\Duration::compact((int) $r['active_sec']) }} tracked">{{ $r['activity_pct'] }}%</span>
                            @endif
                        </td>
                        <td class="text-end {{ $freeClass($r['free_sec']) }}"
                            data-sort="{{ (int) $r['free_sec'] }}"
                            data-csv="{{ $hmSigned($r['free_sec']) }}"
                            title="{{ $freeMinutes($r['free_sec']) === 0
                                        ? 'On the expected day'
                                        : ($r['free_sec'] < 0
                                            ? $hmSigned(-$r['free_sec']) . ' active beyond the expected day'
                                            : 'Short of the expected day') }}">{{ $hmSigned($r['free_sec']) }}</td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="6" class="text-center text-secondary py-5">
                            No tracked time in this range.
                        </td>
                    </tr>
                @endforelse
            </tbody>
            @if ($rows->isNotEmpty())
                <tfoot>
                    <tr class="fw-bold">
                        {{-- In grouped mode a row is an employee, not a shift, so
                             count both: "12 employees · 84 shifts". --}}
                        <td colspan="2">
                            @if ($grouped)
                                {{ $rows->count() }} employee{{ $rows->count() === 1 ? '' : 's' }}
                                · {{ $rows->sum('shifts') }} shift{{ $rows->sum('shifts') === 1 ? '' : 's' }}
                            @else
                                {{ $rows->count() }} shift{{ $rows->count() === 1 ? '' : 's' }}
                            @endif
                        </td>
                        <td class="text-end">{{ $hm($totals['working_sec']) }}</td>
                        <td class="text-end">{{ $hm($totals['active_sec']) }}</td>
                        <td class="text-end">
                            @if ($totals['activity_pct'] === null)
                                <span class="text-secondary">—</span>
                            @else
                                <span title="{{ \App\Support\Duration::compact((int) $totals['input_sec']) }} of input across {{ \App\Support\Duration::compact((int) $totals['active_sec']) }} tracked">{{ $totals['activity_pct'] }}%</span>
                            @endif
                        </td>
                        <td class="text-end {{ $freeClass($totals['free_sec']) }}">{{ $hmSigned($totals['free_sec']) }}</td>
                    </tr>
                </tfoot>
            @endif
        </table>
    </div>
    <div class="card-footer text-secondary small">
        {{ $from->format('d M Y') }} – {{ $to->format('d M Y') }} ·
        Total Working = shift − break · Idle/Free Time = Total Working − Active ·
        ranges are capped at {{ $maxDays }} days
    </div>
</div>

{{-- Below the table on purpose: it explains the columns, so it's reference for
     someone already reading them, not a preamble to get past first. --}}
<div class="alert alert-info mt-3">
    <div>
        <i class="ti ti-info-circle me-1"></i>
        @if ($grouped)
            <strong>Date Range</strong> rows sum every shift an employee worked in the range —
            one row each, not one per day. Pick a single date to see the shifts individually.
        @else
            <strong>Shift Date</strong> is the day a shift <em>started</em>. A night shift that runs
            past midnight — or a flexible day that stretches into the next morning — stays on the
            date it began, so it reads as one row rather than two half-days.
        @endif
        <strong>Total Working</strong> is the <em>scheduled</em> shift minus the
        rostered break — a 9h shift with an hour out is an 8h day. It is what was expected,
        not what was tracked. Employees with no shift on file are reported on plain calendar
        days and assumed to work {{ \App\Services\Reports\TimesheetService::DEFAULT_SHIFT_HOURS }} hours.
        <strong>Idle/Free Time</strong> is capped by that expected day — <em>Total Working − Active</em>,
        never more than the shift itself. <span class="text-red">Red</span> is time still owed,
        <span class="text-blue">blue</span> is exactly on target, and
        <span class="text-green">green</span> is time active beyond the shift.
    </div>
</div>
@endsection

@push('styles')
    {{-- Tabler's overrides for Litepicker live in this vendors bundle, which
         the base layout doesn't load. Litepicker v2 itself needs no stylesheet
         — it injects its base CSS from the JS bundle. --}}
    <link rel="stylesheet" href="{{ asset('tabler/core/dist/css/tabler-vendors.min.css') }}">
    @include('partials.litepicker-theme')
    <style>
        #ts-range { cursor: pointer; }

        /* Sortable headers. The caret is always in the DOM at low opacity so the
           header doesn't reflow — and jog the column under the cursor — the
           moment a sort is applied. */
        th.ts-sort { cursor: pointer; user-select: none; white-space: nowrap; }
        th.ts-sort::after {
            content: "↕";
            opacity: .25;
            margin-inline-start: .35rem;
            font-size: .85em;
        }
        th.ts-sort[aria-sort="ascending"]::after  { content: "↑"; opacity: 1; }
        th.ts-sort[aria-sort="descending"]::after { content: "↓"; opacity: 1; }
    </style>
@endpush

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/litepicker/dist/litepicker.js"></script>
<script>
(function () {
    const el = document.getElementById('ts-range');
    // Loaded from a CDN, so assume nothing: a blocked or slow jsDelivr leaves
    // Litepicker undefined. The hidden inputs still hold a valid range, so the
    // form keeps submitting the window the page was rendered for.
    if (!el || typeof Litepicker === 'undefined') return;

    const form = document.getElementById('ts-form');
    const from = document.getElementById('ts-from');
    const to   = document.getElementById('ts-to');
    const iso  = (d) => d.format('YYYY-MM-DD');

    // Two months side by side need room; one column on a phone.
    const narrow = window.matchMedia('(max-width: 767.98px)');
    const columns = () => (narrow.matches ? 1 : 2);

    const picker = new Litepicker({
        element: el,
        singleMode: false,          // one input, two dates
        allowRepick: true,
        autoApply: true,
        format: 'DD MMM YYYY',
        delimiter: ' → ',
        startDate: from.value,
        endDate: to.value,
        maxDate: @json(now()->toDateString()),   // no future shifts to report on
        numberOfMonths: columns(),
        numberOfColumns: columns(),
        setup: (p) => {
            p.on('selected', (d1, d2) => {
                from.value = iso(d1);
                // A single tap is a one-day range, which is also the default.
                to.value = iso(d2 ?? d1);
                form.submit();
            });
        },
    });

    narrow.addEventListener('change', () => picker.setOptions({
        numberOfMonths: columns(),
        numberOfColumns: columns(),
    }));
})();
</script>

<script>
// Client-side column sort. The whole result set is already on the page — it's
// capped at a 92-day range — so sorting in the DOM avoids a round trip and
// keeps the CSV export honest: it reads the same rows in the same order.
(function () {
    const table = document.querySelector('.card-table');
    const tbody = table?.querySelector('tbody');
    if (!table || !tbody) return;

    const headers = [...table.querySelectorAll('th.ts-sort')];
    // The "no tracked time" placeholder is one wide cell — never sort it.
    const sortable = () => [...tbody.rows].filter((r) => r.cells.length === table.querySelectorAll('thead th').length);

    // data-sort is authoritative; textContent is the fallback for any cell that
    // doesn't set one. Times must sort on raw seconds — as text, "45m" would
    // land above "3h 0m", and a zero renders as an em dash.
    const key = (row, i, type) => {
        const cell = row.cells[i];
        const raw = cell?.dataset.sort ?? cell?.textContent.trim() ?? '';
        return type === 'num' ? (parseFloat(raw) || 0) : raw.toLowerCase();
    };

    headers.forEach((th) => th.addEventListener('click', () => {
        const i = [...th.parentNode.children].indexOf(th);
        const type = th.dataset.type === 'num' ? 'num' : 'text';
        const dir = th.getAttribute('aria-sort') === 'ascending' ? -1 : 1;

        const rows = sortable();
        if (!rows.length) return;

        rows.sort((a, b) => {
            const x = key(a, i, type), y = key(b, i, type);
            if (x < y) return -1 * dir;
            if (x > y) return 1 * dir;
            return 0;
        });

        headers.forEach((h) => h.removeAttribute('aria-sort'));
        th.setAttribute('aria-sort', dir === 1 ? 'ascending' : 'descending');
        rows.forEach((r) => tbody.appendChild(r));
    }));
})();
</script>

<script>
// CSV export of exactly what's on screen — same range, same employee filter,
// same rows. Built from the DOM rather than a second server round trip, so the
// file can never disagree with the table it was exported from.
(function () {
    const btn = document.getElementById('ts-export');
    const table = document.querySelector('.card-table');
    if (!btn || !table) return;

    // RFC 4180: quote everything, double any embedded quote. Names carry commas
    // ("Patel, Parth") and the em dash placeholder is fine as text.
    const cell = (value) => '"' + String(value ?? '').trim().replace(/"/g, '""') + '"';

    const rowValues = (tr) => [...tr.children].map((td) =>
        // data-csv is the source of truth; textContent is only a fallback for
        // cells that don't set one.
        td.dataset.csv !== undefined ? td.dataset.csv : td.textContent.replace(/\s+/g, ' ')
    );

    btn.addEventListener('click', () => {
        const head = [...table.querySelectorAll('thead th')].map((th) => th.textContent.trim());
        const body = [...table.querySelectorAll('tbody tr')]
            // Skip the "no rows" placeholder, which is a single wide cell.
            .filter((tr) => tr.children.length === head.length)
            .map(rowValues);

        if (!body.length) return;

        const csv = [head, ...body].map((r) => r.map(cell).join(',')).join('\r\n');

        // BOM first, or Excel reads UTF-8 names as mojibake.
        const blob = new Blob(['' + csv], { type: 'text/csv;charset=utf-8;' });
        const url = URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = `timesheet_${@json($from->toDateString())}_to_${@json($to->toDateString())}.csv`;
        document.body.appendChild(a);
        a.click();
        a.remove();
        URL.revokeObjectURL(url);
    });
})();
</script>
@endpush