{% extends "layouts/base.html" %}
{% load i18n %}

{% block title %}{% trans "Acknowledgement Checklist" %}{% 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 bg-success" role="progressbar" 
                             style="width: {{ progress_percentage }}%"
                             aria-valuenow="{{ progress_percentage }}" 
                             aria-valuemin="0" aria-valuemax="100">
                            {{ progress_percentage }}%
                        </div>
                    </div>

                    <div class="alert alert-info small">
                        <strong>{% trans "Completed" %}:</strong> {{ acknowledged_count }} / {{ total_count }}
                    </div>
                </div>
            </div>
        </div>

        <!-- Checklist -->
        <div class="col-lg-9">
            <div class="card shadow-sm">
                <div class="card-header bg-primary text-white">
                    <h4 class="mb-0">
                        <i class="fas fa-clipboard-check me-2"></i>
                        {% trans "Acknowledgement Checklist" %}
                    </h4>
                </div>
                <div class="card-body p-5">
                    <div class="alert alert-warning mb-4">
                        <i class="fas fa-exclamation-triangle me-2"></i>
                        {% trans "Please review and acknowledge all required items below. Your digital signature will be recorded for compliance purposes." %}
                    </div>

                    <form id="checklistForm">
                        <div class="list-group mb-4">
                            {% for item in checklist_items %}
                            <div class="list-group-item {% if item.is_required %}list-group-item-action{% endif %}">
                                <div class="d-flex align-items-start">
                                    <div class="form-check flex-grow-1">
                                        <input class="form-check-input" 
                                               type="checkbox" 
                                               id="item_{{ item.id }}"
                                               value="{{ item.id }}"
                                               {% if item.is_acknowledged %}checked disabled{% endif %}
                                               onchange="toggleItem(this, '{{ item.id }}')"
                                               {% if not item.is_required %}data-required="false"{% endif %}>
                                        <label class="form-check-label" for="item_{{ item.id }}">
                                            <strong>
                                                {% if request.user.language == 'ar' %}{{ item.text_ar }}{% else %}{{ item.text_en }}{% endif %}
                                            </strong>
                                            {% if item.is_required %}
                                            <span class="badge bg-danger ms-2">{% trans "Required" %}</span>
                                            {% endif %}
                                        </label>
                                        
                                        {% if item.description_en %}
                                        <p class="text-muted small mt-2 mb-0">
                                            {% if request.user.language == 'ar' %}{{ item.description_ar }}{% else %}{{ item.description_en }}{% endif %}
                                        </p>
                                        {% endif %}
                                        
                                        {% if item.content %}
                                        <p class="text-info small mb-0">
                                            <i class="fas fa-link me-1"></i>
                                            {% if request.user.language == 'ar' %}{{ item.content.title_ar }}{% else %}{{ item.content.title_en }}{% endif %}
                                        </p>
                                        {% endif %}
                                    </div>
                                    
                                    {% if item.is_acknowledged %}
                                    <i class="fas fa-check-circle text-success fa-2x ms-3"></i>
                                    {% endif %}
                                </div>
                            </div>
                            {% endfor %}
                        </div>

                        <div id="signatureSection" class="mb-4" style="display: none;">
                            <hr class="my-4">
                            <h5 class="mb-3">{% trans "Digital Signature" %}</h5>
                            <div class="alert alert-info">
                                {% trans "By providing your digital signature below, you acknowledge that you have read, understood, and agreed to all the items listed above." %}
                            </div>
                            
                            <canvas id="signatureCanvas" class="border rounded" 
                                    style="width: 100%; height: 200px; cursor: crosshair;"></canvas>
                            
                            <div class="mt-2">
                                <button type="button" onclick="clearSignature()" class="btn btn-sm btn-outline-secondary">
                                    <i class="fas fa-eraser me-1"></i> {% trans "Clear" %}
                                </button>
                            </div>
                        </div>

                        <div class="d-grid gap-2">
                            <button type="button" id="proceedBtn" 
                                    onclick="proceedToActivation()" 
                                    class="btn btn-primary btn-lg"
                                    disabled>
                                <i class="fas fa-arrow-right me-2"></i>
                                {% trans "Proceed to Account Setup" %}
                            </button>
                            <button type="button" onclick="goBack()" class="btn btn-outline-secondary">
                                <i class="fas fa-arrow-left me-2"></i>
                                {% trans "Back to Content" %}
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
let requiredItems = {{ required_items_json|safe }};
let acknowledgedItems = new Set();
let isSigning = false;

// Initialize
document.addEventListener('DOMContentLoaded', function() {
    // Load acknowledged items
    {% for item in checklist_items %}
        {% if item.is_acknowledged %}
        acknowledgedItems.add('{{ item.id }}');
        {% endif %}
    {% endfor %}
    
    checkProgress();
    initSignaturePad();
});

function toggleItem(checkbox, itemId) {
    if (checkbox.checked) {
        acknowledgedItems.add(itemId);
    } else {
        acknowledgedItems.delete(itemId);
    }
    
    // Save acknowledgement
    fetch('/api/accounts/users/onboarding/acknowledge/', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'Authorization': 'Bearer ' + localStorage.getItem('token')
        },
        body: JSON.stringify({
            checklist_item_id: itemId
        })
    })
    .then(response => response.json())
    .then(data => {
        if (!data.success) {
            checkbox.checked = !checkbox.checked;
            alert('Error: ' + (data.error || 'Failed to save acknowledgement'));
        }
        checkProgress();
    });
}

