{% 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="fas fa-{{ 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="fas fa-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="fas fa-{{ 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="fas fa-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="fas fa-arrow-right ms-2"></i>
                        </button>
                        {% else %}
                        <button onclick="goToChecklist()" class="btn btn-success">
                            {% trans "Review Checklist" %} <i class="fas fa-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 %}