@extends('web.layout.login_header')
@section('title', 'Home')
@section('content')
<style>
    body {
        background-image: url(img/background.jpg);
        min-height: 240%;
        background-size: cover;
        box-shadow: inset 15px 33px 18px 2088px rgb(228 216 223 / 60%);
        margin-top: -48px;
        padding-top: 58px;
        overflow-y: hidden !important;
        padding-bottom: 148px;
    }

    .bg-inner {
        background-color: white !important;
        border: white solid 1px !important;
        border-radius: 20px !important;
    }

    .heading {
        position: relative !important;
        z-index: 10 !important;
        top: 47px !important;
        font-weight: 400 !important;
    }

    .profile {
        width: 5rem !important;
        top: 47px !important;
        left: 43% !important;
        right: 40% !important;
        z-index: 11 !important;
        position: relative !important;
    }

    .innerup::after {
        border-radius: 0rem !important;
        content: "" !important;
        background: #6d0000b8 !important;
        position: absolute !important;
        top: -0.1px;
        left: .4px;
        right: 0px;
        bottom: 0 !important;
        width: 100%;
        z-index: 1 !important;
        border-bottom-left-radius: 127px !important;
        border-bottom-right-radius: 126px !important;
        height: 12rem;
        border-top-left-radius: calc(.25rem - 1px);
        border-top-right-radius: calc(.25rem - 1px);
        width: auto;
    }

    .imgProfile {
        border-radius: 50% !important;
        width: 6rem;
        height: 5rem !important;
        margin-top: 9px;
    }

    .headingContainer {
        left: 43% !important;
        right: 40% !important;
        color: white !important;
    }

    /* floating label */
    .form-control {
        border: none !important;
        outline: none !important;
        border-bottom:  1px solid #6d0000b8 !important;
    }

    .form-control:focus {
        border: none !important;
        outline: none !important;
        border-bottom: 1px solid #9f9f9f !important;
        box-shadow: none;
    }

    .form-group {
        position: relative !important;
        margin-bottom: 1.5rem !important;
    }

    .form-control-placeholder {
        position: absolute !important;
        top: 0 !important;
        padding: 7px 0 0 13px !important;
        transition: all 200ms !important;
        opacity: 0.5 !important;
    }

    .form-control:focus+.form-control-placeholder,
    .form-control:valid+.form-control-placeholder {
        font-size: 90% !important;
        transform: translate3d(0, -100%, 0) !important;
        opacity: 1 !important;
    }

    .onoverlay {
        position: absolute !important;
        top: -1px !important;
        height: 11rem !important;
        right: -9px !important;
        bottom: 0px !important;
        width: 102.5% !important;
        border-top-right-radius: 0px !important;
        border-top-left-radius: 0px !important;
        border-bottom-right-radius: 123px !important;
        border-bottom-left-radius: 123px !important;
    }

    .headerTop {
        margin-top: -11rem !important;
        z-index: 10;
        color: white;
    }

    .display-5 {
        font-weight: 700;
    }

    .card-padding {
        width: 18rem;
        padding-top: 1px;
        border: 0px !important;
        padding-left: 1px;
        padding-right: 1px;
        padding-bottom: 0px;
        width: 32.5rem;
        border: 0px !important;
    }

    .text-simple {
        color: white;
        font-weight: normal;
        font-size: 1.2rem;
    }

    .text-huge {
        font-size: 2.5rem;
    }

    .imgHeader {
        margin-top: -1px;
        height: 12rem;
        border-bottom-left-radius: 129px;
        height: 12rem;
        border-bottom-RIGHT-radius: 129px;
        height: 12rem;
    }

    /* Shared */
    .loginBtn {
        box-sizing: border-box;
        position: relative;
        margin: 0.2em;
        padding: 0 22px 4px 56px;
        border: none;
        text-align: left;
        line-height: 34px;
        white-space: nowrap;
        border-radius: 0.2em;
        font-size: 14px;
        color: #FFF;
        width: 100%;
        height: 50px;
    }

    .loginBtn:before {
        content: "";
        box-sizing: border-box;
        position: absolute;
        top: 0;
        left: 0;
        width: 40px;
        height: 100%;
    }

    .loginBtn:focus {
        outline: none;
    }

    .loginBtn:active {
        box-shadow: inset 0 0 0 32px rgba(0, 0, 0, 0.1);
    }


    /* Facebook */
    .loginBtn--facebook {
        background-color: #4C69BA;
        background-image: linear-gradient(#4C69BA, #3B55A0);
        /*font-family: "Helvetica neue", Helvetica Neue, Helvetica, Arial, sans-serif;*/
        text-shadow: 0 -1px 0 #354C8C;
    }

    .loginBtn--facebook:before {
        border-right: #364e92 1px solid;
        background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/14082/icon_facebook.png) 8px 11px no-repeat;
    }

    .loginBtn--facebook:hover,
    .loginBtn--facebook:focus {
        background-color: #5B7BD5;
        background-image: linear-gradient(#5B7BD5, #4864B1);
    }

    /* Google */
    .loginBtn--google {
        /*font-family: "Roboto", Roboto, arial, sans-serif;*/
        background: #DD4B39;
    }

    .loginBtn--google:before {
        border-right: #BB3F30 1px solid;
        background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/14082/icon_google.png') 8px 11px no-repeat;
    }

    .loginBtn--google:hover,
    .loginBtn--google:focus {
        background: #E74B37;
    }

    /*Linkedin*/
    .loginBtn--linkedin {
        /*font-family: "Roboto", Roboto, arial, sans-serif;*/
        background: #007bb6;
    }

    .loginBtn--linkedin:before {
        border-right: #2d4e5f 1px solid;
        background: url('{{asset('assets/web/images/link.png')}}') 8px 11px no-repeat;
    }

    .loginBtn--linkedin:hover,
    .loginBtn--linkedin:focus {
        background: #E74B37;
    }

    .form-group {
        margin-bottom: 5px !important;
    }
    .mt-5 {
    margin-top: 0.5rem!important;
    }
    .btn-danger {
  color: #fff;
  background-color: #6d0000;
  border-color: #6d0000;
}

.btn-danger:hover {
  color: #fff;
  background-color: #6d0000b8;
  border-color: #6d0000b8;
}

.btn-danger:focus, .btn-danger.focus {
  color: #fff;
  background-color: #6d0000b8;
  border-color: #6d0000b8;
  box-shadow: 0 0 0 0.2rem rgba(225, 83, 97, 0.5);
}

.btn-danger.disabled, .btn-danger:disabled {
  color: #fff;
  background-color: #6d0000;
  border-color: #6d0000;
}
a {
    color: #6d0000;
    font-weight: 700;
}
a:hover {
    color: #6d0000b8;
    font-weight: 700;
}
.btn-outline-facebook{
    background-color: #3b5998;
}
.btn-outline-google{
    background-color: #dd4b39;
}
.btn-outline-linkedin{
    background-color: #0082ca;
}
</style>
<div class="container">
    
    <div class="row mt-5 d-flex align-items-center align-content-center">
        <div class="m-auto">
            <div>
                <div class="card card-padding" style="width: 30.5rem;border:0px !important;">
                    <img class="card-img-top imgHeader" src="{{asset('assets/web/img/background.jpg')}}" alt="Card image cap">
                    <div class="innerup card-img-top"></div>
                    <div class="row">
                        <div class="col-md-8 m-auto text-center headerTop">
                            <div class="col-md-12">
                                <h2 class="display-5 text-huge">Welcome</h2>
                            </div>
                            <div class="col-md-12 pt-3">
                                <p class="text-simple">Sign in to continue to House Run</p>
                            </div>
                            <img src="{{asset('assets/web/img/profile.png')}}" alt="profile" class="imgProfile shadow">
                        </div>
                    </div>
                    @if($errors->any())
                    <div class="alert alert-danger" role="alert">
                        {{ implode('', $errors->all(':message')) }}
                      </div>
                    @endif   
                    <div class="card-body">
                            <form action="{{ route('user.login') }}" method="POST" class="pb-smooth">
                                @csrf
                            <div class="form-group  row">
                                <div class="col-md-12">
                                    <input type="text" class="form-control" placeholder="Email" name="email" required>
                                </div>
                            </div>
                            <div class="form-group  row">
                                <div class="col-md-12">
                                    <input type="password" class="form-control" placeholder="Password" name="password" required>
                                </div>
                            </div>
                            <div class="form-group  row">
                                <div class="col-md-12 text-muted" id="toTextMuted">
                                    <label><input type="checkbox" onclick="changeCol()"> Remember Password</label>
                                </div>
                            </div>
                            <div class="row form-group ">
                                <div class="col-md-12">
                                    <button class="btn btn-danger btn-block" type="submit">Sign In</button>
                                </div>
                            </div>
                        </form>
                        <div class="row form-group  text-muted">
                            <div class="col-md-12 text-center">
                                Or Login With
                            </div>
                        </div>
                        <div data-v-4221c3ad="" class="row ">
                            <div data-v-4221c3ad="" class="col-4">
                                <button data-v-4221c3ad="" type="button" class="btn login-btn btn-outline-facebook border btn-block"><i data-v-4221c3ad="" class="fab fa-facebook login-icon"></i><span data-v-4221c3ad="" class="icon-title"> Facebook </span></button>
                            </div>
                            <div data-v-4221c3ad="" class="col-4">
                                <button data-v-4221c3ad="" type="button" class="btn login-btn btn-outline-google btn-block border google-plus"><i data-v-4221c3ad="" aria-hidden="true" class="fab fa-google-plus login-icon"></i><span data-v-4221c3ad="" class="icon-title"> Google </span></button>
                            </div>
                            <div data-v-4221c3ad="" class="col-4">
                                <button type="button" class="btn login-btn btn-outline-linkedin border btn-block">
                            		<i class="fa fa-linkedin login-icon"></i><span class="icon-title"> Linkedin </span>
                                </button>
                            </div>
                        </div>
                        <div class="row form-group mt-2">
                            <div class="col-12 pb-0">
                                <a id="clickbtn" href="{{url('/user/forgot-password')}}" class="float-left">Forgot Password</a>
                                <p class="float-right"> Not A Member <span class="text-primary"><a href="{{url('select_role')}}">Join Now</a></span></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    function changeCol() {
        var toTextMuted = document.getElementById("toTextMuted");
        toTextMuted.classList.toggle("text-muted")
    }
</script>

@endsection
@section('scripts')