{% extends "global/Page.html" %}

{{ block title }}
Intake Form - Find Your Position
{{ endblock }}

{{ block content }}
<style>
    .intake-container {
        max-width: 1200px;
        margin: 0 auto;
    }
    
    .intake-instructions {
        background: #f0f4ff;
        border-left: 4px solid #667eea;
        padding: 20px;
        margin-bottom: 30px;
        border-radius: 4px;
    }
    
    .intake-instructions h2 {
        margin-top: 0;
        color: #333;
    }
    
    .intake-instructions p {
        margin: 10px 0;
        color: #555;
    }
    
    .option-highlight {
        background: #eef2ff;
        border-left: 4px solid #6366f1;
        padding: 12px 16px;
        margin: 12px 0;
        border-radius: 4px;
        font-weight: 600;
        color: #3730a3;
    }

    .search-box {
        margin: 20px 0 10px;
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        align-items: center;
        max-width: 720px;
        margin-left: auto;
        margin-right: auto;
    }

    .search-box input[type="text"] {
        flex: 1 1 260px;
        min-width: 220px;
        padding: 10px 14px;
        border: 2px solid #ddd;
        border-radius: 6px;
        font-size: 14px;
    }

    .search-box input[type="text"]:focus {
        outline: none;
        border-color: #667eea;
        box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    }

    .search-box button {
        padding: 10px 18px;
        background: #667eea;
        color: white;
        border: none;
        border-radius: 6px;
        cursor: pointer;
        font-size: 14px;
        font-weight: 600;
        transition: background 0.3s;
    }

    .search-box button:hover {
        background: #5568d3;
    }

    .search-feedback {
        margin-top: 6px;
        font-size: 0.9em;
        color: #555;
    }

    .search-feedback.highlight {
        color: #2563eb;
        font-weight: 600;
    }

    .search-results {
        list-style: none;
        margin: 8px 0 0;
        padding: 0;
        border: 1px solid #e5e7eb;
        border-radius: 6px;
        background: #fff;
        box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
        max-height: 260px;
        overflow-y: auto;
        display: none;
        max-width: 720px;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
    }

    .search-results.show {
        display: block;
    }

    .search-result-item {
        padding: 12px 16px;
        border-bottom: 1px solid #f3f4f6;
        cursor: pointer;
        transition: background 0.2s;
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .search-result-item:hover {
        background: #f8fafc;
    }

    .search-result-item:last-child {
        border-bottom: none;
    }

    .search-result-title {
        font-weight: 600;
        color: #1f2937;
    }

    .search-result-meta {
        font-size: 0.85em;
        color: #6b7280;
    }

    .org-chart-section {
        margin-bottom: 30px;
        border: 2px solid #ddd;
        border-radius: 8px;
        padding: 20px;
        background: #f8f9fa;
    }
    
    .org-chart-wrapper {
        position: relative;
        width: 100%;
        height: 500px;
        overflow: hidden;
        border: 2px solid #ddd;
        border-radius: 8px;
        background: white;
        cursor: grab;
        margin-bottom: 15px;
    }
    
    .org-chart-wrapper.grabbing {
        cursor: grabbing;
    }
    
    .org-chart {
        display: flex;
        justify-content: center;
        padding: 40px;
        min-width: 100%;
        transform-origin: 0 0;
        transition: transform 0.1s ease-out;
    }
    
    .zoom-controls {
        position: absolute;
        top: 10px;
        right: 10px;
        z-index: 100;
        display: flex;
        gap: 5px;
        background: white;
        padding: 5px;
        border-radius: 6px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    }
    
    .zoom-controls button {
        width: 32px;
        height: 32px;
        background: #667eea;
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        font-size: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background 0.3s;
    }
    
    .zoom-controls button:hover {
        background: #5568d3;
    }
    
    .zoom-level {
        display: flex;
        align-items: center;
        padding: 0 8px;
        font-size: 14px;
        font-weight: 600;
        color: #333;
    }
    
    .node {
        display: inline-block;
        background: white;
        border: 2px solid #ddd;
        border-radius: 8px;
        padding: 12px 20px;
        margin: 10px;
        min-width: 180px;
        cursor: pointer;
        transition: all 0.3s;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }
    
    .node-content:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }
    
    .node-content.selected {
        background: #d1fae5;
        border-color: #10b981;
        box-shadow: 0 0 12px rgba(16, 185, 129, 0.4);
    }

    .node-content.highlighted {
        background: #fef08a;
        border-color: #eab308;
        box-shadow: 0 0 10px rgba(234, 179, 8, 0.35);
    }
        let nodeElements = {};
    
    .node-title {
        font-weight: 600;
        color: #333;
        margin-bottom: 4px;
        font-size: 0.95em;
    }
    
    .node-dept {
        font-size: 0.8em;
        color: #666;
        font-style: italic;
    }
    
    .toggle-btn {
        position: absolute;
        bottom: -10px;
        left: 50%;
        transform: translateX(-50%);
        background: #667eea;
        color: white;
        border: none;
        border-radius: 50%;
        width: 24px;
        height: 24px;
        cursor: pointer;
        font-size: 16px;
        line-height: 1;
        z-index: 10;
        box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    }
    
    .toggle-btn:hover {
        background: #5568d3;
    }
    
    .children {
        display: flex;
        justify-content: center;
        gap: 20px;
        margin-top: 40px;
        position: relative;
    }
    
    .children.collapsed {
        display: none;
    }
    
    .children::before {
        content: '';
        position: absolute;
        top: -30px;
        left: 50%;
        width: 2px;
        height: 30px;
        background: #ddd;
    }
    
    .children > .node::before {
        content: '';
        position: absolute;
        top: -30px;
        left: 50%;
        width: 2px;
        height: 30px;
        background: #ddd;
    }
    
    .children > .node:first-child::after,
    .children > .node:last-child::after {
        content: '';
        position: absolute;
        top: -30px;
        height: 2px;
        background: #ddd;
    }
    
    .children > .node:first-child::after {
        left: 50%;
        right: -10px;
    }
    
    .children > .node:last-child::after {
        right: 50%;
        left: -10px;
    }
    
    .children > .node:only-child::after {
        display: none;
    }
    
    /* Department colors */
    .dept-Executive { background: #fef3c7; border-color: #f59e0b; }
    .dept-Legal { background: #dbeafe; border-color: #3b82f6; }
    .dept-Finance { background: #d1fae5; border-color: #10b981; }
    .dept-People { background: #fce7f3; border-color: #ec4899; }
    .dept-Product { background: #e9d5ff; border-color: #a855f7; }
    .dept-Operations { background: #fed7aa; border-color: #f97316; }
    .dept-Engineering { background: #cffafe; border-color: #06b6d4; }
    .dept-Expansion { background: #fecaca; border-color: #ef4444; }
    .dept-Marketing { background: #fbcfe8; border-color: #db2777; }
    .dept-Revenue { background: #bfdbfe; border-color: #2563eb; }
    .dept-Risk\\ \\&\\ Compliance { background: #fef08a; border-color: #eab308; }
    
    .form-section {
        background: white;
        border: 2px solid #ddd;
        border-radius: 8px;
        padding: 20px;
        margin-top: 30px;
    }
    
    .selected-position-info {
        background: #d1fae5;
        border-left: 4px solid #10b981;
        padding: 15px;
        margin-bottom: 20px;
        border-radius: 4px;
        display: none;
    }
    
    .selected-position-info.show {
        display: block;
    }
    
    .selected-position-info p {
        margin: 5px 0;
        color: #333;
    }
    
    .selected-position-info .position-name {
        font-weight: 600;
        font-size: 1.1em;
    }
    
    .form-group {
        margin-bottom: 20px;
    }
    
    .form-group label {
        display: block;
        margin-bottom: 8px;
        font-weight: 600;
        color: #333;
    }
    
    .form-group input[type="text"],
    .form-group input[type="number"] {
        width: 100%;
        padding: 10px 12px;
        border: 2px solid #ddd;
        border-radius: 4px;
        font-size: 14px;
        box-sizing: border-box;
    }
    
    .form-group input[type="text"]:focus,
    .form-group input[type="number"]:focus {
        outline: none;
        border-color: #667eea;
        box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    }
    
    .submit-btn {
        background: #667eea;
        color: white;
        padding: 12px 30px;
        border: none;
        border-radius: 6px;
        cursor: pointer;
        font-size: 16px;
        font-weight: 600;
        transition: background 0.3s;
        width: 100%;
    }
    
    .submit-btn:hover:not(:disabled) {
        background: #5568d3;
    }
    
    .submit-btn:disabled {
        background: #ccc;
        cursor: not-allowed;
    }
</style>

<div class="intake-container">
    <div class="intake-instructions">
        <h2>Welcome to the Organizational Learning Study</h2>
        <p class="option-highlight"><strong>Option 1:</strong> Use the search bar below to type your title and select your position instantly.</p>
        <p class="option-highlight"><strong>Option 2:</strong> Explore the organization chart below and click on your position manually.</p>
        <p><strong>Need a refresher?</strong> You can still pan, zoom, and expand/collapse the chart branches while you search.</p>
        <ul>
            <li>Click on positions to select them</li>
            <li>Zoom in/out with the + and − buttons or scroll wheel</li>
            <li>Drag the chart to pan around</li>
            <li>Expand/collapse branches by clicking the ± buttons</li>
        </ul>
        <p><strong>Step 2:</strong> After selecting your position, enter your first name below and click Submit.</p>
    </div>
    
    <div class="search-box">
        <input type="text" id="searchInput" placeholder="Start typing your title or department">
        <button type="button" id="searchButton">Search & Select</button>
        <button type="button" id="clearSearchButton">Clear</button>
    </div>
    <div class="search-feedback" id="searchFeedback"></div>
    <ul class="search-results" id="searchResults"></ul>
    
    <div class="org-chart-section">
        <h3>Organization Chart - Click on your position</h3>
        <div class="org-chart-wrapper" id="chartWrapper">
            <div class="zoom-controls">
                <button onclick="zoomIn()" title="Zoom In">+</button>
                <div class="zoom-level" id="zoomLevel">100%</div>
                <button onclick="zoomOut()" title="Zoom Out">−</button>
                <button onclick="resetZoom()" title="Reset View">⟲</button>
            </div>
            <div class="org-chart" id="orgChart"></div>
        </div>
    </div>
    
    <div class="form-section">
        <div class="selected-position-info" id="selectedPositionInfo">
            <p>Selected Position:</p>
            <p class="position-name" id="selectedPositionName"></p>
            <p>Department: <span id="selectedDepartment"></span></p>
        </div>
        
        <input type="hidden" id="id_org_chart_position" name="org_chart_position" required>

        <div class="form-group">
            <label for="id_first_name">Your First Name (required):</label>
            <input type="text" id="id_first_name" name="first_name" required 
                   placeholder="Enter your first name" maxlength="100">
        </div>
        
        <button type="submit" class="submit-btn" id="submitBtn">Submit</button>
    </div>
</div>

<script>
    const nodes = [
        {"id": 0, "label": "CEO", "department": "Executive"},
        {"id": 1, "label": "President", "department": "Executive"},
        {"id": 2, "label": "Chief Legal Officer", "department": "Legal"},
        {"id": 3, "label": "Senior Director of Finance & Accounting ", "department": "Finance"},
        {"id": 4, "label": "Chief of Staff", "department": "Executive"},
        {"id": 5, "label": "Project Manager", "department": "Risk & Compliance"},
        {"id": 6, "label": "Executive Assistant to the CEO, SF", "department": "Finance"},
        {"id": 7, "label": "Senior Manager, Regional Finance & Accounting", "department": "Finance"},
        {"id": 8, "label": "Regional Finance & Accounting Manager", "department": "Finance"},
        {"id": 9, "label": "Finance & Accounting Manager --Ghana", "department": "Finance"},
        {"id": 10, "label": "Senior Accountant", "department": "Finance"},
        {"id": 11, "label": "Tax & Accounting Manager", "department": "Finance"},
        {"id": 12, "label": "Accounting Associate and Admin", "department": "Finance"},
        {"id": 13, "label": "Office Manager, Ghana", "department": "Finance"},
        {"id": 14, "label": "Accountant, Rwanda", "department": "Finance"},
        {"id": 15, "label": "Office Manager, Uganda", "department": "Finance"},
        {"id": 16, "label": "People Operations Manager", "department": "People"},
        {"id": 17, "label": "Senior People Operations Specialist", "department": "People"},
        {"id": 18, "label": "People Operations Specialist", "department": "People"},
        {"id": 19, "label": "Chief Product Officer", "department": "Product"},
        {"id": 20, "label": "Head of Product, Nigeria", "department": "Product"},
        {"id": 21, "label": "Licensing Assistant", "department": "Legal"},
        {"id": 22, "label": "Licensing Project Manager", "department": "Legal"},
        {"id": 23, "label": "Senior Director, Product & Country", "department": "Product"},
        {"id": 24, "label": "Product Operations Associate II", "department": "Operations"},
        {"id": 25, "label": "Senior Software Engineer", "department": "Engineering"},
        {"id": 26, "label": "Senior Software Engineer, Data", "department": "Engineering"},
        {"id": 27, "label": "Product Operations Associate II", "department": "Operations"},
        {"id": 28, "label": "Senior Software Engineer", "department": "Engineering"},
        {"id": 29, "label": "Product Designer II", "department": "Product"},
        {"id": 30, "label": "Senior Customer Operations Team", "department": "Operations"},
        {"id": 31, "label": "Senior Software Engineer", "department": "Engineering"},
        {"id": 32, "label": "Head of Risk Compliance - Zambia", "department": "Product"},
        {"id": 33, "label": "Agent Ops Associate I", "department": "Product"},
        {"id": 34, "label": "Agent Ops Associate I", "department": "Product"},
        {"id": 35, "label": "Senior Administrative Associate", "department": "Finance"},
        {"id": 36, "label": "Senior Team Lead, Customer & Liquidity", "department": "Operations"},
        {"id": 37, "label": "Liquidity Ops Associate I", "department": "Operations"},
        {"id": 38, "label": "Liquidity Ops Associate I", "department": "Operations"},
        {"id": 39, "label": "Customer Operations Assistant", "department": "Operations"},
        {"id": 40, "label": "Customer Operations Associate I", "department": "Operations"},
        {"id": 41, "label": "Customer Operations Associate I", "department": "Operations"},
        {"id": 42, "label": "General Manager, East Africa", "department": "Expansion"},
        {"id": 43, "label": "Lead Brokerage Manager - Uganda", "department": "Expansion"},
        {"id": 44, "label": "Senior Director, Policy & Government", "department": "Expansion"},
        {"id": 45, "label": "Country Director, Rwanda", "department": "Expansion"},
        {"id": 46, "label": "Senior Manager, Data & Analytics", "department": "Engineering"},
        {"id": 47, "label": "Lead Economist and Head of Growth", "department": "Revenue"},
        {"id": 48, "label": "Growth Lead", "department": "Marketing"},
        {"id": 49, "label": "Data & Revenue Strategy Intern", "department": "Engineering"},
        {"id": 50, "label": "VP Operations, Technology", "department": "Operations"},
        {"id": 51, "label": "Head of Product, Consumer", "department": "Product"},
        {"id": 52, "label": "Senior Treasury Associate", "department": "Finance"},
        {"id": 53, "label": "Senior Manager, Customer Operations", "department": "Operations"},
        {"id": 54, "label": "Product Manager ", "department": "Product"},
        {"id": 55, "label": "Senior Product Designer", "department": "Product"},
        {"id": 56, "label": "Senior Visual Designer", "department": "Product"},
        {"id": 57, "label": "Senior Customer Operations Associate", "department": "Operations"},
        {"id": 58, "label": "Customer Operations Manager", "department": "Operations"},
        {"id": 59, "label": "Senior Customer Operations Team", "department": "Operations"},
        {"id": 60, "label": "Customer Operations Associate II", "department": "Operations"},
        {"id": 61, "label": "Customer Operations Associate II", "department": "Operations"},
        {"id": 62, "label": "Customer Operations Associate II", "department": "Operations"},
        {"id": 63, "label": "Customer Operations Associate II", "department": "Operations"},
        {"id": 64, "label": "Product Operations Associate II, C", "department": "Operations"},
        {"id": 65, "label": "Product Operations Associate II, P", "department": "Operations"},
        {"id": 66, "label": "Senior Customer Operations Team", "department": "Operations"},
        {"id": 67, "label": "Customer Operations Team Lead", "department": "Operations"},
        {"id": 68, "label": "Customer Operations Associate II", "department": "Operations"},
        {"id": 69, "label": "Customer Operations Intern", "department": "Operations"},
        {"id": 70, "label": "Customer Operations Intern", "department": "Operations"},
        {"id": 71, "label": "Customer Operations Manager", "department": "Operations"},
        {"id": 72, "label": "Onboarding Operations Associate", "department": "Operations"},
        {"id": 73, "label": "Customer Operations Team Lead", "department": "Operations"},
        {"id": 74, "label": "Senior Customer Operations Team", "department": "Operations"},
        {"id": 75, "label": "Onboarding Operations Associate", "department": "Operations"},
        {"id": 76, "label": "Customer Operations Associate II", "department": "Operations"},
        {"id": 77, "label": "Senior Onboarding Operations Team", "department": "Operations"},
        {"id": 78, "label": "Onboarding Operations Associate", "department": "Operations"},
        {"id": 79, "label": "Senior Customer Operations Team", "department": "Operations"},
        {"id": 80, "label": "Customer Operations Associate II", "department": "Operations"},
        {"id": 81, "label": "Chief Compliance Officer", "department": "Risk & Compliance"},
        {"id": 82, "label": "Project Manager - Marketing Operations", "department": "Marketing"},
        {"id": 83, "label": "CTO", "department": "Engineering"},
        {"id": 84, "label": "Global Head of Financial Crime", "department": "Risk & Compliance"},
        {"id": 85, "label": "Head of Risk & Compliance - USA", "department": "Risk & Compliance"},
        {"id": 86, "label": "Head of Risk & Compliance - Ghana", "department": "Risk & Compliance"},
        {"id": 87, "label": "Compliance Analyst", "department": "Risk & Compliance"},
        {"id": 88, "label": "Senior Data Scientist", "department": "Engineering"},
        {"id": 89, "label": "Compliance Program Manager", "department": "Risk & Compliance"},
        {"id": 90, "label": "Global Head of Compliance Technology", "department": "Engineering"},
        {"id": 91, "label": "Senior Crypto Analyst", "department": "Risk & Compliance"},
        {"id": 92, "label": "Fraud Analyst", "department": "Risk & Compliance"},
        {"id": 93, "label": "Senior Financial Crime Analyst", "department": "Risk & Compliance"},
        {"id": 94, "label": "Financial Crime Analyst", "department": "Risk & Compliance"},
        {"id": 95, "label": "Financial Crime Analyst", "department": "Risk & Compliance"},
        {"id": 96, "label": "Financial Crime/Screening Manager", "department": "Risk & Compliance"},
        {"id": 97, "label": "Senior Screening Analyst", "department": "Risk & Compliance"},
        {"id": 98, "label": "Screening Analyst", "department": "Risk & Compliance"},
        {"id": 99, "label": "Compliance Program Analyst I", "department": "Risk & Compliance"},
        {"id": 100, "label": "Compliance Program Analyst I", "department": "Risk & Compliance"},
        {"id": 101, "label": "Head of Enterprise Risk Management", "department": "Risk & Compliance"},
        {"id": 102, "label": "Compliance Program Analyst", "department": "Operations"},
        {"id": 103, "label": "Regional Head of Risk & Compliance", "department": "Risk & Compliance"},
        {"id": 104, "label": "Head of Risk & Compliance - Rwanda", "department": "Risk & Compliance"},
        {"id": 105, "label": "Staff Software Engineer", "department": "Engineering"},
        {"id": 106, "label": "Software Engineer II", "department": "Engineering"},
        {"id": 107, "label": "Senior Fraud Data Analyst", "department": "Risk & Compliance"},
        {"id": 108, "label": "Software Engineer", "department": "Engineering"},
        {"id": 109, "label": "Senior Director, IT", "department": "Engineering"},
        {"id": 110, "label": "TechOps Engineer", "department": "Engineering"},
        {"id": 111, "label": "Senior IT Help Desk Analyst", "department": "Engineering"},
        {"id": 112, "label": "Senior Product Analyst", "department": "Engineering"},
        {"id": 113, "label": "Senior Director, Product Engineering", "department": "Engineering"},
        {"id": 114, "label": "Engineering Team Lead", "department": "Engineering"},
        {"id": 115, "label": "Engineering Team Lead", "department": "Engineering"},
        {"id": 116, "label": "Software Engineer ", "department": "Engineering"},
        {"id": 117, "label": "Software Engineer I", "department": "Engineering"},
        {"id": 118, "label": "Software Engineer I", "department": "Engineering"},
        {"id": 119, "label": "Senior Software Engineer", "department": "Engineering"},
        {"id": 120, "label": "Senior React Native Engineer", "department": "Engineering"},
        {"id": 121, "label": "Software Engineer II", "department": "Engineering"},
        {"id": 122, "label": "Software Engineer II", "department": "Engineering"}
    ];

    const edges = [
        {"source": 0, "target": 1}, {"source": 0, "target": 2}, {"source": 0, "target": 4}, {"source": 0, "target": 3},
        {"source": 4, "target": 5}, {"source": 16, "target": 17}, {"source": 17, "target": 18}, {"source": 20, "target": 21},
        {"source": 20, "target": 22}, {"source": 19, "target": 20}, {"source": 19, "target": 23}, {"source": 23, "target": 27},
        {"source": 23, "target": 28}, {"source": 23, "target": 26}, {"source": 23, "target": 25}, {"source": 23, "target": 30},
        {"source": 23, "target": 29}, {"source": 23, "target": 31}, {"source": 23, "target": 32}, {"source": 32, "target": 33},
        {"source": 32, "target": 34}, {"source": 32, "target": 35}, {"source": 23, "target": 36}, {"source": 36, "target": 37},
        {"source": 36, "target": 38}, {"source": 36, "target": 39}, {"source": 36, "target": 40}, {"source": 36, "target": 41},
        {"source": 19, "target": 42}, {"source": 42, "target": 43}, {"source": 19, "target": 44}, {"source": 19, "target": 45},
        {"source": 19, "target": 46}, {"source": 19, "target": 47}, {"source": 47, "target": 48}, {"source": 47, "target": 49},
        {"source": 19, "target": 50}, {"source": 50, "target": 53}, {"source": 50, "target": 52}, {"source": 53, "target": 58},
        {"source": 58, "target": 59}, {"source": 59, "target": 60}, {"source": 59, "target": 61}, {"source": 59, "target": 62},
        {"source": 59, "target": 63}, {"source": 59, "target": 64}, {"source": 59, "target": 65}, {"source": 53, "target": 66},
        {"source": 66, "target": 67}, {"source": 66, "target": 68}, {"source": 67, "target": 70}, {"source": 67, "target": 69},
        {"source": 53, "target": 71}, {"source": 71, "target": 77}, {"source": 77, "target": 78}, {"source": 71, "target": 72},
        {"source": 71, "target": 73}, {"source": 71, "target": 74}, {"source": 74, "target": 75}, {"source": 74, "target": 76},
        {"source": 53, "target": 79}, {"source": 53, "target": 57}, {"source": 79, "target": 80}, {"source": 19, "target": 51},
        {"source": 51, "target": 54}, {"source": 51, "target": 55}, {"source": 55, "target": 56}, {"source": 1, "target": 81},
        {"source": 81, "target": 84}, {"source": 84, "target": 91}, {"source": 84, "target": 92}, {"source": 84, "target": 93},
        {"source": 84, "target": 94}, {"source": 84, "target": 95}, {"source": 84, "target": 96}, {"source": 96, "target": 97},
        {"source": 96, "target": 98}, {"source": 81, "target": 85}, {"source": 81, "target": 86}, {"source": 81, "target": 87},
        {"source": 81, "target": 88}, {"source": 81, "target": 89}, {"source": 89, "target": 99}, {"source": 89, "target": 101},
        {"source": 89, "target": 100}, {"source": 89, "target": 102}, {"source": 89, "target": 103}, {"source": 103, "target": 104},
        {"source": 81, "target": 90}, {"source": 90, "target": 105}, {"source": 90, "target": 106}, {"source": 90, "target": 107},
        {"source": 90, "target": 108}, {"source": 83, "target": 112}, {"source": 83, "target": 109}, {"source": 109, "target": 110},
        {"source": 109, "target": 111}, {"source": 83, "target": 113}, {"source": 113, "target": 114}, {"source": 114, "target": 117},
        {"source": 114, "target": 119}, {"source": 114, "target": 116}, {"source": 114, "target": 120}, {"source": 113, "target": 115},
        {"source": 115, "target": 121}, {"source": 115, "target": 118}, {"source": 115, "target": 122}, {"source": 3, "target": 6},
        {"source": 3, "target": 7}, {"source": 7, "target": 8}, {"source": 8, "target": 12}, {"source": 7, "target": 9},
        {"source": 7, "target": 10}, {"source": 7, "target": 11}, {"source": 11, "target": 14}, {"source": 11, "target": 15},
        {"source": 9, "target": 13}, {"source": 1, "target": 82}, {"source": 1, "target": 16}, {"source": 1, "target": 83},
        {"source": 1, "target": 19}, {"source": 23, "target": 24}
    ];

    // Build hierarchy
    let nodeElements = {};
    const nodeMap = {};
    nodes.forEach(node => {
        nodeMap[node.id] = {...node, children: []};
    });

    edges.forEach(edge => {
        if (nodeMap[edge.source] && nodeMap[edge.target]) {
            nodeMap[edge.source].children.push(nodeMap[edge.target]);
        }
    });

    const root = nodeMap[0]; // CEO is root

    let selectedNode = null;

    function createNodeElement(node, level = 0) {
        const nodeDiv = document.createElement('div');
        nodeDiv.className = 'node';
        nodeDiv.dataset.id = node.id;
        nodeDiv.dataset.level = level;
        
        const deptClass = 'dept-' + node.department.replace(/[^a-zA-Z0-9]/g, '\\ ');
        
        const contentDiv = document.createElement('div');
        contentDiv.className = `node-content ${deptClass}`;
        contentDiv.innerHTML = `
            <div class="node-title">${node.label}</div>
            <div class="node-dept">${node.department}</div>
        `;
        contentDiv.dataset.nodeId = node.id;
        
        // Handle click to select
        contentDiv.onclick = (e) => {
            e.stopPropagation();
            selectNode(node, contentDiv);
        };
        
        nodeDiv.appendChild(contentDiv);
        nodeElements[node.id] = contentDiv;
        
        if (node.children && node.children.length > 0) {
            const toggleBtn = document.createElement('button');
            toggleBtn.className = 'toggle-btn';
            toggleBtn.textContent = '−';
            toggleBtn.onclick = (e) => {
                e.stopPropagation();
                const childrenDiv = nodeDiv.querySelector('.children');
                if (childrenDiv) {
                    childrenDiv.classList.toggle('collapsed');
                    toggleBtn.textContent = childrenDiv.classList.contains('collapsed') ? '+' : '−';
                }
            };
            nodeDiv.appendChild(toggleBtn);
            
            const childrenDiv = document.createElement('div');
            childrenDiv.className = 'children';
            
            node.children.forEach(child => {
                childrenDiv.appendChild(createNodeElement(child, level + 1));
            });
            
            nodeDiv.appendChild(childrenDiv);
        }
        
        return nodeDiv;
    }

    function selectNode(node, contentDiv) {
        expandPathTo(node.id);
        // Remove previous selection
        if (selectedNode) {
            selectedNode.contentDiv.classList.remove('selected');
        }
        
        // Mark new selection
        selectedNode = {node, contentDiv};
        contentDiv.classList.add('selected');
        
        // Update form fields
        document.getElementById('id_org_chart_position').value = node.id;
        document.getElementById('selectedPositionName').textContent = node.label;
        document.getElementById('selectedDepartment').textContent = node.department;
        if (typeof searchFeedback !== 'undefined' && searchFeedback) {
            searchFeedback.textContent = `Position selected: ${node.label}`;
            searchFeedback.classList.add('highlight');
        }
        if (searchResults) {
            searchResults.innerHTML = '';
            searchResults.classList.remove('show');
        }
        
        // Show selected position info
        document.getElementById('selectedPositionInfo').classList.add('show');
        
        // Scroll to position
        contentDiv.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
    }

    function renderChart() {
        const container = document.getElementById('orgChart');
        container.innerHTML = '';
        nodeElements = {};
        container.appendChild(createNodeElement(root));
    }

    // Initial render
    renderChart();
    
    // Expand to level 2 by default
    expandToLevel(2);
    
    // Pan and Zoom functionality
    let scale = 1;
    let translateX = 0;
    let translateY = 0;
    let isDragging = false;
    let startX = 0;
    let startY = 0;
    
    const wrapper = document.getElementById('chartWrapper');
    const chart = document.getElementById('orgChart');
    const searchInput = document.getElementById('searchInput');
    const searchButton = document.getElementById('searchButton');
    const clearSearchButton = document.getElementById('clearSearchButton');
    const searchFeedback = document.getElementById('searchFeedback');
    const searchResults = document.getElementById('searchResults');
    
    function updateTransform() {
        chart.style.transform = `translate(${translateX}px, ${translateY}px) scale(${scale})`;
        document.getElementById('zoomLevel').textContent = Math.round(scale * 100) + '%';
    }
    
    function zoomIn() {
        scale = Math.min(scale + 0.1, 3);
        updateTransform();
    }
    
    function zoomOut() {
        scale = Math.max(scale - 0.1, 0.3);
        updateTransform();
    }
    
    function resetZoom() {
        scale = 1;
        translateX = 0;
        translateY = 0;
        updateTransform();
    }
    
    function expandToLevel(maxLevel) {
        document.querySelectorAll('.node').forEach(node => {
            const level = parseInt(node.dataset.level);
            const childrenDiv = node.querySelector('.children');
            const toggleBtn = node.querySelector('.toggle-btn');
            
            if (childrenDiv && toggleBtn) {
                if (level < maxLevel) {
                    childrenDiv.classList.remove('collapsed');
                    toggleBtn.textContent = '−';
                } else {
                    childrenDiv.classList.add('collapsed');
                    toggleBtn.textContent = '+';
                }
            }
        });
    }
    
    // Mouse wheel zoom
    wrapper.addEventListener('wheel', (e) => {
        e.preventDefault();
        const delta = e.deltaY > 0 ? -0.1 : 0.1;
        const newScale = Math.max(0.3, Math.min(3, scale + delta));
        
        // Zoom towards mouse position
        const rect = wrapper.getBoundingClientRect();
        const mouseX = e.clientX - rect.left;
        const mouseY = e.clientY - rect.top;
        
        const scaleChange = newScale / scale;
        translateX = mouseX - (mouseX - translateX) * scaleChange;
        translateY = mouseY - (mouseY - translateY) * scaleChange;
        
        scale = newScale;
        updateTransform();
    });
    
    // Pan with mouse drag
    wrapper.addEventListener('mousedown', (e) => {
        if (e.target === wrapper || e.target === chart || e.target.closest('.node-content') !== null) {
            isDragging = true;
            startX = e.clientX - translateX;
            startY = e.clientY - translateY;
            wrapper.classList.add('grabbing');
            e.preventDefault();
        }
    });
    
    window.addEventListener('mousemove', (e) => {
        if (isDragging) {
            translateX = e.clientX - startX;
            translateY = e.clientY - startY;
            updateTransform();
        }
    });
    
    window.addEventListener('mouseup', () => {
        if (isDragging) {
            isDragging = false;
            wrapper.classList.remove('grabbing');
        }
    });

    function expandPathTo(nodeId) {
        const element = nodeElements[nodeId];
        if (!element) {
            return;
        }
        let nodeDiv = element.closest('.node');
        while (nodeDiv) {
            const childrenDiv = Array.from(nodeDiv.children).find(child => child.classList && child.classList.contains('children'));
            if (childrenDiv) {
                childrenDiv.classList.remove('collapsed');
                const toggleBtn = Array.from(nodeDiv.children).find(child => child.classList && child.classList.contains('toggle-btn'));
                if (toggleBtn) {
                    toggleBtn.textContent = '−';
                }
            }
            const parentChildren = nodeDiv.parentElement;
            if (parentChildren && parentChildren.classList.contains('children')) {
                parentChildren.classList.remove('collapsed');
                const parentNode = parentChildren.parentElement;
                if (parentNode) {
                    const parentToggle = Array.from(parentNode.children).find(child => child.classList && child.classList.contains('toggle-btn'));
                    if (parentToggle) {
                        parentToggle.textContent = '−';
                    }
                }
                nodeDiv = parentChildren.parentElement;
            } else {
                nodeDiv = null;
            }
        }
    }

    function clearSearchResults() {
        if (searchResults) {
            searchResults.innerHTML = '';
            searchResults.classList.remove('show');
        }
    }

    function renderSearchResults(matches) {
        if (!searchResults) {
            return;
        }
        searchResults.innerHTML = '';
        if (matches.length === 0) {
            searchResults.classList.remove('show');
            return;
        }

        searchResults.classList.add('show');
        matches.slice(0, 25).forEach(match => {
            const item = document.createElement('li');
            item.className = 'search-result-item';
            item.innerHTML = `
                <span class="search-result-title">${match.node.label}</span>
                <span class="search-result-meta">${match.node.department}</span>
            `;
            item.onclick = () => {
                if (searchInput) {
                    searchInput.value = match.node.label;
                }
                selectNode(match.node, match.element);
            };
            searchResults.appendChild(item);
        });
    }

    function handleSearch(autoSelect = false) {
        if (!searchInput) {
            return;
        }
        const term = searchInput.value.trim().toLowerCase();
        if (searchFeedback) {
            searchFeedback.textContent = '';
            searchFeedback.classList.remove('highlight');
        }
        if (term.length < 2) {
            clearSearchResults();
            return;
        }

        const matches = [];
        nodes.forEach(node => {
            const labelMatch = node.label.toLowerCase().includes(term);
            const deptMatch = node.department.toLowerCase().includes(term);
            if (labelMatch || deptMatch) {
                const element = nodeElements[node.id];
                if (element) {
                    matches.push({ node, element });
                }
            }
        });

        renderSearchResults(matches);

        if (matches.length === 0) {
            if (searchFeedback) {
                searchFeedback.textContent = 'No matching positions found.';
            }
            return;
        }

        if (searchFeedback) {
            searchFeedback.textContent = matches.length === 1 ? 'Showing 1 possible match.' : `Showing ${matches.length} possible matches.`;
            searchFeedback.classList.add('highlight');
        }

        if (matches.length === 1) {
            const chosen = matches[0];
            if (searchInput) {
                searchInput.value = chosen.node.label;
            }
            selectNode(chosen.node, chosen.element);
            return;
        }

        if (autoSelect && searchResults && searchResults.firstElementChild) {
            searchResults.firstElementChild.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
        }
    }

    if (searchInput) {
        searchInput.addEventListener('input', () => handleSearch(false));
        searchInput.addEventListener('keydown', (event) => {
            if (event.key === 'Enter') {
                event.preventDefault();
                handleSearch(true);
            }
        });
    }
    if (searchButton) {
        searchButton.addEventListener('click', () => handleSearch(true));
    }
    if (clearSearchButton) {
        clearSearchButton.addEventListener('click', () => {
            if (searchInput) {
                searchInput.value = '';
            }
            if (searchFeedback) {
                searchFeedback.textContent = '';
                searchFeedback.classList.remove('highlight');
            }
            clearSearchResults();
        });
    }
</script>

{{ endblock }}