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

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

{% block meta_title %}{{ 'Hosting plans and servers'|trans }}{% endblock %}

{% set active_menu = 'system' %}

{% block content %}
    <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">{{ 'Hosting plans and servers'|trans }}</a>
        </li>
        <li class="nav-item" role="presentation">
            <a class="nav-link" href="#tab-new-server" data-bs-toggle="tab">
                <svg class="icon me-2">
                    <use xlink:href="#plus" />
                </svg>
                {{ 'New server'|trans }}
            </a>
        </li>
        <li class="nav-item" role="presentation">
            <a class="nav-link" href="#tab-new-plan" data-bs-toggle="tab">
                <svg class="icon me-2">
                    <use xlink:href="#plus" />
                </svg>
                {{ 'New hosting plan'|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">
                <h5>{{ 'Servers'|trans }}</h5>
            </div>
            <table class="table card-table table-vcenter table-striped text-nowrap sortable">
                <thead>
                    <tr>
                        <th>{{ 'Title'|trans }}</th>
                        <th>{{ 'IP'|trans }}</th>
                        <th>{{ 'Server manager'|trans }}</th>
                        <th>{{ 'Active'|trans }}</th>
                        <th class="w-1"></th>
                    </tr>
                </thead>
                <tbody>
                    {% set servers = admin.servicehosting_server_get_list({ 'per_page': 100 }) %}
                    {% for server in servers.list %}
                    <tr>
                        <td>
                            <a href="{{ '/servicehosting/server'|alink }}/{{ server.id }}">{{ server.name }}</a>
                        </td>
                        <td>{{ server.ip }}</td>
                        <td>{{ mf.status_name(server.manager) }}</td>
                        <td>{{ mf.q(server.active) }}</td>
                        <td>
                            <a class="btn btn-icon" href="{{ server.cpanel_url }}" target="_blank">
                                <svg class="icon">
                                    <use xlink:href="#settings" />
                                </svg>
                            </a>
                            <a class="btn btn-icon api-link" href="{{ 'api/admin/servicehosting/server_test_connection'|link({ 'id': server.id, 'CSRFToken': CSRFToken }) }}" title="{{ 'Test connection'|trans }}" data-api-msg="{{ 'Server connected'|trans }}">
                                <svg class="icon">
                                    <use xlink:href="#wifi" />
                                </svg>
                            </a>
                            <a class="btn btn-icon" href="{{ '/servicehosting/server'|alink }}/{{ server.id }}">
                                <svg class="icon">
                                    <use xlink:href="#edit" />
                                </svg>
                            </a>
                            <a class="btn btn-icon api-link" data-api-confirm="{{ 'Are you sure?'|trans }}" data-api-redirect="{{ 'servicehosting'|alink }}" href="{{ 'api/admin/servicehosting/server_delete'|link({ 'id': server.id, 'CSRFToken': CSRFToken }) }}">
                                <svg class="icon">
                                    <use xlink:href="#delete" />
                                </svg>
                            </a>
                        </td>
                    </tr>
                    {% else %}
                    <tr>
                        <td class="text-muted" colspan="7">{{ 'The list is empty'|trans }}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
            <hr>

            <div class="card-body">
                <h5>{{ 'Hosting plans'|trans }}</h5>
            </div>
            <table class="table card-table table-vcenter table-striped text-nowrap sortable">
                <thead>
                    <tr>
                        <td>{{ 'Title'|trans }}</td>
                        <td>{{ 'Addon domains'|trans }}</td>
                        <td>{{ 'Disk space'|trans }}</td>
                        <td>{{ 'Bandwidth'|trans }}</td>
                        <td class="w-1"></td>
                    </tr>
                </thead>

                <tbody>
                    {% set hps = admin.servicehosting_hp_get_list({ 'per_page': 100 }) %}
                    {% for hp in hps.list %}
                    <tr>
                        <td>
                            <a href="{{ '/servicehosting/plan'|alink }}/{{ hp.id }}">{{ hp.name }}</a>
                        </td>
                        <td>{{ hp.max_addon }}</td>
                        <td>{{ hp.quota }}</td>
                        <td>{{ hp.bandwidth }}</td>
                        <td>
                            <a class="btn btn-icon" href="{{ '/servicehosting/plan'|alink }}/{{ hp.id }}">
                                <svg class="icon">
                                    <use xlink:href="#edit" />
                                </svg>
                            </a>
                            <a class="btn btn-icon api-link" data-api-confirm="{{ 'Are you sure?'|trans }}" data-api-redirect="{{ 'servicehosting'|alink }}" href="{{ 'api/admin/servicehosting/hp_delete'|link({ 'id': hp.id, 'CSRFToken': CSRFToken }) }}">
                                <svg class="icon">
                                    <use xlink:href="#delete" />
                                </svg>
                            </a>
                        </td>
                    </tr>
                    {% else %}
                    <tr>
                        <td class="text-muted" colspan="2">{{ 'The list is empty'|trans }}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>

        <div class="tab-pane fade" id="tab-new-server" role="tabpanel">
            <div class="card-body">
                <form method="post" action="{{ 'api/admin/servicehosting/server_create'|link}}"  class="api-form" data-api-redirect="{{ 'servicehosting'|alink }}">
                    <input type="hidden" name="CSRFToken" value="{{ CSRFToken }}"/>
                    <div class="mb-3 row">
                        <label class="form-label col-3 col-form-label">{{ 'Name'|trans }}:</label>
                        <div class="col">
                            <input class="form-control" type="text" name="name" value="" required placeholder="{{ 'Unique name to identify this server'|trans }}">
                        </div>
                    </div>
                    <div class="mb-3 row">
                        <label class="form-label col-3 col-form-label">{{ 'Hostname'|trans }}:</label>
                        <div class="col">
                            <input class="form-control" type="text" name="hostname" value="" placeholder="{{ 'server1.yourserverdomain.com'|trans }}">
                        </div>
                    </div>
                    <div class="mb-3 row">
                        <label class="form-label col-3 col-form-label">{{ 'IP'|trans }}:</label>
                        <div class="col">
                            <input class="form-control" type="text" name="ip" value="" required placeholder="{{ 'Primary IP address of the server used to connect to it like: 123.123.123.123'|trans }}">
                        </div>
                    </div>
                    <div class="mb-3 row">
                        <label class="form-label col-3 col-form-label">{{ 'Assigned IP Addresses'|trans }}:</label>
                        <div class="col">
                            <textarea class="form-control" name="assigned_ips" rows="5" placeholder="{{ 'List the IP Addresses assigned to the server (One per line)'|trans }}"></textarea>
                        </div>
                    </div>
                    <div class="mb-3 row">
                        <label class="form-label col-3 col-form-label">{{ 'Enable/Disable'|trans }}:</label>
                        <div class="col">
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" id="radioActiveYes" type="radio" name="active" value="1" checked>
                                <label class="form-check-label" for="radioActiveYes">{{ 'Yes'|trans }}</label>
                            </div>
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" id="radioActiveNo" type="radio" name="active" value="0">
                                <label class="form-check-label" for="radioActiveNo">{{ 'No'|trans }}</label>
                            </div>
                        </div>
                    </div>

                    <h5>{{ 'Nameservers'|trans }}</h5>
                    <div class="mb-3 row">
                        <label class="form-label col-3 col-form-label">{{ 'Nameserver 1'|trans }}:</label>
                        <div class="col">
                            <input class="form-control" type="text" name="ns1" value="" placeholder="{{ 'ns1.yourdomain.com'|trans }}">
                        </div>
                    </div>
                    <div class="mb-3 row">
                        <label class="form-label col-3 col-form-label">{{ 'Nameserver 2'|trans }}:</label>
                        <div class="col">
                            <input class="form-control" type="text" name="ns2" value="" placeholder="{{ 'ns2.yourdomain.com'|trans }}">
                        </div>
                    </div>
                    <div class="mb-3 row">
                        <label class="form-label col-3 col-form-label">{{ 'Nameserver 3'|trans }}:</label>
                        <div class="col">
                            <input class="form-control" type="text" name="ns3" value="" placeholder="{{ 'ns3.yourdomain.com'|trans }}">
                        </div>
                    </div>
                    <div class="mb-3 row">
                        <label class="form-label col-3 col-form-label">{{ 'Nameserver 4'|trans }}:</label>
                        <div class="col">
                            <input class="form-control" type="text" name="ns4" value="" placeholder="{{ 'ns4.yourdomain.com'|trans }}">
                        </div>
                    </div>

                    <h5>{{ 'Server manager'|trans }}</h5>
                    <div class="mb-3 row">
                        <label class="form-label col-3 col-form-label">{{ 'Server manager'|trans }}:</label>
                        <div class="col">
                            <select class="form-select" name="manager" onchange="handleManagerChange(this)">
                                {% for code, manager in admin.servicehosting_manager_get_pairs %}
                                <option value="{{ code }}">{{ manager.label }}</option>
                                {% endfor %}
                            </select>
                        </div>
                    </div>
                    <div id="credentials"></div>
                    <div class="mb-3 row">
                        <label class="form-label col-3 col-form-label">{{ 'Connection port'|trans }}:</label>
                        <div class="col">
                            <input class="form-control" type="number" name="port" min="1" max="65535" value="" placeholder="{{ 'Custom port. Use blank to use default. Used to connect to the API'|trans }}">
                        </div>
                    </div>
                    <div class="mb-3 row">
                        <label class="form-label col-3 col-form-label">{{ 'Password length'|trans }}:</label>
                        <div class="col">
                            <input class="form-control" type="number" name="passwordLength" min="1" max="100" value="" placeholder="{{ 'Length of generated passwords when creating user accounts. Defaults to 10'|trans }}">
                        </div>
                    </div>
                    <div class="mb-3 row">
                        <label class="form-label col-3 col-form-label">{{ 'Use secure connection'|trans }}:</label>
                        <div class="col">
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" id="radioSecureYes" type="radio" name="secure" value="1">
                                <label class="form-check-label" for="radioSecureYes">{{ 'Yes'|trans }}</label>
                            </div>
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" id="radioSecureNo" type="radio" name="secure" value="0" checked>
                                <label class="form-check-label" for="radioSecureNo">{{ 'No'|trans }}</label>
                            </div>
                        </div>
                    </div>
                    <input type="submit" value="{{ 'Add server'|trans }}" class="btn btn-primary">
                </form>
            </div>
        </div>

        <div class="tab-pane fade" id="tab-new-plan" role="tabpanel">
            <div class="card-body">
                <h5>{{ 'Adding new hosting plan'|trans }}</h5>
                <p class="text-muted">{{ 'Depending on server manager used to setup hosting account you may require provide additional parameters in next step. In this step provide basic hosting plan information.'|trans }}</p>

                <form method="post" action="{{ 'api/admin/servicehosting/hp_create'|link}}" class="api-form" data-api-jsonp="onAfterHostingPlanCreate">
                    <input type="hidden" name="CSRFToken" value="{{ CSRFToken }}"/>
                    <div class="mb-3 row">
                        <label class="form-label col-3 col-form-label">{{ 'Name'|trans }}:</label>
                        <div class="col">
                            <input class="form-control" type="text" name="name" value="" required placeholder="{{ 'Unique name to identify this hosting plan'|trans }}">
                        </div>
                    </div>
                    <div class="mb-3 row">
                        <label class="form-label col-3 col-form-label">{{ 'Disk quota (MB)'|trans }}:</label>
                        <div class="col">
                            <input class="form-control" type="text" name="quota" value="1024">
                        </div>
                    </div>
                    <div class="mb-3 row">
                        <label class="form-label col-3 col-form-label">{{ 'Bandwidth (MB)'|trans }}:</label>
                        <div class="col">
                            <input class="form-control" type="text" name="bandwidth" value="1024">
                        </div>
                    </div>

                    <button class="btn btn-primary w-100" type="submit">{{ 'Create hosting plan'|trans }}</button>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block js%}
<script>
    function onAfterHostingPlanCreate(id) {
        bb.redirect("{{ 'servicehosting/plan'|alink }}/" + id);
    }

    function handleManagerChange (select) {
        var pairs = {{ admin.servicehosting_manager_get_pairs|json_encode|raw }} // PHP array returned by the server manager converted to a JavaScript object
        var 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
                        }
                    ],
                },
            },
        } // Default form fields. If server manager does not provide any, use these.

        var credentials = document.getElementById('credentials'); // HTML element where the form fields will be inserted.
        var manager = select.value; // Selected server manager code.

        credentials.innerHTML = ''; // Clear the form fields.

        if (pairs[manager].form && pairs[manager].form.credentials && pairs[manager].form.credentials.fields) {
            var data = pairs[manager].form.credentials.fields;
        } else {
            var data = defaults.form.credentials.fields;
        }

        for (var i = 0; i < data.length; i++) {
            // Create a new form field and append it to the credentials element.
            var field = data[i];
            var div = document.createElement('div');
            div.className = 'mb-3 row';

            var label = document.createElement('label');
            label.className = 'form-label col-3 col-form-label';
            label.innerHTML = field.label + ':';
            div.appendChild(label);

            var input = document.createElement('input');
            input.className = 'form-control';
            input.type = field.type;
            input.name = field.name;
            input.placeholder = field.placeholder;
            input.required = field.required;

            var col = document.createElement('div');
            col.className = 'col';
            col.appendChild(input);
            div.appendChild(col);

            credentials.appendChild(div);
        }
    }

    window.onload = function () {
        handleManagerChange(document.querySelector('select[name="manager"]'));
    };
</script>
{% endblock %}
