{% import 'macro_functions.html.twig' as mf %}

{% set service = admin.order_service({ "id": order.id }) %}

<div class="card-body overflow-auto">
    <h3>{{ 'Details'|trans }}</h3>
    <table class="table card-table table-vcenter table-striped text-nowrap">
        <tbody>
            <tr>
                <td class="text-end">{{ 'API Key'|trans }}:</td>
                <td>{{ service.api_key }}</td>
            </tr>
        </tbody>
    </table>
</div>

<div class="card-footer text-center">
    {{ order_actions }}
    <a class="btn btn-primary api-link"
        href="{{ 'api/admin/serviceapikey/reset'|link({ 'order_id': order.id, 'CSRFToken': CSRFToken }) }}"
        data-api-confirm="{{ 'Are you sure?'|trans }}"
        data-api-reload="1">
        <svg class="icon" width="24" height="24">
            <use xlink:href="#refresh" />
        </svg>
        <span>{{ 'Reset API key'|trans }}</span>
    </a>
</div>

<div class="card-body">
    <h2>{{ 'API key configuration'|trans }}</h2>
    <P>{{ 'Changing the API key generation options will not automatically regenerate the API key. You must do so manually.'|trans }}</p>

    <form action="{{ 'api/admin/serviceapikey/update'|link }}" method="post" class="api-form" data-api-msg="{{ 'API key updated'|trans }}">
        <input type="hidden" name="CSRFToken" value="{{ CSRFToken }}"/>
        <div class="mb-3 row">
            <label class="form-label col-3 col-form-label">{{ 'Length'|trans }}:</label>
            <div class="col">
                <input type="number" class="form-control" name="config[length]" value="{{ request.config.length|default(service.config.length) }}">
            </div>
        </div>

        <hr>

        <div class="mb-3 row">
            <label class="form-label col-3 col-form-label">{{ 'Split API key with dashes'|trans }}:</label>
            <div class="col">
                <div class="form-check form-check-inline">
                    <input class="form-check-input" type="radio" name="config[split]" id="split_yes" value="1" {% if request.config.split|default(service.config.split) == 1 %} checked {% endif %}>
                    <label class="form-check-label" for="split_yes">{{ 'Yes'|trans }}</label>
                </div>
                <div class="form-check form-check-inline">
                    <input class="form-check-input" type="radio" name="config[split]" id="split_no" value="0" {% if request.config.split|default(service.config.split) == 0 %} checked {% endif %}>
                    <label class="form-check-label" for="split_no">{{ 'No'|trans }}</label>
                </div>
            </div>
        </div>

        <div class="mb-3 row">
            <label class="form-label col-3 col-form-label">{{ 'Split Interval'|trans }}:</label>
            <div class="col">
                <input type="number" class="form-control" name="config[split_interval]" value="{{ request.split_interval|default(service.config.split_interval) }}">
            </div>
        </div>

        <hr>

        <div class="mb-3 row">
            <label class="form-label col-3 col-form-label">{{ 'API key capitalization'|trans }}:</label>
            <div class="col">
                <select class="form-select" aria-label="API key capitalization options" name="config[case]">
                    <option {% if request.config.case|default(service.config.case) == "upper" %} selected {% endif %} value="upper">{{ 'Uppercase'|trans }}</option>
                    <option {% if request.config.case|default(service.config.case) == "lower" %} selected {% endif %} value="lower">{{ 'Lowercase'|trans }}</option>
                    <option {% if request.config.case|default(service.config.case) == "mixed" %} selected {% endif %} value="mixed">{{ 'Mixed'|trans }}</option>
                </select>
            </div>
        </div>

        <hr>

        <div class="mb-3 row">
            <h2>{{ 'Custom Parameters'|trans }}</h2>
            <div class="col" id="customParameters">
                <span class="btn btn-primary" onclick="addNewField()">{{ 'Add new field'|trans }}</span>
                {% for key, value in service.config %}
                    {% if key starts with 'custom_' %}
                        <div class="field-container row" id="{{key}}">
                            <label class="form-label col-3 col-form-label">{{key}}:</label>
                            <div class="col d-flex align-items-center">
                                <input type="text" class="form-control me-2" value="{{value}}" name="config[{{key}}]"/><span
                                class="btn btn-primary ms-2" onclick='deleteField("{{key}}")'>Delete</span>
                            </div>
                        </div>
                    {% endif %}
                  {% endfor %}                  
            </div>
        </div>

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

<script> 
    function addNewField() {
        Modals.create({
            type: 'prompt',
            title: 'New field',
            label: 'Give the new field a name',
            value: 'monthlyLimit',
            promptConfirmButton: 'Create',
            promptConfirmCallback: function (name) {
                // We use camel case to ensure it'll be programming-friendly & append 'custom_' to the start of it so they are easily identifiable as custom parameters.
                name = 'custom_' + toCamelCase(name);
                var container = document.getElementById('customParameters');
    
                // Create the container div
                var fieldContainer = document.createElement('div');
                fieldContainer.classList.add('field-container', 'row');
                fieldContainer.setAttribute('id', name);
    
                // Create the label element
                var label = document.createElement('label');
                label.classList.add('form-label', 'col-3', 'col-form-label');
                label.textContent = name + ':';
    
                // Create the div container for the input and button
                var div = document.createElement('div');
                div.classList.add('col', 'd-flex', 'align-items-center');
    
                // Create the input element
                var input = document.createElement('input');
                input.setAttribute('type', 'text');
                input.classList.add('form-control');
                input.classList.add('me-2');
                input.setAttribute('name', 'config[' + name + ']');
    
                // Create the button element
                var button = document.createElement('span');
                button.classList.add('btn', 'btn-primary', 'ml-2');
                button.textContent = 'Delete';
                button.setAttribute('onclick', 'deleteField("' + name + '")');
    
                // Append elements
                div.appendChild(input);
                div.appendChild(button);
    
                // Append the label and div to the container div
                fieldContainer.appendChild(label);
                fieldContainer.appendChild(div);
    
                // Append the container div to the main container
                container.appendChild(fieldContainer);
            }
        });
    }
    
    function deleteField(id){
        const element = document.getElementById(id);
        element.remove();
    }
    
    function toCamelCase(str) {
        str = str.replace(/[^a-zA-Z0-9]/g, ' ');
        var words = str.split(' ');
        
        // Capitalize the first letter of each word except the first word
        for (var i = 1; i < words.length; i++) {
            words[i] = words[i].charAt(0).toUpperCase() + words[i].slice(1);
        }
    
        return words.join('');
    }
</script>
