@extends('login.app')
@section('content')
    <section id="wrapper">
        <div class="login-register" style="background-image:url(images/signupBg.jpg);">
            <a class="logo d-flex justify-content-center" href="{{route('front.index')}}">
                <img src="{{asset('images/tmLogo.gif')}}" alt="homepage" class="dark-logo mainLogo" style="width: 12%">
            </a>
            <div class="login-box card">
                <div class="card-body">
                    <form class="form-horizontal form-material" id="loginform" action="{{ route('login.form') }}" method="POST">
                        @csrf
                        <h3 class="box-title m-b-20">Sign In</h3>
                        <div class="form-group">
                            <div class="col-xs-12">
                                <input class="form-control" type="text" name="username" required placeholder="Username">
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-xs-12">
                                <input class="form-control" type="password" name="password" required placeholder="Password">
                            </div>
                        </div>
                        <div class="form-group row">
                            <div class="col-md-12 font-14">
                                <div class="checkbox checkbox-primary pull-left p-t-0">
                                    <input id="checkbox-signup" type="checkbox" name="remember">
                                    <label for="checkbox-signup"> Remember me </label>
                                </div>
                                <a href="javascript:void(0)" id="to-recover" class="text-dark pull-right">
                                    <!-- <i class="fa fa-lock m-r-5"></i> -->
                                    Forgot password?
                                </a>
                            </div>
                        </div>
                        <div class="form-group text-center m-t-20">
                            <div class="col-xs-12">
                                <button class="btn btn-custom btn-lg btn-block text-uppercase waves-effect waves-light" type="submit">Log In</button>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-xs-12 col-sm-12 col-md-12 m-t-10 text-center">
                                <div class="social">
                                    <a href="{{ route('login.facebook') }}" style="width: 45px;" class="btn btn-facebook" data-toggle="tooltip" title="Login with Facebook">
                                        <i aria-hidden="true" class="fab fa-facebook-f"></i>
                                    </a>
                                    <a href="{{ route('login.google') }}" style="width: 45px;" class="btn btn-googleplus" data-toggle="tooltip" title="Login with Google">
                                        <i aria-hidden="true" class="fab fa-google-plus-g"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="form-group m-b-0">
                            <div class="col-sm-12 text-center">
                                <div>Don't have an account? <a href="{{ route('front.register') }}" class="text-info m-l-5"><b>Sign Up</b></a></div>
                            </div>
                        </div>
                    </form>


                    <form class="form-horizontal" id="recoverform" action="{{route('password.recover')}}" method="post">
                        @csrf
                        <div class="form-group ">
                            <div class="col-xs-12">
                                <h3>Recover Password</h3>
                                <p class="text-muted">Enter your Email and instructions will be sent to you! </p>
                            </div>
                        </div>
                        <div class="form-group ">
                            <div class="col-xs-12">
                                <input class="form-control" type="text" required="" name="email" placeholder="Email"> </div>
                        </div>
                        <div class="form-group text-center m-t-20">
                            <div class="col-xs-12">
                                <button class="btn btn-primary btn-lg btn-block text-uppercase waves-effect waves-light" type="submit">Reset</button>
                            </div>
                        </div>
                    </form>

                </div>
            </div>
        </div>
    </section>
    <script>
        // Check if the "Remember me" checkbox is checked on page load
        window.onload = function() {
            var rememberCheckbox = document.getElementById("checkbox-signup");
            var rememberMe = localStorage.getItem("rememberMe");

            if (rememberMe === "true") {
                rememberCheckbox.checked = true;
            }
        };

        // Handle the "Remember me" checkbox change event
        document.getElementById("checkbox-signup").addEventListener("change", function() {
            var rememberCheckbox = document.getElementById("checkbox-signup");
            var rememberMe = rememberCheckbox.checked;

            localStorage.setItem("rememberMe", rememberMe);
        });
    </script>


@endsection