{{--
    Open — one employee, a tab per concern. Obvizio's user edit page, over
    Worklance data (see Admin\UserProfileController). Each tab saves on its own.
--}}
@extends('layouts.app')

@php
    $initials = collect(preg_split('/\s+/', trim($user->name)))
        ->filter()->take(2)->map(fn ($p) => mb_strtoupper(mb_substr($p, 0, 1)))->implode('');

    $inactive = $user->status === \App\Support\EmployeeStatus::INACTIVE;

    $lastSeen = $activity['last_seen'];
    $presence = 'bg-secondary';
    if ($lastSeen) {
        $mins = $lastSeen->diffInMinutes(now());
        $presence = $mins <= 15 ? 'bg-green' : ($mins <= 60 ? 'bg-yellow' : 'bg-secondary');
    }

    $role = $user->roles->first();

    // key => [label, Tabler icon, accent, applies to this person]
    $tabs = [
        'overview'  => ['Overview',  'ti-home',            'var(--tblr-primary)', true],
        'profile'   => ['Profile',   'ti-user',            'var(--tblr-azure)',   true],
        'placement' => ['Placement', 'ti-briefcase',       'var(--tblr-indigo)',  true],
        'teams'     => ['Teams',     'ti-users-group',     'var(--tblr-purple)',  true],
        'access'    => ['Access',    'ti-lock',            'var(--tblr-orange)',  true],
        'schedule'  => ['Schedule',  'ti-calendar-time',   'var(--tblr-teal)',    true],
        'activity'  => ['Activity',  'ti-activity',        'var(--tblr-lime)',    true],
    ];
@endphp

@section('header')
    <div class="row g-2 align-items-center">
        <div class="col">
            <div class="page-pretitle">Administration · Users</div>
            <h2 class="page-title">{{ $user->name }}</h2>
        </div>
        <div class="col-auto ms-auto">
            <a href="{{ route('admin.users.index', ['tab' => $user->isWorkspaceSourced() ? 'workspace' : 'native']) }}"
               class="btn btn-outline-secondary">
                <i class="ti ti-arrow-narrow-left me-1"></i><span class="d-none d-sm-inline">All users</span>
            </a>
        </div>
    </div>
@endsection

