{% extends "shared/frontend/base.html" %}

{% block title %}Opret Ny Sag - BMC Hub{% endblock %}

{% block extra_css %}
<style>
    .form-wizard {
        background: var(--bg-card);
        border-radius: var(--border-radius);
        box-shadow: 0 4px 30px rgba(0,0,0,0.05);
        overflow: hidden;
    }

    .wizard-header {
        background: linear-gradient(135deg, var(--accent) 0%, #1565a6 100%);
        padding: 2rem;
        color: white;
        text-align: center;
    }

    .wizard-header h1 {
        font-size: 2rem;
        font-weight: 700;
        margin-bottom: 0.5rem;
    }

    .wizard-header p {
        opacity: 0.9;
        margin-bottom: 0;
    }

    .wizard-steps {
        display: flex;
        justify-content: center;
        padding: 2rem 2rem 0;
        gap: 1rem;
        background: var(--accent-light);
        border-bottom: 2px solid var(--accent);
    }

    .wizard-step {
        flex: 1;
        max-width: 200px;
        text-align: center;
        padding-bottom: 1.5rem;
        position: relative;
        cursor: pointer;
        transition: all 0.3s;
    }

    .wizard-step::after {
        content: '';
        position: absolute;
        bottom: -2px;
        left: 0;
        width: 100%;
        height: 2px;
        background: transparent;
        transition: background 0.3s;
    }

    .wizard-step.active::after {
        background: var(--accent);
    }

    .wizard-step.active .step-number {
        background: var(--accent);
        color: white;
        transform: scale(1.1);
    }

    .step-number {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: white;
        border: 2px solid var(--accent);
        color: var(--accent);
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 0.5rem;
        font-weight: 700;
        transition: all 0.3s;
    }

    .step-label {
        font-size: 0.85rem;
        font-weight: 600;
        color: var(--text-secondary);
    }

    .wizard-step.active .step-label {
        color: var(--accent);
    }

    .wizard-content {
        padding: 3rem 2rem;
        min-height: 400px;
    }

    .step-content {
        display: none;
        animation: fadeIn 0.3s;
    }

    .step-content.active {
        display: block;
    }

    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(10px); }
        to { opacity: 1; transform: translateY(0); }
    }

    .form-floating {
        margin-bottom: 1.5rem;
    }

    .form-floating > .form-control,
    .form-floating > .form-select {
        height: calc(3.5rem + 2px);
        padding: 1rem 1rem;
        border: 2px solid #eee;
        border-radius: 12px;
        transition: all 0.3s;
    }

    .form-floating > .form-control:focus,
    .form-floating > .form-select:focus {
        border-color: var(--accent);
        box-shadow: 0 0 0 4px rgba(15, 76, 117, 0.1);
    }

    .form-floating > label {
        padding: 1rem 1rem;
        font-weight: 500;
        color: var(--text-secondary);
    }

    .priority-selector {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
        gap: 1rem;
        margin-bottom: 2rem;
    }

    .priority-card {
        background: white;
        border: 2px solid #eee;
        border-radius: 12px;
        padding: 1.5rem 1rem;
        text-align: center;
        cursor: pointer;
        transition: all 0.3s;
    }

    .priority-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 6px 20px rgba(0,0,0,0.1);
    }

    .priority-card.selected {
        border-color: var(--accent);
        background: var(--accent-light);
    }

    .priority-card input[type="radio"] {
        display: none;
    }

    .priority-icon {
        font-size: 2rem;
        margin-bottom: 0.5rem;
    }

    .priority-label {
        font-weight: 600;
        font-size: 0.9rem;
    }

    .customer-search {
        position: relative;
    }

    .customer-results {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: white;
        border: 2px solid var(--accent);
        border-top: none;
        border-radius: 0 0 12px 12px;
        max-height: 300px;
        overflow-y: auto;
        z-index: 1000;
        box-shadow: 0 8px 20px rgba(0,0,0,0.1);
        display: none;
    }

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

    .customer-item {
        padding: 1rem 1.5rem;
        cursor: pointer;
        border-bottom: 1px solid #eee;
        transition: background 0.2s;
    }

    .customer-item:hover {
        background: var(--accent-light);
    }

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

    .customer-name {
        font-weight: 600;
        color: var(--text-primary);
    }

    .customer-id {
        font-size: 0.85rem;
        color: var(--text-secondary);
    }

    .wizard-actions {
        display: flex;
        justify-content: space-between;
        padding: 2rem;
        background: var(--accent-light);
        border-top: 1px solid #ddd;
    }

    .btn {
        padding: 0.8rem 2rem;
        border-radius: 10px;
        font-weight: 600;
        transition: all 0.3s;
    }

    .btn-primary {
        background: var(--accent);
        border: none;
    }

    .btn-primary:hover {
        background: #0a3655;
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(15, 76, 117, 0.3);
    }

    .btn-outline-secondary {
        border: 2px solid var(--text-secondary);
        color: var(--text-secondary);
    }

    .btn-outline-secondary:hover {
        background: var(--text-secondary);
        color: white;
    }

    .success-animation {
        text-align: center;
        padding: 3rem;
    }

    .success-icon {
        font-size: 5rem;
        color: #28a745;
        animation: scaleIn 0.5s;
    }

    @keyframes scaleIn {
        from { transform: scale(0); }
        to { transform: scale(1); }
    }

    .tag-input-wrapper {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        padding: 0.75rem;
        border: 2px solid #eee;
        border-radius: 12px;
        min-height: 3.5rem;
        align-items: center;
        cursor: text;
        transition: all 0.3s;
    }

    .tag-input-wrapper:focus-within {
        border-color: var(--accent);
        box-shadow: 0 0 0 4px rgba(15, 76, 117, 0.1);
    }

    .tag {
        background: var(--accent);
        color: white;
        padding: 0.4rem 0.8rem;
        border-radius: 20px;
        font-size: 0.85rem;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .tag-remove {
        cursor: pointer;
        font-weight: 700;
        opacity: 0.8;
    }

    .tag-remove:hover {
        opacity: 1;
    }

    .tag-input-wrapper input {
        border: none;
        outline: none;
        flex: 1;
        min-width: 150px;
        font-size: 1rem;
    }

    .quick-templates {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 1rem;
        margin-bottom: 2rem;
    }

    .template-card {
        background: white;
        border: 2px solid #eee;
        border-radius: 12px;
        padding: 1.5rem;
        cursor: pointer;
        transition: all 0.3s;
    }

    .template-card:hover {
        border-color: var(--accent);
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    }

    .template-title {
        font-weight: 600;
        margin-bottom: 0.5rem;
        color: var(--accent);
    }

    .template-desc {
        font-size: 0.85rem;
        color: var(--text-secondary);
        margin-bottom: 0;
    }

    .file-upload-area {
        border: 3px dashed #ddd;
        border-radius: 12px;
        padding: 3rem;
        text-align: center;
        cursor: pointer;
        transition: all 0.3s;
    }

    .file-upload-area:hover,
    .file-upload-area.drag-over {
        border-color: var(--accent);
        background: var(--accent-light);
    }

    .file-upload-icon {
        font-size: 3rem;
        color: var(--accent);
        margin-bottom: 1rem;
    }

    .uploaded-files {
        margin-top: 1.5rem;
    }

    .file-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 1rem;
        background: var(--accent-light);
        border-radius: 8px;
        margin-bottom: 0.5rem;
    }

    .file-info {
        display: flex;
        align-items: center;
        gap: 1rem;
    }

    .file-icon {
        font-size: 1.5rem;
        color: var(--accent);
    }

    .ai-suggest-box {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        padding: 1.5rem;
        border-radius: 12px;
        margin-bottom: 2rem;
        text-align: center;
    }

    .ai-suggest-box i {
        font-size: 2rem;
        margin-bottom: 0.5rem;
    }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid py-4">
    <div class="row justify-content-center">
        <div class="col-lg-10 col-xl-8">
            
            <form id="ticketForm" class="form-wizard">
                <!-- Header -->
                <div class="wizard-header">
                    <h1><i class="bi bi-ticket-detailed me-2"></i>Opret Ny Support Sag</h1>
                    <p>Følg trinene for at oprette en struktureret support ticket</p>
                </div>

                <!-- Progress Steps -->
                <div class="wizard-steps">
                    <div class="wizard-step active" data-step="1">
                        <div class="step-number">1</div>
                        <div class="step-label">Kunde</div>
                    </div>
                    <div class="wizard-step" data-step="2">
                        <div class="step-number">2</div>
                        <div class="step-label">Problem</div>
                    </div>
                    <div class="wizard-step" data-step="3">
                        <div class="step-number">3</div>
                        <div class="step-label">Detaljer</div>
                    </div>
                    <div class="wizard-step" data-step="4">
                        <div class="step-number">4</div>
                        <div class="step-label">Vedhæft</div>
                    </div>
                </div>

                <!-- Form Content -->
                <div class="wizard-content">
                    
                    <!-- Step 1: Customer Selection -->
                    <div class="step-content active" data-step="1">
                        <h3 class="mb-4"><i class="bi bi-person-circle me-2"></i>Vælg Kunde</h3>
                        
                        <div class="customer-search">
                            <div class="form-floating">
                                <input type="text" class="form-control" id="customerSearch" 
                                       placeholder="Søg efter kunde eller kontaktperson..." autocomplete="off">
                                <label for="customerSearch">
                                    <i class="bi bi-search me-2"></i>Søg efter firma eller kontaktperson
                                </label>
                            </div>
                            <div class="customer-results" id="customerResults"></div>
                        </div>

                        <input type="hidden" id="customerId" name="customer_id">
                        <input type="hidden" id="contactId" name="contact_id">
                        
                        <div id="selectedCustomer" class="alert alert-info mt-3" style="display: none;">
                            <strong><i class="bi bi-check-circle me-2"></i>Valgt:</strong>
                            <span id="selectedCustomerName"></span>
                        </div>

                        <div class="alert alert-light mt-3">
                            <i class="bi bi-info-circle me-2"></i>
                            <small class="text-muted">Søg efter firmanavn, kontaktperson, CVR-nummer eller email</small>
                        </div>
                    </div>

                    <!-- Step 2: Problem Description -->
                    <div class="step-content" data-step="2">
                        <h3 class="mb-4"><i class="bi bi-exclamation-triangle me-2"></i>Beskriv Problemet</h3>

                        <div class="ai-suggest-box" id="aiSuggestBox" style="display: none;">
                            <i class="bi bi-stars"></i>
                            <h5>AI Forslag</h5>
                            <p class="mb-0" id="aiSuggestion"></p>
                            <button type="button" class="btn btn-sm btn-light mt-2" onclick="applyAISuggestion()">
                                <i class="bi bi-check-circle me-1"></i>Anvend Forslag
                            </button>
                        </div>

                        <div class="form-floating">
                            <input type="text" class="form-control" id="subject" name="subject" 
                                   placeholder="Kort beskrivelse" required>
                            <label for="subject">
                                <i class="bi bi-card-heading me-2"></i>Emne / Kort Beskrivelse
                            </label>
                        </div>

                        <div class="form-floating">
                            <textarea class="form-control" id="description" name="description" 
                                      placeholder="Detaljeret beskrivelse" 
                                      style="height: 200px;" required
                                      oninput="analyzeDescription()"></textarea>
                            <label for="description">
                                <i class="bi bi-text-paragraph me-2"></i>Detaljeret Beskrivelse
                            </label>
                        </div>

                        <div id="suggestedTagsBox" style="display: none; margin: 1rem 0;">
                            <div class="alert alert-info" style="margin-bottom: 0.5rem; padding: 0.75rem;">
                                <i class="bi bi-lightbulb me-2"></i>
                                <strong>AI Foreslog Tags:</strong>
                                <small class="text-muted ms-2">(Klik for at tilføje)</small>
                            </div>
                            <div id="suggestedTags" style="display: flex; flex-wrap: wrap; gap: 0.5rem;"></div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-floating">
                                    <select class="form-select" id="category" name="category">
                                        <option value="">Vælg kategori...</option>
                                        <option value="network">Netværk</option>
                                        <option value="hardware">Hardware</option>
                                        <option value="software">Software</option>
                                        <option value="security">Sikkerhed</option>
                                        <option value="email">Email</option>
                                        <option value="other">Andet</option>
                                    </select>
                                    <label for="category"><i class="bi bi-folder me-2"></i>Kategori</label>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-floating">
                                    <select class="form-select" id="channel" name="channel">
                                        <option value="email">Email</option>
                                        <option value="phone">Telefon</option>
                                        <option value="portal">Web Portal</option>
                                        <option value="manual">Walk-in</option>
                                        <option value="api">API</option>
                                    </select>
                                    <label for="channel"><i class="bi bi-signpost me-2"></i>Henvendelseskanal</label>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Step 3: Details -->
                    <div class="step-content" data-step="3">
                        <h3 class="mb-4"><i class="bi bi-sliders me-2"></i>Prioritet & Detaljer</h3>

                        <label class="form-label fw-bold mb-3">
                            <i class="bi bi-flag me-2"></i>Vælg Prioritet
                        </label>
                        <div class="priority-selector">
                            <label class="priority-card">
                                <input type="radio" name="priority" value="low" checked>
                                <div class="priority-icon">🟢</div>
                                <div class="priority-label">Lav</div>
                                <small class="text-muted">Kan vente</small>
                            </label>
                            <label class="priority-card">
                                <input type="radio" name="priority" value="normal">
                                <div class="priority-icon">🟡</div>
                                <div class="priority-label">Normal</div>
                                <small class="text-muted">Standard responstid</small>
                            </label>
                            <label class="priority-card">
                                <input type="radio" name="priority" value="high">
                                <div class="priority-icon">🟠</div>
                                <div class="priority-label">Høj</div>
                                <small class="text-muted">Hurtig handling</small>
                            </label>
                            <label class="priority-card">
                                <input type="radio" name="priority" value="urgent">
                                <div class="priority-icon">🔴</div>
                                <div class="priority-label">Akut</div>
                                <small class="text-muted">Med det samme</small>
                            </label>
                            <label class="priority-card">
                                <input type="radio" name="priority" value="critical">
                                <div class="priority-icon">⚫</div>
                                <div class="priority-label">Kritisk</div>
                                <small class="text-muted">Alt andet stopper</small>
                            </label>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-floating">
                                    <input type="date" class="form-control" id="dueDate" name="due_date">
                                    <label for="dueDate"><i class="bi bi-calendar-event me-2"></i>Deadline (valgfri)</label>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-floating">
                                    <select class="form-select" id="assignedTo" name="assigned_to_user_id">
                                        <option value="">Ikke tildelt endnu</option>
                                        <option value="1">Christian</option>
                                        <option value="2">Support Team</option>
                                        <option value="3">Netværk Team</option>
                                    </select>
                                    <label for="assignedTo"><i class="bi bi-person-badge me-2"></i>Tildel til</label>
                                </div>
                            </div>
                        </div>

                        <label class="form-label fw-bold mb-2 mt-3">
                            <i class="bi bi-tags me-2"></i>Tags (tryk Enter for at tilføje)
                        </label>
                        
                        <div class="tag-input-wrapper" id="tagInputWrapper">
                            <input type="text" id="tagInput" placeholder="Skriv tag...">
                        </div>
                        <input type="hidden" id="tags" name="tags">

                        <div class="form-floating mt-3">
                            <textarea class="form-control" id="internalNote" name="internal_note" 
                                      placeholder="Intern note" style="height: 100px;"></textarea>
                            <label for="internalNote">
                                <i class="bi bi-shield-lock me-2"></i>Intern Note (kun synlig for medarbejdere)
                            </label>
                        </div>
                    </div>

                    <!-- Step 4: Attachments -->
                    <div class="step-content" data-step="4">
                        <h3 class="mb-4"><i class="bi bi-paperclip me-2"></i>Vedhæft Filer (Valgfrit)</h3>

                        <div class="file-upload-area" id="fileUploadArea">
                            <div class="file-upload-icon">
                                <i class="bi bi-cloud-upload"></i>
                            </div>
                            <h5>Træk og slip filer her</h5>
                            <p class="text-muted">eller klik for at vælge filer</p>
                            <input type="file" id="fileInput" multiple hidden>
                            <button type="button" class="btn btn-outline-primary mt-2" onclick="document.getElementById('fileInput').click()">
                                <i class="bi bi-folder2-open me-2"></i>Vælg Filer
                            </button>
                        </div>

                        <div class="uploaded-files" id="uploadedFiles"></div>

                        <div class="alert alert-info mt-4">
                            <i class="bi bi-info-circle me-2"></i>
                            <strong>Tip:</strong> Du kan også tilføje skærmbilleder, logfiler eller screenshots 
                            der kan hjælpe med at diagnosticere problemet.
                        </div>
                    </div>

                </div>

                <!-- Navigation Actions -->
                <div class="wizard-actions">
                    <button type="button" class="btn btn-outline-secondary" id="prevBtn" onclick="changeStep(-1)" style="display: none;">
                        <i class="bi bi-arrow-left me-2"></i>Forrige
                    </button>
                    <div></div>
                    <button type="button" class="btn btn-primary" id="nextBtn" onclick="changeStep(1)">
                        Næste<i class="bi bi-arrow-right ms-2"></i>
                    </button>
                    <button type="submit" class="btn btn-primary" id="submitBtn" style="display: none;">
                        <i class="bi bi-check-circle me-2"></i>Opret Sag
                    </button>
                </div>

            </form>

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

