@extends('app')

@section('content')
<style>
	body {
		background: #ffffff;
		margin: 0;
	}

	.navbar-custom {
		margin-bottom: 0;
	}

	.auth-wrapper {
		min-height: calc(100vh - 100px);
		min-height: calc(100dvh - 100px);
		display: flex;
		align-items: flex-start;
		justify-content: center;
		padding: 24px 16px;
		box-sizing: border-box;
	}

	.auth-card {
		width: 100%;
		max-width: 560px;
		background: #ffffff;
		border: 1px solid #eceff3;
		border-radius: 12px;
		padding: 28px;
	}

	.auth-title {
		font-size: 24px;
		font-weight: 600;
		line-height: 1.2;
		margin: 0 0 8px;
		color: #111827;
	}

	.auth-subtitle {
		font-size: 14px;
		margin: 0 0 20px;
		color: #6b7280;
	}

	.auth-section-title {
		font-size: 12px;
		font-weight: 600;
		color: #6b7280;
		text-transform: uppercase;
		letter-spacing: 0.5px;
		margin: 8px 0 12px;
	}

	.auth-card .form-group {
		margin-bottom: 14px;
	}

	.auth-card label {
		display: block;
		font-size: 13px;
		font-weight: 500;
		margin-bottom: 6px;
		color: #374151;
	}

	.auth-card .form-control {
		height: 42px;
		border-radius: 8px;
		border: 1px solid #d1d5db;
		background: #ffffff;
		font-size: 14px;
		padding: 0 12px;
		box-shadow: none;
		transition: border-color 0.2s, box-shadow 0.2s;
	}

	.auth-card .form-control:focus {
		border-color: #9ca3af;
		box-shadow: 0 0 0 3px rgba(156, 163, 175, 0.2);
		outline: none;
	}

	.auth-card select.form-control {
		padding-right: 28px;
	}

	.g-recaptcha {
		width: 100%;
	}

	.auth-terms {
		font-size: 13px;
		color: #6b7280;
		margin-bottom: 14px;
	}

	.auth-terms a {
		color: #111827;
		text-decoration: none;
	}

	.auth-terms a:hover {
		text-decoration: underline;
	}

	.btn-register-modern {
		width: 100%;
		height: 44px;
		border: 0;
		border-radius: 8px;
		background: #111827;
		color: #ffffff;
		font-size: 14px;
		font-weight: 600;
		transition: opacity 0.2s;
	}

	.btn-register-modern:hover {
		opacity: 0.92;
		color: #ffffff;
	}

	.auth-footer {
		margin-top: 16px;
		text-align: center;
		font-size: 13px;
		color: #6b7280;
	}

	.auth-footer a {
		color: #111827;
		text-decoration: none;
		font-weight: 500;
	}

	.auth-footer a:hover {
		text-decoration: underline;
	}

	#register-response-msg .alert {
		border-radius: 8px;
		font-size: 13px;
		margin-bottom: 14px;
	}
</style>

<div class="auth-wrapper">
	<div class="auth-card">
		<h1 class="auth-title">Create account</h1>
		<p class="auth-subtitle">Fill in your details to get started.</p>
		<div id="register-response-msg"></div>
		<form role="form" id="frm-register">
			<div class="auth-section-title">Personal Information</div>
			<input type="hidden" name="redirect" value="{{ Request::get('redirectUrl')  }}">
			<input type="hidden" name="_token" value="{{ csrf_token() }}">

			<div class="form-group">
				<label>First name</label>
				<input type="text" class="form-control" name="firstname" placeholder="First name">
			</div>

			<div class="form-group">
				<label>Last name</label>
				<input type="text" class="form-control" name="lastname" placeholder="Last name">
			</div>

			<div class="form-group">
				<label>Email Address</label>
				<input type="email" class="form-control" name="email" value="{{ old('email') }}" placeholder="you@example.com">
			</div>

			<div class="form-group">
				<label>Phone Number</label>
				<input type="text" class="form-control" name="mobilenumber" placeholder="Phone Number">
			</div>

			<div class="form-group">
				<label>Password</label>
				<input type="password" class="form-control" name="password" id="password" required placeholder="Password">
			</div>

			<div class="form-group">
				<label>Confirm Password</label>
				<input type="password" class="form-control" name="password_confirmation" placeholder="Confirm Password" data-rule-equalTo="#password" required>
			</div>

			<div class="auth-section-title">Address Information</div>

			<div class="form-group">
				<label>Select Country</label>
				<select name="countryCode" id="select_country" class="form-control" onchange="selectCountry(this)">
					<option value="">Select Country</option>
					<option value="US">United States</option>
					<option value="CA">Canada</option>
				</select>
			</div>

			<div class="form-group">
				<label>State / Province</label>
				<select class="form-control" name="state" id="lst-states">
					<option value="">Select State</option>
				</select>
			</div>

			<div class="form-group">
				<label>City</label>
				<select class="form-control" name="city" id="lst-cities">
					<option value="">Select City</option>
				</select>
			</div>

			<div class="form-group">
				<label>Address 1</label>
				<input type="text" class="form-control" name="address" placeholder="Address 1">
			</div>

			<div class="form-group">
				<label>Address 2</label>
				<input type="text" class="form-control" name="address2" placeholder="Address 2">
			</div>

			<div class="form-group">
				<label>Zip Code</label>
				<input type="text" class="form-control" name="zipcode" placeholder="Please enter your zip code">
			</div>

			<div class="form-group">
				<div class="g-recaptcha text-center" data-sitekey="{{ env('CAPTCHA_SITE_KEY') }}"></div>
			</div>

			<p class="auth-terms">By clicking Register, you agree to our <a href="#">Terms of Use</a> and that you have read our <a href="#">Privacy Policy</a>.</p>

			<div class="form-group">
				<button type="submit" id="btn-register" class="btn-register-modern">Register</button>
			</div>
		</form>

		<p class="auth-footer">Already have an account? <a href="{{ url('/auth/login') }}">Sign in</a></p>
	</div>
</div>
@endsection