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

{% block meta_title %}{{ 'Client Settings'|trans }}{% endblock %}

{% set active_menu = 'system' %}

{% block breadcrumbs %}
    <ul class="breadcrumb">
        <li class="breadcrumb-item">
            <a href="{{ '/'|url }}">
                <svg class="icon">
                    <use xlink:href="#home" />
                </svg>
            </a>
        </li>
        <li class="breadcrumb-item">
            <a href="{{ 'system'|url }}">{{ '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' }) %}
    {% set required_fields = params.required|default([]) %}
    {% set auto_login_after_signup = params.auto_login_after_signup is not defined or params.auto_login_after_signup == true %}
    <div class="card">
        <div class="card-header">
            <div>
                <h3 class="card-title">{{ 'Client Settings'|trans }}</h3>
                <p class="card-subtitle">{{ 'Manage signup behavior, required client profile fields, and optional custom registration fields.'|trans }}</p>
            </div>
        </div>
        <div class="card-body pt-3 pb-0">
            <ul class="nav nav-pills mb-3" role="tablist">
                <li class="nav-item" role="presentation">
                    <a class="nav-link active" href="#tab-index" data-bs-toggle="tab" role="tab">{{ 'General'|trans }}</a>
                </li>
                <li class="nav-item" role="presentation">
                    <a class="nav-link" href="#tab-custom-fields" data-bs-toggle="tab" role="tab">{{ 'Custom Fields'|trans }}</a>
                </li>
            </ul>
            <form method="post" action="{{ 'extension/config_save'|api_url }}" {{ fb_api_form({message: 'Configuration Updated'|trans}) }}>
                <input type="hidden" name="ext" value="mod_client">
                <div class="tab-content border-top">
                    <div class="tab-pane fade show active" id="tab-index" role="tabpanel">
                        <div class="card-body">
                            <div class="alert alert-info" role="alert">
                                <strong class="me-1">{{ 'Information:'|trans }}</strong>{{ 'Use these settings to control how new client accounts are created and what profile information must be collected at signup.'|trans }}
                            </div>

                            <div class="row row-cards">
                                <div class="col-12">
                                    <section class="card card-sm">
                                        <div class="card-body">
                                            <h4 class="card-title mb-2">{{ 'Signup Controls'|trans }}</h4>
                                            <p class="text-secondary mb-3">{{ 'Control who can register and whether clients may manage their own email addresses.'|trans }}</p>

                                            <div class="d-flex flex-column gap-3">
                                                <label class="form-check form-switch form-switch-2">
                                                    <input class="form-check-input" name="disable_signup" type="checkbox" {% if params.disable_signup %}checked="checked"{% endif %}>
                                                    <span class="form-check-label">{{ 'Disable New Signups'|trans }}</span>
                                                </label>
                                                <label class="form-check form-switch form-switch-2">
                                                    <input class="form-check-input" name="require_email_confirmation" type="checkbox" {% if params.require_email_confirmation %}checked="checked"{% endif %}>
                                                    <span class="form-check-label">{{ 'Require Email Confirmation'|trans }}</span>
                                                </label>
                                                <small class="form-hint">{{ 'After enabling this feature, existing users who have not yet confirmed their email addresses will also need to do so.'|trans }}</small>
                                                <input type="hidden" name="auto_login_after_signup" value="0">
                                                <label class="form-check form-switch form-switch-2">
                                                    <input class="form-check-input" name="auto_login_after_signup" value="1" type="checkbox" {% if auto_login_after_signup %}checked="checked"{% endif %}>
                                                    <span class="form-check-label">{{ 'Auto Login After Signup'|trans }}</span>
                                                </label>
                                                <small class="form-hint">{{ 'Automatically log clients in after successful registration.'|trans }}</small>
                                                <label class="form-check form-switch form-switch-2">
                                                    <input class="form-check-input" name="disable_change_email" type="checkbox" {% if params.disable_change_email %}checked="checked"{% endif %}>
                                                    <span class="form-check-label">{{ 'Disable Email Change'|trans }}</span>
                                                </label>
                                            </div>
                                        </div>
                                    </section>
                                </div>
                                <div class="col-12">
                                    <section class="card card-sm">
                                        <div class="card-body">
                                            <h4 class="card-title mb-2">{{ 'Required Profile Fields'|trans }}</h4>
                                            <p class="text-secondary mb-3">{{ 'Select the client fields that must be completed during registration or profile updates.'|trans }}</p>
                                            <select class="form-select" name="required[]" multiple size="13">
                                        <optgroup label="General">
                                            <option value="last_name" {% if 'last_name' in required_fields %}selected{% endif %}>{{ 'Last Name'|trans }}</option>
                                            <option value="company" {% if 'company' in required_fields %}selected{% endif %}>{{ 'Company'|trans }}</option>
                                            <option value="gender" {% if 'gender' in required_fields %}selected{% endif %}>{{ 'Gender'|trans }}</option>
                                            <option value="birthday" {% if 'birthday' in required_fields %}selected{% endif %}>{{ 'Birthday'|trans }}</option>
                                        </optgroup>
                                        <optgroup label="Address">
                                            <option value="country" {% if 'country' in required_fields %}selected{% endif %}>{{ 'Country'|trans }}</option>
                                            <option value="city" {% if 'city' in required_fields %}selected{% endif %}>{{ 'City'|trans }}</option>
                                            <option value="state" {% if 'state' in required_fields %}selected{% endif %}>{{ 'State'|trans }}</option>
                                            <option value="address_1" {% if 'address_1' in required_fields %}selected{% endif %}>{{ 'Address Line 1'|trans }}</option>
                                            <option value="address_2" {% if 'address_2' in required_fields %}selected{% endif %}>{{ 'Address Line 2'|trans }}</option>
                                            <option value="postcode" {% if 'postcode' in required_fields %}selected{% endif %}>{{ 'Post Code'|trans }}</option>
                                            <option value="phone" {% if 'phone' in required_fields %}selected{% endif %}>{{ 'Phone'|trans }}</option>
                                        </optgroup>
                                    </select>
                                        </div>
                                    </section>
                                </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">
                            <div class="alert alert-info" role="alert">
                                <strong class="me-1">{{ 'Information:'|trans }}</strong>{{ 'Custom fields let you extend the standard client profile with up to ten optional registration fields.'|trans }}
                            </div>
                            <div class="row row-cards">
                            {% for i in 1..10 %}
                                {% set field_name = 'custom_' ~ i %}
                                {% set custom_field = params.custom_fields.(field_name) %}
                                <div class="col-xl-6">
                                    <section class="card card-sm h-100">
                                        <div class="card-body">
                                            <h4 class="card-title mb-3">{% if custom_field.title is not empty %}{{ custom_field.title }}{% else %}{{ 'Custom_'|trans }}{{ i }}{% endif %}</h4>
                                            <label class="form-label" for="custom-field-title-{{ i }}">{{ 'Field Title'|trans }}</label>
                                            <input class="form-control mb-3" id="custom-field-title-{{ i }}" type="text" placeholder="{{ 'Field title'|trans }}" name="custom_fields[{{ field_name }}][title]" value="{{ custom_field.title }}">
                                            <div class="d-flex flex-column gap-2">
                                                <label class="form-check form-switch form-switch-2">
                                                    <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-switch form-switch-2">
                                                    <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>
                                            </div>
                                        </div>
                                    </section>
                                </div>
                            {% endfor %}
                            </div>
                        </div>
                        <div class="card-footer text-end">
                            <input type="submit" value="{{ 'Update'|trans }}" class="btn btn-primary">
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
{% endblock %}
