{% extends "freeform/export/_layout" %}
{% import "_includes/forms" as forms %}

{% set saveShortcutRedirect = 'freeform/export/profiles/{id}' %}
{% set fullPageForm = true %}

{% set crumbs = [
    { label: craft.freeform.name, url: url("freeform") },
    { label: "Export"|t("freeform"), url: url("freeform/export/profiles") },
    { label: "Profiles"|t("freeform"), url: url("freeform/export/profiles") },
] %}

{% block actionButton %}
    <div class="buttons">
        <div class="btngroup submit">
            <input type="submit" class="btn submit" value="{{ 'Save'|t('app') }}">

            <div class="btn submit menubtn"></div>
            <div class="menu">
                <ul>
                    <li>
                        <a class="formsubmit" data-redirect="{{ continueEditingUrl|hash }}">
                            {{ "Save and continue editing"|t('app') }}
                            <span class="shortcut">⌘S</span>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
{% endblock %}

{% block content %}

        <input type="hidden" name="action" value="freeform/export/profiles/save">
        <input type="hidden" name="formId" value="{{ profile.formId }}">
        {{ redirectInput('freeform/export/profiles') }}
        {% if profile.id %}<input type="hidden" name="profileId" value="{{ profile.id }}">{% endif %}
        {{ csrfInput() }}

        {{ forms.textField({
            first: true,
            label: "Name"|t('app'),
            instructions: "What this export profile will be called in the CP."|t('freeform'),
            id: 'name',
            name: 'name',
            value: profile.name,
            errors: profile.getErrors('name'),
            autofocus: true,
            required: true
        }) }}

        {{ forms.checkboxSelectField({
            label: "Statuses"|t('freeform'),
            instructions: "Select which statuses to use"|t('freeform'),
            name: 'statuses',
            values: profile.statuses,
            errors: profile.getErrors('statuses'),
            options: statusOptionList,
            required: true,
            showAllOption: true,
        }) }}

        {{ forms.selectField({
            label: "Date Range"|t('app'),
            instructions: "The date range for fetching submissions"|t('freeform'),
            id: 'dateRange',
            name: 'dateRange',
            value: profile.dateRange,
            options: {
                '': 'None'|t('app'),
                'custom': 'Custom Range'|t('freeform'),
                'presets': { optgroup: 'Presets'|t('freeform') },
                'today': 'Today'|t('app'),
                'yesterday': 'Yesterday'|t('app'),
                7: 'Last 7 days'|t('freeform'),
                30: 'Last 30 days'|t('freeform'),
                365: 'Last 365 days'|t('freeform'),
            },
            errors: profile.getErrors('dateRange'),
        }) }}

        <div id="date-range" class="field {{ profile.dateRange != 'custom' ? 'hidden' }}">
            {{ forms.textField({
                label: "Range Start"|t('freeform'),
                instructions: "Enter the beginning of the time period. Specify an exact date (e.g. '2025-09-01') or use something relative like '15 days ago'. Default is 'today'."|t('freeform'),
                name: 'rangeStart',
                value: profile.rangeStart,
                errors: profile.getErrors('rangeStart'),
            }) }}

            {{ forms.textField({
                label: "Range End"|t('freeform'),
                instructions: "Enter the end of the time period. Specify an exact date (e.g. '2025-09-30') or use something relative like '15 days ago'. Default is 'today'."|t('freeform'),
                name: 'rangeEnd',
                value: profile.rangeEnd,
                errors: profile.getErrors('rangeEnd'),
            }) }}
        </div>

        {{ forms.textField({
            label: "Limit"|t('app'),
            instructions: "Maximum number of submissions to fetch."|t('freeform'),
            id: 'limit',
            name: 'limit',
            size: 8,
            value: profile.limit,
            errors: profile.getErrors('limit'),
        }) }}

        <hr>

        <div class="field">
            <div class="heading">
                <label>{{ "Fields to export"|t('freeform') }}</label>
                <div class="instructions">
                    <p>{{ "Specify the fields you wish to export and their order."|t('freeform') }}</p>
                </div>
            </div>
            <div class="input">
                <table id="field-settings" class="data fullwidth collapsible">
                    <thead>
                    <th></th>
                    <th width="50">{{ 'Enabled'|t('app') }}</th>
                    <th>{{ 'Field Name'|t('freeform') }}</th>
                    </thead>
                    <tbody>
                    {% for field in profile.fieldDescriptors %}
                        <tr>
                            <td class="thin">
                                <a class="move icon" title="{{ 'Reorder'|t('app') }}"></a>
                            </td>
                            <td width="50">
                                {{ forms.lightswitchField({
                                    name: 'fieldSettings[' ~ field.id ~ '][checked]',
                                    on: field.used
                                }) }}
                            </td>
                            <td>
                                {{ field.label|t('freeform') }}
                                <input type="hidden" name="fieldSettings[{{ field.id }}][label]" value="{{ field.label|t('freeform') }}" />
                            </td>
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>

        <hr>

        <div class="field">
            <div class="heading">
                <label>{{ "Filters"|t('app') }}</label>
                <div class="instructions">
                    <p>{{ 'Add filters to narrow down your results. For wildcards, use LIKE and the `%` symbol, e.g. `cat%`. For searching into arrays (Checkboxes fields), use LIKE, quotes, and wrap values with `%`, e.g. `%"option a"%`.'|t('freeform') }}</p>
                </div>
            </div>
            <div class="input">

                <table class="shadow-box editable value-group" id="filter-table"
                       data-type="checkbox_group">
                    <thead>
                    <tr>
                        <th class="header thin filter-field">{{ "Field"|t('freeform') }}</th>
                        <th class="header thin filter-type">{{ "Filter Type"|t('freeform') }}</th>
                        <th class="header thin filter-value" colspan="2">{{ "Value"|t('app') }}</th>
                    </tr>
                    </thead>
                    <tbody>
                    {% for filter in profile.filters %}
                        {% set iterator = loop.index0 %}

                        <tr data-iterator="{{ iterator }}">
                            <td width="50">
                                <div class="select">
                                    <select name="filters[{{ iterator }}][field]">
                                        {% for field in profile.fieldDescriptors %}
                                            <option value="{{ field.id }}"{{ field.id == filter.field ? ' selected' }}>
                                                {{ field.label }}
                                            </option>
                                        {% endfor %}
                                    </select>
                                </div>
                            </td>
                            <td width="50">
                                <div class="select">
                                    {{ forms.select({
                                        name: 'filters['~iterator~'][type]',
                                        value: filter.type,
                                        options: {
                                            '=': 'Equal To'|t('app'),
                                            '!=': 'Not Equal To'|t('app'),
                                            'like': 'Like'|t('app'),
                                            'not-like': 'Not Like'|t('app'),
                                        }
                                    }) }}
                                </div>
                            </td>
                            <td class="textual">
                                <textarea class="code" name="filters[{{ iterator }}][value]" rows="1">{{ filter.value }}</textarea>
                            </td>
                            <td class="thin action"><a class="delete icon" title="{{ 'Delete'|t('freeform') }}"></a></td>
                        </tr>
                    {% endfor %}
                    <template>
                        <tr data-iterator="__iterator__">
                            <td width="50">
                                <div class="select">
                                    <select name="filters[__iterator__][field]">
                                        {% for field in profile.fieldDescriptors %}
                                            <option value="{{ field.id }}">{{ field.label }}</option>
                                        {% endfor %}
                                    </select>
                                </div>
                            </td>
                            <td width="50">
                                <div class="select">
                                    {{ forms.select({
                                        name: 'filters[__iterator__][type]',
                                        options: {
                                            '=': 'Equal To'|t('freeform'),
                                            '!=': 'Not Equal To'|t('freeform'),
                                            'like': 'Like'|t('freeform'),
                                            'not-like': 'Not Like'|t('freeform'),
                                        }
                                    }) }}
                                </div>
                            </td>
                            <td class="textual">
                                <textarea class="code" name="filters[__iterator__][value]" rows="1"></textarea>
                            </td>
                            <td class="thin action"><a class="delete icon" title="{{ 'Delete'|t('freeform') }}"></a></td>
                        </tr>
                    </template>
                    </tbody>
                </table>

                <div class="btn dashed add icon" id="add-filter">
                    {{ addRowLabel is defined ? addRowLabel : "Add an option"|t('freeform') }}
                </div>

            </div>
        </div>

    <style>
        #filter-table textarea.code {
            padding: 10px 9px 9px;
        }

        #filter-table textarea.code:focus {
            padding: 10px 9px 9px;
        }
    </style>
{% endblock %}

{% js %}
    (function() {
        var select = document.getElementById("dateRange");
        var range = document.getElementById("date-range");

        select.addEventListener("change", function (event) {
            var value = event.target.value;
            if (value === "custom") {
                range.classList.remove("hidden");
            } else {
                range.classList.add("hidden");
            }
        });
    })();
{% endjs %}