{% extends 'layout_default.html.twig' %}

{% block meta_title %}{{ 'Hosting Management'|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="{{ 'servicehosting'|url }}">{{ 'Hosting Plans and Servers'|trans }}</a>
    </li>
    <li class="breadcrumb-item active" aria-current="page">{{ server.name }}</li>
</ul>
{% endblock %}

{% block content %}
{% set tlsVerify = server.config.tls_verify is defined ? server.config.tls_verify : true %}
<div class="card">
    <div class="card-header">
        <div>
            <h3 class="card-title">{{ server.name }}</h3>
            <p class="card-subtitle">{{ 'Manage connection details, provisioning settings, and nameserver defaults for this hosting server.'|trans }}</p>
        </div>
    </div>
    <div class="card-body">
        <form method="post" action="{{ 'servicehosting/server_update'|api_url }}" id="server-update" {{ fb_api_form({message: 'Server Updated'|trans}) }}>
            <div class="mb-5">
                <div class="mb-3">
                    <h4 class="card-title mb-1">{{ 'Server Details'|trans }}</h4>
                    <p class="text-secondary mb-0">{{ 'Basic identification and network details used when provisioning accounts on this server.'|trans }}</p>
                </div>
                <div class="row g-3">
                    <div class="col-lg-6">
                        <label class="form-label">{{ 'Name'|trans }}</label>
                        <input class="form-control" type="text" name="name" value="{{ server.name }}" required placeholder="{{ 'Unique name to identify this server'|trans }}">
                    </div>
                    <div class="col-lg-6">
                        <label class="form-label">{{ 'Hostname'|trans }}</label>
                        <input class="form-control" type="text" name="hostname" value="{{ server.hostname }}" placeholder="host1.domain.com">
                    </div>
                    <div class="col-lg-6">
                        <label class="form-label">{{ 'IP'|trans }}</label>
                        <input class="form-control" type="text" name="ip" value="{{ server.ip }}" required placeholder="{{ 'Primary IP address used to connect to the server. i.e. 127.0.0.1'|trans }}">
                    </div>
                    <div class="col-lg-6">
                        <label class="form-label">{{ 'Enable/Disable'|trans }}</label>
                        <div class="d-flex flex-wrap gap-3 pt-1">
                            <label class="form-check">
                                <input class="form-check-input" id="radioActiveYes" type="radio" name="active" value="1"{% if server.active %} checked{% endif %}>
                                <span class="form-check-label">{{ 'Yes'|trans }}</span>
                            </label>
                            <label class="form-check">
                                <input class="form-check-input" id="radioActiveNo" type="radio" name="active" value="0"{% if not server.active %} checked{% endif %}>
                                <span class="form-check-label">{{ 'No'|trans }}</span>
                            </label>
                        </div>
                    </div>
                    <div class="col-12">
                        <label class="form-label">{{ 'Assigned IP Addresses'|trans }}</label>
                        <textarea class="form-control" name="assigned_ips" rows="5" placeholder="List the IP Addresses assigned to the server (One per line)">{% for value in server.assigned_ips %}{{ value }}{{ constant('PHP_EOL') }}{% endfor %}</textarea>
                    </div>
                </div>
            </div>

            <hr class="my-4" />

            <div class="mb-5">
                <div class="mb-3">
                    <h4 class="card-title mb-1">{{ 'Connection Settings'|trans }}</h4>
                    <p class="text-secondary mb-0">{{ 'Choose the control panel adapter and provide the credentials used for API communication.'|trans }}</p>
                </div>
                <div class="row g-3">
                    <div class="col-lg-6">
                        <label class="form-label">{{ 'Server Manager'|trans }}</label>
                        <select class="form-select" name="manager" onchange="handleManagerChange(this)">
                            {% for code, manager in admin.servicehosting_manager_get_pairs %}
                                <option value="{{ code }}"{% if server.manager == code %} selected{% endif %}>{{ manager.label }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="col-lg-6">
                        <label class="form-label">{{ 'Connection Port'|trans }}</label>
                        <input class="form-control" type="number" name="port" min="1" max="65535" value="{{ server.port }}" placeholder="{{ 'Custom port. Use blank to use default. Used to connect to the API'|trans }}">
                    </div>

                    <div class="col-12">
                        <div id="credentials" class="row g-3"></div>
                    </div>

                    <div class="col-lg-6">
                        <label class="form-label">{{ 'Password Length'|trans }}</label>
                        <input class="form-control" type="number" name="passwordLength" min="1" max="100" value="{{ server.passwordLength }}" placeholder="{{ 'Length of generated passwords when creating user accounts. Defaults to 10'|trans }}">
                    </div>
                    <div class="col-lg-6">
                        <label class="form-label">{{ 'Use Secure Connection'|trans }}</label>
                        <div class="d-flex flex-wrap gap-3 pt-1">
                            <label class="form-check">
                                <input class="form-check-input" id="radioSecureConnectionYes" type="radio" name="secure" value="1"{% if server.secure %} checked{% endif %}>
                                <span class="form-check-label">{{ 'Yes'|trans }}</span>
                            </label>
                            <label class="form-check">
                                <input class="form-check-input" id="radioSecureConnectionNo" type="radio" name="secure" value="0"{% if not server.secure %} checked{% endif %}>
                                <span class="form-check-label">{{ 'No'|trans }}</span>
                            </label>
                        </div>
                        <div class="form-text">{{ 'Controls whether HTTPS or HTTP is used for API requests.'|trans }}</div>
                    </div>
                    <div class="col-lg-6">
                        <label class="form-label">{{ 'Verify TLS Certificate'|trans }}</label>
                        <div class="d-flex flex-wrap gap-3 pt-1">
                            <label class="form-check">
                                <input class="form-check-input" id="radioTlsVerifyYes" type="radio" name="tls_verify" value="1"{% if tlsVerify %} checked{% endif %}>
                                <span class="form-check-label">{{ 'Yes'|trans }}</span>
                            </label>
                            <label class="form-check">
                                <input class="form-check-input" id="radioTlsVerifyNo" type="radio" name="tls_verify" value="0"{% if not tlsVerify %} checked{% endif %}>
                                <span class="form-check-label">{{ 'No'|trans }}</span>
                            </label>
                        </div>
                        <div class="form-text">{{ 'Recommended: keep enabled unless your server uses a self-signed or otherwise invalid certificate.'|trans }}</div>
                    </div>
                </div>
            </div>

            <hr class="my-4" />

            <div class="mb-5">
                <div class="mb-3">
                    <h4 class="card-title mb-1">{{ 'Optional Configuration'|trans }}</h4>
                    <p class="text-secondary mb-0">{{ 'Use these values when your control panel supports account prefixes or other optional provisioning defaults.'|trans }}</p>
                </div>
                <div class="row g-3">
                    <div class="col-lg-6">
                        <label class="form-label">{{ 'Users Prefix'|trans }}</label>
                        <input class="form-control" type="text" name="userprefix" value="{{ server.config.userprefix }}" placeholder="{{ 'Prefix for created users (especially for database)'|trans }}">
                        <div class="form-text">{{ 'Some server managers may ignore this option due to limitations or requirements imposed by the control panel.'|trans }}</div>
                    </div>
                </div>
            </div>

            <hr class="my-4" />

            <div class="mb-4">
                <div class="mb-3">
                    <h4 class="card-title mb-1">{{ 'Nameservers'|trans }}</h4>
                    <p class="text-secondary mb-0">{{ 'Set the default nameservers that will be suggested for domains provisioned on this server.'|trans }}</p>
                </div>
                <div class="row g-3">
                    <div class="col-lg-6">
                        <label class="form-label">{{ 'Nameserver 1'|trans }}</label>
                        <input class="form-control" type="text" name="ns1" value="{{ server.ns1 }}" placeholder="ns1.yourdomain.com">
                    </div>
                    <div class="col-lg-6">
                        <label class="form-label">{{ 'Nameserver 2'|trans }}</label>
                        <input class="form-control" type="text" name="ns2" value="{{ server.ns2 }}" placeholder="ns2.yourdomain.com">
                    </div>
                    <div class="col-lg-6">
                        <label class="form-label">{{ 'Nameserver 3'|trans }}</label>
                        <input class="form-control" type="text" name="ns3" value="{{ server.ns3 }}" placeholder="ns3.yourdomain.com">
                    </div>
                    <div class="col-lg-6">
                        <label class="form-label">{{ 'Nameserver 4'|trans }}</label>
                        <input class="form-control" type="text" name="ns4" value="{{ server.ns4 }}" placeholder="ns4.yourdomain.com">
                    </div>
                </div>
            </div>

            <input type="hidden" name="id" value="{{ server.id }}">
            <div class="d-flex flex-wrap gap-2 justify-content-end">
                <button class="btn btn-outline-primary" id="test-connection" type="button">{{ 'Update and Test Connection'|trans }}</button>
                <button class="btn btn-primary" type="submit">{{ 'Update Server'|trans }}</button>
            </div>
        </form>
    </div>
</div>
{% endblock %}

{% block js %}
<script>
    function handleManagerChange(select) {
        const pairs = {{ admin.servicehosting_manager_get_pairs|json_encode|raw }};
        const defaults = {
            form: {
                credentials: {
                    fields: [
                        {
                            name: 'username',
                            label: 'Username',
                            type: 'text',
                            placeholder: 'Username to connect to the server',
                            required: true
                        },
                        {
                            name: 'password',
                            label: 'Password',
                            type: 'password',
                            placeholder: 'Password to connect to the server',
                            required: true
                        }
                    ]
                }
            }
        };
        const values = {{ server|json_encode|raw }};
        const credentials = document.getElementById('credentials');
        const manager = select.value;
        const fields = pairs[manager] && pairs[manager].form && pairs[manager].form.credentials && pairs[manager].form.credentials.fields
            ? pairs[manager].form.credentials.fields
            : defaults.form.credentials.fields;

        credentials.innerHTML = '';

        fields.forEach((field, index) => {
            const wrapper = document.createElement('div');
            const isLastOddField = fields.length % 2 === 1 && index === fields.length - 1;
            wrapper.className = fields.length === 1 || isLastOddField ? 'col-12' : 'col-lg-6';

            const label = document.createElement('label');
            label.className = 'form-label';
            label.textContent = field.label;
            wrapper.appendChild(label);

            const input = document.createElement('input');
            input.className = 'form-control';
            input.type = field.type;
            input.name = field.name;
            input.value = values[field.name] || '';
            input.placeholder = field.placeholder || '';
            input.required = !!field.required;
            wrapper.appendChild(input);

            credentials.appendChild(wrapper);
        });
    }

    document.addEventListener('DOMContentLoaded', function() {
        const formElement = document.getElementById('server-update');
        const managerSelect = document.querySelector('select[name="manager"]');
        const testConnectionButton = document.getElementById('test-connection');

        handleManagerChange(managerSelect);

        testConnectionButton.addEventListener('click', function(event) {
            event.preventDefault();

            const formData = new FormData(formElement);
            const data = formElement.getAttribute('method').toLowerCase() !== 'get'
                ? FOSSBilling.tools.serializeFormDataToJSON(formData)
                : FOSSBilling.tools.serializeFormData(formData);

            FOSSBilling.api.makeRequest(
                formElement.getAttribute('method'),
                FOSSBilling.tools.getBaseURL(formElement.getAttribute('action')),
                data,
                (result) => FOSSBilling.api._afterComplete(formElement, result),
                (error) => {
                    FOSSBilling.message(`${error.message} (${error.code})`, 'error');
                }
            );

            FOSSBilling.api.makeRequest(
                formElement.getAttribute('method'),
                FOSSBilling.tools.getBaseURL('admin/servicehosting/server_test_connection'),
                { id: {{ server.id }} },
                () => {
                    FOSSBilling.message(`{{ 'Server connected'|trans }}`, 'message');
                },
                (error) => {
                    FOSSBilling.message(`${error.message} (${error.code})`, 'error');
                }
            );
        });
    });
</script>
{% endblock %}
