@extends('layouts.app')

@section('title', 'Login')

@section('content')
    <!-- BEGIN: Content-->
    <div class="app-content content ">
        <div class="content-wrapper">
            <div class="content-body">
                <div class="auth-wrapper auth-basic px-2">
                    <div class="auth-shell my-2">
                        <aside class="auth-story" aria-label="Why join {{ brand_name() }}">
                            <a class="auth-back-link" href="{{ route('home') }}"><i data-feather="arrow-left"></i> Back to home</a>
                            <div class="auth-story-content">
                                <span class="auth-eyebrow">Your rewards hub</span>
                                <h1>Turn spare moments into rewards.</h1>
                                <p>Pick the tasks that suit you, track every earning, and redeem from one simple wallet.</p>
                                <div class="auth-benefits">
                                    <div><span><i data-feather="zap"></i></span><strong>Quick to start</strong><small>Find games, surveys, and offers in seconds.</small></div>
                                    <div><span><i data-feather="shield"></i></span><strong>Clear activity</strong><small>Follow pending and approved rewards in one place.</small></div>
                                    <div><span><i data-feather="gift"></i></span><strong>Flexible rewards</strong><small>Choose from the redemption options in your wallet.</small></div>
                                </div>
                            </div>
                            <p class="auth-story-note"><i data-feather="lock"></i> Your account is protected with secure sign-in.</p>
                        </aside>
                        <div class="auth-inner">
                        <!-- Login basic -->
                        <div class="card mb-0">
                            <div class="card-body">
                                <a href="{{ route('home') }}" class="brand-logo loot-auth-brand">
                                    @if(brand_logo())
                                        <img src="{{ Storage::url(brand_logo()) }}" alt="{{ brand_name() }}">
                                    @else
                                        <span class="loot-brand"><span class="loot-brand-mark">{{ brand_mark() }}</span>{{ brand_name() }}</span>
                                    @endif
                                </a>

                                <h4 class="card-title mb-1">Welcome to {{ brand_name() }}</h4>
                                <p class="card-text mb-2">Sign in and keep earning {{ site_setting('points_name', config('rewards.points_name')) }} from games, surveys, and offers.</p>

                                <form method="POST" action="{{ route('login') }}" class="auth-login-form mt-2"
                                      id="auth-form">
                                    @csrf

                                    <div class="mb-1">
                                        <label for="login-username" class="form-label">Email or username</label>
                                        <input type="text" class="form-control @error('username') is-invalid @enderror"
                                               id="login-username" name="username" value="{{ old('username') }}"
                                               placeholder="you@example.com or john123" autocomplete="username"
                                               @error('username') aria-invalid="true" aria-describedby="login-username-error" @enderror
                                               tabindex="1" autofocus/>

                                        @error('username')
                                        <span class="invalid-feedback" id="login-username-error" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                        @enderror
                                    </div>

                                    <div class="mb-1">
                                        <div class="d-flex justify-content-between">
                                            <label class="form-label" for="login-password">Password</label>
                                            @if (Route::has('password.request'))
                                                <a href="{{ route('password.request') }}">
                                                    <small>Forgot Password?</small>
                                                </a>
                                            @endif
                                        </div>

                                        <div class="input-group input-group-merge form-password-toggle">
                                            <input type="password"
                                                   class="form-control @error('password') is-invalid @enderror form-control-merge"
                                                   id="login-password" name="password" autocomplete="current-password" tabindex="2"
                                                   placeholder="&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;"
                                                   @error('password') aria-invalid="true" aria-describedby="login-password-error" @enderror/>

                                            <button class="input-group-text cursor-pointer" type="button" aria-label="Show password">
                                                <i data-feather="eye" aria-hidden="true"></i>
                                            </button>

                                            @error('password')
                                            <span class="invalid-feedback" id="login-password-error" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                            @enderror
                                        </div>
                                    </div>

                                    @if (site_bool('third_party_recaptcha_enabled'))
                                        <div class="mb-1">
                                            <div class="g-recaptcha" data-sitekey="{{ site_setting('third_party_recaptcha_site_key', config('rewards.recaptcha_site_key')) }}"></div>
                                        </div>
                                        <script src="https://www.google.com/recaptcha/api.js" async defer></script>
                                    @endif
                                    <button class="btn btn-success w-100" tabindex="4" type="submit">
                                        Sign in
                                    </button>
                                </form>

                                <p class="text-center mt-2">
                                    <span>New on our platform?</span>
                                    <a href="{{ route('register') }}">
                                        <span>Create an account</span>
                                    </a>
                                </p>
                            </div>
                        </div>
                        <!-- /Login basic -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- END: Content-->
@endsection
