130 lines
5.4 KiB
HTML
130 lines
5.4 KiB
HTML
{% extends "layouts/base.html" %}
|
|
{% load i18n %}
|
|
|
|
{% block title %}{% trans "Onboarding" %} - Step {{ step }}{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="container-fluid py-4">
|
|
<div class="row">
|
|
<!-- Progress Sidebar -->
|
|
<div class="col-lg-3 mb-4">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h5 class="card-title mb-3">{% trans "Progress" %}</h5>
|
|
|
|
<div class="progress mb-3" style="height: 10px;">
|
|
<div class="progress-bar" role="progressbar"
|
|
style="width: {{ progress_percentage }}%"
|
|
aria-valuenow="{{ progress_percentage }}"
|
|
aria-valuemin="0" aria-valuemax="100">
|
|
{{ progress_percentage }}%
|
|
</div>
|
|
</div>
|
|
|
|
<div class="list-group list-group-flush">
|
|
{% for content_item in content %}
|
|
<div class="list-group-item
|
|
{% if content_item.id == current_content.id %}active{% endif %}
|
|
{% if content_item.id in completed_steps %}text-success{% endif %}">
|
|
<i class="bi bi-{{ content_item.icon|default:'circle' }} me-2"></i>
|
|
{% if request.user.language == 'ar' %}{{ content_item.title_ar }}{% else %}{{ content_item.title_en }}{% endif %}
|
|
{% if content_item.id in completed_steps %}
|
|
<i class="bi bi-check float-end"></i>
|
|
{% endif %}
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Main Content -->
|
|
<div class="col-lg-9">
|
|
<div class="card shadow-sm">
|
|
<div class="card-body p-5">
|
|
<div class="mb-4">
|
|
<div class="d-flex align-items-center mb-3">
|
|
{% if current_content.icon %}
|
|
<i class="bi bi-{{ current_content.icon }} fa-3x me-3"
|
|
style="color: {{ current_content.color|default:'#007bff' }}"></i>
|
|
{% endif %}
|
|
<div>
|
|
<h2 class="mb-1">
|
|
{% if request.user.language == 'ar' %}{{ current_content.title_ar }}{% else %}{{ current_content.title_en }}{% endif %}
|
|
</h2>
|
|
<p class="text-muted mb-0">
|
|
{% if request.user.language == 'ar' %}{{ current_content.description_ar }}{% else %}{{ current_content.description_en }}{% endif %}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<hr class="my-4">
|
|
|
|
<div class="content-text mb-5">
|
|
{% if request.user.language == 'ar' %}
|
|
<div class="text-end" dir="rtl">{{ current_content.content_ar|safe }}</div>
|
|
{% else %}
|
|
{{ current_content.content_en|safe }}
|
|
{% endif %}
|
|
</div>
|
|
|
|
<div class="d-flex justify-content-between mt-5">
|
|
{% if previous_step %}
|
|
<button onclick="goToStep({{ previous_step }})" class="btn btn-outline-secondary">
|
|
<i class="bi bi-arrow-left me-2"></i>
|
|
{% trans "Previous" %}
|
|
</button>
|
|
{% else %}
|
|
<div></div>
|
|
{% endif %}
|
|
|
|
{% if next_step %}
|
|
<button onclick="completeAndNext()" class="btn btn-primary">
|
|
{% trans "Next" %} <i class="bi bi-arrow-right ms-2"></i>
|
|
</button>
|
|
{% else %}
|
|
<button onclick="goToChecklist()" class="btn btn-success">
|
|
{% trans "Review Checklist" %} <i class="bi bi-check-circle ms-2"></i>
|
|
</button>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function completeAndNext() {
|
|
// Mark current step as completed
|
|
fetch('/api/accounts/users/onboarding/save-step/', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'Authorization': 'Bearer ' + localStorage.getItem('token')
|
|
},
|
|
body: JSON.stringify({
|
|
step_id: {{ current_content.id }}
|
|
})
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
window.location.href = '/accounts/onboarding/wizard/step/{{ next_step }}/';
|
|
} else {
|
|
alert('Error: ' + (data.error || 'Failed to save progress'));
|
|
}
|
|
});
|
|
}
|
|
|
|
function goToStep(step) {
|
|
window.location.href = '/accounts/onboarding/wizard/step/' + step + '/';
|
|
}
|
|
|
|
function goToChecklist() {
|
|
window.location.href = '/accounts/onboarding/wizard/checklist/';
|
|
}
|
|
</script>
|
|
{% endblock %}
|