@extends('layouts.auth')
@section('title', __('Login'))

@section('content')
    <h3 class="fw-bold mb-1" style="letter-spacing:-.03em">{{ __('Welcome back') }} 👋</h3>
    <p class="text-muted mb-4">{{ __('Login to continue learning.') }}</p>

    <form id="login-form" method="POST" action="{{ route('login') }}">
        @csrf
        <div class="mb-3">
            <label class="form-label" for="login-email">{{ __('Email address') }}</label>
            <input type="email" name="email" id="login-email" value="{{ old('email') }}" class="form-control" placeholder="you@example.com" autocomplete="username" required autofocus>
        </div>
        <div class="mb-3">
            <div class="d-flex justify-content-between">
                <label class="form-label" for="login-password">{{ __('Password') }}</label>
                <a href="{{ route('password.request') }}" class="small fw-semibold">{{ __('Forgot password?') }}</a>
            </div>
            <div class="lf-pass-wrap">
                <input type="password" name="password" id="login-password" class="form-control" placeholder="{{ __('Your password') }}" autocomplete="current-password" required>
                <button type="button" class="lf-pass-toggle" aria-label="{{ __('Show password') }}" aria-controls="login-password" aria-pressed="false"><i class="bi bi-eye" aria-hidden="true"></i></button>
            </div>
        </div>
        <div class="form-check mb-4">
            <input type="checkbox" name="remember" class="form-check-input" id="remember">
            <label class="form-check-label small" for="remember">{{ __('Keep me signed in') }}</label>
        </div>
        <button type="submit" class="btn btn-primary btn-lg w-100">{{ __('Login') }} <i class="bi bi-arrow-right ms-1"></i></button>

        {{-- Demo chips: always on a demo site (APP_DEMO=true), otherwise only outside production and while the switch is on. --}}
        @if((config('app.demo') || config('app.env') !== 'production') && setting('show_demo_credentials', '1') === '1')
            @php($lfDemoAccounts = collect(config('learnify.demo_accounts', []))
                ->map(fn ($a) => [$a['email'], $a['icon'], __($a['role']), __($a['description'])]))
            <div class="lf-demo-box mt-4">
                <span class="lf-demo-tag">{{ __('Demo') }}</span>
                <div class="lf-demo-head">
                    <i class="bi bi-magic"></i>
                    <div>
                        <strong>{{ __('Try it without signing up') }}</strong>
                        <span>{{ __('Pick a role and you are signed in. Password for all:') }} <code>{{ config('learnify.demo_password') }}</code></span>
                    </div>
                </div>
                <div class="lf-demo-grid">
                    @foreach($lfDemoAccounts as [$email, $icon, $role, $desc])
                        <button type="button" class="lf-demo-chip" data-email="{{ $email }}" data-password="{{ config('learnify.demo_password') }}">
                            <i class="bi {{ $icon }}" aria-hidden="true"></i>
                            <span>
                                <span class="role">{{ $role }}</span>
                                <span class="desc">{{ $desc }}</span>
                            </span>
                        </button>
                    @endforeach
                </div>
            </div>
        @endif
    </form>

    @include('partials.sso-buttons')

    <p class="text-center text-muted mt-4 mb-0">
        {{ __("Don't have an account?") }} <a href="{{ route('register') }}" class="fw-semibold">{{ __('Create one free') }}</a>
    </p>
@endsection