<!-- Success Modal -->
<div class="modal fade" id="successModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-body success-animation">
                <div class="success-icon">
                    <i class="bi bi-check-circle-fill"></i>
                </div>
                <h3 class="mb-3">Sag Oprettet!</h3>
                <p class="text-muted mb-4">Din support sag er blevet oprettet med nummer:</p>
                <h2 class="text-primary mb-4" id="ticketNumber"></h2>
                <a href="/ticket/tickets" class="btn btn-primary me-2">
                    <i class="bi bi-list-ul me-2"></i>Se Alle Sager
                </a>
                <button type="button" class="btn btn-outline-secondary" onclick="window.location.reload()">
                    <i class="bi bi-plus-circle me-2"></i>Opret Ny Sag
                </button>
            </div>
        </div>
    </div>
</div>

<script>
let currentStep = 1;
const totalSteps = 4;
const tags = [];
let uploadedFiles = [];

// Initialize
document.addEventListener('DOMContentLoaded', function() {
    updateStepDisplay();
    initCustomerSearch();
    initTagInput();
    initFileUpload();
    initPriorityCards();
});

// Step Navigation
function changeStep(direction) {
    if (direction === 1 && !validateStep(currentStep)) {
        return;
    }
    
    currentStep += direction;
    if (currentStep < 1) currentStep = 1;
    if (currentStep > totalSteps) currentStep = totalSteps;
    
    updateStepDisplay();
}

