fitting_system/templates/scan.html

{% extends 'base.html' %}
{% load static %}
{% load i18n %}

{% block title %}{% trans "Virtual Body Scan - Virtual Fitting System" %}{% endblock %}

{% block content %}
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
    <div class="text-center mb-8">
        <h1 class="text-4xl font-bold text-gray-900 mb-4">{% trans "Virtual Body Scan" %}</h1>
        <p id="scan-subtitle" class="text-xl text-gray-600">{% trans "Two images needed: full-body pose + face selfie" %}</p>
    </div>

    <!-- Gender Selector -->
    <div class="flex justify-center mb-8">
        <div class="inline-flex bg-gray-100 rounded-xl p-1.5 shadow-inner">
            <button id="gender-men" onclick="switchGender('men')"

                class="flex items-center gap-2 px-8 py-3 rounded-lg font-semibold text-sm transition-all duration-300 bg-white text-[#1B3A6B] shadow-md">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"

                        d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
                </svg>
                {% trans "Men" %}
            </button>
            <button id="gender-women" onclick="switchGender('women')"

                class="flex items-center gap-2 px-8 py-3 rounded-lg font-semibold text-sm transition-all duration-300 text-gray-500 hover:text-gray-700">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"

                        d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
                </svg>
                {% trans "Women" %}
            </button>
        </div>
    </div>

    <!-- ===== MEN FLOW ===== -->
    <div id="men-flow">

        <!-- Height Input -->
        <div class="max-w-md mx-auto mb-8">
            <div class="bg-white rounded-2xl shadow-lg p-6 border border-[#7DB8D8]/40">
                <label for="user-height" class="block text-sm font-semibold text-gray-700 mb-2">
                    {% trans "Your Height" %} <span class="text-red-500">*</span>
                    <span class="text-gray-400 font-normal">({% trans "required for accurate measurements" %})</span>
                </label>
                <div class="flex items-center gap-3">
                    <div class="relative flex-1">
                        <input type="number" id="user-height" min="100" max="250" step="1" placeholder="{% trans 'e.g. 175' %}"
                            class="w-full px-4 py-3 rounded-xl border-2 border-gray-200 focus:border-[#5B8FC9] focus:ring-2 focus:ring-[#5B8FC9]/30 outline-none transition-all text-lg font-medium text-gray-800 placeholder-gray-400"

                            oninput="validateHeightInput()">
                        <span class="absolute right-4 top-1/2 -translate-y-1/2 text-gray-400 font-medium">cm</span>
                    </div>
                    <div id="height-status" class="hidden">
                        <span

                            class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-green-100 text-green-600">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"

                                    d="M5 13l4 4L19 7">
                                </path>
                            </svg>
                        </span>
                    </div>
                </div>
                <p id="height-error" class="hidden text-red-500 text-sm mt-2">{% trans "Please enter a valid height between 100 and 250 cm." %}</p>
                <p class="text-gray-400 text-xs mt-2">{% trans "Your height is used to calibrate YOLO body measurements for accuracy." %}</p>
            </div>
        </div>

        <!-- Mode Selector Tabs -->
        <div class="flex justify-center mb-8">
            <div class="inline-flex bg-gray-100 rounded-xl p-1.5 shadow-inner">
                <button id="tab-camera" onclick="switchMode('camera')"

                    class="flex items-center gap-2 px-6 py-3 rounded-lg font-semibold text-sm transition-all duration-300 bg-white text-[#1B3A6B] shadow-md">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"

                            d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z">
                        </path>
                    </svg>
                    {% trans "Camera Scan" %}
                </button>
                <button id="tab-upload" onclick="switchMode('upload')"

                    class="flex items-center gap-2 px-6 py-3 rounded-lg font-semibold text-sm transition-all duration-300 text-gray-500 hover:text-gray-700">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"

                            d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z">
                        </path>
                    </svg>
                    {% trans "Upload Images" %}
                </button>
            </div>
        </div>

        <!-- ===== CAMERA MODE ===== -->
        <div id="camera-mode">

            <!-- Progress Steps: 3 steps now (Body → Face → Process) -->
            <div class="mb-12">
                <div class="flex items-center justify-center space-x-2 md:space-x-4 flex-wrap gap-y-4">
                    <div id="step1" class="flex items-center">
                        <div

                            class="w-10 h-10 bg-[#1B3A6B] text-white rounded-full flex items-center justify-center font-bold">
                            1</div>
                        <span class="ml-2 font-medium text-gray-900">{% trans "Body Pose" %}</span>
                    </div>
                    <div class="w-8 md:w-16 h-1 bg-gray-300"></div>
                    <div id="step2" class="flex items-center opacity-50">
                        <div

                            class="w-10 h-10 bg-gray-300 text-gray-600 rounded-full flex items-center justify-center font-bold">
                            2</div>
                        <span class="ml-2 font-medium text-gray-600">{% trans "Face Selfie" %}</span>
                    </div>
                    <div class="w-8 md:w-16 h-1 bg-gray-300"></div>
                    <div id="step3" class="flex items-center opacity-50">
                        <div

                            class="w-10 h-10 bg-gray-300 text-gray-600 rounded-full flex items-center justify-center font-bold">
                            3</div>
                        <span class="ml-2 font-medium text-gray-600">{% trans "Processing" %}</span>
                    </div>
                </div>
            </div>

            <!-- Camera Interface -->
            <div class="bg-white rounded-2xl shadow-xl p-8">
                <div id="camera-container" class="mb-6 relative">
                    <div class="relative bg-gray-900 rounded-xl overflow-hidden" style="aspect-ratio: 4/3;">
                        <video id="video" autoplay playsinline

                            class="w-full h-full object-cover transform scale-x-[-1]"></video>
                        <canvas id="canvas" class="hidden"></canvas>
                        <canvas id="overlay-canvas" class="absolute inset-0 pointer-events-none w-full h-full"></canvas>

                        <!-- Visual Guide – Full Body -->
                        <div id="visual-guide-body"

                            class="absolute inset-0 flex flex-col items-center justify-center pointer-events-none opacity-70 transition-all duration-300">
                            <div id="head-guide"

                                class="w-32 h-40 border-4 border-dashed border-white/70 rounded-full mb-2 transition-colors duration-300">
                            </div>
                            <div id="body-guide"

                                class="w-80 h-96 border-4 border-dashed border-white/70 rounded-3xl rounded-t-lg transition-colors duration-300">
                            </div>
                        </div>

                        <!-- Visual Guide – Face Selfie -->
                        <div id="visual-guide-face"

                            class="hidden absolute inset-0 flex flex-col items-center justify-center pointer-events-none opacity-70 transition-all duration-300">
                            <div id="face-guide"

                                class="w-64 h-80 border-4 border-dashed border-amber-400/80 rounded-full transition-colors duration-300">
                            </div>
                            <p class="text-amber-400 font-bold mt-4 text-lg bg-black/40 px-4 py-2 rounded-lg">
                                {% trans "Come close! Fill the circle with your face" %}
                            </p>
                        </div>

                        <!-- Countdown Overlay -->
                        <div id="countdown-overlay"

                            class="hidden absolute inset-0 flex items-center justify-center pointer-events-none z-40">
                            <div class="text-center">
                                <div id="countdown-number"

                                    class="text-9xl font-black text-white drop-shadow-2xl animate-pulse"></div>
                                <p class="text-2xl font-bold text-white mt-4 bg-green-600/80 px-6 py-2 rounded-full">{%
                                    trans "Hold still!" %}</p>
                            </div>
                        </div>

                        <!-- Capture Flash -->
                        <div id="capture-flash"

                            class="hidden absolute inset-0 bg-white pointer-events-none z-50 animate-flash"></div>

                        <!-- Status Panel -->
                        <div id="status-panel"

                            class="absolute top-4 left-0 right-0 flex justify-center pointer-events-none">
                            <div id="status-badge"

                                class="bg-black/60 backdrop-blur-md text-white px-6 py-2 rounded-full flex items-center gap-2 transition-all duration-300">
                                <div id="status-indicator" class="w-3 h-3 rounded-full bg-yellow-400 animate-pulse">
                                </div>
                                <span id="status-text" class="font-medium">{% trans "Initializing camera..." %}</span>
                            </div>
                        </div>

                        <!-- Auto-Capture Progress Bar -->
                        <div id="auto-capture-bar" class="hidden absolute bottom-4 left-4 right-4 pointer-events-none">
                            <div class="bg-black/50 rounded-full p-1">
                                <div id="capture-progress"

                                    class="h-2 rounded-full bg-gradient-to-r from-green-400 to-emerald-500 transition-all duration-100"

                                    style="width: 0%"></div>
                            </div>
                            <p class="text-center text-white text-sm mt-2 font-medium">{% trans "Auto-capturing when position is correct..." %}</p>
                        </div>

                        <!-- Loading spinner -->
                        <div id="loading"

                            class="hidden absolute inset-0 bg-black/70 flex items-center justify-center z-50">
                            <div class="text-center">
                                <div

                                    class="animate-spin rounded-full h-16 w-16 border-t-4 border-b-4 border-white mx-auto mb-4">
                                </div>
                                <p class="text-white text-lg">{% trans "Analysing with YOLO + AI..." %}</p>
                                <p class="text-gray-300 text-sm mt-2">{% trans "Detecting pose, measuring body, detecting skin tone..." %}</p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Instructions -->
                <div id="instructions" class="bg-[#EAF3F8] rounded-xl p-6 mb-6">
                    <h3 class="font-bold text-lg text-[#1B3A6B] mb-3">{% trans "Step 1: Body Pose (Auto-Capture)" %}
                    </h3>
                    <ul class="space-y-2 text-[#2E5FA3]">
                        <li>&#10003; {% trans "Stand 2-3 metres away from the camera" %}</li>
                        <li>&#10003; {% trans "Align your full body with the guide outline" %}</li>
                        <li>&#10003; {% trans "Stand straight with arms slightly away from your body" %}</li>
                        <li>&#9889; <strong>{% trans "Image captures automatically when you're positioned correctly!" %}</strong></li>

                    </ul>
                </div>

                <!-- Preview Images -->
                <div id="preview-container" class="hidden mb-6">
                    <h3 class="font-bold text-lg text-gray-900 mb-3">{% trans "Captured Images:" %}</h3>
                    <div class="grid grid-cols-2 gap-4">
                        <div id="front-preview-container" class="hidden">
                            <p class="text-sm text-gray-600 mb-2">{% trans "Body Pose" %} &#10003;</p>
                            <img id="front-preview" class="w-full rounded-lg border-2 border-green-400"

                                alt="{% trans 'Body pose' %}">
                        </div>
                        <div id="face-preview-container" class="hidden">
                            <p class="text-sm text-gray-600 mb-2">{% trans "Face Selfie" %} &#10003;</p>
                            <img id="face-preview" class="w-full rounded-lg border-2 border-amber-400"

                                alt="{% trans 'Face selfie' %}">
                        </div>
                    </div>
                </div>

                <!-- Error Message -->
                <div id="error-message" class="hidden bg-red-50 border-2 border-red-200 rounded-xl p-4 mb-6">
                    <p class="text-red-800 font-medium"></p>
                </div>

                <!-- Action Buttons -->
                <div class="flex gap-4 justify-center flex-wrap">
                    <button id="process-scan"

                        class="hidden bg-gradient-to-r from-emerald-600 to-teal-600 text-white px-8 py-4 rounded-lg font-bold text-lg hover:shadow-lg transition transform hover:scale-105">
                        {% trans "Process Scan" %}
                    </button>
                    <button id="retake"

                        class="hidden bg-gray-500 text-white px-6 py-3 rounded-lg font-medium hover:bg-gray-600 transition">
                        {% trans "Start Over" %}
                    </button>
                </div>
            </div>

        </div><!-- /camera-mode -->

        <!-- ===== UPLOAD MODE ===== -->
        <div id="upload-mode" class="hidden">
            <div class="bg-white rounded-2xl shadow-xl p-8">
                <div class="text-center mb-6">
                    <h2 class="text-2xl font-bold text-gray-900 mb-2">{% trans "Upload Body Images" %}</h2>
                    <p class="text-gray-500">{% trans "Upload a full-body photo AND a face selfie for AI analysis" %}
                    </p>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">

                    <!-- Front / Body Image Upload -->
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-2">
                            {% trans "Body Pose" %} <span class="text-red-500">*</span>
                            <span class="text-gray-400 font-normal">({% trans "required – full body, front view" %})</span>

                        </label>
                        <div id="front-dropzone"

                            class="relative border-2 border-dashed border-[#5B8FC9] rounded-xl p-8 text-center cursor-pointer transition-all duration-300 hover:border-[#1B3A6B] hover:bg-[#EAF3F8]/50 group"

                            onclick="document.getElementById('front-file-input').click()"

                            ondragover="handleDragOver(event,'front-dropzone')"

                            ondragleave="handleDragLeave(event,'front-dropzone')" ondrop="handleDrop(event,'front')">
                            <input type="file" id="front-file-input" accept="image/*" class="hidden"

                                onchange="handleFileSelect(event,'front')">
                            <div id="front-upload-placeholder">
                                <div

                                    class="w-16 h-16 mx-auto mb-4 bg-[#EAF3F8] rounded-full flex items-center justify-center group-hover:bg-[#7DB8D8]/30 transition-colors">
                                    <svg class="w-8 h-8 text-[#5B8FC9]" fill="none" stroke="currentColor"

                                        viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"

                                            d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12">
                                        </path>
                                    </svg>
                                </div>
                                <p class="text-gray-600 font-medium">{% trans "Drop body photo here" %}</p>
                                <p class="text-gray-400 text-sm mt-1">{% trans "or click to browse" %}</p>
                                <p class="text-gray-400 text-xs mt-3">{% trans "Stand facing the camera, full body visible" %}</p>

                            </div>
                            <div id="front-upload-preview" class="hidden">
                                <img id="front-upload-img" class="max-h-64 mx-auto rounded-lg shadow-md"

                                    alt="{% trans 'Body pose' %}">
                                <p class="text-green-600 font-medium mt-3">&#10003; {% trans "Body image ready" %}</p>
                                <button type="button" onclick="event.stopPropagation(); removeUpload('front')"

                                    class="mt-2 text-sm text-red-500 hover:text-red-700 underline">{% trans "Remove" %}</button>

                            </div>
                        </div>
                    </div>

                    <!-- Face / Selfie Image Upload -->
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-2">
                            {% trans "Face Selfie" %} <span class="text-red-500">*</span>
                            <span class="text-gray-400 font-normal">({% trans "required – close-up face for skin tone" %})</span>

                        </label>
                        <div id="face-dropzone"

                            class="relative border-2 border-dashed border-amber-300 rounded-xl p-8 text-center cursor-pointer transition-all duration-300 hover:border-amber-500 hover:bg-amber-50/50 group"

                            onclick="document.getElementById('face-file-input').click()"

                            ondragover="handleDragOver(event,'face-dropzone')"

                            ondragleave="handleDragLeave(event,'face-dropzone')" ondrop="handleDrop(event,'face')">
                            <input type="file" id="face-file-input" accept="image/*" class="hidden"

                                onchange="handleFileSelect(event,'face')">
                            <div id="face-upload-placeholder">
                                <div

                                    class="w-16 h-16 mx-auto mb-4 bg-amber-100 rounded-full flex items-center justify-center group-hover:bg-amber-200 transition-colors">
                                    <svg class="w-8 h-8 text-amber-500" fill="none" stroke="currentColor"

                                        viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"

                                            d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12">
                                        </path>
                                    </svg>
                                </div>
                                <p class="text-gray-600 font-medium">{% trans "Drop face selfie here" %}</p>
                                <p class="text-gray-400 text-sm mt-1">{% trans "or click to browse" %}</p>
                                <p class="text-gray-400 text-xs mt-3">{% trans "Close-up of your face, good lighting" %}
                                </p>
                            </div>
                            <div id="face-upload-preview" class="hidden">
                                <img id="face-upload-img" class="max-h-64 mx-auto rounded-lg shadow-md"

                                    alt="{% trans 'Face selfie' %}">
                                <p class="text-amber-600 font-medium mt-3">&#10003; {% trans "Face image ready" %}</p>
                                <button type="button" onclick="event.stopPropagation(); removeUpload('face')"

                                    class="mt-2 text-sm text-red-500 hover:text-red-700 underline">{% trans "Remove" %}</button>

                            </div>
                        </div>
                    </div>
                </div>

                <!-- Upload Tips -->
                <div class="bg-[#EAF3F8] rounded-xl p-5 mb-6">
                    <h3 class="font-bold text-[#1B3A6B] mb-2">{% trans "Tips for best results:" %}</h3>
                    <ul class="space-y-1.5 text-sm text-[#2E5FA3]">
                        <li>&#10003; {% trans "Body photo: full body visible from head to toe, good lighting" %}</li>
                        <li>&#10003; {% trans "Body photo: stand straight with arms slightly away from body" %}</li>
                        <li>&#10003; {% trans "Face selfie: close-up, face fills most of the frame" %}</li>
                        <li>&#10003; {% trans "Face selfie: natural lighting, no heavy filters" %}</li>
                    </ul>
                </div>

                <!-- Upload Error -->
                <div id="upload-error" class="hidden bg-red-50 border-2 border-red-200 rounded-xl p-4 mb-6">
                    <p class="text-red-800 font-medium"></p>
                </div>

                <!-- Upload Loading -->
                <div id="upload-loading" class="hidden bg-gray-900/80 rounded-xl p-8 mb-6">
                    <div class="text-center">
                        <div

                            class="animate-spin rounded-full h-12 w-12 border-t-4 border-b-4 border-[#5B8FC9] mx-auto mb-4">
                        </div>
                        <p class="text-white text-lg font-medium">{% trans "Analysing with YOLO + AI..." %}</p>
                                <p class="text-gray-300 text-sm mt-2">{% trans "Detecting pose, measuring body, detecting skin tone..." %}</p>
                    </div>
                </div>

                <!-- Upload Action Button -->
                <div class="flex justify-center">
                    <button id="upload-process-btn" onclick="processUpload()" disabled

                        class="bg-gradient-to-r from-[#1B3A6B] to-[#2E5FA3] text-white px-10 py-4 rounded-xl font-bold text-lg shadow-lg transition-all duration-300 disabled:opacity-40 disabled:cursor-not-allowed hover:shadow-xl hover:scale-105 disabled:hover:scale-100 disabled:hover:shadow-lg">
                        {% trans "Process Scan" %}
                    </button>
                </div>
            </div>
        </div><!-- /upload-mode -->

    </div><!-- /men-flow -->

    <!-- ===== WOMEN FLOW ===== -->
    <div id="women-flow" class="hidden">
        <div class="bg-white rounded-2xl shadow-xl p-8">
            <div class="text-center mb-6">
                <h2 class="text-2xl font-bold text-gray-900 mb-2">{% trans "Enter Your Measurements" %}</h2>
                <p class="text-gray-500">{% trans "Enter your body measurements and upload a hand photo for skin tone" %}</p>
            </div>

            <!-- Required Measurements -->
            <div class="mb-6">
                <h3 class="font-bold text-lg text-[#1B3A6B] mb-4 flex items-center gap-2">
                    <span

                        class="w-6 h-6 bg-red-100 text-red-600 rounded-full flex items-center justify-center text-xs font-bold">*</span>
                    {% trans "Required Measurements" %}
                </h3>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-1">{% trans "Height" %} (cm) <span

                                class="text-red-500">*</span></label>
                        <input type="number" id="w-height" min="100" max="250" step="1" placeholder="{% trans 'e.g. 165' %}"
                            class="w-full px-4 py-3 rounded-xl border-2 border-gray-200 focus:border-[#5B8FC9] focus:ring-2 focus:ring-[#5B8FC9]/30 outline-none transition-all text-lg font-medium">
                    </div>
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-1">{% trans "Bust / Chest" %} (cm)
                            <span class="text-red-500">*</span></label>
                        <input type="number" id="w-chest" min="50" max="200" step="0.5" placeholder="{% trans 'e.g. 88' %}"
                            class="w-full px-4 py-3 rounded-xl border-2 border-gray-200 focus:border-[#5B8FC9] focus:ring-2 focus:ring-[#5B8FC9]/30 outline-none transition-all text-lg font-medium">
                    </div>
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-1">{% trans "Waist" %} (cm) <span

                                class="text-red-500">*</span></label>
                        <input type="number" id="w-waist" min="40" max="200" step="0.5" placeholder="{% trans 'e.g. 68' %}"
                            class="w-full px-4 py-3 rounded-xl border-2 border-gray-200 focus:border-[#5B8FC9] focus:ring-2 focus:ring-[#5B8FC9]/30 outline-none transition-all text-lg font-medium">
                    </div>
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-1">{% trans "Hip" %} (cm) <span

                                class="text-red-500">*</span></label>
                        <input type="number" id="w-hip" min="50" max="200" step="0.5" placeholder="{% trans 'e.g. 96' %}"
                            class="w-full px-4 py-3 rounded-xl border-2 border-gray-200 focus:border-[#5B8FC9] focus:ring-2 focus:ring-[#5B8FC9]/30 outline-none transition-all text-lg font-medium">
                    </div>
                </div>
            </div>

            <!-- Optional Measurements -->
            <div class="mb-6">
                <h3 class="font-bold text-lg text-gray-600 mb-4 flex items-center gap-2">
                    <span

                        class="w-6 h-6 bg-gray-100 text-gray-500 rounded-full flex items-center justify-center text-xs">+</span>
                    {% trans "Optional Measurements" %}
                    <span class="text-sm font-normal text-gray-400">({% trans "better accuracy" %})</span>
                </h3>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-1">{% trans "Shoulder Width" %}
                            (cm)</label>
                        <input type="number" id="w-shoulder" min="20" max="70" step="0.5" placeholder="{% trans 'e.g. 38' %}"
                            class="w-full px-4 py-3 rounded-xl border-2 border-gray-200 focus:border-[#5B8FC9] focus:ring-2 focus:ring-[#5B8FC9]/30 outline-none transition-all text-lg font-medium">
                    </div>
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-1">{% trans "Inseam" %} (cm)</label>
                        <input type="number" id="w-inseam" min="40" max="110" step="0.5" placeholder="{% trans 'e.g. 76' %}"
                            class="w-full px-4 py-3 rounded-xl border-2 border-gray-200 focus:border-[#5B8FC9] focus:ring-2 focus:ring-[#5B8FC9]/30 outline-none transition-all text-lg font-medium">
                    </div>
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-1">{% trans "Arm Length" %}
                            (cm)</label>
                        <input type="number" id="w-arm" min="30" max="100" step="0.5" placeholder="{% trans 'e.g. 56' %}"
                            class="w-full px-4 py-3 rounded-xl border-2 border-gray-200 focus:border-[#5B8FC9] focus:ring-2 focus:ring-[#5B8FC9]/30 outline-none transition-all text-lg font-medium">
                    </div>
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-1">{% trans "Torso Length" %}
                            (cm)</label>
                        <input type="number" id="w-torso" min="20" max="80" step="0.5" placeholder="{% trans 'e.g. 42' %}"
                            class="w-full px-4 py-3 rounded-xl border-2 border-gray-200 focus:border-[#5B8FC9] focus:ring-2 focus:ring-[#5B8FC9]/30 outline-none transition-all text-lg font-medium">
                    </div>
                </div>
            </div>

            <!-- Hand Image Upload -->
            <div class="mb-6">
                <h3 class="font-bold text-lg text-[#1B3A6B] mb-4 flex items-center gap-2">
                    <span

                        class="w-6 h-6 bg-red-100 text-red-600 rounded-full flex items-center justify-center text-xs font-bold">*</span>
                    {% trans "Hand Photo for Skin Tone" %}
                </h3>
                <div id="hand-dropzone"

                    class="relative border-2 border-dashed border-amber-300 rounded-xl p-8 text-center cursor-pointer transition-all duration-300 hover:border-amber-500 hover:bg-amber-50/50 group"

                    onclick="document.getElementById('hand-file-input').click()"

                    ondragover="handleDragOver(event,'hand-dropzone')"

                    ondragleave="handleDragLeave(event,'hand-dropzone')" ondrop="handleDropWomen(event)">
                    <input type="file" id="hand-file-input" accept="image/*" class="hidden"

                        onchange="handleHandFileSelect(event)">
                    <div id="hand-upload-placeholder">
                        <div

                            class="w-16 h-16 mx-auto mb-4 bg-amber-100 rounded-full flex items-center justify-center group-hover:bg-amber-200 transition-colors">
                            <svg class="w-8 h-8 text-amber-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"

                                    d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12">
                                </path>
                            </svg>
                        </div>
                        <p class="text-gray-600 font-medium">{% trans "Drop hand photo here" %}</p>
                        <p class="text-gray-400 text-sm mt-1">{% trans "or click to browse" %}</p>
                        <p class="text-gray-400 text-xs mt-3">{% trans "Photo of the back of your hand, good lighting, no filters" %}</p>
                    </div>
                    <div id="hand-upload-preview" class="hidden">
                        <img id="hand-upload-img" class="max-h-64 mx-auto rounded-lg shadow-md" alt="Hand photo">
                        <p class="text-amber-600 font-medium mt-3">&#10003; {% trans "Hand image ready" %}</p>
                        <button type="button" onclick="event.stopPropagation(); removeHandUpload()"

                            class="mt-2 text-sm text-red-500 hover:text-red-700 underline">{% trans "Remove" %}</button>
                    </div>
                </div>
            </div>

            <!-- Tips -->
            <div class="bg-[#EAF3F8] rounded-xl p-5 mb-6">
                <h3 class="font-bold text-[#1B3A6B] mb-2">{% trans "How to measure:" %}</h3>
                <ul class="space-y-1.5 text-sm text-[#2E5FA3]">
                    <li>&#10003; {% trans "Use a soft measuring tape for best results" %}</li>
                    <li>&#10003; {% trans "Bust: measure around the fullest part of your chest" %}</li>
                    <li>&#10003; {% trans "Waist: measure around your natural waistline" %}</li>
                    <li>&#10003; {% trans "Hip: measure around the widest part of your hips" %}</li>
                    <li>&#9889; {% trans "Hand photo: back of hand, natural light, no makeup or filters" %}</li>
                </ul>
            </div>

            <!-- Women Error -->
            <div id="women-error" class="hidden bg-red-50 border-2 border-red-200 rounded-xl p-4 mb-6">
                <p class="text-red-800 font-medium"></p>
            </div>

            <!-- Women Loading -->
            <div id="women-loading" class="hidden bg-gray-900/80 rounded-xl p-8 mb-6">
                <div class="text-center">
                    <div

                        class="animate-spin rounded-full h-12 w-12 border-t-4 border-b-4 border-[#5B8FC9] mx-auto mb-4">
                    </div>
                    <p class="text-white text-lg font-medium">{% trans "Analysing with AI..." %}</p>
                    <p class="text-gray-400 text-sm mt-2">{% trans "Detecting skin tone, recommending size..." %}</p>
                </div>
            </div>

            <!-- Women Process Button -->
            <div class="flex justify-center">
                <button id="women-process-btn" onclick="processWomenScan()" disabled

                    class="bg-gradient-to-r from-[#1B3A6B] to-[#2E5FA3] text-white px-10 py-4 rounded-xl font-bold text-lg shadow-lg transition-all duration-300 disabled:opacity-40 disabled:cursor-not-allowed hover:shadow-xl hover:scale-105 disabled:hover:scale-100 disabled:hover:shadow-lg">
                    {% trans "Get My Size Recommendation" %}
                </button>
            </div>
        </div>
    </div><!-- /women-flow -->

