{% if order.status == 'active' %}
<h2 class="text-center">{{ 'Domain management'|trans }}</h2>
<div class="row">
    <div class="col-lg-12">
        <ul class="nav nav-tabs nav-justified mb-3" id="myTab">
            <li class="nav-item" role="presentation">
                <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#tab-details">
                    <i class="fa fa-info-circle me-2"></i>{{ 'Details'|trans }}</button>
            </li>
            <li class="nav-item">
                <button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab-protection">
                    <i class="fa fa-lock me-2"></i>{{ 'Protection'|trans }}</button>
                </li>
            <li class="nav-item">
                <button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab-privacy">
                    <i class="fa fa-user-secret me-2"></i>{{ 'Privacy'|trans }}</button>
            </li>
            <li class="nav-item">
                <button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab-nameservers">
                    <i class="fa fa-server me-2"></i>{{ 'Nameservers'|trans }}</button>
            </li>
            <li class="nav-item">
                <button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab-whois">
                    <i class="fa fa-user me-2"></i>{{ 'Whois'|trans }}</button>
            </li>
            <li class="nav-item">
                <button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab-epp">
                    <i class="fa fa-car me-2"></i> {{ 'Transfer'|trans }}</button>
            </li>
         </ul>

        <div id="myTabContent" class="tab-content">
            <div class="tab-pane fade show active" id="tab-details">
                <h4>{{ 'Domain details'|trans }}</h4>
                <div class="well">
                    <ul class="list-group">
                        <li class="list-group-item">
                            <strong>{{ 'Domain'|trans }}:</strong> <a target="_blank" href="http://{{ service.domain }}">{{ service.domain }}</a>
                        </li>
                        <li class="list-group-item">
                            <strong>{{ 'Registration date'|trans }}:</strong> {{ service.registered_at|date('Y-m-d h:i') }}</li>
                        <li class="list-group-item">
                            <strong>{{ 'Expires at'|trans }}:</strong> {{ service.expires_at|date('Y-m-d h:i') }}</li>
                    </ul>
                </div>
            </div>

            <div class="tab-pane fade" id="tab-protection">
                <h4>{{ 'Domain Protection'|trans }}</h4>
                <div class="text-secondary">
                    <p>{{ 'Domain locking is a security enhancement to prevent unauthorized transfers of your domain to another registrar or web host by "locking" your domain name servers.'|trans }}</p>
                    <div class="d-grid">
                        <button class="btn btn-danger" type="button" id="domain-unlock" {% if service.locked == 0 %}style="display:none;"{% endif %}>{{ 'Unlock'|trans }}</button>
                        <button class="btn btn-success" type="button" id="domain-lock" {% if service.locked == 1 %}style="display:none;"{% endif %}>{{ 'Lock'|trans }}</button>
                    </div>
                </div>
            </div>

            <div class="tab-pane fade" id="tab-privacy">
                <h4>{{ 'Domain Privacy Settings'|trans }}</h4>
                <div class="text-secondary">
                    <p>{{ 'If you would like to hide domain contact information which is shown on WHOIS you can enable privacy protection. Once domain privacy protection is enabled no one will know who registered this service. And once you decide to disable privacy protection, information that is listed above on "Update Domain Contact Details" section will be seen on domain WHOIS again.'|trans }}</p>
                    <div class="d-grid">
                        <button class="btn btn-success" type="button" id="domain-enable-pp" {% if service.privacy == 1 %}style="display:none;"{% endif %}>{{ 'Enable'|trans }}</button>
                        <button class="btn btn-danger" type="button" id="domain-disable-pp" {% if service.privacy == 0 %}style="display:none;"{% endif %}>{{ 'Disable'|trans }}</button>
                    </div>
                </div>
            </div>

            <div class="tab-pane fade" id="tab-nameservers">
                <h4>{{ 'Domain nameservers'|trans }}</h4>
                <form method="post" class="api-form" data-api-url="client/servicedomain/update_nameservers" data-api-msg="{{ 'Nameservers updated'|trans }}">
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <div class="mb-3">
                                <label class="form-label">{{ 'Nameserver 1'|trans }}</label>
                                <input type="text" class="form-control" name="ns1" value="{{ request.ns1|default(service.ns1) }}" required>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">{{ 'Nameserver 2'|trans }}</label>
                                <input type="text" class="form-control" name="ns2" value="{{ request.ns2|default(service.ns2) }}" required>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">{{ 'Nameserver 3'|trans }}</label>
                                <input type="text" class="form-control" name="ns3" value="{{ request.ns3|default(service.ns3) }}">
                            </div>
                            <div class="mb-3">
                                <label class="form-label">{{ 'Nameserver 4'|trans }}</label>
                                <input type="text" class="form-control" name="ns4" value="{{ request.ns4|default(service.ns4) }}">
                            </div>
                        </div>
                        <div class="d-grid">
                            <input type="hidden" name="order_id" value="{{ order.id }}">
                            <input class="btn btn-primary" type="submit" value="{{ 'Update'|trans }}">
                        </div>
                    </div>
                </form>
            </div>

            <div class="tab-pane fade" id="tab-whois">
                <h4>{{ 'Update domain contact details'|trans }}</h4>
                <form class="api-form" method="post" data-api-url="client/servicedomain/update_contacts" data-api-msg="{{ 'Contact details updated'|trans }}">
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <div class="mb-3">
                                <div class="row">
                                    <div class="col">
                                        <label class="form-label">{{ 'First name'|trans }}:</label>
                                        <input type="text" class="form-control" name="contact[first_name]" value="{{ request.first_name|default(service.contact.first_name) }}" required>
                                    </div>
                                    <div class="col">
                                        <label>{{ 'Last name'|trans }}:</label>
                                        <input type="text" class="form-control" name="contact[last_name]" value="{{ request.last_name|default(service.contact.last_name) }}" required>
                                    </div>
                                </div>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">{{ 'Email address'|trans }}:</label>
                                <input type="email" class="form-control" name="contact[email]" value="{{ request.email|default(service.contact.email) }}" required>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">{{ 'Company name'|trans }}:</label>
                                <input type="text" class="form-control" name="contact[company]" value="{{ request.company|default(service.contact.company) }}" required>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">{{ 'Phone'|trans }}:</label>
                                <div class="input-group">
                                    <span class="input-group-text">+</span>
                                    <input type="text" class="form-control" name="contact[phone_cc]" value="{{ request.phone_cc|default(service.contact.phone_cc) }}" required>
                                    <input type="text" class="form-control w-50" name="contact[phone]" value="{{ request.phone|default(service.contact.phone) }}" required>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6 mb-3">
                            <div class="mb-3">
                                <label class="form-label">{{ 'Address'|trans }}:</label>
                                <input type="text" class="form-control" name="contact[address1]" value="{{ request.address1|default(service.contact.address1) }}" required>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">{{ 'Address 2'|trans }}:</label>
                                <input type="text" class="form-control" name="contact[address2]" value="{{ request.address2|default(service.contact.address2) }}">
                            </div>
                            <div class="mb-3">
                                <label class="form-label">{{ 'City'|trans }}:</label>
                                <input type="text" class="form-control" name="contact[city]" value="{{ request.city|default(service.contact.city) }}" required>
                            </div>
                            <div class="mb-3">
                                <div class="row">
                                    <div class="col-5">
                                        <label class="form-label">{{ 'Country'|trans }}:</label>
                                        <input type="text" class="form-control" name="contact[country]" value="{{ request.country|default(service.contact.country) }}" required>
                                    </div>
                                    <div class="col-4">
                                        <label class="form-label">{{ 'State'|trans }}:</label>
                                        <input type="text" class="form-control" name="contact[state]" value="{{ request.state|default(service.contact.state) }}">
                                    </div>
                                    <div class="col-3">
                                        <label class="form-label">{{ 'Zip'|trans }}:</label>
                                        <input type="text" class="form-control" name="contact[postcode]" value="{{ request.postcode|default(service.contact.postcode) }}" required>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="d-grid">
                            <input type="hidden" name="order_id" value="{{ order.id }}">
                            <input class="btn btn-primary" type="submit" value="{{ 'Update'|trans }}">
                        </div>
                    </div>
                </form>
            </div>

            <div class="tab-pane fade" id="tab-epp">
                <h4>{{ 'Domain Secret'|trans }}</h4>
                <div class="well">
                    <p class="text-secondary">{{ 'All domain names (except a .EU, .UK domain name) have a Domain (Transfer) Secret Key/Authorization Code (EPP Code) associated with them. This would be required if you want to transfer service.'|trans }}</p>
                    <div class="d-grid">
                        <button type="button" class="btn btn-primary" id="getAuthCode">{{ 'Get EPP code'|trans }}</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        $('#domain-lock').bind('click', function(event) {
            bb.post('client/servicedomain/lock', { order_id: {{ order.id }} }, function(result) {
                    boxbilling.message("{{ 'Domain locked'|trans }}");
                    $('#domain-lock').toggle();
                    $('#domain-unlock').toggle();
            });
        });

        $('#domain-unlock').bind('click', function(event) {
            bb.post('client/servicedomain/unlock', { order_id: {{ order.id }} }, function(result) {
                    boxbilling.message("{{ 'Domain unlocked'|trans }}");
                    $('#domain-lock').toggle();
                    $('#domain-unlock').toggle();
            });
        });

        $('#domain-enable-pp').bind('click', function(event) {
            bb.post('client/servicedomain/enable_privacy_protection', { order_id: {{ order.id }} }, function(result) {
                    boxbilling.message("{{ 'Privacy protection enabled'|trans }}");
                    $('#domain-enable-pp').toggle();
                    $('#domain-disable-pp').toggle();
            });
        });

        $('#domain-disable-pp').bind('click', function(event) {
            bb.post('client/servicedomain/disable_privacy_protection', { order_id: {{ order.id }} }, function(result) {
                    boxbilling.message("{{ 'Privacy protection disabled'|trans }}");
                    $('#domain-enable-pp').toggle();
                    $('#domain-disable-pp').toggle();
            });
        });

        document.getElementById('getAuthCode').addEventListener('click', () => {
            bb.post('client/servicedomain/get_transfer_code', { order_id: {{ order.id }} }, function(result) {
                    boxbilling.message("{{ 'Domain transfer code is: '|trans }}" + result);
                }
            );
        });
    });
</script>
{% endif %}