function updateStepDisplay() {
    // Update step content
    document.querySelectorAll('.step-content').forEach(content => {
        content.classList.remove('active');
    });
    document.querySelector(`.step-content[data-step="${currentStep}"]`).classList.add('active');
    
    // Update progress indicators
    document.querySelectorAll('.wizard-step').forEach(step => {
        const stepNum = parseInt(step.dataset.step);
        step.classList.toggle('active', stepNum === currentStep);
    });
    
    // Update buttons
    document.getElementById('prevBtn').style.display = currentStep === 1 ? 'none' : 'block';
    document.getElementById('nextBtn').style.display = currentStep === totalSteps ? 'none' : 'block';
    document.getElementById('submitBtn').style.display = currentStep === totalSteps ? 'block' : 'none';
}

function validateStep(step) {
    switch(step) {
        case 1:
            const customerId = document.getElementById('customerId').value;
            if (!customerId || customerId === '0') {
                alert('⚠️ Vælg venligst en kunde fra søgeresultaterne');
                return false;
            }
            return true;
        case 2:
            const subject = document.getElementById('subject').value.trim();
            const description = document.getElementById('description').value.trim();
            if (!subject || !description) {
                alert('⚠️ Udfyld venligst emne og beskrivelse');
                return false;
            }
            return true;
        default:
            return true;
    }
}

