@extends('auth.main')

@section('content-auth')
<form method="POST" action="{{ route('login.store') }}">
    @csrf
    <!-- Email / User login input -->
    <div class="form-floating mb-4">
        <input type="text" class="form-control @error('login') is-invalid @enderror @error('email') is-invalid @enderror" id="login" name="login" value="{{ old('login') }}" placeholder autocomplete onkeyup="this.value=this.value.replace(/\s/g,'')">
        <label for="login" class="form-label">{{ __('validation.attributes.email') }} / {{ __('general.user') .' '. __('validation.attributes.name') }} <span class="text-danger">*</span></label>
        @error('login')
            <div class="invalid-feedback" role="alert">
                {{ $message }}
            </div>
        @enderror
        @error('email')
        <div class="invalid-feedback" role="alert">
            {{ $message }}
        </div>
        @enderror
    </div>

    <!-- Password input -->
    <div class="form-floating mb-4">
        <input type="password" class="form-control  @error('password') is-invalid @enderror"
            id="password" name="password" placeholder="Password" value="{{ old('password') }}">
        <label for="password" class="form-label">{{ __('validation.attributes.password') }} <span class="text-danger">*</span></label>
        @error('password')
        <div class="invalid-feedback" role="alert">
            {{ $message }}
        </div>
        @enderror
    </div>

    <!-- 2 column grid layout -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="d-flex flex-column flex-sm-row justify-content-between w-100">
                <!-- Checkbox -->
                <div class="form-check mb-3 mb-md-0">
                    <input class="form-check-input" type="checkbox" value="1" id="remember"
                        name="remember" />
                    <label class="form-check-label" for="remember">
                        {{ __('auth.remember-me') }}
                    </label>
                </div>
                <div>
                    <a class="fs-sm fw-medium link-fx text-muted me-2 mb-1 d-inline-block" href="{{route('register')}}">
                        {{ __('general.register') }}
                    </a>
                    <a class="float-end link-fx me-2 mb-1 d-inline-block" href="{{ route('password.request') }}"><span class="small">{{ __('auth.forgot-password') }}</span></a>
                </div>
            </div>
        </div>
        <input id="input-timezone" type="hidden" name="timezone" />
    </div>

    <!-- Submit button -->
    <button type="submit" id="submit-login" class="btn w-100 btn-primary btn-block">
        <i class="fa fa-fw fa-sign-in-alt me-1"></i> {{ __('general.login') }}
    </button>
</form>
<hr class="my-4">
<div class="d-flex justify-content-center align-items-center">
</div>
@endsection
@push('scripts')
    <script type="module">
        $(document).ready(function () {
            $('#input-timezone').val(moment.tz.guess())
        });

        let inputPass = document.getElementById("password");
        // Execute a function when the user presses a key on the keyboard
        inputPass.addEventListener("keypress", function (event) {
            // If the user presses the "Enter" key on the keyboard
            if (event.key === "Enter") {
                // Cancel the default action, if needed
                event.preventDefault();
                // Trigger the button element with a click
                document.getElementById("submit-login").click();
            }
        });
</script>
@endpush