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

{% block title %}{{ case.titel }} - BMC Hub{% endblock %}

{% block extra_css %}
<style>
    .back-link {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        color: var(--accent);
        text-decoration: none;
        margin-bottom: 1.5rem;
        transition: all 0.2s;
    }

    .back-link:hover {
        gap: 1rem;
    }

    .card {
        border: none;
        border-radius: 12px;
        margin-bottom: 1.5rem;
        box-shadow: 0 2px 8px rgba(0,0,0,0.05);
        border: 1px solid rgba(0,0,0,0.1);
    }

    .card-header {
        background: var(--accent-light);
        border-bottom: 1px solid rgba(0,0,0,0.1);
        padding: 1.2rem;
        border-radius: 12px 12px 0 0;
    }

    .card-body {
        padding: 1.5rem;
    }

    .card-footer {
        background: transparent;
        border-top: 1px solid rgba(0,0,0,0.1);
        padding: 1rem;
    }

    .btn-sm {
        padding: 0.4rem 0.8rem;
        font-size: 0.85rem;
        border-radius: 6px;
    }

    .relation-card {
        padding: 1rem 0;
        border-bottom: 1px solid rgba(0,0,0,0.1);
    }

    .relation-card:last-child {
        border-bottom: none;
    }

    .relation-type {
        display: inline-block;
        background: var(--accent-light);
        color: var(--accent);
        padding: 0.3rem 0.8rem;
        border-radius: 20px;
        font-size: 0.75rem;
        font-weight: 600;
        margin-right: 0.5rem;
        margin-bottom: 0.5rem;
    }

    .relation-link {
        color: var(--accent);
        text-decoration: none;
        font-weight: 500;
    }

    .relation-link:hover {
        text-decoration: underline;
    }

    .info-row {
        display: flex;
        justify-content: space-between;
        padding: 0.8rem 0;
        border-bottom: 1px solid rgba(0,0,0,0.05);
    }

    .info-row:last-child {
        border-bottom: none;
    }

    .info-label {
        font-weight: 600;
        color: var(--text-secondary);
        min-width: 150px;
    }

    .info-value {
        color: var(--text-primary);
    }

    .tag {
        display: inline-block;
        background: var(--accent-light);
        color: var(--accent);
        padding: 0.4rem 0.8rem;
        border-radius: 20px;
        font-size: 0.85rem;
        font-weight: 500;
        margin-right: 0.5rem;
        margin-bottom: 0.5rem;
    }

    .person-card {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1rem;
        background: var(--bg-body);
        border-radius: 8px;
        margin-bottom: 0.5rem;
    }

    .person-info strong {
        display: block;
        color: var(--accent);
    }

    .person-info small {
        color: var(--text-secondary);
        display: block;
    }

    .action-buttons {
        display: flex;
        gap: 1rem;
        flex-wrap: wrap;
        margin-top: 2rem;
    }

    .btn-delete {
        background-color: #e74c3c;
        color: white;
    }

    .btn-delete:hover {
        background-color: #c0392b;
    }

    .form-control, .form-select {
        border-radius: 8px;
        border: 1px solid rgba(0,0,0,0.1);
    }

    .tag-closed {
        background-color: #e0e0e0;
        color: #666;
        text-decoration: line-through;
    }

    [data-bs-theme="dark"] .tag-closed {
        background-color: #3a3a3a;
        color: #999;
    }

    .tag-state-badge {
        font-size: 0.75rem;
        padding: 0.2rem 0.4rem;
        border-radius: 4px;
        margin-left: 0.5rem;
        font-weight: 600;
    }

    .tag-state-open {
        background: #d4edda;
        color: #155724;
    }

    .tag-state-closed {
        background: #f8d7da;
        color: #721c24;
    }

    [data-bs-theme="dark"] .tag-state-open {
        background: #1e4620;
        color: #7fd98d;
    }

    [data-bs-theme="dark"] .tag-state-closed {
        background: #5c2b2f;
        color: #f8a5ac;
    }

    .tag-toggle-btn {
        background: none;
        border: 1px solid rgba(0,0,0,0.2);
        padding: 0.2rem 0.5rem;
        border-radius: 4px;
        cursor: pointer;
        font-size: 0.75rem;
        margin-left: 0.5rem;
        transition: all 0.2s;
    }

    .tag-toggle-btn:hover {
        background: rgba(0,0,0,0.05);
    }

    .tag-toggle-open {
        color: #28a745;
        border-color: #28a745;
    }

    .tag-toggle-open:hover {
        background: #28a745;
        color: white;
    }

    .tag-toggle-closed {
        color: #6c757d;
        border-color: #6c757d;
    }

    .tag-toggle-closed:hover {
        background: #6c757d;
        color: white;
    }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid" style="margin-top: 2rem; margin-bottom: 2rem; max-width: 1400px;">
    <!-- Back Link -->
    <a href="/sag" class="back-link">
        <i class="bi bi-chevron-left"></i> Tilbage til sager
    </a>

    <!-- Quick Info Bar -->
    <div class="card mb-3" style="background: var(--bg-card); border-left: 4px solid var(--accent); box-shadow: 0 1px 3px rgba(0,0,0,0.08);">
        <div class="card-body py-2 px-3">
            <div class="d-flex flex-wrap align-items-center gap-3" style="font-size: 0.85rem;">
                <div class="d-flex align-items-center">
                    <strong style="color: var(--accent); margin-right: 0.4rem;">ID:</strong>
                    <span>{{ case.id }}</span>
                </div>
                <div class="d-flex align-items-center" style="border-left: 1px solid rgba(0,0,0,0.1); padding-left: 0.75rem;">
                    <strong style="color: var(--accent); margin-right: 0.4rem;">Kunde:</strong>
                    <span>{{ customer.name if customer else 'Ingen kunde' }}</span>
                </div>
                <div class="d-flex align-items-center" style="border-left: 1px solid rgba(0,0,0,0.1); padding-left: 0.75rem;">
                    <strong style="color: var(--accent); margin-right: 0.4rem;">Hovedkontakt:</strong>
                    {% if hovedkontakt %}
                    <span style="cursor: pointer; text-decoration: underline; color: var(--accent);" 
                          onclick="showKontaktModal()" 
                          title="Klik for at se kontaktinfo">
                        {{ hovedkontakt.first_name ~ ' ' ~ hovedkontakt.last_name }}
                    </span>
                    {% else %}
                    <span>Ingen kontakt</span>
                    {% endif %}
                </div>
                <div class="d-flex align-items-center" style="border-left: 1px solid rgba(0,0,0,0.1); padding-left: 0.75rem;">
                    <strong style="color: var(--accent); margin-right: 0.4rem;">Afdeling:</strong>
                    <span style="cursor: pointer; text-decoration: underline; color: var(--accent);" 
                          onclick="showAfdelingModal()" 
                          title="Klik for at ændre afdeling">
                        {{ customer.department if customer and customer.department else 'N/A' }}
                    </span>
                </div>
                <div class="d-flex align-items-center" style="border-left: 1px solid rgba(0,0,0,0.1); padding-left: 0.75rem;">
                    <strong style="color: var(--accent); margin-right: 0.4rem;">Status:</strong>
                    <span class="badge" style="background: var(--accent); font-size: 0.75rem;">{{ case.status }}</span>
                </div>
                <div class="d-flex align-items-center" style="border-left: 1px solid rgba(0,0,0,0.1); padding-left: 0.75rem;">
                    <strong style="color: var(--accent); margin-right: 0.4rem;">Opdateret:</strong>
                    <span>{{ case.updated_at.strftime('%d/%m-%Y') if case.updated_at else 'N/A' }}</span>
                </div>
                <div class="d-flex align-items-center" style="border-left: 1px solid rgba(0,0,0,0.1); padding-left: 0.75rem;">
                    <strong style="color: var(--accent); margin-right: 0.4rem;">Deadline:</strong>
                    <span>{{ case.deadline.strftime('%d/%m-%Y') if case.deadline else 'Ikke sat' }}</span>
                </div>
            </div>
        </div>
    </div>

    <!-- ROW 1: Main Info + Tags + Hardware (40% height) -->
    <div class="row mb-3" style="height: 40vh;">
        <!-- Main Case Info (50% width) -->
        <div class="col-md-6 h-100">
            <div class="card h-100 d-flex flex-column">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h3 class="mb-0" style="color: var(--accent);">{{ case.titel }}</h3>
                    <div>
                        <a href="/sag/{{ case.id }}/edit" class="btn btn-sm btn-outline-primary me-2">
                            <i class="bi bi-pencil"></i>
                        </a>
                        <button class="btn btn-sm btn-outline-danger" onclick="confirmDeleteCase()">
                            <i class="bi bi-trash"></i>
                        </button>
                    </div>
                </div>
                <div class="card-body flex-grow-1 overflow-auto">
                    <div class="info-row">
                        <span class="info-label">Status</span>
                        <span class="tag">{{ case.status }}</span>
                    </div>
                    <div class="info-row">
                        <span class="info-label">Beskrivelse</span>
                        <span class="info-value">{{ case.beskrivelse or 'Ingen beskrivelse' }}</span>
                    </div>
                    <div class="info-row">
                        <span class="info-label">Oprettet</span>
                        <span class="info-value">{{ case.created_at|string|truncate(19, True, '') if case.created_at else 'Ikke sat' }}</span>
                    </div>
                    {% if case.deadline %}
                    <div class="info-row">
                        <span class="info-label">Deadline</span>
                        <span class="info-value">{{ case.deadline|string|truncate(19, True, '') if case.deadline else 'Ikke sat' }}</span>
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>

        <!-- Tags + Hardware (50% width) -->
        <div class="col-md-6 h-100">
            <div class="row h-50 mb-2">
                <div class="col-12">
                    <div class="card h-100 d-flex flex-column">
                        <div class="card-header d-flex justify-content-between align-items-center">
                            <h6 class="mb-0" style="color: var(--accent);">📌 Tags</h6>
                            <button class="btn btn-sm btn-outline-primary" onclick="window.showTagPicker('case', {{ case.id }}, () => window.renderEntityTags('case', {{ case.id }}, 'case-tags'))">
                                <i class="bi bi-plus-lg"></i>
                            </button>
                        </div>
                        <div class="card-body flex-grow-1 overflow-auto">
                            <div id="case-tags" class="d-flex flex-wrap">
                                <div class="text-center w-100 py-2">
                                    <span class="spinner-border spinner-border-sm text-muted"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row h-50">
                <div class="col-12">
                    <div class="card h-100 d-flex flex-column">
                        <div class="card-header d-flex justify-content-between align-items-center">
                            <h6 class="mb-0" style="color: var(--accent);">💻 Hardware</h6>
                            <button class="btn btn-sm btn-outline-primary" onclick="promptLinkHardware()">
                                <i class="bi bi-link-45deg"></i>
                            </button>
                        </div>
                        <div class="card-body flex-grow-1 overflow-auto p-0">
                            <div class="list-group list-group-flush" id="hardware-list">
                                <div class="p-3 text-center text-muted">Henter hardware...</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- ROW 2: Locations + Contacts + Customers (35% height) -->
    <div class="row mb-3" style="height: 35vh;">
        <div class="col-md-4 h-100">
            <div class="card h-100 d-flex flex-column">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h6 class="mb-0" style="color: var(--accent);">📍 Lokationer</h6>
                    <button class="btn btn-sm btn-outline-primary" onclick="promptLinkLocation()">
                        <i class="bi bi-plus-lg"></i>
                    </button>
                </div>
                <div class="card-body flex-grow-1 overflow-auto p-0">
                    <div class="list-group list-group-flush" id="locations-list">
                        <div class="p-3 text-center text-muted">Henter lokationer...</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-4 h-100">
            <div class="card h-100 d-flex flex-column">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h6 class="mb-0" style="color: var(--accent);">👥 Kontakter</h6>
                    <button class="btn btn-sm btn-outline-primary" onclick="showContactSearch()">
                        <i class="bi bi-plus-lg"></i>
                    </button>
                </div>
                <div class="card-body flex-grow-1 overflow-auto" id="contacts-container">
                    {% if contacts %}
                    {% for contact in contacts %}
                    <div class="person-card">
                        <div class="person-info">
                            <strong>{{ contact.contact_name }}</strong>
                            <small>{{ contact.role }}</small>
                            {% if contact.contact_email %}
                            <small>{{ contact.contact_email }}</small>
                            {% endif %}
                        </div>
                        <button onclick="removeContact({{ case.id }}, {{ contact.contact_id }})" class="btn btn-sm btn-delete">✕</button>
                    </div>
                    {% endfor %}
                    {% else %}
                    <p class="text-muted text-center">Ingen kontakter</p>
                    {% endif %}
                </div>
            </div>
        </div>
        <div class="col-md-4 h-100">
            <div class="card h-100 d-flex flex-column">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h6 class="mb-0" style="color: var(--accent);">🏢 Kunder</h6>
                    <button class="btn btn-sm btn-outline-primary" onclick="showCustomerSearch()">
                        <i class="bi bi-plus-lg"></i>
                    </button>
                </div>
                <div class="card-body flex-grow-1 overflow-auto" id="customers-container">
                    {% if customers %}
                    {% for customer in customers %}
                    <div class="person-card">
                        <div class="person-info">
                            <strong><a href="/customers/{{ customer.customer_id }}">{{ customer.customer_name }}</a></strong>
                            <small>{{ customer.role }}</small>
                            {% if customer.customer_email %}
                            <small>{{ customer.customer_email }}</small>
                            {% endif %}
                        </div>
                        <button onclick="removeCustomer({{ case.id }}, {{ customer.customer_id }})" class="btn btn-sm btn-delete">✕</button>
                    </div>
                    {% endfor %}
                    {% else %}
                    <p class="text-muted text-center">Ingen kunder</p>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>

    <!-- ROW 3: Relations + SAG Compatibility (25% height) -->
    <div class="row" style="height: 25vh;">
        <div class="col-md-8 h-100">
            <div class="card h-100 d-flex flex-column">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h6 class="mb-0" style="color: var(--accent);">🔗 Relaterede sager</h6>
                    <button class="btn btn-sm btn-outline-primary" onclick="showRelationModal()">
                        <i class="bi bi-plus-lg"></i>
                    </button>
                </div>
                <div class="card-body flex-grow-1 overflow-auto">
                    {% if relationer %}
                    {% for rel in relationer %}
                    <div class="relation-card">
                        <span class="relation-type">{{ rel.relationstype }}</span>
                        {% if rel.kilde_sag_id == case.id %}
                        → <a href="/sag/{{ rel.målsag_id }}" class="relation-link">{{ rel.mål_titel }}</a>
                        {% else %}
                        ← <a href="/sag/{{ rel.kilde_sag_id }}" class="relation-link">{{ rel.kilde_titel }}</a>
                        {% endif %}
                        <button onclick="deleteRelation({{ rel.id }})" class="btn btn-sm btn-delete float-end">✕</button>
                    </div>
                    {% endfor %}
                    {% else %}
                    <p class="text-muted text-center">Ingen relaterede sager</p>
                    {% endif %}
                </div>
            </div>
        </div>
        <div class="col-md-4 h-100">
            <div class="card h-100 d-flex flex-column">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h6 class="mb-0" style="color: var(--accent);">🔧 SAG Kompatibilitet</h6>
                    <button class="btn btn-sm btn-primary" onclick="showCompatibilityModal()">
                        Vis
                    </button>
                </div>
                <div class="card-body flex-grow-1 overflow-auto text-center d-flex align-items-center justify-content-center">
                    <div>
                        <i class="bi bi-diagram-3 text-muted" style="font-size: 3rem;"></i>
                        <p class="text-muted mt-2 mb-0">Klik "Vis" for at se alle</p>
                        <p class="text-muted small">SAG kompatible moduler</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Search Modals -->
    <div class="modal fade" id="contactSearchModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Søg kontakt</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <input type="text" id="contactSearch" placeholder="Søg efter kontakt..." class="form-control mb-3">
                    <div id="contactSearchResults" style="max-height: 300px; overflow-y: auto;"></div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="customerSearchModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Søg kunde</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <input type="text" id="customerSearch" placeholder="Søg efter kunde..." class="form-control mb-3">
                    <div id="customerSearchResults" style="max-height: 300px; overflow-y: auto;"></div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="relationModal" tabindex="-1">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">🔗 Tilføj relation til sag</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label fw-bold">1. Søg og vælg sag</label>
                        <input type="text" 
                               id="relationCaseSearch" 
                               placeholder="Søg efter sag ID, titel, kunde eller beskrivelse..." 
                               class="form-control form-control-lg"
                               autocomplete="off">
                        <div id="relationSearchResults" 
                             style="max-height: 400px; overflow-y: auto; margin-top: 0.5rem;"
                             class="border rounded"></div>
                    </div>
                    
                    <div id="selectedCasePreview" style="display: none;" class="alert alert-info mb-3">
                        <div class="d-flex justify-content-between align-items-start">
                            <div>
                                <strong>Valgt sag:</strong>
                                <div id="selectedCaseTitle" class="mt-1"></div>
                            </div>
                            <button type="button" class="btn btn-sm btn-outline-secondary" onclick="clearSelectedRelationCase()">
                                Ryd valg
                            </button>
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label fw-bold">2. Vælg relationstype</label>
                        <select id="relationTypeSelect" class="form-control form-control-lg" onchange="updateAddRelationButton()">
                            <option value="">Vælg hvordan sagerne er relateret...</option>
                            <option value="relateret">🔗 Relateret - Generel relation</option>
                            <option value="afhænger af">⏳ Afhænger af - Denne sag venter på den anden</option>
                            <option value="blokkerer">🚫 Blokkerer - Denne sag blokerer den anden</option>
                            <option value="duplikat">📋 Duplikat - Sagerne er den samme</option>
                            <option value="forårsaget af">🔄 Forårsaget af - Denne sag er konsekvens af den anden</option>
                            <option value="følger op på">📌 Følger op på - Fortsættelse af tidligere sag</option>
                        </select>
                    </div>
                    
                    <div class="alert alert-light d-flex align-items-center" style="font-size: 0.9rem;">
                        <i class="bi bi-info-circle me-2"></i>
                        <div>
                            <strong>Tip:</strong> Brug pile (↑↓) til at navigere i søgeresultater, Enter til at vælge.
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Luk</button>
                    <button type="button" 
                            class="btn btn-primary btn-lg" 
                            onclick="addRelation()"
                            id="addRelationBtn"
                            disabled>
                        <i class="bi bi-plus-circle me-1"></i> Tilføj relation
                    </button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="compatibilityModal" tabindex="-1">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">🔧 SAG Kompatible Moduler</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-6">
                            <h6 class="text-muted mb-3">📦 Aktive Moduler</h6>
                            <div class="list-group">
                                <div class="list-group-item">
                                    <div class="d-flex align-items-center">
                                        <i class="bi bi-check-circle-fill text-success me-2"></i>
                                        <strong>Sager (SAG)</strong>
                                    </div>
                                    <small class="text-muted">Aktiv modul</small>
                                </div>
                                <div class="list-group-item">
                                    <div class="d-flex align-items-center">
                                        <i class="bi bi-check-circle-fill text-success me-2"></i>
                                        <strong>Hardware</strong>
                                    </div>
                                    <small class="text-muted">Kan linkes til sager</small>
                                </div>
                                <div class="list-group-item">
                                    <div class="d-flex align-items-center">
                                        <i class="bi bi-check-circle-fill text-success me-2"></i>
                                        <strong>Lokationer</strong>
                                    </div>
                                    <small class="text-muted">Kan linkes til sager</small>
                                </div>
                                <div class="list-group-item">
                                    <div class="d-flex align-items-center">
                                        <i class="bi bi-check-circle-fill text-success me-2"></i>
                                        <strong>Tags</strong>
                                    </div>
                                    <small class="text-muted">Global tag system</small>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <h6 class="text-muted mb-3">🔄 Integration</h6>
                            <div class="list-group">
                                <div class="list-group-item">
                                    <div class="d-flex align-items-center">
                                        <i class="bi bi-people me-2 text-primary"></i>
                                        <strong>CRM Integration</strong>
                                    </div>
                                    <small class="text-muted">Kunder & Kontakter</small>
                                </div>
                                <div class="list-group-item">
                                    <div class="d-flex align-items-center">
                                        <i class="bi bi-link-45deg me-2 text-primary"></i>
                                        <strong>Relationer</strong>
                                    </div>
                                    <small class="text-muted">Link mellem sager</small>
                                </div>
                                <div class="list-group-item">
                                    <div class="d-flex align-items-center">
                                        <i class="bi bi-diagram-3 me-2 text-primary"></i>
                                        <strong>Workflows</strong>
                                    </div>
                                    <small class="text-muted">Tag-baseret automation</small>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Luk</button>
                </div>
            </div>
        </div>
    </div>

    <script>
        const caseId = {{ case.id }};
        let contactSearchTimeout;
        let customerSearchTimeout;
        let relationSearchTimeout;
        let selectedRelationCaseId = null;

        // Modal instances
        let contactSearchModal, customerSearchModal, relationModal, compatibilityModal;

        // Initialize everything when DOM is ready
        document.addEventListener('DOMContentLoaded', () => {
            // Initialize modals
            contactSearchModal = new bootstrap.Modal(document.getElementById('contactSearchModal'));
            customerSearchModal = new bootstrap.Modal(document.getElementById('customerSearchModal'));
            relationModal = new bootstrap.Modal(document.getElementById('relationModal'));
            compatibilityModal = new bootstrap.Modal(document.getElementById('compatibilityModal'));

            // Setup search handlers
            setupContactSearch();
            setupCustomerSearch();
            setupRelationSearch();
            
            // Render Global Tags
            if (window.renderEntityTags) {
                window.renderEntityTags('case', {{ case.id }}, 'case-tags');
            }

            // Set default context for keyboard shortcuts (Option+Shift+T)
            if (window.setTagPickerContext) {
                window.setTagPickerContext('case', {{ case.id }}, () => window.renderEntityTags('case', {{ case.id }}, 'case-tags'));
            }
            
            // Load Hardware & Locations
            loadCaseHardware();
            loadCaseLocations();
        });

        // Show modal functions
        function showContactSearch() {
            contactSearchModal.show();
            setTimeout(() => document.getElementById('contactSearch').focus(), 300);
        }

        function showCustomerSearch() {
            customerSearchModal.show();
            setTimeout(() => document.getElementById('customerSearch').focus(), 300);
        }

        function showRelationModal() {
            relationModal.show();
            setTimeout(() => document.getElementById('relationCaseSearch').focus(), 300);
        }

        function showCompatibilityModal() {
            compatibilityModal.show();
        }

        function confirmDeleteCase() {
            if(confirm('Slet denne sag?')) {
                fetch('/api/v1/sag/{{ case.id }}', {method: 'DELETE'})
                    .then(() => window.location='/sag');
            }
        }

        // Contact Search
        function setupContactSearch() {
            const contactSearchInput = document.getElementById('contactSearch');
            contactSearchInput.addEventListener('input', function(e) {
                clearTimeout(contactSearchTimeout);
                const query = e.target.value.trim();
                
                if (query.length < 2) {
                    document.getElementById('contactSearchResults').innerHTML = '';
                    return;
                }
                
                contactSearchTimeout = setTimeout(async () => {
                    try {
                        const response = await fetch(`/api/v1/search/contacts?q=${encodeURIComponent(query)}`);
                        const contacts = await response.json();
                        
                        const resultsDiv = document.getElementById('contactSearchResults');
                        if (contacts.length === 0) {
                            resultsDiv.innerHTML = '<div class="p-3 text-muted">Ingen kontakter fundet</div>';
                        } else {
                            resultsDiv.innerHTML = contacts.map(c => `
                                <div class="list-group-item list-group-item-action" style="cursor: pointer;" 
                                     onclick="addContact(${caseId}, ${c.id}, '${(c.first_name + ' ' + c.last_name).replace(/'/g, "\\'")}')">
                                    <strong>${c.first_name} ${c.last_name}</strong>
                                    <div class="small text-muted">${c.email || ''} ${c.user_company ? '(' + c.user_company + ')' : ''}</div>
                                </div>
                            `).join('');
                        }
                    } catch (err) {
                        console.error('Error searching contacts:', err);
                    }
                }, 300);
            });
        }

        async function addContact(caseId, contactId, contactName) {
            try {
                const response = await fetch(`/api/v1/sag/${caseId}/contacts`, {
                    method: 'POST',
                    headers: {'Content-Type': 'application/json'},
                    body: JSON.stringify({contact_id: contactId, role: 'Kontakt'})
                });
                
                if (response.ok) {
                    contactSearchModal.hide();
                    window.location.reload();
                } else {
                    const error = await response.json();
                    alert(`Fejl: ${error.detail}`);
                }
            } catch (err) {
                alert('Fejl ved tilføjelse af kontakt: ' + err.message);
            }
        }

        async function removeContact(caseId, contactId) {
            if (confirm('Fjern denne kontakt fra sagen?')) {
                const response = await fetch(`/api/v1/sag/${caseId}/contacts/${contactId}`, {method: 'DELETE'});
                if (response.ok) {
                    window.location.reload();
                } else {
                    alert('Fejl ved fjernelse af kontakt');
                }
            }
        }

        // Customer Search
        function setupCustomerSearch() {
            const customerSearchInput = document.getElementById('customerSearch');
            customerSearchInput.addEventListener('input', function(e) {
                clearTimeout(customerSearchTimeout);
                const query = e.target.value.trim();
                
                if (query.length < 2) {
                    document.getElementById('customerSearchResults').innerHTML = '';
                    return;
                }
                
                customerSearchTimeout = setTimeout(async () => {
                    try {
                        const response = await fetch(`/api/v1/search/customers?q=${encodeURIComponent(query)}`);
                        const customers = await response.json();
                        
                        const resultsDiv = document.getElementById('customerSearchResults');
                        if (customers.length === 0) {
                            resultsDiv.innerHTML = '<div class="p-3 text-muted">Ingen kunder fundet</div>';
                        } else {
                            resultsDiv.innerHTML = customers.map(c => `
                                <div class="list-group-item list-group-item-action" style="cursor: pointer;" 
                                     onclick="addCustomer(${caseId}, ${c.id}, '${c.name.replace(/'/g, "\\'")}')">
                                    <strong>${c.name}</strong>
                                    <div class="small text-muted">${c.email || ''} ${c.cvr_number ? '(CVR: ' + c.cvr_number + ')' : ''}</div>
                                </div>
                            `).join('');
                        }
                    } catch (err) {
                        console.error('Error searching customers:', err);
                    }
                }, 300);
            });
        }

        async function addCustomer(caseId, customerId, customerName) {
            try {
                const response = await fetch(`/api/v1/sag/${caseId}/customers`, {
                    method: 'POST',
                    headers: {'Content-Type': 'application/json'},
                    body: JSON.stringify({customer_id: customerId, role: 'Kunde'})
                });
                
                if (response.ok) {
                    customerSearchModal.hide();
                    window.location.reload();
                } else {
                    const error = await response.json();
                    alert(`Fejl: ${error.detail}`);
                }
            } catch (err) {
                alert('Fejl ved tilføjelse af kunde: ' + err.message);
            }
        }

        async function removeCustomer(caseId, customerId) {
            if (confirm('Fjern denne kunde fra sagen?')) {
                const response = await fetch(`/api/v1/sag/${caseId}/customers/${customerId}`, {method: 'DELETE'});
                if (response.ok) {
                    window.location.reload();
                } else {
                    alert('Fejl ved fjernelse af kunde');
                }
            }
        }

        // Relation Search - Enhanced version
        let currentFocusIndex = -1;
        let searchResults = [];
        
        function setupRelationSearch() {
            const relationSearchInput = document.getElementById('relationCaseSearch');
            
            // Input handler
            relationSearchInput.addEventListener('input', function(e) {
                clearTimeout(relationSearchTimeout);
                const query = e.target.value.trim();
                currentFocusIndex = -1;
                
                if (query.length < 2) {
                    document.getElementById('relationSearchResults').innerHTML = '';
                    document.getElementById('relationSearchResults').style.display = 'none';
                    return;
                }
                
                relationSearchTimeout = setTimeout(async () => {
                    try {
                        const response = await fetch(`/api/v1/search/sag?q=${encodeURIComponent(query)}`);
                        const cases = await response.json();
                        searchResults = cases.filter(c => c.id !== caseId);
                        
                        renderRelationSearchResults(searchResults);
                    } catch (err) {
                        console.error('Error searching cases:', err);
                    }
                }, 200);
            });
            
            // Keyboard navigation
            relationSearchInput.addEventListener('keydown', function(e) {
                const resultsDiv = document.getElementById('relationSearchResults');
                const items = resultsDiv.querySelectorAll('.relation-search-item');
                
                if (e.key === 'ArrowDown') {
                    e.preventDefault();
                    currentFocusIndex = (currentFocusIndex + 1) % items.length;
                    updateFocusedItem(items);
                } else if (e.key === 'ArrowUp') {
                    e.preventDefault();
                    currentFocusIndex = currentFocusIndex <= 0 ? items.length - 1 : currentFocusIndex - 1;
                    updateFocusedItem(items);
                } else if (e.key === 'Enter') {
                    e.preventDefault();
                    if (currentFocusIndex >= 0 && currentFocusIndex < items.length) {
                        items[currentFocusIndex].click();
                    }
                }
            });
        }
        
        function updateFocusedItem(items) {
            items.forEach((item, index) => {
                if (index === currentFocusIndex) {
                    item.classList.add('active');
                    item.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
                } else {
                    item.classList.remove('active');
                }
            });
        }
        
        function renderRelationSearchResults(cases) {
            const resultsDiv = document.getElementById('relationSearchResults');
            
            if (cases.length === 0) {
                resultsDiv.innerHTML = '<div class="p-3 text-muted text-center"><i class="bi bi-search me-2"></i>Ingen sager fundet</div>';
                resultsDiv.style.display = 'block';
                return;
            }
            
            // Group by status
            const grouped = {};
            cases.forEach(c => {
                const status = c.status || 'ukendt';
                if (!grouped[status]) grouped[status] = [];
                grouped[status].push(c);
            });
            
            let html = '<div class="list-group list-group-flush">';
            
            // Sort status groups: åben first, then others
            const statusOrder = ['åben', 'under behandling', 'afventer', 'løst', 'lukket'];
            const sortedStatuses = Object.keys(grouped).sort((a, b) => {
                const aIndex = statusOrder.indexOf(a);
                const bIndex = statusOrder.indexOf(b);
                if (aIndex === -1 && bIndex === -1) return a.localeCompare(b);
                if (aIndex === -1) return 1;
                if (bIndex === -1) return -1;
                return aIndex - bIndex;
            });
            
            sortedStatuses.forEach(status => {
                const statusCases = grouped[status];
                
                // Status group header
                html += `
                    <div class="list-group-item bg-light" style="padding: 0.5rem 1rem; font-weight: 600; font-size: 0.85rem; color: var(--text-secondary);">
                        <span class="status-badge status-${status}">${status}</span>
                        <span class="badge bg-secondary float-end">${statusCases.length}</span>
                    </div>
                `;
                
                statusCases.forEach(c => {
                    const createdDate = c.created_at ? new Date(c.created_at).toLocaleDateString('da-DK') : 'N/A';
                    const beskrivelse = c.beskrivelse ? c.beskrivelse.substring(0, 80) + '...' : '';
                    const customerName = c.customer_name || '';
                    const safeTitle = (c.titel || '').replace(/"/g, '&quot;').replace(/'/g, '&#39;');
                    const safeCustomer = customerName.replace(/"/g, '&quot;').replace(/'/g, '&#39;');
                    
                    html += `
                        <div class="list-group-item list-group-item-action relation-search-item" 
                             style="cursor: pointer; padding: 0.75rem 1rem;"
                             onclick="selectRelationCase(${c.id}, '${safeTitle}', '${safeCustomer}', '${status}');"
                             data-case-id="${c.id}">
                            <div class="d-flex justify-content-between align-items-start">
                                <div style="flex: 1;">
                                    <div class="d-flex align-items-center gap-2 mb-1">
                                        <span class="badge bg-primary" style="font-size: 0.75rem;">#${c.id}</span>
                                        <strong style="font-size: 0.95rem;">${escapeHtml(c.titel)}</strong>
                                    </div>
                                    ${c.customer_name ? `
                                        <div class="small text-muted mb-1">
                                            <i class="bi bi-building me-1"></i>${escapeHtml(c.customer_name)}
                                        </div>
                                    ` : ''}
                                    ${beskrivelse ? `
                                        <div class="small text-muted" style="font-size: 0.8rem;">${escapeHtml(beskrivelse)}</div>
                                    ` : ''}
                                </div>
                                <div class="text-end" style="min-width: 100px;">
                                    <div class="small text-muted">${createdDate}</div>
                                </div>
                            </div>
                        </div>
                    `;
                });
            });
            
            html += '</div>';
            resultsDiv.innerHTML = html;
            resultsDiv.style.display = 'block';
        }
        
        function escapeHtml(text) {
            const div = document.createElement('div');
            div.textContent = text;
            return div.innerHTML;
        }

        function selectRelationCase(caseIdValue, caseTitel, customerName, status) {
            selectedRelationCaseId = caseIdValue;
            
            // Update preview
            const previewDiv = document.getElementById('selectedCasePreview');
            const titleDiv = document.getElementById('selectedCaseTitle');
            
            titleDiv.innerHTML = `
                <div class="d-flex align-items-center gap-2 mb-1">
                    <span class="badge bg-primary">#${caseIdValue}</span>
                    <strong>${escapeHtml(caseTitel)}</strong>
                    <span class="status-badge status-${status}">${status}</span>
                </div>
                ${customerName ? `<div class="small"><i class="bi bi-building me-1"></i>${escapeHtml(customerName)}</div>` : ''}
            `;
            
            previewDiv.style.display = 'block';
            document.getElementById('relationSearchResults').innerHTML = '';
            document.getElementById('relationSearchResults').style.display = 'none';
            document.getElementById('relationCaseSearch').value = '';
            
            // Enable add button
            updateAddRelationButton();
        }
        
        function clearSelectedRelationCase() {
            selectedRelationCaseId = null;
            document.getElementById('selectedCasePreview').style.display = 'none';
            document.getElementById('relationCaseSearch').value = '';
            document.getElementById('relationCaseSearch').focus();
            updateAddRelationButton();
        }
        
        function updateAddRelationButton() {
            const btn = document.getElementById('addRelationBtn');
            const relationType = document.getElementById('relationTypeSelect').value;
            btn.disabled = !selectedRelationCaseId || !relationType;
        }

        async function addRelation() {
            const relationType = document.getElementById('relationTypeSelect').value;
            const btn = document.getElementById('addRelationBtn');
            
            if (!selectedRelationCaseId) {
                alert('Vælg en sag først');
                return;
            }
            
            if (!relationType) {
                alert('Vælg en relationstype');
                return;
            }
            
            // Disable button during request
            btn.disabled = true;
            btn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>Tilføjer...';
            
            try {
                const response = await fetch(`/api/v1/sag/${caseId}/relationer`, {
                    method: 'POST',
                    headers: {'Content-Type': 'application/json'},
                    body: JSON.stringify({
                        målsag_id: selectedRelationCaseId,
                        relationstype: relationType
                    })
                });
                
                if (response.ok) {
                    selectedRelationCaseId = null;
                    relationModal.hide();
                    window.location.reload();
                } else {
                    const error = await response.json();
                    alert(`Fejl: ${error.detail}`);
                    btn.disabled = false;
                    btn.innerHTML = '<i class="bi bi-plus-circle me-1"></i> Tilføj relation';
                }
            } catch (err) {
                alert('Fejl ved tilføjelse af relation: ' + err.message);
                btn.disabled = false;
                btn.innerHTML = '<i class="bi bi-plus-circle me-1"></i> Tilføj relation';
            }
        }

        async function deleteRelation(relationId) {
            if (confirm('Fjern denne relation?')) {
                const response = await fetch(`/api/v1/sag/${caseId}/relationer/${relationId}`, {method: 'DELETE'});
                if (response.ok) {
                    window.location.reload();
                } else {
                    alert('Fejl ved fjernelse af relation');
                }
            }
        }

        // ============ Hardware Handling ============
        async function loadCaseHardware() {
            try {
                const res = await fetch(`/api/v1/sag/{{ case.id }}/hardware`);
                const hardware = await res.json();
                const container = document.getElementById('hardware-list');
                
                if (hardware.length === 0) {
                    container.innerHTML = '<div class="p-3 text-center text-muted small">Ingen hardware tilknyttet</div>';
                    return;
                }
                
                container.innerHTML = hardware.map(h => `
                    <div class="list-group-item d-flex justify-content-between align-items-center">
                        <div>
                            <div class="fw-bold text-primary">
                                <a href="/hardware/${h.id}" class="text-decoration-none">
                                    ${h.brand} ${h.model}
                                </a>
                            </div>
                            <small class="text-muted">SN: ${h.serial_number || 'N/A'}</small>
                        </div>
                        <button class="btn btn-sm btn-outline-danger border-0" onclick="unlinkHardware(${h.id})" title="Fjern link">
                            <i class="bi bi-x-lg"></i>
                        </button>
                    </div>
                `).join('');
            } catch (e) {
                console.error("Error loading hardware:", e);
                document.getElementById('hardware-list').innerHTML = '<div class="p-3 text-danger text-center">Fejl ved hentning</div>';
            }
        }

        async function promptLinkHardware() {
            const id = prompt("Indtast Hardware ID:");
            if (!id) return;
            
            try {
                const res = await fetch(`/api/v1/sag/{{ case.id }}/hardware`, {
                    method: 'POST',
                    headers: {'Content-Type': 'application/json'},
                    body: JSON.stringify({ hardware_id: parseInt(id) })
                });
                
                if (!res.ok) throw await res.json();
                loadCaseHardware();
            } catch (e) {
                alert("Fejl: " + (e.detail || e.message));
            }
        }

        async function unlinkHardware(hwId) {
            if(!confirm("Fjern link til dette hardware?")) return;
            try {
                await fetch(`/api/v1/sag/{{ case.id }}/hardware/${hwId}`, { method: 'DELETE' });
                loadCaseHardware();
            } catch (e) {
                alert("Fejl ved sletning");
            }
        }

        // ============ Location Handling ============
        async function loadCaseLocations() {
            try {
                const res = await fetch(`/api/v1/sag/{{ case.id }}/locations`);
                const locations = await res.json();
                const container = document.getElementById('locations-list');
                
                if (locations.length === 0) {
                    container.innerHTML = '<div class="p-3 text-center text-muted small">Ingen lokationer tilknyttet</div>';
                    return;
                }
                
                container.innerHTML = locations.map(l => `
                    <div class="list-group-item d-flex justify-content-between align-items-center">
                        <div>
                            <div class="fw-bold">
                                <i class="bi bi-geo-alt me-1 text-secondary"></i>
                                ${l.name}
                            </div>
                            <small class="text-muted">${l.location_type || ''}</small>
                        </div>
                        <button class="btn btn-sm btn-outline-danger border-0" onclick="unlinkLocation(${l.id})" title="Fjern link">
                            <i class="bi bi-x-lg"></i>
                        </button>
                    </div>
                `).join('');
            } catch (e) {
                console.error("Error loading locations:", e);
                document.getElementById('locations-list').innerHTML = '<div class="p-3 text-danger text-center">Fejl ved hentning</div>';
            }
        }

        async function promptLinkLocation() {
            const id = prompt("Indtast Lokations ID:");
            if (!id) return;
            
            try {
                const res = await fetch(`/api/v1/sag/{{ case.id }}/locations`, {
                    method: 'POST',
                    headers: {'Content-Type': 'application/json'},
                    body: JSON.stringify({ location_id: parseInt(id) })
                });
                
                if (!res.ok) throw await res.json();
                loadCaseLocations();
            } catch (e) {
                alert("Fejl: " + (e.detail || e.message));
            }
        }

        async function unlinkLocation(locId) {
            if(!confirm("Fjern link til denne lokation?")) return;
            try {
                await fetch(`/api/v1/sag/{{ case.id }}/locations/${locId}`, { method: 'DELETE' });
                loadCaseLocations();
            } catch (e) {
                alert("Fejl ved sletning");
            }
        }


        // Initialize relation search when DOM is ready
        if (document.readyState === 'loading') {
            document.addEventListener('DOMContentLoaded', setupRelationSearch);
        } else {
            setupRelationSearch();
        }

        // Kontakt Modal functions
        function showKontaktModal() {
            const modal = new bootstrap.Modal(document.getElementById('kontaktModal'));
            modal.show();
        }

        // Afdeling Modal functions
        function showAfdelingModal() {
            const modal = new bootstrap.Modal(document.getElementById('afdelingModal'));
            modal.show();
        }

        async function updateAfdeling() {
            const newAfdeling = document.getElementById('afdelingInput').value.trim();
            
            try {
                const response = await fetch('/api/v1/customers/{{ customer.id if customer else 0 }}', {
                    method: 'PATCH',
                    headers: {'Content-Type': 'application/json'},
                    body: JSON.stringify({ department: newAfdeling })
                });
                
                if (!response.ok) throw await response.json();
                
                // Reload page to show updated data
                window.location.reload();
            } catch (e) {
                alert("Fejl ved opdatering: " + (e.detail || e.message));
            }
        }
    </script>

    <!-- Kontakt Info Modal -->
    <div class="modal fade" id="kontaktModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header" style="background: var(--accent); color: white;">
                    <h5 class="modal-title">
                        <i class="bi bi-person-circle me-2"></i>Kontakt Information
                    </h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    {% if hovedkontakt %}
                    <div class="mb-3">
                        <label class="small text-muted mb-1">Navn</label>
                        <div class="fw-bold">{{ hovedkontakt.first_name }} {{ hovedkontakt.last_name }}</div>
                    </div>
                    <div class="mb-3">
                        <label class="small text-muted mb-1">Email</label>
                        <div>
                            {% if hovedkontakt.email %}
                            <a href="mailto:{{ hovedkontakt.email }}" style="color: var(--accent);">
                                <i class="bi bi-envelope me-1"></i>{{ hovedkontakt.email }}
                            </a>
                            {% else %}
                            <span class="text-muted">Ingen email</span>
                            {% endif %}
                        </div>
                    </div>
                    <div class="mb-3">
                        <label class="small text-muted mb-1">Telefon</label>
                        <div>
                            {% if hovedkontakt.phone %}
                            <a href="tel:{{ hovedkontakt.phone }}" style="color: var(--accent);">
                                <i class="bi bi-telephone me-1"></i>{{ hovedkontakt.phone }}
                            </a>
                            {% else %}
                            <span class="text-muted">Ingen telefon</span>
                            {% endif %}
                        </div>
                    </div>
                    <div class="mb-3">
                        <label class="small text-muted mb-1">Mobil</label>
                        <div>
                            {% if hovedkontakt.mobile %}
                            <a href="tel:{{ hovedkontakt.mobile }}" style="color: var(--accent);">
                                <i class="bi bi-phone me-1"></i>{{ hovedkontakt.mobile }}
                            </a>
                            {% else %}
                            <span class="text-muted">Ingen mobil</span>
                            {% endif %}
                        </div>
                    </div>
                    {% if hovedkontakt.title %}
                    <div class="mb-3">
                        <label class="small text-muted mb-1">Titel</label>
                        <div>{{ hovedkontakt.title }}</div>
                    </div>
                    {% endif %}
                    {% else %}
                    <p class="text-center text-muted mb-0">Ingen kontakt tilknyttet</p>
                    {% endif %}
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Luk</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Afdeling Modal -->
    <div class="modal fade" id="afdelingModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header" style="background: var(--accent); color: white;">
                    <h5 class="modal-title">
                        <i class="bi bi-building me-2"></i>Rediger Afdeling
                    </h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <label for="afdelingInput" class="form-label">Afdeling</label>
                    <input type="text" 
                           class="form-control" 
                           id="afdelingInput" 
                           value="{{ customer.department if customer and customer.department else '' }}"
                           placeholder="Indtast afdeling">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuller</button>
                    <button type="button" class="btn btn-primary" style="background: var(--accent); border: none;" onclick="updateAfdeling()">
                        Gem
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}