@section('content')
    {{-- Hero ---------------------------------------------------------------- --}}
    <div class="card mb-3">
        <div class="wlu-hero">
            <span class="avatar avatar-xl position-relative">
                {{ $initials ?: '?' }}
                <span class="badge {{ $presence }} position-absolute bottom-0 end-0"
                      title="{{ $lastSeen ? 'Last tracked ' . $lastSeen->diffForHumans() : 'Never tracked' }}"></span>
            </span>

            <div class="wlu-hero-id">
                <span class="wlu-hero-name">{{ $user->name }}</span>
                <span class="wlu-hero-sub">
                    {{ $user->designation ?: 'No position' }}
                    @if ($user->department) · {{ $user->department }} @endif
                    · {{ $user->email }}
                </span>
                <span class="wlu-hero-badges">
                    <span class="wlu-status {{ $inactive ? 'is-inactive' : 'is-active' }}">{{ $inactive ? 'Inactive' : 'Active' }}</span>
                    @if ($label = $user->accessLabel())
                        <span class="badge {{ $user->isSuperAdmin() ? 'bg-purple-lt' : 'bg-blue-lt' }}" title="Web portal access">{{ $label }}</span>
                    @endif
                    @if ($user->workspace_role)
                        <span class="badge bg-indigo-lt" title="Workspace role">{{ $user->workspace_role }}</span>
                    @endif
                    @if ($user->employee_id)
                        <span class="badge bg-secondary-lt">{{ $user->employee_id }}</span>
                    @endif
                    <span class="badge {{ $user->isWorkspaceSourced() ? 'bg-cyan-lt' : 'bg-secondary-lt' }}">
                        {{ $user->isWorkspaceSourced() ? 'Workspace' : 'Native' }}
                    </span>
                    @if ($user->company)
                        <span class="badge bg-azure-lt">{{ $user->company->name }}</span>
                    @endif
                </span>
            </div>

            <div class="ms-auto d-flex flex-wrap gap-2">
                @if (auth()->user()->canAccess(\App\Support\Permissions::QUICK_LOGIN) && ! $user->isSuperAdmin() && ! $user->is(auth()->user()))
                    @php $quickLoginRefusal = \App\Support\Impersonation::refusal(auth()->user(), $user); @endphp
                    <form method="POST" action="{{ route('admin.users.quick-login', $user) }}" class="m-0"
                          onsubmit="return confirm(@js('Sign in as '.$user->name.'? You will see Worklance exactly as they do, until you press Return.'))">
                        @csrf
                        {{-- A disabled button swallows hover, so the reason rides on the wrapper. --}}
                        <span class="d-inline-block" @if ($quickLoginRefusal) title="{{ $quickLoginRefusal }}" data-bs-toggle="tooltip" @endif>
                            <button type="submit" class="btn btn-lime" @disabled($quickLoginRefusal)>
                                Quick Login <i class="ti ti-login-2 ms-1"></i>
                            </button>
                        </span>
                    </form>
                @endif
                @if (auth()->user()->canAccess(\App\Support\Permissions::SCREENSHOTS))
                    <a href="{{ route('screenshots.index', ['user' => $user->id]) }}" class="btn btn-outline-primary">
                        <i class="ti ti-photo me-1"></i>Screenshots
                    </a>
                @endif
                @if (auth()->user()->canAccess(\App\Support\Permissions::TIMESHEET))
                    <a href="{{ route('reports.timesheet', ['q' => $user->name]) }}" class="btn btn-outline-primary">
                        <i class="ti ti-clock-hour-4 me-1"></i>Timesheet
                    </a>
                @endif
            </div>
        </div>
    </div>

    @if ($errors->any())
        <div class="alert alert-danger">
            @foreach ($errors->all() as $error)<div>{{ $error }}</div>@endforeach
        </div>
    @endif

    {{-- Tabs ---------------------------------------------------------------- --}}
    <div class="card">
        <div class="row g-0">
            <div class="col-12 col-md-3 border-end">
                <div class="card-body">
                    <h4 class="subheader">Manage user</h4>
                    <div class="list-group list-group-transparent" role="tablist">
                        @foreach ($tabs as $key => [$label, $icon, $accent, $applies])
                            @continue(! $applies)
                            <a href="#tab-{{ $key }}"
                               class="list-group-item list-group-item-action wlu-tab {{ $tab === $key ? 'active' : '' }}"
                               style="--wlu-accent: {{ $accent }};"
                               data-bs-toggle="list" role="tab" data-tab="{{ $key }}">
                                <i class="ti {{ $icon }}"></i>
                                <span>{{ $label }}</span>
                            </a>
                        @endforeach
                    </div>
                </div>
            </div>

            <div class="col-12 col-md-9">
                <div class="card-body">
                    <div class="tab-content">
                        @foreach ($tabs as $key => [$label, $icon, $accent, $applies])
                            @continue(! $applies)
                            <div class="tab-pane {{ $tab === $key ? 'active show' : '' }}"
                                 id="tab-{{ $key }}" role="tabpanel" style="--wlu-accent: {{ $accent }};">
                                @include('admin.users.tabs._' . $key)
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('styles')
<style>
    .wlu-hero { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; padding: 1.125rem 1.25rem; }
    .wlu-hero-id { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
    .wlu-hero-name { font-size: 1.25rem; font-weight: 600; }
    .wlu-hero-sub { font-size: .8125rem; color: var(--tblr-secondary); overflow-wrap: anywhere; }
    .wlu-hero-badges { display: flex; gap: .375rem; flex-wrap: wrap; margin-top: .375rem; align-items: center; }

    .wlu-status { display: inline-flex; align-items: center; gap: .3125rem; font-size: .75rem; font-weight: 600; }
    .wlu-status::before { content: ''; width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
    .wlu-status.is-active { color: var(--tblr-green); }
    .wlu-status.is-active::before { background: var(--tblr-green); }
    .wlu-status.is-inactive { color: var(--tblr-secondary); }
    .wlu-status.is-inactive::before { background: var(--tblr-secondary); opacity: .6; }

    .wlu-tab { display: flex; align-items: center; gap: .625rem; border-left: 3px solid transparent; font-size: .875rem; }
    .wlu-tab .ti { font-size: 1.125rem; opacity: .75; }
    .wlu-tab.active {
        border-left-color: var(--wlu-accent, var(--tblr-primary));
        background: rgba(var(--tblr-body-color-rgb), .04) !important;
        font-weight: 600;
    }
    .wlu-tab.active .ti { color: var(--wlu-accent, var(--tblr-primary)); opacity: 1; }

    .wlu-pane-head {
        display: flex; align-items: baseline; gap: .625rem; flex-wrap: wrap;
        padding-bottom: .625rem; margin-bottom: 1rem; border-bottom: 1px solid var(--tblr-border-color);
    }
    .wlu-pane-title { font-size: 1.0625rem; font-weight: 600; margin: 0; }
    .wlu-pane-hint { font-size: .8125rem; color: var(--tblr-secondary); }

    .wlu-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .625rem; margin-bottom: 1.25rem; }
    .wlu-tile {
        padding: .75rem .875rem; border-radius: var(--tblr-border-radius);
        background: var(--tblr-bg-surface-secondary); border: 1px solid var(--tblr-border-color);
    }
    .wlu-tile-label {
        font-size: .6875rem; text-transform: uppercase; letter-spacing: .06em;
        color: var(--tblr-secondary); font-weight: 600; margin-bottom: .1875rem;
    }
    .wlu-tile-value { font-size: 1.125rem; font-weight: 600; line-height: 1.2; }
    .wlu-tile-sub { font-size: .75rem; color: var(--tblr-secondary); }

    .wlu-chain { display: flex; flex-direction: column; }
    .wlu-chain-row { display: flex; align-items: baseline; gap: .75rem; padding: .5rem 0; border-bottom: 1px solid var(--tblr-border-color); }
    .wlu-chain-row:last-child { border-bottom: 0; }
    .wlu-chain-label {
        flex: 0 0 130px; font-size: .6875rem; text-transform: uppercase;
        letter-spacing: .06em; color: var(--tblr-secondary); font-weight: 600;
    }
    .wlu-chain-value { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
    .wlu-chain-meta { font-size: .75rem; color: var(--tblr-secondary); font-weight: 400; }

    .wlu-note-warn, .wlu-note-good, .wlu-note-info {
        padding: .4375rem .625rem; border-radius: var(--tblr-border-radius); font-size: .75rem; font-weight: 600;
    }
    .wlu-note-warn { background: rgba(var(--tblr-orange-rgb), .12); color: var(--tblr-orange); }
    .wlu-note-good { background: rgba(var(--tblr-green-rgb), .12); color: var(--tblr-green); }
    .wlu-note-info { background: rgba(var(--tblr-azure-rgb), .12); color: var(--tblr-azure); }

    .wlu-team {
        border: 1px solid var(--tblr-border-color); border-radius: var(--tblr-border-radius);
        overflow: hidden; margin-bottom: .875rem;
    }
    .wlu-team-head {
        display: flex; align-items: center; gap: .625rem; padding: .625rem .875rem;
        background: var(--tblr-bg-surface-secondary); border-bottom: 1px solid var(--tblr-border-color);
    }
    .wlu-team-name { font-weight: 600; }
    .wlu-team-body { padding: .625rem .875rem; display: flex; flex-wrap: wrap; gap: .375rem; }

    @media (max-width: 575.98px) {
        .wlu-chain-row { flex-direction: column; gap: .125rem; }
        .wlu-chain-label { flex-basis: auto; }
    }
</style>
@endpush

@push('scripts')
<script>
    // Keep the open tab in the URL, so a reload — or the redirect after a
    // save — lands back on it.
    document.querySelectorAll('.wlu-tab').forEach(function (link) {
        link.addEventListener('shown.bs.tab', function () {
            var url = new URL(window.location.href);
            url.searchParams.set('tab', link.dataset.tab);
            history.replaceState(null, '', url);
        });
    });
</script>
@endpush