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

{% block title %}{{ __('Create Application') }}{% 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">
                  {{ __('Create Application') }}
                </h2>
              </div>
            </div>
          </div>
        </div>
        <!-- Page body -->
        <div class="page-body">
          <div class="container-xl">
            <div class="col-12">
            {% include 'partials/flash.twig' %}
                <div class="card">
                    <div class="card-body">
                        <form id="domainCreateForm" action="/application/create" method="post">
                        {{ csrf.field | raw }}
                            <div class="mb-3">
                                <label for="domainName" class="form-label required">{{ __('Your Domain Name') }}</label>
                                <input type="text" class="form-control mb-2" placeholder="example.com" name="domainName" id="domainName" required="required" autocapitalize="none">
                            </div>
                            
                            <div class="mb-3">
                                <label for="phaseType" class="form-label required">{{ __('Phase Type') }}</label>
                                <select class="form-select" id="phaseType" name="phaseType" required>
                                    <option value="sunrise">Sunrise</option>
                                    <option value="landrush">Landrush</option>
                                    <option value="claims">Claims</option>
                                    <option value="open">Open</option>
                                    <option value="custom">Custom</option>
                                </select>
                            </div>
                            
                            <div class="mb-3">
                                <label for="phaseName" class="form-label">{{ __('Phase Name') }}</label>
                                <input type="text" class="form-control" id="phaseName" name="phaseName" placeholder="Enter phase name">
                                <small class="form-hint">The "Phase name" field is required only if the "Type" is set to "Custom".</small>
                            </div>
                            
                            {% if registrars and not registrar %}
                                <div class="form-group mb-3">
                                    <label for="registrarDropdown" class="form-label required">{{ __('Select Registrar') }}</label>
                                    <select id="registrarDropdown" name="registrar" class="form-control">
                                        {% for registrar in registrars %}
                                            <option value="{{ registrar.id }}">{{ registrar.name }}</option>
                                        {% endfor %}
                                    </select>
                                </div>
                            {% endif %}
                         
                            <!-- Fields for 4 contacts with roles -->
                            <div class="mb-3">
                                <label for="contactRegistrant" class="form-label required">{{ __('Contacts') }}</label>
                                <input type="text" class="form-control mb-2" placeholder="{{ __('Registrant Contact') }}" name="contactRegistrant" id="contactRegistrant" required="required">
                                <input type="text" class="form-control mb-2" placeholder="{{ __('Admin Contact') }}" name="contactAdmin">
                                <input type="text" class="form-control mb-2" placeholder="{{ __('Tech Contact') }}" name="contactTech">
                                <input type="text" class="form-control mb-2" placeholder="{{ __('Billing Contact') }}" name="contactBilling">
                            </div>

                            <!-- Fields for nameservers -->
                            <div id="nameserverFields">
                                <label class="form-label">{{ __('Nameservers') }}                             <button type="button" id="addNameserver" class="btn btn-success btn-sm mb-2">+</button> <button type="button" id="removeNameserver" class="btn btn-danger btn-sm mb-2">-</button></label>

                                <div class="nameserver-group mb-1 row">
                                    <div class="col-md-4">
                                        <input type="text" class="form-control mb-1" placeholder="{{ __('Nameserver') }} 1" name="nameserver[]" autocapitalize="none">
                                    </div>
                                    <div class="col-md-4">
                                        <input type="text" class="form-control mb-1" placeholder="{{ __('Nameserver') }} 1 - IPv4" name="nameserver_ipv4[]">
                                    </div>
                                    <div class="col-md-4">
                                        <input type="text" class="form-control mb-1" placeholder="{{ __('Nameserver') }} 1 - IPv6" name="nameserver_ipv6[]" autocapitalize="none">
                                    </div>
                                </div>

                                <div class="nameserver-group mb-1 row">
                                    <div class="col-md-4">
                                        <input type="text" class="form-control mb-1" placeholder="{{ __('Nameserver') }} 2" name="nameserver[]" autocapitalize="none">
                                    </div>
                                    <div class="col-md-4">
                                        <input type="text" class="form-control mb-1" placeholder="{{ __('Nameserver') }} 2 - IPv4" name="nameserver_ipv4[]">
                                    </div>
                                    <div class="col-md-4">
                                        <input type="text" class="form-control mb-1" placeholder="{{ __('Nameserver') }} 2 - IPv6" name="nameserver_ipv6[]" autocapitalize="none">
                                    </div>
                                </div>
                            </div>

                            <!-- AuthInfo -->
                            <div class="mb-3">
                                <label for="authInfo" class="form-label required">{{ __('Auth Info') }}</label>
                                <input type="text" class="form-control" id="authInfo" name="authInfo" required>
                            </div>
                            
                            <div class="mb-3">
                              <label class="form-label">{{ __('Signed Mark Information') }}</label>
                              <textarea class="form-control" data-bs-toggle="autosize" name="smd" placeholder="{{ __('Paste SMD contents') }}…"></textarea>
                            </div>
                            
                            <div class="mb-3">
                                <label for="noticeid" class="form-label">{{ __('Notice ID') }}</label>
                                <input type="text" class="form-control" name="noticeid">
                            </div>
                            
                            <div class="mb-3">
                                <label for="notafter" class="form-label">{{ __('Not After Date') }}</label>
                                <input type="datetime-local" class="form-control" name="notafter">
                            </div>
                            
                            <div class="mb-3">
                                <label for="accepted" class="form-label">{{ __('Accepted Date') }}</label>
                                <input type="datetime-local" class="form-control" name="accepted">
                            </div>
                            
                    </div>
                <div class="card-footer">
                  <div class="row align-items-center">
                    <div class="col-auto">
                      <button type="submit" class="btn btn-primary">{{ __('Create Application') }}</button>
                    </div>
                  </div>
                </div>
                </form>
              </div>
            </div>
          </div>
        </div>
        {% include 'partials/footer.twig' %}
      </div>
<script>
document.addEventListener("DOMContentLoaded", function() {

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

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

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

        const ipv4Col = document.createElement('div');
        ipv4Col.className = 'col-md-4';
        const ipv4Field = document.createElement('input');
        ipv4Field.type = 'text';
        ipv4Field.className = 'form-control mb-1';
        ipv4Field.placeholder = `{{ __('Nameserver') }} ${count} - IPv4`;
        ipv4Field.name = `nameserver_ipv4[]`;
        ipv4Col.appendChild(ipv4Field);

        const ipv6Col = document.createElement('div');
        ipv6Col.className = 'col-md-4';
        const ipv6Field = document.createElement('input');
        ipv6Field.type = 'text';
        ipv6Field.className = 'form-control mb-1';
        ipv6Field.placeholder = `{{ __('Nameserver') }} ${count} - IPv6`;
        ipv6Field.name = `nameserver_ipv6[]`;
        ipv6Col.appendChild(ipv6Field);

        group.appendChild(nameserverCol);
        group.appendChild(ipv4Col);
        group.appendChild(ipv6Col);

        return group;
    }

    // Add nameserver fields
    let nameserverCount = 2;
    addNameserverBtn.addEventListener('click', function() {
        if (nameserverCount < 13) {
            nameserverCount++;
            const nameserverGroup = createNameserverGroup(nameserverCount);
            nameserverFields.appendChild(nameserverGroup);
        }
    });

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

    // Generate random AuthInfo and set it to the field
    function generateAuthInfo() {
        const charset = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
        let result = "";
        for (let i = 0; i < 16; i++) {
            result += charset.charAt(Math.floor(Math.random() * charset.length));
        }
        return result;
    }
    authInfoField.value = generateAuthInfo();

});
</script>
{% endblock %}