@extends('layouts.app')
@section('title', 'Anmelden — kotsch.tech')
@section('content')
<div style="max-width:440px;margin:0 auto;padding:60px 20px;" x-data="{ mode: '{{ session('show_code_form') ? 'code' : 'password' }}' }">
    <h1 style="font-size:2rem;font-weight:800;margin-bottom:8px;">Anmelden</h1>
    <p style="color:#475569;margin-bottom:24px;">Zugang zu allen Wissen-Artikeln und Premium-Tools.</p>

    @if (session('status'))
        <div style="background:#f0fdf4;color:#15803d;padding:12px 16px;border-radius:10px;margin-bottom:16px;">{{ session('status') }}</div>
    @endif
    @if ($errors->any())
        <div style="background:#fef2f2;color:#b91c1c;padding:12px 16px;border-radius:10px;margin-bottom:16px;">{{ $errors->first() }}</div>
    @endif

    <div style="display:flex;gap:8px;margin-bottom:20px;">
        <button type="button" @click="mode='password'" :style="mode==='password' ? 'background:#6D5AE6;color:#fff' : 'background:#f1f5f9;color:#475569'"
            style="flex:1;border:none;padding:10px;border-radius:8px;cursor:pointer;font-weight:600;">Mit Passwort</button>
        <button type="button" @click="mode='code'" :style="mode==='code' ? 'background:#6D5AE6;color:#fff' : 'background:#f1f5f9;color:#475569'"
            style="flex:1;border:none;padding:10px;border-radius:8px;cursor:pointer;font-weight:600;">Code per E-Mail</button>
    </div>

    <div x-show="mode==='password'">
        <form method="POST" action="{{ route('login.password') }}">
            @csrf
            <input type="email" name="email" placeholder="E-Mail" required value="{{ old('email') }}"
                style="width:100%;padding:12px 14px;border:1px solid #cbd5e1;border-radius:10px;margin-bottom:12px;">
            <input type="password" name="password" placeholder="Passwort" required autocomplete="current-password"
                style="width:100%;padding:12px 14px;border:1px solid #cbd5e1;border-radius:10px;margin-bottom:12px;">
            <label style="display:flex;gap:8px;align-items:center;font-size:.9rem;color:#475569;margin-bottom:16px;">
                <input type="checkbox" name="remember" value="1"> Eingeloggt bleiben
            </label>
            <button type="submit" style="width:100%;background:#6D5AE6;color:#fff;border:none;padding:14px;border-radius:10px;font-weight:700;cursor:pointer;">Anmelden</button>
        </form>
        <p style="text-align:center;margin-top:12px;"><a href="{{ route('password.request') }}" style="color:#6D5AE6;">Passwort vergessen?</a></p>
    </div>

    <div x-show="mode==='code'" style="display:none;">
        <form method="POST" action="{{ route('login.code.request') }}" style="margin-bottom:12px;">
            @csrf
            <input type="email" name="email" placeholder="E-Mail" required value="{{ old('email') }}"
                style="width:100%;padding:12px 14px;border:1px solid #cbd5e1;border-radius:10px;margin-bottom:12px;">
            <button type="submit" style="width:100%;background:#6D5AE6;color:#fff;border:none;padding:14px;border-radius:10px;font-weight:700;cursor:pointer;">Code anfordern</button>
        </form>
        <form method="POST" action="{{ route('login.code') }}">
            @csrf
            <input type="text" name="code" inputmode="numeric" pattern="\d{6}" maxlength="6" placeholder="6-stelliger Code"
                style="width:100%;padding:12px 14px;border:1px solid #cbd5e1;border-radius:10px;margin-bottom:12px;text-align:center;letter-spacing:.2em;font-family:monospace;">
            <button type="submit" style="width:100%;background:#0f172a;color:#fff;border:none;padding:14px;border-radius:10px;font-weight:700;cursor:pointer;">Einloggen</button>
        </form>
    </div>

    <p style="text-align:center;margin-top:24px;color:#475569;">Noch kein Konto? <a href="{{ route('register') }}" style="color:#6D5AE6;">Registrieren</a></p>
</div>
@endsection