@extends('web.layout.login_header')
@section('title', 'Home')
@section('content')
<style>
    body {
    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: 128px;
    }

    .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: 0px;
        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: 240%;
            background-size: cover;
            box-shadow: inset 15px 33px 18px 2088px rgb(228 216 223 / 60%);
            margin-top: -48px;
            padding-top: 120px;
            overflow-y: hidden !important;
            padding-bottom: 180px !important;
            }
    }
    /* floating label // */
</style>
@if(Session::get('status'))
<div class="alert alert-primary" role="alert">
    {{Session::get('status')}}
</div>
@endif
@if($errors->any())
        <div class="alert alert-danger" role="alert">
            {{ implode('', $errors->all(':message')) }}
            </div>
@endif  
<div class="container">
    <div class="row mt-5 d-flex align-items-center align-content-center pt-5">
        <div class="m-auto">
            <div>
            <form action="{{ route('user.change.password') }}" method="post">
                @csrf
                <input type="hidden" value="{{ $id }}" name="code">
                <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">
                        <div class="col-md-8 m-auto text-center headerTop">
                            <h2 class="display-5">Welcome</h2>
                            <p class="text-simple">Please Insert Your New Password</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="password" value="" type="text" class="form-control" placeholder="Password" required>
                                <span class="text-danger"></span>
                            </div>
                            <div class="col-md-12">
                                <input name="confirm_password" value="" type="text" class="form-control" placeholder="Confirm Password" required>
                                <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