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

{% block title %}Lieferscheine{% endblock %}

{% block content %}
<div class="delivery-page-header flex justify-between align-center mb-2">
    <div>
        <h1><i class="fas fa-file-invoice"></i> Lieferscheine</h1>
        <p class="text-secondary mt-half">Übersicht aller erstellten Lieferscheine</p>
    </div>
    <div class="flex gap-half">
        <a href="{{ path('app_delivery_note_create') }}" class="btn btn-primary">
            <i class="fas fa-plus"></i> Lieferschein anlegen
        </a>
        <a href="{{ path('app_delivery_plan') }}" class="btn btn-inline">
            <i class="fas fa-calendar-week"></i> Lieferplan anzeigen
        </a>
    </div>
</div>

{% if deliveryNotes|length == 0 %}
    <div class="empty-state-card">
        <i class="fas fa-inbox empty-state-icon-user"></i>
        <h3>Keine Lieferscheine vorhanden</h3>
        <p class="text-secondary">Es wurden noch keine Lieferscheine erstellt.</p>
    </div>
{% else %}
    <div class="search-filter-bar">
        <div class="search-box">
            <i class="fas fa-search"></i>
            <input type="text" id="search-input" placeholder="Suche nach Lieferschein-Nr., Kunde, Standort...">
        </div>
        <div class="filter-buttons">
            <button class="filter-btn active" data-filter="all">Alle</button>
            <button class="filter-btn" data-filter="finalized">Finalisiert</button>
            <button class="filter-btn" data-filter="draft">Entwurf</button>
        </div>
    </div>

    <div id="accordion-container">
        {% for dataloggerId, data in deliveryNotes %}
            <div class="accordion" data-datalogger-id="{{ dataloggerId }}">
                <div class="accordion-header" onclick="toggleAccordion(this)">
                    <div class="accordion-title">
                        <i class="fas fa-chevron-right accordion-icon"></i>
                        <i class="fas fa-server"></i>
                        <span>{{ data.datalogger.name }}</span>
                        {% if data.datalogger.location %}
                            <span class="text-sm text-secondary font-normal">- {{ data.datalogger.location }}</span>
                        {% endif %}
                    </div>
                    <div class="accordion-badge">
                        <span class="accordion-count">{{ data.notes|length }} Lieferschein{{ data.notes|length != 1 ? 'e' : '' }}</span>
                    </div>
                </div>
                <div class="accordion-content">
                    <div class="accordion-body">
                        <div class="overflow-x-auto">
                            <table class="delivery-notes-table">
                                <thead>
                                    <tr>
                                        <th>Lieferschein-Nr.</th>
                                        <th>Kunde / Standort</th>
                                        <th>Lieferdatum</th>
                                        <th class="text-right">Menge</th>
                                        <th class="text-center">Status</th>
                                        <th class="text-right">Aktionen</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for note in data.notes %}
                                        <tr data-status="{{ note.isFinalized ? 'finalized' : 'draft' }}">
                                            <td>
                                                <strong>{{ note.deliveryNoteNumber }}</strong>
                                            </td>
                                            <td>
                                                <div><strong>{{ note.customerName }}</strong></div>
                                                {% if note.location %}
                                                    <small class="text-secondary">
                                                        <i class="fas fa-map-marker-alt"></i> {{ note.location }}
                                                    </small>
                                                {% elseif note.customerCity %}
                                                    <small class="text-secondary">{{ note.customerCity }}</small>
                                                {% endif %}
                                            </td>
                                            <td>{{ note.deliveryDate|date('d.m.Y') }}</td>
                                            <td class="text-right">
                                                {% if note.items|length > 0 %}
                                                    {% set totalQuantity = 0 %}
                                                    {% for item in note.items %}
                                                        {% set totalQuantity = totalQuantity + item.quantity %}
                                                    {% endfor %}
                                                    <strong>{{ totalQuantity|number_format(2, ',', '.') }} kg</strong>
                                                {% else %}
                                                    -
                                                {% endif %}
                                            </td>
                                            <td class="text-center">
                                                {% if note.isFinalized %}
                                                    <span class="status-badge status-finalized">
                                                        <i class="fas fa-check-circle"></i> Finalisiert
                                                    </span>
                                                {% else %}
                                                    <span class="status-badge status-draft">
                                                        <i class="fas fa-edit"></i> Entwurf
                                                    </span>
                                                {% endif %}
                                            </td>
                                            <td class="text-right">
                                                <div class="action-buttons">
                                                    <a href="{{ path('app_delivery_note_show', {id: note.id}) }}" class="btn-small btn-view">
                                                        <i class="fas fa-eye"></i> Anzeigen
                                                    </a>
                                                    <a href="{{ path('app_delivery_note_pdf', {id: note.id}) }}" class="btn-small btn-pdf">
                                                        <i class="fas fa-file-pdf"></i> PDF
                                                    </a>
                                                </div>
                                            </td>
                                        </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        {% endfor %}
    </div>
{% endif %}

<script>
function toggleAccordion(header) {
    const accordion = header.closest('.accordion');
    const content = accordion.querySelector('.accordion-content');
    const isActive = header.classList.contains('active');
    
    // Schließe alle anderen Accordions
    document.querySelectorAll('.accordion-header').forEach(h => {
        if (h !== header) {
            h.classList.remove('active');
            h.closest('.accordion').querySelector('.accordion-content').classList.remove('active');
        }
    });
    
    // Toggle aktuelles Accordion
    if (isActive) {
        header.classList.remove('active');
        content.classList.remove('active');
    } else {
        header.classList.add('active');
        content.classList.add('active');
    }
}

// Suche
document.getElementById('search-input')?.addEventListener('input', function(e) {
    const searchTerm = e.target.value.toLowerCase();
    document.querySelectorAll('.accordion').forEach(accordion => {
        const text = accordion.textContent.toLowerCase();
        accordion.style.display = text.includes(searchTerm) ? '' : 'none';
    });
});

// Filter
document.querySelectorAll('.filter-btn').forEach(btn => {
    btn.addEventListener('click', function() {
        document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));
        this.classList.add('active');
        
        const filter = this.dataset.filter;
        document.querySelectorAll('.delivery-notes-table tbody tr').forEach(row => {
            if (filter === 'all') {
                row.style.display = '';
            } else {
                const status = row.dataset.status;
                row.style.display = status === filter ? '' : 'none';
            }
        });
    });
});

// Öffne erstes Accordion standardmäßig
document.querySelector('.accordion-header')?.click();
</script>
{% endblock %}