{% extends 'base.html.twig' %}

{% block title %}Auftrag: {{ auftrag.titel }}{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <link rel="stylesheet" href="{{ asset('css/auftrag-show.css') }}">
{% endblock %}

{% block body %}
<div class="page-wrapper" data-app-base-path="{{ app.request.basePath }}">
    <!-- Header -->
    <div class="page-header">
        <div class="header-content">
            <a href="{{ path('auftrag_index') }}" class="btn-back">
                <i class="fas fa-arrow-left"></i>
            </a>
            <div>
                <h1>{{ auftrag.auftragsnummer|default('#' ~ auftrag.id) }} - {{ auftrag.titel }}</h1>
                <p class="header-subtitle">
                    <i class="fas fa-calendar"></i> Erstellt am {{ auftrag.erstelltAm|date('d.m.Y H:i') }}
                    {% if auftrag.faelligAm %}
                        • <i class="fas fa-clock"></i> Fällig am {{ auftrag.faelligAm|date('d.m.Y') }}
                    {% endif %}
                </p>
            </div>
        </div>
        <div class="header-actions">
            {% if auftrag.publicHash %}
                <a href="{{ path('auftrag_public', {'hash': auftrag.publicHash}) }}" class="btn btn-info" target="_blank" title="Öffentliche Ansicht öffnen">
                    <i class="fas fa-external-link-alt"></i> Öffentliche Ansicht
                </a>
            {% endif %}
            {% if not auftrag.storniert %}
                <a href="{{ path('auftrag_edit', {'id': auftrag.id}) }}" class="btn btn-primary">
                    <i class="fas fa-edit"></i> Bearbeiten
                </a>
                <button type="button" class="btn btn-warning" data-action="open-stornieren-modal">
                    <i class="fas fa-ban"></i> Stornieren
                </button>
            {% else %}
                <span class="storniert-badge-large">
                    <i class="fas fa-ban"></i> Storniert
                </span>
            {% endif %}
            <a href="{{ path('auftrag_export_pdf', {'id': auftrag.id}) }}" class="btn btn-secondary" target="_blank">
                <i class="fas fa-file-pdf"></i> PDF
            </a>
            <form method="post" action="{{ path('auftrag_delete', {'id': auftrag.id}) }}" class="inline-form">
                <input type="hidden" name="_token" value="{{ csrf_token('delete' ~ auftrag.id) }}">
                <button type="submit" class="btn btn-danger" data-action="confirm-delete" data-message="Auftrag wirklich löschen?">
                    <i class="fas fa-trash"></i> Löschen
                </button>
            </form>
        </div>
    </div>

    {% if auftrag.storniert %}
    <!-- Stornierungs-Info -->
    <div class="storniert-info-card">
        <div class="info-header">
            <i class="fas fa-ban"></i>
            <h3>Auftrag wurde storniert</h3>
        </div>
        <div class="info-content">
            <div class="info-item">
                <label>Storniert am:</label>
                <span>{{ auftrag.storniertAm|date('d.m.Y H:i') }}</span>
            </div>
            <div class="info-item">
                <label>Storniert von:</label>
                <span>
                    {% if auftrag.storniertVon %}
                        <div class="user-cell-info">
                            <div class="user-avatar-table">
                                {% if auftrag.storniertVon.avatar %}
                                    <img src="{{ asset('uploads/avatars/' ~ auftrag.storniertVon.avatar) }}" alt="{{ auftrag.storniertVon.fullName }}" class="user-avatar-img-table">
                                {% else %}
                                    <span class="user-avatar-initials">{{ auftrag.storniertVon.firstName|first }}{{ auftrag.storniertVon.lastName|first }}</span>
                                {% endif %}
                            </div>
                            <span>{{ auftrag.storniertVon.fullName }}</span>
                        </div>
                    {% else %}
                        -
                    {% endif %}
                </span>
            </div>
            <div class="info-item full-width">
                <label>Grund:</label>
                <p>{{ auftrag.stornierungsgrund }}</p>
            </div>
        </div>
    </div>
    {% endif %}

    <!-- Status & Priorität Badges -->
    <div class="auftrag-badges">
        <div class="status-change-wrapper">
            <select class="status-select-detail" data-auftrag-id="{{ auftrag.id }}" data-current="{{ auftrag.status }}" id="status-select-{{ auftrag.id }}">
                <option value="neu" {{ auftrag.status == 'neu' ? 'selected' : '' }}>Neu</option>
                <option value="in_arbeit" {{ auftrag.status == 'in_arbeit' ? 'selected' : '' }}>In Arbeit</option>
                <option value="wartend" {{ auftrag.status == 'wartend' ? 'selected' : '' }}>Wartend</option>
                <option value="fertig" {{ auftrag.status == 'fertig' ? 'selected' : '' }}>Fertig</option>
                <option value="abgerechnet" {{ auftrag.status == 'abgerechnet' ? 'selected' : '' }}>Abgerechnet</option>
            </select>
        </div>
        {% if auftrag.prioritaet %}
            <span class="priority-badge priority-{{ auftrag.prioritaet }}">
                <i class="fas fa-flag"></i> {{ auftrag.prioritaet|title }}
            </span>
        {% endif %}
        {% if auftrag.tags|length > 0 %}
            {% for tag in auftrag.tags %}
                <span class="tag-badge-view tag-dynamic" style="--tag-farbe: {{ tag.farbe }}">
                    {{ tag.name }}
                </span>
            {% endfor %}
        {% endif %}
    </div>

    <!-- Hauptinhalt in Grid -->
    <div class="auftrag-content-grid">
        <!-- Linke Spalte -->
        <div class="content-main">
            <!-- Beschreibung -->
            {% if auftrag.beschreibung %}
            <div class="content-card">
                <div class="card-title">
                    <i class="fas fa-align-left"></i>
                    <h3>Beschreibung</h3>
                </div>
                <div class="card-body">
                    <p>{{ auftrag.beschreibung|nl2br }}</p>
                </div>
            </div>
            {% endif %}

            <!-- Standort -->
            <div class="content-card">
                <div class="card-title">
                    <i class="fas fa-map-marker-alt"></i>
                    <h3>Standort</h3>
                </div>
                <div class="card-body">
                    <div class="info-list">
                        {% if auftrag.station %}
                            <div class="info-row">
                                <span class="info-label"><i class="fas fa-building"></i> Station</span>
                                <span class="info-value">{{ auftrag.station }}</span>
                            </div>
                        {% endif %}
                        {% if auftrag.asset %}
                            <div class="info-row">
                                <span class="info-label"><i class="fas fa-cog"></i> Asset</span>
                                <span class="info-value">{{ auftrag.asset }}</span>
                            </div>
                        {% endif %}
                        {% if auftrag.ort %}
                            <div class="info-row">
                                <span class="info-label"><i class="fas fa-city"></i> Ort</span>
                                <span class="info-value">{{ auftrag.ort }}</span>
                            </div>
                        {% endif %}
                        {% if auftrag.strasse or auftrag.hausnummer %}
                            <div class="info-row">
                                <span class="info-label"><i class="fas fa-road"></i> Straße</span>
                                <span class="info-value">{{ auftrag.strasse }} {{ auftrag.hausnummer }}</span>
                            </div>
                        {% endif %}
                        {% if auftrag.plz %}
                            <div class="info-row">
                                <span class="info-label"><i class="fas fa-mail-bulk"></i> PLZ</span>
                                <span class="info-value">{{ auftrag.plz }}</span>
                            </div>
                        {% endif %}
                    </div>
                </div>
            </div>

            <!-- Benötigtes Material -->
            {% if auftrag.auftragMaterialien|length > 0 %}
            <div class="content-card">
                <div class="card-title">
                    <i class="fas fa-boxes"></i>
                    <h3>Benötigtes Material</h3>
                </div>
                <div class="card-body">
                    <div class="material-list-compact">
                        {% for auftragMaterial in auftrag.auftragMaterialien %}
                        <div class="material-row">
                            <div class="material-name">
                                <i class="fas fa-box"></i>
                                {{ auftragMaterial.material.name }}
                                {% if auftragMaterial.material.komponente %}
                                    <span class="komponente-badge">{{ auftragMaterial.material.komponente }}</span>
                                {% endif %}
                            </div>
                            <div class="material-meta">
                                <span class="material-quantity">
                                    {{ auftragMaterial.menge }}{% if auftragMaterial.material.einheit %} {{ auftragMaterial.material.einheit }}{% endif %}
                                </span>
                                {% if auftragMaterial.anmerkung %}
                                    <span class="material-note">{{ auftragMaterial.anmerkung }}</span>
                                {% endif %}
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
            {% endif %}

            <!-- Notizen & Zugang -->
            {% if auftrag.notizen or auftrag.zugangsinformationen %}
            <div class="content-card">
                <div class="card-title">
                    <i class="fas fa-sticky-note"></i>
                    <h3>Notizen & Zugang</h3>
                </div>
                <div class="card-body">
                    {% if auftrag.zugangsinformationen %}
                    <div class="note-block">
                        <label><i class="fas fa-key"></i> Zugangsinformationen</label>
                        <p>{{ auftrag.zugangsinformationen|nl2br }}</p>
                    </div>
                    {% endif %}
                    {% if auftrag.notizen %}
                    <div class="note-block">
                        <label><i class="fas fa-file-alt"></i> Interne Notizen</label>
                        <p>{{ auftrag.notizen|nl2br }}</p>
                    </div>
                    {% endif %}
                </div>
            </div>
            {% endif %}
        </div>

        <!-- Rechte Spalte -->
        <div class="content-sidebar">
            <!-- Kontakt -->
            {% if auftrag.kunde or auftrag.kontaktperson or auftrag.email or auftrag.telefon %}
            <div class="content-card">
                <div class="card-title">
                    <i class="fas fa-user-tie"></i>
                    <h3>Kontakt</h3>
                </div>
                <div class="card-body">
                    <div class="info-list">
                        {% if auftrag.kunde %}
                            <div class="info-row">
                                <span class="info-label"><i class="fas fa-building"></i> Kunde</span>
                                <span class="info-value">{{ auftrag.kunde.name }}</span>
                            </div>
                        {% endif %}
                        {% if auftrag.kontaktperson %}
                            <div class="info-row">
                                <span class="info-label"><i class="fas fa-user"></i> Kontaktperson</span>
                                <span class="info-value">{{ auftrag.kontaktperson }}</span>
                            </div>
                        {% endif %}
                        {% if auftrag.email %}
                            <div class="info-row">
                                <span class="info-label"><i class="fas fa-envelope"></i> E-Mail</span>
                                <a href="mailto:{{ auftrag.email }}" class="info-value info-link">{{ auftrag.email }}</a>
                            </div>
                        {% endif %}
                        {% if auftrag.telefon %}
                            <div class="info-row">
                                <span class="info-label"><i class="fas fa-phone"></i> Telefon</span>
                                <a href="tel:{{ auftrag.telefon }}" class="info-value info-link">{{ auftrag.telefon }}</a>
                            </div>
                        {% endif %}
                    </div>
                </div>
            </div>
            {% endif %}

            <!-- Details -->
            <div class="content-card">
                <div class="card-title">
                    <i class="fas fa-info-circle"></i>
                    <h3>Details</h3>
                </div>
                <div class="card-body">
                    <div class="info-list">
                        {% if auftrag.kategorie %}
                            <div class="info-row">
                                <span class="info-label"><i class="fas fa-tag"></i> Kategorie</span>
                                <span class="info-value">{{ auftrag.kategorie|title }}</span>
                            </div>
                        {% endif %}
                        {% if auftrag.geschaetzteDauer %}
                            <div class="info-row">
                                <span class="info-label"><i class="fas fa-hourglass-half"></i> Geschätzte Dauer</span>
                                <span class="info-value">{{ auftrag.geschaetzteDauer }} Min.</span>
                            </div>
                        {% endif %}
                        {% if auftrag.wiederkehrend %}
                            <div class="info-row">
                                <span class="info-label"><i class="fas fa-redo"></i> Wiederkehrend</span>
                                <span class="info-value"><i class="fas fa-check text-success"></i></span>
                            </div>
                        {% endif %}
                        {% if auftrag.wetterabhaengig %}
                            <div class="info-row">
                                <span class="info-label"><i class="fas fa-cloud-sun"></i> Wetterabhängig</span>
                                <span class="info-value"><i class="fas fa-check text-success"></i></span>
                            </div>
                        {% endif %}
                        <div class="info-row">
                            <span class="info-label"><i class="fas fa-euro-sign"></i> Betrag</span>
                            <span class="info-value">
                                {% if auftrag.status == 'fertig' %}
                                    <div class="kosten-editable" data-auftrag-id="{{ auftrag.id }}">
                                        <span class="kosten-display">
                                            {% if auftrag.betrag %}
                                                {{ auftrag.betrag|number_format(2, ',', '.') }} €
                                            {% else %}
                                                <span class="text-muted">-</span>
                                            {% endif %}
                                        </span>
                                        <input type="number" 
                                               class="kosten-input" 
                                               step="0.01" 
                                               min="0" 
                                               value="{{ auftrag.betrag|default('') }}"
                                               data-original-value="{{ auftrag.betrag|default('') }}"
                                               placeholder="0,00">
                                        <button type="button" class="btn-kosten-save" title="Speichern">
                                            <i class="fas fa-check"></i>
                                        </button>
                                        <button type="button" class="btn-kosten-cancel" title="Abbrechen">
                                            <i class="fas fa-times"></i>
                                        </button>
                                    </div>
                                {% else %}
                                    {% if auftrag.betrag %}
                                        <span class="amount-value">{{ auftrag.betrag|number_format(2, ',', '.') }} €</span>
                                    {% else %}
                                        <span class="text-muted">-</span>
                                    {% endif %}
                                {% endif %}
                            </span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Team -->
            <div class="content-card">
                <div class="card-title">
                    <i class="fas fa-users"></i>
                    <h3>Team</h3>
                </div>
                <div class="card-body">
                    <div class="info-list">
                        <div class="info-row">
                            <span class="info-label"><i class="fas fa-user-plus"></i> Erstellt von</span>
                            <span class="info-value">
                                {% if auftrag.erstelltVon %}
                                    <div class="user-cell-info">
                                        <div class="user-avatar-table">
                                            {% if auftrag.erstelltVon.avatar %}
                                                <img src="{{ asset('uploads/avatars/' ~ auftrag.erstelltVon.avatar) }}" alt="{{ auftrag.erstelltVon.fullName }}" class="user-avatar-img-table">
                                            {% else %}
                                                <span class="user-avatar-initials">{{ auftrag.erstelltVon.firstName|first }}{{ auftrag.erstelltVon.lastName|first }}</span>
                                            {% endif %}
                                        </div>
                                        <span>{{ auftrag.erstelltVon.fullName }}</span>
                                    </div>
                                {% else %}
                                    -
                                {% endif %}
                            </span>
                        </div>
                        <div class="info-row">
                            <span class="info-label"><i class="fas fa-user-edit"></i> Bearbeiter</span>
                            <span class="info-value">
                                {% if auftrag.zugewiesenAn %}
                                    <div class="user-cell-info">
                                        <div class="user-avatar-table">
                                            {% if auftrag.zugewiesenAn.avatar %}
                                                <img src="{{ asset('uploads/avatars/' ~ auftrag.zugewiesenAn.avatar) }}" alt="{{ auftrag.zugewiesenAn.fullName }}" class="user-avatar-img-table">
                                            {% else %}
                                                <span class="user-avatar-initials">{{ auftrag.zugewiesenAn.firstName|first }}{{ auftrag.zugewiesenAn.lastName|first }}</span>
                                            {% endif %}
                                        </div>
                                        <span>{{ auftrag.zugewiesenAn.fullName }}</span>
                                    </div>
                                {% else %}
                                    -
                                {% endif %}
                            </span>
                        </div>
                        <div class="info-row">
                            <span class="info-label"><i class="fas fa-user-cog"></i> Ausführender</span>
                            <span class="info-value">
                                {% if auftrag.ausfuehrender %}
                                    <div class="user-cell-info">
                                        <div class="user-avatar-table">
                                            {% if auftrag.ausfuehrender.avatar %}
                                                <img src="{{ asset('uploads/avatars/' ~ auftrag.ausfuehrender.avatar) }}" alt="{{ auftrag.ausfuehrender.fullName }}" class="user-avatar-img-table">
                                            {% else %}
                                                <span class="user-avatar-initials">{{ auftrag.ausfuehrender.firstName|first }}{{ auftrag.ausfuehrender.lastName|first }}</span>
                                            {% endif %}
                                        </div>
                                        <span>{{ auftrag.ausfuehrender.fullName }}</span>
                                    </div>
                                {% else %}
                                    -
                                {% endif %}
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {# Zeiterfassung/Stoppuhr entfernt #}

    <!-- Fotos -->
    {% if auftrag.fotos|length > 0 or fotoForm %}
    <div class="content-card">
        <div class="card-title">
            <i class="fas fa-images"></i>
            <h3>Fotos</h3>
        </div>
        <div class="card-body">
            <!-- Foto-Upload -->
            {% if fotoForm %}
            <div class="photo-upload-wrapper">
                {{ form_start(fotoForm) }}
                    <div class="form-grid-2">
                        {{ form_row(fotoForm.datei) }}
                        {{ form_row(fotoForm.beschreibung) }}
                    </div>
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-upload"></i> Foto hochladen
                    </button>
                {{ form_end(fotoForm) }}
            </div>
            {% endif %}

            <!-- Foto-Galerie -->
            {% if auftrag.fotos|length > 0 %}
            <div class="photo-gallery">
                {% for foto in auftrag.fotos %}
                    <div class="photo-item">
                        <a href="/uploads/fotos/{{ foto.dateiname }}" target="_blank" class="photo-link">
                            <img src="/uploads/fotos/{{ foto.dateiname }}" alt="{{ foto.beschreibung|default(foto.originalName) }}">
                            <div class="photo-overlay">
                                <i class="fas fa-expand"></i>
                            </div>
                        </a>
                        {% if foto.beschreibung %}
                            <div class="photo-description">{{ foto.beschreibung }}</div>
                        {% endif %}
                        <div class="photo-meta">
                            <span>{{ foto.hochgeladenVon.fullName }}</span>
                            <span>{{ foto.erstelltAm|date('d.m.Y H:i') }}</span>
                        </div>
                        <form method="post" action="{{ path('auftrag_foto_delete', {id: foto.id}) }}" class="photo-delete-form">
                            <input type="hidden" name="_token" value="{{ csrf_token('delete_foto' ~ foto.id) }}">
                            <button type="submit" class="btn-icon-small" title="Löschen" data-action="confirm-delete" data-message="Foto wirklich löschen?">
                                <i class="fas fa-trash"></i>
                            </button>
                        </form>
                    </div>
                {% endfor %}
            </div>
            {% endif %}
        </div>
    </div>
    {% endif %}

    <!-- Kommentare -->
    <div class="content-card">
        <div class="card-title">
            <i class="fas fa-comments"></i>
            <h3>Kommentare</h3>
        </div>
        <div class="card-body">
            <!-- Kommentar-Formular -->
            <div class="comment-form-wrapper">
                {{ form_start(kommentarForm) }}
                    {{ form_widget(kommentarForm.kommentar) }}
                    <div class="form-group form-group-spacing">
                        <div class="checkbox-wrapper">
                            {{ form_widget(kommentarForm.oeffentlich) }}
                            {{ form_label(kommentarForm.oeffentlich) }}
                        </div>
                    </div>
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-paper-plane"></i> Kommentar hinzufügen
                    </button>
                {{ form_end(kommentarForm) }}
            </div>

            <!-- Kommentare-Liste -->
            <div class="comments-list">
                {% set topLevelKommentare = auftrag.kommentare|filter(k => k.parent == null)|sort((a, b) => a.erstelltAm <=> b.erstelltAm) %}
                {% for kommentar in topLevelKommentare %}
                    {% include 'auftrag/_comment_item.html.twig' with {'kommentar': kommentar, 'auftrag': auftrag} %}
                {% else %}
                    <div class="empty-comments">
                        <i class="fas fa-comment-slash"></i>
                        <p>Noch keine Kommentare</p>
                    </div>
                {% endfor %}
            </div>
        </div>
    </div>
</div>

    <!-- Stornierungs-Modal -->
    {% if not auftrag.storniert %}
    <div id="stornieren-modal" class="modal-overlay hidden">
        <div class="modal-content">
            <div class="modal-header">
                <h2><i class="fas fa-ban"></i> Auftrag stornieren</h2>
                <button type="button" class="modal-close" data-action="close-stornieren-modal">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <form method="post" action="{{ path('auftrag_stornieren', {'id': auftrag.id}) }}">
                <input type="hidden" name="_token" value="{{ csrf_token('stornieren' ~ auftrag.id) }}">
                <div class="modal-body">
                    <p>Möchten Sie den Auftrag <strong>#{{ auftrag.id }} - {{ auftrag.titel }}</strong> wirklich stornieren?</p>
                    <div class="form-group">
                        <label for="stornierungsgrund">
                            <i class="fas fa-comment-alt"></i> Stornierungsgrund <span class="required">*</span>
                        </label>
                        <textarea id="stornierungsgrund" name="stornierungsgrund" rows="4" required placeholder="Bitte geben Sie den Grund für die Stornierung an..."></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-action="close-stornieren-modal">
                        <i class="fas fa-times"></i> Abbrechen
                    </button>
                    <button type="submit" class="btn btn-warning">
                        <i class="fas fa-ban"></i> Stornieren
                    </button>
                </div>
            </form>
        </div>
    </div>
    {% endif %}

    {% if auftrag.storniert %}
    <!-- Stornierungs-Info -->
    <div class="storniert-info-card">
        <div class="info-header">
            <i class="fas fa-ban"></i>
            <h3>Auftrag wurde storniert</h3>
        </div>
        <div class="info-content">
            <div class="info-item">
                <label>Storniert am:</label>
                <span>{{ auftrag.storniertAm|date('d.m.Y H:i') }}</span>
            </div>
            <div class="info-item">
                <label>Storniert von:</label>
                <span>
                    {% if auftrag.storniertVon %}
                        <div class="user-cell-info">
                            <div class="user-avatar-table">
                                {% if auftrag.storniertVon.avatar %}
                                    <img src="{{ asset('uploads/avatars/' ~ auftrag.storniertVon.avatar) }}" alt="{{ auftrag.storniertVon.fullName }}" class="user-avatar-img-table">
                                {% else %}
                                    <span class="user-avatar-initials">{{ auftrag.storniertVon.firstName|first }}{{ auftrag.storniertVon.lastName|first }}</span>
                                {% endif %}
                            </div>
                            <span>{{ auftrag.storniertVon.fullName }}</span>
                        </div>
                    {% else %}
                        -
                    {% endif %}
                </span>
            </div>
            <div class="info-item full-width">
                <label>Grund:</label>
                <p>{{ auftrag.stornierungsgrund }}</p>
            </div>
        </div>
    </div>
    {% endif %}

{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script src="{{ asset('js/auftrag-show.js') }}"></script>
{% endblock %}