@extends('backend.layouts.auth')

@section('content')
    <style>
        .light-logo {
            height: 75px;
            width: 234px;
        }

        #login_email-error{
            margin-bottom: 15px;
        }
        #login_pwd-error{
            margin-bottom: 15px;
        }


        /* .error {
                position: absolute;
        color: red;
        margin-top: 0.5rem; Space between the input and the error message
        display: none; Initially hide the error messages
    } */

        /* .input-group .error {
        display: block; /* Show the error message when needed */
        /* } */

        /* .error {
        display: none;
        position: absolute;
        color: red;
    } */
    </style>
    <section id="wrapper">
        <div class="login-register"
            style="background-image: url('{{ asset('backend/assets/images/background/login-register.jpg') }}');">
            <div class="login-box card">
                <div class="card-body">
                    <div class="row">
                        <div class="col-12">
                            <div class="logo text-center">
                                <span class="db">
                                    <!-- Light Logo icon -->
                                    @if (config('GET.main_logo_secondry'))
                                        <img src="{{ asset('assets/photo/' . config('GET.main_logo_secondry')) }}"
                                            alt="homepage" class="light-logo" />
                                    @else
                                        <img src="{{ asset('assets/photo/dots.png') }}" alt="homepage" class="light-logo" />
                                    @endif
                                </span>
                                <h5 class="font-medium m-b-20 mt-3">Sign In</h5>
                            </div>
                            <!-- Display flash messages if any -->

                            @if (session()->has('admin-login-error'))
                                <div class="alert alert-danger">
                                    {{ Session::get('admin-login-error') }}
                                </div>
                            @endif
                            @if (session()->has('logout-success'))
                                <div class="alert alert-success">
                                    {{ Session::get('logout-success') }}
                                </div>
                            @endif

                            @php
                                $login_email = isset($_COOKIE['admin_login_email'])
                                    ? $_COOKIE['admin_login_email']
                                    : old('email', '');
                                $login_pass = isset($_COOKIE['admin_login_pass']) ? $_COOKIE['admin_login_pass'] : '';
                                $is_remember =
                                    isset($_COOKIE['admin_login_email']) && isset($_COOKIE['admin_login_pass'])
                                        ? 'checked'
                                        : '';

                            @endphp

                            <form action="{{ route('login') }}" method="POST"
                                class="form-horizontal m-t-20 admin-login-form" id="loginform">
                                @csrf
                                <input type="hidden" name="role" value="admin">
                                <div class="input-group mb-2">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text" id="basic-addon1"><i class="ti-user"></i></span>
                                    </div>
                                    <input type="email" name="email" value="{{ $login_email }}"
                                        class="form-control form-control-lg" placeholder="Email" aria-label="Email"
                                        id="login_email" aria-describedby="basic-addon1">
                                </div>
                                <label id="login_email-error" class="error" for="login_email"
                                    style="color: red; display: none;">Please enter email address.</label>
                                @if (isset($errors) && $errors->has('email'))
                                    <div class="invalid-error" role="alert" style="color: red;">
                                        <strong>{{ $errors->first('email') }}</strong>
                                    </div>
                                @endif
                                <div class="input-group mb-2">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text" id="basic-addon2"><i class="ti-pencil"></i></span>
                                    </div>
                                    <input type="password" name="password" value="{{ $login_pass }}"
                                        class="form-control form-control-lg" placeholder="Password" aria-label="Password"
                                        aria-describedby="basic-addon2" id="login_pwd">
                                        <div class="input-group-append">
                                            <span class="input-group-text" id="togglePassword" style="cursor: pointer;">
                                                <i class="fa fa-eye-slash" id="eye-icon"></i>
                                            </span>
                                        </div>
                                </div>
                                <label id="login_password-error" class="error" for="login_password"
                                    style="color: red; display: none;"></label>

                                @if (isset($errors) && $errors->has('password'))
                                    <div class="invalid-error" role="alert" style="color: red;">
                                        <strong>{{ $errors->first('password') }}</strong>
                                    </div>
                                @endif
                                <div class="form-group row">
                                    <div class="col-md-12">
                                        <div class="custom-control custom-checkbox">
                                            <input type="checkbox" class="custom-control-input" name="remember"
                                                id="customCheck1" {{ $is_remember }}>
                                            <label class="custom-control-label" for="customCheck1">Remember me</label>
                                            <a href="{{ route('forgot_password') }}" id="to-recover1"
                                                class="text-dark float-right"><i class="fa fa-lock m-r-5"></i> Forgot
                                                password?</a>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group text-center">

                                    <button class="btn btn-block btn-lg btn-info btn-rounded" id="loginButton"
                                        type="submit">Log In</button>

                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.5/jquery.validate.min.js"></script>
<script>
    $(document).ready(function() {


        $(".admin-login-form").validate({
            rules: {
                email: {
                    required: true,
                    email: true
                },
                password: {
                    required: true
                }
            },
            messages: {
                email: {
                    required: "Please enter email address.",
                    email: "Please enter a valid email address."
                },
                password: {
                    required: "Please enter password."
                }
            },

            errorPlacement: function(error, element) {
                // Show error message below the input group
                // alert('awd');
                error.insertAfter(element.closest('.input-group').next('label'));
            },
            submitHandler: function(form) {

                $('#loginButton').prop('disabled', true);
                form.submit();
            },
        });

        document.getElementById('togglePassword').addEventListener('click', function() {
            const passwordField = document.getElementById('login_pwd');
            const eyeIcon = document.getElementById('eye-icon');

            // Toggle the type between password and text
            if (passwordField.type === "password") {
                eyeIcon.classList.remove('fa-eye-slash');
                eyeIcon.classList.add('fa-eye');
                passwordField.type = "text";
            } else {
                passwordField.type = "password";
                eyeIcon.classList.remove('fa-eye');
                eyeIcon.classList.add('fa-eye-slash');
            }
        });
    });
</script>
