{% load static i18n %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ATS Form Builder - Vanilla JS</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
    /* Updated CSS styles with a new Teal/Aqua theme */
    :root {
        /* New Color Palette (Teal/Aqua/Deep Blue) */
        --primary: #004a53;      /* Deep Teal/Cyan for main actions */
        --primary-light: #00b4d8; /* Brighter Aqua/Cyan */
        --secondary: #005a78;    /* Darker Teal for hover/accent */
        --success: #00cc99;      /* Bright Greenish-Teal for success */

        --success: #005a78;      /* Bright Greenish-Teal for success */

        /* Neutral Colors (Kept for consistency) */
        --light: #f4fcfc;        /* Very light off-white (slightly blue tinted) */
        --dark: #212529;         /* Near black text */
        --gray: #6c757d;         /* Standard gray text */
        --light-gray: #e0f0f4;   /* Lighter background for hover/disabled */
        --border: #c4d7e0;       /* Lighter, softer border color */

        /* Structural Variables (Kept exactly the same) */
        --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        --radius: 8px;
        --transition: all 0.3s ease;
    }
    /* All other structural and component styles below remain the same,
       but will automatically adopt the new colors defined above. */
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }
    body {
        background-color: #f7f9fb; /* Slightly adjusted body background to match new light tones */
        color: var(--dark);
        line-height: 1.6;
        height: 100vh;
        overflow: hidden;
    }
    .container {
        display: flex;
        height: 100vh;
    }
    /* Sidebar Styles */
    .sidebar {
        width: 280px;
        background: white;
        border-right: 1px solid var(--border);
        padding: 20px;
        overflow-y: auto;
        box-shadow: var(--shadow);
        z-index: 10;
        display: flex;
        flex-direction: column;
    }
    .sidebar-header {
        padding-bottom: 20px;
        margin-bottom: 20px;
        border-bottom: 1px solid var(--border);
        flex-shrink: 0;
    }
    .sidebar-header h2 {
        font-size: 1.5rem;
        color: var(--primary);
        display: flex;
        align-items: center;
        gap: 10px;
    }
    .field-categories {
        flex: 1;
        overflow-y: auto;
    }
    .field-category {
        margin-bottom: 25px;
    }
    .category-title {
        font-size: 1.1rem;
        font-weight: 600;
        margin-bottom: 12px;
        color: var(--gray);
        display: flex;
        align-items: center;
        gap: 8px;
    }
    .field-item {
        background: var(--light);
        border: 1px dashed var(--border);
        border-radius: var(--radius);
        padding: 12px 15px;
        margin-bottom: 10px;
        cursor: grab;
        transition: var(--transition);
        display: flex;
        align-items: center;
        gap: 10px;
    }
    .field-item:hover {
        background: var(--light-gray);
        transform: translateY(-2px);
        border-color: var(--primary-light);
    }
    .field-item i {
        color: var(--primary);
        font-size: 1.2rem;
    }
    .field-item span {
        font-weight: 500;
    }
    /* Main Content Styles */
    .main-content {
        flex: 1;
        display: flex;
        flex-direction: column;
        padding: 20px;
        overflow: hidden;
    }
    .toolbar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 15px;
        padding-bottom: 15px;
        border-bottom: 1px solid var(--border);
        flex-shrink: 0;
    }
    .toolbar h1 {
        font-size: 1.8rem;
        color: var(--primary);
    }
    .btn {
        padding: 10px 20px;
        border-radius: var(--radius);
        border: none;
        font-weight: 600;
        cursor: pointer;
        transition: var(--transition);
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }
    .btn-primary {
        background: var(--primary);
        color: white;
    }
    .btn-primary:hover {
        background: var(--secondary);
    }
    .btn-outline {
        background: transparent;
        border: 1px solid var(--primary);
        color: var(--primary);
    }
    .btn-outline:hover {
        background: var(--primary);
        color: white;
    }
    /* Stage Navigation - Fixed Height with Scroll */
    .stage-nav-container {
        height: 100px;
        overflow-x: scroll;
        overflow-y: hidden;
        padding: 5px;
        margin-bottom: 15px;
        flex-shrink: 0;
        background: white;
        border-radius: var(--radius);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    }
    .stage-nav {
        display: flex;
        min-width: 100%;
        padding: 0 10px;
        white-space: nowrap;
        height:70px;
    }
    .stage-tab {
        padding: 12px 20px;
        background: var(--light);
        border: 1px solid var(--border);
        border-radius: var(--radius) var(--radius) 0 0;
        margin-right: 5px;
        cursor: pointer;
        white-space: nowrap;
        transition: var(--transition);
        position: relative;
        display: flex;
        align-items: center;
        gap: 8px;
        flex-shrink: 0;
    }
    .stage-tab.active {
        background: white;
        border-bottom: 1px solid transparent;
        z-index: 2;
    }
    .stage-tab:hover:not(.active) {
        background: var(--light-gray);
    }
    .stage-tab .rename-btn {
        opacity: 0;
        transition: opacity 0.2s;
    }
    .stage-tab:hover .rename-btn {
        opacity: 1;
    }
    .stage-tab .remove-btn {
        position: absolute;
        right: 8px;
        top: 50%;
        transform: translateY(-50%);
        opacity: 0;
        transition: opacity 0.2s;
    }
    .stage-tab:hover .remove-btn {
        opacity: 1;
    }
    /* Form Builder Area */
    .form-builder-container {
        display: flex;
        gap: 20px;
        flex: 1;
        overflow: hidden;
    }
    .form-builder {
        background: white;
        border-radius: var(--radius);
        box-shadow: var(--shadow);
        flex: 1;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }
    .form-header {
        padding: 20px;
        border-bottom: 1px solid var(--border);
        background: var(--light);
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-shrink: 0;
    }
    .form-header h3 {
        font-size: 1.3rem;
        color: var(--primary);
        display: flex;
        align-items: center;
        gap: 10px;
    }
    .rename-stage-btn {
        background: none;
        border: none;
        color: var(--gray);
        cursor: pointer;
        padding: 5px;
        border-radius: 4px;
        transition: var(--transition);
    }
    .rename-stage-btn:hover {
        background: var(--light-gray);
        color: var(--primary);
    }
    .form-stage {
        padding: 20px;
        min-height: 300px;
        flex: 1;
        overflow-y: auto;
    }
    .form-field {
        background: white;
        border: 1px solid var(--border);
        border-radius: var(--radius);
        padding: 15px;
        margin-bottom: 15px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
        position: relative;
        transition: var(--transition);
        cursor: pointer;
    }
    .form-field:hover {
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        border-color: var(--primary-light);
    }
    .form-field.selected {
        border: 2px solid var(--primary);
        box-shadow: 0 0 0 3px rgba(0, 129, 167, 0.2); /* Used a hardcoded rgba of the new primary color for the shadow */
    }
    .field-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 12px;
    }
    .field-title {
        font-weight: 600;
        color: var(--dark);
        display: flex;
        align-items: center;
        gap: 10px;
    }
    .required-indicator {
        color: #e53935; /* Kept red for error/required status */
        font-weight: bold;
    }
    .field-actions {
        display: flex;
        gap: 8px;
    }
    .action-btn {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--light);
        border: 1px solid var(--border);
        cursor: pointer;
        transition: var(--transition);
    }
    .action-btn:hover {
        background: var(--primary);
        color: white;
        border-color: var(--primary);
    }
    .field-content {
        margin-top: 10px;
    }
    .field-label {
        display: block;
        margin-bottom: 8px;
        font-weight: 500;
    }
    .field-input {
        width: 100%;
        padding: 10px;
        border: 1px solid var(--border);
        border-radius: var(--radius);
        font-size: 1rem;
    }
    .field-input:focus {
        outline: none;
        border-color: var(--primary);
        box-shadow: 0 0 0 3px rgba(0, 129, 167, 0.2); /* Used a hardcoded rgba of the new primary color for the shadow */
    }
    .field-options {
        margin-top: 10px;
    }
    .option-item {
        display: flex;
        align-items: center;
        margin-bottom: 8px;
    }
    .option-item input[type="text"] {
        flex: 1;
        margin-left: 10px;
    }
    .add-option {
        color: var(--primary);
        cursor: pointer;
        font-size: 1rem;
        display: inline-flex;
        align-items: center;
        gap: 5px;
        margin-top: 5px;
    }
    .add-option:hover {
        text-decoration: none;
    }
    /* File Upload Specific Styles */
    .file-upload-area {
        border: 2px dashed var(--border);
        border-radius: var(--radius);
        padding: 30px 20px;
        text-align: center;
        background: var(--light);
        transition: var(--transition);
        cursor: pointer;
    }
    .file-upload-area:hover {
        border-color: var(--primary);
        background: rgba(0, 129, 167, 0.05); /* Used a hardcoded rgba of the new primary color for the background */
    }
    .file-upload-icon {
        font-size: 3rem;
        color: var(--primary);
        margin-bottom: 15px;
    }
    .file-upload-text {
        margin-bottom: 15px;
    }
    .file-upload-text strong {
        color: var(--primary);
    }
    .file-upload-info {
        font-size: 0.9rem;
        color: var(--gray);
        margin-top: 10px;
    }
    .uploaded-file {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: white;
        border: 1px solid var(--border);
        border-radius: var(--radius);
        padding: 10px 15px;
        margin-top: 15px;
    }
    .file-info {
        display: flex;
        align-items: center;
        gap: 10px;
    }
    .file-icon {
        color: var(--primary);
    }
    .file-name {
        font-weight: 500;
    }
    .file-size {
        font-size: 0.85rem;
        color: var(--gray);
    }
    .remove-file-btn {
        background: none;
        border: none;
        color: #e53935;
        cursor: pointer;
        font-size: 1.2rem;
        width: 30px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        transition: var(--transition);
    }
    .remove-file-btn:hover {
        background: #ffebee;
    }
    /* Field Editor Panel */
    .field-editor {
        width: 320px;
        background: white;
        border-radius: var(--radius);
        box-shadow: var(--shadow);
        padding: 20px;
        display: flex;
        flex-direction: column;
        transition: var(--transition);
        flex-shrink: 0;
    }
    .editor-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
        padding-bottom: 15px;
        border-bottom: 1px solid var(--border);
        flex-shrink: 0;
    }
    .editor-header h3 {
        font-size: 1.3rem;
        color: var(--primary);
    }
    .editor-section {
        margin-bottom: 20px;
    }
    .editor-section h4 {
        font-size: 1.1rem;
        margin-bottom: 12px;
        color: var(--gray);
        display: flex;
        align-items: center;
        gap: 8px;
    }
    .form-group {
        margin-bottom: 15px;
    }
    .form-group label {
        display: block;
        margin-bottom: 6px;
        font-weight: 500;
    }
    .form-control {
        width: 100%;
        padding: 10px;
        border: 1px solid var(--border);
        border-radius: var(--radius);
        font-size: 1rem;
    }
    .form-control:focus {
        outline: none;
        border-color: var(--primary);
        box-shadow: 0 0 0 3px rgba(0, 129, 167, 0.2); /* Used a hardcoded rgba of the new primary color for the shadow */
    }
    .checkbox-group {
        display: flex;
        align-items: center;
        gap: 10px;
    }
    .checkbox-group input {
        width: auto;
    }
    .options-list {
        margin-top: 10px;
    }
    .option-input {
        display: flex;
        gap: 10px;
        margin-bottom: 10px;
    }
    .option-input input {
        flex: 1;
    }
    .remove-option {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #ffebee; /* Kept light red for negative action */
        color: #e53935;     /* Kept red for negative action */
        border: none;
        cursor: pointer;
        transition: var(--transition);
    }
    .remove-option:hover {
        background: #e53935;
        color: white;
    }
    /* Drag and Drop Styles */
    .drag-over {
        background-color: rgba(0, 129, 167, 0.1); /* Used a hardcoded rgba of the new primary color */
        border: 2px dashed var(--primary);
    }
    .drag-ghost {
        opacity: 0.5;
    }
    /* Empty State */
    .empty-state {
        text-align: center;
        padding: 40px 20px;
        color: var(--gray);
    }
    .empty-state i {
        font-size: 3rem;
        margin-bottom: 15px;
        color: var(--light-gray);
    }
    /* Stage Rename Modal */
    .modal-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 1000;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease;
    }
    .modal-overlay.active {
        opacity: 1;
        visibility: visible;
    }
    .modal {
        background: white;
        border-radius: var(--radius);
        padding: 25px;
        width: 400px;
        max-width: 90%;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
        transform: scale(0.9);
        transition: transform 0.3s ease;
    }
    .modal-overlay.active .modal {
        transform: scale(1);
    }
    .modal-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
    }
    .modal-header h3 {
        font-size: 1.4rem;
        color: var(--primary);
    }
    .close-modal {
        background: none;
        border: none;
        font-size: 1.5rem;
        cursor: pointer;
        color: var(--gray);
        transition: var(--transition);
    }
    .close-modal:hover {
        color: var(--dark);
    }
    .modal-body {
        margin-bottom: 20px;
    }
    .modal-footer {
        display: flex;
        justify-content: flex-end;
        gap: 10px;
    }
    /* Predefined Stage Indicator */
    .predefined-badge {
        background: var(--success);
        color: white;
        font-size: 0.7rem;
        padding: 2px 6px;
        border-radius: 10px;
        margin-left: 5px;
    }
    /* Form Settings Modal */
    .form-settings-modal .modal {
        width: 500px;
        max-width: 90%;
    }
    /* Responsive */
    @media (max-width: 1100px) {
        .field-editor {
            display: none;
        }
        .form-builder-container {
            flex-direction: column;
        }
    }
    @media (max-width: 768px) {
        .container {
            flex-direction: column;
        }
        .sidebar {
            width: 100%;
            border-right: none;
            border-bottom: 1px solid var(--border);
            height: auto;
            max-height: 40vh;
        }
        .stage-nav-container {
            height: auto;
            max-height: 120px;
        }
        .stage-nav {
            flex-wrap: wrap;
        }
        .stage-tab {
            margin-bottom: 5px;
        }
    }
    .stage-tab.drag-over {
        background-color: rgba(0, 129, 167, 0.1); /* Used a hardcoded rgba of the new primary color */
        border: 2px dashed var(--primary);
    }
