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

{% block title %}Inspektionsvorlagen{% endblock %}

{% block breadcrumb %}<li>Wasser</li><li>Inspektionsvorlagen</li>{% endblock %}

{% block page_head %}
    <div>
        <h1>Inspektionsvorlagen</h1>
        <p class="sm-lead">Formulare für wiederkehrende Prüfungen an den Containern.</p>
    </div>
    <div class="sm-page-actions">
        <dl class="sm-summary me-3"><div><dt>Vorlagen</dt><dd>{{ templates|length }}</dd></div></dl>
        <button type="button" class="btn btn-primary" id="addTemplateBtn"><i class="fas fa-plus me-1"></i>Neue Vorlage</button>
    </div>
{% endblock %}

{% block stylesheets %}
    <link rel="stylesheet" href="{{ asset('css/admin/inspection-templates.css') }}?v={{ sm_v }}">
{% endblock %}

{% block content %}
    <div data-sm-inspection-templates
         data-url-list="{{ path('admin_inspection_template_list') }}"
         data-url-create="{{ path('admin_inspection_template_create') }}"
         data-url-update="{{ path('admin_inspection_template_update', {id: '__ID__'}) }}"
         data-url-delete="{{ path('admin_inspection_template_delete', {id: '__ID__'}) }}">

        <div class="sm-toolbar">
            <input class="sm-search" type="search" placeholder="Vorlagen durchsuchen …" aria-label="Vorlagen durchsuchen" data-sm-search="#templatesList">
            <div class="sm-segment" data-sm-filter="#templatesList" role="group" aria-label="Status">
                <button type="button" class="active" data-sm-filter-value="all">Alle</button>
                <button type="button" data-sm-filter-value="active">Aktiv</button>
                <button type="button" data-sm-filter-value="inactive">Inaktiv</button>
            </div>
        </div>

        <div id="templatesList" class="sm-tpl-grid" aria-live="polite">
            <div class="sm-empty sm-tpl-loading" id="templatesLoading">Vorlagen werden geladen …</div>
            <div class="sm-empty" data-sm-empty hidden><strong>Keine Treffer</strong>Suchbegriff oder Filter ändern.</div>
        </div>

        <div id="emptyState" class="sm-panel" hidden>
            <div class="sm-empty"><strong>Keine Vorlagen vorhanden</strong>Mit „Neue Vorlage“ das erste Prüfformular anlegen.</div>
        </div>
    </div>

    {# Vorschau #}
    <div class="modal fade" id="previewModal" tabindex="-1" aria-labelledby="previewModalTitle" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <h2 class="modal-title" id="previewModalTitle">Vorschau</h2>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Schließen"></button>
                </div>
                <div class="modal-body sm-form" id="previewForm"></div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Schließen</button>
                </div>
            </div>
        </div>
    </div>

    {# Kopieren #}
    <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">
                    <h2 class="modal-title" id="copyTemplateModalTitle">Vorlage kopieren</h2>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Schließen"></button>
                </div>
                <div class="modal-body">
                    <label for="copyTemplateName" class="form-label">Name der Kopie</label>
                    <input type="text" class="form-control" id="copyTemplateName" required>
                    <div class="invalid-feedback">Bitte einen Namen eingeben.</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-1"></i>Kopie erstellen</button>
                </div>
            </div>
        </div>
    </div>

    {# Editor #}
    <div class="modal fade" id="templateModal" tabindex="-1" aria-labelledby="templateModalTitle" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <h2 class="modal-title" id="templateModalTitle">Neue Vorlage</h2>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Schließen"></button>
                </div>
                <div class="modal-body">
                    <form id="templateForm" class="sm-form">
                        <input type="hidden" id="templateId">
                        <fieldset class="sm-fieldset">
                            <legend>Vorlage</legend>
                            <div class="sm-form-grid">
                                <div>
                                    <label for="templateName" class="form-label">Name</label>
                                    <input type="text" class="form-control" id="templateName" required>
                                </div>
                                <div class="sm-tpl-switch">
                                    <div class="form-check form-switch">
                                        <input class="form-check-input" type="checkbox" role="switch" id="templateIsActive" checked>
                                        <label class="form-check-label" for="templateIsActive">Aktiv, bei Prüfungen auswählbar</label>
                                    </div>
                                </div>
                                <div class="sm-span-2">
                                    <label for="templateDescription" class="form-label">Beschreibung</label>
                                    <textarea class="form-control" id="templateDescription" rows="2"></textarea>
                                </div>
                            </div>
                        </fieldset>

                        <fieldset class="sm-fieldset">
                            <legend>Formularfelder</legend>
                            <div class="sm-tpl-fields-head">
                                <p class="form-text m-0">Reihenfolge per Griff ziehen oder mit den Pfeilen ändern.</p>
                                <span class="sm-page-actions">
                                    <button type="button" class="btn btn-sm btn-secondary" id="previewTemplateBtn"><i class="fas fa-eye me-1"></i>Vorschau</button>
                                    <button type="button" class="btn btn-sm btn-primary" id="addFieldBtn"><i class="fas fa-plus me-1"></i>Feld hinzufügen</button>
                                </span>
                            </div>
                            <div id="formFieldsContainer" class="sm-field-list"></div>
                            <div class="sm-empty sm-field-list-empty" id="formFieldsEmpty"><strong>Noch keine Felder</strong>Mit „Feld hinzufügen“ beginnen.</div>
                        </fieldset>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-danger me-auto" id="deleteTemplateBtn" hidden><i class="fas fa-trash me-1"></i>Löschen</button>
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Abbrechen</button>
                    <button type="button" class="btn btn-primary" id="saveTemplateBtn">Speichern</button>
                </div>
            </div>
        </div>
    </div>

    <template id="fieldItemTemplate">
        <div class="sm-field-item" data-field-item>
            <div class="sm-field-item-head">
                <span class="sm-drag-handle" draggable="true" title="Ziehen zum Verschieben" aria-hidden="true"><i class="fas fa-grip-vertical"></i></span>
                <span class="sm-field-item-type"><i class="fas" data-field-icon></i><span data-field-typename></span></span>
                <span class="sm-field-item-tools">
                    <button type="button" class="btn btn-sm btn-secondary" data-field-action="up" aria-label="Nach oben"><i class="fas fa-arrow-up"></i></button>
                    <button type="button" class="btn btn-sm btn-secondary" data-field-action="down" aria-label="Nach unten"><i class="fas fa-arrow-down"></i></button>
                    <button type="button" class="btn btn-sm btn-outline-danger" data-field-action="remove" aria-label="Feld entfernen"><i class="fas fa-trash"></i></button>
                </span>
            </div>
            <div class="sm-field-item-body">
                <div>
                    <label class="form-label" data-for="type">Feldtyp</label>
                    <select class="form-select form-select-sm" data-field="type"></select>
                </div>
                <div>
                    <label class="form-label" data-for="label">Bezeichnung</label>
                    <input type="text" class="form-control form-control-sm" data-field="label" placeholder="z. B. Filterdruck geprüft">
                </div>
                <div class="form-check sm-field-required">
                    <input class="form-check-input" type="checkbox" data-field="required">
                    <label class="form-check-label" data-for="required">Pflichtfeld</label>
                </div>
            </div>
            <div class="sm-field-options" data-field-options hidden>
                <span class="form-label">Auswahloptionen</span>
                <div class="sm-field-option-list" data-option-list></div>
                <button type="button" class="btn btn-sm btn-secondary" data-field-action="add-option"><i class="fas fa-plus me-1"></i>Option</button>
            </div>
            <p class="sm-field-hint" data-field-hint hidden></p>
        </div>
    </template>

    <template id="fieldOptionTemplate">
        <div class="sm-field-option">
            <input type="text" class="form-control form-control-sm" data-option placeholder="Option" aria-label="Option">
            <button type="button" class="btn btn-sm btn-outline-danger" data-field-action="remove-option" aria-label="Option entfernen"><i class="fas fa-times"></i></button>
        </div>
    </template>
{% endblock %}

{% block javascripts %}
    <script src="{{ asset('js/admin/signature-pad.js') }}" defer></script>
    <script src="{{ asset('js/admin/inspection-templates.js') }}?v={{ sm_v }}" defer></script>
{% endblock %}