@extends('auth.layouts.master')

@section('title', 'Login')

@section('content')
<div class="card-inner">
    <div class="nk-block-head text-center">
        <div class="nk-block-head-content">
            <div style="margin-bottom: 16px;">
                <svg width="64" height="64" viewBox="0 0 64 64" fill="none">
                    <rect x="14" y="8" width="36" height="48" rx="4" stroke="#0047ba" stroke-width="2.2" fill="none"/>
                    <rect x="20" y="14" width="24" height="14" rx="2.5" stroke="#0047ba" stroke-width="1.8" fill="none"/>
                    <path d="M14 18h36" stroke="#0047ba" stroke-width="1.2" opacity="0.2"/>
                    <circle cx="32" cy="38" r="5" stroke="#0047ba" stroke-width="2" fill="none"/>
                    <path d="M32 35v3l2 1.5" stroke="#0047ba" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
                    <circle cx="32" cy="52" r="2" fill="#0047ba" opacity="0.25"/>
                    <path d="M27 21h10" stroke="#0047ba" stroke-width="1.5" stroke-linecap="round"/>
                    <path d="M27 25h6" stroke="#0047ba" stroke-width="1.5" stroke-linecap="round" opacity="0.5"/>
                    <path d="M44 12c2 0 4 1 4 3.5v5c0 2.5-2 3.5-4 3.5" stroke="#0047ba" stroke-width="1.6" stroke-linecap="round"/>
                    <path d="M48 15c1.5 0 3 .8 3 2.5v2c0 1.7-1.5 2.5-3 2.5" stroke="#0047ba" stroke-width="1.3" stroke-linecap="round"/>
                </svg>
            </div>
            <h4 class="nk-block-title">{{ __('Welcome Back') }}</h4>
            <div class="nk-block-des mt-2">
                <p>{{ __('Sign in to your account to continue') }}</p>
            </div>
        </div>
    </div>
    @include('auth.partials.error')

    @if(session()->has('mail_sent_success'))
    <div class="alert alert-primary">
        <ul>
            <li class="alert-icon centered"><em class="icon ni ni-mail-fill"></em>{{ session()->get('mail_sent_success') }}</li>
        </ul>
    </div>
    @endif
    <form action="{{ route('auth.login') }}" autocomplete="off" method="POST" id="loginForm" class="form-validate is-alter">
        @csrf
        <div class="form-group">
            <div class="form-label-group">
                <label class="form-label" for="username">{{ __('Email Address') }}</label>
            </div>
            <div class="form-control-wrap">
                <div class="form-icon form-icon-left">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" style="color:#8094ae"><rect x="2" y="4" width="20" height="16" rx="3" stroke="currentColor" stroke-width="1.8" fill="none"/><path d="M2 7l10 6 10-6" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
                </div>
                <input name="email" type="email" autocomplete="new-email" class="form-control form-control-lg" id="username" placeholder="{{ __('Enter your email address') }}" style="padding-left: 44px;" data-msg-email="{{ __('Enter a valid email.') }}" data-msg-required="{{ __('Required.') }}" required>
            </div>
        </div>
        <div class="form-group">
            <div class="form-label-group">
                <label class="form-label" for="passcode">{{ __('Password') }}</label>
            </div>
            <div class="form-control-wrap">
                <div class="form-icon form-icon-left">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" style="color:#8094ae"><rect x="5" y="11" width="14" height="10" rx="2.5" stroke="currentColor" stroke-width="1.8" fill="none"/><path d="M8 11V8a4 4 0 018 0v3" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" fill="none"/><circle cx="12" cy="16" r="1.5" fill="currentColor"/></svg>
                </div>
                <a tabindex="-1" href="#" class="form-icon form-icon-right passcode-switch" data-target="passcode">
                    <em class="passcode-icon icon-show icon ni ni-eye-off"></em>
                    <em class="passcode-icon icon-hide icon ni ni-eye"></em>
                </a>
                <input name="password" autocomplete="new-password" type="password" class="form-control form-control-lg" id="passcode" placeholder="{{ __('Enter your password') }}" style="padding-left: 44px;" minlength="6" data-msg-required="{{ __('Required.') }}" data-msg-minlength="{{ __('At least :num chars.', ['num' => 6]) }}" required>
            </div>
            <div class="form-control-group d-flex justify-between mt-2 mb-3">
                <div class="form-control-wrap">
                    <div class="custom-control custom-checkbox">
                        <input type="checkbox" class="custom-control-input" name="remember" id="remember-me">
                        <label class="custom-control-label text-soft" for="remember-me">{{ __('Remember Me') }}</label>
                    </div>
                </div>
                <div class="form-control-link">
                    <a tabindex="5" class="link link-primary" href="{{ route('auth.forget.form') }}" style="font-size: 13px;">{{ __('Forgot Password?') }}</a>
                </div>
            </div>
        </div>
        @if(has_restriction())
        <div class="text-danger text-center font-italic small mb-2">
            {!! 'You are about to login into demo application to see the platform.' !!}
        </div>
        @endif
        <div class="form-group">
            @if(has_recaptcha())
                <input type="hidden" id="recaptcha" value="" name="recaptcha">
            @endif
            <button class="btn btn-lg btn-primary btn-block">{{ __('Sign In') }}</button>
        </div>
    </form>
    @if(allowed_signup())
        <div class="form-note-s2 text-center pt-4">
            {{ __('New on our platform?') }} <a href="{{ route('auth.register') }}"><strong>{{ __('Create an account') }}</strong></a>
        </div>
    @endif
    @include('auth.partials.socials')
</div>
@endsection


@if (has_recaptcha())
@push('scripts')
<script>
    grecaptcha.ready(function() {
        grecaptcha.execute('{{recaptcha_key("site")}}', {action: 'login'}).then(function(token) {
            document.getElementById('recaptcha').value=token;
        });
    });
</script>
@endpush
@endif