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

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

{% block meta_title %}{{ 'Client settings'|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>
        <li class="breadcrumb-item active" aria-current="page">{{ 'Client settings'|trans }}</li>
    </ul>
{% endblock %}

{% block content %}
    {% set params = admin.extension_config_get({ 'ext': 'mod_client' }) %}
    <div class="card-tabs">
        <form method="post" action="{{ 'api/admin/extension/config_save'|link }}" class="api-form" data-api-msg="{{ 'Configuration updated'|trans }}">
            <input type="hidden" name="CSRFToken" value="{{ CSRFToken }}">
            <input type="hidden" name="ext" value="mod_client">
            <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">{{ 'General'|trans }}</a>
                </li>
                <li class="nav-item" role="presentation">
                    <a class="nav-link" href="#tab-custom-fields" data-bs-toggle="tab">{{ 'Custom Fields'|trans }}</a>
                </li>
            </ul>
            <div class="card">
                <div class="tab-content">
                    <div class="tab-pane fade show active" id="tab-index" role="tabpanel">
                        <div class="card-body">
                            <div class="mb-3 row">
                                <label class="col-sm-4 col-md-3 form-label">{{ 'Disable new signups'|trans }}</label>
                                <div class="col-sm-7 col-md-6">
                                    <label class="form-check form-switch">
                                        <input class="form-check-input" name="disable_signup" type="checkbox" {% if params.disable_signup %} checked="checked"{% endif %}>
                                    </label>
                                </div>
                            </div>
                            <div class="mb-3 row">
                                <label class="col-sm-4 col-md-3 form-label">{{ 'Require email confirmation'|trans }}</label>
                                <div class="col-sm-7 col-md-6">
                                    <label class="form-check form-switch">
                                        <input class="form-check-input" name="require_email_confirmation" type="checkbox" {% if params.require_email_confirmation %} checked="checked"{% endif %}>
                                    </label>
                                    <small class="form-hint">{{ 'After enabling this feature, all existing users will have to confirm their emails if it was not done before'|trans }}.</small>
                                </div>
                            </div>

                            <div class="mb-3 row">
                                <label class="col-sm-4 col-md-3 form-label">{{ 'Disable email change'|trans }}</label>
                                <div class="col-sm-7 col-md-6">
                                    <label class="form-check form-switch">
                                        <input class="form-check-input" name="disable_change_email" type="checkbox" {% if params.disable_change_email %} checked="checked"{% endif %}>
                                    </label>
                                </div>
                            </div>

                            <div class="mb-3 row">
                                <label class="col-sm-4 col-md-3 form-label">{{ 'Required fields'|trans }}</label>
                                <div class="col-sm-7 col-md-6">
                                    <select class="form-select" name="required[]" multiple size="13">
                                        <optgroup label="General">
                                            <option value="last_name" {% if 'last_name' in params.required %}selected{% endif %}>{{ 'Last Name'|trans }}</option>
                                            <option value="company" {% if 'company' in params.required %}selected{% endif %}>{{ 'Company'|trans }}</option>
                                            <option value="gender" {% if 'gender' in params.required %}selected{% endif %}>{{ 'Gender'|trans }}</option>
                                            <option value="birthday" {% if 'birthday' in params.required %}selected{% endif %}>{{ 'Birthday'|trans }}</option>
                                        </optgroup>
                                        <optgroup label="Address">
                                            <option value="country" {% if 'country' in params.required %}selected{% endif %}>{{ 'Country'|trans }}</option>
                                            <option value="city" {% if 'city' in params.required %}selected{% endif %}>{{ 'City'|trans }}</option>
                                            <option value="state" {% if 'state' in params.required %}selected{% endif %}>{{ 'State'|trans }}</option>
                                            <option value="address_1" {% if 'address_1' in params.required %}selected{% endif %}>{{ 'Address Line 1'|trans }}</option>
                                            <option value="address_2" {% if 'address_2' in params.required %}selected{% endif %}>{{ 'Address Line 2'|trans }}</option>
                                            <option value="postcode" {% if 'last_name' in params.required %}selected{% endif %}>{{ 'Post code'|trans }}</option>
                                            <option value="phone" {% if 'phone' in params.required %}selected{% endif %}>{{ 'Phone'|trans }}</option>
                                        </optgroup>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="card-footer text-end">
                            <input type="submit" value="{{ 'Update'|trans }}" class="btn btn-primary">
                        </div>
                    </div>

                    <div class="tab-pane fade" id="tab-custom-fields" role="tabpanel">
                        <div class="card-body">
                            {% for i in 1..10 %}
                                {% set field_name = 'custom_' ~ i %}
                                {% set custom_field = params.custom_fields.(field_name) %}
                                <div class="mb-4 row">
                                    <label class="col-sm-4 col-md-3 form-label">{% if custom_field.title is not empty %} {{ custom_field.title }} ({{ 'Custom_'|trans }}{{ i }}) {% else %}{{ 'Custom_'|trans }}{{ i }}{% endif %}</label>
                                    <div class="col-sm-7 col-md-6">
                                        <label class="form-check form-check-inline">
                                            <input class="form-check-input" id="checkboxActive-{{ field_name }}" type="checkbox" name="custom_fields[{{ field_name }}][active]" value="1"{% if custom_field.active %} checked{% endif %}>
                                            <span class="form-check-label">{{ 'Active'|trans }}</span>
                                        </label>
                                        <label class="form-check form-check-inline">
                                            <input class="form-check-input" id="checkboxRequired-{{ field_name }}" type="checkbox" name="custom_fields[{{ field_name }}][required]" value="1"{% if custom_field.required %} checked{% endif %}>
                                            <span class="form-check-label">{{ 'Required'|trans }}</span>
                                        </label>
                                        <input class="form-control" type="text" placeholder="{{ 'Field title'|trans }}" name="custom_fields[{{ field_name }}][title]" value="{{ custom_field.title }}">
                                    </div>
                                </div>
                            {% endfor %}
                        </div>
                        <div class="card-footer text-end">
                            <input type="submit" value="{{ 'Update'|trans }}" class="btn btn-primary">
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
{% endblock %}
