@extends('voyager::auth.master-accounting')

@section('content')
    <div class="login-container">

{{--        <p>{{ __('voyager::login.signin_below') }}</p>--}}
        <img class="img-responsive    login-logo animated fadeIn" src=" {{ asset('storage/' . setting('admin.login_logo')) }}" alt="Logo ">
        <form action="{{ route('voyager-accounting.login') }}" method="POST">
            {{ csrf_field() }}
            <div class="form-group form-group-default" id="username">
                <label>{{ __('messages.User_Name') }}</label>
                <div class="controls">
                    <input type="text" name="username" id="username" value="{{ old('username') }}" placeholder="" class="form-control" required>
                </div>
            </div>

            <div class="form-group form-group-default" id="passwordGroup">
                <label>{{ __('voyager::generic.password') }}</label>
                <div class="controls">
                    <input type="password" name="password" id="loginform-password" placeholder=" " class="form-control" required>

                <span toggle="#password-field" class="fa fa-fw fa-eye  field-icon toggle-password"></span>
            </div> </div>


    <div class="row">
        <div class="form-group   col-sm-6 text-center" id="rememberMeGroup">
            <div class="controls checkbox">
                <input type="checkbox" name="remember" id="remember" value="1"><label for="remember" class="remember-me-text">{{ __('messages.Remember Me') }}</label>
            </div>
        </div>


     {{--   <div class="form-group  text-center  col-sm-6">
            <div class="forget ">
                <a href="#">
                    {{ __('messages.Forget Password') }}
                </a>                    </div>
        </div>--}}
    </div>


            <button type="submit" class="btn btn-block login-button">
                <span class="signingin hidden"><span class="voyager-refresh"></span> {{ __('voyager::login.loggingin') }}...</span>
                <span class="signin">{{ __('voyager::generic.login') }}</span>
            </button>

        </form>

        <div style="clear:both"></div>

        @if(!$errors->isEmpty())
            <div class="alert alert-red">
                <ul class="list-unstyled">
                    @foreach($errors->all() as $err)
                        <li>{{ $err }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

    </div> <!-- .login-container -->

@endsection

@section('post_js')

    <script>
        var btn = document.querySelector('button[type="submit"]');
        var form = document.forms[0];
        var username = document.querySelector('[name="username"]');
        var password = document.querySelector('[name="password"]');
        btn.addEventListener('click', function(ev){
            if (form.checkValidity()) {
                btn.querySelector('.signingin').className = 'signingin';
                btn.querySelector('.signin').className = 'signin hidden';
            } else {
                ev.preventDefault();
            }
        });
        username.focus();
        document.getElementById('username').classList.add("focused");

        // Focus events for email and password fields
        username.addEventListener('focusin', function(e){
            document.getElementById('username').classList.add("focused");
        });
        username.addEventListener('focusout', function(e){
            document.getElementById('username').classList.remove("focused");
        });

        password.addEventListener('focusin', function(e){
            document.getElementById('passwordGroup').classList.add("focused");
        });
        password.addEventListener('focusout', function(e){
            document.getElementById('passwordGroup').classList.remove("focused");
        });

    </script>
    <script src="{{ asset('assets/js/jquery-3.6.0.min.js') }}"></script>
    <script src="{{ asset('assets/js/login.js') }}"></script>
@endsection