<div class="help">
    <h2>{{ 'Domain details'|trans }}</h2>
</div>

<table class="table card-table table-vcenter table-striped text-nowrap">
    <tbody>
        <tr>
            <td class="w-50 text-end">{{ 'Domain'|trans }}:</td>
            <td>
                <a target="_blank" href="https://{{ service.domain }}">{{ service.domain }}</a>
            </td>
        </tr>
        <tr>
            <td class="text-end">{{ 'Registrar'|trans }}:</td>
            <td>{{ service.registrar }}</td>
        </tr>
        <tr>
            <td class="text-end">{{ 'Nameserver 1'|trans }}:</td>
            <td>{{ service.ns1 }}</td>
        </tr>
        <tr>
            <td class="text-end">{{ 'Nameserver 2'|trans }}:</td>
            <td>{{ service.ns2 }}</td>
        </tr>
        <tr>
            <td class="text-end">{{ 'Nameserver 3'|trans }}:</td>
            <td>{{ service.ns3 }}</td>
        </tr>
        <tr>
            <td class="text-end">{{ 'Nameserver 4'|trans }}:</td>
            <td>{{ service.ns4 }}</td>
        </tr>
        <tr>
            <td class="text-end">{{ 'Transfer code'|trans }}:</td>
            <td>{{ service.transfer_code }}</td>
        </tr>
        <tr>
            <td class="text-end">{{ 'Locked'|trans }}:</td>
            <td id="locked-value">
                {% if service.locked == 1 %}
                    <span class="badge bg-danger me-1"></span> {{ 'Yes'|trans }}
                {% else %}
                    <span class="badge bg-success me-1"></span> {{ 'No'|trans }}
                {% endif %}
            </td>
        </tr>
        <tr>
            <td class="text-end">{{ 'Privacy protection'|trans }}:</td>
            <td id="privacy-value">
                {% if service.privacy == 1 %}
                    <span class="badge bg-danger me-1"></span> {{ 'Enabled'|trans }}
                {% else %}
                    <span class="badge bg-success me-1"></span> {{ 'Disabled'|trans }}
                {% endif %}
            </td>
        </tr>
        <tr>
            <td class="text-end">{{ 'Registration/Renewal years'|trans }}:</td>
            <td>{{ service.period }}</td>
        </tr>
        <tr>
            <td class="text-end">{{ 'Registration date'|trans }}:</td>
            <td>{{ service.registered_at|format_date }}</td>
        </tr>
        <tr>
            <td class="text-end">{{ 'Expires at'|trans }}:</td>
            <td>{{ service.expires_at|format_date }}</td>
        </tr>
    </tbody>
</table>

<div class="card-footer text-center">
    {{ order_actions }}
    {% if order.status == 'active' %}
    <a class="btn btn-primary" type="button" id="get-epp">
        <svg class="icon icon-tabler" width="24" height="24">
            <use xlink:href="#key" />
        </svg>
        <span class="d-block text-secondary">{{ 'Get EPP'|trans }}</span>
    </a>
    <a class="btn btn-danger bg-gradient" type="button" id="domain-unlock">
        <svg class="mb-2" width="24" height="24">
            <use xlink:href="#lock-open" />
        </svg>
        <span class="d-block">{{ 'Unlock'|trans }}</span>
    </a>
    <a class="btn btn-primary" type="button" id="domain-lock">
        <svg class="icon icon-tabler" width="24" height="24">
            <use xlink:href="#lock-closed" />
        </svg>
        <span class="d-block text-secondary">{{ 'Lock'|trans }}</span>
    </a>
    <a class="btn btn-danger bg-gradient" type="button" id="domain-disable-pp">
        <svg class="mb-2" width="24" height="24">
            <use xlink:href="#eye" />
        </svg>
        <span class="d-block">{{ 'Disable privacy'|trans }}</span>
    </a>
    <a class="btn btn-primary" type="button" id="domain-enable-pp">
        <svg class="icon icon-tabler" width="24" height="24">
            <use xlink:href="#eye-off" />
        </svg>
        <span class="d-block text-secondary">{{ 'Enable privacy'|trans }}</span>
    </a>
    {% endif %}
</div>