function checkProgress() {
    let allRequiredAck = true;
    requiredItems.forEach(id => {
        if (!acknowledgedItems.has(id)) {
            allRequiredAck = false;
        }
    });
    
    const proceedBtn = document.getElementById('proceedBtn');
    const signatureSection = document.getElementById('signatureSection');
    
    if (allRequiredAck) {
        proceedBtn.disabled = false;
        signatureSection.style.display = 'block';
    } else {
        proceedBtn.disabled = true;
        signatureSection.style.display = 'none';
    }
}

function initSignaturePad() {
    const canvas = document.getElementById('signatureCanvas');
    const ctx = canvas.getContext('2d');
    let isDrawing = false;
    
    // Set canvas size
    canvas.width = canvas.offsetWidth;
    canvas.height = canvas.offsetHeight;
    
    canvas.addEventListener('mousedown', startDrawing);
    canvas.addEventListener('mousemove', draw);
    canvas.addEventListener('mouseup', stopDrawing);
    canvas.addEventListener('mouseout', stopDrawing);
    
    // Touch support
    canvas.addEventListener('touchstart', handleTouch);
    canvas.addEventListener('touchmove', handleTouch);
    canvas.addEventListener('touchend', stopDrawing);
    
    function startDrawing(e) {
        isDrawing = true;
        draw(e);
    }
    
    function draw(e) {
        if (!isDrawing) return;
        
        const rect = canvas.getBoundingClientRect();
        const x = e.clientX - rect.left;
        const y = e.clientY - rect.top;
        
        ctx.lineWidth = 2;
        ctx.lineCap = 'round';
        ctx.strokeStyle = '#000';
        
        ctx.lineTo(x, y);
        ctx.stroke();
        ctx.beginPath();
        ctx.moveTo(x, y);
    }
    
    function stopDrawing() {
        isDrawing = false;
        ctx.beginPath();
    }
    
    function handleTouch(e) {
        e.preventDefault();
        const touch = e.touches[0];
        const mouseEvent = new MouseEvent(e.type === 'touchstart' ? 'mousedown' : 'mousemove', {
            clientX: touch.clientX,
            clientY: touch.clientY
        });
        canvas.dispatchEvent(mouseEvent);
    }
    
    window.signatureCanvas = canvas;
    window.signatureCtx = ctx;
}

function clearSignature() {
    const canvas = window.signatureCanvas;
    const ctx = window.signatureCtx;
    ctx.clearRect(0, 0, canvas.width, canvas.height);
}

function proceedToActivation() {
    const canvas = window.signatureCanvas;
    const signatureData = canvas.toDataURL('image/png');
    
    // Store signature for final submission
    localStorage.setItem('onboardingSignature', signatureData);
    
    window.location.href = '/accounts/onboarding/wizard/activation/';
}

function goBack() {
    window.location.href = '/accounts/onboarding/wizard/step/1/';
}
</script>
{% endblock %}