@extends('layouts.auth_components.header')


@section('authcontent')

<div class="auth-page">
	<div class="container-fluid p-0">
		<div class="row g-0">
			<div class="col-xxl-3 col-lg-4 col-md-5">
				<div class="auth-full-page-content d-flex p-sm-5 p-4">
					<div class="w-100">
						<div class="d-flex flex-column h-100">
							<div class="mb-4 mb-md-5 text-center">
								<a href="/" class="d-block auth-logo">
									<h5>LOGO here</h5>
								</a>
							</div>
							<div class="auth-content my-auto">
								<div class="text-center">
									<h5 class="mb-0">Register Account</h5>
									<!-- <p class="text-muted mt-2">Get your free Minia account now.</p> -->
								</div>
								<form method="POST" action="{{ route('register') }}">
									@csrf
									<div class="mb-3">
										<label for="first_name" class="form-label">First Name</label>
										<input type="text" class="form-control" id="first_name" placeholder="Your First Name" required name="first_name">  
										@error('first_name')
										<div class="invalid-feedback">
											{{$message}}
										</div>      
										@enderror
									</div>
									<div class="mb-3">
										<label for="last_name" class="form-label">Last Name</label>
										<input type="text" class="form-control" id="last_name" placeholder="Your Last Name" required name="last_name">  
										@error('last_name')
										<div class="invalid-feedback">
											{{$message}}
										</div>      
										@enderror
									</div>
									<div class="mb-3">
										<label for="email" class="form-label">Email</label>
										<input type="email" class="form-control" id="email" placeholder="Your Email" required name="email">  
										@error('email')
										<div class="invalid-feedback">
											{{$message}}
										</div>      
										@enderror
									</div>

			
									<div class="mb-3">
										<label for="password" class="form-label">Password</label>
											<input type="password" 
												class="form-control border-end-0 @error('password') is-invalid @enderror" 
												name="password" required autocomplete="current-password" 
												id="password" value="" 
												placeholder="Enter Password"
											> 
										@error('password')
											<div class="invalid-feedback">
												<strong>{{ $message }}</strong>
										</div>
										@enderror      
									</div>


									<div class="mb-3">
										<label for="password_confirmation" class="form-label">Confirm Password</label>
											<input type="password" 
												class="form-control border-end-0 @error('password') is-invalid @enderror" 
												name="password_confirmation" 
												required
												id="password_confirmation" value="" 
												placeholder="Enter Password"
											> 
										@error('password_confirmation')
											<span class="invalid-feedback" role="alert">
												<strong>{{ $message }}</strong>
											</span>
										@enderror
									</div>

									<div class="mb-4">
										<p class="mb-0">By registering you agree to the Minia <a href="#" class="text-primary">Terms of Use</a></p>
									</div>
									<div class="mb-3">
										<button class="btn btn-primary w-100 waves-effect waves-light" type="submit">Register</button>
									</div>
								</form>

						

								<div class="mt-5 text-center">
									<p class="text-muted mb-0">Already have an account ? <a href="/login"
											class="text-primary fw-semibold"> Login </a> </p>
								</div>
							</div>
							<!-- <div class="mt-4 mt-md-5 text-center">
								<p class="mb-0">© <script>document.write(new Date().getFullYear())</script> Minia   . Crafted with <i class="mdi mdi-heart text-danger"></i> by Themesbrand</p>
							</div> -->
						</div>
					</div>
				</div>
				<!-- end auth full page content -->
			</div>
			<!-- end col -->
			<div class="col-xxl-9 col-lg-8 col-md-7">
				<div class="auth-bg pt-md-5 p-4 d-flex">
					<div class="bg-overlay bg-primary"></div>
					<ul class="bg-bubbles">
						<li></li>
						<li></li>
						<li></li>
						<li></li>
						<li></li>
						<li></li>
						<li></li>
						<li></li>
						<li></li>
						<li></li>
					</ul>
					<!-- end bubble effect -->
					<div class="row justify-content-center align-items-center">
						<div class="col-xl-7">
							<div class="p-0 p-sm-4 px-xl-0">
								<div id="reviewcarouselIndicators" class="carousel slide" data-bs-ride="carousel">
									<div class="carousel-indicators carousel-indicators-rounded justify-content-start ms-0 mb-0">
										<button type="button" data-bs-target="#reviewcarouselIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
										<button type="button" data-bs-target="#reviewcarouselIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
										<button type="button" data-bs-target="#reviewcarouselIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
									</div>
									<!-- end carouselIndicators -->
									<div class="carousel-inner">
										<div class="carousel-item active">
											<div class="testi-contain text-white">
												<i class="bx bxs-quote-alt-left text-success display-6"></i>

												<h4 class="mt-4 fw-medium lh-base text-white">“I feel confident
													imposing change
													on myself. It's a lot more progressing fun than looking back.
													That's why
													I ultricies enim
													at malesuada nibh diam on tortor neaded to throw curve balls.”
												</h4>
												<div class="mt-4 pt-3 pb-5">
													<div class="d-flex align-items-start">
														<div class="flex-shrink-0">
															<img src="assets/images/users/avatar-1.jpg" class="avatar-md img-fluid rounded-circle" alt="...">
														</div>
														<div class="flex-grow-1 ms-3 mb-4">
															<h5 class="font-size-18 text-white">Richard Drews
															</h5>
															<p class="mb-0 text-white-50">Web Designer</p>
														</div>
													</div>
												</div>
											</div>
										</div>

										<div class="carousel-item">
											<div class="testi-contain text-white">
												<i class="bx bxs-quote-alt-left text-success display-6"></i>

												<h4 class="mt-4 fw-medium lh-base text-white">“Our task must be to
													free ourselves by widening our circle of compassion to embrace
													all living
													creatures and
													the whole of quis consectetur nunc sit amet semper justo. nature
													and its beauty.”</h4>
												<div class="mt-4 pt-3 pb-5">
													<div class="d-flex align-items-start">
														<div class="flex-shrink-0">
															<img src="assets/images/users/avatar-2.jpg" class="avatar-md img-fluid rounded-circle" alt="...">
														</div>
														<div class="flex-grow-1 ms-3 mb-4">
															<h5 class="font-size-18 text-white">Rosanna French
															</h5>
															<p class="mb-0 text-white-50">Web Developer</p>
														</div>
													</div>
												</div>
											</div>
										</div>

										<div class="carousel-item">
											<div class="testi-contain text-white">
												<i class="bx bxs-quote-alt-left text-success display-6"></i>

												<h4 class="mt-4 fw-medium lh-base text-white">“I've learned that
													people will forget what you said, people will forget what you
													did,
													but people will never forget
													how donec in efficitur lectus, nec lobortis metus you made them
													feel.”</h4>
												<div class="mt-4 pt-3 pb-5">
													<div class="d-flex align-items-start">
														<img src="assets/images/users/avatar-3.jpg"
															class="avatar-md img-fluid rounded-circle" alt="...">
														<div class="flex-1 ms-3 mb-4">
															<h5 class="font-size-18 text-white">Ilse R. Eaton</h5>
															<p class="mb-0 text-white-50">Manager
															</p>
														</div>
													</div>
												</div>
											</div>
										</div>
									</div>
									<!-- end carousel-inner -->
								</div>
								<!-- end review carousel -->
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- end col -->
		</div>
		<!-- end row -->
	</div>
	<!-- end container fluid -->
</div>

@endsection