<div class="card-body">
    <div class="card mb-4">
        <div class="card-body">
            <div class="d-flex flex-column gap-1">
                <h5 class="card-title mb-0">{{ 'Domain Service Details'|trans }}</h5>
                <p class="text-secondary mb-0">{{ 'Review registrar status, nameservers, and core registration data for this domain service.'|trans }}</p>
            </div>
        </div>

        <div class="table-responsive">
            <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">{{ mf.boolean_badge(service.locked, 'Yes'|trans, 'No'|trans, 'text-bg-danger', 'text-bg-success') }}</td>
                    </tr>
                    <tr>
                        <td class="text-end">{{ 'Privacy Protection'|trans }}:</td>
                        <td id="privacy-value">{{ mf.boolean_badge(service.privacy, 'Enabled'|trans, 'Disabled'|trans, 'text-bg-danger', 'text-bg-success') }}</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>

        <div class="card-footer text-center">
            <div class="btn-list justify-content-center">
                {{ order_actions }}
                {% if order.status == 'active' %}
                <a class="btn btn-primary" type="button" id="get-epp">
                    <svg class="icon">
                        <use xlink:href="#key" />
                    </svg>
                    <span>{{ 'Get EPP'|trans }}</span>
                </a>
                <a class="btn btn-warning{% if service.locked == 0 %} d-none{% endif %}" type="button" id="domain-unlock">
                    <svg class="icon">
                        <use xlink:href="#lock-open" />
                    </svg>
                    <span>{{ 'Unlock'|trans }}</span>
                </a>
                <a class="btn btn-primary{% if service.locked == 1 %} d-none{% endif %}" type="button" id="domain-lock">
                    <svg class="icon">
                        <use xlink:href="#lock-closed" />
                    </svg>
                    <span>{{ 'Lock'|trans }}</span>
                </a>
                <a class="btn btn-danger{% if service.privacy == 0 %} d-none{% endif %}" type="button" id="domain-disable-pp">
                    <svg class="icon">
                        <use xlink:href="#eye" />
                    </svg>
                    <span>{{ 'Disable Privacy'|trans }}</span>
                </a>
                <a class="btn btn-primary{% if service.privacy == 1 %} d-none{% endif %}" type="button" id="domain-enable-pp">
                    <svg class="icon">
                        <use xlink:href="#eye-off" />
                    </svg>
                    <span>{{ 'Enable Privacy'|trans }}</span>
                </a>
                {% endif %}
            </div>
        </div>
    </div>

