@extends('layouts.storefront')

@section('body_attributes', 'data-page="auth-login"')
@section('title', 'Login | ' . config('app.name'))
@section('meta_description', 'Log in to track repairs, invoices, and secure lab updates.')

@section('content')
    <x-auth.shell
        eyebrow="LAB TERMINAL SIGN-IN"
        title="Access secure session"
        description="Access diagnostics, track active repairs, and check warranty files."
        :highlights="[
            ['icon' => 'verified_user', 'title' => 'Protected access', 'text' => 'Your account stays tied to your repair history.'],
            ['icon' => 'local_shipping', 'title' => 'Shipping updates', 'text' => 'See intake and return milestones in one place.'],
        ]"
    >
        @if (session('status'))
            <div class="mb-6 rounded-xl border border-emerald-500/20 bg-emerald-500/10 px-4 py-3 text-sm text-emerald-700">
                {{ session('status') }}
            </div>
        @endif

        @if ($errors->any())
            <div class="mb-6 rounded-xl border border-red-500/20 bg-red-500/10 px-4 py-3 text-sm text-red-700">
                <ul class="list-disc pl-5 space-y-1">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <form method="POST" action="{{ route('auth.login.store') }}" class="space-y-4">
            @csrf
            <input type="hidden" name="redirect_to" value="{{ old('redirect_to', $redirectTo) }}">

            <div>
                <label class="block text-xs font-semibold text-on-surface mb-1.5 uppercase tracking-wider" for="login-email">Security email address</label>
                <input id="login-email" name="email" value="{{ old('email') }}" data-auth-email-input type="email" class="w-full rounded-xl border border-outline-variant bg-surface-container-low text-body-sm py-3 px-4 focus:ring-primary focus:border-primary" placeholder="e.g. tech@workshop.com" required>
            </div>

            <div>
                <div class="flex justify-between items-center mb-1.5">
                    <label class="block text-xs font-semibold text-on-surface uppercase tracking-wider" for="login-password">Security access key</label>
                    <a href="{{ route('auth.password.request') }}" class="text-xs font-bold text-primary hover:underline">Forgot access key?</a>
                </div>
                <div class="relative bg-surface-container-low rounded-xl border border-outline-variant focus-within:border-primary/50 transition-colors flex items-center px-4 py-3">
                    <input id="login-password" name="password" data-auth-password-input type="password" class="w-full bg-transparent border-none focus:ring-0 text-body-sm text-on-surface placeholder-on-surface-variant/40 py-0 pr-10" placeholder="••••••••" required>
                    <button type="button" data-auth-password-toggle aria-label="Toggle password visibility" class="absolute right-3 text-slate-400 hover:text-on-surface transition-colors flex items-center">
                        <span class="material-symbols-outlined text-lg">visibility</span>
                    </button>
                </div>
            </div>

            <label class="flex items-center gap-2.5 cursor-pointer">
                <input type="checkbox" name="remember" value="1" class="rounded border-outline-variant text-primary focus:ring-primary/20 w-4 h-4">
                <span class="text-xs font-semibold text-on-surface-variant">Remember security session</span>
            </label>

            <button type="submit" class="bg-primary text-on-primary font-label-md text-label-md px-6 py-3.5 rounded-xl hover:bg-primary-container transition-all active:scale-95 shadow-md shadow-primary/10 glow-button flex items-center justify-center gap-2 w-full font-bold">
                <span>Authorize terminal session</span>
                <span class="material-symbols-outlined text-base">login</span>
            </button>
        </form>

        <div class="mt-6 flex flex-col sm:flex-row gap-3 text-sm">
            <a href="{{ route('auth.register') }}" class="inline-flex items-center justify-center rounded-xl border border-outline-variant px-5 py-3 text-on-surface-variant hover:text-primary hover:border-primary transition-colors">Create a new account</a>
            <a href="{{ route('auth') }}" class="inline-flex items-center justify-center rounded-xl border border-outline-variant px-5 py-3 text-on-surface-variant hover:text-primary hover:border-primary transition-colors">Back to access chooser</a>
        </div>
    </x-auth.shell>
@endsection