920 lines
38 KiB
HTML
920 lines
38 KiB
HTML
{% extends 'base.html' %}
|
|
{% load i18n static %}
|
|
{% load custom_filters %}
|
|
{% block title %}
|
|
{% trans 'Upgrade Plan' %}
|
|
{% endblock %}
|
|
|
|
{% block customCSS %}
|
|
<link rel="stylesheet"
|
|
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"
|
|
integrity="sha512-X..."
|
|
crossorigin="anonymous"
|
|
referrerpolicy="no-referrer" />
|
|
<style>
|
|
:root {
|
|
--primary-color: #0d6efd;
|
|
--primary-shadow: rgba(13, 110, 253, 0.25);
|
|
--border-color: #e9ecef;
|
|
--card-hover-shadow: rgba(0, 0, 0, 0.05);
|
|
--card-selected-border: #0d6efd;
|
|
--card-selected-shadow: rgba(13, 110, 253, 0.4);
|
|
}
|
|
|
|
|
|
.pricing-card-label {
|
|
transition: all 0.2s ease-in-out;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.pricing-card-label .card {
|
|
border: 2px solid var(--border-color);
|
|
transition: all 0.3s ease-in-out;
|
|
box-shadow: 0 4px 12px var(--card-hover-shadow);
|
|
}
|
|
|
|
.btn-check:checked + .pricing-card-label .card {
|
|
border-color: var(--card-selected-border) !important;
|
|
box-shadow: 0 0 0 0.25rem var(--card-selected-shadow) !important;
|
|
}
|
|
|
|
.btn-check:checked + .pricing-card-label .card:hover {
|
|
transform: scale(1.02);
|
|
}
|
|
|
|
.pricing-card-label .card:hover {
|
|
box-shadow: 0 8px 20px var(--card-hover-shadow);
|
|
transform: scale(1.01);
|
|
}
|
|
|
|
.pricing-card-badge {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 1.5rem;
|
|
transform: translateY(-50%);
|
|
padding: 0.25rem 0.75rem;
|
|
font-size: 0.8rem;
|
|
font-weight: bold;
|
|
color: white;
|
|
background-color: var(--primary-color);
|
|
border-radius: 1rem;
|
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.progress-indicator {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.progress-indicator .step-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
position: relative;
|
|
flex: 1;
|
|
color: #6c757d;
|
|
}
|
|
|
|
.progress-indicator .step-item .icon {
|
|
width: 3rem;
|
|
height: 3rem;
|
|
border-radius: 50%;
|
|
background-color: #e9ecef;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-size: 1.25rem;
|
|
color: #6c757d;
|
|
transition: all 0.3s;
|
|
border: 2px solid #e9ecef;
|
|
}
|
|
|
|
.progress-indicator .step-item.active .icon {
|
|
background-color: var(--primary-color);
|
|
color: white;
|
|
border-color: var(--primary-color);
|
|
}
|
|
|
|
.progress-indicator .step-item.completed .icon {
|
|
background-color: #28a745;
|
|
color: white;
|
|
border-color: #28a745;
|
|
}
|
|
|
|
.progress-indicator .step-item .step-text {
|
|
margin-top: 0.5rem;
|
|
font-size: 0.9rem;
|
|
font-weight: 500;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.progress-indicator .line {
|
|
height: 2px;
|
|
width: 100%;
|
|
background-color: #e9ecef;
|
|
margin: 0 -1.5rem;
|
|
position: relative;
|
|
z-index: -1;
|
|
}
|
|
|
|
.btn-phoenix-primary {
|
|
background-color: var(--primary-color);
|
|
color: white;
|
|
border-color: var(--primary-color);
|
|
transition: all 0.2s ease-in-out;
|
|
}
|
|
|
|
.btn-phoenix-primary:hover {
|
|
background-color: #0b5ed7;
|
|
border-color: #0a58ca;
|
|
}
|
|
|
|
.btn-phoenix-secondary {
|
|
background-color: #6c757d;
|
|
color: white;
|
|
border-color: #6c757d;
|
|
transition: all 0.2s ease-in-out;
|
|
}
|
|
|
|
.btn-phoenix-secondary:hover {
|
|
background-color: #5c636a;
|
|
border-color: #565e64;
|
|
}
|
|
|
|
.summary-box {
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 0.75rem;
|
|
padding: 2rem;
|
|
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
/* Validation styles for modern look */
|
|
.form-control:focus {
|
|
border-color: var(--primary-color);
|
|
box-shadow: 0 0 0 0.25rem var(--primary-shadow);
|
|
}
|
|
|
|
.form-control.is-invalid {
|
|
border-color: #dc3545 !important;
|
|
}
|
|
|
|
.invalid-feedback {
|
|
color: #dc3545;
|
|
font-size: 0.85em;
|
|
display: none;
|
|
margin-top: 0.25rem;
|
|
}
|
|
|
|
.is-invalid + .invalid-feedback,
|
|
.is-invalid ~ .invalid-feedback {
|
|
display: block;
|
|
}
|
|
|
|
/* Custom icons for lists */
|
|
.fa-ul .fa-li {
|
|
left: -1em;
|
|
}
|
|
</style>
|
|
{% endblock customCSS %}
|
|
|
|
{% block content %}
|
|
<div class="container py-5" id="pricing_container">
|
|
<h1 class="text-center mb-5 text-primary fw-bold">{{ _("Choose Your Plan") }}</h1>
|
|
|
|
<form method="POST"
|
|
action="{% url 'submit_plan' request.dealer.slug %}"
|
|
id="wizardForm">
|
|
{% csrf_token %}
|
|
|
|
<div class="progress-indicator mb-5">
|
|
<div class="step-item active" id="progress-step-1">
|
|
<div class="icon"><i class="fas fa-dollar-sign"></i></div>
|
|
<span class="step-text">{{ _("Select Plan") }}</span>
|
|
</div>
|
|
<div class="line"></div>
|
|
<div class="step-item" id="progress-step-2">
|
|
<div class="icon"><i class="fas fa-user-check"></i></div>
|
|
<span class="step-text">{{ _("Your Info") }}</span>
|
|
</div>
|
|
<div class="line"></div>
|
|
<div class="step-item" id="progress-step-3">
|
|
<div class="icon"><i class="fas fa-credit-card"></i></div>
|
|
<span class="step-text">{{ _("Payment") }}</span>
|
|
</div>
|
|
<div class="line"></div>
|
|
<div class="step-item" id="progress-step-4">
|
|
<div class="icon"><i class="fas fa-receipt"></i></div>
|
|
<span class="step-text">{{ _("Confirm") }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="step row justify-content-center" id="step1">
|
|
<div class="col-lg-10 col-md-12">
|
|
<h4 class="text-center mb-4 text-secondary">{{ _("1. Select a Plan") }}</h4>
|
|
<div class="row g-4">
|
|
{% for pp in plan_list %}
|
|
<div class="col-md-4 mb-3 d-flex">
|
|
<input type="radio"
|
|
class="btn-check"
|
|
name="selected_plan"
|
|
id="plan_{{ forloop.counter }}"
|
|
value="{{ pp.id }}"
|
|
data-name="{{ pp.plan.name }}"
|
|
data-price="{{ pp.price_with_tax }}"
|
|
autocomplete="off"
|
|
{% if forloop.first %}checked{% endif %}>
|
|
<label class="btn w-100 p-0 pricing-card-label"
|
|
for="plan_{{ forloop.counter }}">
|
|
<div class="card h-100 rounded-4">
|
|
<div class="card-body p-4 position-relative">
|
|
{% comment %} {% if forloop.counter == 2 %}
|
|
<div class="pricing-card-badge">{{ _("Most Popular") }}</div>
|
|
{% endif %} {% endcomment %}
|
|
<h4 class="mb-2 fw-bold text-primary">{{ pp.plan.name|capfirst }}</h4>
|
|
<h2 class="mb-4">
|
|
{{ pp.price_with_tax }}<span class="fs-5 fw-normal"> <span class="icon-saudi_riyal"></span> / {{ pp.pricing.period }} {{ _("days") }}</span>
|
|
</h2>
|
|
<h5>{{ _("Includes:") }}</h5>
|
|
<ul class="fa-ul ps-3">
|
|
{% if pp.plan.description %}
|
|
{% for line in pp.plan.description|splitlines %}
|
|
<li class="mb-2">
|
|
<span class="fa-li"><i class="fas fa-check-circle text-success"></i></span>
|
|
{{ line|capfirst }}
|
|
</li>
|
|
{% endfor %}
|
|
{% endif %}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</label>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="step d-none row justify-content-center" id="step2">
|
|
<div class="col-lg-8 col-md-10">
|
|
<h4 class="text-center mb-4 text-secondary">{{ _("2. Enter Your Information") }}</h4>
|
|
<div class="card shadow-sm border-0 rounded-3 p-4">
|
|
<div class="mb-3">
|
|
<label class="form-label" for="first_name">{{ _("First Name") }}</label>
|
|
<div class="input-group">
|
|
<span class="input-group-text"><i class="fas fa-user"></i></span>
|
|
<input type="text"
|
|
name="first_name"
|
|
id="first_name"
|
|
class="form-control"
|
|
required
|
|
placeholder='{{ _("First Name") }}'
|
|
value="{{ request.dealer.first_name }}">
|
|
<div class="invalid-feedback">{{ _("Please enter your first name.") }}</div>
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label" for="last_name">{{ _("Last Name") }}</label>
|
|
<div class="input-group">
|
|
<span class="input-group-text"><i class="fas fa-user"></i></span>
|
|
<input type="text"
|
|
name="last_name"
|
|
id="last_name"
|
|
class="form-control"
|
|
required
|
|
placeholder='{{ _("Last Name") }}'
|
|
value="{{ request.dealer.last_name }}">
|
|
<div class="invalid-feedback">{{ _("Please enter your last name.") }}</div>
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label" for="email">{{ _("Email Address") }}</label>
|
|
<div class="input-group">
|
|
<span class="input-group-text"><i class="fas fa-envelope"></i></span>
|
|
<input type="email"
|
|
name="email"
|
|
id="email"
|
|
class="form-control"
|
|
required
|
|
placeholder="email@example.com"
|
|
value="{{ request.dealer.user.email }}">
|
|
<div class="invalid-feedback">{{ _("Please enter a valid email address.") }}</div>
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label" for="phone">{{ _("Phone Number") }}</label>
|
|
<div class="input-group">
|
|
<span class="input-group-text"><i class="fas fa-phone"></i></span>
|
|
<input type="text"
|
|
name="phone"
|
|
id="phone"
|
|
class="form-control"
|
|
dir="ltr"
|
|
maxlength="10"
|
|
pattern="^(\+9665|05|9665)[0-9]{8}$"
|
|
inputmode="numeric"
|
|
placeholder='{{ _("05xxxxxxxx") }}'
|
|
value="{{ request.dealer.phone_number }}"
|
|
required>
|
|
<div class="invalid-feedback">{{ _("Please enter a valid 10-digit phone number.") }}</div>
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label" for="company">{{ _("Company") }}</label>
|
|
<div class="input-group">
|
|
<span class="input-group-text"><i class="fas fa-building"></i></span>
|
|
<input type="text"
|
|
name="company"
|
|
id="company"
|
|
class="form-control"
|
|
placeholder='{{ _("Company Name") }}'
|
|
value="{{ request.dealer.name }}">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="step d-none row justify-content-center" id="step3">
|
|
<div class="col-lg-8 col-md-10">
|
|
<h4 class="text-center mb-4 text-secondary">{{ _("3. Payment Information") }}</h4>
|
|
<div class="card shadow-sm border-0 rounded-3 p-4">
|
|
<div class="mb-3">
|
|
<label class="form-label" for="card_name">{{ _("Cardholder Name") }}</label>
|
|
<div class="input-group">
|
|
<span class="input-group-text"><i class="fas fa-user"></i></span>
|
|
<input type="text"
|
|
name="card_name"
|
|
id="card_name"
|
|
class="form-control"
|
|
placeholder='{{ _("Cardholder Name") }}'
|
|
required>
|
|
<div class="invalid-feedback" id="card_name_feedback">
|
|
{{ _("Please enter the cardholder name.") }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label" for="card_number">{{ _("Card Number") }}</label>
|
|
<div class="input-group">
|
|
<span class="input-group-text"><i class="fas fa-credit-card"></i></span>
|
|
<input type="text"
|
|
name="card_number"
|
|
id="card_number"
|
|
class="form-control"
|
|
placeholder='{{ _("Card Number") }}'
|
|
maxlength="19"
|
|
pattern="^\d{4}\s\d{4}\s\d{4}\s\d{4}$"
|
|
inputmode="numeric"
|
|
required
|
|
title="Enter a 16-digit card number">
|
|
<div class="invalid-feedback" id="card_number_feedback">
|
|
{{ _("Please enter a valid 16-digit card number.") }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label" for="card_expiry">{{ _("Expiry Date") }} (MM/YY)</label>
|
|
<div class="input-group">
|
|
<span class="input-group-text"><i class="far fa-calendar-alt"></i></span>
|
|
<input type="text"
|
|
name="card_expiry"
|
|
id="card_expiry"
|
|
class="form-control"
|
|
placeholder='{{ _("MM/YY") }}'
|
|
maxlength="5"
|
|
pattern="^(0[1-9]|1[0-2])\/\d{2}$"
|
|
inputmode="numeric"
|
|
required
|
|
title="Enter expiry in MM/YY format">
|
|
<div class="invalid-feedback" id="card_expiry_feedback">
|
|
{{ _("Please enter a valid expiry date (MM/YY).") }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label" for="card_cvv">{{ _("CVV") }}</label>
|
|
<div class="input-group">
|
|
<span class="input-group-text"><i class="fas fa-lock"></i></span>
|
|
<input type="text"
|
|
name="card_cvv"
|
|
id="card_cvv"
|
|
class="form-control"
|
|
placeholder='{{ _("CVV") }}'
|
|
maxlength="3"
|
|
pattern="^\d{3}$"
|
|
inputmode="numeric"
|
|
required
|
|
title="Enter 3-digit CVV">
|
|
<div class="invalid-feedback" id="card_cvv_feedback">
|
|
{{ _("Please enter a valid 3-digit CVV.") }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="step d-none row justify-content-center" id="step4">
|
|
<div class="col-lg-8 col-md-10">
|
|
<h4 class="text-center mb-4 text-secondary">{{ _("4. Confirm Your Information") }}</h4>
|
|
<div class="summary-box">
|
|
<h5 class="text-center mb-4 fw-bold text-primary">{{ _("Order Summary") }}</h5>
|
|
<div class="summary-item">
|
|
<p class="mb-1"><i class="fas fa-box me-2"></i><strong>{{ _("Plan") }}:</strong> <span id="summary_plan"></span></p>
|
|
</div>
|
|
<div class="summary-item">
|
|
<p class="mb-1"><i class="fas fa-tag me-2"></i><strong>{{ _("Price (excl. VAT)") }}:</strong> <span id="summary_price"></span> <span class="icon-saudi_riyal"></span></p>
|
|
</div>
|
|
<div class="summary-item">
|
|
<p class="mb-1"><i class="fas fa-receipt me-2"></i><strong>{{ _("VAT") }} (15%):</strong> <span id="summary-tax"></span> <span class="icon-saudi_riyal"></span></p>
|
|
</div>
|
|
<hr class="my-3">
|
|
<div class="summary-item">
|
|
<p class="mb-0 fs-5 fw-bold"><i class="fas fa-hand-holding-usd me-2"></i>{{ _("Total") }}: <span id="summary-total">0.00</span> <span class="icon-saudi_riyal"></span></p>
|
|
</div>
|
|
<h5 class="mt-4 text-center mb-4 fw-bold text-primary">{{ _("User Information") }}</h5>
|
|
<div class="summary-item">
|
|
<p class="mb-1"><i class="fas fa-signature me-2"></i><strong>{{ _("Name") }}:</strong> <span id="summary_name"></span></p>
|
|
</div>
|
|
<div class="summary-item">
|
|
<p class="mb-1"><i class="fas fa-envelope me-2"></i><strong>{{ _("Email") }}:</strong> <span id="summary_email"></span></p>
|
|
</div>
|
|
<div class="summary-item">
|
|
<p class="mb-1"><i class="fas fa-building me-2"></i><strong>{{ _("Company") }}:</strong> <span id="summary_company"></span></p>
|
|
</div>
|
|
<div class="summary-item">
|
|
<p class="mb-1"><i class="fas fa-phone me-2"></i><strong>{{ _("Phone") }}:</strong> <span id="summary_phone"></span></p>
|
|
</div>
|
|
<h5 class="mt-4 text-center mb-4 fw-bold text-primary">{{ _("Payment") }}</h5>
|
|
<div class="summary-item">
|
|
<p class="mb-1"><i class="fas fa-user me-2"></i><strong>{{ _("Cardholder") }}:</strong> <span id="summary_card_name"></span></p>
|
|
</div>
|
|
<div class="summary-item">
|
|
<p class="mb-1"><i class="fas fa-credit-card me-2"></i><strong>{{ _("Card Number") }}:</strong> <span id="summary_card_number"></span></p>
|
|
</div>
|
|
<div class="summary-item">
|
|
<p class="mb-1"><i class="far fa-calendar-alt me-2"></i><strong>{{ _("Expiry") }}:</strong> <span id="summary_card_expiry"></span></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="d-flex justify-content-between mt-5">
|
|
<button type="button"
|
|
class="btn btn-lg btn-phoenix-secondary px-5"
|
|
id="prevBtn"
|
|
disabled><i class="fas fa-arrow-left me-2"></i>{{ _("Previous") }}</button>
|
|
<button type="button"
|
|
class="btn btn-lg btn-phoenix-primary px-5"
|
|
id="nextBtn">{{ _("Next") }}<i class="fas fa-arrow-right ms-2"></i></button>
|
|
<button type="submit"
|
|
class="btn btn-lg btn-phoenix-primary px-5 d-none"
|
|
id="submitBtn">{{ _("Confirm") }}</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
{% endblock content %}
|
|
|
|
{% block customJS %}
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', initWizardForm);
|
|
document.addEventListener('htmx:afterSwap', initWizardForm);
|
|
|
|
function initWizardForm() {
|
|
const form = document.getElementById('wizardForm');
|
|
if (!form) return;
|
|
|
|
// Remove old event listeners to prevent duplicates
|
|
form.removeEventListener('submit', handleFormSubmit);
|
|
|
|
// Add new submit handler
|
|
form.addEventListener('submit', handleFormSubmit);
|
|
|
|
// Initialize radio button selections
|
|
initPlanSelection();
|
|
|
|
// Initialize wizard steps
|
|
initWizardSteps();
|
|
|
|
// Initialize card input formatting
|
|
initCardInputs();
|
|
|
|
// Initialize summary updates
|
|
initSummaryUpdates();
|
|
|
|
// Initialize validation
|
|
initValidation();
|
|
}
|
|
|
|
function handleFormSubmit(e) {
|
|
e.preventDefault();
|
|
|
|
// Validate all steps before submission
|
|
if (!validateAllSteps()) {
|
|
return;
|
|
}
|
|
|
|
if (typeof Swal !== 'undefined') {
|
|
Swal.fire({
|
|
title: 'Processing...',
|
|
html: 'Please wait while we submit your form',
|
|
allowOutsideClick: false,
|
|
didOpen: () => Swal.showLoading()
|
|
});
|
|
}
|
|
|
|
// Submit the form after a slight delay
|
|
setTimeout(() => {
|
|
const form = e.target;
|
|
if (form.reportValidity()) {
|
|
form.submit();
|
|
} else if (typeof Swal !== 'undefined') {
|
|
Swal.close();
|
|
}
|
|
}, 100);
|
|
}
|
|
|
|
function initPlanSelection() {
|
|
const radios = document.querySelectorAll('.btn-check');
|
|
radios.forEach(radio => {
|
|
// Remove old listeners
|
|
radio.removeEventListener('change', handlePlanChange);
|
|
|
|
// Add new listeners
|
|
radio.addEventListener('change', handlePlanChange);
|
|
|
|
// Initialize selected state
|
|
if (radio.checked) {
|
|
updatePlanSelection(radio.id);
|
|
}
|
|
});
|
|
}
|
|
|
|
function handlePlanChange(e) {
|
|
if (this.checked) {
|
|
updatePlanSelection(this.id);
|
|
}
|
|
}
|
|
|
|
function updatePlanSelection(radioId) {
|
|
document.querySelectorAll('.pricing-card .card').forEach(card => {
|
|
card.classList.remove('selected');
|
|
});
|
|
|
|
const selectedCard = document.querySelector(`label[for="${radioId}"] .card`);
|
|
if (selectedCard) {
|
|
selectedCard.classList.add('selected');
|
|
}
|
|
}
|
|
|
|
function initWizardSteps() {
|
|
let currentStep = 0;
|
|
const steps = document.querySelectorAll(".step");
|
|
const progressSteps = document.querySelectorAll(".progress-indicator .step-item");
|
|
const nextBtn = document.getElementById("nextBtn");
|
|
const prevBtn = document.getElementById("prevBtn");
|
|
const submitBtn = document.getElementById("submitBtn");
|
|
|
|
if (!steps.length || !nextBtn || !prevBtn || !submitBtn || !progressSteps.length) return;
|
|
|
|
nextBtn.removeEventListener("click", handleNext);
|
|
prevBtn.removeEventListener("click", handlePrev);
|
|
|
|
// Add new listeners
|
|
nextBtn.addEventListener("click", handleNext);
|
|
prevBtn.addEventListener("click", handlePrev);
|
|
|
|
function showStep(index) {
|
|
steps.forEach((step, i) => {
|
|
step.classList.toggle("d-none", i !== index);
|
|
});
|
|
|
|
// Add this section to update the progress indicator
|
|
progressSteps.forEach((step, i) => {
|
|
step.classList.toggle("active", i === index);
|
|
step.classList.toggle("completed", i < index);
|
|
});
|
|
|
|
prevBtn.disabled = index === 0;
|
|
nextBtn.classList.toggle("d-none", index === steps.length - 1);
|
|
submitBtn.classList.toggle("d-none", index !== steps.length - 1);
|
|
|
|
if (index === steps.length - 1) {
|
|
populateSummary();
|
|
}
|
|
}
|
|
|
|
function handleNext() {
|
|
if (!validateCurrentStep(currentStep)) {
|
|
return;
|
|
}
|
|
|
|
if (currentStep < steps.length - 1) {
|
|
currentStep++;
|
|
showStep(currentStep);
|
|
}
|
|
}
|
|
|
|
function handlePrev() {
|
|
if (currentStep > 0) {
|
|
currentStep--;
|
|
showStep(currentStep);
|
|
}
|
|
}
|
|
|
|
function populateSummary() {
|
|
updatePricingSummary(); // Reuse logic for pricing
|
|
|
|
const firstName = document.getElementById("first_name")?.value || '';
|
|
const lastName = document.getElementById("last_name")?.value || '';
|
|
document.getElementById("summary_name").textContent = `${firstName} ${lastName}`.trim();
|
|
|
|
document.getElementById("summary_email").textContent = document.getElementById("email")?.value || '';
|
|
document.getElementById("summary_company").textContent = document.getElementById("company")?.value || '';
|
|
document.getElementById("summary_phone").textContent = document.getElementById("phone")?.value || '';
|
|
document.getElementById("summary_card_name").textContent = document.getElementById("card_name")?.value || '';
|
|
|
|
const cardNumber = document.getElementById("card_number")?.value || '';
|
|
document.getElementById("summary_card_number").textContent = maskCard(cardNumber);
|
|
|
|
document.getElementById("summary_card_expiry").textContent = document.getElementById("card_expiry")?.value || '';
|
|
}
|
|
|
|
function maskCard(cardNumber) {
|
|
const last4 = cardNumber.slice(-4);
|
|
return "**** **** **** " + last4;
|
|
}
|
|
|
|
// Initialize
|
|
showStep(currentStep);
|
|
}
|
|
|
|
function initCardInputs() {
|
|
const cardNumberInput = document.getElementById("card_number");
|
|
const expiryInput = document.getElementById("card_expiry");
|
|
|
|
if (cardNumberInput) {
|
|
cardNumberInput.removeEventListener("input", formatCardNumber);
|
|
cardNumberInput.addEventListener("input", formatCardNumber);
|
|
}
|
|
|
|
if (expiryInput) {
|
|
expiryInput.removeEventListener("input", formatExpiryDate);
|
|
expiryInput.addEventListener("input", formatExpiryDate);
|
|
}
|
|
|
|
function formatCardNumber(e) {
|
|
let val = this.value.replace(/\D/g, "").substring(0, 16);
|
|
this.value = val.replace(/(.{4})/g, "$1 ").trim();
|
|
|
|
// Validate as user types
|
|
validateCardNumber(this);
|
|
}
|
|
|
|
function formatExpiryDate(e) {
|
|
let val = this.value.replace(/\D/g, "").substring(0, 4);
|
|
if (val.length >= 3) {
|
|
val = val.substring(0, 2) + "/" + val.substring(2);
|
|
}
|
|
this.value = val;
|
|
|
|
// Validate as user types
|
|
validateExpiryDate(this);
|
|
}
|
|
}
|
|
|
|
function initSummaryUpdates() {
|
|
const planInputs = document.querySelectorAll("input[name='selected_plan']");
|
|
|
|
planInputs.forEach(input => {
|
|
input.removeEventListener("change", updatePricingSummary);
|
|
input.addEventListener("change", updatePricingSummary);
|
|
});
|
|
|
|
updatePricingSummary(); // Initial call
|
|
}
|
|
|
|
function updatePricingSummary() {
|
|
const selectedPlan = document.querySelector('input[name="selected_plan"]:checked');
|
|
if (!selectedPlan) return;
|
|
|
|
const priceWithTax = parseFloat(selectedPlan.dataset.price);
|
|
const basePrice = priceWithTax / 1.15;
|
|
const vat = priceWithTax - basePrice;
|
|
|
|
document.getElementById("summary_plan").textContent = selectedPlan.dataset.name;
|
|
document.getElementById("summary_price").textContent = basePrice.toFixed(2);
|
|
document.getElementById("summary-tax").textContent = vat.toFixed(2);
|
|
document.getElementById("summary-total").textContent = priceWithTax.toFixed(2);
|
|
}
|
|
|
|
function initValidation() {
|
|
// Add input event listeners for validation
|
|
const cardNameInput = document.getElementById("card_name");
|
|
const cardNumberInput = document.getElementById("card_number");
|
|
const cardExpiryInput = document.getElementById("card_expiry");
|
|
const cardCvvInput = document.getElementById("card_cvv");
|
|
|
|
if (cardNameInput) {
|
|
cardNameInput.addEventListener("blur", function() {
|
|
validateCardName(this);
|
|
});
|
|
}
|
|
|
|
if (cardNumberInput) {
|
|
cardNumberInput.addEventListener("blur", function() {
|
|
validateCardNumber(this);
|
|
});
|
|
}
|
|
|
|
if (cardExpiryInput) {
|
|
cardExpiryInput.addEventListener("blur", function() {
|
|
validateExpiryDate(this);
|
|
});
|
|
}
|
|
|
|
if (cardCvvInput) {
|
|
cardCvvInput.addEventListener("blur", function() {
|
|
validateCvv(this);
|
|
});
|
|
}
|
|
}
|
|
|
|
function validateCurrentStep(stepIndex) {
|
|
switch(stepIndex) {
|
|
case 0: // Plan selection
|
|
return validatePlanSelection();
|
|
case 1: // User information
|
|
return validateUserInfo();
|
|
case 2: // Payment information
|
|
return validatePaymentInfo();
|
|
default:
|
|
return true;
|
|
}
|
|
}
|
|
|
|
function validateAllSteps() {
|
|
return validatePlanSelection() &&
|
|
validateUserInfo() &&
|
|
validatePaymentInfo();
|
|
}
|
|
|
|
function validatePlanSelection() {
|
|
const selectedPlan = document.querySelector('input[name="selected_plan"]:checked');
|
|
if (!selectedPlan) {
|
|
if (typeof Swal !== 'undefined') {
|
|
Swal.fire({
|
|
icon: 'error',
|
|
title: 'Error',
|
|
text: 'Please select a plan to continue'
|
|
});
|
|
}
|
|
return false;
|
|
}
|
|
return true;
|
|
}
|
|
|
|
function validateUserInfo() {
|
|
const firstName = document.getElementById("first_name");
|
|
const lastName = document.getElementById("last_name");
|
|
const email = document.getElementById("email");
|
|
const phone = document.getElementById("phone");
|
|
|
|
let isValid = true;
|
|
|
|
if (!firstName.value.trim()) {
|
|
markAsInvalid(firstName, "Please enter your first name");
|
|
isValid = false;
|
|
} else {
|
|
markAsValid(firstName);
|
|
}
|
|
|
|
if (!lastName.value.trim()) {
|
|
markAsInvalid(lastName, "Please enter your last name");
|
|
isValid = false;
|
|
} else {
|
|
markAsValid(lastName);
|
|
}
|
|
|
|
if (!email.value.trim() || !isValidEmail(email.value)) {
|
|
markAsInvalid(email, "Please enter a valid email address");
|
|
isValid = false;
|
|
} else {
|
|
markAsValid(email);
|
|
}
|
|
|
|
if (!phone.value.trim()) {
|
|
markAsInvalid(phone, "Please enter your phone number");
|
|
isValid = false;
|
|
} else {
|
|
markAsValid(phone);
|
|
}
|
|
|
|
return isValid;
|
|
}
|
|
|
|
function validatePaymentInfo() {
|
|
const cardName = document.getElementById("card_name");
|
|
const cardNumber = document.getElementById("card_number");
|
|
const cardExpiry = document.getElementById("card_expiry");
|
|
const cardCvv = document.getElementById("card_cvv");
|
|
|
|
let isValid = true;
|
|
|
|
if (!validateCardName(cardName)) {
|
|
isValid = false;
|
|
}
|
|
|
|
if (!validateCardNumber(cardNumber)) {
|
|
isValid = false;
|
|
}
|
|
|
|
if (!validateExpiryDate(cardExpiry)) {
|
|
isValid = false;
|
|
}
|
|
|
|
if (!validateCvv(cardCvv)) {
|
|
isValid = false;
|
|
}
|
|
|
|
return isValid;
|
|
}
|
|
|
|
function validateCardName(input) {
|
|
if (!input.value.trim()) {
|
|
markAsInvalid(input, "Please enter the cardholder name");
|
|
return false;
|
|
} else {
|
|
markAsValid(input);
|
|
return true;
|
|
}
|
|
}
|
|
|
|
function validateCardNumber(input) {
|
|
// Remove spaces for validation
|
|
const cardNumber = input.value.replace(/\s/g, '');
|
|
|
|
if (cardNumber.length !== 16 || !/^\d+$/.test(cardNumber)) {
|
|
markAsInvalid(input, "Please enter a valid 16-digit card number");
|
|
return false;
|
|
} else {
|
|
markAsValid(input);
|
|
return true;
|
|
}
|
|
}
|
|
|
|
function validateExpiryDate(input) {
|
|
const value = input.value;
|
|
const pattern = /^(0[1-9]|1[0-2])\/\d{2}$/;
|
|
|
|
if (!pattern.test(value)) {
|
|
markAsInvalid(input, "Please enter a valid expiry date (MM/YY)");
|
|
return false;
|
|
}
|
|
|
|
// Check if the card is expired
|
|
const [month, year] = value.split('/');
|
|
const expiryDate = new Date(2000 + parseInt(year), parseInt(month) - 1);
|
|
const currentDate = new Date();
|
|
|
|
if (expiryDate < currentDate) {
|
|
markAsInvalid(input, "This card has expired");
|
|
return false;
|
|
}
|
|
|
|
markAsValid(input);
|
|
return true;
|
|
}
|
|
|
|
function validateCvv(input) {
|
|
if (!input.value.trim() || input.value.length !== 3 || !/^\d+$/.test(input.value)) {
|
|
markAsInvalid(input, "Please enter a valid 3-digit CVV");
|
|
return false;
|
|
} else {
|
|
markAsValid(input);
|
|
return true;
|
|
}
|
|
}
|
|
|
|
function isValidEmail(email) {
|
|
const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
|
return re.test(email);
|
|
}
|
|
|
|
function markAsInvalid(input, message) {
|
|
input.classList.add("is-invalid");
|
|
|
|
// Update feedback message if available
|
|
const feedback = document.getElementById(input.id + "_feedback");
|
|
if (feedback) {
|
|
feedback.textContent = message;
|
|
}
|
|
}
|
|
|
|
function markAsValid(input) {
|
|
input.classList.remove("is-invalid");
|
|
}
|
|
</script>
|
|
{% endblock customJS %} |