{% extends "layouts/app.twig" %}

{% block title %}{{ __('Updating Domain') }} {{ domain.name }}{% endblock %}

{% block content %}
      <div class="page-wrapper">
        <!-- Page header -->
        <div class="page-header d-print-none">
          <div class="container-xl">
            <div class="row g-2 align-items-center">
              <div class="col">
                <!-- Page pre-title -->
                <div class="page-pretitle">
                  {{ __('Overview') }}
                </div>
                <h2 class="page-title">
                  {{ __('Updating Domain') }} {{ domain.name }}
                </h2>
              </div>
            </div>
          </div>
        </div>
        <!-- Page body -->
        <div class="page-body">
          <div class="container-xl">
            <form id="domainUpdateForm" action="/domain/update" method="post">
            {{ csrf.field | raw }}
              <div class="col-12">
              {% include 'partials/flash.twig' %}
                <div class="card mb-3">
                  <div class="card-header">
                    <h3 class="card-title">
                        {{ __('Domain') }} {{ domain.name }}&nbsp;<input type="hidden" name="domainName" value="{{ domain.punycode }}">
                        {% if domainStatus.status or domain.rgpstatus %}
                            {% if domainStatus is iterable %}
                                {% for status in domainStatus %}
                                    <span class="status status-green" title="Status">{{ status.status }}</span>&nbsp;
                                {% endfor %}
                            {% else %}
                                {% if domainStatus.status %}
                                    <span class="status status-green" title="Status">{{ domainStatus.status }}</span>&nbsp;
                                {% endif %}
                            {% endif %}
                            {% if domain.rgpstatus %}
                                <span class="status status-info" title="Status">{{ domain.rgpstatus }}</span>
                            {% endif %}
                        {% else %}
                            <span class="status status-info" title="Status">ok</span>
                        {% endif %}
                    </h3>
                  </div>
                  <div class="card-body">
                    <div class="datagrid">
                      <div class="datagrid-item">
                        <div class="datagrid-title">{{ __('Registered On') }}</div>
                        <div class="datagrid-content">{{ domain.crdate }}</div>
                      </div>
                      <div class="datagrid-item">
                        <div class="datagrid-title">{{ __('Last Updated') }}</div>
                        <div class="datagrid-content">{{ domain.lastupdate }}</div>
                      </div>
                      <div class="datagrid-item">
                        <div class="datagrid-title">{{ __('Expiration Date') }}</div>
                        <div class="datagrid-content">{{ domain.exdate }}</div>
                      </div>
                      <div class="datagrid-item">
                        <div class="datagrid-title">{{ __('Registrar') }}</div>
                        <div class="datagrid-content">{{ registrar.name }}</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col-12">
                <div class="card">
                  <div class="card-body">
                    <div class="row">
                        <!-- Fields for 4 contacts with roles -->
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="contactRegistrant" class="form-label required">{{ __('Registrant Contact') }}</label>
                                <input type="text" class="form-control mb-2" placeholder="{{ __('Registrant Contact') }}" name="contactRegistrant" id="contactRegistrant" value="{{ domainRegistrant.identifier }}" required>
                                        
                                {% set contactAdmin = '' %}
                                {% set contactTech = '' %}
                                {% set contactBilling = '' %}

                                {% for contact in domainContacts %}
                                    {% if contact.type == 'admin' %}
                                        {% set contactAdmin = contact.identifier %}
                                    {% elseif contact.type == 'tech' %}
                                        {% set contactTech = contact.identifier %}
                                    {% elseif contact.type == 'billing' %}
                                        {% set contactBilling = contact.identifier %}
                                    {% endif %}
                                {% endfor %}
                                
                                <label for="contactAdmin" class="form-label required">{{ __('Admin Contact') }}</label>
                                <input type="text" class="form-control mb-2" placeholder="{{ __('Admin Contact') }}" name="contactAdmin" id="contactAdmin" value="{{ contactAdmin }}" required>
                                <label for="contactTech" class="form-label required">{{ __('Tech Contact') }}</label>
                                <input type="text" class="form-control mb-2" placeholder="{{ __('Tech Contact') }}" name="contactTech" id="contactTech" value="{{ contactTech }}" required>
                                <label for="contactBilling" class="form-label required">{{ __('Billing Contact') }}</label>
                                <input type="text" class="form-control mb-2" placeholder="{{ __('Billing Contact') }}" name="contactBilling" id="contactBilling" value="{{ contactBilling }}" required>
                            </div>
                            
                            <div class="hr-text">
                              <span>{{ __('Domain Security') }}</span>
                            </div>
                            
                            <!-- AuthInfo -->
                            <div class="mb-3 mt-3">
                                <label for="authInfo" class="form-label required">{{ __('Auth Info') }}</label>
                                <input type="text" class="form-control" id="authInfo" name="authInfo" value="{{ domainAuth.authinfo }}" required>
                            </div>
                            
                        </div>
                                
                        <!-- Fields for nameservers -->
                        <div class="col-md-6">
                            <div id="nameserverFields">
                                <label class="form-label">{{ __('Nameservers') }}&nbsp;<button type="button" id="addNameserver" class="btn btn-success btn-sm mb-2">+</button>&nbsp;<button type="button" id="removeNameserver" class="btn btn-danger btn-sm mb-2">-</button></label>
                                {% for host in domainHosts %}
                                    <div class="nameserver-group mb-1 row">
                                      <div class="input-group mb-1">
                                        <input type="text" class="form-control" placeholder="{{ __('Nameserver') }} {{ loop.index }}" value="{{ host.name }}" autocapitalize="none" disabled>
                                        <button type="button" class="btn btn-secondary btn-icon" onclick="sendRequest('{{ host.name }}')" title="Delete nameserver"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10 10l4 4m0 -4l-4 4" /><path d="M12 3c7.2 0 9 1.8 9 9s-1.8 9 -9 9s-9 -1.8 -9 -9s1.8 -9 9 -9z" /></svg></button>
                                      </div>
                                    </div>
                                {% endfor %}
                            </div>
                            
                            {% set statuses = domainStatus|map(status => status.status) %}
                            
                            <div class="mb-3 mt-3">
                              <div class="form-label">{{ __('Statuses') }}</div>
                              <div>
                                <label class="form-check form-check-inline">
                                  <input class="form-check-input" type="checkbox" name="clientStatuses[clientHold]" {% if 'clientHold' in statuses %}checked{% endif %}>
                                  <span class="form-check-label">clientHold</span>
                                </label>
                                <label class="form-check form-check-inline">
                                  <input class="form-check-input" type="checkbox" name="clientStatuses[clientRenewProhibited]" {% if 'clientRenewProhibited' in statuses %}checked{% endif %}>
                                  <span class="form-check-label">clientRenewProhibited</span>
                                </label>
                                <label class="form-check form-check-inline">
                                  <input class="form-check-input" type="checkbox" name="clientStatuses[clientTransferProhibited]" {% if 'clientTransferProhibited' in statuses %}checked{% endif %}>
                                  <span class="form-check-label">clientTransferProhibited</span>
                                </label>
                                <label class="form-check form-check-inline">
                                  <input class="form-check-input" type="checkbox" name="clientStatuses[clientDeleteProhibited]" {% if 'clientDeleteProhibited' in statuses %}checked{% endif %}>
                                  <span class="form-check-label">clientDeleteProhibited</span>
                                </label>
                                <label class="form-check form-check-inline">
                                  <input class="form-check-input" type="checkbox" name="clientStatuses[clientUpdateProhibited]" {% if 'clientUpdateProhibited' in statuses %}checked{% endif %}>
                                  <span class="form-check-label">clientUpdateProhibited</span>
                                </label>
                              </div>
                            </div>
                            
                            <div class="mb-3 mt-3">
                              <div class="form-label">{{ __('Server Statuses') }}</div>
                              <div>
                                <label class="form-check form-check-inline">
                                  <input class="form-check-input" type="checkbox" name="serverStatuses[serverHold]"{% if roles != 0 %}disabled{% endif %} {% if 'serverHold' in statuses %}checked{% endif %}>
                                  <span class="form-check-label">serverHold</span>
                                </label>
                                <label class="form-check form-check-inline">
                                  <input class="form-check-input" type="checkbox" name="serverStatuses[serverRenewProhibited]"{% if roles != 0 %}disabled{% endif %} {% if 'serverRenewProhibited' in statuses %}checked{% endif %}>
                                  <span class="form-check-label">serverRenewProhibited</span>
                                </label>
                                <label class="form-check form-check-inline">
                                  <input class="form-check-input" type="checkbox" name="serverStatuses[serverTransferProhibited]"{% if roles != 0 %}disabled{% endif %} {% if 'serverTransferProhibited' in statuses %}checked{% endif %}>
                                  <span class="form-check-label">serverTransferProhibited</span>
                                </label>
                                <label class="form-check form-check-inline">
                                  <input class="form-check-input" type="checkbox" name="serverStatuses[serverDeleteProhibited]"{% if roles != 0 %}disabled{% endif %} {% if 'serverDeleteProhibited' in statuses %}checked{% endif %}>
                                  <span class="form-check-label">serverDeleteProhibited</span>
                                </label>
                                <label class="form-check form-check-inline">
                                  <input class="form-check-input" type="checkbox" name="serverStatuses[serverUpdateProhibited]"{% if roles != 0 %}disabled{% endif %} {% if 'serverUpdateProhibited' in statuses %}checked{% endif %}>
                                  <span class="form-check-label">serverUpdateProhibited</span>
                                </label>
                              </div>
                            </div>
                          
                        </div>
                    </div>

                    {% if domainSecdns|length > 0 %}
                        <!-- DNSSEC data is available, display the form directly -->
                        <div id="dnssecTable" class="mb-3">
                            <label for="authInfo" class="form-label">{{ __('DNSSEC Data') }}</label>
                            <div class="table-responsive">
                                <table class="table table-vcenter card-table table-striped">
                                    <thead>
                                        <tr>
                                            {% set dsDataExists = false %}
                                            {% set keyDataExists = false %}

                                            {% for row in domainSecdns %}
                                                {% if row.interface == 'dsData' %}
                                                    {% set dsDataExists = true %}
                                                {% elseif row.interface == 'keyData' %}
                                                    {% set keyDataExists = true %}
                                                {% endif %}
                                            {% endfor %}

                                            <!-- Headers for dsData -->
                                            {% if dsDataExists %}
                                                <th>Keytag</th>
                                                <th>Algorithm</th>
                                                <th>Digest Type</th>
                                                <th>Digest</th>
                                            {% endif %}

                                            <!-- Headers for keyData -->
                                            {% if keyDataExists %}
                                                <th>Flags</th>
                                                <th>Protocol</th>
                                                <th>Keydata Algorithm</th>
                                                <th>Public Key</th>
                                            {% endif %}
                                                <th>&nbsp;</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {% for row in domainSecdns %}
                                            <tr>
                                                {% if row.interface == 'dsData' %}
                                                    <td>{{ row.keytag }}</td>
                                                    <td>{{ row.alg }}</td>
                                                    <td>{{ row.digesttype }}</td>
                                                    <td>{{ row.digest }}</td>
                                                {% elseif row.interface == 'keyData' %}
                                                    <td>{{ row.flags }}</td>
                                                    <td>{{ row.protocol }}</td>
                                                    <td>{{ row.keydata_alg }}</td>
                                                    <td>{{ row.pubkey }}</td>
                                                {% endif %}
                                                    <td><button type="button" class="btn btn-dark btn-icon" onclick="sendSecRequest('{{ row.id }}','{{ row.domain_id }}')" title="Delete record"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10 10l4 4m0 -4l-4 4" /><path d="M12 3c7.2 0 9 1.8 9 9s-1.8 9 -9 9s-9 -1.8 -9 -9s1.8 -9 9 -9z" /></svg></button></td>
                                            </tr>
                                        {% endfor %}
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    {% endif %}
                        <!-- DNSSEC Data with checkbox -->
                        <div class="mb-3 form-check">
                            <input type="checkbox" class="form-check-input" id="addDnssec" name="addDnssec">
                            <label class="form-check-label" for="addDnssec">{{ __('Add DNSSEC Data') }}</label>
                        </div>
                        <div id="dnssecData" style="display: none;">
                            <div class="mb-3">
                                <label for="dsKeyTag" class="form-label">{{ __('DS Record') }}</label>
                                <input type="text" class="form-control mb-2" placeholder="{{ __('Key Tag') }}" name="dsKeyTag" id="dsKeyTag">
                                <select class="form-control mb-2" name="dsAlg">
                                    <option value="" disabled selected>{{ __('Select Algorithm') }}</option>
                                    <option value="8">RSA/SHA-256</option>
                                    <option value="13">ECDSA Curve P-256 with SHA-256</option>
                                    <option value="14">ECDSA Curve P-384 with SHA-384</option>
                                    <option value="15">Ed25519</option>
                                    <option value="16">Ed448</option>
                                </select>
                                <select class="form-control mb-2" name="dsDigestType">
                                    <option value="" disabled selected>{{ __('Select Digest Type') }}</option>
                                    <option value="2">SHA-256</option>
                                    <option value="4">SHA-384</option>
                                </select>
                                <input type="text" class="form-control mb-2" placeholder="{{ __('Digest') }}" name="dsDigest">
                            </div>
                                    
                            <div class="mb-3">
                                <label for="dnskeyFlags" class="form-label">{{ __('DNSKEY Record') }}</label>
                                <input type="number" class="form-control mb-2" placeholder="{{ __('Flags') }}" name="dnskeyFlags" id="dnskeyFlags">
                                <input type="number" class="form-control mb-2" placeholder="{{ __('Protocol') }}" name="dnskeyProtocol" value="3" readonly> <!-- Protocol is typically set to 3 -->
                                <select class="form-control mb-2" name="dnskeyAlg">
                                    <option value="" disabled selected>{{ __('Select Algorithm') }}</option>
                                    <option value="8">RSA/SHA-256</option>
                                    <option value="13">ECDSA Curve P-256 with SHA-256</option>
                                    <option value="14">ECDSA Curve P-384 with SHA-384</option>
                                    <option value="15">Ed25519</option>
                                    <option value="16">Ed448</option>
                                </select>
                                <input type="text" class="form-control mb-2" placeholder="{{ __('Public Key') }}" name="dnskeyPubKey">
                            </div>
                        </div>

                  </div>
                <div class="card-footer">
                  <div class="row align-items-center">
                    <div class="col-auto">
                      <button type="submit" class="btn btn-primary">{{ __('Update Domain') }}</button>
                    </div>
                  </div>
                </div>
                </form>
              </div>
            </div>
          </div>
        </div>
        {% include 'partials/footer.twig' %}
      </div>
