@extends('layouts.app')

@section('content')
<div class="d-flex flex-column flex-root" id="kt_app_root">
    <style>
    body {
        background-image: url({{asset("assets/images/auth/bg10.jpeg")}});
    }

    [data-theme="dark"] body {
        background-image: url({{asset("assets/images/auth/bg10-dark.jpeg")}});
    }
    </style>
    <div class="d-flex flex-column flex-lg-row flex-column-fluid">
        <div class="d-flex flex-lg-row-fluid">
            <div class="d-flex flex-column flex-center pb-0 pb-lg-10 p-10 w-100">
                <a href="{{url('/')}}">
                    <img class="theme-light-show mx-auto mw-100 w-150px w-lg-300px mb-10 mb-lg-20"
                        src="{{ asset('assets/images/auth/agency-dark.png') }}" alt="images" />
                </a>
                <img class="theme-dark-show mx-auto mw-100 w-150px w-lg-300px mb-10 mb-lg-20"
                    src="{{asset("assets/images/auth/agency-dark.png")}}" alt="images" />
                <h1 class="text-gray-800 fs-2qx fw-bold text-center mb-7">Stay ahead in the game of Gymnastics. </h1>
                <div class="text-gray-600 fs-base tzzext-center fw-semibold">Where precision, performance, and
                    excellence meet.!</div>
            </div>
        </div>
        <div class="d-flex flex-column-fluid flex-lg-row-auto justify-content-center justify-content-lg-end p-12">
            <div class="d-flex flex-center rounded-4 w-md-600px p-10"
                style="background-color: var(--kt-body-bg)!important;">
                <div class="w-md-400px">
                    @php if(isset($_COOKIE['login_email']) && isset($_COOKIE['login_pass']))
                    {
                    $login_email = $_COOKIE['login_email'];
                    $login_pass = $_COOKIE['login_pass'];
                    $is_remember = "checked";
                    }
                    else{
                    $login_email = isset($_GET['email'])?$_GET['email']:old('email');
                    $login_pass = '';
                    $is_remember = "";
                    }
                    @endphp
                    @if (session('error_message'))
                    <div class="clearfix"></div>
                    <div class="alert alert-danger alert-dismissible"> {{ session('error_message') }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"> <span
                                aria-hidden="true"></span> </button>
                    </div>
                    @endif
                    @if (session('success_message'))
                    <div class="clearfix"></div>
                    <div class="alert alert-success alert-dismissible"> {{ session('success_message') }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"> <span
                                aria-hidden="true"></span> </button>
                    </div>
                    @endif
                    <form class="form w-100" id="loginForm" action="{{url('admin-login-user')}}" method="POST">
                        <div class="text-center mb-11">
                            <h1 class="text-dark fw-bolder mb-3">Sign In</h1>
                        </div>
                        @csrf
                        <div class="fv-row mb-3">
                            <input type="text" placeholder="Email" data-error="#email_error" name="email"
                                onkeyup="removeError('email')" id="email" value="{{$login_email}}" autocomplete="off"
                                autofocus
                                class="form-control stop_first_space bg-transparent @error('email') is-invalid @enderror" />
                            <span class="error" id="email_error"></span>
                            @error('email')
                            <span class="invalid-feedback red email" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>
                        <div class="fv-row mb-3">
                            <div class="position-relative">
                                <input type="password" placeholder="Password" data-iconType="open" name="password"
                                    value="{{$login_pass}}" id="password" onkeyup="removeError('password')"
                                    autocomplete="off"
                                    class="form-control stop_first_space bg-transparent login_eyes @error('password') is-invalid @enderror"
                                    data-error="#password_error" />
                                <span id="icon_class"
                                    class="btn btn-sm btn-icon position-absolute translate-middle top-50 end-0 me-n2">
                                    <i class="bi bi-eye fs-4 change_icon" title="show"></i>
                                </span>
                            </div>
                           
                            <span class="error" id="password_error"></span>

                            {{-- <span > </span> --}}
                            @error('password')
                            <br /><span class="invalid-feedback red password" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>
                        <div class="fv-row mb-3">
                            <input type="checkbox" name="remember" value="1" {{$is_remember}}>
                            <label for="remember">Remember me</label>
                            @error('remember')
                            <span class="invalid-feedback red remember" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>
                        <div class="d-flex flex-stack flex-wrap gap-3 fs-base fw-semibold mb-8">
                            <div></div>
                            <a href="{{ route('password.request') }}" class="link-primary">Forgot Password ?</a>
                        </div>
                        <div class="d-grid mb-10">
                            <button type="submit" id="kt_sign_in_submit" class="btn btn-primary">
                                <span class="indicator-label">Sign In</span>
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
@push("script")
<script>
$("#email").on("blur", function() {
    $("#password").removeClass("error");
    $("#email").removeClass("error");
});
$("#password").on("blur", function() {
    $("#email").removeClass("error");
    $("#password").removeClass("error");
});


function removeError(i) {
    $("." + i).hide();
    $("#" + i).removeClass('is-invalid');
}

$(document).on('click', '.change_icon', function() {
    if ($('#password').attr('data-iconType') == "open") {
        document.getElementById('password').type = "text";
        $('#password').attr('data-iconType', 'close');
        $('#icon_class').html('<i class="bi bi-eye-slash fs-4 change_icon" title="hide"></i>');
    } else {
        document.getElementById('password').type = "password";
        $('#password').attr('data-iconType', 'open');
        $('#icon_class').html('<i class="bi bi-eye fs-4 change_icon" title="show"></i>');
    }
});

$(document).ready(function() {
    setTimeout(() => {
        $(".alert-dismissible").hide();
    }, 4500);
    jQuery.validator.addMethod("alphanumeric", function(value, element) {
            return this.optional(element) ||
                /^(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*[!@#$?%^&*])[a-zA-Z0-9!?@#<>."':;,-/_~`$^%&*]+$/i
                .test(value);
        },
        "Must contain at least one number and one uppercase and lowercase letter, and one symbol and  at least 8 or more characters"
    );
    jQuery.validator.addMethod("email_verify", function(value, element) {
        return this.optional(element) || /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(value);
    }, "Enter a valid email");

    $('form[id="loginForm"]').validate({
        errorPlacement: function(error, element) {

            var placement = $(element).data("error");
            if (placement) {
                $(placement).append(error);
            } else {
                error.insertAfter(element);
            }

        },
        rules: {
            email: {
                required: true,
                email_verify: true,
            },
            password: {
                required: true,
                minlength: 8,
                alphanumeric: true
            }
        },
        messages: {
            email: {
                email: 'Enter a valid email',
                required: 'Email field is required.'
            },
            password: {
                minlength: 'Password must be at least 8 characters long.',
                required: 'Password field is required.'
            }
        },
        submitHandler: function(form) {
            document.getElementById('kt_sign_in_submit').disabled = true;
            $("#loader-screen").show();
            setTimeout(() => {
                form.submit();
            }, 200);
        },
        showErrors: function(errorMap, errorList) {
            this.defaultShowErrors();
            $('input').removeClass('error');
        },
    });
});
</script>
@endpush