{% extends 'base.html' %}
{% block content %}

{% if session.username %}
<section class="hero-panel p-4 p-lg-5 mb-4">
	<h1 class="display-6 fw-semibold mb-2">My Profile</h1>
	<p class="mb-0">Manage account details, payment information, and security settings.</p>
</section>

<div class="row g-4 mb-4">
	<div class="col-12 col-lg-7">
		<div class="content-card p-4 h-100">
			<h2 class="h4 mb-3">Account Information</h2>
			<ul class="list-group list-group-flush">
				<li class="list-group-item px-0" id="user-email">Email: loading...</li>
				<li class="list-group-item px-0" id="loyalty-points">Points: loading...</li>
				<li class="list-group-item px-0" id="user-admin">Admin: loading...</li>
				<li class="list-group-item px-0" id="user-shipping">Shipping address: loading...</li>
			</ul>
		</div>
	</div>
	<div class="col-12 col-lg-5">
		<div class="content-card p-4 h-100">
			<h2 class="h4 mb-3">Loyalty Hunt</h2>
			<p class="text-muted small mb-3">Find Scrat in the panel to earn loyalty points.</p>
			<div id="loyalty-container"></div>
		</div>
	</div>
</div>

<div class="row g-4">
	<div class="col-12 col-lg-6">
		<div class="form-container h-100">
			<h2 class="h4 mb-3">Update Shipping Address</h2>
			<form method="POST" action="{{ url_for('auth.update_shipping_address') }}">
				<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
				<div class="mb-3">
					<label for="address" class="form-label">Shipping Address</label>
					<input type="text" class="form-control" id="address" name="address" required placeholder="1082 Mulberry Lane 50660">
				</div>
				<button type="submit" class="btn btn-primary w-100">Save Address</button>
			</form>
		</div>
	</div>

	<div class="col-12 col-lg-6">
		<div class="form-container h-100">
			<h2 class="h4 mb-3">Payment Information</h2>
			<ul class="list-group list-group-flush mb-4">
				<li class="list-group-item px-0" id="card-name">Cardholder: loading...</li>
				<li class="list-group-item px-0" id="card-num">Card Number: loading...</li>
				<li class="list-group-item px-0" id="card-exp">Expiry Date: loading...</li>
			</ul>

			<form method="POST" action="{{ url_for('order.payment_update') }}">
				<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
				<div class="mb-3">
					<label for="card_number" class="form-label">Card Number</label>
					<input type="text" class="form-control" id="card_number" name="card_number" maxlength="16" required placeholder="Credit card number">
				</div>
				<div class="row g-3">
					<div class="col-6">
						<label for="cvv" class="form-label">CVV</label>
						<input type="text" class="form-control" id="cvv" name="cvv" maxlength="3" required placeholder="CVV">
					</div>
					<div class="col-6">
						<label for="expiration" class="form-label">Expiration</label>
						<input type="text" class="form-control" id="expiration" name="expiration" maxlength="5" required placeholder="MM/YY">
					</div>
				</div>
				<button type="submit" class="btn btn-primary w-100 mt-4">Update Payment</button>
			</form>
		</div>
	</div>

	<div class="col-12 col-lg-6">
		<div class="form-container">
			<h2 class="h4 mb-3">Update Password</h2>
			<form method="POST" action="{{ url_for('auth.change_password') }}">
				<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
				<div class="mb-3">
					<label for="new_password" class="form-label">New Password</label>
					<input type="password" class="form-control" id="new_password" name="new_password" required placeholder="New password">
				</div>
				<div class="mb-3">
					<label for="conf_password" class="form-label">Confirm Password</label>
					<input type="password" class="form-control" id="conf_password" name="conf_password" required placeholder="Confirm password">
				</div>
				<button type="submit" class="btn btn-primary w-100">Update Password</button>
			</form>
		</div>
	</div>

	<div class="col-12 col-lg-6">
		<div class="content-card p-4 h-100 d-flex flex-column justify-content-between">
			<div>
				<h2 class="h4 mb-2">Session</h2>
				<p class="text-muted">Sign out of your account securely.</p>
			</div>
			<a class="btn btn-outline-danger w-100" href="{{ url_for('auth.logout') }}" role="button">Logout</a>
		</div>
	</div>
</div>

<div id="cardSrc" data-link="{{ url_for('order.get_payment') }}"></div>
<div id="getEmailSrc" data-link="{{ url_for('auth.get_email') }}"></div>
<div id="getPointSrc" data-link="{{ url_for('auth.get_points') }}"></div>
<div id="getAdminSrc" data-link="{{ url_for('auth.get_admin') }}"></div>
<div id="loyaltyAddSrc" data-link="{{ url_for('auth.add_loyalty') }}"></div>
<div id="getAddressSrc" data-link="{{ url_for('auth.get_address') }}"></div>
<script src="{{ url_for('static', filename='js/profile.js') }}"></script>
{% else %}
<section class="content-card p-4 text-center">
	<h1 class="h4 mb-2">Sign in required</h1>
	<p class="text-muted mb-3">Please log in to access your profile information.</p>
	<a class="btn btn-primary" href="{{ url_for('main.login') }}">Go to Login</a>
</section>
{% endif %}
{% endblock %}