@extends('layout.client')

@section('contentstyle')
<style>
body{
   text-align:center;

}

.register-wrapper {
     position: relative;
     z-index: 3;
     padding: 100px;
     font-size:18px;
     color: #999999;
   }
.register-wrapper * {
     box-sizing: border-box;
   }

.register-wrapper form input {
     display: inline-block;
     width: 100%;
     padding: 0 20px;
     line-height: 50px;
     height: 65px;
     background-color: white;
     border: 2px solid #e6e6e6;
     border-bottom-width: 3px;
     border-radius: 5px;
     outline: 0;
     -webkit-transition: all 0.3s ease;
     transition: all 0.3s ease;
   }

.register-wrapper form input:not(:last-child) {
     margin-bottom: 20px;
   }

	.register-wrapper form input[type="email"]:focus,
	.register-wrapper form input[type="email"]:active,
	.register-wrapper form input[type="password"]:focus,
	.register-wrapper form input[type="password"]:active {
		  border-color: #cccccc;
		}

.register-wrapper form input[type="submit"] {
     position: relative;
     z-index: 1;
     display: inline-block;
     padding: 0 20px;
     font-size: 1rem;
     background-color:#428bca;
     background-size: 100%;
		  rgba(0, 0, 0, 0) 75%,rgba(0, 0, 0, 0));
   

     background-size: 20px 20px, 100% 100%;
     color: white;
     cursor: pointer;
     -webkit-transition: all 0.3s ease;
     transition: all 0.3s ease;
   }

.register-wrapper form input[type="submit"]:hover {
     background-size: 40px 40px;
   }
   .register-title {
     font-size: 1.5em;
     padding-bottom: 30px;
     margin: 0 0 20px;
     border-bottom: 1px dashed #e6e6e6;
   }

.register-block {
     position: relative;
     display: block;
     width: 100%;
     max-width: 500px;
     margin: auto;
     padding: 30px;
     background-color: white;
     box-shadow: 0 0 50px rgba(0, 0, 0, 0.2);
     border-radius: 5px;

   }

.register-block:before,
.register-block:after {
     position: absolute;
     z-index: -1;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     display: block;
     width: 100%;
     height: 100%;
     content: "";
     background-color: white;
     border: 1px solid #e6e6e6;
     border-radius: 5px;
     -webkit-transform: scale(0.9) translate(0, 0);
             transform: scale(0.9) translate(0, 0);
     -webkit-transition: all 0.3s ease;
     transition: all 0.3s ease;
   }

.register-block:hover:before {
     z-index: -1;
     -webkit-transform: scale(0.96) translate(0, 16px);
             transform: scale(0.96) translate(0, 16px);
   }

.register-block:hover:after {
     z-index: -2;
     -webkit-transform: scale(0.92) translate(0, 32px);
             transform: scale(0.92) translate(0, 32px);
   }


    </style>
@endsection
@section('content')





	<section>
		<div class="register-wrapper">
		<div class="register-block">
		<h3 class="register-title">Customer Registration</h3>
			<p>Create an account using the form below.</p>
			<form action="{{route('client.user.add')}}" method="post" enctype="multipart/form-data">
            @csrf
            <input type="text"  name="name" placeholder="Enter your name"/>
            <input type="tel" name="phone" placeholder="Enter your phone"/>
			<input type="email" name="email" placeholder="Enter your email"/>
			<input type="password" name="password" placeholder="Enter your password" />


			<input type="submit" value="Register" class="register-btn"/>
			</form>
		</div>
		</div>
	</section>





@endsection