@extends('layouts.app')

@section('title', 'Sign in')

@section('content')
    @php
        $accountError = $errors->first('account') ?: session('error');
        $emailError = $errors->first('email');
        $passwordError = $errors->first('password');
    @endphp

    @if ($accountError)
        <div
            id="login-toast"
            role="alert"
            class="fixed right-4 bottom-4 z-50 max-w-sm rounded-lg border border-red-700 bg-red-600 px-4 py-3 text-sm text-white"
        >
            {{ $accountError }}
        </div>
    @endif

    <div class="grid min-h-svh lg:grid-cols-2">
        <aside class="login-brand relative hidden overflow-hidden px-12 py-12 lg:flex lg:flex-col lg:justify-between xl:px-16">
            <div aria-hidden class="login-brand-grid absolute inset-0"></div>
            <div aria-hidden class="login-brand-orb absolute -right-24 top-1/4 size-[28rem] rounded-full blur-3xl"></div>
            <div aria-hidden class="login-brand-orb-soft absolute -bottom-20 -left-16 size-[22rem] rounded-full blur-3xl"></div>

            <p class="relative font-heading text-5xl font-semibold tracking-tight text-primary-foreground motion-safe:animate-in motion-safe:fade-in motion-safe:slide-in-from-left-4 motion-safe:duration-700 xl:text-6xl">
                {{ config('app.name') }}
            </p>

            <div class="relative max-w-md space-y-4 motion-safe:animate-in motion-safe:fade-in motion-safe:slide-in-from-bottom-3 motion-safe:delay-150 motion-safe:duration-700">
                <span aria-hidden class="block h-1 w-14 bg-primary-foreground/80"></span>
                <p class="font-heading text-2xl font-medium leading-snug text-primary-foreground xl:text-3xl">
                    Inbox, replies, and live chat — one place.
                </p>
                <p class="text-sm leading-relaxed text-primary-foreground/70">
                    Sign in to keep conversations running.
                </p>
            </div>
        </aside>

        <main class="login-form-shell relative flex flex-col justify-center px-6 py-12 sm:px-10 lg:px-16">
            <div class="mx-auto w-full max-w-[520px] motion-safe:animate-in motion-safe:fade-in motion-safe:slide-in-from-bottom-2 motion-safe:duration-500">
                <p class="mb-8 font-heading text-3xl font-semibold tracking-tight text-foreground lg:hidden">
                    {{ config('app.name') }}
                </p>

                <div class="rounded-2xl border border-border/70 bg-card shadow-[0_1px_2px_oklch(0_0_0/4%),0_12px_40px_-12px_oklch(0_0_0/12%)]">
                    <div class="space-y-10 p-10 sm:p-12">
                        <header class="space-y-2">
                            <h1 class="font-heading text-3xl font-semibold tracking-tight text-foreground">Sign in</h1>
                            <p class="text-base leading-relaxed text-muted-foreground">Enter your credentials to continue.</p>
                        </header>

                        <form id="login-form" method="POST" action="{{ route('login.store') }}" novalidate class="flex flex-col gap-6">
                            @csrf

                            <div data-field="email" @class(['flex flex-col gap-2', 'has-error' => $emailError])>
                                <label for="email" class="text-xs font-medium uppercase tracking-wider text-muted-foreground">
                                    Email <span class="text-destructive" aria-hidden>*</span>
                                </label>
                                <div class="relative">
                                    <svg aria-hidden class="pointer-events-none absolute top-1/2 left-3.5 size-4 -translate-y-1/2 text-muted-foreground/70" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16v12H4z" />
                                        <path stroke-linecap="round" stroke-linejoin="round" d="m4 7 8 6 8-6" />
                                    </svg>
                                    <input
                                        id="email"
                                        name="email"
                                        type="email"
                                        inputmode="email"
                                        autocomplete="username"
                                        autofocus
                                        maxlength="255"
                                        placeholder="you@club.com"
                                        value="{{ old('email') }}"
                                        aria-invalid="{{ $emailError ? 'true' : 'false' }}"
                                        class="h-12 w-full rounded-lg border border-border/80 bg-muted/40 pl-10 text-base shadow-none outline-none transition-colors focus:border-ring focus:bg-background focus:ring-2 focus:ring-ring/30"
                                    >
                                </div>
                                <p data-error-for="email" class="text-sm text-destructive {{ $emailError ? '' : 'hidden' }}">{{ $emailError }}</p>
                            </div>

                            <div data-field="password" @class(['flex flex-col gap-2', 'has-error' => $passwordError])>
                                <label for="password" class="text-xs font-medium uppercase tracking-wider text-muted-foreground">
                                    Password <span class="text-destructive" aria-hidden>*</span>
                                </label>
                                <div class="relative">
                                    <svg aria-hidden class="pointer-events-none absolute top-1/2 left-3.5 size-4 -translate-y-1/2 text-muted-foreground/70" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                        <rect x="5" y="11" width="14" height="10" rx="2" />
                                        <path stroke-linecap="round" d="M8 11V8a4 4 0 0 1 8 0v3" />
                                    </svg>
                                    <input
                                        id="password"
                                        name="password"
                                        type="password"
                                        autocomplete="current-password"
                                        maxlength="20"
                                        placeholder="••••••••"
                                        aria-invalid="{{ $passwordError ? 'true' : 'false' }}"
                                        class="h-12 w-full rounded-lg border border-border/80 bg-muted/40 pr-11 pl-10 text-base shadow-none outline-none transition-colors focus:border-ring focus:bg-background focus:ring-2 focus:ring-ring/30"
                                    >
                                    <button
                                        type="button"
                                        id="toggle-password"
                                        aria-label="Show password"
                                        aria-pressed="false"
                                        class="absolute top-1/2 right-3.5 -translate-y-1/2 cursor-pointer text-muted-foreground/70 transition-colors hover:text-foreground"
                                    >
                                        <svg data-icon="eye" aria-hidden class="size-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                            <path stroke-linecap="round" stroke-linejoin="round" d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12Z" />
                                            <circle cx="12" cy="12" r="3" />
                                        </svg>
                                        <svg data-icon="eye-off" aria-hidden class="hidden size-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                            <path stroke-linecap="round" stroke-linejoin="round" d="M3 3l18 18" />
                                            <path stroke-linecap="round" stroke-linejoin="round" d="M10.6 10.6a2 2 0 0 0 2.8 2.8" />
                                            <path stroke-linecap="round" stroke-linejoin="round" d="M9.9 5.1A11 11 0 0 1 12 5c6.5 0 10 7 10 7a18 18 0 0 1-4.2 4.8" />
                                            <path stroke-linecap="round" stroke-linejoin="round" d="M6.1 6.1A18 18 0 0 0 2 12s3.5 7 10 7a10 10 0 0 0 3.4-.6" />
                                        </svg>
                                    </button>
                                </div>
                                <p data-error-for="password" class="text-sm text-destructive {{ $passwordError ? '' : 'hidden' }}">{{ $passwordError }}</p>
                            </div>

                            <div class="flex items-center justify-between pt-1">
                                <label for="remember" class="flex cursor-pointer items-center gap-2.5 text-sm text-muted-foreground">
                                    <input
                                        id="remember"
                                        name="remember"
                                        type="checkbox"
                                        value="1"
                                        class="size-4 cursor-pointer rounded-[4px] border border-input accent-primary"
                                        @checked(old('remember'))
                                    >
                                    Remember me
                                </label>
                            </div>

                            <div class="h-px bg-border/60"></div>

                            <button
                                type="submit"
                                id="login-submit"
                                class="flex h-12 w-full cursor-pointer items-center justify-center gap-2 rounded-lg bg-primary text-base font-semibold text-primary-foreground shadow-[0_1px_2px_oklch(0_0_0/8%)] transition-all duration-200 hover:brightness-110 active:translate-y-px disabled:opacity-70"
                            >
                                <svg id="login-spinner" aria-hidden class="hidden size-4 animate-spin" fill="none" viewBox="0 0 24 24">
                                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"></path>
                                </svg>
                                <span id="login-submit-label">Sign in</span>
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </main>
    </div>
@endsection