// Customer Search
function initCustomerSearch() {
    const searchInput = document.getElementById('customerSearch');
    const results = document.getElementById('customerResults');
    
    let debounceTimer;
    searchInput.addEventListener('input', function() {
        clearTimeout(debounceTimer);
        const query = this.value.trim();
        
        if (query.length < 2) {
            results.classList.remove('show');
            return;
        }
        
        debounceTimer = setTimeout(() => searchCustomers(query), 300);
    });
    
    // Close results when clicking outside
    document.addEventListener('click', function(e) {
        if (!e.target.closest('.customer-search')) {
            results.classList.remove('show');
        }
    });
}

async function searchCustomers(query) {
    try {
        const response = await fetch(`/api/v1/customers?search=${encodeURIComponent(query)}&limit=20`);
        const data = await response.json();
        
        const results = document.getElementById('customerResults');
        const customers = data.customers || [];
        
        if (customers.length === 0) {
            results.innerHTML = '<div class="customer-item">Ingen resultater fundet</div>';
        } else {
            results.innerHTML = customers.map(c => {
                // Build display info
                const contactInfo = [];
                if (c.contact_name && c.contact_name.trim() !== '' && c.contact_name.trim() !== ' ') {
                    contactInfo.push(`<i class="bi bi-person me-1"></i>${c.contact_name}`);
                }
                if (c.contact_email) {
                    contactInfo.push(`<i class="bi bi-envelope me-1"></i>${c.contact_email}`);
                } else if (c.email) {
                    contactInfo.push(`<i class="bi bi-envelope me-1"></i>${c.email}`);
                }
                if (c.contact_phone) {
                    contactInfo.push(`<i class="bi bi-telephone me-1"></i>${c.contact_phone}`);
                } else if (c.phone) {
                    contactInfo.push(`<i class="bi bi-telephone me-1"></i>${c.phone}`);
                }
                
                const displayInfo = contactInfo.length > 0 ? contactInfo.join(' ') : `#${c.id}`;
                const cityInfo = c.city ? ` <span class="badge bg-secondary">${c.city}</span>` : '';
                
                return `
                    <div class="customer-item" onclick='selectCustomer(${JSON.stringify(c).replace(/'/g, "\\'")}, null)'}> 
                        <div class="customer-name">${c.name}${cityInfo}</div>
                        <div class="customer-id">${displayInfo}</div>
                    </div>
                `;
            }).join('');
        }
        
        results.classList.add('show');
    } catch (error) {
        console.error('Customer search error:', error);
        document.getElementById('customerResults').innerHTML = '<div class="customer-item text-danger">Fejl ved søgning</div>';
        document.getElementById('customerResults').classList.add('show');
    }
}

