{% 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" style="margin-top: 2rem; margin-bottom: 2rem;">
    <!-- Back Link -->
    <a href="/cases" class="back-link">
        <i class="bi bi-chevron-left"></i> Tilbage til sager
    </a>

    <!-- Main Info Card -->
    <div class="card">
        <div class="card-header">
            <h1 style="margin: 0; color: var(--accent);">{{ case.titel }}</h1>
        </div>
        <div class="card-body">
            <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>

            <!-- Tags Card (Global) -->
            <div class="card mb-4">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0" style="color: var(--accent);">📌 Tags</h5>
                    <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> Tilføj
                    </button>
                </div>
                <div class="card-body">
                    <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>

            <!-- Related Hardware -->
            <div class="card mb-4">
                 <div class="card-header d-flex justify-content-between align-items-center">
                     <h5 class="mb-0" style="color: var(--accent);">💻 Hardware</h5>
                     <button class="btn btn-sm btn-outline-primary" onclick="promptLinkHardware()">
                        <i class="bi bi-link-45deg"></i> Link ID
                    </button>
                </div>
                <div class="card-body 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>

            <!-- Related Locations -->
            <div class="card mb-4">
                 <div class="card-header d-flex justify-content-between align-items-center">
                     <h5 class="mb-0" style="color: var(--accent);">📍 Lokationer</h5>
                     <button class="btn btn-sm btn-outline-primary" onclick="promptLinkLocation()">
                        <i class="bi bi-plus-lg"></i> Tilføj ID
                    </button>
                </div>
                <div class="card-body 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>


            <!-- Relations Section -->
            <div class="card">
                <div class="card-header">
                    <h5 style="margin: 0;">🔗 Relaterede sager</h5>
                </div>
                <div class="card-body">
                    {% if relations %}
                    {% for rel in relations %}
                    <div style="display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 0; border-bottom: 1px solid #eee;">
                        <div>
                            <div class="relation-type" style="display: inline-block; background: var(--accent-light); color: var(--accent-color); padding: 0.2rem 0.5rem; border-radius: 4px; font-size: 0.85rem; margin-right: 0.5rem;">{{ rel.relationstype }}</div>
                            {% if rel.kilde_sag_id == case.id %}
                            → <a href="/cases/{{ rel.målsag_id }}" class="relation-link" style="color: var(--accent-color); text-decoration: none;">{{ rel.mål_titel }}</a>
                            {% else %}
                            ← <a href="/cases/{{ rel.kilde_sag_id }}" class="relation-link" style="color: var(--accent-color); text-decoration: none;">{{ rel.kilde_titel }}</a>
                            {% endif %}
                        </div>
                        <button onclick="deleteRelation({{ rel.id }})" class="btn btn-sm" style="background-color: #e74c3c; color: white; padding: 0.25rem 0.5rem;">✕</button>
                    </div>
                    {% endfor %}
                    {% else %}
                    <p style="color: #999;">Ingen relaterede sager.</p>
                    {% endif %}
                </div>
                <div class="card-footer">
                    <div style="display: flex; gap: 0.5rem; flex-wrap: wrap;">
                        <div style="flex: 1; min-width: 200px; position: relative;">
                            <input type="text" id="relationCaseSearch" placeholder="Søg efter relateret sag..." class="form-control" style="font-size: 0.9rem;">
                            <div id="relationSearchResults" style="position: absolute; top: 100%; left: 0; right: 0; background: var(--bg-body); border: 1px solid #ddd; max-height: 200px; overflow-y: auto; display: none; z-index: 10;"></div>
                        </div>
                        <select id="relationTypeSelect" class="form-control" style="flex: 1; min-width: 150px;">
                            <option value="">Vælg relationstype</option>
                            <option value="relateret">Relateret</option>
                            <option value="afhænger af">Afhænger af</option>
                            <option value="blokkerer">Blokkerer</option>
                            <option value="duplikat">Duplikat</option>
                        </select>
                        <button onclick="addRelation()" class="btn" style="background-color: var(--accent-color); color: white; padding: 0.5rem 1rem;">+</button>
                    </div>
                </div>
            </div>

            <!-- Contacts Section -->
            {% if contacts %}
            <div class="card">
                <div class="card-header">
                    <h5 style="margin: 0;">👥 Tilknyttede kontakter</h5>
                </div>
                <div class="card-body">
                    {% for contact in contacts %}
                    <div style="display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 0; border-bottom: 1px solid #eee;">
                        <div>
                            <strong>{{ contact.contact_name }}</strong>
                            <div style="font-size: 0.9rem; color: #666;">{{ contact.role }}</div>
                            {% if contact.contact_email %}
                            <div style="font-size: 0.85rem; color: #999;">{{ contact.contact_email }}</div>
                            {% endif %}
                        </div>
                        <button onclick="removeContact({{ case.id }}, {{ contact.contact_id }})" class="btn btn-sm" style="background-color: #e74c3c; color: white; padding: 0.25rem 0.5rem;">✕</button>
                    </div>
                    {% endfor %}
                </div>
                <div class="card-footer">
                    <div style="position: relative;">
                        <input type="text" id="contactSearch" placeholder="Søg efter kontakt..." class="form-control" style="font-size: 0.9rem;">
                        <div id="contactSearchResults" style="position: absolute; top: 100%; left: 0; right: 0; background: white; border: 1px solid #ddd; max-height: 200px; overflow-y: auto; display: none; z-index: 10;"></div>
                    </div>
                </div>
            </div>
            {% else %}
            <div class="card">
                <div class="card-header">
                    <h5 style="margin: 0;">👥 Tilknyttede kontakter</h5>
                </div>
                <div class="card-body">
                    <p style="color: #999;">Ingen kontakter tilknyttet denne sag.</p>
                </div>
                <div class="card-footer">
                    <div style="position: relative;">
                        <input type="text" id="contactSearch" placeholder="Søg efter kontakt..." class="form-control" style="font-size: 0.9rem;">
                        <div id="contactSearchResults" style="position: absolute; top: 100%; left: 0; right: 0; background: white; border: 1px solid #ddd; max-height: 200px; overflow-y: auto; display: none; z-index: 10;"></div>
                    </div>
                </div>
            </div>
            {% endif %}

            <!-- Customers Section -->
            {% if customers %}
            <div class="card">
                <div class="card-header">
                    <h5 style="margin: 0;">🏢 Tilknyttede kunder</h5>
                </div>
                <div class="card-body">
                    {% for customer in customers %}
                    <div style="display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 0; border-bottom: 1px solid #eee;">
                        <div>
                            <strong><a href="/customers/{{ customer.customer_id }}" style="color: var(--accent-color); text-decoration: none;">{{ customer.customer_name }}</a></strong>
                            <div style="font-size: 0.9rem; color: #666;">{{ customer.role }}</div>
                            {% if customer.customer_email %}
                            <div style="font-size: 0.85rem; color: #999;">{{ customer.customer_email }}</div>
                            {% endif %}
                        </div>
                        <button onclick="removeCustomer({{ case.id }}, {{ customer.customer_id }})" class="btn btn-sm" style="background-color: #e74c3c; color: white; padding: 0.25rem 0.5rem;">✕</button>
                    </div>
                    {% endfor %}
                </div>
                <div class="card-footer">
                    <div style="position: relative;">
                        <input type="text" id="customerSearch" placeholder="Søg efter kunde..." class="form-control" style="font-size: 0.9rem;">
                        <div id="customerSearchResults" style="position: absolute; top: 100%; left: 0; right: 0; background: white; border: 1px solid #ddd; max-height: 200px; overflow-y: auto; display: none; z-index: 10;"></div>
                    </div>
                </div>
            </div>
            {% else %}
            <div class="card">
                <div class="card-header">
                    <h5 style="margin: 0;">🏢 Tilknyttede kunder</h5>
                </div>
                <div class="card-body">
                    <p style="color: #999;">Ingen kunder tilknyttet denne sag.</p>
                </div>
                <div class="card-footer">
                    <div style="position: relative;">
                        <input type="text" id="customerSearch" placeholder="Søg efter kunde..." class="form-control" style="font-size: 0.9rem;">
                        <div id="customerSearchResults" style="position: absolute; top: 100%; left: 0; right: 0; background: white; border: 1px solid #ddd; max-height: 200px; overflow-y: auto; display: none; z-index: 10;"></div>
                    </div>
                </div>
            </div>
            {% endif %}

            <!-- Action Buttons -->
            <div style="margin-top: 2rem; display: flex; gap: 1rem; flex-wrap: wrap;">
                <a href="/cases/{{ case.id }}/edit" class="btn" style="background-color: var(--accent-color); color: white;">✏️ Rediger</a>
                <button class="btn" style="background-color: #e74c3c; color: white;" onclick="if(confirm('Slet denne sag?')) { fetch('/api/v1/cases/{{ case.id }}', {method: 'DELETE'}).then(() => window.location='/cases'); }">🗑️ Slet</button>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        const caseId = {{ case.id }};
        let contactSearchTimeout;
        let customerSearchTimeout;

        // Initialize search functionality when DOM is ready
        function initializeSearch() {
            const contactSearchInput = document.getElementById('contactSearch');
            const customerSearchInput = document.getElementById('customerSearch');

            if (contactSearchInput) {
                contactSearchInput.addEventListener('input', function(e) {
                    clearTimeout(contactSearchTimeout);
                    const query = e.target.value.trim();
                    
                    if (query.length < 2) {
                        document.getElementById('contactSearchResults').style.display = 'none';
                        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 style="padding: 10px; color: #999;">Ingen kontakter fundet</div>';
                            } else {
                                resultsDiv.innerHTML = contacts.map(c => `
                                    <div style="padding: 10px; border-bottom: 1px solid #eee; cursor: pointer;" 
                                         onmouseover="this.style.background='#f5f5f5'"
                                         onmouseout="this.style.background='white'"
                                         onclick="addContact(${caseId}, ${c.id}, '${(c.first_name + ' ' + c.last_name).replace(/'/g, "\\'")}')">
                                        <strong>${c.first_name} ${c.last_name}</strong>
                                        <div style="font-size: 0.85rem; color: #999;">${c.email || ''} ${c.user_company ? '(' + c.user_company + ')' : ''}</div>
                                    </div>
                                `).join('');
                            }
                            resultsDiv.style.display = 'block';
                        } catch (err) {
                            console.error('Error searching contacts:', err);
                        }
                    }, 300);
                });
            }

            if (customerSearchInput) {
                customerSearchInput.addEventListener('input', function(e) {
                    clearTimeout(customerSearchTimeout);
                    const query = e.target.value.trim();
                    
                    if (query.length < 2) {
                        document.getElementById('customerSearchResults').style.display = 'none';
                        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 style="padding: 10px; color: #999;">Ingen kunder fundet</div>';
                            } else {
                                resultsDiv.innerHTML = customers.map(c => `
                                    <div style="padding: 10px; border-bottom: 1px solid #eee; cursor: pointer;" 
                                         onmouseover="this.style.background='#f5f5f5'"
                                         onmouseout="this.style.background='white'"
                                         onclick="addCustomer(${caseId}, ${c.id}, '${c.name.replace(/'/g, "\\'")}')">
                                        <strong>${c.name}</strong>
                                        <div style="font-size: 0.85rem; color: #999;">${c.email || ''} ${c.cvr_number ? '(CVR: ' + c.cvr_number + ')' : ''}</div>
                                    </div>
                                `).join('');
                            }
                            resultsDiv.style.display = 'block';
                        } catch (err) {
                            console.error('Error searching customers:', err);
                        }
                    }, 300);
                });
            }
        }

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

        async function addContact(caseId, contactId, contactName) {
            try {
                const response = await fetch(`/api/v1/cases/${caseId}/contacts`, {
                    method: 'POST',
                    headers: {'Content-Type': 'application/json'},
                    body: JSON.stringify({contact_id: contactId, role: 'Kontakt'})
                });
                
                if (response.ok) {
                    const contactSearch = document.getElementById('contactSearch');
                    if (contactSearch) contactSearch.value = '';
                    const contactResults = document.getElementById('contactSearchResults');
                    if (contactResults) contactResults.style.display = 'none';
                    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 addCustomer(caseId, customerId, customerName) {
            try {
                const response = await fetch(`/api/v1/cases/${caseId}/customers`, {
                    method: 'POST',
                    headers: {'Content-Type': 'application/json'},
                    body: JSON.stringify({customer_id: customerId, role: 'Kunde'})
                });
                
                if (response.ok) {
                    const customerSearch = document.getElementById('customerSearch');
                    if (customerSearch) customerSearch.value = '';
                    const customerResults = document.getElementById('customerSearchResults');
                    if (customerResults) customerResults.style.display = 'none';
                    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 removeContact(caseId, contactId) {
            if (confirm('Fjern denne kontakt fra sagen?')) {
                const response = await fetch(`/api/v1/cases/${caseId}/contacts/${contactId}`, {method: 'DELETE'});
                if (response.ok) {
                    window.location.reload();
                } else {
                    alert('Fejl ved fjernelse af kontakt');
                }
            }
        }

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

        // Tag Management Functions
        async function addTag() {
            const tagInput = document.getElementById('newTagInput');
            const tagName = tagInput.value.trim();
            
            if (!tagName) {
                alert('Indtast et tag navn');
                return;
            }
            
            try {
                const response = await fetch(`/api/v1/cases/${caseId}/tags`, {
                    method: 'POST',
                    headers: {'Content-Type': 'application/json'},
                    body: JSON.stringify({tag_navn: tagName})
                });
                
                if (response.ok) {
                    tagInput.value = '';
                    window.location.reload();
                } else {
                    const error = await response.json();
                    alert(`Fejl: ${error.detail}`);
                }
            } catch (err) {
                alert('Fejl ved tilføjelse af tag: ' + err.message);
            }
        }

        async function deleteTag(tagId) {
            if (confirm('Fjern dette tag?')) {
                try {
                    const response = await fetch(`/api/v1/cases/${caseId}/tags/${tagId}`, {method: 'DELETE'});
                    if (response.ok) {
                        window.location.reload();
                    } else {
                        alert('Fejl ved fjernelse af tag');
                    }
                } catch (err) {
                    alert('Fejl: ' + err.message);
                }
            }
        }

        async function toggleTagState(tagId, currentState) {
            const newState = currentState === 'open' ? 'closed' : 'open';
            try {
                const response = await fetch(`/api/v1/cases/${caseId}/tags/${tagId}/state`, {
                    method: 'PATCH',
                    headers: {'Content-Type': 'application/json'},
                    body: JSON.stringify({state: newState})
                });
                if (response.ok) {
                    window.location.reload();
                } else {
                    alert('Fejl ved opdatering af tag status');
                }
            } catch (err) {
                alert('Fejl: ' + err.message);
            }
        }

        // Relation Management Functions
        let selectedRelationCaseId = null;

        function initializeRelationSearch() {
            const relationSearchInput = document.getElementById('relationCaseSearch');
            if (!relationSearchInput) return;

            relationSearchInput.addEventListener('input', function(e) {
                clearTimeout(relationSearchTimeout);
                const query = e.target.value.trim();
                
                if (query.length < 2) {
                    document.getElementById('relationSearchResults').style.display = 'none';
                    return;
                }
                
                relationSearchTimeout = setTimeout(async () => {
                    try {
                        const response = await fetch(`/api/v1/search/cases?q=${encodeURIComponent(query)}`);
                        const cases = await response.json();
                        
                        const resultsDiv = document.getElementById('relationSearchResults');
                        if (cases.length === 0) {
                            resultsDiv.innerHTML = '<div style="padding: 10px; color: #999;">Ingen sager fundet</div>';
                        } else {
                            resultsDiv.innerHTML = cases
                                .filter(c => c.id !== caseId)  // Exclude current case
                                .map(c => `
                                    <div onclick="selectRelationCase(${c.id}, '${c.titel.replace(/'/g, "\\'")}');" style="padding: 10px; cursor: pointer; border-bottom: 1px solid #eee; transition: background 0.2s;" onmouseover="this.style.background='var(--accent-light)'" onmouseout="this.style.background='transparent'">
                                        <div style="font-weight: 600; color: var(--accent-color);">${c.titel}</div>
                                        <div style="font-size: 0.85rem; color: var(--text-secondary);">Status: ${c.status}</div>
                                    </div>
                                `).join('');
                        }
                        resultsDiv.style.display = 'block';
                    } catch (err) {
                        console.error('Error searching cases:', err);
                    }
                }, 300);
            });
        }

        function selectRelationCase(caseIdValue, caseTitel) {
            selectedRelationCaseId = caseIdValue;
            document.getElementById('relationCaseSearch').value = caseTitel;
            document.getElementById('relationSearchResults').style.display = 'none';
        }

        async function addRelation() {
            const relationType = document.getElementById('relationTypeSelect').value;
            
            if (!selectedRelationCaseId) {
                alert('Vælg en sag');
                return;
            }
            
            if (!relationType) {
                alert('Vælg en relationstype');
                return;
            }
            
            try {
                const response = await fetch(`/api/v1/cases/${caseId}/relations`, {
                    method: 'POST',
                    headers: {'Content-Type': 'application/json'},
                    body: JSON.stringify({
                        målsag_id: selectedRelationCaseId,
                        relationstype: relationType
                    })
                });
                
                if (response.ok) {
                    selectedRelationCaseId = null;
                    document.getElementById('relationCaseSearch').value = '';
                    document.getElementById('relationTypeSelect').value = '';
                    window.location.reload();
                } else {
                    const error = await response.json();
                    alert(`Fejl: ${error.detail}`);
                }
            } catch (err) {
                alert('Fejl ved tilføjelse af relation: ' + err.message);
            }
        }


        // Initialize Global Elements
        document.addEventListener('DOMContentLoaded', () => {
            // Render Global Tags
            if (window.renderEntityTags) {
                window.renderEntityTags('case', {{ case.id }}, 'case-tags');
            }
            
            // Load Hardware & Locations
            loadCaseHardware();
            loadCaseLocations();
        });

        // ============ Hardware Handling ============
        async function loadCaseHardware() {
            try {
                const res = await fetch(`/api/v1/cases/{{ 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/cases/{{ 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/cases/{{ 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/cases/{{ 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/cases/{{ 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/cases/{{ case.id }}/locations/${locId}`, { method: 'DELETE' });
                loadCaseLocations();
            } catch (e) {
                alert("Fejl ved sletning");
            }
        }


        // Initialize relation search when DOM is ready
        let relationSearchTimeout;
        if (document.readyState === 'loading') {
            document.addEventListener('DOMContentLoaded', initializeRelationSearch);
        } else {
            initializeRelationSearch();
        }
    </script>
</div>
{% endblock %}