@extends('web.layouts.auth')

@section('content')
    <div class="account-pages login-admin">
        <div class="container-fluid">
            <div class="row m-0">
                <div class="col-md-4 login-right">
                    <div class="row">
                        <div class="login-box">
                            <div class="login-logo">
                                <h4>Sign in</h4>
                            </div>
                            <!-- /.login-logo -->
                            <div class="login-box-body">
                                <form method="POST" action="{{ route('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 position-relative">
                                        <label for="password"
                                            class="mb-1 form-label text-md-end">{{ __('Password') }}</label>
                                        <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" id="password-eye">
                                            <i class="fa fa-eye-slash" id="password-eye-slash"></i>
                                            <i class="fa fa-eye" id="password-eye-icon" style="display:none;"></i>
                                        </span>

                                        @error('password')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                        @enderror
                                    </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('password.request'))
                                                <a class="btn btn-link" href="{{ route('password.request') }}">
                                                    {{ __('Forgot Your Password?') }}
                                                </a>
                                            @endif
                                        </div>
                                    </div>
                                    <div class="form-group row {{ $errors->has('g-recaptcha-response') ? ' has-error' : '' }} " style="margin-bottom: 15px;">
                                        <div class="col-md-3" style="width: 100%; color: red;">
                                            {!! app('captcha')->display() !!}
                                            @if ($errors->has('g-recaptcha-response'))
                                                <span class="help-block">
                                                    <strong>{{ $errors->first('g-recaptcha-response') }}</strong>
                                                </span>
                                            @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>
                        <!-- /.login-box-body -->
                        </div>
                        <!-- /.login-box -->
                    </div>
                </div>
                
                <div class="col-md-8 login-left">
                    <div class="row">
                        <div class="cover-home"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- end account-pages -->
@endsection
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script>
    $(document).ready(function() {
        $('#password-eye').click(function() {
            var passwordField = $('#password');
            var eyeIconSlash = $('#password-eye-slash');
            var eyeIcon = $('#password-eye-icon');

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

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

<style>
    .position-relative {
        position: relative;
    }

    .eye {
        position: absolute;
        top: 72%;
        right: 10px;
        transform: translateY(-50%);
        cursor: pointer;
    }

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

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