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

{% block title %}Neuer Auftrag{% endblock %}

{% block body %}
<div class="page-wrapper" data-app-base-path="{{ app.request.basePath }}">
    <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><i class="fas fa-plus-circle"></i> Neuer Auftrag</h1>
                <p class="header-subtitle">Erstellen Sie einen neuen Auftrag</p>
            </div>
        </div>
        <div>
            <a href="{{ path('vorlage_index') }}" class="btn btn-secondary">
                <i class="fas fa-file-alt"></i> Aus Vorlage
            </a>
        </div>
    </div>
    
    {{ form_start(form, {'attr': {'class': 'form-modern'}}) }}
        <div class="form-section">
            <div class="section-header">
                <i class="fas fa-info-circle"></i>
                <h2>Grundinformationen</h2>
            </div>
            <div class="section-content">
                {{ form_row(form.titel) }}
                {{ form_row(form.beschreibung) }}
                {{ form_row(form.faelligAm) }}
                <div class="form-grid-2">
                    {{ form_row(form.status) }}
                    {{ form_row(form.prioritaet) }}
                </div>
            </div>
        </div>

        <div class="form-section">
            <div class="section-header">
                <i class="fas fa-building"></i>
                <h2>Standort & Zuordnung</h2>
                <button type="button" class="btn-icon btn-icon-help" data-modal-open="roles-help" title="Erklärung: Ersteller/Bearbeiter/Ausführender">
                    <i class="fas fa-circle-question"></i>
                </button>
            </div>
            <div class="section-content">
                <div class="form-grid-2">
                    {{ form_row(form.station) }}
                    {{ form_row(form.asset) }}
                </div>
                <div class="form-grid-2">
                    {{ form_row(form.kunde) }}
                    <div class="kunde-neu-wrapper">
                        {{ form_row(form.kundeNeu) }}
                        <button type="button" class="btn btn-secondary btn-create-kunde-global" title="Neuen Kunden anlegen">
                            <i class="fas fa-plus-circle"></i> Neuen Kunden anlegen
                        </button>
                    </div>
                    {{ form_row(form.zugewiesenAn) }}
                </div>
                <div class="form-grid-2">
                    {{ form_row(form.ausfuehrender) }}
                </div>
            </div>
        </div>

        <div class="form-section">
            <div class="section-header">
                <i class="fas fa-map-marker-alt"></i>
                <h2>Adresse</h2>
            </div>
            <div class="section-content">
                <div class="form-grid-street">
                    {{ form_row(form.strasse) }}
                    {{ form_row(form.hausnummer) }}
                </div>
                <div class="form-grid-plz">
                    {{ form_row(form.plz) }}
                    {{ form_row(form.ort) }}
                </div>
                <div class="form-grid-2">
                    {{ form_row(form.latitude) }}
                    {{ form_row(form.longitude) }}
                </div>
            </div>
        </div>

        <div class="form-section">
            <div class="section-header">
                <i class="fas fa-user-tie"></i>
                <h2>Kontakt</h2>
            </div>
            <div class="section-content">
                {{ form_row(form.kontaktperson) }}
                <div class="form-grid-2">
                    {{ form_row(form.email) }}
                    {{ form_row(form.telefon) }}
                </div>
            </div>
        </div>

        <div class="form-section">
            <div class="section-header">
                <i class="fas fa-list-ul"></i>
                <h2>Weitere Informationen</h2>
            </div>
            <div class="section-content">
                {{ form_row(form.kategorie) }}
                {{ form_row(form.kategorieNeu) }}
                {{ form_row(form.tags) }}
                
                <div class="material-collection">
                    {{ form_label(form.auftragMaterialien) }}
                    <div id="material-items" data-prototype="{{ form_widget(form.auftragMaterialien.vars.prototype)|e('html_attr') }}">
                        {% for materialForm in form.auftragMaterialien %}
                            <div class="material-item">
                                {{ form_widget(materialForm) }}
                                <button type="button" class="btn-remove-material" data-action="remove-material">
                                    <i class="fas fa-trash"></i>
                                </button>
                            </div>
                        {% endfor %}
                    </div>
                    <div class="material-actions">
                        <button type="button" class="btn-add-material" data-action="add-material">
                            <i class="fas fa-plus"></i> Material hinzufügen
                        </button>
                        <button type="button" class="btn btn-secondary btn-create-material-global">
                            <i class="fas fa-plus-circle"></i> Neues Material erstellen
                        </button>
                    </div>
                </div>
                
                {# Globales Modal für Material-Erstellung #}
                <div class="material-create-modal" id="modal-global-material">
                    <div class="modal-overlay" data-target="global-material"></div>
                    <div class="modal-content">
                        <div class="modal-header">
                            <h3>Neues Material erstellen</h3>
                            <button type="button" class="modal-close" data-target="global-material">
                                <i class="fas fa-times"></i>
                            </button>
                        </div>
                        <div class="modal-body">
                            <div class="form-group">
                                <label>Name <span class="required">*</span></label>
                                <input type="text" class="new-material-name" data-target="global-material" placeholder="z.B. Zapfpistole">
                            </div>
                            <div class="form-group">
                                <label>Komponente (optional)</label>
                                <input type="text" class="new-material-komponente" data-target="global-material" placeholder="z.B. Dispenser">
                            </div>
                            <div class="form-group">
                                <label>Einheit (optional)</label>
                                <input type="text" class="new-material-einheit" data-target="global-material" placeholder="z.B. Stück, kg, m">
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary modal-close" data-target="global-material">Abbrechen</button>
                            <button type="button" class="btn btn-primary btn-create-material-submit" data-target="global-material">
                                <i class="fas fa-plus"></i> Erstellen
                            </button>
                        </div>
                    </div>
                </div>
                
                {{ form_row(form.zugangsinformationen) }}
                {{ form_row(form.notizen) }}
                {{ form_row(form.geschaetzteDauer) }}
                <div class="form-grid-2">
                    <div class="checkbox-wrapper">
                        {{ form_widget(form.wiederkehrend) }}
                        {{ form_label(form.wiederkehrend) }}
                    </div>
                    <div class="checkbox-wrapper">
                        {{ form_widget(form.wetterabhaengig) }}
                        {{ form_label(form.wetterabhaengig) }}
                    </div>
                </div>
            </div>
        </div>

        <div class="form-section">
            <div class="section-header">
                <i class="fas fa-euro-sign"></i>
                <h2>Finanzen</h2>
            </div>
            <div class="section-content">
                {{ form_row(form.betrag) }}
            </div>
        </div>

        <div class="form-actions">
            <button type="submit" class="btn btn-primary">
                <i class="fas fa-check"></i> Erstellen
            </button>
            <a href="{{ path('auftrag_index') }}" class="btn btn-secondary">
                <i class="fas fa-times"></i> Abbrechen
            </a>
        </div>
    {{ form_end(form) }}
</div>
{% endblock %}