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

<div class="card-body">
    <form method="post" action="{{ 'product/update_config'|api_url }}" {{ fb_api_form({message: 'Hosting Settings Updated'|trans}) }} id="hosting-settings-form">
        <div class="mb-5">
            <div class="mb-3">
                <h3 class="card-title mb-1">{{ 'Hosting Settings'|trans }}</h3>
                <p class="text-secondary mb-0">{{ 'Choose the server, hosting plan, and reseller behavior that will be used when provisioning this product.'|trans }}</p>
            </div>
            <div class="row g-3">
                <div class="col-lg-6">
                    <label class="form-label">{{ 'Server'|trans }}</label>
                    {{ mf.selectbox('config[server_id]', admin.servicehosting_server_get_pairs, product.config.server_id, 0, 'Select Server'|trans) }}
                </div>
                <div class="col-lg-6">
                    <label class="form-label">{{ 'Hosting Plan'|trans }}</label>
                    {{ mf.selectbox('config[hosting_plan_id]', admin.servicehosting_hp_get_pairs, product.config.hosting_plan_id, 0, 'Select Hosting Plan'|trans) }}
                </div>
                <div class="col-lg-6">
                    <label class="form-label">{{ 'Reseller Hosting'|trans }}</label>
                    <div class="d-flex flex-wrap gap-3 pt-1">
                        <label class="form-check">
                            <input class="form-check-input" id="radioResellerYes" type="radio" name="config[reseller]" value="1"{% if product.config.reseller %} checked{% endif %}>
                            <span class="form-check-label">{{ 'Yes'|trans }}</span>
                        </label>
                        <label class="form-check">
                            <input class="form-check-input" id="radioResellerNo" type="radio" name="config[reseller]" value="0"{% if not product.config.reseller %} checked{% endif %}>
                            <span class="form-check-label">{{ 'No'|trans }}</span>
                        </label>
                    </div>
                </div>
            </div>
        </div>

        <hr class="my-4" />

        <div class="mb-5">
            <div class="mb-3">
                <h3 class="card-title mb-1">{{ 'Domain Configuration'|trans }}</h3>
                <p class="text-secondary mb-0">{{ 'Select which domain options are available to customers when ordering this product.'|trans }}</p>
            </div>
            <div class="row g-3">
                <div class="col-lg-3">
                    <label class="form-label">{{ 'Allow Domain Registration'|trans }}</label>
                    <div class="d-flex flex-wrap gap-3 pt-1">
                        <label class="form-check">
                            <input class="form-check-input" id="radioAllowRegisterYes" type="radio" name="config[allow_domain_register]" value="1"{% if product.config.allow_domain_register is not defined or product.config.allow_domain_register %} checked{% endif %}>
                            <span class="form-check-label">{{ 'Yes'|trans }}</span>
                        </label>
                        <label class="form-check">
                            <input class="form-check-input" id="radioAllowRegisterNo" type="radio" name="config[allow_domain_register]" value="0"{% if product.config.allow_domain_register is defined and not product.config.allow_domain_register %} checked{% endif %}>
                            <span class="form-check-label">{{ 'No'|trans }}</span>
                        </label>
                    </div>
                </div>
                <div class="col-lg-3">
                    <label class="form-label">{{ 'Allow Domain Transfer'|trans }}</label>
                    <div class="d-flex flex-wrap gap-3 pt-1">
                        <label class="form-check">
                            <input class="form-check-input" id="radioAllowTransferYes" type="radio" name="config[allow_domain_transfer]" value="1"{% if product.config.allow_domain_transfer is not defined or product.config.allow_domain_transfer %} checked{% endif %}>
                            <span class="form-check-label">{{ 'Yes'|trans }}</span>
                        </label>
                        <label class="form-check">
                            <input class="form-check-input" id="radioAllowTransferNo" type="radio" name="config[allow_domain_transfer]" value="0"{% if product.config.allow_domain_transfer is defined and not product.config.allow_domain_transfer %} checked{% endif %}>
                            <span class="form-check-label">{{ 'No'|trans }}</span>
                        </label>
                    </div>
                </div>
                <div class="col-lg-3">
                    <label class="form-label">{{ 'Allow Using Own Domain'|trans }}</label>
                    <div class="d-flex flex-wrap gap-3 pt-1">
                        <label class="form-check">
                            <input class="form-check-input" id="radioAllowOwnYes" type="radio" name="config[allow_domain_own]" value="1"{% if product.config.allow_domain_own is not defined or product.config.allow_domain_own %} checked{% endif %}>
                            <span class="form-check-label">{{ 'Yes'|trans }}</span>
                        </label>
                        <label class="form-check">
                            <input class="form-check-input" id="radioAllowOwnNo" type="radio" name="config[allow_domain_own]" value="0"{% if product.config.allow_domain_own is defined and not product.config.allow_domain_own %} checked{% endif %}>
                            <span class="form-check-label">{{ 'No'|trans }}</span>
                        </label>
                    </div>
                </div>
                <div class="col-lg-3">
                    <label class="form-label">{{ 'Offer Free Subdomains'|trans }}</label>
                    <div class="d-flex flex-wrap gap-3 pt-1">
                        <label class="form-check">
                            <input class="form-check-input" id="radioAllowSubdomainYes" type="radio" name="config[allow_subdomain]" value="1"{% if product.config.allow_subdomain %} checked{% endif %}>
                            <span class="form-check-label">{{ 'Yes'|trans }}</span>
                        </label>
                        <label class="form-check">
                            <input class="form-check-input" id="radioAllowSubdomainNo" type="radio" name="config[allow_subdomain]" value="0"{% if not product.config.allow_subdomain %} checked{% endif %}>
                            <span class="form-check-label">{{ 'No'|trans }}</span>
                        </label>
                    </div>
                </div>
                <div class="col-lg-6 subdomain-base-row{% if not product.config.allow_subdomain %} d-none{% endif %}">
                    <label class="form-label">{{ 'Free Subdomain Base Domain'|trans }}</label>
                    <input class="form-control" type="text" name="config[subdomain_base_domain]" value="{{ product.config.subdomain_base_domain }}" placeholder="example.com">
                    <div class="form-hint">{{ 'Customers can use a free subdomain provided by you, such as username.example.com, without registering or transferring a domain.'|trans }}</div>
                </div>
            </div>

            <div class="alert alert-danger d-none d-flex align-items-center mt-4" id="domain-options-warning" role="alert">
                <svg class="icon me-2">
                    <use xlink:href="#alert-triangle" />
                </svg>
                <div>
                    <strong class="me-1">{{ 'Warning:'|trans }}</strong>{{ 'At least one domain option must be enabled. Customers will not be able to order this product if all domain options are disabled.'|trans }}
                </div>
            </div>
        </div>

        <hr class="my-4" />

        <div class="mb-4">
            <div class="mb-3">
                <h3 class="card-title mb-1">{{ 'Free Domain Options'|trans }}</h3>
                <p class="text-secondary mb-0">{{ 'Choose when a free domain should be offered and which TLDs and billing periods qualify.'|trans }}</p>
            </div>
            <div class="row g-3">
                <div class="col-lg-6">
                    <label class="form-label">{{ 'Free Domain Registration'|trans }}</label>
                    <div class="d-flex flex-wrap gap-3 pt-1">
                        <label class="form-check">
                            <input class="form-check-input" id="radioFreeRegistrationYes" type="radio" name="config[free_domain]" value="1"{% if product.config.free_domain %} checked{% endif %}>
                            <span class="form-check-label">{{ 'Yes'|trans }}</span>
                        </label>
                        <label class="form-check">
                            <input class="form-check-input" id="radioFreeRegistrationNo" type="radio" name="config[free_domain]" value="0"{% if not product.config.free_domain %} checked{% endif %}>
                            <span class="form-check-label">{{ 'No'|trans }}</span>
                        </label>
                    </div>
                </div>
                <div class="col-lg-6">
                    <label class="form-label">{{ 'Free Domain Transfer'|trans }}</label>
                    <div class="d-flex flex-wrap gap-3 pt-1">
                        <label class="form-check">
                            <input class="form-check-input" id="radioFreeTransferYes" type="radio" name="config[free_transfer]" value="1"{% if product.config.free_transfer %} checked{% endif %}>
                            <span class="form-check-label">{{ 'Yes'|trans }}</span>
                        </label>
                        <label class="form-check">
                            <input class="form-check-input" id="radioFreeTransferNo" type="radio" name="config[free_transfer]" value="0"{% if not product.config.free_transfer %} checked{% endif %}>
                            <span class="form-check-label">{{ 'No'|trans }}</span>
                        </label>
                    </div>
                </div>

                <div class="col-xl-6 free-tlds-row{% if not product.config.free_domain %} d-none{% endif %}">
                    <label class="form-label">{{ 'Select Free TLDs'|trans }}</label>
                    <div class="table-responsive border rounded-2">
                        <table class="table card-table table-vcenter table-striped mb-0">
                            <tbody>
                                {% set tlds = guest.serviceDomain_tlds({ 'allow_register': 1 }) %}
                                {% for id, tld in tlds %}
                                    <tr>
                                        <td class="w-1">
                                            <input type="checkbox" name="config[free_tlds][]" value="{{ tld.tld }}"{% if tld.tld in product.config.free_tlds %} checked{% endif %}>
                                        </td>
                                        <td>{{ tld.tld }}</td>
                                    </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>

                <div class="col-xl-6 free-periods-row{% if not product.config.free_domain %} d-none{% endif %}">
                    <label class="form-label">{{ 'Select Free Periods'|trans }}</label>
                    <div class="table-responsive border rounded-2">
                        <table class="table card-table table-vcenter table-striped mb-0">
                            <tbody>
                                <tr><td class="w-1"><input type="checkbox" name="config[free_domain_periods][]" value="1M"{% if '1M' in product.config.free_domain_periods %} checked{% endif %}></td><td>1 {{ 'Month'|trans }}</td></tr>
                                <tr><td class="w-1"><input type="checkbox" name="config[free_domain_periods][]" value="2M"{% if '2M' in product.config.free_domain_periods %} checked{% endif %}></td><td>2 {{ 'Months'|trans }}</td></tr>
                                <tr><td class="w-1"><input type="checkbox" name="config[free_domain_periods][]" value="3M"{% if '3M' in product.config.free_domain_periods %} checked{% endif %}></td><td>3 {{ 'Months'|trans }}</td></tr>
                                <tr><td class="w-1"><input type="checkbox" name="config[free_domain_periods][]" value="1Y"{% if '1Y' in product.config.free_domain_periods %} checked{% endif %}></td><td>1 {{ 'Year'|trans }}</td></tr>
                                <tr><td class="w-1"><input type="checkbox" name="config[free_domain_periods][]" value="2Y"{% if '2Y' in product.config.free_domain_periods %} checked{% endif %}></td><td>2 {{ 'Years'|trans }}</td></tr>
                                <tr><td class="w-1"><input type="checkbox" name="config[free_domain_periods][]" value="3Y"{% if '3Y' in product.config.free_domain_periods %} checked{% endif %}></td><td>3 {{ 'Years'|trans }}</td></tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <input type="hidden" name="id" value="{{ product.id }}">
        <div class="d-flex justify-content-end">
            <button class="btn btn-primary" type="submit">{{ 'Update'|trans }}</button>
        </div>
    </form>

    <hr>

    <div class="d-flex align-items-center mb-3">
        <h3 class="mb-0">{{ 'Hosting Plans'|trans }}</h3>
        <a href="{{ 'servicehosting#tab-new-plan'|url }}" class="ms-auto btn btn-primary">
            <svg class="icon me-2">
                <use xlink:href="#plus" />
            </svg>
            {{ 'New Hosting Plan'|trans }}
        </a>
    </div>
    <table class="table card-table table-vcenter table-striped text-nowrap">
        <thead>
            <tr>
                <th>{{ 'Title'|trans }}</th>
                <th class="w-1"></th>
            </tr>
        </thead>
        <tbody>
            {% for id, plan in admin.servicehosting_hp_get_pairs %}
                <tr>
                    <td>
                        <a href='{{ "servicehosting/plan/#{id}"|url }}'>{{ plan }}</a>
                    </td>
                    <td>
                        <a class="btn btn-icon" href='{{ "servicehosting/plan/#{id}"|url }}'>
                            <svg class="icon">
                                <use xlink:href="#edit" />
                            </svg>
                        </a>
                    </td>
                </tr>
            {% else %}
                <tr>
                    <td class="text-muted" colspan="2">{{ 'The list is empty'|trans }}</td>
                </tr>
            {% endfor %}
        </tbody>
    </table>

    <hr>

    <div class="d-flex align-items-center mb-3">
        <h3 class="mb-0">{{ 'Servers'|trans }}</h3>
        <a href="{{ 'servicehosting'|url }}#tab-new-server" class="ms-auto btn btn-primary">
            <svg class="icon me-2">
                <use xlink:href="#plus" />
            </svg>
            {{ 'New Server'|trans }}
        </a>
    </div>
    <table class="table card-table table-vcenter table-striped text-nowrap">
        <thead>
            <tr>
                <th>{{ 'Title'|trans }}</th>
                <th class="w-1"></th>
            </tr>
        </thead>
        <tbody>
            {% for id, server in admin.servicehosting_server_get_pairs %}
                <tr>
                    <td>
                        <a href='{{ "servicehosting/server/#{id}"|url }}'>{{ server }}</a>
                    </td>
                    <td>
                        <a class="btn btn-icon" href='{{ "servicehosting/server/#{id}"|url }}'>
                            <svg class="icon">
                                <use xlink:href="#edit" />
                            </svg>
                        </a>
                    </td>
                </tr>
            {% else %}
                <tr>
                    <td class="text-muted" colspan="7">{{ 'The list is empty'|trans }}</td>
                </tr>
            {% endfor %}
        </tbody>
    </table>