{% if order.status == 'active' %}
    <form method="post" action="{{ 'servicedomain/update_nameservers'|api_url }}" {{ fb_api_form({message: 'Nameservers Updated'|trans}) }}>
        <div class="card mb-4">
            <div class="card-body">
                <div class="d-flex flex-column gap-1 mb-4">
                    <h5 class="card-title mb-0">{{ 'Nameservers'|trans }}</h5>
                    <p class="text-secondary mb-0">{{ 'Update the authoritative nameservers assigned to this domain.'|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="{{ request.ns1|default(service.ns1) }}">
                    </div>
                    <div class="col-lg-6">
                        <label class="form-label">{{ 'Nameserver 2'|trans }}</label>
                        <input class="form-control" type="text" name="ns2" value="{{ request.ns2|default(service.ns2) }}">
                    </div>
                    <div class="col-lg-6">
                        <label class="form-label">{{ 'Nameserver 3'|trans }}</label>
                        <input class="form-control" type="text" name="ns3" value="{{ request.ns3|default(service.ns3) }}">
                    </div>
                    <div class="col-lg-6">
                        <label class="form-label">{{ 'Nameserver 4'|trans }}</label>
                        <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 }}">
            </div>
            <div class="card-footer d-flex justify-content-end">
                <button class="btn btn-primary" type="submit">{{ 'Update'|trans }}</button>
            </div>
        </div>
    </form>

    <form method="post" action="{{ 'servicedomain/update'|api_url }}" {{ fb_api_form({message: 'Domain Data Updated'|trans}) }}>
        <div class="card mb-4">
            <div class="card-body">
                <div class="d-flex flex-column gap-1 mb-4">
                    <h5 class="card-title mb-0">{{ 'Domain Data'|trans }}</h5>
                    <p class="text-secondary mb-0">{{ 'Maintain the registrar transfer code and renewal period stored for this service.'|trans }}</p>
                </div>
                <div class="row g-3">
                    <div class="col-lg-6">
                        <label class="form-label">{{ 'Transfer Code (EPP)'|trans }}</label>
                        <input class="form-control" type="text" name="transfer_code" value="{{ request.transfer_code|default(service.transfer_code) }}">
                    </div>
                    <div class="col-lg-6">
                        <label class="form-label">{{ 'Period'|trans }}</label>
                        <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 }}">
            </div>
            <div class="card-footer d-flex justify-content-end">
                <button class="btn btn-primary" type="submit">{{ 'Update'|trans }}</button>
            </div>
        </div>
    </form>

    <form method="post" action="{{ 'servicedomain/update_contacts'|api_url }}" {{ fb_api_form({message: 'Domain Contact Details Updated'|trans}) }}>
        <div class="card">
            <div class="card-body">
                <div class="d-flex flex-column gap-1 mb-4">
                    <h5 class="card-title mb-0">{{ 'Domain Contact Details'|trans }}</h5>
                    <p class="text-secondary mb-0">{{ 'Update the registration contact details that are sent to the domain registrar.'|trans }}</p>
                </div>
                <div class="row g-3">
                    <div class="col-lg-6">
                        <label class="form-label">{{ 'First Name'|trans }}</label>
                        <input class="form-control" type="text" name="contact[first_name]" value="{{ request.first_name|default(service.contact.first_name) }}" required>
                    </div>
                    <div class="col-lg-6">
                        <label class="form-label">{{ 'Last Name'|trans }}</label>
                        <input class="form-control" type="text" name="contact[last_name]" value="{{ request.last_name|default(service.contact.last_name) }}" required>
                    </div>
                    <div class="col-lg-6">
                        <label class="form-label">{{ 'Email'|trans }}</label>
                        <input class="form-control" type="text" name="contact[email]" value="{{ request.email|default(service.contact.email) }}" required>
                    </div>
                    <div class="col-lg-6">
                        <label class="form-label">{{ 'Company'|trans }}</label>
                        <input class="form-control" type="text" name="contact[company]" value="{{ request.company|default(service.contact.company) }}" required>
                    </div>
                    <div class="col-12">
                        <label class="form-label">{{ 'Address Line 1'|trans }}</label>
                        <input class="form-control" type="text" name="contact[address1]" value="{{ request.address1|default(service.contact.address1) }}" required>
                    </div>
                    <div class="col-12">
                        <label class="form-label">{{ 'Address Line 2'|trans }}</label>
                        <input class="form-control" type="text" name="contact[address2]" value="{{ request.address2|default(service.contact.address2) }}" required>
                    </div>
                    <div class="col-lg-6">
                        <label class="form-label">{{ 'Country'|trans }}</label>
                        <select class="form-select" name="contact[country]" required>
                            <option value="">{{ 'Select Country'|trans }}</option>
                            {% for code, name in country_names() %}
                                <option value="{{ code }}" {% if (request.country|default(service.contact.country)) == code %}selected{% endif %}>{{ name }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="col-lg-6">
                        <label class="form-label">{{ 'City'|trans }}</label>
                        <input class="form-control" type="text" name="contact[city]" value="{{ request.city|default(service.contact.city) }}" required>
                    </div>
                    <div class="col-lg-6">
                        <label class="form-label">{{ 'State'|trans }}</label>
                        <input class="form-control" type="text" name="contact[state]" value="{{ request.state|default(service.contact.state) }}" required>
                    </div>
                    <div class="col-lg-6">
                        <label class="form-label">{{ 'Zip'|trans }}</label>
                        <input class="form-control" type="text" name="contact[postcode]" value="{{ request.postcode|default(service.contact.postcode) }}" required>
                    </div>
                    <div class="col-lg-3">
                        <label class="form-label">{{ 'Phone Country Code'|trans }}</label>
                        <div class="input-group">
                            <span class="input-group-text">+</span>
                            <input class="form-control fb-phone-country-code" type="text" name="contact[phone_cc]" value="{{ request.phone_cc|default(service.contact.phone_cc) }}" inputmode="numeric" maxlength="3" pattern="[0-9]{1,3}" autocomplete="tel-country-code" required>
                        </div>
                    </div>
                    <div class="col-lg-9">
                        <label class="form-label">{{ 'Phone Number'|trans }}</label>
                        <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 }}">
            </div>
            <div class="card-footer d-flex justify-content-end">
                <button class="btn btn-primary" type="submit">{{ 'Update'|trans }}</button>
            </div>
        </div>
    </form>
{% endif %}
</div>

