@extends('layouts.user_registration_layout')

@section('content')

    <section class="auth-page">

        <div class="auth-container">

            <div class="left-div">

                {{-- <a href="/" class="close"><img src="{{ asset('frontend/assets/images/close-icon-red.svg') }}"></a> --}}

                <div class="inner-div">



                    <div class="tab-content">

                        <div id="details-tab" class="tab-pane fade active show">

                            <h3>Welcome</h3>

                            <div class="">

                                <form class="m-form m-form--state row" name="frm-login" id="frm-login" method="post"

                                    action="{{ route('user-login') }}" enctype="multipart/form-data">

                                    <input type="hidden" name="_token" value="{{ csrf_token() }}" />

                                    <div class="col-12 col-md-12">

                                        <div class="form-group">

                                            <label>Email Address</label>

                                            <div class="input-with-right-icon">

                                                <input type="text" placeholder="" class="form-control" id="email"

                                                    name="email" autocomplete="off" required>

                                                <span class="right-icon email-tick" style="display: none"><img

                                                        src="{{ asset('frontend/assets/images/verify-tick-green.svg') }}"></span>

                                                <span class="right-icon email-cross" style="display: none"><img

                                                        src="{{ asset('frontend/assets/images/close-icon-red.svg') }}"></span>

                                                <span class="email_err" style="color:red"></span>

                                            </div>

                                        </div>

                                    </div>



                                    <div class="col-12 col-md-12">

                                        <div class="form-group">

                                            <label>Password</label>

                                            <div class="input-with-right-icon">

                                                <input type="password" placeholder="" class="form-control" id="password"

                                                    maxlength="8" name="password" autofocus="" autocomplete="off" required>



                                                {{-- <button type="button" class="right-icon"><img

                                            src="{{ asset('frontend/assets/images/eye-icon.svg') }}"

                                            id="togglePassword"></button> --}}

                                                <i class="bi bi-eye-slash right-icon " id="togglePassword"

                                                    style="cursor: pointer"></i>

                                            </div>

                                        </div>

                                    </div>



                                    <div class="col-12 col-md-12">

                                        <div class="form-group">

                                            <div class="checkagree-with-label">

                                                {{-- <label><a href="/forget-password">Forgot Password?</a></label> --}}

                                            </div>

                                        </div>

                                    </div>



                                    <div class="col-12 col-md-12">

                                        <div class="form-group">

                                            <div class="submit-actions">

                                                <button type="submit" class="submit-btn theme-solid-btn">Log In <img

                                                        src="{{ asset('frontend/assets/images/right-arow-white-icon.svg') }}"></button>

                                            </div>

                                        </div>

                                    </div>

                                </form>

                                <div class="col-12 col-md-12">

                                    <div class="form-group">

                                        <div class="auth-more-text">

                                            {{-- New user? <a href="/Registration">Register here</a> --}}

                                        </div>

                                    </div>

                                </div>

                            </div>

                        </div>



                        <div id="verification-tab" class="tab-pane fade">

                            verification-tab

                        </div>

                    </div>

                </div>

            </div>

            <div class="right-div">

            </div>

        </div>

    </section>

    @if (Session::has('modal_message_error'))

        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.33.1/sweetalert2.css">

        <script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.js"></script>

        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.33.1/sweetalert2.js">

        </script>



        <script type="text/javascript">

            $(document).ready(function() {

                Swal.fire({

                    type: 'error',

                    title: 'Invalid Credentials',

                    text: 'Please Check Your Email or Password'

                })

            });

        </script>

    @endif

@endsection

<!-- CSS -->

<link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.1.0/css/toastr.css" rel="stylesheet" />

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css" />

<!-- JS -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.1.0/js/toastr.js"></script>

<script src="https://www.gstatic.com/firebasejs/7.23.0/firebase.js"></script>

<script>

    window.addEventListener("DOMContentLoaded", function() {



        $('#email').focusout(function() {

            email_validator();



        });



        function email_validator() {

            var pattern = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;

            var email = $('#email').val();



            if (email !== '') {

                if (pattern.test(email)) {

                    $('.email-tick').css('display', 'block');

                    $('.email-cross').css('display', 'none');



                    $("#saveData").removeAttr('disabled');



                } else {

                    $("#saveData").prop("disabled", true);

                    $('.email-tick').css('display', 'none');

                    $('.email-cross').css('display', 'block');

                }

            } else {

                $("#saveData").prop("disabled", true);

                $('.email-tick').css('display', 'none');

                $('.email-cross').css('display', 'block');

            }

        }





        const togglePassword = document.querySelector("#togglePassword");

        const toggleConfirmPassword = document.querySelector("#toggleConfirmPassword");





        togglePassword.addEventListener("click", function(e) {

            // toggle the type attribute

            const type =

                password.getAttribute("type") === "password" ? "text" : "password";

            password.setAttribute("type", type);

            // toggle the eye / eye slash icon

            this.classList.toggle("bi-eye");

        });







    });

</script>