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

{% block title %}Kalender{% endblock %}

{% block javascripts %}
    {{ parent() }}
{% endblock %}

{% block body %}
<div class="page-wrapper" data-app-base-path="{{ app.request.basePath }}">
    <div class="page-header">
        <div class="header-content">
            <h1><i class="fas fa-calendar-alt"></i> Kalender</h1>
            <p class="header-subtitle">Terminübersicht und Planung</p>
        </div>
        <div class="calendar-header-actions">
            <a href="{{ path('auftrag_new') }}" class="btn btn-primary">
                <i class="fas fa-plus"></i> Neuer Auftrag
            </a>
        </div>
    </div>

    <!-- Kalender-Toolbar -->
    <div class="calendar-toolbar">
        <div class="toolbar-left">
            <button type="button" class="btn btn-secondary" id="nav-prev">
                <i class="fas fa-chevron-left"></i>
            </button>
            <button type="button" class="btn btn-secondary" id="nav-today">
                <i class="fas fa-calendar-day"></i> Heute
            </button>
            <button type="button" class="btn btn-secondary" id="nav-next">
                <i class="fas fa-chevron-right"></i>
            </button>
            <div class="current-date-display" id="current-date-display"></div>
        </div>
        
        <div class="toolbar-center">
            <div class="view-toggle">
                <button type="button" class="btn btn-secondary" id="view-month">
                    <i class="fas fa-calendar"></i> Monat
                </button>
                <button type="button" class="btn btn-secondary active" id="view-week">
                    <i class="fas fa-calendar-week"></i> Woche
                </button>
                <button type="button" class="btn btn-secondary" id="view-day">
                    <i class="fas fa-calendar-day"></i> Tag
                </button>
            </div>
        </div>
        
        <div class="toolbar-right">
            <div class="calendar-filters">
                <select id="filter-status" class="filter-select">
                    <option value="">Alle Status</option>
                    <option value="neu">Neu</option>
                    <option value="in_arbeit">In Arbeit</option>
                    <option value="wartend">Wartend</option>
                    <option value="fertig">Fertig</option>
                    <option value="abgerechnet">Abgerechnet</option>
                </select>
                <select id="filter-prioritaet" class="filter-select">
                    <option value="">Alle Prioritäten</option>
                    <option value="niedrig">Niedrig</option>
                    <option value="mittel">Mittel</option>
                    <option value="hoch">Hoch</option>
                    <option value="dringend">Dringend</option>
                </select>
            </div>
        </div>
    </div>

    <div class="calendar-container">
        <div class="calendar-view" id="calendar-view" data-view="week">
            <!-- Calendar wird per JavaScript gerendert -->
        </div>
    </div>
</div>

<!-- Side Overlay für Auftragsdetails -->
<div class="calendar-overlay" id="calendar-overlay">
    <div class="overlay-backdrop" data-action="close-calendar-overlay"></div>
    <div class="overlay-panel">
        <div class="overlay-header">
            <h2 id="overlay-title">Auftragsdetails</h2>
            <button type="button" class="overlay-close" data-action="close-calendar-overlay" aria-label="Schließen">
                <i class="fas fa-times"></i>
            </button>
        </div>
        <div class="overlay-content" id="overlay-content">
            <div class="loading-spinner">
                <i class="fas fa-spinner fa-spin"></i>
                <p>Lade Auftragsdetails...</p>
            </div>
        </div>
    </div>
</div>

<script type="application/json" id="calendar-auftraege-data">[
{% for auftrag in auftraege %}
    {"id":{{ auftrag.id }},"titel":{{ auftrag.titel|json_encode|raw }},"status":{{ auftrag.status|json_encode|raw }},"faelligAm":{% if auftrag.faelligAm %}{{ auftrag.faelligAm|date('Y-m-d')|json_encode|raw }}{% else %}null{% endif %},"prioritaet":{% if auftrag.prioritaet %}{{ auftrag.prioritaet|json_encode|raw }}{% else %}null{% endif %},"kunde":{% if auftrag.kunde %}{{ auftrag.kunde.name|json_encode|raw }}{% else %}null{% endif %},"zugewiesenAn":{% if auftrag.zugewiesenAn %}{{ auftrag.zugewiesenAn.fullName|json_encode|raw }}{% else %}null{% endif %},"ort":{% if auftrag.ort %}{{ auftrag.ort|json_encode|raw }}{% else %}null{% endif %},"storniert":{{ auftrag.storniert ? 'true' : 'false' }}}{% if not loop.last %},{% endif %}
{% endfor %}
]</script>
<script src="{{ asset('js/calendar.js') }}"></script>
{% endblock %}