function selectCustomer(customer, contact) {
    document.getElementById('customerId').value = customer.id;
    document.getElementById('contactId').value = contact ? contact.id : '';
    
    // Set search field text
    if (contact && contact.name) {
        document.getElementById('customerSearch').value = `${contact.name} (${customer.name})`;
    } else if (customer.contact_name && customer.contact_name.trim() !== '' && customer.contact_name.trim() !== ' ') {
        document.getElementById('customerSearch').value = `${customer.contact_name} (${customer.name})`;
    } else {
        document.getElementById('customerSearch').value = customer.name;
    }
    
    // Build detailed display
    let displayText = `<strong>${customer.name}</strong> (#${customer.id})`;
    if (customer.city) {
        displayText += ` <span class="badge bg-secondary">${customer.city}</span>`;
    }
    
    // Add contact info if available
    if (contact) {
        displayText += `<br><i class="bi bi-person me-2"></i>${contact.name}`;
        if (contact.email) {
            displayText += ` <span class="text-muted">• ${contact.email}</span>`;
        }
    } else if (customer.contact_name && customer.contact_name.trim() !== '' && customer.contact_name.trim() !== ' ') {
        displayText += `<br><i class="bi bi-person me-2"></i>${customer.contact_name}`;
        if (customer.contact_email) {
            displayText += ` <span class="text-muted">• ${customer.contact_email}</span>`;
        }
    }
    
    document.getElementById('selectedCustomerName').innerHTML = displayText;
    document.getElementById('selectedCustomer').style.display = 'block';
    document.getElementById('customerResults').classList.remove('show');
}

