{% extends "base.html" %}

{% block title %}{{ institution.name }} - Lead-Details{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row mb-4">
        <div class="col-md-8">
            <h1 class="h2 mb-0">
                <i class="bi bi-building"></i> {{ institution.name }}
            </h1>
            <small class="text-muted">
                Erstellt am {{ institution.created_at.strftime('%d.%m.%Y') }}
                {% if institution.created_by %}von {{ institution.created_by }}{% endif %}
            </small>
        </div>
        <div class="col-md-4 text-end">
            <button class="btn btn-primary" onclick="showCreateContactModal()">
                <i class="bi bi-person-plus"></i> Neuer Kontakt
            </button>
            <a href="{{ url_for('leads.institutions') }}" class="btn btn-secondary">
                <i class="bi bi-arrow-left"></i> Zurück
            </a>
        </div>
    </div>

    <!-- Contacts Table -->
    <div class="card">
        <div class="card-header">
            <h5 class="mb-0">
                <i class="bi bi-people"></i> Kontakte 
                <span class="badge bg-secondary">{{ contacts|length }}</span>
            </h5>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Position</th>
                            <th>Erstellt am</th>
                            <th>Aktionen</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for contact in contacts %}
                        <tr>
                            <td>
                                <a href="{{ url_for('leads.contact_detail', contact_id=contact.id) }}" 
                                   class="text-decoration-none">
                                    <strong>{{ contact.first_name }} {{ contact.last_name }}</strong>
                                </a>
                            </td>
                            <td>{{ contact.position or '-' }}</td>
                            <td>{{ contact.created_at.strftime('%d.%m.%Y') }}</td>
                            <td>
                                <a href="{{ url_for('leads.contact_detail', contact_id=contact.id) }}" 
                                   class="btn btn-sm btn-outline-primary">
                                    <i class="bi bi-eye"></i> Details
                                </a>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
                {% if not contacts %}
                <div class="text-center py-4">
                    <p class="text-muted">Noch keine Kontakte für diese Institution.</p>
                    <button class="btn btn-primary" onclick="showCreateContactModal()">
                        <i class="bi bi-person-plus"></i> Ersten Kontakt anlegen
                    </button>
                </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<!-- Create Contact Modal -->
<div class="modal fade" id="contactModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Neuer Kontakt</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="contactForm">
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="firstName" class="form-label">Vorname</label>
                            <input type="text" class="form-control" id="firstName" required>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="lastName" class="form-label">Nachname</label>
                            <input type="text" class="form-control" id="lastName" required>
                        </div>
                    </div>
                    <div class="mb-3">
                        <label for="position" class="form-label">Position</label>
                        <input type="text" class="form-control" id="position" 
                               placeholder="z.B. Geschäftsführer, Vertriebsleiter">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Abbrechen</button>
                <button type="button" class="btn btn-primary" onclick="saveContact()">Speichern</button>
            </div>
        </div>
    </div>
</div>

<script>
// Show create contact modal
function showCreateContactModal() {
    document.getElementById('contactForm').reset();
    new bootstrap.Modal(document.getElementById('contactModal')).show();
}

// Save contact
async function saveContact() {
    const firstName = document.getElementById('firstName').value.trim();
    const lastName = document.getElementById('lastName').value.trim();
    const position = document.getElementById('position').value.trim();
    
    if (!firstName || !lastName) {
        alert('Bitte geben Sie Vor- und Nachname ein.');
        return;
    }
    
    try {
        const response = await fetch('/leads/api/contacts', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                institution_id: '{{ institution.id }}',
                first_name: firstName,
                last_name: lastName,
                position: position
            })
        });
        
        const data = await response.json();
        
        if (data.success) {
            location.reload();
        } else {
            alert('Fehler: ' + (data.error || 'Unbekannter Fehler'));
        }
    } catch (error) {
        alert('Fehler beim Speichern: ' + error.message);
    }
}
</script>
{% endblock %}