</style>
</head>
<body>
    <!-- Pass Django CSRF token and other data -->
    <script>
        // Django template variables - these will be processed by Django
       const djangoConfig = {
        csrfToken: "{{ csrf_token }}",
        saveUrl: "{% url 'save_form_template' %}",
        loadUrl: {% if template_id %}"{% url 'load_form_template' template_id %}"{% else %}null{% endif %},
        templateId: {% if template_id %}{{ template_id }}{% else %}null{% endif %},
        jobId: {% if job_id %}{{ job_id }}{% else %}null{% endif %}  // Add this if you need it
    };
    </script>

    <div class="container">
        <!-- Sidebar with form elements -->
        <div class="sidebar">
            <div class="sidebar-header" style="display: flex; flex-direction: column; align-items: center; justify-content: center;">
                <a href="{% url 'form_templates_list' %}">
                    <img src="{% static 'image/kaauh.jpeg' %}" style="height:100px; width:100px; display: block; margin: 0 auto;">
                </a>
            </div>
            <div class="field-categories">
                <div class="field-category">
                    <div class="category-title">
                        <i class="fas fa-user"></i> Personal Information
                    </div>
                    <div class="field-item" draggable="true" data-type="text" data-label="First Name">
                        <i class="fas fa-font"></i>
                        <span>Text Input</span>
                    </div>
                    <div class="field-item" draggable="true" data-type="email" data-label="Email">
                        <i class="fas fa-envelope"></i>
                        <span>Email</span>
                    </div>
                    <div class="field-item" draggable="true" data-type="phone" data-label="Phone">
                        <i class="fas fa-phone"></i>
                        <span>Phone</span>
                    </div>
                    <div class="field-item" draggable="true" data-type="text" data-label="Address">
                        <i class="fas fa-map-marker-alt"></i>
                        <span>Address</span>
                    </div>
                </div>
                <div class="field-category">
                    <div class="category-title">
                        <i class="fas fa-file-alt"></i> Application Details
                    </div>
                    <div class="field-item" draggable="true" data-type="textarea" data-label="Cover Letter">
                        <i class="fas fa-align-left"></i>
                        <span>Text Area</span>
                    </div>
                    <div class="field-item" draggable="true" data-type="file" data-label="Resume">
                        <i class="fas fa-file-upload"></i>
                        <span>File Upload</span>
                    </div>
                    <div class="field-item" draggable="true" data-type="date" data-label="Available Date">
                        <i class="fas fa-calendar"></i>
                        <span>Date Picker</span>
                    </div>
                </div>
                <div class="field-category">
                    <div class="category-title">
                        <i class="fas fa-list"></i> Selection Fields
                    </div>
                    <div class="field-item" draggable="true" data-type="select" data-label="Position">
                        <i class="fas fa-caret-square-down"></i>
                        <span>Dropdown</span>
                    </div>
                    <div class="field-item" draggable="true" data-type="radio" data-label="Experience Level">
                        <i class="fas fa-dot-circle"></i>
                        <span>Radio Buttons</span>
                    </div>
                    <div class="field-item" draggable="true" data-type="checkbox" data-label="Skills">
                        <i class="fas fa-check-square"></i>
                        <span>Checkboxes</span>
                    </div>
                </div>
                <div class="field-category">
                    <div class="category-title">
                        <i class="fas fa-briefcase"></i> Professional Fields
                    </div>
                    <div class="field-item" draggable="true" data-type="text" data-label="Company">
                        <i class="fas fa-building"></i>
                        <span>Company</span>
                    </div>
                    <div class="field-item" draggable="true" data-type="text" data-label="Position">
                        <i class="fas fa-user-tie"></i>
                        <span>Position</span>
                    </div>
                    <div class="field-item" draggable="true" data-type="text" data-label="Degree">
                        <i class="fas fa-graduation-cap"></i>
                        <span>Degree</span>
                    </div>
                    <div class="field-item" draggable="true" data-type="text" data-label="Institution">
                        <i class="fas fa-school"></i>
                        <span>Institution</span>
                    </div>
                </div>
            </div>
        </div>
        <!-- Main Content Area -->
        <div class="main-content">
            <div class="toolbar">
                <h1 id="formTitle">Resume Application Form</h1>
                <div>
                    <button class="btn btn-outline" id="formSettingsBtn">
                        <i class="fas fa-cog"></i> Settings
                    </button>
                    <button class="btn btn-outline" id="addStageBtn">
                        <i class="fas fa-plus"></i> Add Stage
                    </button>
                    <button class="btn btn-primary" id="saveFormBtn">
                        <i class="fas fa-save"></i> Save Form
                    </button>
                </div>
            </div>
            <!-- Stage Navigation - Fixed Height with Scroll -->
            <div class="stage-nav-container">
                <div class="stage-nav" id="stageNav"></div>
            </div>
            <!-- Form Builder and Editor Container -->
            <div class="form-builder-container">
                <!-- Form Builder Area -->
                <div class="form-builder">
                    <div class="form-header">
                        <h3 id="currentStageTitle">
                            <i class="fas fa-list"></i>
                            <span id="stageNameDisplay">Contact Information</span> Stage
                            <span class="required-indicator" id="stageRequiredIndicator" style="display: none;"> *</span>
                            <span class="predefined-badge" id="stagePredefinedBadge" style="display: none;">Default</span>
                        </h3>
                        <button class="rename-stage-btn" id="renameStageBtn" title="Rename stage">
                            <i class="fas fa-edit"></i>
                        </button>
                    </div>
                    <div
                        class="form-stage"
                        id="formStage"
                    >
                        <div class="empty-state" id="emptyState">
                            <i class="fas fa-cloud-upload-alt"></i>
                            <p>Drag form elements here to build your stage</p>
                        </div>
                    </div>
                </div>
                <!-- Field Editor Panel -->
                <div class="field-editor" id="fieldEditor" style="display: none;">
                    <div class="editor-header">
                        <h3><i class="fas fa-sliders-h"></i> Field Properties</h3>
                        <button class="btn btn-outline" id="closeEditorBtn">Close</button>
                    </div>
                    <div class="editor-section">
                        <div class="form-group">
                            <label for="fieldLabel">Field Label</label>
                            <input
                                type="text"
                                id="fieldLabel"
                                class="form-control"
                                placeholder="Enter field label"
                            >
                        </div>
                        <div class="form-group" id="placeholderGroup">
                            <label for="fieldPlaceholder">Placeholder</label>
                            <input
                                type="text"
                                id="fieldPlaceholder"
                                class="form-control"
                                placeholder="Enter placeholder text"
                            >
                        </div>
                        <div class="form-group">
                            <div class="checkbox-group">
                                <input
                                    type="checkbox"
                                    id="requiredField"
                                >
                                <label for="requiredField">Required Field</label>
                            </div>
                        </div>
                    </div>
                    <!-- Options Editor for Select, Radio, Checkbox -->
                    <div class="editor-section" id="optionsEditor" style="display: none;">
                        <h4><i class="fas fa-list"></i> Options</h4>
                        <div class="options-list" id="optionsList"></div>
                        <button class="add-option" id="addOptionBtn">
                            <i class="fas fa-plus"></i> Add Option
                        </button>
                    </div>
                    <!-- File Type Specific Settings -->
                    <div class="editor-section" id="fileSettings" style="display: none;">
    <h4><i class="fas fa-file"></i> File Settings</h4>
    <div class="form-group">
        <label for="fileTypes">Allowed File Types</label>
        <input
            type="text"
            id="fileTypes"
            class="form-control"
            placeholder=".pdf, .doc, .docx"
        >
    </div>
    <div class="form-group">
        <label for="maxFileSize">Max File Size (MB)</label>
        <input
            type="number"
            id="maxFileSize"
            class="form-control"
            min="1"
            max="100"
            value="5"
        >
    </div>
    <div class="form-group">
        <div class="checkbox-group">
            <input
                type="checkbox"
                id="multipleFiles"
            >
            <label for="multipleFiles">Allow Multiple Files</label>
        </div>
        <small class="form-text text-muted">Enable this to allow uploading multiple files for this field.</small>
    </div>
    <div class="form-group">
        <label for="maxFiles">Maximum Number of Files</label>
        <input
            type="number"
            id="maxFiles"
            class="form-control"
            min="1"
            max="10"
            value="1"
            disabled
        >
        <small class="form-text text-muted">Only applicable when multiple files are allowed.</small>
    </div>