// Tag Input
function initTagInput() {
    const tagInput = document.getElementById('tagInput');
    
    tagInput.addEventListener('keydown', function(e) {
        if (e.key === 'Enter') {
            e.preventDefault();
            const tag = this.value.trim();
            if (tag && !tags.includes(tag)) {
                tags.push(tag);
                updateTagDisplay();
                this.value = '';
            }
        }
    });
    
    document.getElementById('tagInputWrapper').addEventListener('click', function() {
        tagInput.focus();
    });
}

function updateTagDisplay() {
    const wrapper = document.getElementById('tagInputWrapper');
    const input = document.getElementById('tagInput');
    
    // Remove existing tags
    wrapper.querySelectorAll('.tag').forEach(tag => tag.remove());
    
    // Add tags
    tags.forEach((tag, index) => {
        const tagEl = document.createElement('div');
        tagEl.className = 'tag';
        tagEl.innerHTML = `
            ${tag}
            <span class="tag-remove" onclick="removeTag(${index})">×</span>
        `;
        wrapper.insertBefore(tagEl, input);
    });
    
    document.getElementById('tags').value = JSON.stringify(tags);
}

function removeTag(index) {
    tags.splice(index, 1);
    updateTagDisplay();
}

// File Upload
function initFileUpload() {
    const uploadArea = document.getElementById('fileUploadArea');
    const fileInput = document.getElementById('fileInput');
    
    uploadArea.addEventListener('click', () => fileInput.click());
    
    uploadArea.addEventListener('dragover', (e) => {
        e.preventDefault();
        uploadArea.classList.add('drag-over');
    });
    
    uploadArea.addEventListener('dragleave', () => {
        uploadArea.classList.remove('drag-over');
    });
    
    uploadArea.addEventListener('drop', (e) => {
        e.preventDefault();
        uploadArea.classList.remove('drag-over');
        handleFiles(e.dataTransfer.files);
    });
    
    fileInput.addEventListener('change', (e) => {
        handleFiles(e.target.files);
    });
}

function handleFiles(files) {
    Array.from(files).forEach(file => {
        uploadedFiles.push(file);
        addFileToDisplay(file);
    });
}

function addFileToDisplay(file) {
    const filesContainer = document.getElementById('uploadedFiles');
    const fileEl = document.createElement('div');
    fileEl.className = 'file-item';
    fileEl.innerHTML = `
        <div class="file-info">
            <i class="bi bi-file-earmark file-icon"></i>
            <div>
                <div class="fw-bold">${file.name}</div>
                <small class="text-muted">${(file.size / 1024).toFixed(1)} KB</small>
            </div>
        </div>
        <button type="button" class="btn btn-sm btn-outline-danger" onclick="removeFile('${file.name}')">
            <i class="bi bi-trash"></i>
        </button>
    `;
    filesContainer.appendChild(fileEl);
}

function removeFile(fileName) {
    uploadedFiles = uploadedFiles.filter(f => f.name !== fileName);
    document.getElementById('uploadedFiles').innerHTML = '';
    uploadedFiles.forEach(f => addFileToDisplay(f));
}

// Priority Cards
function initPriorityCards() {
    document.querySelectorAll('.priority-card').forEach(card => {
        card.addEventListener('click', function() {
            document.querySelectorAll('.priority-card').forEach(c => c.classList.remove('selected'));
            this.classList.add('selected');
        });
    });
}

// AI Analysis
let aiSuggestion = null;
let suggestedTagsList = [];
let analysisTimeout = null;