</div>

<script>
    const freeDomainRadios = document.querySelectorAll('input[type="radio"][name="config[free_domain]"]');
    const freeTldsRow = document.querySelector('.free-tlds-row');
    const freePerdsRow = document.querySelector('.free-periods-row');
    const freeDomainPeriodInputs = document.querySelectorAll('input[name="config[free_domain_periods][]"]');
    const freeTldsInputs = document.querySelectorAll('input[name="config[free_tlds][]"]');
    const domainOptionsWarning = document.getElementById('domain-options-warning');
    const hostingSettingsForm = document.getElementById('hosting-settings-form');
    const subdomainBaseRow = document.querySelector('.subdomain-base-row');
    const subdomainBaseInput = document.querySelector('input[name="config[subdomain_base_domain]"]');
    const domainOptionRadios = document.querySelectorAll(
        'input[name="config[allow_domain_register]"], ' +
        'input[name="config[allow_domain_transfer]"], ' +
        'input[name="config[allow_domain_own]"], ' +
        'input[name="config[allow_subdomain]"]'
    );

    function syncFreeDomainFields(isFree) {
        freeTldsRow.classList.toggle('d-none', !isFree);
        freePerdsRow.classList.toggle('d-none', !isFree);

        freeDomainPeriodInputs.forEach((element) => {
            element.required = isFree;
            if (!isFree) {
                element.checked = false;
            }
        });

        freeTldsInputs.forEach((element) => {
            element.required = isFree;
            if (!isFree) {
                element.checked = false;
            }
        });
    }

    function checkDomainOptions() {
        const registerEnabled = document.querySelector('input[name="config[allow_domain_register]"][value="1"]').checked;
        const transferEnabled = document.querySelector('input[name="config[allow_domain_transfer]"][value="1"]').checked;
        const ownEnabled = document.querySelector('input[name="config[allow_domain_own]"][value="1"]').checked;
        const subdomainEnabled = document.querySelector('input[name="config[allow_subdomain]"][value="1"]').checked;

        const allDisabled = !registerEnabled && !transferEnabled && !ownEnabled && !subdomainEnabled;
        domainOptionsWarning.classList.toggle('d-none', !allDisabled);
        subdomainBaseRow.classList.toggle('d-none', !subdomainEnabled);
        subdomainBaseInput.required = subdomainEnabled;

        return !allDisabled;
    }

    freeDomainRadios.forEach((radio) => {
        radio.addEventListener('change', function() {
            syncFreeDomainFields(this.value === '1');
        });
    });

    freeTldsInputs.forEach((checkbox) => {
        checkbox.addEventListener('change', function() {
            const anyChecked = Array.from(freeTldsInputs).some((element) => element.checked);
            freeTldsInputs.forEach((element) => {
                element.required = !anyChecked;
            });
        });
    });

    freeDomainPeriodInputs.forEach((checkbox) => {
        checkbox.addEventListener('change', function() {
            const anyChecked = Array.from(freeDomainPeriodInputs).some((element) => element.checked);
            freeDomainPeriodInputs.forEach((element) => {
                element.required = !anyChecked;
            });
        });
    });

    domainOptionRadios.forEach((radio) => {
        radio.addEventListener('change', checkDomainOptions);
    });

    hostingSettingsForm.addEventListener('submit', function(event) {
        if (!checkDomainOptions()) {
            event.preventDefault();
            event.stopImmediatePropagation();
            domainOptionsWarning.scrollIntoView({ behavior: 'smooth', block: 'center' });
        }
    });

    syncFreeDomainFields(document.querySelector('input[name="config[free_domain]"][value="1"]:checked') !== null);
    checkDomainOptions();
</script>
