@extends('frontend.layout.auth')
@section('title', 'Login')
@section('content')

<div class="auth-form-wrap">
    <div class="auth-form-header">
        <h2 class="auth-form-title">Welcome back 👋</h2>
        <p class="auth-form-sub">Sign in to your {{ optional($settings)->website_name ?? config('app.name') }} account to continue.</p>
    </div>

    <form class="auth-form" method="POST" action="{{ route('user.login.submit') }}">
        @csrf

        <div class="auth-field">
            <label class="auth-label">Email Address</label>
            <div class="auth-input-wrap">
                <i class="ti ti-mail auth-input-icon"></i>
                <input type="email" name="email" class="form-control" placeholder="you@example.com" value="{{ old('email') }}" required>
            </div>
        </div>

        <div class="auth-field">
            <label class="auth-label">Password</label>
            <div class="auth-input-wrap">
                <i class="ti ti-lock auth-input-icon"></i>
                <input type="password" name="password" id="auth-password" class="form-control" placeholder="Your password" required>
                <button type="button" class="auth-pw-toggle" onclick="togglePw('auth-password', this)">
                    <i class="ti ti-eye"></i>
                </button>
            </div>
        </div>

        @if(optional($settings)->recaptcha == 1 && isset($captcha))
        <div class="auth-field">
            <label class="auth-label">Captcha</label>
            <div class="auth-captcha-row">
                <div class="auth-input-wrap" style="flex:1">
                    <i class="ti ti-shield auth-input-icon"></i>
                    <input type="text" name="captcha" class="form-control" placeholder="Enter captcha" required autocomplete="off">
                </div>
                <span class="captcha-text">{{ $captcha }}</span>
                <button type="button" class="captcha-refresh" title="Refresh"><i class="ti ti-refresh"></i></button>
            </div>
        </div>
        @endif

        <div class="auth-terms">
            By continuing, you agree to our
            <a href="{{ route('frontend.terms') }}">Terms</a> and
            <a href="{{ route('frontend.privacy') }}">Privacy Policy</a>.
        </div>

        <button type="submit" class="auth-btn">
            <i class="ti ti-login"></i> Sign In
        </button>

        <div class="auth-footer">
            <p class="auth-footer-line">
                Don't have an account?
                <a href="{{ route('user.register') }}" class="auth-footer-link">Create one</a>
            </p>
            <a href="{{ route('user.forgot-password') }}" class="auth-footer-link--block">Forgot your password?</a>
        </div>
    </form>
</div>

@if(optional($settings)->recaptcha == 1 && isset($captcha))
<script>
document.addEventListener('DOMContentLoaded', function () {
    document.querySelector('.captcha-refresh')?.addEventListener('click', function () {
        fetch('{{ route('user.refresh-captcha') }}', {
            headers: { 'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content, 'Accept': 'application/json' }
        }).then(r => r.json()).then(d => { if (d.captcha) document.querySelector('.captcha-text').textContent = d.captcha; });
    });
});
</script>
@endif
@endsection
