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

{% block title %}Prüfungs-Templates{% endblock %}

{% block breadcrumb %}
    <i class="fas fa-clipboard-list me-2"></i>Prüfungs-Templates
{% endblock %}

{% block content %}
<link rel="stylesheet" href="{{ asset('css/admin/inspection-templates.css') }}">
<link href="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
<script src="{{ asset('js/admin/signature-pad.js') }}"></script>

<div class="container mt-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1 class="h3 mb-0">Prüfungs-Templates</h1>
        <button type="button" class="btn btn-primary" id="addTemplateBtn">
            <i class="fas fa-plus me-2"></i>Neues Template
        </button>
    </div>

    <div id="templatesList" class="row">
        <!-- Templates werden hier dynamisch eingefügt -->
    </div>

    <div id="emptyState" class="text-center py-5" style="display: none;">
        <i class="fas fa-clipboard-list fa-3x text-muted mb-3"></i>
        <h5>Keine Templates vorhanden</h5>
        <p class="text-muted">Erstellen Sie Ihr erstes Prüfungs-Template.</p>
    </div>
</div>

<!-- Vorschau Modal -->
<div class="modal fade" id="previewModal" tabindex="-1" style="z-index: 1060;">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Vorschau: Prüfungsformular</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div id="previewForm">
                    <!-- Vorschau wird hier eingefügt -->
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Schließen</button>
            </div>
        </div>
    </div>
</div>

<!-- Template Kopieren Modal -->
<div class="modal fade" id="copyTemplateModal" tabindex="-1" aria-labelledby="copyTemplateModalTitle" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="copyTemplateModalTitle">Template kopieren</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Schließen"></button>
            </div>
            <div class="modal-body">
                <input type="hidden" id="copyTemplateSourceId">
                <div class="mb-0">
                    <label for="copyTemplateName" class="form-label">Neuer Name *</label>
                    <input type="text" class="form-control" id="copyTemplateName" required>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Abbrechen</button>
                <button type="button" class="btn btn-primary" id="confirmCopyTemplateBtn">
                    <i class="fas fa-copy me-2"></i>Kopie erstellen
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Template Editor Modal -->
<div class="modal fade" id="templateModal" tabindex="-1">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="templateModalTitle">Neues Template</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="templateForm">
                    <input type="hidden" id="templateId">
                    
                    <div class="row mb-3">
                        <div class="col-md-8">
                            <label class="form-label">Template-Name *</label>
                            <input type="text" class="form-control" id="templateName" required>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Status</label>
                            <div class="form-check form-switch mt-2">
                                <input class="form-check-input" type="checkbox" id="templateIsActive" checked>
                                <label class="form-check-label" for="templateIsActive">Aktiv</label>
                            </div>
                        </div>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Beschreibung</label>
                        <textarea class="form-control" id="templateDescription" rows="2"></textarea>
                    </div>

                    <hr>

                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <div>
                            <h5 class="mb-1">Formular-Felder</h5>
                            <p class="text-muted small mb-0">Fügen Sie Felder hinzu, die im Prüfungsformular erscheinen sollen</p>
                        </div>
                        <div>
                            <button type="button" class="btn btn-sm btn-outline-info" id="previewTemplateBtn">
                                <i class="fas fa-eye me-1"></i>Vorschau
                            </button>
                            <button type="button" class="btn btn-sm btn-outline-primary" id="addFieldBtn">
                                <i class="fas fa-plus me-1"></i>Feld hinzufügen
                            </button>
                        </div>
                    </div>
                    
                    <div id="formFieldsContainer">
                        <!-- Felder werden hier hinzugefügt -->
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Abbrechen</button>
                <button type="button" class="btn btn-danger" id="deleteTemplateBtn" style="display: none;">
                    <i class="fas fa-trash me-2"></i>Löschen
                </button>
                <button type="button" class="btn btn-primary" id="saveTemplateBtn">
                    <i class="fas fa-save me-2"></i>Speichern
                </button>
            </div>
        </div>
    </div>
</div>

<script>
// URLs für die Symfony-Routen an InspectionTemplateManager übergeben
window.inspectionTemplateUrls = {
    list: '{{ path('admin_inspection_template_list') }}',
    create: '{{ path('admin_inspection_template_create') }}',
    update: function(id) {
        return '{{ path('admin_inspection_template_update', {'id': '__ID__'}) }}'.replace('__ID__', id);
    },
    delete: function(id) {
        return '{{ path('admin_inspection_template_delete', {'id': '__ID__'}) }}'.replace('__ID__', id);
    }
};
</script>
<script src="{{ asset('js/admin/inspection-templates.js') }}"></script>
{% endblock %}