</div>
            </div>
        </div>
    </div>
    <!-- Stage Rename Modal -->
    <div class="modal-overlay" id="renameModal">
        <div class="modal">
            <div class="modal-header">
                <h3>Rename Stage</h3>
                <button class="close-modal" id="closeRenameModal">&times;</button>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label for="stageName">Stage Name</label>
                    <input
                        type="text"
                        id="stageName"
                        class="form-control"
                        placeholder="Enter stage name"
                    >
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-outline" id="cancelRenameBtn">Cancel</button>
                <button class="btn btn-primary" id="saveRenameBtn">Save</button>
            </div>
        </div>
    </div>
    <!-- Form Settings Modal -->
    <div class="modal-overlay form-settings-modal" id="formSettingsModal">
        <div class="modal">
            <div class="modal-header">
                <h3>Form Settings</h3>
                <button class="close-modal" id="closeFormSettingsModal">&times;</button>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label for="formName" class="form-label">Form Name</label>
                    <input type="text" id="formName" class="form-control" placeholder="Enter form name">
                </div>
                <div class="form-group">
                    <label for="formDescription" class="form-label">Form Description</label>
                    <textarea id="formDescription" class="form-control" rows="3" placeholder="Enter form description"></textarea>
                </div>
                <div class="form-group">
                    <div class="checkbox-group">
                        <input type="checkbox" id="formActive">
                        <label for="formActive">Active Form</label>
                    </div>
                    <small class="form-text text-muted">When active, this form will be available for applicants to fill out.</small>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-outline" id="cancelFormSettingsBtn">Cancel</button>
                <button class="btn btn-primary" id="saveFormSettingsBtn">Save</button>
            </div>
        </div>
    </div>
    <script>
        // Application State
        const state = {
            draggedStageIndex: null,
            formName: 'Resume Application Form',
            formDescription: '',
            formActive: true,
            stages: [
                {
                    id: 1,
                    name: 'Contact Information',
                    predefined: true,
                    fields: [
                        { id: 1, type: 'text', label: 'Full Name', placeholder: 'Enter your full name', required: true, predefined: true },
                        { id: 2, type: 'email', label: 'Email Address', placeholder: 'Enter your email', required: true, predefined: true },
                        { id: 3, type: 'phone', label: 'Phone Number', placeholder: 'Enter your phone number', required: true, predefined: true },
                        { id: 4, type: 'text', label: 'Address', placeholder: 'Enter your address', required: false, predefined: true },
                        {
                            id: 26,
                            type: 'file',
                            label: 'Resume Upload',
                            required: true,
                            predefined: true,
                            fileTypes: '.pdf,.doc,.docx',
                            maxFileSize: 5,
                            uploadedFile: null
                        }
                    ]
                },
                {
                    id: 2,
                    name: 'Resume Objective',
                    predefined: true,
                    fields: [
                        { id: 5, type: 'textarea', label: 'Career Objective', placeholder: 'Describe your career goals and what you hope to achieve', required: false, predefined: true }
                    ]
                },
                {
                    id: 3,
                    name: 'Education',
                    predefined: true,
                    fields: [
                        { id: 6, type: 'text', label: 'Degree', placeholder: 'e.g., Bachelor of Science in Computer Science', required: true, predefined: true },
                        { id: 7, type: 'text', label: 'Institution', placeholder: 'Name of your university or school', required: true, predefined: true },
                        { id: 8, type: 'text', label: 'Location', placeholder: 'City, State', required: false, predefined: true },
                        { id: 9, type: 'date', label: 'Graduation Date', placeholder: 'MM/YYYY', required: false, predefined: true }
                    ]
                },
                {
                    id: 4,
                    name: 'Experience',
                    predefined: true,
                    fields: [
                        { id: 10, type: 'text', label: 'Position Title', placeholder: 'e.g., Software Engineer', required: true, predefined: true },
                        { id: 11, type: 'text', label: 'Company Name', placeholder: 'Name of the company', required: true, predefined: true },
                        { id: 12, type: 'text', label: 'Location', placeholder: 'City, State', required: false, predefined: true },
                        { id: 13, type: 'date', label: 'Start Date', placeholder: 'MM/YYYY', required: true, predefined: true },
                        { id: 14, type: 'date', label: 'End Date', placeholder: 'MM/YYYY or Present', required: true, predefined: true },
                        { id: 15, type: 'textarea', label: 'Responsibilities & Achievements', placeholder: 'Describe your key responsibilities and achievements', required: false, predefined: true }
                    ]
                },
                {
                    id: 5,
                    name: 'Skills',
                    predefined: true,
                    fields: [
                        { id: 16, type: 'checkbox', label: 'Technical Skills', options: ['Programming Languages', 'Frameworks', 'Tools & Technologies'], required: false, predefined: true }
                    ]
                },
                {
                    id: 6,
                    name: 'Summary',
                    predefined: true,
                    fields: [
                        { id: 17, type: 'textarea', label: 'Professional Summary', placeholder: 'Brief overview of your professional background and key qualifications', required: false, predefined: true }
                    ]
                },
                {
                    id: 7,
                    name: 'Certifications',
                    predefined: true,
                    fields: [
                        { id: 18, type: 'text', label: 'Certification Name', placeholder: 'e.g., AWS Certified Solutions Architect', required: false, predefined: true },
                        { id: 19, type: 'text', label: 'Issuing Organization', placeholder: 'Name of the certifying body', required: false, predefined: true },
                        { id: 20, type: 'date', label: 'Issue Date', placeholder: 'MM/YYYY', required: false, predefined: true },
                        { id: 21, type: 'date', label: 'Expiration Date', placeholder: 'MM/YYYY or N/A', required: false, predefined: true }
                    ]
                },
                {
                    id: 8,
                    name: 'Awards and Recognitions',
                    predefined: true,
                    fields: [
                        { id: 22, type: 'text', label: 'Award Name', placeholder: 'Name of the award or recognition', required: false, predefined: true },
                        { id: 23, type: 'text', label: 'Issuing Organization', placeholder: 'Who gave you this award?', required: false, predefined: true },
                        { id: 24, type: 'date', label: 'Date Received', placeholder: 'MM/YYYY', required: false, predefined: true },
                        { id: 25, type: 'textarea', label: 'Description', placeholder: 'Brief description of the award and why you received it', required: false, predefined: true }
                    ]
                }
            ],
            currentStage: 0,
            nextFieldId: 27,
            nextStageId: 9,
            selectedField: null,
            draggedField: null,
            draggedFieldIndex: null,
            templateId: djangoConfig.templateId // Initialize with Django template ID if editing
        };

        function allowStageDrop(event) {
            event.preventDefault();
        }
        function dragStageEnter(event) {
            event.target.classList.add('drag-over');
        }

        function dragStageLeave(event) {
            event.target.classList.remove('drag-over');
        }

        function startStageDrag(event, index) {
            state.draggedStageIndex = index;
            event.dataTransfer.setData('text/plain', 'stage-reorder');
            event.dataTransfer.effectAllowed = 'move';
        }
        function dropStage(event, targetIndex) {
            event.preventDefault();
            event.target.classList.remove('drag-over');

            if (state.draggedStageIndex !== null && state.draggedStageIndex !== targetIndex) {
                const draggedStage = state.stages[state.draggedStageIndex];
                state.stages.splice(state.draggedStageIndex, 1);

                // Adjust target index if we removed an element before it
                const adjustedIndex = state.draggedStageIndex < targetIndex ? targetIndex - 1 : targetIndex;
                state.stages.splice(adjustedIndex, 0, draggedStage);

                // Update current stage if needed
                if (state.currentStage === state.draggedStageIndex) {
                    state.currentStage = adjustedIndex;
                } else if (state.currentStage > state.draggedStageIndex && state.currentStage <= adjustedIndex) {
                    state.currentStage--;
                } else if (state.currentStage < state.draggedStageIndex && state.currentStage >= adjustedIndex) {
                    state.currentStage++;
                }

                renderStageNavigation();
                renderCurrentStage();
            }

            state.draggedStageIndex = null;
        }
        // DOM Elements
