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

<div class="card-body">
    <h5>{{ 'Hosting settings'|trans }}</h5>
    <form method="post" action="{{ 'api/admin/product/update_config'|link }}" class="api-form save" data-api-msg="{{ 'Hosting settings updated'|trans }}">
        <input type="hidden" name="CSRFToken" value="{{ CSRFToken }}"/>
        <div class="mb-3 row">
            <label class="form-label col-3 col-form-label">{{ 'Server'|trans }}:</label>
            <div class="col">
                {{ mf.selectbox('config[server_id]', admin.servicehosting_server_get_pairs, product.config.server_id, 0, 'Select server'|trans) }}
            </div>
        </div>
        <div class="mb-3 row">
            <label class="form-label col-3 col-form-label">{{ 'Hosting plan'|trans }}:</label>
            <div class="col">
                {{ mf.selectbox('config[hosting_plan_id]', admin.servicehosting_hp_get_pairs, product.config.hosting_plan_id, 0, 'Select hosting plan'|trans) }}
            </div>
        </div>
        <div class="mb-3 row">
            <label class="form-label col-3 col-form-label">{{ 'Reseller hosting'|trans }}:</label>
            <div class="col">
                <div class="form-check form-check-inline">
                    <input class="form-check-input" id="radioResellerYes" type="radio" name="config[reseller]" value="1"{% if product.config.reseller %} checked{% endif %}>
                    <label class="form-check-label" for="radioResellerYes">{{ 'Yes'|trans }}</label>
                </div>
                <div class="form-check form-check-inline">
                    <input class="form-check-input" id="radioResellerNo" type="radio" name="config[reseller]" value="0"{% if not product.config.reseller %} checked{% endif %}>
                    <label class="form-check-label" for="radioResellerNo">{{ 'No'|trans }}</label>
                </div>
            </div>
        </div>
        <div class="mb-3 row">
            <label class="form-label col-3 col-form-label">{{ 'Free domain registration'|trans }}:</label>
            <div class="col">
                <div class="form-check form-check-inline">
                    <input class="form-check-input" id="radioFreeRegistrationYes" type="radio" name="config[free_domain]" value="1"{% if product.config.free_domain %} checked{% endif %}>
                    <label class="form-check-label" for="radioFreeRegistrationYes">{{ 'Yes'|trans }}</label>
                </div>
                <div class="form-check form-check-inline">
                    <input class="form-check-input" id="radioFreeRegistrationNo" type="radio" name="config[free_domain]" value="0"{% if not product.config.free_domain %} checked{% endif %}>
                    <label class="form-check-label" for="radioFreeRegistrationNo">{{ 'No'|trans }}</label>
                </div>
            </div>
        </div>
        <div class="mb-3 row free-tlds-row">
            <label class="form-label col-3 col-form-label">{{ 'Select free TLDs'|trans }}</label>
            <div class="col">
                <table class="table card-table table-vcenter table-striped text-nowrap">
                    <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>
            <!-- Select periods to offer free domains -->
            <div class="mb-3 row free-periods-row">
            <label class="form-label col-3 col-form-label">{{ 'Select free periods'|trans }}</label>
            <div class="col">
                <table class="table card-table table-vcenter table-striped text-nowrap">
                    <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 class="mb-3 row">
            <label class="form-label col-3 col-form-label">{{ 'Free domain transfer'|trans }}:</label>
            <div class="col">
                <div class="form-check form-check-inline">
                    <input class="form-check-input" id="radioFreeTransferYes" type="radio" name="config[free_transfer]" value="1"{% if product.config.free_transfer %} checked{% endif %}>
                    <label class="form-check-label" for="radioFreeTransferYes">{{ 'Yes'|trans }}</label>
                </div>
                <div class="form-check form-check-inline">
                    <input class="form-check-input" id="radioFreeTransferNo" type="radio" name="config[free_transfer]" value="0"{% if not product.config.free_transfer %} checked{% endif %}>
                    <label class="form-check-label" for="radioFreeTransferNo">{{ 'No'|trans }}</label>
                </div>
            </div>
        </div>

        <input type="hidden" name="id" value="{{ product.id }}">
        <button class="btn btn-primary w-100" type="submit">{{ 'Update'|trans }}</button>
    </form>
    <hr>

    <div class="d-flex align-items-center mb-3">
        <h5 class="mb-0">{{ 'Hosting plans'|trans }}</h5>
        <a href="{{ 'servicehosting#tab-new-server'|alink }}" 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'|alink }}/{{ id }}">{{ plan }}</a>
                </td>
                <td>
                    <a class="btn btn-icon" href="{{ '/servicehosting/plan'|alink }}/{{ id }}">
                        <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">
        <h5 class="mb-0">{{ 'Servers'|trans }}</h5>
        <a href="{{ 'servicehosting#tab-new-server'|alink }}" 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'|alink }}/{{ id }}">{{ server }}</a>
                </td>
                <td>
                    <a class="btn btn-icon" href="{{ '/servicehosting/server'|alink }}/{{ id }}">
                        <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>
    var free_domain_radios = $('input:radio[name="config[free_domain]"]');
    var freeTldsRow = $('.free-tlds-row');
    var freePerdsRow = $('.free-periods-row');

    free_domain_radios.on('click', function() {
        if ($(this).val() == 1){
            freeTldsRow.fadeIn('slow');
            freePerdsRow.fadeIn('slow');
            $('input[name="config[free_domain_periods][]"]').prop('required', true);
            $('input[name="config[free_tlds][]"]').prop('required', true);
        }

        if ($(this).val() == 0){
            $('input[name="config[free_domain_periods][]"]').prop('required', false);
            $('input[name="config[free_tlds][]"]').prop('required', false);
            $('input[name="config[free_tlds][]"]').prop( 'checked', false);
            $('input[name="config[free_domain_periods][]"]').prop( "checked", false);
            freeTldsRow.fadeOut('slow');
            freePerdsRow.fadeOut('slow');
        }
    });

    $('input[name="config[free_tlds][]"]').on('change', function(){
        var check = false;
        $('input[name="config[free_tlds][]"]').each(function (){ if($(this).prop('checked')==true){ check= true;} });
        if(check == true){
            $('input[name="config[free_tlds][]"]').prop('required', false);
        }else{
            $('input[name="config[free_tlds][]"]').prop('required', true);
        }
    });
    $('input[name="config[free_domain_periods][]"]').on('change', function(){
        var check = false;
        $('input[name="config[free_domain_periods][]"]').each(function (){ if($(this).prop('checked')==true){ check= true;} });
        if(check == true){
            $('input[name="config[free_domain_periods][]"]').prop('required', false);
        }else{
            $('input[name="config[free_domain_periods][]"]').prop('required', true);
        }
    });

    if (free_domain_radios.filter('[value=0]:checked').length > 0) {
        freeTldsRow.hide();
        freePerdsRow.hide();
    }
</script>