<script>
var csrfTokenName = "{{ csrfTokenName }}";
var csrfTokenValue = "{{ csrfTokenValue }}";
    
function sendRequest(nameserver) {
    var formData = new FormData();
    formData.append('nameserver', nameserver);

    var xhr = new XMLHttpRequest();
    xhr.open('POST', '/domain/deletehost');
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4) {
            var response = JSON.parse(xhr.responseText);
            if (xhr.status == 200 && response.success) {
                // Redirect to the provided URL
                window.location.href = response.redirect;
            } else {
                // Handle error
                console.error('Error: ' + response.error);
                alert('Error: ' + response.error); // Display error message to the user
            }
        }
    };
    xhr.send(formData);
}

function sendSecRequest(record,domain_id) {
    var formData = new FormData();
    formData.append('record', record);
    formData.append('domain_id', domain_id);
    
    var xhr = new XMLHttpRequest();
    xhr.open('POST', '/domain/deletesecdns');
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4) {
            var response = JSON.parse(xhr.responseText);
            if (xhr.status == 200 && response.success) {
                // Redirect to the provided URL
                window.location.href = response.redirect;
            } else {
                // Handle error
                console.error('Error: ' + response.error);
                alert('Error: ' + response.error); // Display error message to the user
            }
        }
    };
    xhr.send(formData);
}

