@extends('user.layout.master')
@section('title', env('APP_NAME'))
@section('content')
    <style>
        .invalid-feedback {
            display: block !important;
        }
    </style>
     @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
    <!-- breadecumb section -->
    <div class="breadcrumbs-sec">
        <div class="container">
            <ul class="breadcrumbs-list">
                <li>
                    <a href="{{ url('/') }}">Home</a>
                </li>
                <li class="active">
                    Login
                </li>
            </ul>
        </div>
    </div>
    <div class="user-account-section">
        <div class="container">
            <!--login block Start-->
            <div class="account-sec d-md-flex">
                <div class="account-left-side d-none d-md-block ">
                    <div class="user-account-img"> <img src="{{ asset('frontend/images/login.png') }}" alt="img"> </div>
                </div>
                <div class="account-right-side">
                    <!--sign up form-->
                    <div class="user-form">
                        <h1>Sign In</h1>
                        @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="login-frm" id="loginForm" action="{{ route('login.store') }}" method="POST">
                            @csrf
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label>Email Address</label>
                                        <div class="icon-field">
                                            <input type="text" name="email" value="{{ old('email') }}"
                                                placeholder="Email Address" id="email" autocomplete="off" autofocus
                                                class="form-control" >
                                            <i class="fas fa-envelope"></i>
                                        </div>
                                        <label id="email-error" class="error" style="display: none" for="email">Email
                                            field is required.</label>
                                        @if ($errors->has('email'))
                                            <span class="invalid-feedback red email" role="alert">
                                                <strong>{{ $errors->first('email') }}</strong>
                                            </span>
                                        @endif
                                    </div>
                                </div>

                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label>Password</label>
                                        <div class="icon-field">
                                            <input type="password" placeholder="Password" name="password"
                                                value="{{ $login_pass }}" id="password" onkeyup="removeError('password')"
                                                autocomplete="off"
                                                class="form-control stop_first_space login_eyes @error('password') is-invalid @enderror"
                                                data-error="#password_error">
                                            <i class="fas fa-eye" id="togglePassword"></i>
                                            <span class="error" id="password_error"></span>
                                        </div>
                                        <label id="email-error" class="error" style="display: none" for="password">Password
                                            field is required.</label>
                                        @error('password')
                                            <br /><span class="invalid-feedback red password" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                            <div class="login-option d-flex flex-wrap justify-content-between  ">
                                <label class="checkbox-custom">
                                    <input type="checkbox" name="remember" value="1">
                                    <span class="checkmark"></span>
                                    Remember Me
                                </label>
                                @error('remember')
                                    <span class="invalid-feedback red remember" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror

                                <a href="{{ route('forget-password-view') }}" class="text-link">Forgot Password ?</a>

                            </div>

                            <button type="submit" name="button" class="btn btn-custom full">Sign In</button>

                        </form>
                        <div class="form-section mt-3">
                            <!--login type block-->
                            <div class="signup-option">
                                {{-- <div class="signin-btn-group d-sm-flex flex-wrap justify-content-between mt-3">
                  <a href="{{route('login.facebook')}}" class="btn blue-bdr-btn d-flex align-items-center"><i
                      class="fab fa-facebook-f fb-icon d-flex align-items-center justify-content-center"></i>
                    Sign in with Facebook</a> <a href="{{route('login.google')}}" class="btn orange-bdr-btn d-flex align-items-center"><i
                      class="fab fa-google-plus-g google-icon d-flex align-items-center justify-content-center"></i>Sign
                    in with Google</a>
                </div> --}}
                                <span class="seprator d-flex justify-content-between align-items-center font600">Or</span>
                                <p class="text-center font300">Don’t have an account ? <a
                                        href="{{ route('user.register') }}" class="text-link orange-color">Register Now
                                    </a></p>
                            </div>
                            <!--login type block-->
                        </div>
                    </div>
                    <!--sign up-->
                </div>
            </div>
        </div>
    </div>
    <!--login block End-->
@endsection
@push('js')
    <script>
        // $('input').blur(function () {
        //   $(this).removeClass('error');
        // });
       

        function removeError(i) {
            $("." + i).hide();
            $("#" + i).removeClass('is-invalid');
        }
        $(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');
                },
            });
        });


        $(document).ready(function() {
         
            $('#togglePassword').click(function() {
                const passwordInput = $('input[name="password"]');
                const eyeIcon = $(this);

                if (passwordInput.attr('type') === 'password') {
                    passwordInput.attr('type', 'text');
                    eyeIcon.removeClass('fa-eye').addClass('fa-eye-slash');
                } else {
                    passwordInput.attr('type', 'password');
                    eyeIcon.removeClass('fa-eye-slash').addClass('fa-eye');
                }
            });
        });
    </script>
@endpush