function analyzeDescription() {
    clearTimeout(analysisTimeout);
    const description = document.getElementById('description').value.trim();
    
    if (description.length < 20) {
        document.getElementById('aiSuggestBox').style.display = 'none';
        return;
    }
    
    analysisTimeout = setTimeout(async () => {
        try {
            // Simple keyword-based AI simulation
            const subject = document.getElementById('subject').value.trim().toLowerCase();
            const text = (description + ' ' + subject).toLowerCase();
            
            let suggestedCategory = '';
            let suggestedPriority = 'normal';
            suggestedTagsList = [];
            
            console.log('Analyzing text:', text);
            
            // Category detection
            if (text.includes('netværk') || text.includes('internet') || text.includes('wifi') || text.includes('forbindelse')) {
                suggestedCategory = 'network';
            } else if (text.includes('email') || text.includes('mail') || text.includes('outlook')) {
                suggestedCategory = 'email';
            } else if (text.includes('firewall') || text.includes('sikkerhed') || text.includes('virus') || text.includes('malware')) {
                suggestedCategory = 'security';
            } else if (text.includes('computer') || text.includes('pc') || text.includes('laptop') || text.includes('skærm')) {
                suggestedCategory = 'hardware';
            } else if (text.includes('software') || text.includes('program') || text.includes('app')) {
                suggestedCategory = 'software';
            }
            
            // Priority detection
            if (text.includes('nede') || text.includes('virker ikke') || text.includes('total') || text.includes('alle')) {
                suggestedPriority = 'urgent';
            } else if (text.includes('vigtig') || text.includes('hurtig') || text.includes('asap')) {
                suggestedPriority = 'high';
            } else if (text.includes('når tid') || text.includes('ikke haster')) {
                suggestedPriority = 'low';
            }
            
            // Tag detection
            const tagKeywords = {
                'wifi': ['wifi', 'trådløs', 'wireless', 'wlan'],
                'vpn': ['vpn', 'fjernforbindelse', 'remote', 'fjern'],
                'printer': ['printer', 'print', 'udskriv', 'printe'],
                'firewall': ['firewall', 'brandmur'],
                'switch': ['switch', 'netværksswitch'],
                'backup': ['backup', 'sikkerhedskopi', 'back-up'],
                'password': ['password', 'kodeord', 'adgangskode', 'password'],
                'server': ['server', 'serveren'],
                'email': ['email', 'mail', 'outlook', 'e-mail'],
                'windows': ['windows', 'pc'],
                'mac': ['mac', 'macos', 'apple'],
                'office365': ['office365', 'o365', 'office 365'],
                'teams': ['teams', 'microsoft teams'],
                'onedrive': ['onedrive', 'one drive'],
                'sharepoint': ['sharepoint', 'share point'],
                'router': ['router', 'routeren'],
                'internet': ['internet', 'internettet', 'nettet'],
                'lan': ['lan', 'lokalnetværk'],
                'wan': ['wan'],
                'dns': ['dns'],
                'dhcp': ['dhcp'],
                'ip': ['ip-adresse', 'ip adresse', 'ip'],
                'kabel': ['kabel', 'ledning', 'kabling'],
                'opdatering': ['opdatering', 'update', 'opdater'],
                'fejl': ['fejl', 'error', 'fejlmelding', 'fejler'],
                'langsom': ['langsom', 'slow', 'træg', 'hurtig'],
                'adgang': ['adgang', 'access', 'login', 'logge'],
                'installation': ['installation', 'installer', 'opsætning', 'installere'],
                'telefon': ['telefon', 'mobil', 'opkald', 'viderestille', 'viderestillet', 'omstille', 'omstilling'],
                'netværk': ['netværk', 'network', 'net'],
                'forbindelse': ['forbindelse', 'tilslutning', 'forbinder', 'connect'],
                'sikkerhed': ['sikkerhed', 'security', 'virus', 'malware', 'hacking'],
                'laptop': ['laptop', 'bærbar', 'notebook'],
                'skærm': ['skærm', 'monitor', 'display'],
                'mus': ['mus', 'mouse'],
                'tastatur': ['tastatur', 'keyboard'],
                'webex': ['webex', 'web ex'],
                'zoom': ['zoom'],
                'licens': ['licens', 'license', 'abonnement'],
                'bruger': ['bruger', 'user', 'medarbejder']
            };
            
            for (const [tag, keywords] of Object.entries(tagKeywords)) {
                if (keywords.some(kw => text.includes(kw))) {
                    suggestedTagsList.push(tag);
                }
            }
            
            console.log('Found tags:', suggestedTagsList);
            
            // Limit to max 5 tags
            suggestedTagsList = suggestedTagsList.slice(0, 5);
            
            // Store for later use
            aiSuggestion = { 
                category: suggestedCategory, 
                priority: suggestedPriority, 
                tags: suggestedTagsList 
            };
            
            // Show category/priority AI box if found
            if (suggestedCategory || suggestedPriority !== 'normal') {
                
                const categoryNames = {
                    'network': 'Netværk',
                    'hardware': 'Hardware',
                    'software': 'Software',
                    'security': 'Sikkerhed',
                    'email': 'Email'
                };
                
                const priorityNames = {
                    'low': 'Lav',
                    'normal': 'Normal',
                    'high': 'Høj',
                    'urgent': 'Akut',
                    'critical': 'Kritisk'
                };
                
                let suggestionText = '🤖 ';
                if (suggestedCategory) {
                    suggestionText += `Kategori: ${categoryNames[suggestedCategory]}`;
                }
                if (suggestedCategory && suggestedPriority !== 'normal') {
                    suggestionText += ' • ';
                }
                if (suggestedPriority !== 'normal') {
                    suggestionText += `Prioritet: ${priorityNames[suggestedPriority]}`;
                }
                
                document.getElementById('aiSuggestion').textContent = suggestionText;
                document.getElementById('aiSuggestBox').style.display = 'block';
            } else {
                document.getElementById('aiSuggestBox').style.display = 'none';
            }
            
            // Show suggested tags immediately (separate from category/priority)
            console.log('Suggested tags:', suggestedTagsList);
            if (suggestedTagsList.length > 0) {
                showSuggestedTags();
            } else {
                document.getElementById('suggestedTagsBox').style.display = 'none';
            }
        } catch (error) {
            console.error('AI analysis error:', error);
        }
    }, 1000);
}