{% if order.status == 'active' %}
<div class="card-body">
    <h3>{{ 'Nameservers'|trans }}</h3>
    <form method="post" action="{{ 'api/admin/servicedomain/update_nameservers'|link }}" class="api-form" data-api-msg="{{ 'Nameservers updated'|trans }}">
        <input type="hidden" name="CSRFToken" value="{{ CSRFToken }}"/>
        <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="{{ request.ns1|default(service.ns1) }}" >
            </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="{{ request.ns2|default(service.ns2) }}" >
            </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="{{ request.ns3|default(service.ns3) }}">
            </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="{{ request.ns4|default(service.ns4) }}">
            </div>
        </div>

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

    <h3>{{ 'Domain data'|trans }}</h3>
    <form method="post" action="{{ 'api/admin/servicedomain/update'|link }}" class="api-form" data-api-msg="{{ 'Domain data updated'|trans }}">
        <input type="hidden" name="CSRFToken" value="{{ CSRFToken }}"/>
        <div class="mb-3 row">
            <label class="form-label col-3 col-form-label">{{ 'Transfer code (EPP)'|trans }}: </label>
            <div class="col">
                <input class="form-control" type="text" name="transfer_code" value="{{ request.transfer_code|default(service.transfer_code) }}" >
            </div>
        </div>
        <div class="mb-3 row">
            <label class="form-label col-3 col-form-label">{{ 'Period'|trans }}: </label>
            <div class="col">
                <input class="form-control" type="text" name="period" value="{{ request.period|default(service.period) }}">
            </div>
        </div>

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

    <h3>{{ 'Update domain contact details'|trans }}</h3>
    <form method="post" action="{{ 'api/admin/servicedomain/update_contacts'|link }}" class="api-form" data-api-msg="{{ 'Domain contact details updated'|trans }}">
        <input type="hidden" name="CSRFToken" value="{{ CSRFToken }}"/>
        <div class="mb-3 row">
            <label class="form-label col-3 col-form-label">{{ 'First Name'|trans }}: </label>
            <div class="col">
                <input class="form-control" type="text" name="contact[first_name]" value="{{ request.first_name|default(service.contact.first_name) }}" required>
            </div>
        </div>
        <div class="mb-3 row">
            <label class="form-label col-3 col-form-label">{{ 'Last Name'|trans }}: </label>
            <div class="col">
                <input class="form-control" type="text" name="contact[last_name]" value="{{ request.last_name|default(service.contact.last_name) }}" required>
            </div>
        </div>
        <div class="mb-3 row">
            <label class="form-label col-3 col-form-label">{{ 'Email'|trans }}: </label>
            <div class="col">
                <input class="form-control" type="text" name="contact[email]" value="{{ request.email|default(service.contact.email) }}" required>
            </div>
        </div>
        <div class="mb-3 row">
            <label class="form-label col-3 col-form-label">{{ 'Company'|trans }}: </label>
            <div class="col">
                <input class="form-control" type="text" name="contact[company]" value="{{ request.company|default(service.contact.company) }}" required>
            </div>
        </div>
        <div class="mb-3 row">
            <label class="form-label col-3 col-form-label">{{ 'Address Line 1'|trans }}: </label>
            <div class="col">
                <input class="form-control" type="text" name="contact[address1]" value="{{ request.address1|default(service.contact.address1) }}" required>
            </div>
        </div>
        <div class="mb-3 row">
            <label class="form-label col-3 col-form-label">{{ 'Address Line 2'|trans }}: </label>
            <div class="col">
                <input class="form-control" type="text" name="contact[address2]" value="{{ request.address2|default(service.contact.address2) }}" required>
            </div>
        </div>
        <div class="mb-3 row">
            <label class="form-label col-3 col-form-label">{{ 'Country'|trans }}: </label>
            <div class="col">
                <input class="form-control" type="text" name="contact[country]" value="{{ request.country|default(service.contact.country) }}" required>
            </div>
        </div>
        <div class="mb-3 row">
            <label class="form-label col-3 col-form-label">{{ 'City'|trans }}: </label>
            <div class="col">
                <input class="form-control" type="text" name="contact[city]" value="{{ request.city|default(service.contact.city) }}" required>
            </div>
        </div>
        <div class="mb-3 row">
            <label class="form-label col-3 col-form-label">{{ 'State'|trans }}: </label>
            <div class="col">
                <input class="form-control" type="text" name="contact[state]" value="{{ request.state|default(service.contact.state) }}" required>
            </div>
        </div>
        <div class="mb-3 row">
            <label class="form-label col-3 col-form-label">{{ 'Zip'|trans }}: </label>
            <div class="col">
                <input class="form-control" type="text" name="contact[postcode]" value="{{ request.postcode|default(service.contact.postcode) }}" required>
            </div>
        </div>
        <div class="mb-3 row">
            <label class="form-label col-3 col-form-label">{{ 'Phone Country Code'|trans }}: </label>
            <div class="col">
                <input class="form-control" type="text" name="contact[phone_cc]" value="{{ request.phone_cc|default(service.contact.phone_cc) }}" required>
            </div>
        </div>
        <div class="mb-3 row">
            <label class="form-label col-3 col-form-label">{{ 'Phone number'|trans }}: </label>
            <div class="col">
                <input class="form-control" type="text" name="contact[phone]" value="{{ request.phone|default(service.contact.phone) }}" required>
            </div>
        </div>

        <input type="hidden" name="order_id" value="{{ order.id }}">
        <input class="btn btn-primary w-100" type="submit" value="{{ 'Update'|trans }}">
    </form>