const elements = {
    stageNav: document.getElementById('stageNav'),
    formStage: document.getElementById('formStage'),
    emptyState: document.getElementById('emptyState'),
    fieldEditor: document.getElementById('fieldEditor'),
    currentStageTitle: document.getElementById('currentStageTitle'),
    stageNameDisplay: document.getElementById('stageNameDisplay'),
    stageRequiredIndicator: document.getElementById('stageRequiredIndicator'),
    stagePredefinedBadge: document.getElementById('stagePredefinedBadge'),
    addStageBtn: document.getElementById('addStageBtn'),
    saveFormBtn: document.getElementById('saveFormBtn'),
    renameStageBtn: document.getElementById('renameStageBtn'),
    renameModal: document.getElementById('renameModal'),
    stageName: document.getElementById('stageName'),
    closeRenameModal: document.getElementById('closeRenameModal'),
    cancelRenameBtn: document.getElementById('cancelRenameBtn'),
    saveRenameBtn: document.getElementById('saveRenameBtn'),
    fieldLabel: document.getElementById('fieldLabel'),
    fieldPlaceholder: document.getElementById('fieldPlaceholder'),
    placeholderGroup: document.getElementById('placeholderGroup'),
    requiredField: document.getElementById('requiredField'),
    optionsEditor: document.getElementById('optionsEditor'),
    optionsList: document.getElementById('optionsList'),
    addOptionBtn: document.getElementById('addOptionBtn'),
    fileSettings: document.getElementById('fileSettings'),
    fileTypes: document.getElementById('fileTypes'),
    maxFileSize: document.getElementById('maxFileSize'),
    multipleFiles: document.getElementById('multipleFiles'),
    maxFiles: document.getElementById('maxFiles'),
    closeEditorBtn: document.getElementById('closeEditorBtn'),
    // Form settings elements
    formTitle: document.getElementById('formTitle'),
    formSettingsBtn: document.getElementById('formSettingsBtn'),
    formSettingsModal: document.getElementById('formSettingsModal'),
    formName: document.getElementById('formName'),
    formDescription: document.getElementById('formDescription'),
    formActive: document.getElementById('formActive'),
    closeFormSettingsModal: document.getElementById('closeFormSettingsModal'),
    cancelFormSettingsBtn: document.getElementById('cancelFormSettingsBtn'),
    saveFormSettingsBtn: document.getElementById('saveFormSettingsBtn')
};
        // Utility Functions
        function getFieldIcon(type) {
            const icons = {
                'text': 'fas fa-font',
                'email': 'fas fa-envelope',
                'phone': 'fas fa-phone',
                'textarea': 'fas fa-align-left',
                'file': 'fas fa-file-upload',
                'date': 'fas fa-calendar',
                'select': 'fas fa-caret-square-down',
                'radio': 'fas fa-dot-circle',
                'checkbox': 'fas fa-check-square'
            };
            return icons[type] || 'fas fa-question';
        }

        function hasRequiredFields(stage) {
            return stage.fields.some(field => field.required);
        }

        function formatFileSize(bytes) {
            if (bytes === 0) return '0 Bytes';
            const k = 1024;
            const sizes = ['Bytes', 'KB', 'MB', 'GB'];
            const i = Math.floor(Math.log(bytes) / Math.log(k));
            return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
        }

        // API Functions
        async function saveFormTemplate() {
    const formData = {
        name: state.formName,
        description: state.formDescription,
        is_active: state.formActive,
        template_id: state.templateId,
        stages: state.stages.map(stage => ({
            name: stage.name,
            predefined: stage.predefined,
            fields: stage.fields.map(field => ({
                type: field.type,
                label: field.label,
                placeholder: field.placeholder || '',
                required: field.required || false,
                options: field.options || [],
                fileTypes: field.fileTypes || '',
                maxFileSize: field.maxFileSize || 5,
                predefined: field.predefined
            }))
        }))
    };

    // If there's a job_id in the Django context, include it
    if (djangoConfig.jobId) {
        formData.job = djangoConfig.jobId;
    }

    try {
        const response = await fetch(djangoConfig.saveUrl, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRFToken': djangoConfig.csrfToken,
                'X-Requested-With': 'XMLHttpRequest'
            },
            body: JSON.stringify(formData)
        });

        const result = await response.json();

        if (result.success) {
            state.templateId = result.template_id;
            window.location.href = "{% url 'form_templates_list' %}";

        } else {
            alert('Error saving form template: ' + result.error);
        }
    } catch (error) {
        console.error('Error:', error);
        alert('Error saving form template. Please try again.');
    }
}
        // Load existing template if editing
        async function loadExistingTemplate() {
    if (djangoConfig.loadUrl) {
        try {
            const response = await fetch(djangoConfig.loadUrl);
            const result = await response.json();
            if (result.success) {
                const templateData = result.template;
                // Set form settings
                state.formName = templateData.name || 'Untitled Form';
                state.formDescription = templateData.description || '';
                state.formActive = templateData.is_active !== false;

                // Update form title
                elements.formTitle.textContent = state.formName;
                elements.formName.value = state.formName;
                elements.formDescription.value = state.formDescription;
                elements.formActive.checked = state.formActive;

                // Set stages (this is where your actual stages come from)
                state.stages = templateData.stages;
                state.templateId = templateData.id;

                // Update next IDs to avoid conflicts
                let maxFieldId = 0;
                let maxStageId = 0;
                templateData.stages.forEach(stage => {
                    maxStageId = Math.max(maxStageId, stage.id);
                    stage.fields.forEach(field => {
                        maxFieldId = Math.max(maxFieldId, field.id);
                    });
                });
                state.nextFieldId = maxFieldId + 1;
                state.nextStageId = maxStageId + 1;
                state.currentStage = 0;

                // Now show the form content
                elements.formStage.style.display = 'block';
                elements.emptyState.style.display = 'none';

                renderStageNavigation();
                renderCurrentStage();
            }
        } catch (error) {
            console.error('Error loading template:', error);
            elements.formTitle.textContent = 'Error Loading Template';
            elements.emptyState.style.display = 'block';
            elements.emptyState.innerHTML = '<i class="fas fa-exclamation-triangle"></i><p>Error loading template data.</p>';
            elements.formStage.style.display = 'none';
        }
    }
}

        // DOM Rendering Functions (same as before)
        function renderStageNavigation() {
    elements.stageNav.innerHTML = '';
    state.stages.forEach((stage, index) => {
        const stageTab = document.createElement('div');
        stageTab.className = `stage-tab ${index === state.currentStage ? 'active' : ''}`;
        stageTab.dataset.index = index;

        // Make stage tabs draggable
        stageTab.draggable = true;
        stageTab.addEventListener('dragstart', (e) => startStageDrag(e, index));
        stageTab.addEventListener('dragover', allowStageDrop);
        stageTab.addEventListener('dragenter', dragStageEnter);
        stageTab.addEventListener('dragleave', dragStageLeave);
        stageTab.addEventListener('drop', (e) => dropStage(e, index));

        stageTab.innerHTML = `
            ${stage.name}
            ${hasRequiredFields(stage) ? '<span class="required-indicator"> *</span>' : ''}
            ${stage.predefined ? '<span class="predefined-badge">Default</span>' : ''}
            <span class="rename-btn"><i class="fas fa-edit"></i></span>
            ${(!stage.predefined || state.stages.length > 1) ? '<span class="remove-btn"><i class="fas fa-times"></i></span>' : ''}
        `;

        stageTab.addEventListener('click', (e) => {
            if (!e.target.closest('.rename-btn') && !e.target.closest('.remove-btn')) {
                state.currentStage = index;
                renderCurrentStage();
                renderStageNavigation();
            }
        });

        const renameBtn = stageTab.querySelector('.rename-btn');
        if (renameBtn) {
            renameBtn.addEventListener('click', (e) => {
                e.stopPropagation();
                openRenameModal(stage);
            });
        }

        const removeBtn = stageTab.querySelector('.remove-btn');
        if (removeBtn) {
            removeBtn.addEventListener('click', (e) => {
                e.stopPropagation();
                removeStage(index);
            });
        }

        elements.stageNav.appendChild(stageTab);
    });
}

        function renderCurrentStage() {
            const currentStage = state.stages[state.currentStage];
            elements.stageNameDisplay.textContent = currentStage.name;
            elements.stageRequiredIndicator.style.display = hasRequiredFields(currentStage) ? 'inline' : 'none';
            elements.stagePredefinedBadge.style.display = currentStage.predefined ? 'inline' : 'none';
            elements.formStage.innerHTML = '';
            if (currentStage.fields.length === 0) {
                elements.emptyState.style.display = 'block';
                elements.formStage.appendChild(elements.emptyState);
            } else {
                elements.emptyState.style.display = 'none';
                currentStage.fields.forEach((field, index) => {
                    const fieldElement = createFieldElement(field, index);
                    elements.formStage.appendChild(fieldElement);
                });
            }
        }

        function createFieldElement(field, index) {
    const fieldDiv = document.createElement('div');
    fieldDiv.className = `form-field ${state.selectedField && state.selectedField.id === field.id ? 'selected' : ''}`;
    fieldDiv.dataset.fieldId = field.id;
    fieldDiv.dataset.fieldIndex = index;

    const fieldHeader = document.createElement('div');
    fieldHeader.className = 'field-header';
    fieldHeader.innerHTML = `
        <div class="field-title">
            <i class="${getFieldIcon(field.type)}"></i>
            ${field.label || field.type.charAt(0).toUpperCase() + field.type.slice(1)}
            ${field.required ? '<span class="required-indicator"> *</span>' : ''}
        </div>
        <div class="field-actions">
            <div class="action-btn edit-field" data-field-id="${field.id}">
                <i class="fas fa-edit"></i>
            </div>
            ${!field.predefined ? `<div class="action-btn remove-field" data-field-index="${index}">
                <i class="fas fa-trash"></i>
            </div>` : ''}
        </div>
    `;

    const fieldContent = document.createElement('div');
    fieldContent.className = 'field-content';
    fieldContent.innerHTML = `
        <label class="field-label">
            ${field.label || 'Field Label'}
            ${field.required ? '<span class="required-indicator"> *</span>' : ''}
        </label>
    `;

    // Add field input based on type
    if (field.type === 'text' || field.type === 'email' || field.type === 'phone' || field.type === 'date') {
        const input = document.createElement('input');
        input.type = 'text';
        input.className = 'field-input';
        input.placeholder = field.placeholder || 'Enter value';
        input.disabled = true;
        fieldContent.appendChild(input);
    } else if (field.type === 'textarea') {
        const textarea = document.createElement('textarea');
        textarea.className = 'field-input';
        textarea.rows = 3;
        textarea.placeholder = field.placeholder || 'Enter text';
        textarea.disabled = true;
        fieldContent.appendChild(textarea);
    } else if (field.type === 'file') {
        const fileUpload = document.createElement('div');
        fileUpload.className = 'file-upload-area';
        fileUpload.innerHTML = `
            <div class="file-upload-icon">
                <i class="fas fa-cloud-upload-alt"></i>
            </div>
            <div class="file-upload-text">
                <p>Drag & drop your ${field.label.toLowerCase()} here or <strong>click to browse</strong></p>
            </div>
            <div class="file-upload-info">
                <p>Supported formats: ${field.fileTypes || '.pdf, .doc, .docx'} (Max ${field.maxFileSize || 5}MB)</p>
                ${field.multipleFiles ? `<p>Multiple files allowed (Max ${field.maxFiles || 1} files)</p>` : ''}
            </div>
            <input type="file" class="file-input" style="display: none;"
                   accept="${field.fileTypes || '.pdf,.doc,.docx'}"
                   ${field.multipleFiles ? 'multiple' : ''}>
        `;

        // Show uploaded files
        if (field.uploadedFiles && field.uploadedFiles.length > 0) {
            field.uploadedFiles.forEach((file, fileIndex) => {
                const uploadedFile = document.createElement('div');
                uploadedFile.className = 'uploaded-file';
                uploadedFile.innerHTML = `
                    <div class="file-info">
                        <i class="fas fa-file file-icon"></i>
                        <div>
                            <div class="file-name">${file.name}</div>
                            <div class="file-size">${formatFileSize(file.size)}</div>
                        </div>
                    </div>
                    <button class="remove-file-btn" data-file-index="${fileIndex}">
                        <i class="fas fa-times"></i>
                    </button>
                `;
                fileUpload.appendChild(uploadedFile);
            });
        }
        fieldContent.appendChild(fileUpload);
    } else if (field.type === 'select') {
        const select = document.createElement('select');
        select.className = 'field-input';
        select.disabled = true;
        field.options.forEach(option => {
            const optionEl = document.createElement('option');
            optionEl.textContent = option;
            select.appendChild(optionEl);
        });
        fieldContent.appendChild(select);
    } else if (field.type === 'radio' || field.type === 'checkbox') {
        const optionsDiv = document.createElement('div');
        optionsDiv.className = 'field-options';
        field.options.forEach((option, idx) => {
            const optionItem = document.createElement('div');
            optionItem.className = 'option-item';
            optionItem.innerHTML = `
                <input type="${field.type === 'radio' ? 'radio' : 'checkbox'}"
                       id="${field.type}-${field.id}-${idx}"
                       name="${field.type}-${field.id}"
                       disabled>
                <label for="${field.type}-${field.id}-${idx}">${option}</label>
            `;
            optionsDiv.appendChild(optionItem);
        });
        fieldContent.appendChild(optionsDiv);
    }

    fieldDiv.appendChild(fieldHeader);
    fieldDiv.appendChild(fieldContent);

    // Add event listeners
    fieldDiv.addEventListener('click', (e) => {
        if (!e.target.closest('.edit-field') && !e.target.closest('.remove-field') &&
            !e.target.closest('.remove-file-btn')) {
            selectField(field);
        }
    });

    const editBtn = fieldDiv.querySelector('.edit-field');
    if (editBtn) {
        editBtn.addEventListener('click', (e) => {
            e.stopPropagation();
            selectField(field);
        });
    }

    const removeBtn = fieldDiv.querySelector('.remove-field');
    if (removeBtn) {
        removeBtn.addEventListener('click', (e) => {
            e.stopPropagation();
            removeField(parseInt(removeBtn.dataset.fieldIndex));
        });
    }

    const removeFileBtns = fieldDiv.querySelectorAll('.remove-file-btn');
    removeFileBtns.forEach(btn => {
        btn.addEventListener('click', (e) => {
            e.stopPropagation();
            const fileIndex = parseInt(btn.dataset.fileIndex);
            const fieldId = parseInt(fieldDiv.dataset.fieldId);
            const stage = state.stages[state.currentStage];
            const field = stage.fields.find(f => f.id === fieldId);
            if (field && field.uploadedFiles) {
                field.uploadedFiles.splice(fileIndex, 1);
                renderCurrentStage();
            }
        });
    });

    // Make draggable for reordering
    fieldDiv.draggable = true;
    fieldDiv.addEventListener('dragstart', (e) => {
        state.draggedFieldIndex = parseInt(fieldDiv.dataset.fieldIndex);
        e.dataTransfer.setData('text/plain', 'reorder');
        e.dataTransfer.effectAllowed = 'move';
    });
    fieldDiv.addEventListener('dragover', (e) => {
        e.preventDefault();
    });
    fieldDiv.addEventListener('drop', (e) => {
        e.preventDefault();
        const targetIndex = parseInt(fieldDiv.dataset.fieldIndex);
        dropField(targetIndex);
    });

    // Add file input event listener
    const fileInput = fieldDiv.querySelector('.file-input');
    if (fileInput) {
        // Remove any existing listeners to prevent duplicates
        const newFileInput = fileInput.cloneNode(true);
        fileInput.parentNode.replaceChild(newFileInput, fileInput);

        newFileInput.addEventListener('change', (e) => {
            handleFileUpload(e, field);
        });

        // Make the file upload area clickable
        const fileUploadArea = fieldDiv.querySelector('.file-upload-area');
        if (fileUploadArea) {
            // Remove any existing listeners
            const newFileUploadArea = fileUploadArea.cloneNode(true);
            fileUploadArea.parentNode.replaceChild(newFileUploadArea, fileUploadArea);

            newFileUploadArea.addEventListener('click', () => {
                newFileInput.click();
            });
        }
    }

    return fieldDiv;
}

