@extends('admin.layouts.auth')

@section('content')
    {{-- <div class="authincation "> --}}
    <div class="container ">
        <div class="row justify-content-center align-items-center">
            <div class="col-lg-6 col-md-8">
                <div class="authincation-content">
                    <div class="row no-gutters">
                        <div class="col-xl-12">
                            <div class="auth-form">
                                <div class="text-center mb-3">
                                    <a href="index.html"><img src="{{ asset('assets/images/logo' . (env('APP_PROJECT') == 'Rouaa' ? '-rouaa-dark' : '') . '.png') }}"
                                            alt=""></a>
                                </div>
                                <h4 class="text-center mb-4">Sign in your admin account</h4>
                                <form method="POST" action="{{ route('admin.login') }}">
                                    @csrf

                                    <div class="mb-3">
                                        <label for="email"
                                            class="mb-1 form-label text-md-end">{{ __('Email Address') }}</label>

                                        <div>
                                            <input id="email"type="email" autocomplete="off"
                                                class="form-control @error('email') is-invalid @enderror" name="email"
                                                value="{{ old('email') }}" required autocomplete="email" autofocus>

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

                                    <div class="mb-3">
                                        <label for="password"
                                            class="mb-1 form-label text-md-end">{{ __('Password') }}</label>

                                        <div class="mb-3 position-relative">
                                            <input id="password" type="password" autocomplete="new-password"
                                                class="form-control @error('password') is-invalid @enderror" name="password"
                                                required autocomplete="current-password">
                                            <span class="show-pass eye">
                                                <i class="fa fa-eye-slash" id="eye-slash"></i>
                                                <i class="fa fa-eye" id="eye"></i>
                                            </span>
                                            @error('password')
                                                <span class="invalid-feedback" role="alert">
                                                    <strong>{{ $message }}</strong>
                                                </span>
                                            @enderror
                                        </div>
                                    </div>

                                    <div class="form-row d-flex  flex-wrap justify-content-between mt-4 mb-2">
                                        <div class="form-group">
                                            <div class="form-check custom-checkbox ms-1">
                                                {{-- <input type="checkbox" class="form-check-input" id="basic_checkbox_1">
                                                <label class="form-check-label" for="basic_checkbox_1">Remember my preference</label> --}}
                                                <input class="form-check-input" type="checkbox" name="remember"
                                                    id="remember" {{ old('remember') ? 'checked' : '' }}>

                                                <label class="form-check-label" for="remember">
                                                    {{ __('Remember Me') }}
                                                </label>
                                            </div>
                                        </div>
                                        {{-- <div class="form-group">
                                            @if (Route::has('admin.password.request'))
                                                <a class="btn btn-link" href="{{ route('admin.password.request') }}">
                                                    {{ __('Forgot Your Password?') }}
                                                </a>
                                            @endif
                                        </div> --}}
                                    </div>

                                    <div class="mb-0">
                                        <div class="offset-md-4">
                                            <button type="submit" class="btn btn-primary">
                                                {{ __('Login') }}
                                            </button>


                                        </div>
                                    </div>
                                </form>
                                {{-- <div class="new-account mt-3">
                                    <p>Don't have an account? <a class="text-primary"
                                            href="{{ route('admin.register') }}">Sign up</a>
                                    </p>
                                </div> --}}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script>
    $(document).ready(function() {
        $('.show-pass').click(function() {
            var passwordField = $('#password');
            var eyeIconSlash = $('#eye-slash');
            var eyeIcon = $('#eye');

            // Toggle the password field visibility
            if (passwordField.attr('type') === 'password') {
                passwordField.attr('type', 'text');
            } else {
                passwordField.attr('type', 'password');
            }

            // Toggle the visibility of both eye icons
            eyeIconSlash.toggle();
            eyeIcon.toggle();

            // Toggle a class on the show-pass span
            $(this).toggleClass('password-visible');
        });
    });
</script>

<style>
    .password-visible #eye-slash {
        display: none;
    }

    .password-visible #eye {
        display: inline;
    }
</style>