{% extends request.ajax ? "layout_blank.html.twig" : "layout_default.html.twig" %}

{% import "macro_functions.html.twig" as mf %}

{% block meta_title %}{{ 'Custom form builder'|trans }}{% endblock %}

{% set active_menu = 'system' %}

{% block breadcrumbs %}
    <ul class="breadcrumb">
        <li class="breadcrumb-item">
            <a href="{{ '/'|alink }}">
                <svg class="icon">
                    <use xlink:href="#home"/>
                </svg>
            </a>
        </li>
        <li class="breadcrumb-item">
            <a href="{{ 'system'|alink }}">{{ 'Settings'|trans }}</a>
        </li>
        {% if not request.id %}
            <li class="breadcrumb-item active" aria-current="page">{{ 'Custom form builder'|trans }}</li>
        {% else %}
            {% set form = admin.formbuilder_get_form({ "id": request.id }) %}
            <li class="breadcrumb-item">
                <a href="{{ 'extension/settings/formbuilder'|alink }}">{{ 'Custom form builder'|trans }}</a>
            </li>
            <li class="breadcrumb-item active" aria-current="page">{{ form.name }}</li>
        {% endif %}
    </ul>
{% endblock %}

{% block content %}
<div class="card">
{% if not request.id %}
    <!--<ul class="nav nav-tabs" role="tablist">
        <li class="nav-item" role="presentation">
            <a class="nav-link active" href="#tab-index" data-bs-toggle="tab" role="tab">{{ 'Custom forms'|trans }}</a>
        </li>
        <li class="nav-item" role="presentation">
            <a class="nav-link active" href="#tab-import" data-bs-toggle="tab" role="tab">{{ 'Import form'|trans }}</a>
        </li>
    </ul>-->

    <div class="tab-pane fade show active" id="tab-index" role="tabpanel">
                <div class="card-header">
                    <h3 class="card-title">{{ 'Custom forms'|trans }}</h3>
                    <div class="card-actions">
                        <a href="{{ 'Create new form'|trans }}" id="new-form" class="btn btn-primary">
                            <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 5l0 14"></path><path d="M5 12l14 0"></path></svg>
                            <span>{{ 'Add new'|trans }}</span>
                        </a>
                    </div>
                </div>
                <div class="table-responsive">
                    <table class="table card-table table-vcenter table-striped text-nowrap">
                        <thead>
                            <tr>
                                <th>{{ 'Title'|trans }}</th>
                                <th>{{ 'Orders'|trans }}</th>
                                <th>{{ 'Products'|trans }}</th>
                                <th class="w-1"></th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for form in admin.formbuilder_get_forms %}
                            <tr>
                                <td>{{ form.name }}</td>
                                <td>{{ form.order_count }}</td>
                                <td>{{ form.product_count }}</td>
                                <td>
                                    <a class="btn btn-icon copy-form" href="#" data-api-reload="1" title="Copy"
                                       data-form-id="{{ form.id }}">
                                        <svg class="icon">
                                            <use xlink:href="#copy" />
                                        </svg>
                                    </a>
                                    <a class="btn btn-icon" href="{{ 'extension/settings/formbuilder'|alink({'id' : form.id}) }}" title="Edit">
                                        <svg class="icon">
                                            <use xlink:href="#edit" />
                                        </svg>
                                    </a>
                                    <a class="btn btn-icon remove-form" data-form-id="{{ form.id }}" title="Delete">
                                        <svg class="icon">
                                            <use xlink:href="#delete" />
                                        </svg>
                                    </a>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