function handleFileUpload(event, field) {
    const files = Array.from(event.target.files);
    if (files.length === 0) return;

    // Validate file count for multiple files
    if (field.multipleFiles) {
        const maxFiles = field.maxFiles || 1;
        if (files.length > maxFiles) {
            alert(`You can only upload ${maxFiles} files for this field.`);
            return;
        }
    } else if (files.length > 1) {
        // For single file fields, only take the first file
        files.splice(1);
    }

    // Validate each file
    const validFiles = [];
    const allowedTypes = (field.fileTypes || '.pdf,.doc,.docx').split(',').map(type => type.trim().toLowerCase());
    const maxFileSize = field.maxFileSize || 5;

    for (const file of files) {
        // Validate file type
        const fileType = '.' + file.name.split('.').pop().toLowerCase();
        if (!allowedTypes.includes(fileType)) {
            alert(`Invalid file type for ${file.name}. Allowed types: ${field.fileTypes || '.pdf, .doc, .docx'}`);
            return;
        }

        // Validate file size
        const fileSizeMB = file.size / (1024 * 1024);
        if (fileSizeMB > maxFileSize) {
            alert(`File ${file.name} exceeds ${maxFileSize}MB limit.`);
            return;
        }

        validFiles.push(file);
    }

    // Store the files
    if (field.multipleFiles) {
        // Initialize or update the uploadedFiles array
        if (!field.uploadedFiles) {
            field.uploadedFiles = [];
        }
        field.uploadedFiles = [...validFiles];
    } else {
        // Single file - store as array with one file for consistency
        field.uploadedFiles = [validFiles[0]];
    }

    // Re-render the current stage to show uploaded files
    renderCurrentStage();
}

        function showFieldEditor(field) {
            elements.fieldEditor.style.display = 'flex';
            elements.fieldLabel.value = field.label || '';
            elements.fieldPlaceholder.value = field.placeholder || '';
            elements.placeholderGroup.style.display = field.type !== 'file' ? 'block' : 'none';
            elements.requiredField.checked = field.required || false;
            // Show/hide options editor
            const showOptions = field.type === 'select' || field.type === 'radio' || field.type === 'checkbox';
            elements.optionsEditor.style.display = showOptions ? 'block' : 'none';
            if (showOptions) {
                renderOptionsEditor(field);
            }
            // Show/hide file settings
            const showFileSettings = field.type === 'file';
            elements.fileSettings.style.display = showFileSettings ? 'block' : 'none';
            if (showFileSettings) {
                elements.fileTypes.value = field.fileTypes || '.pdf,.doc,.docx';
                elements.maxFileSize.value = field.maxFileSize || 5;
            }
        }

        function renderOptionsEditor(field) {
    elements.optionsList.innerHTML = '';
    field.options.forEach((option, index) => {
        const optionInput = document.createElement('div');
        optionInput.className = 'option-input';
        optionInput.innerHTML = `
            <input type="text" class="form-control" value="${option}" placeholder="Option ${index + 1}">
            <button class="remove-option">
                <i class="fas fa-times"></i>
            </button>
        `;
        elements.optionsList.appendChild(optionInput);

        const input = optionInput.querySelector('input');
        const removeBtn = optionInput.querySelector('.remove-option');

        input.addEventListener('input', () => {
            field.options[index] = input.value;
        });

        removeBtn.addEventListener('click', () => {
            if (field.options.length > 1) {
                field.options.splice(index, 1);
                renderOptionsEditor(field);
            }
        });
    });

    // Add event listener for multiple files checkbox if this is a file field
    if (field.type === 'file') {
        const multipleFilesCheckbox = elements.multipleFiles;
        if (multipleFilesCheckbox) {
            multipleFilesCheckbox.addEventListener('change', function() {
                elements.maxFiles.disabled = !this.checked;
                if (!this.checked) {
                    elements.maxFiles.value = 1;
                    // Update the field configuration
                    if (state.selectedField) {
                        state.selectedField.maxFiles = 1;
                    }
                }
            });
        }
    }
}


        // Event Handlers (same as before, but updated saveForm function)
        function selectField(field) {
            state.selectedField = field;
            showFieldEditor(field);
            // Update UI to show selected field
            document.querySelectorAll('.form-field').forEach(el => {
                el.classList.remove('selected');
            });
            const selectedEl = document.querySelector(`[data-field-id="${field.id}"]`);
            if (selectedEl) {
                selectedEl.classList.add('selected');
            }
        }

        function clearSelection() {
            state.selectedField = null;
            elements.fieldEditor.style.display = 'none';
            document.querySelectorAll('.form-field').forEach(el => {
                el.classList.remove('selected');
            });
        }

        function addStage() {
            const newStage = {
                id: state.nextStageId++,
                name: `Custom Stage ${state.stages.filter(s => !s.predefined).length + 1}`,
                predefined: false,
                fields: []
            };
            state.stages.push(newStage);
            state.currentStage = state.stages.length - 1;
            renderStageNavigation();
            renderCurrentStage();
        }

        function removeStage(index) {
            const predefinedStages = state.stages.filter(s => s.predefined).length;
            const isPredefined = state.stages[index].predefined;
            if (isPredefined && predefinedStages <= 1 && state.stages.length === 1) {
                return;
            }
            if (!isPredefined || state.stages.length > 1) {
                state.stages.splice(index, 1);
                if (state.currentStage >= state.stages.length) {
                    state.currentStage = state.stages.length - 1;
                }
                renderStageNavigation();
                renderCurrentStage();
            }
        }

        function removeField(index) {
            const currentStage = state.stages[state.currentStage];
            if (!currentStage.fields[index].predefined) {
                currentStage.fields.splice(index, 1);
                if (state.selectedField && state.selectedField.id === currentStage.fields[index]?.id) {
                    clearSelection();
                }
                renderCurrentStage();
            }
        }

        function openRenameModal(stage) {
            elements.stageName.value = stage.name;
            elements.renameModal.classList.add('active');
            elements.stageName.focus();
            // Store reference to the stage being renamed
            elements.renameModal.dataset.stageId = stage.id;
        }

        function closeRenameModal() {
            elements.renameModal.classList.remove('active');
        }

        function saveStageName() {
            const stageId = parseInt(elements.renameModal.dataset.stageId);
            const newName = elements.stageName.value.trim();
            if (newName === '') {
                alert('Stage name cannot be empty');
                return;
            }
            const stage = state.stages.find(s => s.id === stageId);
            if (stage) {
                stage.name = newName;
                renderStageNavigation();
                renderCurrentStage();
            }
            closeRenameModal();
        }

        // Form Settings Modal Handlers
        function openFormSettingsModal() {
            elements.formName.value = state.formName;
            elements.formDescription.value = state.formDescription;
            elements.formActive.checked = state.formActive;
            elements.formSettingsModal.classList.add('active');
        }

        function closeFormSettingsModal() {
            elements.formSettingsModal.classList.remove('active');
        }

        function saveFormSettings() {
            const newName = elements.formName.value.trim();
            if (newName === '') {
                alert('Form name cannot be empty');
                return;
            }

            state.formName = newName;
            state.formDescription = elements.formDescription.value;
            state.formActive = elements.formActive.checked;

            // Update the form title in the header
            elements.formTitle.textContent = state.formName;

            closeFormSettingsModal();
        }

        // Updated saveForm function to use Django API
        function saveForm() {
            saveFormTemplate();
        }

        // Drag and Drop Handlers (same as before)
        function startDrag(event, type, label) {
            state.draggedField = { type, label };
            event.dataTransfer.setData('text/plain', 'field');
            event.dataTransfer.effectAllowed = 'copy';
        }

        function allowDrop(event) {
            event.preventDefault();
        }

        function dragEnter(event) {
            event.target.classList.add('drag-over');
        }

        function dragLeave(event) {
            event.target.classList.remove('drag-over');
        }

        function drop(event) {
    event.preventDefault();
    event.target.classList.remove('drag-over');

    if (state.draggedField) {
        const newField = {
            id: state.nextFieldId++,
            type: state.draggedField.type,
            label: state.draggedField.label,
            placeholder: '',
            required: false,
            options: state.draggedField.type === 'select' || state.draggedField.type === 'radio' || state.draggedField.type === 'checkbox'
                ? ['Option 1', 'Option 2']
                : [],
            fileTypes: state.draggedField.type === 'file' ? '.pdf,.doc,.docx' : '',
            maxFileSize: state.draggedField.type === 'file' ? 5 : 0,
            multipleFiles: state.draggedField.type === 'file' ? false : undefined,
            maxFiles: state.draggedField.type === 'file' ? 1 : undefined,
            predefined: false,
            uploadedFiles: state.draggedField.type === 'file' ? [] : undefined
        };

        state.stages[state.currentStage].fields.push(newField);
        selectField(newField);
        state.draggedField = null;
        renderCurrentStage();
    }
}

        function dropField(targetIndex) {
            if (state.draggedFieldIndex !== null && state.draggedFieldIndex !== targetIndex) {
                const currentStage = state.stages[state.currentStage];
                const draggedField = currentStage.fields[state.draggedFieldIndex];
                currentStage.fields.splice(state.draggedFieldIndex, 1);
                const adjustedIndex = state.draggedFieldIndex < targetIndex ? targetIndex - 1 : targetIndex;
                currentStage.fields.splice(adjustedIndex, 0, draggedField);
                renderCurrentStage();
            }
            state.draggedFieldIndex = null;
        }

        // Initialize Event Listeners
        function initEventListeners() {
    // Wait for DOM to be fully loaded
    setTimeout(() => {
        // Sidebar drag start - ensure elements exist
        const fieldItems = document.querySelectorAll('.field-item');
        fieldItems.forEach(item => {
            if (!item.hasAttribute('data-drag-initialized')) {
                item.addEventListener('dragstart', (e) => {
                    const type = item.dataset.type;
                    const label = item.dataset.label;
                    startDrag(e, type, label);
                });
                item.setAttribute('data-drag-initialized', 'true');
            }
        });

        // Form stage drop zone
        if (elements.formStage) {
            elements.formStage.addEventListener('drop', drop);
            elements.formStage.addEventListener('dragover', allowDrop);
            elements.formStage.addEventListener('dragenter', dragEnter);
            elements.formStage.addEventListener('dragleave', dragLeave);
            elements.formStage.addEventListener('click', clearSelection);
        }

        // Button events
        if (elements.addStageBtn) {
            elements.addStageBtn.addEventListener('click', addStage);
        }
        if (elements.saveFormBtn) {
            elements.saveFormBtn.addEventListener('click', saveForm);
        }
        if (elements.renameStageBtn) {
            elements.renameStageBtn.addEventListener('click', () => {
                if (state.stages[state.currentStage]) {
                    openRenameModal(state.stages[state.currentStage]);
                }
            });
        }

        // Form settings button
        if (elements.formSettingsBtn) {
            elements.formSettingsBtn.addEventListener('click', openFormSettingsModal);
        }

        // Modal events - Stage Rename
        if (elements.closeRenameModal) {
            elements.closeRenameModal.addEventListener('click', closeRenameModal);
        }
        if (elements.cancelRenameBtn) {
            elements.cancelRenameBtn.addEventListener('click', closeRenameModal);
        }
        if (elements.saveRenameBtn) {
            elements.saveRenameBtn.addEventListener('click', saveStageName);
        }
        if (elements.renameModal) {
            elements.renameModal.addEventListener('click', (e) => {
                if (e.target === elements.renameModal) {
                    closeRenameModal();
                }
            });
        }

        // Form settings modal events
        if (elements.closeFormSettingsModal) {
            elements.closeFormSettingsModal.addEventListener('click', closeFormSettingsModal);
        }
        if (elements.cancelFormSettingsBtn) {
            elements.cancelFormSettingsBtn.addEventListener('click', closeFormSettingsModal);
        }
        if (elements.saveFormSettingsBtn) {
            elements.saveFormSettingsBtn.addEventListener('click', saveFormSettings);
        }
        if (elements.formSettingsModal) {
            elements.formSettingsModal.addEventListener('click', (e) => {
                if (e.target === elements.formSettingsModal) {
                    closeFormSettingsModal();
                }
            });
        }

        // Field editor events
        if (elements.closeEditorBtn) {
            elements.closeEditorBtn.addEventListener('click', clearSelection);
        }
        if (elements.fieldLabel) {
            elements.fieldLabel.addEventListener('input', () => {
                if (state.selectedField) {
                    state.selectedField.label = elements.fieldLabel.value;
                    renderCurrentStage();
                }
            });
        }
        if (elements.fieldPlaceholder) {
            elements.fieldPlaceholder.addEventListener('input', () => {
                if (state.selectedField) {
                    state.selectedField.placeholder = elements.fieldPlaceholder.value;
                }
            });
        }
        if (elements.requiredField) {
            elements.requiredField.addEventListener('change', () => {
                if (state.selectedField) {
                    state.selectedField.required = elements.requiredField.checked;
                    renderStageNavigation();
                    renderCurrentStage();
                }
            });
        }
        if (elements.addOptionBtn) {
            elements.addOptionBtn.addEventListener('click', () => {
                if (state.selectedField &&
                    (state.selectedField.type === 'select' ||
                     state.selectedField.type === 'radio' ||
                     state.selectedField.type === 'checkbox')) {
                    state.selectedField.options.push('New Option');
                    renderOptionsEditor(state.selectedField);
                }
            });
        }
        if (elements.fileTypes) {
            elements.fileTypes.addEventListener('input', () => {
                if (state.selectedField && state.selectedField.type === 'file') {
                    state.selectedField.fileTypes = elements.fileTypes.value;
                }
            });
        }
        if (elements.maxFileSize) {
            elements.maxFileSize.addEventListener('input', () => {
                if (state.selectedField && state.selectedField.type === 'file') {
                    state.selectedField.maxFileSize = parseInt(elements.maxFileSize.value) || 5;
                }
            });
        }
        if (elements.multipleFiles) {
            elements.multipleFiles.addEventListener('change', function() {
                if (elements.maxFiles) {
                    elements.maxFiles.disabled = !this.checked;
                    if (!this.checked) {
                        elements.maxFiles.value = 1;
                        if (state.selectedField) {
                            state.selectedField.maxFiles = 1;
                        }
                    }
                }
            });
        }
    }, 100); // Small delay to ensure DOM is ready
}


        // Initialize Application
        function init() {
    // Initialize form title
    if (elements.formTitle) {
        elements.formTitle.textContent = 'Loading...';
    }

    // Hide the form stage initially to prevent flickering
    if (elements.formStage) {
        elements.formStage.style.display = 'none';
    }
    if (elements.emptyState) {
        elements.emptyState.style.display = 'block';
        elements.emptyState.innerHTML = '<i class="fas fa-spinner fa-spin"></i><p>Loading form template...</p>';
    }

    // Initialize event listeners first
    initEventListeners();

    // Only render navigation if we have a template to load
    if (djangoConfig.loadUrl) {
        loadExistingTemplate();
    } else {
        // For new templates, show empty state
        if (elements.formTitle) {
            elements.formTitle.textContent = 'New Form Template';
        }
        if (elements.formStage) {
            elements.formStage.style.display = 'block';
        }
        if (elements.emptyState) {
            elements.emptyState.style.display = 'block';
            elements.emptyState.innerHTML = '<i class="fas fa-cloud-upload-alt"></i><p>Drag form elements here to build your stage</p>';
        }
        renderStageNavigation();
        renderCurrentStage();
    }
}

// Make sure the DOM is fully loaded before initializing
if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', init);
} else {
    init();
}
    </script>
</body>
</html>