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

{% block title %}Lieferplan & KPIs - Dashboard{% endblock %}

{% block stylesheets %}
<style>
.delivery-plan-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.delivery-plan-header h1 {
    margin: 0;
    font-size: 1.75rem;
    color: var(--text-primary);
}

.week-info {
    background: linear-gradient(135deg, #60A5FA 0%, #3B82F6 100%);
    color: white;
    padding: 1rem 1.5rem;
    border-radius: 0.5rem;
    font-size: 0.9rem;
}

.accordion {
    background: white;
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    margin-bottom: 1.5rem;
    overflow: hidden;
    transition: all 0.2s;
}

.accordion:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.accordion.priority-high {
    border-left: 4px solid #dc2626;
}

.accordion.priority-medium {
    border-left: 4px solid #f59e0b;
}

.accordion.priority-low {
    border-left: 4px solid #10b981;
}

.accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    cursor: pointer;
    transition: background 0.2s;
}

.accordion-header:hover {
    background: #f9fafb;
}

.accordion-header.active {
    background: #f0f9ff;
}

.accordion-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
}

.accordion-icon {
    transition: transform 0.3s;
    color: var(--primary-color);
}

.accordion-header.active .accordion-icon {
    transform: rotate(90deg);
}

.priority-badge {
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.priority-badge.high {
    background: #fee2e2;
    color: #991b1b;
}

.priority-badge.medium {
    background: #fef3c7;
    color: #92400e;
}

.priority-badge.low {
    background: #d1fae5;
    color: #065f46;
}

.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

.accordion-content.active {
    max-height: 5000px;
    transition: max-height 0.5s ease-in;
}

.accordion-body {
    padding: 1.5rem;
    border-top: 1px solid var(--border-color);
}

.delivery-plan-info {
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    border-radius: 0.375rem;
    padding: 1rem;
    margin-bottom: 1rem;
}

.delivery-plan-info h3 {
    margin: 0 0 0.5rem 0;
    font-size: 1rem;
    color: #1e40af;
}

.delivery-plan-info p {
    margin: 0.25rem 0;
    font-size: 0.875rem;
    color: #1e3a8a;
}

.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.kpi-card {
    background: #f9fafb;
    border: 1px solid var(--border-color);
    border-radius: 0.375rem;
    padding: 1rem;
}

.kpi-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
}

