@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: 210px;
    }

    .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: 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;
    }
    .mt-5{
        margin-top: 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;
}
    /* 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">
            <div>
                <div class="card card-padding pt-0" 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">Select Role Type</p>
                            <img src="{{asset('assets/web/img/profile.png')}}" alt="profile" class="imgProfile">
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="form-group mt-2 row">
                            <div class="col-md-12">
                                <select type="text" class="form-control select-role" required>
                                    <option selected disabled>Please Select</option>
                                    <option value="seller">Seller</option>
                                    <option value="buyer">Buyer</option>
                                </select>
                            </div>
                        </div>
                        <div class="row form-group mt-5">
                            <div class="col-md-12">
                                <a href="" class="btn btn-danger btn-block link">Next</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- <div class="container">
        <div class="row mt-5">
            <div class="col-md-6 m-auto bg-inner">
                <div class="container">
                    <div class="row">
                        <div class="col-md-12 text-center" style="height: 95px;">
                            <div class="innerup text-center">
                            </div>
                            <div class="headingContainer">
                                <h2 class="welcome">Join QCHH</h2>
                                <p style="font-size: smaller; color: #af2427 !important;">Select Account Type</p>
                            </div>
                            <div class="profile">
                                <img src="" alt="profile" class="img-profile">
                            </div>
                        </div>
                    </div>
                    <div class="row mt-5">
                        <div class="col-md-11 ml-4 text-center">
                            <h5><b>Owner</b></h5>
                        </div>
                    </div>
                    <div class="form-group mt-5 row">
                        <div class="col-md-12">
                            <select type="text" class="form-control select-role" required>
                                <option value="User" selected>User</option>
                                <option value="Company">Company</option>
                            </select>
                        </div>
                    </div>
                    <div class="row form-group mt-5">
                        <div class="col-md-12">
                            <a href="" class="btn btn-danger btn-block link">Next</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div> -->
@endsection
@section('scripts')
<script>
    $('.select-role').change(function() {

        val = $(this).val();
        if (val == 'seller') {
            url = "{{url('/user/register-form/seller')}}";
            alert(val);
            var href = $('.link').attr('href', url);

            
        }
        if (val == 'buyer') {
            url = "{{url('/user/register-form/buyer')}}";
            var href = $('.link').attr('href', url);
        }




    })
</script>

@endsection