function showSuggestedTags() {
    if (!suggestedTagsList || suggestedTagsList.length === 0) return;
    
    const container = document.getElementById('suggestedTags');
    container.innerHTML = suggestedTagsList.map(tag => `
        <button type="button" class="btn btn-sm btn-outline-primary" onclick="addSuggestedTag('${tag}')">
            <i class="bi bi-plus-circle me-1"></i>${tag}
        </button>
    `).join('');
    
    document.getElementById('suggestedTagsBox').style.display = 'block';
}

function addSuggestedTag(tag) {
    if (!tags.includes(tag)) {
        tags.push(tag);
        updateTagDisplay();
    }
    // Remove from suggested
    suggestedTagsList = suggestedTagsList.filter(t => t !== tag);
    showSuggestedTags();
    if (suggestedTagsList.length === 0) {
        document.getElementById('suggestedTagsBox').style.display = 'none';
    }
}

function applyAISuggestion() {
    if (!aiSuggestion) return;
    
    if (aiSuggestion.category) {
        document.getElementById('category').value = aiSuggestion.category;
    }
    
    if (aiSuggestion.priority) {
        const priorityRadio = document.querySelector(`input[name="priority"][value="${aiSuggestion.priority}"]`);
        if (priorityRadio) {
            priorityRadio.checked = true;
            priorityRadio.closest('.priority-card').click();
        }
    }
    
    document.getElementById('aiSuggestBox').style.display = 'none';
    
    // Show success feedback
    const box = document.getElementById('aiSuggestBox');
    box.style.background = 'linear-gradient(135deg, #28a745 0%, #20c997 100%)';
    box.innerHTML = '<i class="bi bi-check-circle"></i> <strong>Forslag anvendt!</strong>';
    box.style.display = 'block';
    
    setTimeout(() => {
        box.style.display = 'none';
        box.style.background = 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)';
        box.innerHTML = '<i class="bi bi-stars"></i><h5>AI Forslag</h5><p class="mb-0" id="aiSuggestion"></p><button type="button" class="btn btn-sm btn-light mt-2" onclick="applyAISuggestion()"><i class="bi bi-check-circle me-1"></i>Anvend Forslag</button>';
    }, 2000);
}

// Form Submission
document.getElementById('ticketForm').addEventListener('submit', async function(e) {
    e.preventDefault();
    
    if (!validateStep(currentStep)) {
        return;
    }
    
    const customerId = document.getElementById('customerId').value;
    
    const contactId = document.getElementById('contactId').value;
    
    const formData = {
        customer_id: parseInt(customerId),
        contact_id: contactId ? parseInt(contactId) : null,
        subject: document.getElementById('subject').value,
        description: document.getElementById('description').value,
        priority: document.querySelector('input[name="priority"]:checked').value,
        category: document.getElementById('category').value || null,
        source: document.getElementById('channel').value,
        due_date: document.getElementById('dueDate').value || null,
        assigned_to_user_id: document.getElementById('assignedTo').value ? parseInt(document.getElementById('assignedTo').value) : null,
        tags: tags.length > 0 ? tags : null,
        status: 'open'
    };
    
    console.log('Creating ticket with data:', formData);
    
    try {
        const response = await fetch('/api/v1/ticket/tickets', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify(formData)
        });
        
        const result = await response.json();
        console.log('Server response:', result);
        
        if (!response.ok) {
            throw new Error(result.detail || 'Failed to create ticket');
        }
        
        // Show success modal
        document.getElementById('ticketNumber').textContent = result.ticket_number;
        const modal = new bootstrap.Modal(document.getElementById('successModal'));
        modal.show();
        
    } catch (error) {
        console.error('Error creating ticket:', error);
        alert('❌ Fejl ved oprettelse af sag: ' + error.message);
    }
});
</script>
{% endblock %}