@extends('layouts.admin_login')
    @section('content')
    <style>
        #password-error.error_message_yns {
            position: absolute;
            top: 100%;
            margin-bottom: 10px;
        }

        #email-error.error_message_yns {
            position: absolute;
            top: 100%;
            margin-bottom: 10px;
        }
    </style>
        <x-alert class="bg-green-700 text-green-100 p-4" />
        <div class="app-content content ">
            <div class="content-wrapper">
                <div class="content-body">
                    <div class="auth-wrapper auth-basic px-2">
                        <div class="auth-inner my-2">
                            <div class="card mb-0">
                                <div class="card-body">
                                    <div class="flash_messages">
                                        @include('flash_messages.admin_message')
                                    </div>
                                    <a href="javascript:void(0)" class="brand-logo">
                                        <img src="{{ asset(getSettingData('company_logo')) }}" style="width: 40%;">
                                    </a>
                                    <form class="login-form mt-2" action="{{ route('admin.login_submit')}}" method="POST" autocomplete="off">
                                        @csrf
                                        <div class="mb-1">
                                            <label for="login-email" class="form-label">Email Id</label>
                                            <input type="text" class="form-control" name="email" tabindex="1" autofocus />
                                        </div>
                                        <div class="mb-1">
                                            <div class="d-flex justify-content-between">
                                                <label class="form-label" for="login-password">Password</label>
                                                <a href="javascript:void(0);" data-bs-toggle="modal" data-bs-target="#addNewCard">
                                                    <small>Forgot Password?</small>
                                                </a>
                                            </div>
                                            <div class="input-group input-group-merge form-password-toggle">
                                                <input type="password" class="form-control form-control-merge" name="password" tabindex="2"/>
                                                <span class="input-group-text cursor-pointer"><i data-feather="eye"></i></span>
                                            </div>
                                        </div>
                                        <div class="mb-2 mt-2">
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" id="remember-me"
                                                    tabindex="3" />
                                                <label class="form-check-label" for="remember-me"> Remember Me </label>
                                            </div>
                                        </div>
                                        <button class="btn btn-primary w-100" tabindex="4">Sign in</button>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="modal fade" id="addNewCard" tabindex="-1" aria-labelledby="addNewCardTitle" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header bg-transparent">
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body px-sm-5 mx-50 pb-5">
                        <h1 class="text-center mb-1" id="addNewCardTitle">Forgot Password?<i class="fa-solid fa-lock"></i></h1>
                        <p class="text-center">Enter your email and we'll send you instructions to reset your password</p>
                        {!! Form::open(['method'=>'POST','route'=>['user.forgot_password'], 'class'=>'row gy-1 gx-2 mt-75 reset-password-form']) !!}
                            <div class="col-12">
                                <label class="form-label" for="modalAddCardNumber">Email Id</label>
                                <div class="input-group input-group-merge">
                                    <input name="email" class="form-control" type="text"/>
                                </div>
                            </div>
                            <div class="col-12 text-center">
                                <button type="submit" class="btn btn-primary me-1 mt-1">Submit</button>
                                <button type="reset" class="btn btn-outline-secondary mt-1" data-bs-dismiss="modal" aria-label="Close">
                                    Cancel
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <!-- BEGIN: Page Vendor JS-->
        <script src="{{ asset('admin/app-assets/vendors/js/forms/validation/jquery.validate.js') }}"></script>
        <script src="{{ asset('admin/app-assets/vendors/js/forms/validation/additional-methods.min.js') }}"></script>
        <!-- END: Page Vendor JS-->

        <style type="text/css">
            .error_message_yns{
                color: red;
            }
        </style>

        <script>
            $.validator.addMethod("validEmail", function(value, element) {
                if (value == '') return true;
                var temp1;
                temp1 = true;
                var ind = value.indexOf('@');
                var str2 = value.substr(ind + 1);
                var str3 = str2.substr(0, str2.indexOf('.'));
                if (str3.lastIndexOf('-') == (str3.length - 1) || (str3.indexOf('-') != str3.lastIndexOf('-'))) return false;
                var str1 = value.substr(0, ind);
                if ((str1.lastIndexOf('_') == (str1.length - 1)) || (str1.lastIndexOf('.') == (str1.length - 1)) || (str1.lastIndexOf('-') == (str1.length - 1))) return false;
                str = /(^[a-zA-Z0-9]+[\.\.\._-]{0,1})+([a-zA-Z0-9]+[\.\.\._-]{0,1})*@([a-zA-Z0-9]+[-]{0,1})+(\.[a-zA-Z0-9]+)*(\.[a-zA-Z]{2,3})$/;
                temp1 = str.test(value);
                return temp1;
            }, "Please enter valid email address");

            $(".login-form").validate({
                ignore: "",
                errorElement: 'label',
                errorClass: 'error_message_yns',

                rules: {
                    "email": {
                        required : true,
                        email:true,
                        validEmail:true,
                    },
                    "password": {
                        required : true,
                    },
                },
                messages: {
                    "email": {
                        required: "Please Enter Email Id Or Mobile Number",
                        email:"Please Enter Valid Email Address",
                        validEmail:"Please Enter Valid Email Address",
                    },
                    "password": {
                        required: "Please Enter Password",
                    },
                }
            });

            $(".reset-password-form").validate({
                ignore: "",
                errorElement: 'label',
                errorClass: 'error_message_yns',

                rules: {
                    "email": {
                        required : true,
                        email:true,
                        validEmail:true,
                    },
                },
                messages: {
                    "email": {
                        required: "Please Enter Register Email Id",
                        email:"Please Enter Valid Email Address",
                        validEmail:"Please Enter Valid Email Address",
                    },
                }
            });
        </script>
    @endsection