@extends('Frontend.Master.master')

@section('content')
    <style>
        input {
            margin: 0 10px;
        }

        input:-webkit-autofill {
            background-color: transparent !important;
            -webkit-box-shadow: 0 0 0px 1000px white inset !important;
            box-shadow: 0 0 0px 1000px white inset !important;
        }
    </style>

    <div class="admin-loginbody-wrap">
        <div class="admin-loginbody-left">
            <div class="login_content_bg text-center" style="">
                <img src="./assets/images/login1.png" alt="" style="width: 100%;">
            </div>
            <div class="login_bg" style="">
                <!-- <div class="login_content_bg text-center" style="">
                                <img src="./assets/images/login1.png" alt="" style="width: 100%;">
                            </div> -->
                <div class="login_content" style="">
                    <h6>
                        Data Management System
                    </h6>

                    <p style="">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rutrum risus libero, sit amet
                        ultricies arcu.
                    </p>

                </div>

            </div>

        </div>
        <div class="admin-loginbody-right">
            <div class="login_form_details">
                <div class="title">
                    <h6>Welcome back!</h6>
                    <p>Donec rutrum risus libero, sit amet ultricies arcu faucibus vel.</p>


                    <!-- error message start -->
                    @if($errors->has('error'))
                        <div class="alert alert-danger">
                            {{ $errors->first('error') }}
                        </div>
                    @endif
                    <!-- error message end -->

                    @if(session()->has('success'))
                        <div class="alert alert-success">
                            {{ session('success') }}
                        </div>
                    @endif
                    @if(session()->has('error'))
                        <div class="alert alert-danger">
                            {{ session('error') }}
                        </div>
                    @endif
                </div>
                <div class="login-form-main">
                    <form method="POST" action="{{ route('userLogin.submit') }}">
                        @csrf
                        <div class="form-group mt-3">
                            <label for="exampleFormControlInput1" class="form-label">Email</label>
                            <div class="single-input">
                                <span>
                                    <svg width="19" height="15" viewBox="0 0 19 15" fill="none"
                                        xmlns="http://www.w3.org/2000/svg">
                                        <path
                                            d="M3 0H16C17.66 0 19 1.34 19 3V12C19 13.66 17.66 15 16 15H3C1.34 15 0 13.66 0 12V3C0 1.34 1.34 0 3 0ZM3 1C2.5 1 2.06 1.17 1.72 1.47L9.5 6.5L17.28 1.47C16.94 1.17 16.5 1 16 1H3ZM9.5 7.71L1.13 2.28C1.05 2.5 1 2.75 1 3V12C1 13.1 1.9 14 3 14H16C17.1 14 18 13.1 18 12V3C18 2.75 17.95 2.5 17.87 2.28L9.5 7.71Z"
                                            fill="#3579DF" />
                                    </svg>
                                </span>
                                <input name="email" type="email" placeholder="Email">
                            </div>
                        </div>
                        <div class="form-group mt-3">
                            <label for="exampleFormControlInput2" class="form-label">Password</label>
                            <div class="single-input pass-field">
                                <span><svg width="15" height="19" viewBox="0 0 15 19" fill="none"
                                        xmlns="http://www.w3.org/2000/svg">
                                        <path
                                            d="M12 5.7C13.66 5.7 15 6.973 15 8.55V16.15C15 17.727 13.66 19 12 19H3C1.34 19 0 17.727 0 16.15V8.55C0 6.973 1.34 5.7 3 5.7V4.275C3 1.9 5 0 7.5 0C10 0 12 1.9 12 4.275V5.7ZM3 6.65C1.9 6.65 1 7.505 1 8.55V16.15C1 17.195 1.9 18.05 3 18.05H12C13.1 18.05 14 17.195 14 16.15V8.55C14 7.505 13.1 6.65 12 6.65H3ZM11 5.7V4.275C11 2.4415 9.43 0.95 7.5 0.95C5.57 0.95 4 2.4415 4 4.275V5.7H11ZM7.5 11.4C6.67 11.4 6 12.0365 6 12.825C6 13.6135 6.67 14.25 7.5 14.25C8.33 14.25 9 13.6135 9 12.825C9 12.0365 8.33 11.4 7.5 11.4ZM7.5 10.45C8.88 10.45 10 11.514 10 12.825C10 14.136 8.88 15.2 7.5 15.2C6.12 15.2 5 14.136 5 12.825C5 11.514 6.12 10.45 7.5 10.45Z"
                                            fill="#3579DF" />
                                    </svg></span>
                                    <input type="password" id="password" name="password" placeholder="Password">
                                    <div class="eye-btn">
                                      <span toggle="#password" class="fa fa-eye-slash" id="toggle-password"></span>
                                    </div>
                                <!-- <span style="background-color: transparent !important; cursor: pointer;"></span> -->
                            </div>
                            <p class="text-end">
                                <a href="{{ route('password.request') }}" style="color:#669cec !important;">Forgot
                                    Password?</a>
                            </p>
                        </div>
                        <div class="submit-btn text-center">
                            <input type="submit" value="Login">
                        </div>
                        <div class="text-center mt-3">
                            <p>New User?
                                <a href="{{route('SignUp.View')}}"
                                    style="color:#007bff; font-weight: bold; text-decoration: none; ">Sign Up</a>
                            </p>
                        </div>


                    </form>
                </div>
            </div>
        </div>
    </div>
    <script>
        $(document).ready(function () {
            $(document).on('click','#toggle-password',function(){
                var inputAttr = $('#password').attr("type");
                $(this).toggleClass("fa-eye-slash");
                    $(this).toggleClass("fa-eye");
                if(inputAttr=='password'){
                    $('#password').attr("type","text");
                    
                }else{
                    $('#password').attr("type","password");
                }
            });
        });
    </script>

@endsection