</div>

<style>

    @keyframes flash {

        0% {

            opacity: 1;

        }



        100% {

            opacity: 0;

        }

    }



    .animate-flash {

        animation: flash 0.3s ease-out forwards;

    }



    @keyframes pulse-border {



        0%,

        100% {

            border-color: rgba(34, 197, 94, 0.8);

        }



        50% {

            border-color: rgba(34, 197, 94, 0.4);

        }

    }



    .pulse-border-green {

        animation: pulse-border 1s ease-in-out infinite;

    }

</style>

<script src="{% static 'js/camera.js' %}"></script>
{% endblock %}

{% block extra_js %}
<script>

    window.LANG_PREFIX = "{% if request.LANGUAGE_CODE == 'ar' %}/ar{% endif %}";

    window.SCAN_I18N = {

        statusInit: "{% trans 'Initializing camera...' %}",

        statusAlign: "{% trans 'Align your body with the guide' %}",

        statusNoPerson: "{% trans 'No person detected – step into frame' %}",

        statusReady: "{% trans 'Ready to process your scan!' %}",

        statusCameraDenied: "{% trans 'Camera access denied' %}",

        errorCamera: "{% trans 'Camera access denied. Please allow camera access.' %}",

        errorBodyImage: "{% trans 'Please capture a body pose image.' %}",

        errorFaceImage: "{% trans 'Please capture a face selfie.' %}",

        errorHeight: "{% trans 'Please enter a valid height (100-250 cm) before processing.' %}",

        errorProcess: "{% trans 'Processing failed. Please try again.' %}",

        errorNetwork: "{% trans 'Network error. Please check your connection and try again.' %}",

        errorUploadBody: "{% trans 'Please upload a body pose image.' %}",

        errorUploadFace: "{% trans 'Please upload a face selfie image.' %}",

        errorUploadHeight: "{% trans 'Please enter a valid height (100-250 cm) before processing.' %}",

        step1Title: "{% trans 'Step 1: Body Pose (Auto-Capture)' %}",

        step1_1: "{% trans 'Stand 2-3 metres away from the camera' %}",

        step1_2: "{% trans 'Align your full body with the guide outline' %}",

        step1_3: "{% trans 'Stand straight with arms slightly away from your body' %}",

        step1_4: "{% trans 'Image captures automatically when you\'re positioned correctly!' %}",

        step2Title: "{% trans 'Step 2: Face Selfie (Auto-Capture)' %}",

        step2_1: "{% trans 'Come close to the camera like a selfie!' %}",

        step2_2: "{% trans 'Your face should fill most of the circle' %}",

        step2_3: "{% trans 'Position your face in the centre of the guide' %}",

        step2_4: "{% trans 'Ensure good, natural lighting on your face' %}",

        step2_5: "{% trans 'Image captures automatically when you\'re close enough!' %}",

        step3Title: "{% trans 'Step 3: Ready to Process' %}",

        step3_1: "{% trans 'Both images captured successfully!' %}",

        step3_2: "{% trans 'Click Process Scan to analyse your measurements & skin tone' %}",
        step3_3: "{% trans 'You can start over if needed' %}",
        subtitleMen: "{% trans 'Two images needed: full-body pose + face selfie' %}",
        subtitleWomen: "{% trans 'Enter your measurements and upload a hand photo' %}",
        errorWomenHeight: "{% trans 'Please enter a valid height between 100 and 250 cm.' %}",
        errorWomenBust: "{% trans 'Please enter your bust/chest measurement.' %}",
        errorWomenWaist: "{% trans 'Please enter your waist measurement.' %}",
        errorWomenHip: "{% trans 'Please enter your hip measurement.' %}",
        errorWomenHand: "{% trans 'Please upload a hand photo for skin tone detection.' %}"
    };

