@extends('layouts.app')

@php
    // One card renderer for all three tabs — the tabs differ by which list they
    // hold, not by how a person is drawn.
    $tabs = [
        ['key' => 'online', 'label' => 'Online',           'people' => $online, 'colour' => 'green',
         'empty' => 'Nobody has the timer running right now.'],
        ['key' => 'break',  'label' => 'On-Break',         'people' => $break,  'colour' => 'yellow',
         'empty' => 'Nobody has stepped away.'],
        ['key' => 'absent', 'label' => 'Not Logged-In yet', 'people' => $absent, 'colour' => 'secondary',
         'empty' => 'Everyone has started today.'],
    ];
@endphp

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

@section('content')
{{-- Toolbar — same filters as Live Screens. A real form here, unlike the
     Live Screens toolbar, because this page is server-rendered rather than
     fetching its own JSON. --}}
<div class="card mb-3">
    <div class="card-body">
        <form method="GET" action="{{ route('live-people.index') }}" class="row g-2 align-items-center">
            <div class="col-md">
                <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="Search employees…">
                </div>
            </div>
            <div class="col-auto">
                <x-employee-status-filter :selected="$status" label="" label-class="d-none" />
            </div>
            <div class="col-auto">
                <button class="btn btn-primary"><i class="ti ti-filter me-1"></i>Apply</button>
            </div>
            @if ($q !== '' || $status !== \App\Support\EmployeeStatus::ACTIVE)
                <div class="col-auto">
                    <a href="{{ route('live-people.index') }}" class="btn btn-link">Reset</a>
                </div>
            @endif
        </form>
    </div>
</div>

<div class="card">
    <div class="card-header">
        <ul class="nav nav-tabs card-header-tabs" data-bs-toggle="tabs">
            @foreach ($tabs as $i => $tab)
                <li class="nav-item">
                    <a href="#lp-{{ $tab['key'] }}" class="nav-link @if ($i === 0) active @endif"
                       data-bs-toggle="tab">
                        <span class="status-dot bg-{{ $tab['colour'] }} me-2"></span>
                        {{ $tab['label'] }}
                        <span class="badge bg-{{ $tab['colour'] }}-lt ms-2">{{ $tab['people']->count() }}</span>
                    </a>
                </li>
            @endforeach
        </ul>
    </div>
    <div class="card-body">
        <div class="tab-content">
            @foreach ($tabs as $i => $tab)
                <div class="tab-pane @if ($i === 0) active show @endif" id="lp-{{ $tab['key'] }}">
                    @forelse ($tab['people'] as $p)
                        @if ($loop->first)
                            <div class="row row-cards row-cols-1 row-cols-sm-2 row-cols-lg-3 row-cols-xl-4 g-3">
                        @endif
                        <div class="col">
                            <div class="card card-sm h-100 d-flex flex-column">
                                <div class="card-body d-flex align-items-center gap-3">
                                    {{-- Square, matching the avatars everywhere else in
                                         the suite: Tabler's default .avatar shape, no
                                         rounding class. background-size/position are
                                         load-bearing — without them the image renders at
                                         natural size anchored top-left instead of filling
                                         the box. flex-shrink-0 keeps it from being
                                         squashed by a long name.

                                         Initials are the fallback, not a placeholder to
                                         swap out later: workspace-sourced employees have
                                         no avatar column, so most people keep them. --}}
                                    <span class="avatar avatar-md flex-shrink-0 fw-bold
                                                 @if (! $p['avatar_url']) bg-{{ $tab['colour'] }}-lt @endif"
                                          style="background-size:cover;background-position:center;{{ $p['avatar_url'] ? "background-image:url('{$p['avatar_url']}');color:transparent;" : '' }}">
                                        {{ $p['avatar_url'] ? '' : $p['initials'] }}
                                    </span>
                                    <div style="min-width:0">
                                        <div class="text-truncate fw-medium" title="{{ $p['name'] }}">
                                            {{ $p['name'] }}
                                            @if ($p['employment'] !== \App\Support\EmployeeStatus::ACTIVE)
                                                <span class="badge bg-secondary-lt ms-1">{{ $p['employment'] }}</span>
                                            @endif
                                        </div>
                                        <div class="text-secondary text-truncate small"
                                             title="{{ $p['position'] ?: 'No position on file' }}">
                                            {{ $p['position'] ?: '—' }}
                                        </div>
                                        <div class="mt-1 d-flex flex-wrap gap-1">
                                            {{-- Today's tracked activity. Its text colour is
                                                 the free-time verdict: red short of the
                                                 expected day, blue on it, green past it. --}}
                                            {{-- badge-outline: transparent, bordered in
                                                 currentColor — so the border takes the
                                                 free-time colour along with the text. --}}
                                            <span class="badge badge-outline {{ $p['free_class'] }}"
                                                  title="Active today, coloured against the expected working day">
                                                {{ $p['active_label'] }}
                                            </span>
                                            {{-- Only when a shift is actually on file: no
                                                 roster means no claim either way. --}}
                                            @if ($p['shift_ended'])
                                                <span class="badge bg-secondary-lt"
                                                      title="Today's rostered shift has finished">
                                                    Shift Ended
                                                </span>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                                {{-- mt-auto so the footer sits on the card's floor
                                     however tall the body above it runs — cards in a
                                     row are equal height, and a short one would
                                     otherwise float its footer mid-card. --}}
                                <div class="card-footer mt-auto py-2 px-3 small text-secondary">
                                    <div class="text-truncate" title="{{ $p['task'] ?: 'No task recorded' }}">
                                        Task: {{ $p['task'] ?: '—' }}
                                    </div>
                                    @if ($p['since'])
                                        <div class="text-truncate mt-1"
                                             title="Timer last reported {{ $p['seen_local'] }} (their local time)">
                                            <i class="ti ti-clock me-1"></i>{{ $p['since'] }}
                                        </div>
                                    @endif
                                </div>
                            </div>
                        </div>
                        @if ($loop->last)
                            </div>
                        @endif
                    @empty
                        <div class="text-center text-secondary py-5">{{ $tab['empty'] }}</div>
                    @endforelse
                </div>
            @endforeach
        </div>
    </div>
</div>
@endsection