{% if order.status == 'active' %}
<script>
    document.addEventListener("DOMContentLoaded", function() {
        document.getElementById('domain-lock').addEventListener('click', function(event) {
            FOSSBilling.api.admin.post('servicedomain/lock', { order_id: {{ order.id }} },
                (result) => {
                    FOSSBilling.message("{{ 'Domain locked'|trans }}");

                    document.getElementById('domain-lock').classList.add('d-none');
                    document.getElementById('domain-unlock').classList.remove('d-none');

                    document.getElementById('locked-value').innerHTML = '<span class="badge text-bg-danger">{{ "Yes"|trans }}</span>';
                });
        });

        document.getElementById('domain-unlock').addEventListener('click', function(event) {
            FOSSBilling.api.admin.post('servicedomain/unlock', { order_id: {{ order.id }} },
                (result) => {
                    FOSSBilling.message("{{ 'Domain unlocked'|trans }}");

                    document.getElementById('domain-lock').classList.remove('d-none');
                    document.getElementById('domain-unlock').classList.add('d-none');

                    document.getElementById('locked-value').innerHTML = '<span class="badge text-bg-success">{{ "No"|trans }}</span>';
                });
        });

        document.getElementById('domain-enable-pp').addEventListener('click', function(event) {
            FOSSBilling.api.admin.post('servicedomain/enable_privacy_protection',{ order_id: {{ order.id }} },
                (result) => {
                    FOSSBilling.message("{{ 'Privacy protection enabled'|trans }}");

                    document.getElementById('domain-enable-pp').classList.add('d-none');
                    document.getElementById('domain-disable-pp').classList.remove('d-none');

                    document.getElementById('privacy-value').innerHTML = '<span class="badge text-bg-danger">{{ "Enabled"|trans }}</span>';
                });
        });

        document.getElementById('domain-disable-pp').addEventListener('click', function(event) {
            FOSSBilling.api.admin.post('servicedomain/disable_privacy_protection', { order_id: {{ order.id }} },
                (result) => {
                    FOSSBilling.message("{{ 'Privacy protection disabled'|trans }}");

                    document.getElementById('domain-disable-pp').classList.add('d-none');
                    document.getElementById('domain-enable-pp').classList.remove('d-none');

                    document.getElementById('privacy-value').innerHTML = '<span class="badge text-bg-success">{{ "Disabled"|trans }}</span>';
                });
        });

        document.getElementById('get-epp').addEventListener('click', function(event) {
            FOSSBilling.api.admin.post('servicedomain/get_transfer_code', { order_id: {{ order.id}} },
                (result) => {
                    FOSSBilling.message("{{ 'Domain transfer code is: '|trans }}" + result);
                });
        });
    });
</script>
{% endif %}