</script>
<script>

    // ===== STATE =====

    let video, canvas, context, overlayCanvas, overlayContext;

    let frontImageData = null;   // body pose image

    let faceImageData = null;   // face selfie image

    let currentStep = 1;

    let analysisInterval = null;

    let isAnalyzing = false;

    let goodPoseStartTime = null;

    const AUTO_CAPTURE_DELAY = 2000;

    let countdownActive = false;

    let countdownValue = 3;



    document.addEventListener('DOMContentLoaded', function () {

        video = document.getElementById('video');

        canvas = document.getElementById('canvas');

        context = canvas.getContext('2d');

        overlayCanvas = document.getElementById('overlay-canvas');

        overlayContext = overlayCanvas.getContext('2d');



        window.addEventListener('resize', resizeOverlay);

        initCamera();



        document.getElementById('process-scan').addEventListener('click', processScan);

        document.getElementById('retake').addEventListener('click', retake);

    });



    // ===== CAMERA INIT =====

    async function initCamera() {

        try {

            const stream = await navigator.mediaDevices.getUserMedia({

                video: { width: { ideal: 1280 }, height: { ideal: 960 }, facingMode: 'user' }

            });

            video.srcObject = stream;

            video.onloadedmetadata = () => {

                resizeOverlay();

                startRealTimeAnalysis();

            };

        } catch (error) {

            showError(window.SCAN_I18N ? window.SCAN_I18N.errorCamera : 'Camera access denied. Please allow camera access.');

            updateStatus('error', window.SCAN_I18N ? window.SCAN_I18N.statusCameraDenied : 'Camera access denied');

        }

    }



    function resizeOverlay() {
        const preview = document.querySelector('#camera-container .relative');
        if (!preview) return;
        overlayCanvas.width = Math.max(1, Math.round(preview.clientWidth));
        overlayCanvas.height = Math.max(1, Math.round(preview.clientHeight));
    }


    // ===== REAL-TIME ANALYSIS =====

    function startRealTimeAnalysis() {

        if (isAnalyzing) return;

        isAnalyzing = true;

        goodPoseStartTime = null;



        updateStatus('warning', window.SCAN_I18N ? window.SCAN_I18N.statusAlign : 'Align your body with the guide');

        document.getElementById('auto-capture-bar').classList.remove('hidden');



        analysisInterval = setInterval(async () => {

            if (!isAnalyzing || video.paused || video.ended || countdownActive) return;



            const analysisCanvas = document.createElement('canvas');

            analysisCanvas.width = 320;

            analysisCanvas.height = 240;

            const ctx = analysisCanvas.getContext('2d');

            ctx.drawImage(video, 0, 0, 320, 240);

            const imageData = analysisCanvas.toDataURL('image/jpeg', 0.6);



            try {

                const analysisMode = currentStep === 2 ? 'face' : 'body';

                const response = await fetch('{% url "fitting_system:analyze_frame" %}', {

                    method: 'POST',

                    headers: { 'Content-Type': 'application/json' },

                    body: JSON.stringify({ image: imageData, mode: analysisMode })

                });

                const result = await response.json();

                handleAnalysisResult(result);

            } catch (error) {

                console.error('Analysis frame error:', error);

            }

        }, 200);

    }



    function stopAnalysis() {

        isAnalyzing = false;

        goodPoseStartTime = null;

        if (analysisInterval) { clearInterval(analysisInterval); analysisInterval = null; }

        overlayContext.clearRect(0, 0, overlayCanvas.width, overlayCanvas.height);

        document.getElementById('auto-capture-bar').classList.add('hidden');

        document.getElementById('capture-progress').style.width = '0%';

    }



    function handleAnalysisResult(result) {

        if (!result.detected) {

            updateStatus('error', window.SCAN_I18N ? window.SCAN_I18N.statusNoPerson : 'No person detected – step into frame');

            clearLandmarks();

            goodPoseStartTime = null;

            updateCaptureProgress(0);

            return;

        }



        updateStatus(result.status, result.message);



        if (result.landmarks && result.landmarks.length > 0) {

            drawLandmarks(result.landmarks, result.status);

        }



        if (result.status === 'good') {

            if (!goodPoseStartTime) goodPoseStartTime = Date.now();

            const elapsed = Date.now() - goodPoseStartTime;

            const progress = Math.min(100, (elapsed / AUTO_CAPTURE_DELAY) * 100);

            updateCaptureProgress(progress);

            updateGuideColor('good');

            if (elapsed >= AUTO_CAPTURE_DELAY && !countdownActive) startCountdown();

        } else {

            goodPoseStartTime = null;

            updateCaptureProgress(0);

            updateGuideColor(result.status);

        }

    }



    function updateCaptureProgress(p) {

        document.getElementById('capture-progress').style.width = p + '%';

    }



    function updateGuideColor(status) {

        const headGuide = document.getElementById('head-guide');

        const bodyGuide = document.getElementById('body-guide');

        const faceGuide = document.getElementById('face-guide');



        [headGuide, bodyGuide, faceGuide].forEach(el => {

            if (el) el.classList.remove('border-green-400', 'border-yellow-400', 'border-red-400',

                'pulse-border-green', 'border-white/70', 'border-amber-400/80');

        });



        if (status === 'good') {

            headGuide && headGuide.classList.add('border-green-400', 'pulse-border-green');

            bodyGuide && bodyGuide.classList.add('border-green-400', 'pulse-border-green');

            faceGuide && faceGuide.classList.add('border-green-400', 'pulse-border-green');

        } else if (status === 'warning') {

            headGuide && headGuide.classList.add('border-yellow-400');

            bodyGuide && bodyGuide.classList.add('border-yellow-400');

            faceGuide && faceGuide.classList.add('border-amber-400/80');

        } else {

            headGuide && headGuide.classList.add('border-white/70');

            bodyGuide && bodyGuide.classList.add('border-white/70');

            faceGuide && faceGuide.classList.add('border-amber-400/80');

        }

    }



    function startCountdown() {

        countdownActive = true;

        countdownValue = 3;

        const overlay = document.getElementById('countdown-overlay');

        const num = document.getElementById('countdown-number');

        overlay.classList.remove('hidden');

        num.textContent = countdownValue;



        const interval = setInterval(() => {

            countdownValue--;

            if (countdownValue > 0) {

                num.textContent = countdownValue;

            } else {

                clearInterval(interval);

                overlay.classList.add('hidden');

                triggerAutoCapture();

            }

        }, 1000);

    }



    function triggerAutoCapture() {

        const flash = document.getElementById('capture-flash');

        flash.classList.remove('hidden');

        setTimeout(() => flash.classList.add('hidden'), 300);



        if (currentStep === 1) captureBodyImage();

        else if (currentStep === 2) captureFaceImage();



        countdownActive = false;

    }



    // ===== CAPTURE FUNCTIONS =====

    function captureImage() {

        canvas.width = video.videoWidth;

        canvas.height = video.videoHeight;

        context.save();

        context.scale(-1, 1);

        context.drawImage(video, -canvas.width, 0, canvas.width, canvas.height);

        context.restore();

        return canvas.toDataURL('image/jpeg', 0.9);

    }



    function captureBodyImage() {

        stopAnalysis();

        frontImageData = captureImage();



        document.getElementById('front-preview').src = frontImageData;

        document.getElementById('preview-container').classList.remove('hidden');

        document.getElementById('front-preview-container').classList.remove('hidden');



        // Move to face selfie step

        moveToFaceStep();

    }



    function moveToFaceStep() {

        // Switch visual guides

        document.getElementById('visual-guide-body').classList.add('hidden');

        document.getElementById('visual-guide-face').classList.remove('hidden');



        updateStep(2);



        var i = window.SCAN_I18N || {};

        document.getElementById('instructions').innerHTML = `

            <h3 class="font-bold text-lg text-amber-700 mb-3">` + (i.step2Title || 'Step 2: Face Selfie (Auto-Capture)') + `</h3>

            <ul class="space-y-2 text-amber-800">

                <li>&#10003; <strong>` + (i.step2_1 || 'Come close to the camera like a selfie!') + `</strong></li>

                <li>&#10003; ` + (i.step2_2 || 'Your face should fill most of the circle') + `</li>

                <li>&#10003; ` + (i.step2_3 || 'Position your face in the centre of the guide') + `</li>

                <li>&#10003; ` + (i.step2_4 || 'Ensure good, natural lighting on your face') + `</li>

                <li>&#9889; <strong>` + (i.step2_5 || "Image captures automatically when you're close enough!") + `</strong></li>

            </ul>

        `;



        setTimeout(() => startRealTimeAnalysis(), 500);

    }



    function captureFaceImage() {

        stopAnalysis();

        faceImageData = captureImage();



        document.getElementById('face-preview').src = faceImageData;

        document.getElementById('face-preview-container').classList.remove('hidden');



        // Hide face guide

        document.getElementById('visual-guide-face').classList.add('hidden');



        // Show process button

        document.getElementById('process-scan').classList.remove('hidden');

        document.getElementById('retake').classList.remove('hidden');



        updateStep(3);



        var i3 = window.SCAN_I18N || {};

        document.getElementById('instructions').innerHTML = `

            <h3 class="font-bold text-lg text-emerald-700 mb-3">` + (i3.step3Title || 'Step 3: Ready to Process') + `</h3>

            <ul class="space-y-2 text-emerald-800">

                <li>&#10003; ` + (i3.step3_1 || 'Both images captured successfully!') + `</li>

                <li>&#10003; ` + (i3.step3_2 || 'Click "Process Scan" to analyse your measurements & skin tone') + `</li>

                <li>&#10003; ` + (i3.step3_3 || 'You can start over if needed') + `</li>

            </ul>

        `;



        updateStatus('good', window.SCAN_I18N ? window.SCAN_I18N.statusReady : 'Ready to process your scan!');

    }



    // ===== PROCESS SCAN =====

    function getValidatedHeight() {

        const heightInput = document.getElementById('user-height');

        const val = parseFloat(heightInput.value);

        if (isNaN(val) || val < 100 || val > 250) {

            return null;

        }

        return val;

    }



    function validateHeightInput() {

        const heightInput = document.getElementById('user-height');

        const val = parseFloat(heightInput.value);

        const errorEl = document.getElementById('height-error');

        const statusEl = document.getElementById('height-status');

        if (heightInput.value === '') {

            errorEl.classList.add('hidden');

            statusEl.classList.add('hidden');

            return;

        }

        if (isNaN(val) || val < 100 || val > 250) {

            errorEl.classList.remove('hidden');

            statusEl.classList.add('hidden');

            heightInput.classList.add('border-red-400');

            heightInput.classList.remove('border-green-400');

        } else {

            errorEl.classList.add('hidden');

            statusEl.classList.remove('hidden');

            heightInput.classList.remove('border-red-400');

            heightInput.classList.add('border-green-400');

        }

    }



    async function processScan() {

        var i = window.SCAN_I18N || {};

        if (!frontImageData) { showError(i.errorBodyImage || 'Please capture a body pose image.'); return; }

        if (!faceImageData) { showError(i.errorFaceImage || 'Please capture a face selfie.'); return; }



        const userHeight = getValidatedHeight();

        if (!userHeight) {

            showError(i.errorHeight || 'Please enter a valid height (100-250 cm) before processing.');

            document.getElementById('user-height').focus();

            return;

        }



        document.getElementById('loading').classList.remove('hidden');

        document.getElementById('process-scan').disabled = true;



        try {

            const response = await fetch('{% url "fitting_system:process_scan" %}', {

                method: 'POST',

                headers: { 'Content-Type': 'application/json' },

                body: JSON.stringify({

                    front_image: frontImageData,

                    face_image: faceImageData,

                    user_height_cm: userHeight,

                })

            });



            const data = await response.json();



            if (data.success) {

                window.location.href = `${window.LANG_PREFIX || ''}/recommendations/${data.session_id}/`;

            } else {

                showError(data.error || (window.SCAN_I18N && window.SCAN_I18N.errorProcess) || 'Processing failed. Please try again.');

                document.getElementById('loading').classList.add('hidden');

                document.getElementById('process-scan').disabled = false;

            }

        } catch (error) {

            showError(window.SCAN_I18N && window.SCAN_I18N.errorNetwork ? window.SCAN_I18N.errorNetwork : 'Network error. Please check your connection and try again.');

            document.getElementById('loading').classList.add('hidden');

            document.getElementById('process-scan').disabled = false;

        }

    }



    // ===== RETAKE =====

    function retake() {

        frontImageData = null;

        faceImageData = null;

        currentStep = 1;

        goodPoseStartTime = null;

        countdownActive = false;



        document.getElementById('preview-container').classList.add('hidden');

        document.getElementById('front-preview-container').classList.add('hidden');

        document.getElementById('face-preview-container').classList.add('hidden');

        document.getElementById('process-scan').classList.add('hidden');

        document.getElementById('retake').classList.add('hidden');

        document.getElementById('error-message').classList.add('hidden');



        document.getElementById('visual-guide-body').classList.remove('hidden');

        document.getElementById('visual-guide-face').classList.add('hidden');



        var i1 = window.SCAN_I18N || {};

        document.getElementById('instructions').innerHTML = `

            <h3 class="font-bold text-lg text-[#1B3A6B] mb-3">` + (i1.step1Title || 'Step 1: Body Pose (Auto-Capture)') + `</h3>

            <ul class="space-y-2 text-[#2E5FA3]">

                <li>&#10003; ` + (i1.step1_1 || 'Stand 2-3 metres away from the camera') + `</li>

                <li>&#10003; ` + (i1.step1_2 || 'Align your full body with the guide outline') + `</li>

                <li>&#10003; ` + (i1.step1_3 || 'Stand straight with arms slightly away from your body') + `</li>

                <li>&#9889; <strong>` + (i1.step1_4 || "Image captures automatically when you're positioned correctly!") + `</strong></li>

            </ul>

        `;



        updateStep(1);

        startRealTimeAnalysis();

    }



    // ===== STATUS + STEP HELPERS =====

    function updateStatus(status, message) {

        const badge = document.getElementById('status-badge');

        const indicator = document.getElementById('status-indicator');

        const text = document.getElementById('status-text');



        text.textContent = message;

        indicator.className = 'w-3 h-3 rounded-full animate-pulse transition-colors duration-300';

        badge.className = 'backdrop-blur-md px-6 py-2 rounded-full flex items-center gap-2 transition-all duration-300 border-2';



        if (status === 'good') {

            indicator.classList.add('bg-green-400');

            badge.classList.add('bg-green-900/60', 'border-green-400');

        } else if (status === 'warning') {

            indicator.classList.add('bg-yellow-400');

            badge.classList.add('bg-yellow-900/60', 'border-yellow-400');

        } else {

            indicator.classList.add('bg-red-500');

            badge.classList.add('bg-red-900/60', 'border-red-500');

        }

    }



    function updateStep(step) {

        currentStep = step;

        const totalSteps = 3;

        for (let i = 1; i <= totalSteps; i++) {

            const stepEl = document.getElementById(`step${i}`);

            if (!stepEl) continue;

            if (i < step) {

                stepEl.classList.remove('opacity-50');

                stepEl.querySelector('div').classList.remove('bg-gray-300', 'text-gray-600', 'bg-[#1B3A6B]');

                stepEl.querySelector('div').classList.add('bg-green-500', 'text-white');

                stepEl.querySelector('span').classList.remove('text-gray-600');

                stepEl.querySelector('span').classList.add('text-gray-900');

            } else if (i === step) {

                stepEl.classList.remove('opacity-50');

                stepEl.querySelector('div').classList.remove('bg-gray-300', 'text-gray-600', 'bg-green-500');

                stepEl.querySelector('div').classList.add('bg-[#1B3A6B]', 'text-white');

                stepEl.querySelector('span').classList.remove('text-gray-600');

                stepEl.querySelector('span').classList.add('text-gray-900');

            } else {

                stepEl.classList.add('opacity-50');

                stepEl.querySelector('div').classList.remove('bg-[#1B3A6B]', 'bg-green-500', 'text-white');

                stepEl.querySelector('div').classList.add('bg-gray-300', 'text-gray-600');

                stepEl.querySelector('span').classList.remove('text-gray-900');

                stepEl.querySelector('span').classList.add('text-gray-600');

            }

        }

    }



    function showError(message) {

        const errorEl = document.getElementById('error-message');

        errorEl.querySelector('p').textContent = message;

        errorEl.classList.remove('hidden');

    }



    // ===== LANDMARK DRAWING =====

    const POSE_CONNECTIONS = [

        [11, 12], [11, 13], [13, 15], [12, 14], [14, 16],

        [11, 23], [12, 24], [23, 24], [23, 25], [25, 27], [24, 26], [26, 28]

    ];



    function drawLandmarks(landmarks, status) {

        overlayContext.clearRect(0, 0, overlayCanvas.width, overlayCanvas.height);

        let color = '#34d399';

        if (status === 'warning') color = '#fbbf24';

        if (status === 'error') color = '#ef4444';



        overlayContext.strokeStyle = color;

        overlayContext.lineWidth = 4;

        overlayContext.lineCap = 'round';

        overlayContext.lineJoin = 'round';

        overlayContext.shadowBlur = 15;

        overlayContext.shadowColor = color;



        POSE_CONNECTIONS.forEach(([i, j]) => {

            const lm1 = landmarks[i], lm2 = landmarks[j];

            if (lm1 && lm2 && lm1.x !== undefined && lm2.x !== undefined) {

                const x1 = (1 - lm1.x) * overlayCanvas.width;

                const y1 = lm1.y * overlayCanvas.height;

                const x2 = (1 - lm2.x) * overlayCanvas.width;

                const y2 = lm2.y * overlayCanvas.height;

                overlayContext.beginPath();

                overlayContext.moveTo(x1, y1);

                overlayContext.lineTo(x2, y2);

                overlayContext.stroke();

            }

        });



        const keyJoints = [11, 12, 13, 14, 15, 16, 23, 24, 25, 26, 27, 28, 0];

        landmarks.forEach((lm, index) => {

            if (!keyJoints.includes(index)) return;

            const x = (1 - lm.x) * overlayCanvas.width;

            const y = lm.y * overlayCanvas.height;

            overlayContext.beginPath();

            overlayContext.fillStyle = color;

            overlayContext.arc(x, y, 6, 0, 2 * Math.PI);

            overlayContext.fill();

            overlayContext.beginPath();

            overlayContext.fillStyle = '#FFFFFF';

            overlayContext.arc(x, y, 3, 0, 2 * Math.PI);

            overlayContext.fill();

        });



        overlayContext.shadowBlur = 0;

    }



    function clearLandmarks() {

        overlayContext.clearRect(0, 0, overlayCanvas.width, overlayCanvas.height);

    }



    // ===== MODE SWITCH =====

    let currentMode = 'camera';



    function switchMode(mode) {

        currentMode = mode;

        const cameraMode = document.getElementById('camera-mode');

        const uploadMode = document.getElementById('upload-mode');

        const tabCamera = document.getElementById('tab-camera');

        const tabUpload = document.getElementById('tab-upload');



        if (mode === 'camera') {
            cameraMode.classList.remove('hidden');
            uploadMode.classList.add('hidden');
            tabCamera.className = 'flex items-center gap-2 px-6 py-3 rounded-lg font-semibold text-sm transition-all duration-300 bg-white text-[#1B3A6B] shadow-md';
            tabUpload.className = 'flex items-center gap-2 px-6 py-3 rounded-lg font-semibold text-sm transition-all duration-300 text-gray-500 hover:text-gray-700';
            if (video && video.srcObject) video.play();
            setTimeout(resizeOverlay, 0);
        } else {
            cameraMode.classList.add('hidden');

            uploadMode.classList.remove('hidden');

            tabCamera.className = 'flex items-center gap-2 px-6 py-3 rounded-lg font-semibold text-sm transition-all duration-300 text-gray-500 hover:text-gray-700';

            tabUpload.className = 'flex items-center gap-2 px-6 py-3 rounded-lg font-semibold text-sm transition-all duration-300 bg-white text-[#1B3A6B] shadow-md';

            if (video && video.srcObject) video.pause();

            stopAnalysis();

        }

    }



    // ===== UPLOAD MODE FUNCTIONS =====

    let uploadFrontData = null;

    let uploadFaceData = null;



    function handleDragOver(e, dropzoneId) {

        e.preventDefault(); e.stopPropagation();

        document.getElementById(dropzoneId).classList.add('border-[#1B3A6B]', 'bg-[#EAF3F8]');

    }

    function handleDragLeave(e, dropzoneId) {

        e.preventDefault(); e.stopPropagation();

        document.getElementById(dropzoneId).classList.remove('border-[#1B3A6B]', 'bg-[#EAF3F8]');

    }

    function handleDrop(e, type) {

        e.preventDefault(); e.stopPropagation();

        const dropzoneId = type + '-dropzone';

        document.getElementById(dropzoneId).classList.remove('border-[#1B3A6B]', 'bg-[#EAF3F8]');

        const files = e.dataTransfer.files;

        if (files.length > 0 && files[0].type.startsWith('image/')) readFileAsBase64(files[0], type);

    }

    function handleFileSelect(e, type) {

        const files = e.target.files;

        if (files.length > 0) readFileAsBase64(files[0], type);

    }

    function readFileAsBase64(file, type) {

        const reader = new FileReader();

        reader.onload = function (e) {

            const base64Data = e.target.result;

            if (type === 'front') {

                uploadFrontData = base64Data;

                document.getElementById('front-upload-img').src = base64Data;

                document.getElementById('front-upload-placeholder').classList.add('hidden');

                document.getElementById('front-upload-preview').classList.remove('hidden');

            } else if (type === 'face') {

                uploadFaceData = base64Data;

                document.getElementById('face-upload-img').src = base64Data;

                document.getElementById('face-upload-placeholder').classList.add('hidden');

                document.getElementById('face-upload-preview').classList.remove('hidden');

            }

            updateUploadButton();

        };

        reader.readAsDataURL(file);

    }

    function removeUpload(type) {

        if (type === 'front') {

            uploadFrontData = null;

            document.getElementById('front-upload-placeholder').classList.remove('hidden');

            document.getElementById('front-upload-preview').classList.add('hidden');

            document.getElementById('front-file-input').value = '';

        } else if (type === 'face') {

            uploadFaceData = null;

            document.getElementById('face-upload-placeholder').classList.remove('hidden');

            document.getElementById('face-upload-preview').classList.add('hidden');

            document.getElementById('face-file-input').value = '';

        }

        updateUploadButton();

    }

    function updateUploadButton() {

        // Both images required

        document.getElementById('upload-process-btn').disabled = !(uploadFrontData && uploadFaceData);

    }



    async function processUpload() {

        var i = window.SCAN_I18N || {};

        if (!uploadFrontData) { showUploadError(i.errorUploadBody || 'Please upload a body pose image.'); return; }

        if (!uploadFaceData) { showUploadError(i.errorUploadFace || 'Please upload a face selfie image.'); return; }



        const userHeight = getValidatedHeight();

        if (!userHeight) {

            showUploadError(i.errorUploadHeight || i.errorHeight || 'Please enter a valid height (100-250 cm) before processing.');

            document.getElementById('user-height').focus();

            return;

        }



        document.getElementById('upload-loading').classList.remove('hidden');

        document.getElementById('upload-process-btn').disabled = true;

        document.getElementById('upload-error').classList.add('hidden');



        try {

            const response = await fetch('{% url "fitting_system:process_scan" %}', {

                method: 'POST',

                headers: { 'Content-Type': 'application/json' },

                body: JSON.stringify({

                    front_image: uploadFrontData,

                    face_image: uploadFaceData,

                    user_height_cm: userHeight,

                })

            });



            const data = await response.json();



            if (data.success) {

                window.location.href = `${window.LANG_PREFIX || ''}/recommendations/${data.session_id}/`;

            } else {

                showUploadError(data.error || (window.SCAN_I18N && window.SCAN_I18N.errorProcess) || 'Processing failed. Please try again.');

                document.getElementById('upload-loading').classList.add('hidden');

                document.getElementById('upload-process-btn').disabled = false;

            }

        } catch (error) {

            showUploadError(window.SCAN_I18N && window.SCAN_I18N.errorNetwork ? window.SCAN_I18N.errorNetwork : 'Network error. Please check your connection and try again.');

            document.getElementById('upload-loading').classList.add('hidden');

            document.getElementById('upload-process-btn').disabled = false;

        }

    }



    function showUploadError(message) {

        const errorEl = document.getElementById('upload-error');

        errorEl.querySelector('p').textContent = message;

        errorEl.classList.remove('hidden');

    }



    // ===== GENDER SWITCH =====

    let selectedGender = 'men';



    function switchGender(gender) {

        selectedGender = gender;

        const menFlow = document.getElementById('men-flow');

        const womenFlow = document.getElementById('women-flow');

        const btnMen = document.getElementById('gender-men');

        const btnWomen = document.getElementById('gender-women');

        const subtitle = document.getElementById('scan-subtitle');



        const activeClass = 'flex items-center gap-2 px-8 py-3 rounded-lg font-semibold text-sm transition-all duration-300 bg-white text-[#1B3A6B] shadow-md';

        const inactiveClass = 'flex items-center gap-2 px-8 py-3 rounded-lg font-semibold text-sm transition-all duration-300 text-gray-500 hover:text-gray-700';



        if (gender === 'men') {
            menFlow.classList.remove('hidden');
            womenFlow.classList.add('hidden');
            btnMen.className = activeClass;
            btnWomen.className = inactiveClass;
            subtitle.textContent = (window.SCAN_I18N && window.SCAN_I18N.subtitleMen) || 'Two images needed: full-body pose + face selfie';
            setTimeout(resizeOverlay, 0);
        } else {
            menFlow.classList.add('hidden');

            womenFlow.classList.remove('hidden');

            btnMen.className = inactiveClass;

            btnWomen.className = activeClass;

            subtitle.textContent = (window.SCAN_I18N && window.SCAN_I18N.subtitleWomen) || 'Enter your measurements and upload a hand photo';
            if (video && video.srcObject) video.pause();

            stopAnalysis();

        }

    }



    // ===== WOMEN FLOW =====

    let uploadHandData = null;



    function handleDropWomen(e) {

        e.preventDefault(); e.stopPropagation();

        document.getElementById('hand-dropzone').classList.remove('border-[#1B3A6B]', 'bg-[#EAF3F8]');

        const files = e.dataTransfer.files;

        if (files.length > 0 && files[0].type.startsWith('image/')) readHandFile(files[0]);

    }



    function handleHandFileSelect(e) {

        const files = e.target.files;

        if (files.length > 0) readHandFile(files[0]);

    }



    function readHandFile(file) {

        const reader = new FileReader();

        reader.onload = function (e) {

            uploadHandData = e.target.result;

            document.getElementById('hand-upload-img').src = uploadHandData;

            document.getElementById('hand-upload-placeholder').classList.add('hidden');

            document.getElementById('hand-upload-preview').classList.remove('hidden');

            updateWomenButton();

        };

        reader.readAsDataURL(file);

    }



    function removeHandUpload() {

        uploadHandData = null;

        document.getElementById('hand-upload-placeholder').classList.remove('hidden');

        document.getElementById('hand-upload-preview').classList.add('hidden');

        document.getElementById('hand-file-input').value = '';

        updateWomenButton();

    }



    function updateWomenButton() {

        const height = parseFloat(document.getElementById('w-height').value);

        const chest = parseFloat(document.getElementById('w-chest').value);

        const waist = parseFloat(document.getElementById('w-waist').value);

        const hip = parseFloat(document.getElementById('w-hip').value);

        const hasRequired = !isNaN(height) && !isNaN(chest) && !isNaN(waist) && !isNaN(hip) && uploadHandData;

        document.getElementById('women-process-btn').disabled = !hasRequired;

    }



    // Listen for input changes on women's required fields

    document.addEventListener('DOMContentLoaded', function () {

        ['w-height', 'w-chest', 'w-waist', 'w-hip'].forEach(function (id) {

            var el = document.getElementById(id);

            if (el) el.addEventListener('input', updateWomenButton);

        });

    });



    function showWomenError(message) {

        const errorEl = document.getElementById('women-error');

        errorEl.querySelector('p').textContent = message;

        errorEl.classList.remove('hidden');

    }



    async function processWomenScan() {

        document.getElementById('women-error').classList.add('hidden');



        const height = parseFloat(document.getElementById('w-height').value);

        const chest = parseFloat(document.getElementById('w-chest').value);

        const waist = parseFloat(document.getElementById('w-waist').value);

        const hip = parseFloat(document.getElementById('w-hip').value);



        var i = window.SCAN_I18N || {};
        if (isNaN(height) || height < 100 || height > 250) {
            showWomenError(i.errorWomenHeight || 'Please enter a valid height between 100 and 250 cm.');
            return;
        }
        if (isNaN(chest)) { showWomenError(i.errorWomenBust || 'Please enter your bust/chest measurement.'); return; }
        if (isNaN(waist)) { showWomenError(i.errorWomenWaist || 'Please enter your waist measurement.'); return; }
        if (isNaN(hip)) { showWomenError(i.errorWomenHip || 'Please enter your hip measurement.'); return; }
        if (!uploadHandData) { showWomenError(i.errorWomenHand || 'Please upload a hand photo for skin tone detection.'); return; }


        const measurements = { height, chest, waist, hip };



        // Add optional fields if provided

        const shoulder = parseFloat(document.getElementById('w-shoulder').value);

        const inseam = parseFloat(document.getElementById('w-inseam').value);

        const arm = parseFloat(document.getElementById('w-arm').value);

        const torso = parseFloat(document.getElementById('w-torso').value);

        if (!isNaN(shoulder)) measurements.shoulder_width = shoulder;

        if (!isNaN(inseam)) measurements.inseam = inseam;

        if (!isNaN(arm)) measurements.arm_length = arm;

        if (!isNaN(torso)) measurements.torso_length = torso;



        document.getElementById('women-loading').classList.remove('hidden');

        document.getElementById('women-process-btn').disabled = true;



        try {

            const response = await fetch('{% url "fitting_system:process_scan_women" %}', {

                method: 'POST',

                headers: { 'Content-Type': 'application/json' },

                body: JSON.stringify({

                    hand_image: uploadHandData,

                    measurements: measurements,

                })

            });



            const data = await response.json();



            if (data.success) {

                window.location.href = `${window.LANG_PREFIX || ''}/recommendations/${data.session_id}/`;

            } else {

                showWomenError(data.error || i.errorProcess || 'Processing failed. Please try again.');
                document.getElementById('women-loading').classList.add('hidden');

                document.getElementById('women-process-btn').disabled = false;

            }

        } catch (error) {

            showWomenError(i.errorNetwork || 'Network error. Please check your connection and try again.');
            document.getElementById('women-loading').classList.add('hidden');

            document.getElementById('women-process-btn').disabled = false;

        }

    }



</script>
{% endblock %}