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

@section('content')

    <h1 class="site-description desktop-show ">@yield('page_title', setting('admin.description'))  </h1>
    <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 ">

{{-- <h3 class="text-center ">{{ setting('site.title') }}


</h3>--}}
 <h1 class="site-description  ">
    {{setting('admin.branch_name')}}  </h1>

       <form action="{{ route('voyager.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