{% extends "@Contao/be_main" %}

{% block main_content %}

    <link rel="stylesheet" href="/bundles/viopoll/backend.css">
    <div class="kkb_survey_content">
        <div id="filter" class="wrapper row">

            <!-- Filterbox AUSWERTUNGSART -->
            <div id="select_survey" class="col_6 label_container">
                <h2 class="filter-headline">Grundlegende Filter</h2>

                <!-- Umfrage wählen -->
                <div class="widget-box row label_container">
                    <label class="col_8" title="E-Mail">Umfrage</label>
                    <select class="col_8" id="poll-id" name="poll-id">
                        <option value="">- Umfrage wählen -</option>
                        {% for pollId in pollIds %}
                            <option value="{{ pollId.pollId }}">{{ pollId.pollLabel}}</option>
                        {% endfor %}
                    </select>
                </div>

                <!-- Gespeicherten Filter laden -->
                <div class="widget-box row label_container">
                    <label class="col_10" title="E-Mail">Gespeicherte Filter</label>
                    <select class="col_4" id="poll-saved-filter" name="poll-saved-filter" data-all-filters='{{ allSavedFilters }}'>
                        <option value="">- Filter wählen -</option>
                        {% for pollId in pollIds %}
                            <option value="{{ pollId.pollId }}">{{ pollId.pollLabel}}</option>
                        {% endfor %}
                    </select>
                    <button class="button-default submit col_4" id="load-filter-button" >
                        <a>laden</a>
                    </button>
                </div>

                <!-- Diagramm-Typ -->
                <div id="diagram-type" class="label_container widget-box row">
                    <span class="label col_12">Diagramm-Typen:</span>
                    <div class="option radio col_3">
                        <input type="radio" id="diagram-bar" name="diagram-type" value="bar" checked>
                        <label for="diagram-bar">Balkendiagramm</label>
                    </div>
                    <div class="option radio col_3">
                        <input type="radio" id="diagram-radar" name="diagram-type" value="radar">
                        <label for="diagram-radar">Netzdiagramm</label>
                    </div>
                    <div class="option radio col_6">
                        <input type="radio" id="diagram-both" name="diagram-type" value="both">
                        <label for="diagram-both">beide anzeigen</label>
                    </div>
                </div>
            </div>

            <!-- Filterbox ZEITRAUM -->
            <div id="filter_options_survey" class="col_6 label_container">

                <h2 class="filter-headline">Zeitraum</h2>

                <!-- Zeitraumart wählen -->
                <div id="period-type" class="widget-box row">
                    <div class="option radio col_3">
                        <input id="period-type-predefined" type="radio" name="period-type" value="period-predefined" checked>
                        <label for="period-type-predefined">Vordefinierter Zeitraum</label>
                    </div>
                    <div class="option radio col_9">
                        <input id="period-type-custom" type="radio" name="period-type" value="period-custom">
                        <label for="period-type-custom">Individueller Zeitraum</label>
                    </div>
                </div>

                <!-- Optional: Vordefinierter Zeitraum -->
                <div id="period-predefined" class="widget-box row">
                    <div class="label_container col_12">
                        <label for="period-year">Jahr</label>
                        <input class="text" id="period-year"
                               type="text"
                               min="{{ yearSpan.yearMin }}"
                               max="{{ yearSpan.yearMax }}"
                               value="{{ yearSpan.yearMax }}">
                    </div>
                    <div class="label_container col_12">
                        <div id="period-buttons">
                            <div class="quarter_buttons period-line row">
                                <button class="quarter-button period-button col_3 first" id="period-quarter-1"><span>Quartal 1</span></button>
                                <button class="quarter-button period-button col_3" id="period-quarter-2"><span>Quartal 2</span></button>
                                <button class="quarter-button period-button col_3" id="period-quarter-3"><span>Quartal 3</span></button>
                                <button class="quarter-button period-button col_3 last" id="period-quarter-4"><span>Quartal 4</span></button>
                            </div>
                            <div class="year_buttons period-lin row">
                                <button class="month-button period-button col_2 first" id="period-month-1"><span>Jan.</span></button>
                                <button class="month-button period-button col_2" id="period-month-2"><span>Feb.</span></button>
                                <button class="month-button period-button col_2" id="period-month-3"><span>Mär.</span></button>
                                <button class="month-button period-button col_2" id="period-month-4"><span>Apr.</span></button>
                                <button class="month-button period-button col_2" id="period-month-5"><span>Mai</span></button>
                                <button class="month-button period-button col_2 last" id="period-month-6"><span>Juni</span></button>
                            </div>
                            <div class="year_buttons period-lin row">
                                <button class="month-button period-button col_2 first" id="period-month-7"><span>Juli</span></button>
                                <button class="month-button period-button col_2" id="period-month-8"><span>Aug.</span></button>
                                <button class="month-button period-button col_2" id="period-month-9"><span>Sep.</span></button>
                                <button class="month-button period-button col_2" id="period-month-10"><span>Okt.</span></button>
                                <button class="month-button period-button col_2" id="period-month-11"><span>Nov.</span></button>
                                <button class="month-button period-button col_2 last" id="period-month-12"><span>Dez.</span></button>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Optional: Individueller Zeitraum -->
                <div id="period-custom" class="widget-box row">
                    <div class="col_6 label_container">
                        <label for="period-start">Beginn des Auswertungszeitraums</label>
                        <input id="period-start"
                               type="date"
                               class="text"
                               value="{{ yearSpan.yearMax }}-01-01">
                    </div>
                    <div class="col_6 label_container">
                        <label for="period-end">Ende des Auswertungszeitraums</label>
                        <input id="period-end"
                               type="date"
                               class="text"
                               value="{{ yearSpan.yearMax }}-12-31">
                    </div>
                </div>

            </div>


            <!-- Filterbox - Accordion ERWEITERTE FILTER -->
            <div id="filters_advanced" class="col_12 label_container accordionWrapper">
                <input type="checkbox" id="title1" />
                <label for="title1" class="filter-headline accordion-header "><span class="togg-arr"></span> Erweiterte Filter</label>
                <div id="answer-filter" class="accordion-body widget-box">
                    <div id="answer-filter-wrapper" data-questions="{{ filterQuestions }}" class="row">

                    </div>
                </div>
            </div>

            <!-- Filterbox - Accordion Export/Import -->
            <div id="filters_export" class="col_12 label_container accordionWrapper">
                <input type="checkbox" id="title2" />
                <label for="title2" class="filter-headline accordion-header"><span class="togg-arr"></span> Export und Import</label>
                <div id="filters_export_body" class="accordion-body widget-box">

                    <div class="row">
                        <div class="col_2 first">
                            <button class="button-default csv"  id="export-csv"><a>als CSV exportieren</a></button>
                        </div>
                        <div class="col_2 second">
                            <button class="button-default pdf"  id="export-pdf"><a>als PDF exportieren</a></button>
                        </div>

                        <div class="col_2 third">
                            &nbsp;
                        </div>

                        <div class="col_3 fourth">
                            <input type="hidden" id="CSV_REQUEST_TOKEN" name="CSV_REQUEST_TOKEN" value="{{csrfToken}}">
                            <input type="file" accept=".csv" id="csv-file-input" name="csv-file">
                        </div>
                        <div class="col_3 fifth">
                            <button class="button-default import" id="import-csv-button"><a>CSV importieren</a></button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Filterbox - Accordion E-Mail Reporting -->
           <div id="filters_reporting" class="col_12 label_container accordionWrapper">
                <input type="checkbox" id="title3" />
                <label for="title3" class="filter-headline accordion-header"><span class="togg-arr"></span> E-Mail Reporting</label>
                <div id="filters_reporting_body" class="accordion-body" data-savedReporting="{{ allSavedReporting }}">
                    <div id="filters_reporting_wrapper">
                        <div class="filters_reporting_row widget-box col-12 row">
                            <div class="col_4">
                                <label title="E-Mail">E-Mail</label>
                                <input class="row_mail" type="text" name="row_mail[]" style="display: block">
                            </div>
                            <div class="col_3">
                                <label title="Interval">Interval</label>
                                <select class="row_interval" name="row_interval[]">
                                    <option value="">--</option>
                                    <option value="day">Täglich</option>
                                    <option value="weekly">Wöchentlich</option>
                                    <option value="monthly">Monatlich</option>
                                    <option value="quartal">Quartalsmäßig</option>
                                    <option value="year">Jährlich</option>
                                </select>
                            </div>
                            <div class="col_4">
                                <label title="Filter">Filter</label>
                                <select class="row_filter" name="row_filter[]" data-savedfilter="{{ allSavedFilters }}">
                                    <option value="">--</option>
                                </select>
                            </div>
                            <div class="col_1">
                                <button class="row_new" title="Eintrag kopieren"><img src="system/themes/flexible/icons/copy.svg" width="20" height="20" alt="Eintrag kopieren" title="Eintrag kopieren"></button>
                                <button class="row_delete" title="Eintrag löschen"><img src="system/themes/flexible/icons/delete.svg" width="20" height="20" alt="Eintrag löschen" title="Eintrag löschen"></button>
                            </div>
                        </div>
                    </div>
                    <div class="col_3" style="display: block">
                       <input type="hidden" id="SAVE_REPORTING_REQUEST_TOKEN" name="SAVE_REPORTING_REQUEST_TOKEN" value="{{csrfToken}}">
                       <button class="button-default submit" id="save-reporting-button">
                           <a>speichern</a>
                       </button>
                       <div id="save-reporting-button-response"></div>
                    </div>
            </div>

            <!-- Filter Save Line -->
            <div id="save_filter-container" class="col_12">
                <div id="save-filters" class="row widget-box">
                    <div class="col_8">
                        <input style="display: block" type="text" id="filter-name" placeholder="Name des Filters">
                        <div id="filter-button-response"></div>
                    </div>
                    <div class="col_4">
                        <input type="hidden" id="SAVE_FILTER_REQUEST_TOKEN" name="SAVE_FILTER_REQUEST_TOKEN" value="{{csrfToken}}">
                        <button class="button-default submit" id="filter-button" data-all-filters='{{ allSavedFilters }}'>
                            <a>Filter speichern</a>
                        </button>

                    </div>
                </div>
            </div>

            <!-- Submit Line -->
            <div id="submit_survey" class="col_12">
                <div class="row widget-box">
                    <div class="col_3">
                        <button class="button-default submit" id="display"><a>Filter anwenden</a></button>
                        <input type="hidden" id="FILTER_REQUEST_TOKEN" name="FILTER_REQUEST_TOKEN" value="{{csrfToken}}">
                    </div>
                    <div class="col_3">
                        <button class="button-default submit" id="reset-filter-button">
                            <a>Filter zurücksetzen</a>
                        </button>
                    </div>
                </div>
            </div>
        </div> <!-- Filter Ende -->

        <!-- CSV-Import-Bericht -->
        <div id="csv-report" style="text-align: center;width: 100%;margin-top: 20px;"></div>

        <!-- Auswertung -->
        <div id="evaluation" class="widget-box"></div>
    </div>

    <script src="/bundles/viopoll/converter.js"></script>
    <script src="/bundles/viopoll/backend.js"></script>
{% endblock %}