@extends('layouts.app')

@section('header')
    <div class="row g-2 align-items-center">
        <div class="col">
            <div class="page-pretitle">Monitoring</div>
            <h2 class="page-title">People Screenshots</h2>
        </div>
        @if ($summary)
            <div class="col-auto text-secondary">{{ $summary['shots'] }} screenshots</div>
        @endif
    </div>
@endsection

@section('content')
@php
    $fmtDur = fn ($sec) => \App\Support\Duration::compact((int) $sec);
@endphp

{{-- ── Filter bar: ‹ date › · employee · timezone · group by ─────────── --}}
<div class="card mb-3">
    <div class="card-body py-2">
        <form id="shotFilters" method="GET" action="{{ route('screenshots.index') }}"
              class="row g-2 align-items-end">
            <div class="col-auto">
                <label class="form-label mb-1">Date</label>
                <div class="input-group">
                    <button type="button" class="btn btn-icon" id="datePrev" title="Previous day">
                        <i class="ti ti-chevron-left"></i>
                    </button>
                    {{-- Display only. The real value rides in the hidden input
                         below, so the arrows, the picker and a page whose JS
                         never ran all submit the same ?date=. --}}
                    <input type="text" class="form-control text-center" id="dateInput" autocomplete="off"
                           value="{{ \Illuminate\Support\Carbon::parse($filters['date'])->format('d M Y') }}">
                    <input type="hidden" name="date" id="dateValue" value="{{ $filters['date'] }}">
                    <button type="button" class="btn btn-icon" id="dateNext" title="Next day"
                            @disabled($isToday) @if($isToday) style="cursor:not-allowed;" @endif>
                        <i class="ti ti-chevron-right"></i>
                    </button>
                </div>
            </div>
            <div class="col-auto">
                {{-- Narrows the employee list below. Changing it clears a
                     selected user who no longer qualifies — the controller
                     drops any id that isn't in the filtered set. --}}
                <x-employee-status-filter :selected="$filters['status']" />
            </div>
            <div class="col-md-3">
                <label class="form-label mb-1">Employee</label>
                {{-- Upgraded to a searchable Tom Select below; the inline
                     onchange stays so the plain <select> still works if that
                     script never loads. --}}
                <select name="user" id="userSelect" class="form-select" onchange="this.form.submit()">
                    <option value="">— Select user —</option>
                    @foreach ($employees as $id => $name)
                        <option value="{{ $id }}" @selected(($filters['user'] ?? '') == $id)>{{ $name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-auto">
                <label class="form-label mb-1">Group by</label>
                <select name="group" class="form-select" onchange="this.form.submit()">
                    <option value="hour" @selected($groupBy === 'hour')>Hour</option>
                    <option value="task" @selected($groupBy === 'task')>Task</option>
                </select>
            </div>
            <div class="col-auto">
                <button type="submit" class="btn btn-primary">Apply</button>
            </div>

            @if ($window && ! $window['start']->isStartOfDay())
                {{-- Only worth saying when the day is NOT midnight-to-midnight:
                     otherwise it just restates the date already in the picker. --}}
                <div class="col-12">
                    <div class="text-secondary small mt-1">
                        <i class="ti ti-clock-shield me-1"></i>
                        {{ \App\Support\ReportingDay::label($dayMode) }} —
                        <strong>{{ $window['start']->format('D d M, H:i') }}</strong>
                        to
                        <strong>{{ $window['end']->format('D d M, H:i') }}</strong>
                        @if ($shift)
                            (24h, from this employee's
                            {{ \Illuminate\Support\Str::of($shift['start'] ?? '')->substr(0, 5) }}–{{ \Illuminate\Support\Str::of($shift['end'])->substr(0, 5) }} shift)
                        @endif
                    </div>
                </div>
            @endif
        </form>
    </div>
</div>

@if ($summary)
    {{-- ── Day summary strip (from time_intervals) ───────────────────── --}}
    <div class="row row-cards mb-3">
        @php
            $cards = [
                ['icon' => 'ti-login-2',      'color' => 'purple', 'value' => $summary['checkIn'] ?? '—',     'label' => 'Check In'],
                ['icon' => 'ti-logout-2',     'color' => 'red',    'value' => $summary['checkOut'] ?? '—',    'label' => 'Check Out'],
                ['icon' => 'ti-clock-play',   'color' => 'green',  'value' => $fmtDur($summary['activeSec']), 'label' => 'Active Time'],
                ['icon' => 'ti-clock-pause',  'color' => 'gray',   'value' => $fmtDur($summary['idleSec']),   'label' => 'Idle / Breaks'],
                ['icon' => 'ti-photo',        'color' => 'blue',   'value' => $summary['shots'],              'label' => 'Screenshots'],
            ];

            // Only when something was actually measured. A day recorded before
            // 1.15.0 has no input figure at all, and showing "0%" there would
            // assert the employee sat still when the truth is nobody looked.
            if (($summary['inputPercent'] ?? null) !== null) {
                $cards[] = [
                    'icon' => 'ti-activity', 'color' => 'azure',
                    'value' => $summary['inputPercent'] . '%', 'label' => 'Avg. Input Activity',
                ];
            }
        @endphp
        @foreach ($cards as $card)
            <div class="col-6 col-md">
                <div class="card card-sm">
                    <div class="card-body d-flex align-items-center gap-2 py-2">
                        <span class="avatar avatar-sm bg-{{ $card['color'] }}-lt">
                            <i class="ti {{ $card['icon'] }}"></i>
                        </span>
                        <div>
                            <div class="fw-bold">{{ $card['value'] }}</div>
                            <div class="text-secondary small">{{ $card['label'] }}</div>
                        </div>
                    </div>
                </div>
            </div>
        @endforeach
    </div>

    @if ($capped)
        <div class="alert alert-warning py-2">Showing the first 1000 screenshots of this day.</div>
    @endif

    @php
        /**
         * The 5-minute window a capture belongs to — "07:30 – 07:35" rather than
         * "07:33:31". The agent takes one shot per 5-minute window at a random
         * offset inside it, so the exact second is an artefact of that jitter and
         * reads as false precision. Two shots in one window share a label, which
         * is correct: they are from the same window.
         */
        $slot = function ($at) use ($tz) {
            if (! $at) return '—';
            $t = $at->copy()->tz($tz);
            $from = $t->copy()->setTime($t->hour, intdiv($t->minute, 5) * 5, 0);
            return $from->format('H:i') . ' – ' . $from->copy()->addMinutes(5)->format('H:i');
        };

        /**
         * Every capture on the page, in the order it is rendered — the index
         * the lightbox carousel steps through, so one modal serves the whole
         * day rather than a modal per thumbnail.
         */
        $ordered = $groupBy === 'task'
            ? $byGroup->flatMap(fn ($g) => $g)->values()
            : $segments->flatMap(fn ($seg) => $seg['shots'])->values();
        $slideOf = [];
        foreach ($ordered as $i => $o) { $slideOf[$o->id] = $i; }

        $dur = fn ($from, $to) => \App\Support\Duration::compact((int) $from->diffInSeconds($to));
    @endphp

    {{-- ── Screenshots: a timeline in hour mode, plain cards by task ────── --}}
    @if ($groupBy !== 'task')
        @forelse ($segments as $seg)
            @if ($loop->first)
                <div class="card mb-3">
                    <div class="card-body">
                        <ul class="steps steps-vertical ss-timeline">
            @endif

            {{-- A break is a step in its own right: it is the reason the hour
                 above it stops early, and an empty gap explains a thin day
                 better than a missing card does. --}}
            <li class="step-item {{ $seg['type'] === 'work' ? 'active' : '' }}">
                <div class="d-flex align-items-center gap-2 flex-wrap">
                    <span class="h3 m-0">
                        @if ($seg['start']->equalTo($seg['end']))
                            {{-- A single stray capture is an instant, not a
                                 span: "12:39 – 12:39" reads as a broken range. --}}
                            {{ $seg['start']->format('H:i') }}
                        @else
                            {{ $seg['start']->format('H:i') }} – {{ $seg['end']->format('H:i') }}
                        @endif
                    </span>
                    @if ($seg['type'] === 'break')
                        <span class="badge bg-yellow-lt">
                            <i class="ti ti-coffee me-1"></i>Break
                        </span>
                        @if (($seg['tracked'] ?? 0) > 0)
                            {{-- The timer kept banking checkpoints through this
                                 gap — a machine asleep with tracking on wakes
                                 every few minutes. Say what it charged. --}}
                            <span class="badge bg-orange-lt"
                                  title="The machine woke periodically with the timer still running and banked {{ $dur($seg['start'], $seg['start']->copy()->addSeconds($seg['tracked'])) }} of tracked time during this gap, with no screenshots and no keyboard or mouse input.">
                                <i class="ti ti-zzz me-1"></i>{{ $dur($seg['start'], $seg['start']->copy()->addSeconds($seg['tracked'])) }} still tracked
                            </span>
                        @endif
                    @elseif ($seg['type'] === 'untracked')
                        <span class="badge bg-secondary-lt"
                              title="Captured with no tracked interval behind it. Usually the idle auto-stop: after {{ round($idleTimeoutSec / 60) }} minutes with no keyboard or mouse it closes the interval backdated to the last real input, then takes one final screenshot — so this capture lands just past the time it was billed against.">
                            <i class="ti ti-alert-triangle me-1"></i>Untracked
                        </span>
                    @endif
                    <span class="text-secondary small">
                        {{-- No duration on an untracked card. It has no interval
                             behind it, so there is no measured span to state —
                             the old hour-wide box invented one, and drew it
                             straight through the tracked time below it. --}}
                        @if ($seg['type'] !== 'untracked'){{ $dur($seg['start'], $seg['end']) }}@endif
                        @if ($seg['type'] === 'work' || $seg['shots']->isNotEmpty())
                            @if ($seg['type'] !== 'untracked') · @endif{{ $seg['shots']->count() }} shot{{ $seg['shots']->count() === 1 ? '' : 's' }}
                        @endif
                    </span>
                </div>

                @if ($seg['type'] === 'break' && $seg['shots']->isEmpty())
                    {{-- No caption: the badge and the duration beside it already
                         say what this is, and a rule reads the interruption
                         faster than a sentence does when scanning a long day.
                         No activity bar either — a break has no session to
                         measure against, so a percentage there would be
                         meaningless even if input was recorded during it. --}}
                    <hr class="ss-break-rule my-3">
                @else
                    @if ($seg['type'] === 'break')
                        {{-- A gap that still produced captures is not the same
                             claim as an empty one, and the shots are the whole
                             evidence for it — they used to be collected and then
                             thrown away on this exact card. Ordinarily this is
                             the idle auto-stop's parting screenshot; a run of
                             them through a long gap is worth a second look. --}}
                        <div class="text-secondary small mt-1">
                            Captured during this gap — the screen was active while the timer was not.
                        </div>
                    @endif
                    @if ($seg['activity'])
                        {{-- Input-active share of the tracked session in this
                             segment. Absent entirely when nothing in it was
                             measured — "not measured" is not 0%. --}}
                        <div class="mt-2" style="max-width:26rem;">
                            <div class="d-flex align-items-center justify-content-between small mb-1">
                                <span class="text-secondary">Input activity</span>
                                <span class="fw-medium">{{ $seg['activity']['percent'] }}%</span>
                            </div>
                            <div class="progress progress-sm"
                                 title="{{ $seg['activity']['inputSec'] }}s of keyboard/mouse input across {{ $seg['activity']['activeSec'] }}s tracked">
                                <div class="progress-bar" role="progressbar"
                                     style="width: {{ $seg['activity']['percent'] }}%"
                                     aria-valuenow="{{ $seg['activity']['percent'] }}"
                                     aria-valuemin="0" aria-valuemax="100">
                                    <span class="visually-hidden">{{ $seg['activity']['percent'] }}% input activity</span>
                                </div>
                            </div>
                        </div>
                    @endif
                    <div class="row g-3 mt-1">
                        @foreach ($seg['shots'] as $shot)
                            <div class="col-6 col-sm-4 col-md-3 col-lg-2">
                                <button type="button"
                                        class="ss-thumb d-block w-100 p-0 border rounded overflow-hidden position-relative"
                                        data-bs-toggle="modal" data-bs-target="#shotLightbox"
                                        data-slide="{{ $slideOf[$shot->id] ?? 0 }}">
                                    <img src="{{ route('screenshots.file', $shot) }}" alt="screenshot"
                                         loading="lazy" style="width:100%;height:96px;object-fit:cover;display:block;">
                                    @if (($shot->display_count ?? 1) > 1)
                                        <span class="badge bg-dark-lt position-absolute" style="top:4px;right:4px;">
                                            <i class="ti ti-device-desktop me-1"></i>{{ $shot->display_index }}/{{ $shot->display_count }}
                                        </span>
                                    @endif
                                </button>
                                <div class="mt-1 small">
                                    <div class="text-body ss-thumb-time" title="{{ $shot->captured_at?->copy()->tz($tz)->format('H:i:s') }}">{{ $slot($shot->captured_at) }}</div>
                                    <div class="text-secondary text-truncate">{{ $tasks[$shot->task_id] ?? 'Task #'.$shot->task_id }}</div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                @endif
            </li>

            @if ($loop->last)
                        </ul>
                    </div>
                </div>
            @endif
        @empty
            <div class="card">
                <div class="empty">
                    <div class="empty-icon"><i class="ti ti-photo-off" style="font-size:2rem;"></i></div>
                    <p class="empty-title">No screenshots this day</p>
                    <p class="empty-subtitle text-secondary">Nothing was captured for this employee on {{ $filters['date'] }}.</p>
                </div>
            </div>
        @endforelse
    @else
        {{-- Task mode stays a plain card per task: tasks aren't a timeline, and
             the same task recurs all day, so steps would imply an order that
             isn't there. --}}
        @forelse ($byGroup as $groupKey => $shots)
            <div class="card mb-3">
                <div class="card-header py-2">
                    <h3 class="card-title">{{ $tasks[$groupKey] ?? 'Task #'.$groupKey }}</h3>
                    <span class="card-subtitle ms-2 text-secondary">{{ $shots->count() }} shots</span>
                </div>
                <div class="card-body">
                    <div class="row g-3">
                        @foreach ($shots as $shot)
                            <div class="col-6 col-sm-4 col-md-3 col-lg-2">
                                <button type="button"
                                        class="ss-thumb d-block w-100 p-0 border rounded overflow-hidden position-relative"
                                        data-bs-toggle="modal" data-bs-target="#shotLightbox"
                                        data-slide="{{ $slideOf[$shot->id] ?? 0 }}">
                                    <img src="{{ route('screenshots.file', $shot) }}" alt="screenshot"
                                         loading="lazy" style="width:100%;height:96px;object-fit:cover;display:block;">
                                    @if (($shot->display_count ?? 1) > 1)
                                        <span class="badge bg-dark-lt position-absolute" style="top:4px;right:4px;">
                                            <i class="ti ti-device-desktop me-1"></i>{{ $shot->display_index }}/{{ $shot->display_count }}
                                        </span>
                                    @endif
                                </button>
                                <div class="mt-1 small">
                                    <div class="text-body ss-thumb-time" title="{{ $shot->captured_at?->copy()->tz($tz)->format('H:i:s') }}">{{ $slot($shot->captured_at) }}</div>
                                    <div class="text-secondary text-truncate">{{ $tasks[$shot->task_id] ?? 'Task #'.$shot->task_id }}</div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        @empty
            <div class="card">
                <div class="empty">
                    <div class="empty-icon"><i class="ti ti-photo-off" style="font-size:2rem;"></i></div>
                    <p class="empty-title">No screenshots this day</p>
                    <p class="empty-subtitle text-secondary">Nothing was captured for this employee on {{ $filters['date'] }}.</p>
                </div>
            </div>
        @endforelse
    @endif
    {{-- ── Lightbox ─────────────────────────────────────────────────────
         One modal for the whole day, not one per thumbnail. The grid has
         already downloaded every full-size file — the thumbnails ARE those
         files, scaled by CSS — so with the immutable cache header on
         screenshots.file the carousel re-renders them from cache and issues no
         second request.

         Slides carry data-src rather than src: a thousand <img> elements with
         live sources would be a thousand decoded bitmaps in memory even though
         the bytes are cached. Only the visible slide and its neighbours are
         materialised. --}}
    @if ($ordered->isNotEmpty())
        <div class="modal modal-blur fade" id="shotLightbox" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog ss-modal-roomy" role="document">
                <div class="modal-content">
                    <div class="modal-header py-2">
                        <h5 class="modal-title" id="shotLightboxTitle"></h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body p-0 bg-dark d-flex align-items-center">
                        <div id="shotCarousel" class="carousel slide w-100" data-bs-ride="false" data-bs-interval="false">
                            <div class="carousel-inner">
                                @foreach ($ordered as $i => $shot)
                                    <div class="carousel-item @if ($i === 0) active @endif"
                                         data-caption="{{ $slot($shot->captured_at) }} · {{ $tasks[$shot->task_id] ?? 'Task #'.$shot->task_id }}@if (($shot->display_count ?? 1) > 1) · Screen {{ $shot->display_index }}/{{ $shot->display_count }}@endif">
                                        <img class="d-block w-100 ss-slide" alt="screenshot"
                                             data-src="{{ route('screenshots.file', $shot) }}">
                                        <div class="carousel-caption d-none d-md-block">
                                            <h3 class="m-0">{{ $slot($shot->captured_at) }}</h3>
                                            <p class="m-0">
                                                {{ $tasks[$shot->task_id] ?? 'Task #'.$shot->task_id }}
                                                · {{ $shot->captured_at?->copy()->tz($tz)->format('H:i:s') }}
                                            </p>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                            <a class="carousel-control-prev" href="#shotCarousel" role="button" data-bs-slide="prev">
                                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                                <span class="visually-hidden">Previous</span>
                            </a>
                            <a class="carousel-control-next" href="#shotCarousel" role="button" data-bs-slide="next">
                                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                <span class="visually-hidden">Next</span>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @endif

@else
    {{-- Nothing loads until an employee is picked — that's the point. --}}
    <div class="card">
        <div class="empty">
            <div class="empty-icon"><i class="ti ti-user-search" style="font-size:2rem;"></i></div>
            <p class="empty-title">Please select a user to see screenshots</p>
            <p class="empty-subtitle text-secondary">Pick an employee (and a date) above — screenshots load one person, one day at a time.</p>
        </div>
    </div>
@endif

@endsection

@push('styles')
    <style>
        /* The whole spine in the theme's primary, not just the active steps.
           Tabler colours only `.active` items and leaves the rest on the border
           grey, which read as a washed-out timeline. Bound to --tblr-primary
           rather than a named colour so it follows the theme rather than
           pinning itself to today's indigo. */
        .ss-timeline {
            --tblr-steps-inactive-color: var(--tblr-primary);
        }

        /* Room to breathe: each step holds a grid of thumbnails, so the default
           spacing ran them together and the time headings stopped separating
           one segment from the next. */
        .ss-timeline > .step-item {
            padding-block: .75rem 1.5rem;
        }
        .ss-timeline > .step-item:last-child {
            padding-bottom: .25rem;
        }

        /* Tom Select copies the trigger's classes onto its own wrapper, so the
           wrapper renders Bootstrap's border, padding and chevron AND the inner
           .ts-control renders its own — a box inside a box, with an inert arrow
           painted on the outer one. `form-select` has to stay on the markup so
           the plain <select> still looks right when the CDN is blocked, so the
           duplication is undone here instead.

           The wrapper becomes the only visible control; the chevron is redrawn
           on it so it can actually respond, rotating when the menu is open. */
        .ts-wrapper.form-select {
            position: relative;
            padding: 0;
            height: auto;
            background-image: none;
        }
        .ts-wrapper.form-select .ts-control {
            border: 0;
            background: transparent;
            box-shadow: none;
            min-height: 0;
            border-radius: inherit;
            padding: .4375rem 2.25rem .4375rem .75rem;
        }
        /* Tom Select's own caret, if the CDN stylesheet draws one. */
        .ts-wrapper.form-select .ts-control::after { display: none !important; }

        .ts-wrapper.form-select::after {
            content: "";
            position: absolute;
            top: 50%;
            right: .75rem;
            width: 1rem;
            height: 1rem;
            transform: translateY(-50%);
            background: var(--tblr-form-select-bg-img) no-repeat center / 1rem 1rem;
            pointer-events: none;
            transition: transform .15s ease-in-out;
        }
        /* Tom Select flags the wrapper while the menu is open — the arrow now
           reflects state instead of being decoration. */
        .ts-wrapper.form-select.dropdown-active::after {
            transform: translateY(-50%) rotate(180deg);
        }

        /* Thumbnails are buttons now, so strip the button chrome and keep the
           affordance the anchor used to give. */
        .ss-thumb { background: none; cursor: zoom-in; }
        .ss-thumb:focus-visible { outline: 2px solid var(--tblr-primary); outline-offset: 2px; }

        /* As large as the viewport allows while still reading as a modal.
           Bootstrap's edge-to-edge variant loses the frame entirely and looks
           like a page navigation — the opposite of what a lightbox should
           signal. This keeps the default modal's breathing room on every side. */
        .ss-modal-roomy {
            max-width: none;
            width: auto;
            margin: 1.75rem;
            height: calc(100vh - 3.5rem);
        }
        .ss-modal-roomy .modal-content { height: 100%; }

        /* Legibility over unknown pixels, without measuring them.
           
           Adapting to the background can't work here: mix-blend-mode difference
           turns white into 127 against mid-grey — invisible precisely where it
           is needed — and grey is common in screenshots. Sampling the image to
           pick a colour costs a canvas read per slide and still has to choose a
           losing colour somewhere on a mixed background.
           
           So contrast comes from the glyph's own OUTLINE instead of from the
           background. A light mark with a dark halo reads on white, on black,
           on grey and over a busy chart, because the edge supplies the contrast
           wherever the fill happens to match. This is what video subtitles do,
           and it costs nothing to render. */
        #shotCarousel .carousel-caption {
            color: #fff;
            -webkit-text-stroke: .6px rgba(0, 0, 0, .85);
            paint-order: stroke fill;
            text-shadow:
                0 1px 2px rgba(0, 0, 0, .95),
                0 0 6px rgba(0, 0, 0, .8);
        }

        #shotCarousel .carousel-control-prev-icon,
        #shotCarousel .carousel-control-next-icon {
            filter:
                drop-shadow(0 1px 2px rgba(0, 0, 0, .95))
                drop-shadow(0 0 4px rgba(0, 0, 0, .8));
        }
        /* Bootstrap dims the controls to 50% until hover, which halves the halo
           along with the glyph. They sit over someone's screen — they need to be
           readable before the pointer finds them. */
        #shotCarousel .carousel-control-prev,
        #shotCarousel .carousel-control-next { opacity: .9; }
        #shotCarousel .carousel-control-prev:hover,
        #shotCarousel .carousel-control-next:hover { opacity: 1; }

        /* Fit a whole screenshot rather than cropping it — the point of the
           lightbox is reading what was on the employee's display. Height is the
           dialog minus its own margins and the header. */
        .ss-slide {
            max-height: calc(100vh - 7rem);
            object-fit: contain;
            background: #000;
        }

        /* The break's own divider. Dashed and full-width so it reads as an
           interruption in the day rather than another section boundary. */
        .ss-break-rule {
            border: 0;
            border-top: 2px dashed var(--tblr-border-color);
            opacity: 1;
        }
    </style>

    {{-- Tabler themes both of these (litepicker + .ts-* live in this vendors
         bundle, which the base layout doesn't load), but it ships overrides
         only — Tom Select's base stylesheet still has to come from the CDN.
         Same pair of sources as Reports → Timesheet and Obvizio. --}}
    <link rel="stylesheet" href="{{ asset('tabler/core/dist/css/tabler-vendors.min.css') }}">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tom-select@2.3.1/dist/css/tom-select.css">
    @include('partials.litepicker-theme')
    <style>
        /* The picker's field sits between two icon buttons in an .input-group,
           so it can't be allowed to shrink to its content. */
        #dateInput { cursor: pointer; min-width: 9.5rem; }
        /* Nothing sizing Tom Select here on purpose: it copies the original
           element's classes onto its wrapper, so the `form-select` above is
           what makes it match the plain selects beside it — and Tabler's
           vendors bundle themes `.ts-*` from there. */
    </style>
@endpush

@push('scripts')
<script>
// Screenshot lightbox: one modal + one carousel for the whole day.
//
// Driven entirely through Bootstrap's data-API rather than its constructors.
// Tabler's bundle contains Bootstrap and registers its delegated listeners, but
// does NOT publish the classes on window — constructing a Modal directly from
// that namespace silently did nothing, with no error to show for it. Importing
// Bootstrap separately would fix the
// reference and create a second copy whose data-API listeners fire alongside
// Tabler's, toggling every modal on the site twice. So: attributes for opening
// and paging, plain DOM for the rest.
//
// Slides carry data-src, not src. The bytes are already cached — the grid
// downloaded the same files — but a thousand live <img> elements would still be
// a thousand decoded bitmaps in memory. Only the visible slide and its
// neighbours are materialised.
(function () {
    const modalEl = document.getElementById('shotLightbox');
    const carouselEl = document.getElementById('shotCarousel');
    if (!modalEl || !carouselEl) return;

    const items = [...carouselEl.querySelectorAll('.carousel-item')];
    const titleEl = document.getElementById('shotLightboxTitle');
    if (!items.length) return;

    const materialise = (i) => {
        const img = items[i]?.querySelector('img[data-src]');
        if (img && !img.getAttribute('src')) img.setAttribute('src', img.dataset.src);
    };
    // Neighbours too, so paging shows an image rather than a gap.
    const around = (i) => { materialise(i - 1); materialise(i); materialise(i + 1); };

    const setTitle = (i) => {
        if (titleEl) titleEl.textContent = `${items[i]?.dataset.caption ?? ''} — ${i + 1} of ${items.length}`;
    };

    // Select the slide BEFORE Bootstrap opens the modal: whichever item carries
    // .active when the carousel first initialises is the one it shows, so no
    // instance handle is needed to jump straight to the clicked capture.
    document.querySelectorAll('.ss-thumb').forEach((btn) => {
        btn.addEventListener('click', () => {
            const i = Math.min(Math.max(Number(btn.dataset.slide) || 0, 0), items.length - 1);
            items.forEach((el, n) => el.classList.toggle('active', n === i));
            around(i);
            setTitle(i);
        });
    });

    // Fired by the instance Bootstrap's data-API creates on the first
    // prev/next click, so this works without ever holding that instance.
    carouselEl.addEventListener('slid.bs.carousel', (e) => {
        const i = typeof e.to === 'number' ? e.to : items.findIndex((el) => el.classList.contains('active'));
        if (i >= 0) { around(i); setTitle(i); }
    });

    // Arrow keys page the day by clicking the controls — same path as the
    // mouse, so there is only one way this can behave.
    modalEl.addEventListener('keydown', (e) => {
        if (e.key !== 'ArrowRight' && e.key !== 'ArrowLeft') return;
        carouselEl.querySelector(e.key === 'ArrowRight' ? '.carousel-control-next' : '.carousel-control-prev')?.click();
        e.preventDefault();
    });
})();
</script>

<script src="https://cdn.jsdelivr.net/npm/litepicker/dist/litepicker.js"></script>
<script src="https://cdn.jsdelivr.net/npm/tom-select@2.3.1/dist/js/tom-select.complete.min.js"></script>
<script>
// Date filter: ‹ › day arrows + a Litepicker calendar, both writing the hidden
// ?date= input rather than the visible one.
(function () {
    const form    = document.getElementById('shotFilters');
    const display = document.getElementById('dateInput');
    const hidden  = document.getElementById('dateValue');
    const today   = @json(now($tz)->toDateString());

    // Local-clock arithmetic. Building a Date and reading it back through
    // toISOString() shifts the day for every admin east of UTC — in IST that
    // made ‹ skip two days back and › do nothing at all.
    const iso = (d) => `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;

    const shift = (days) => {
        const [y, m, d] = hidden.value.split('-').map(Number);
        hidden.value = iso(new Date(y, m - 1, d + days));
        form.submit();
    };

    document.getElementById('datePrev').addEventListener('click', () => shift(-1));
    const next = document.getElementById('dateNext');
    if (!next.disabled) next.addEventListener('click', () => shift(1));

    // Loaded from a CDN, so assume nothing. Without Litepicker the text box is
    // undriveable, so hand the day back to the browser's own date field —
    // the hidden input keeps the server contract identical either way.
    if (typeof Litepicker === 'undefined') {
        display.type = 'date';
        display.value = hidden.value;
        display.max = today;
        display.addEventListener('change', () => {
            if (! display.value) return;
            hidden.value = display.value;
            form.submit();
        });
        return;
    }

    new Litepicker({
        element: display,
        singleMode: true,           // one employee, one day — see the controller
        autoApply: true,
        format: 'DD MMM YYYY',
        startDate: hidden.value,
        maxDate: today,             // no browsing the future, same as the disabled ›
        numberOfMonths: 1,
        setup: (p) => {
            p.on('selected', (d) => {
                hidden.value = iso(d.toJSDate());
                form.submit();
            });
        },
    });
})();
</script>
<script>
// Employee picker: type-ahead over the whole company rather than scrolling a
// long native <select>. Tom Select writes back to the underlying element, so
// the field still submits as plain ?user=.
(function () {
    const select = document.getElementById('userSelect');
    if (!select || typeof TomSelect === 'undefined') return;   // CDN blocked ⇒ plain select

    new TomSelect(select, {
        // "— Select user —" is a real choice (it clears the day), not a
        // placeholder Tom Select should swallow.
        allowEmptyOption: true,
        maxOptions: null,          // the whole company fits; no "keep typing" cliff
        placeholder: 'Search employee…',
        // Names only — the option text is all there is to match on.
        searchField: ['text'],
        // No onChange here: Tom Select writes the value back to the original
        // <select> and fires its native change event, which the element's own
        // inline onchange already handles. Adding one here would submit twice.
    });
})();
</script>
@endpush