@extends('web.layout.login_header')
@section('title', 'Home')
@section('content')
<style>
    body {
      background-image: url(img/background.jpg);
      background-size: cover;
      background-attachment: fixed;
  }

    .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.10px;
        left: 0px;
        right: 0px;
        bottom: 0 !important;
        width: 100%;
        z-index: 1 !important;
        border-bottom-left-radius: 75px !important;
        border-bottom-right-radius: 75px !important;
        height: 8.5rem;
        border-top-left-radius: calc(.25rem - 1px);
        border-top-right-radius: calc(.25rem - 1px);
        width: auto;
    }

    .imgProfile {
        border-radius: 50% !important;
        width: 4rem;
        height: 4rem !important;
        margin-top: -1px;
    }

    .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: -6rem !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;
    }

    .text-simple {
        color: white;
        font-weight: normal;
    }
    .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;
}
    @media only screen and (min-width: 767px) {
      body {
          min-height: 100%;
          background-size: cover;
          box-shadow: inset 15px 33px 18px 2088px rgb(228 216 223 / 60%);
          margin-top: -48px;
          padding-top: 100px;
          padding-bottom: 100px !important;
      }
  }
    /* floating label // */
</style>
<div class="container">
    <div class="row mt-5 d-flex align-items-center align-content-center pt-5">
        <div class="m-auto">
            <form action="" method="post">
                <div class="card card-padding" style="width: 22rem;border:0px !important;">
                    <img class="card-img-top" src="{{asset('assets/web/img/background.jpg')}}" alt="Card image cap" style="border-bottom-left-radius: 75px !important;
                    border-bottom-right-radius: 75px !important;height: 8.4rem;border-top-left-radius: calc(.25rem - 1px);border-top-right-radius: calc(.25rem - 1px);width: auto;">
                    <div class="innerup card-img-top"></div>
                    <div class="row">
                    @csrf
                        <div class="col-md-8 m-auto text-center headerTop">
                            <h2 class="display-5">Welcome</h2>
                            <p class="text-simple">Verify</p>
                            <img src="{{asset('assets/web/img/profile.png')}}" alt="profile" class="imgProfile">
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="form-group mt-5 row">
                            <div class="col-md-12">
                                <input name="email"  type="text" class="form-control email" id="email" placeholder="Email" value="" readonly>
                                <span class="text-danger"></span>

                            </div>
                        </div>
                        <div class="form-group mt-5 row">
                            <div class="col-md-12">
                          
                                <input name="password"  type="password" class="form-control" placeholder="Password" >
                                <span class="text-danger"></span>
                            </div>
                        </div>
                        <div class="form-group mt-5 row">
                            <div class="col-md-12">
                          
                                <input name="confirm_password"  type="password" class="form-control" placeholder="Confirm Password" >
                                <span class="text-danger"></span>

                            </div>
                        </div>
                        <div class="row form-group mt-5">
                            <div class="col-md-12">
                                <button class="btn btn-danger btn-block " type="submit">Submit</button>
                            </div>
                        </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>
const urlParams = new URLSearchParams(window.location.search);
const myParam = urlParams.get('email');
$(document).ready(function(){
    $(".email").val(myParam);

})


</script>