</div>
{% endif %}

<script>
$(function() {
    {% if service.locked == 0 %}
        document.getElementById('domain-unlock').classList.remove('d-inline-block');
        document.getElementById('domain-unlock').style.display = 'none';
    {% endif %}

    {% if service.locked == 1 %}
        document.getElementById('domain-lock').classList.remove('d-inline-block');
        document.getElementById('domain-lock').style.display = 'none';
    {% endif %}

    $('#domain-lock').on('click', function(event) {
        bb.post(
            'admin/servicedomain/lock',
            { order_id: {{ order.id }}, CSRFToken: "{{ CSRFToken }}" },
            function(result) {
                FOSSBilling.message("{{ 'Domain locked'|trans }}");

                document.getElementById('domain-lock').classList.remove('d-inline-block');
                document.getElementById('domain-lock').style.display = 'none';
                document.getElementById('domain-unlock').classList.add('d-inline-block');

                $('#locked-value').text('1');
            }
        );
    });

    $('#domain-unlock').on('click', function(event) {
        bb.post(
            'admin/servicedomain/unlock',
            { order_id: {{ order.id }}, CSRFToken: "{{ CSRFToken }}" },
            function(result) {
                FOSSBilling.message("{{ 'Domain unlocked'|trans }}");

                document.getElementById('domain-lock').classList.add('d-inline-block');
                document.getElementById('domain-unlock').classList.remove('d-inline-block');
                document.getElementById('domain-unlock').style.display = 'none';

                $('#locked-value').text('0');
            }
        );
    });

    {% if service.privacy == 0 %}
        {# $('#domain-disable-pp').hide(); #}
        document.getElementById('domain-disable-pp').classList.remove('d-inline-block');
        document.getElementById('domain-disable-pp').style.display = 'none';
    {% endif %}

    {% if service.privacy == 1 %}
        {# $('#domain-enable-pp').hide(); #}
        document.getElementById('domain-enable-pp').classList.remove('d-inline-block');
        document.getElementById('domain-enable-pp').style.display = 'none';
    {% endif %}

    $('#domain-enable-pp').on('click', function(event) {
        bb.post(
            'admin/servicedomain/enable_privacy_protection',
            { order_id: {{ order.id }}, CSRFToken: "{{ CSRFToken }}" },
            function(result) {
                FOSSBilling.message("{{ 'Privacy protection enabled'|trans }}");

                {# $('#domain-enable-pp').toggle(); #}
                {# $('#domain-disable-pp').toggle(); #}
                document.getElementById('domain-enable-pp').classList.remove('d-inline-block');
                document.getElementById('domain-enable-pp').style.display = 'none';
                document.getElementById('domain-disable-pp').classList.add('d-inline-block');

                $('#privacy-value').text('1');
            }
        );
    });

    $('#domain-disable-pp').on('click', function(event) {
        bb.post(
            'admin/servicedomain/disable_privacy_protection',
            { order_id: {{ order.id }}, CSRFToken: "{{ CSRFToken }}" },
            function(result) {
                FOSSBilling.message("{{ 'Privacy protection disabled'|trans }}");

                {# $('#domain-enable-pp').toggle(); #}
                {# $('#domain-disable-pp').toggle(); #}
                document.getElementById('domain-disable-pp').classList.remove('d-inline-block');
                document.getElementById('domain-disable-pp').style.display = 'none';
                document.getElementById('domain-enable-pp').classList.add('d-inline-block');

                $('#privacy-value').text('0');
            }
        );
    });

    $('#get-epp').on('click', function(event) {
        bb.post(
            'admin/servicedomain/get_transfer_code',
            { order_id: {{ order.id}}, CSRFToken: "{{ CSRFToken }}" },
            function(result) {
                FOSSBilling.message("{{ 'Domain transfer code is: '|trans }}" + result);
            }
        );
    });
});
</script>
