@extends('layouts.auth')
@section('title', 'Team sign-in')
@section('content')
<div style="display:flex;flex-wrap:wrap;min-height:100vh;background:var(--surface)">
    <main style="flex:1 1 480px;display:flex;flex-direction:column;justify-content:space-between;gap:32px;padding:40px max(24px,6vw)">
        <img src="{{ asset('assets/img/wordmark-ink.webp') }}" alt="KalpCanvas" style="height:34px;width:auto;align-self:flex-start">
        <div class="stack" style="gap:24px;width:min(100%,420px)" data-tabs-root>
            @hasSection('card')
                @yield('card')
            @else
            <div class="stack" style="gap:8px"><span class="eyebrow">Team workspace</span><h1 class="d2">Good to see you.</h1><p class="muted">Sign in to check in, see today’s tasks, log time and manage your leave.</p></div>
            @include('partials.flash')
            <div class="tabs" role="tablist" data-tabs>
                <button type="button" class="tab" role="tab" data-tab="password">Password</button>
                <button type="button" class="tab" role="tab" data-tab="code">One-time code</button>
            </div>
            <form method="post" action="{{ route('team.login') }}" class="stack" style="gap:16px" data-panel="password">
                @csrf
                <div class="field"><label class="label" for="tl-id">Employee ID or work email</label><input id="tl-id" name="login" class="input" autocomplete="username" placeholder="KC-004 or you@kalpcanvas.com" required value="{{ old('login') }}"></div>
                <div class="field"><div class="row between"><label class="label" for="tl-pw">Password</label><a href="{{ route('team.password.request') }}" class="xs b">Forgot password?</a></div><input id="tl-pw" name="password" type="password" class="input" autocomplete="current-password" required></div>
                <label class="check"><input type="checkbox" name="checkin" value="1" checked> <span>Check me in after sign-in</span></label>
                <label class="check"><input type="checkbox" name="remember" value="1"> <span>Keep me signed in on this device</span></label>
                <button class="btn btn-block">Sign in</button>
            </form>
            <form method="post" action="{{ route('team.login.send') }}" class="stack" style="gap:16px" data-panel="code" hidden>
                @csrf
                <div class="field"><label class="label" for="tl-id2">Employee ID or work email</label><input id="tl-id2" name="login" class="input" autocomplete="username" required></div>
                <p class="hint">We’ll send a 6-digit code to the WhatsApp number or email HR has on file.</p>
                <label class="check"><input type="checkbox" name="checkin" value="1" checked> <span>Check me in after sign-in</span></label>
                <button class="btn btn-block">Send code</button>
            </form>
            @endif
        </div>
        <div class="row xs muted" style="gap:16px"><span>Not on the team?</span><a href="{{ route('client.login') }}">Client login</a><a href="{{ route('admin.login') }}">Admin login</a></div>
    </main>
    <aside class="band" style="flex:1 1 420px;position:relative;overflow:hidden;display:flex;align-items:flex-end;padding:48px">
        <img src="{{ asset('assets/img/emblem-ivory.webp') }}" alt="" style="position:absolute;width:640px;right:-120px;top:-80px;opacity:.12">
        <div class="stack" style="gap:14px;position:relative;max-width:420px">
            <span class="eyebrow">Today at KalpCanvas</span>
            <p class="quote">“Clear thinking. Confident expression.”</p>
            <ul class="stack small muted" style="gap:6px;padding-left:18px">
                @foreach(\App\Models\Announcement::whereNotNull('published_at')->latest('published_at')->take(3)->get() as $a)<li>{{ $a->title }}</li>@endforeach
            </ul>
        </div>
    </aside>
</div>
@endsection