{#        <div class="tab-pane fade" id="tab-import" role="tabpanel">#}
{#            <form method="post" action="{{ 'api/admin/formbuilder/import'|link }}" class="mainForm api-form save"#}
{#                data-api-reload="1">#}
{#                <input type="hidden" name="CSRFToken" value="{{ CSRFToken }}" />#}
{#                <fieldset>#}
{#                    <div class="formBottom">#}
{#                        <textarea name="form" cols="5" rows="5"#}
{#                            placeholder="Paste new form configuration text."></textarea>#}
{#                    </div>#}
{#                    <div class="fix"></div>#}
{#                    <input type="submit" value="{{ 'Import'|trans }}" class="btn btn-primary submitForm" style="margin: 0" />#}
{#                </fieldset>#}
{#            </form>#}
{#        </div>#}

{% else %}
{% set form = admin.formbuilder_get_form({ "id": request.id }) %}
    <div class="tab-pane fade show active" id="form-options-{{ form.id }}" role="tabpanel">
        <div class="card-header">
            <h3 class="card-title">{{ 'Form options'|trans }}</h3>
        </div>
        <form method="POST" action="{{ 'api/admin/formbuilder/update_form_settings'|link }}" class="api-form"
              data-api-msg="{{ 'Form options were updated'|trans }}">
            <div class="row row-cards">
                <div class="card-body col-12">
                    <input type="hidden" name="form_id" value="{{ form.id }}">
                    <div class="mb-3 row">
                        <label class="col-md-3 col-form-label"
                               for="form_name">{{ 'Form title'|trans }}</label>
                        <div class="col-md-8">
                            <input class="form-control" type="text" name="form_name" id="form_name"
                                   value="{{ form.name }}"/>
                        </div>
                    </div>
                    <div class="mb-3 row">
                        <label class="col-md-3 col-form-label" for="form_type">{{ 'Labels position'|trans }}</label>
                        <div class="col-md-8">
                            <select class="form-select" name="type" id="form_type">
                                <option value="default" {% if form.style.type=='default' %} selected {% endif %}>{{ 'Labels on
                            top'|trans }}</option>
                                <option
                                    value="horizontal" {% if form.style.type=='horizontal' %} selected {% endif %}>{{ 'Labels on the left'|trans }}</option>
                            </select>
                        </div>
                    </div>
                    <div class="mb-3 row">
                        <label class="col-md-3 col-form-label" for="show_title">{{ 'Form title visibility'|trans }}</label>
                        <div class="col-md-8">
                            <select class="form-select" name="show_title" id="show_title">
                                <option value="1" {% if form.style.show_title=='1' %} selected {% endif %}>{{ 'Show form
                            title'|trans }}</option>
                                <option value="0" {% if form.style.show_title=='0' %} selected {% endif %}>{{ 'Do not show form
                            title'|trans }}</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card-footer text-end">
                <button type="submit" class="btn btn-primary">{{ 'Update'|trans }}</button>
            </div>
        </form>
    </div>

    <div class="mt-3 card widget" id="form-{{ form.id }}">
        <div class="card-header">
            <h3 class="card-title">{{ form.name }}</h3>
        </div>
        <div class="row row-cards">
            <div class="card-body col-12">
                <div class="mb-3 row">
                    <div class="d-flex gap-2 flex-wrap mb-3" id="fields">
                        <a href="{{ 'api/admin/formbuilder/add_field'|link({'form_id': form.id, 'type': 'text'}) }}"
                           class="btn btn-outline-primary api-link" data-api-reload="1">
                            <svg class="icon">
                                <use xlink:href="#plus"/>
                            </svg>
                            <span>{{ 'Text'|trans }}</span>
                        </a>
                        <a href="{{ 'api/admin/formbuilder/add_field'|link({'form_id': form.id, 'type': 'select'}) }}"
                           class="btn btn-outline-primary api-link" data-api-reload="1">
                            <svg class="icon">
                                <use xlink:href="#plus"/>
                            </svg>
                            <span>{{ 'Dropdown'|trans }}</span>
                        </a>
                        <a href="{{ 'api/admin/formbuilder/add_field'|link({'form_id': form.id, 'type': 'radio'}) }}"
                           class="btn btn-outline-primary api-link" data-api-reload="1">
                            <svg class="icon">
                                <use xlink:href="#plus"/>
                            </svg>
                            <span>{{ 'Radio'|trans }}</span>
                        </a>
                        <a href="{{ 'api/admin/formbuilder/add_field'|link({'form_id': form.id, 'type': 'checkbox'}) }}"
                           class="btn btn-outline-primary api-link" data-api-reload="1">
                            <svg class="icon">
                                <use xlink:href="#plus"/>
                            </svg>
                            <span>{{ 'Checkbox'|trans }}</span>
                        </a>
                        <a href="{{ 'api/admin/formbuilder/add_field'|link({'form_id': form.id, 'type': 'textarea'}) }}"
                           class="btn btn-outline-primary api-link" data-api-reload="1">
                            <svg class="icon">
                                <use xlink:href="#plus"/>
                            </svg>
                            <span>{{ 'Textarea'|trans }}</span>
                        </a>
                    </div>
                </div>
                <fieldset>
                    {% for i,field in form.fields %}
                        <div class="wrap-field">
                            {{ include('mod_formbuilder_field.html.twig', field) }}
                            {{ include('mod_formbuilder_preview.html.twig', field) }}
                        </div>
                    {% endfor %}
                </fieldset>
            </div>
        </div>
</div>
{% endif %}
{% endblock %}

{% block js %}
    <script type="text/javascript">
        $('.new-field').on('click', function () {
            const p = $(this).closest('.copy-field').prev();
            p.clone().insertAfter(p);
            p.next().find('input').val("");
            return false;
        });

        $('.remove-item').on('click', function () {
            const fid = $(this).attr('data-field-id');
            const rm = $(this);
            Modals.create({
                type: 'danger',
                title: '{{ "Delete field?"|trans }}',
                content: '{{ "Are you sure you want to delete this custom field?"|trans }}',
                confirmButton: '{{ "Delete"|trans }}',
                confirmCallback: function () {
                    API.admin.post('formbuilder/delete_field', {id: fid}, function () {
                        $(rm).parents('.wrap-field').slideUp("normal", function () {
                            $(rm).remove();
                        });
                    });
                }
            });
            return false;
        });

        $('.remove-form').on('click', function () {
            const fid = $(this).data('form-id');
            console.log(fid)
            const rm = $(this);
            Modals.create({
                type: 'danger',
                title: '{{ "Delete Form?"|trans }}',
                content: '{{ "Are you sure you want to delete this form?"|trans }}',
                confirmButton: '{{ "Delete"|trans }}',
                confirmCallback: function () {
                    API.admin.post('formbuilder/delete_form', {id: fid}, function () {
                        bb.redirect("{{ 'extension/settings/formbuilder'|alink({ 'id': '' }) }}");
                    });
                }
            });
            return false;
        });

        $('#new-form').on('click', function () {
            Modals.create({
                type: 'prompt',
                title: '{{ "New form"|trans }}',
                label: '{{ "Give your new form a title"|trans }}',
                value: '{{ "My new form"|trans }}',
                promptConfirmButton: '{{ "Create"|trans }}',
                promptConfirmCallback: function (title) {
                    API.admin.post('formbuilder/create_form', {
                        name: title
                    }, function (id) {
                        bb.redirect("{{ 'extension/settings/formbuilder'|alink({ 'id': '' }) }}" + id);
                    });
                }
            });
            return false;
        });

        $('.copy-form').on('click', function () {
            const fid = $(this).attr('data-form-id');
            Modals.create({
                type: 'prompt',
                title: '{{ "Copy form"|trans }}',
                label: '{{ "Give your duplicate form a title"|trans }}',
                value: '{{ "My duplicate form"|trans }}',
                promptConfirmButton: '{{ "Copy"|trans }}',
                promptConfirmCallback: function (title) {
                    API.admin.post('formbuilder/copy_form', {
                        name: title,
                        form_id: fid
                    }, function (id) {
                        bb.redirect("{{ 'extension/settings/formbuilder'|alink({ 'id': '' }) }}" + id);
                    });
                }
            });
            return false;
        })
    </script>
{% endblock %}
