@extends('layouts.main')
@push('title')
<title>Login</title>  
@endpush
@section('main-section')
<link rel="stylesheet" href={{asset('assets/css/style.css')}}>

<style>

.fg-block{
justify-content: space-between;
}

.d-flex{
    display:flex;
}

    .navbar {
    height: 70px;
    left: 0px;
    right: 0px;
}

.shadow-light{
    width:100px;
}

.float-right {
    float: right!important;
}

.form-group label {
    display: inline-block;
}

.form-group input {
    width: auto;
    height: auto;
}

.w-100{
    width:100% !important;
}

div#alert_danger {
    text-align: center;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 99;
}

#alert_success {
    color: #fff;
    border: none;
    padding: 15px 20px;
    background: #ffffff;
    position: fixed;
    top: 50%;
    border: 3px dashed #fa0;
    left: 50%;
    z-index: 99;
    /* width: 600px; */
    transform: translate(-50%, -50%);
}

#alert_success img{
    margin-left:32px;
}

/* @media (min-width: 576px) */
@media (min-width: 576px)
{
    .offset-sm-2 {
    margin-left: 16.666667%;
    }

}


@media (min-width: 992px){
    .offset-lg-3 {
        margin-left: 25%;
    }
}


@media (min-width: 1200px){
    .offset-xl-4 {
    margin-left: 33.333333%;
}
}

</style>


<!-- Header -->
<div id="home" class="bg-inner low-back-gradient-inner">
    <div class="text-con-inner low-back-up">
      <div class="container">
        <div class="row">
          <div class="lead col-lg-12 col-xm-12 text-center">
            <h1><span class="top-heading-inner">Login</span> </h1>
            <div class="list-o-i white">
              <p class="white no-p">There are many variations of passages of Lorem<br>
                Ipsum available, but the majorityhave suffered
                alteration in some form, 
                Learn more</p>
              <div class="pagenation_links"><a href="/" class="yellow">Home</a> / Login</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- ENd Header --> 

        <section class="section">
            <div class="container mt-4">


              

                <div class="row">



                    <div
                        class="col-12 col-sm-8  col-md-6 offset-md-3 col-lg-4 offset-lg-3 col-xl-4 offset-xl-4">
                        @if (session()->has('success_message'))
                        <div class="alert alert-success text-center" >
                            <p>{{ session()->get('success_message') }}</p> 
                        </div>
                        @endif @if(count($errors) > 0)
                        <div class="alert alert-danger" id="alert_danger">
                            <ul>
                                @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                        @endif
                        <div class="login-brand">
                            <img src={{asset('assets/image/logo_defaultimage.png')}} alt="logo" width="100"
                                class="shadow-light">
                            <div>mywealthfree.com</div>
                        </div>
                        <div class="card card-primary">
                            <div class="card-header">
                                <h4>Member Login</h4>
                            </div>
                            @if(session('success'))
                                <div class="alert" id="alert_success">
                                    <div class="text-center">
                                        <img src="assets/image/green_tick.gif" alt="tick_mark">
                                    </div>
                                    <p class="text-center">{{ session('success') }}</p>
                                </div>
                            @endif



        
                            <div class="card-body">
                                <form method="POST" action="{{ route('login') }}" class="needs-validation" id="letmeinform">
                                    {{ csrf_field() }}
                                    <div class="form-group">
                                        <label for="Email">Email</label>

                                        <input type="email" id="email" name="email" value="{{ old('email') }}" placeholder="Email" class="form-control w-100" required autofocus>
                                        
                                        {{-- <input id="username" type="text" class="form-control" name="username"
                                            tabindex="1" required autofocus> --}}
                                        <div class="invalid-feedback">
                                            Please fill in your email </div>
                                    </div>
                                    {{-- <div class="form-group">
                                        <label for="Phone">Phone</label>

                                        <input type="number" id="phone" name="phone" value="{{ old('phone') }}" placeholder="Phone" class="form-control w-100" required autofocus>
                                        
                                        <div class="invalid-feedback">
                                            Please fill in your Phone </div>
                                    </div> --}}
                                    <div class="form-group">
                                        <div class="d-flex fg-block">
                                            <label for="password" class="control-label">Password</label>
                                            {{-- <div class="float-right"> --}}
                                            <div class="">
                                                <a href="{{ route('password.request') }}" class="text-small">
                                                    Forgot Password?
                                                </a>
                                            </div>
                                        </div>
                                        <div class="position-relative">
                                            <input type="password" id="password" name="password" class="form-control w-100"  value="{{ old('password') }}" placeholder="Password" required>
    
                                            <span class="view-password" onclick="viewpass()"><i class="eyeone fa fa-eye" aria-hidden="true"></i></span>
                                        </div>
                                        {{-- <input id="password" type="password" class="form-control" name="password"
                                            tabindex="2" required> --}}
                                        <div class="invalid-feedback">
                                            please fill in your password </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="custom-control custom-checkbox">
                                            {{-- <input type="checkbox" name="rememberme" value="1"
                                                class="custom-control-input" tabindex="3" id="remember-me"> --}}

                                                <input type="checkbox" id="remember-me" class="custom-control-input" name="remember" {{ old('remember') ? 'checked' : '' }}>

                                            {{-- <label class="custom-control-label" for="remember-me">Remember Me</label> --}}
                                            <span>Remember Me</span>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <button data-sitekey data-callback="onSubmit"
                                            class="btn btn-primary btn-lg btn-block g-recaptcha">
                                            Login </button>
                                    </div>
                                </form>
                                <div class="mt-2 text-muted text-center">
                                    Do not have an account? <a href="/register-user">Create One</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>


        <script>
                function viewpass() {
                    let temp = document.getElementById("password");
                    if (temp.type === "password") {
                        temp.type = "text";
                        $('.eyeone').addClass('fa-eye-slash');
                        $('.eyeone').removeClass('fa-eye');
                    }
                    else {
                        $('.eyeone').removeClass('fa-eye-slash');
                        $('.eyeone').addClass('fa-eye');
                        temp.type = "password";
                    }
                }
        </script>

        <script>
            document.addEventListener("DOMContentLoaded", function() {
                const successMessage = document.getElementById('alert_success');
                if (successMessage) {
                    setTimeout(function() {
                        successMessage.style.opacity = '0';
                        setTimeout(function() {
                            successMessage.remove();
                        }, 1000); 
                    }, 3000);
                }

               const errorMessage = document.getElementById('alert_danger');
                if (errorMessage) {
                    setTimeout(function() {
                        errorMessage.style.opacity = '0';
                        setTimeout(function() {
                            errorMessage.remove();
                        }, 1000); 
                    }, 3000);
                }

            });
        </script>

@endsection