.kpi-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.kpi-change {
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.kpi-change.positive {
    color: #10b981;
}

.kpi-change.negative {
    color: #dc2626;
}

.kpi-change.neutral {
    color: var(--text-secondary);
}

.action-required {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 0.375rem;
    padding: 1rem;
    margin-top: 1rem;
}

.action-required h4 {
    margin: 0 0 0.5rem 0;
    color: #991b1b;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.action-required ul {
    margin: 0;
    padding-left: 1.5rem;
    color: #7f1d1d;
    font-size: 0.875rem;
}

.empty-state {
    text-align: center;
    padding: 3rem;
    color: var(--text-secondary);
}

.empty-state i {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.location-link {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}

.location-link a {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 500;
}

.location-link a:hover {
    text-decoration: underline;
}
</style>
{% endblock %}

{% block content %}
<div class="delivery-plan-header">
    <div>
        <h1><i class="fas fa-truck"></i> Lieferplan & KPIs</h1>
        <p class="text-secondary mt-half">Übersicht für die Folgewoche und wesentliche KPIs pro HRS</p>
    </div>
    <div class="week-info">
        <div><strong>Folgewoche:</strong></div>
        <div>
            {% if deliveryPlans|length > 0 %}
                {% set firstPlan = deliveryPlans|first %}
                {{ firstPlan.weekStart|date('d.m.Y') }} - {{ firstPlan.weekEnd|date('d.m.Y') }}
            {% endif %}
        </div>
    </div>
</div>

{% if deliveryPlans|length == 0 %}
    <div class="empty-state">
        <i class="fas fa-inbox"></i>
        <h3>Keine Daten verfügbar</h3>
        <p>Es wurden noch keine Lieferpläne berechnet. Bitte erstellen Sie zuerst Demodaten oder warten Sie auf Daten vom Datalogger.</p>
    </div>
{% else %}
    <div id="accordion-container">
        {% for datalogger in dataloggers %}
            {% set plan = deliveryPlans[datalogger.id] %}
            {% set kpi = kpis[datalogger.id] %}
            {% if plan %}
            <div class="accordion priority-{{ plan.priority }}" data-priority="{{ plan.priority }}">
                <div class="accordion-header" onclick="toggleAccordion(this)">
                    <div class="accordion-title">
                        <i class="fas fa-chevron-right accordion-icon"></i>
                        <i class="fas fa-gas-pump"></i>
                        <span>{{ datalogger.name }}</span>
                        {% if datalogger.location %}
                            <span class="text-sm text-secondary font-normal">- {{ datalogger.location }}</span>
                        {% endif %}
                    </div>
                    <span class="priority-badge {{ plan.priority }}">{{ plan.priority == 'high' ? 'Hoch' : (plan.priority == 'medium' ? 'Mittel' : 'Niedrig') }}</span>
                </div>
                <div class="accordion-content">
                    <div class="accordion-body">
                        <div class="delivery-plan-info">
                            <h3><i class="fas fa-calendar-week"></i> Lieferplan für Folgewoche</h3>
                            <p><strong>Erwartete Lieferungen:</strong> {{ plan.expectedDeliveries }}</p>
                            {% if plan.targetQuantity %}
                                <p><strong>Soll-Menge pro Lieferung:</strong> {{ plan.targetQuantity|number_format(2, ',', '.') }} kg</p>
                            {% endif %}
                            {% if plan.averageQuantity %}
                                <p><strong>Durchschnittliche Liefermenge (letzte Woche):</strong> {{ plan.averageQuantity|number_format(2, ',', '.') }} kg</p>
                            {% endif %}
                        </div>

                        <div class="kpi-grid">
                            <div class="kpi-card">
                                <div class="kpi-label">Abnahme vs. Vorwoche</div>
                                {% if kpi.consumptionChangeLastWeek is not null %}
                                    <div class="kpi-value">
                                        {{ kpi.consumptionChangeLastWeek.percentage > 0 ? '+' : '' }}{{ kpi.consumptionChangeLastWeek.percentage|number_format(1) }}%
                                    </div>
                                    <div class="kpi-change {{ kpi.consumptionChangeLastWeek.trend == 'up' ? 'positive' : (kpi.consumptionChangeLastWeek.trend == 'down' ? 'negative' : 'neutral') }}">
                                        <i class="fas fa-arrow-{{ kpi.consumptionChangeLastWeek.trend == 'up' ? 'up' : (kpi.consumptionChangeLastWeek.trend == 'down' ? 'down' : 'right') }}"></i>
                                        {{ kpi.consumptionChangeLastWeek.absolute > 0 ? '+' : '' }}{{ kpi.consumptionChangeLastWeek.absolute|number_format(2, ',', '.') }} kg
                                    </div>
                                {% else %}
                                    <div class="kpi-value">-</div>
                                    <div class="kpi-change neutral">Keine Daten</div>
                                {% endif %}
                            </div>

                            <div class="kpi-card">
                                <div class="kpi-label">Abnahme vs. 3 Monate</div>
                                {% if kpi.consumptionChangeThreeMonths is not null %}
                                    <div class="kpi-value">
                                        {{ kpi.consumptionChangeThreeMonths.percentage > 0 ? '+' : '' }}{{ kpi.consumptionChangeThreeMonths.percentage|number_format(1) }}%
                                    </div>
                                    <div class="kpi-change {{ kpi.consumptionChangeThreeMonths.trend == 'up' ? 'positive' : (kpi.consumptionChangeThreeMonths.trend == 'down' ? 'negative' : 'neutral') }}">
                                        <i class="fas fa-arrow-{{ kpi.consumptionChangeThreeMonths.trend == 'up' ? 'up' : (kpi.consumptionChangeThreeMonths.trend == 'down' ? 'down' : 'right') }}"></i>
                                        {{ kpi.consumptionChangeThreeMonths.absolute > 0 ? '+' : '' }}{{ kpi.consumptionChangeThreeMonths.absolute|number_format(2, ',', '.') }} kg
                                    </div>
                                {% else %}
                                    <div class="kpi-value">-</div>
                                    <div class="kpi-change neutral">Keine Daten</div>
                                {% endif %}
                            </div>

                            <div class="kpi-card">
                                <div class="kpi-label">Ø Liefermenge (letzte Woche)</div>
                                {% if kpi.averageQuantityLastWeek is not null %}
                                    <div class="kpi-value">{{ kpi.averageQuantityLastWeek|number_format(2, ',', '.') }} kg</div>
                                {% else %}
                                    <div class="kpi-value">-</div>
                                    <div class="kpi-change neutral">Keine Daten</div>
                                {% endif %}
                            </div>

                            <div class="kpi-card">
                                <div class="kpi-label">Abweichung vom Soll</div>
                                {% if kpi.targetDeviation is not null %}
                                    <div class="kpi-value">
                                        {{ kpi.targetDeviation > 0 ? '+' : '' }}{{ kpi.targetDeviation|number_format(1) }}%
                                    </div>
                                    <div class="kpi-change {{ kpi.targetDeviation > 10 ? 'negative' : (kpi.targetDeviation < -10 ? 'positive' : 'neutral') }}">
                                        {% if kpi.targetDeviation > 10 %}
                                            <i class="fas fa-exclamation-triangle"></i> Über Soll
                                        {% elseif kpi.targetDeviation < -10 %}
                                            <i class="fas fa-check-circle"></i> Unter Soll
                                        {% else %}
                                            <i class="fas fa-check"></i> Im Zielbereich
                                        {% endif %}
                                    </div>
                                {% else %}
                                    <div class="kpi-value">-</div>
                                    <div class="kpi-change neutral">Kein Soll-Wert</div>
                                {% endif %}
                            </div>
                        </div>

                        {% if plan.priority == 'high' or (kpi.targetDeviation is not null and kpi.targetDeviation|abs > 20) %}
                        <div class="action-required">
                            <h4><i class="fas fa-exclamation-circle"></i> Handlungsbedarf</h4>
                            <ul>
                                {% if plan.priority == 'high' %}
                                    <li>Hohe Priorität: Erhöhte Nachfrage erkannt</li>
                                {% endif %}
                                {% if kpi.targetDeviation is not null and kpi.targetDeviation > 20 %}
                                    <li>Liefermenge liegt deutlich über dem Soll-Wert</li>
                                {% endif %}
                                {% if kpi.targetDeviation is not null and kpi.targetDeviation < -20 %}
                                    <li>Liefermenge liegt deutlich unter dem Soll-Wert</li>
                                {% endif %}
                                {% if kpi.consumptionChangeLastWeek is not null and kpi.consumptionChangeLastWeek.trend == 'up' %}
                                    <li>Abnahme steigt - Logistik anpassen</li>
                                {% endif %}
                            </ul>
                        </div>
                        {% endif %}

                        <div class="location-link">
                            <a href="{{ path('app_datalogger_stations', {id: datalogger.id}) }}">
                                <i class="fas fa-map-marked-alt"></i> Angefahrene Stationen anzeigen
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            {% endif %}
        {% endfor %}
    </div>
{% endif %}

<script>
function toggleAccordion(header) {
    const accordion = header.closest('.accordion');
    const content = accordion.querySelector('.accordion-content');
    const isActive = header.classList.contains('active');
    
    if (isActive) {
        header.classList.remove('active');
        content.classList.remove('active');
    } else {
        header.classList.add('active');
        content.classList.add('active');
    }
}

// Öffne alle Accordions mit hoher Priorität standardmäßig
document.querySelectorAll('.accordion[data-priority="high"] .accordion-header').forEach(header => {
    header.click();
});
</script>
{% endblock %}