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

{% block title %}Lieferschein {{ deliveryNote.deliveryNoteNumber }}{% endblock %}

{% block content %}
<div class="detail-page-header">
    <div>
        <h1><i class="fas fa-file-invoice"></i> Lieferschein {{ deliveryNote.deliveryNoteNumber }}</h1>
        <p class="text-secondary mt-half">Details und Bearbeitung</p>
    </div>
    <div class="detail-page-actions">
        <a href="{{ path('app_delivery_notes') }}" class="btn btn-inline"><i class="fas fa-arrow-left"></i> Zurück</a>
        {% if not deliveryNote.isFinalized %}
            <a href="{{ path('app_delivery_note_edit', {id: deliveryNote.id}) }}" class="btn btn-inline btn-warning"><i class="fas fa-edit"></i> Bearbeiten</a>
        {% endif %}
        <a href="{{ path('app_delivery_note_pdf', {id: deliveryNote.id}) }}" class="btn btn-inline btn-danger"><i class="fas fa-file-pdf"></i> PDF herunterladen</a>
    </div>
</div>

<div class="detail-grid-2-1">
    <div class="detail-card">
        <h2>Lieferschein-Details</h2>
        <div class="detail-field-grid">
            <div>
                <label class="detail-label">Lieferschein-Nummer</label>
                <div class="detail-value">{{ deliveryNote.deliveryNoteNumber }}</div>
            </div>
            <div>
                <label class="detail-label">Lieferdatum</label>
                <div class="detail-value">{{ deliveryNote.deliveryDate|date('d.m.Y') }}</div>
            </div>
            <div>
                <label class="detail-label">Kundennummer</label>
                <div class="detail-value">{{ deliveryNote.customerNumber ?: '-' }}</div>
            </div>
            <div>
                <label class="detail-label">Status</label>
                <div>
                    {% if deliveryNote.isFinalized %}
                        <span class="status-badge status-finalized">Finalisiert</span>
                    {% else %}
                        <span class="status-badge status-draft">Entwurf</span>
                    {% endif %}
                </div>
            </div>
        </div>
        <h3>Kundendaten</h3>
        <div class="detail-customer-box">
            <p><strong>{{ deliveryNote.customerName }}</strong></p>
            {% if deliveryNote.customerAddress %}<p>{{ deliveryNote.customerAddress }}</p>{% endif %}
            {% if deliveryNote.customerPostalCode or deliveryNote.customerCity %}<p>{{ deliveryNote.customerPostalCode }} {{ deliveryNote.customerCity }}</p>{% endif %}
            {% if deliveryNote.contactPerson %}<p><strong>Ansprechpartner:</strong> {{ deliveryNote.contactPerson }}</p>{% endif %}
        </div>
        <h3>Lieferpositionen</h3>
        <table class="detail-table">
            <thead>
                <tr>
                    <th>Pos.</th>
                    <th>Bezeichnung</th>
                    <th class="text-right">Menge</th>
                </tr>
            </thead>
            <tbody>
                {% for item in deliveryNote.items %}
                    <tr>
                        <td class="text-center">{{ item.position }}</td>
                        <td>{{ item.description }}</td>
                        <td class="text-right">{{ item.quantity|number_format(2, ',', '.') }} {{ item.unit }}</td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>
        {% if deliveryNote.notes %}
            <h3>Bemerkungen</h3>
            <div class="detail-notes-box"><p>{{ deliveryNote.notes }}</p></div>
        {% endif %}
    </div>
    <div>
        <div class="detail-sidebar-card">
            <h3>Zugehörige Messung</h3>
            {% set measurement = deliveryNote.quantityMeasurement %}
            <div class="detail-meta">
                <p><strong>Typ:</strong> {{ measurement.type == 'emptying' ? 'Entleerung' : 'Befüllung' }}</p>
                <p><strong>Menge:</strong> {{ measurement.quantity|number_format(2, ',', '.') }} kg</p>
                <p><strong>Gemessen am:</strong> {{ measurement.measuredAt|date('d.m.Y H:i') }}</p>
                <p><strong>Datalogger:</strong> {{ measurement.datalogger.name }}</p>
                {% if measurement.location %}<p><strong>Standort:</strong> {{ measurement.location }}</p>{% endif %}
            </div>
        </div>
        {% if deliveryNote.technicalContactName %}
        <div class="detail-sidebar-card">
            <h3>Technischer Ansprechpartner</h3>
            <div class="detail-meta">
                <p><strong>{{ deliveryNote.technicalContactName }}</strong></p>
                {% if deliveryNote.technicalContactTitle %}<p>{{ deliveryNote.technicalContactTitle }}</p>{% endif %}
                {% if deliveryNote.technicalContactEmail %}<p>{{ deliveryNote.technicalContactEmail }}</p>{% endif %}
                {% if deliveryNote.technicalContactPhone %}<p>{{ deliveryNote.technicalContactPhone }}</p>{% endif %}
            </div>
        </div>
        {% endif %}
        {% if not deliveryNote.isFinalized %}
            <div class="detail-sidebar-card alert-error">
                <h3 class="text-danger m-0 mb-1 text-base">Aktionen</h3>
                <button type="button" onclick="finalizeDeliveryNote({{ deliveryNote.id }})" class="btn btn-danger w-full flex align-center justify-center gap-half padding-75 font-semibold">
                    <i class="fas fa-lock"></i> Lieferschein finalisieren
                </button>
                <p class="mt-half text-xs text-danger">Nach der Finalisierung kann der Lieferschein nicht mehr bearbeitet werden.</p>
            </div>
        {% endif %}
    </div>
</div>

<script>
function finalizeDeliveryNote(id) {
    if (!confirm('Möchten Sie diesen Lieferschein wirklich finalisieren? Er kann danach nicht mehr bearbeitet werden.')) {
        return;
    }

    fetch('{{ path('app_delivery_note_finalize', {id: deliveryNote.id}) }}', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-Requested-With': 'XMLHttpRequest'
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            showToast(data.message, 'success');
            setTimeout(() => {
                window.location.reload();
            }, 1000);
        } else {
            showToast(data.error || 'Fehler beim Finalisieren', 'error');
        }
    })
    .catch(error => {
        showToast('Fehler beim Finalisieren', 'error');
    });
}
</script>
{% endblock %}