document.addEventListener("DOMContentLoaded", function() {

    const addNameserverBtn = document.getElementById('addNameserver');
    const removeNameserverBtn = document.getElementById('removeNameserver');
    const nameserverFields = document.getElementById('nameserverFields');

    function createNameserverGroup(count) {
        const group = document.createElement('div');
        group.className = 'nameserver-group mb-1 row';

        const nameserverCol = document.createElement('div');
        nameserverCol.className = 'col-md-12';
        const nameserverField = document.createElement('input');
        nameserverField.type = 'text';
        nameserverField.className = 'form-control mb-1';
        nameserverField.placeholder = `{{ __('Nameserver') }} ${count}`;
        nameserverField.name = `nameserver[]`;
        nameserverCol.appendChild(nameserverField);

        group.appendChild(nameserverCol);

        return group;
    }

    // Add nameserver fields
    let nameserverCount = {{ domainHosts|length }};  // Initialize count based on the number of domain hosts

    addNameserverBtn.addEventListener('click', function() {
        if (nameserverCount < 13) {
            nameserverCount++;
            const nameserverGroup = createNameserverGroup(nameserverCount);
            nameserverFields.appendChild(nameserverGroup);
        }
    });

    // Remove nameserver group
    removeNameserverBtn.addEventListener('click', function() {
        if (nameserverCount > {{ domainHosts|length }}) {
            const lastGroup = nameserverFields.querySelector('.nameserver-group:last-child');
            if (lastGroup) {
                nameserverFields.removeChild(lastGroup);
                nameserverCount--;
            }
        }
    });

    // Display DNSSEC data when the checkbox is ticked
    document.getElementById('addDnssec').addEventListener('change', function() {
        const dnssecData = document.getElementById('dnssecData');
        if (this.checked) {
            dnssecData.style.display = 'block';
        } else {
            dnssecData.style.display = 'none';
        }
    });
    
});
</script>
{% endblock %}