{extends file="get_usermod:layouts/main/layout.html"}

{block name="content"}
{load_language_text section="{$content.translate_section}"}
{load_language_text section="module_center_module" name="mcm"}

<div class="breakpoint-small">
    <form id="payrexx-settings-form" action="{$content.action_save}" method="POST" class="form-configuration">
        <input type="hidden" name="pageToken" value="{$content.pageToken}">
        <div class="form-horizontal">
            <fieldset>
                <legend>{$txt.basic_configuration}</legend>
                <div class="form-group">
                    <label for="platform-select" class="col-sm-4 control-label">{$txt.platform}*</label>
                    <div class="col-sm-7">
                        <select id="platform-select" class="form-control" name="configuration[PLATFORM]">
                            {foreach from=$content.platforms item=platform}
                            <option value="{$platform}"{if $content.configuration['PLATFORM'] === $platform} selected{/if}>{$platform}</option>
                            {/foreach}
                        </select>
                    </div>
                    <div class="col-sm-1">
                        <span class="tooltip-icon" data-gx-widget="tooltip_icon" data-tooltip_icon-type="info">{$txt.platform_tooltip}</span>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-4 control-label">{$txt.connect_platform_title}</label>
                    <div class="col-sm-7">
                        <div class="row">
                            <div class="col-sm-12">
                                <button type="button" id="connect-platform-button" class="btn btn-primary">
                                    {$txt.connect_platform_button}
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-1">
                        <span class="tooltip-icon" data-gx-widget="tooltip_icon" data-tooltip_icon-type="info">{$txt.connect_platform_tooltip}</span>
                    </div>
                </div>
                <div class="form-group">
                    <label for="instance_name" class="col-sm-4 control-label">{$txt.instance_name}*</label>
                    <div class="col-sm-7">
                        <input type="text" class="form-control" name="configuration[INSTANCE_NAME]"
                            id="instance_name" value="{$content.configuration['INSTANCE_NAME']}" required>
                            <span>{$txt.instance_name_desc}</span>
                    </div>
                    <div class="col-sm-1">
                        <span class="tooltip-icon" data-gx-widget="tooltip_icon" data-tooltip_icon-type="info">{$txt.instance_name_tooltip}</span>
                    </div>
                </div>
                <div class="form-group">
                    <label for="api_key" class="col-sm-4 control-label">{$txt.api_key}*</label>
                    <div class="col-sm-7">
                        <input type="text" class="form-control" name="configuration[API_KEY]"
                            id="api_key" value="{$content.configuration['API_KEY']}" required>
                    </div>
                    <div class="col-sm-1">
                        <span class="tooltip-icon" data-gx-widget="tooltip_icon" data-tooltip_icon-type="info">{$txt.api_key_tooltip}</span>
                    </div>
                </div>
                <div class="form-group">
                    <label for="look_and_feel_id" class="col-sm-4 control-label">{$txt.look_and_feel_id}</label>
                    <div class="col-sm-7">
                        <input type="text" class="form-control" name="configuration[LOOK_AND_FEEL_ID]"
                            id="look_and_feel_id" value="{$content.configuration['LOOK_AND_FEEL_ID']}">
                    </div>
                    <div class="col-sm-1">
                        <span class="tooltip-icon" data-gx-widget="tooltip_icon" data-tooltip_icon-type="info">{$txt.look_and_feel_id_tooltip}</span>
                    </div>
                </div>
                <div class="form-group">
                    <label for="payrexx_webhook_url" class="col-sm-4 control-label">{$txt.webhook_url}</label>
                    <div class="col-sm-7">
                        <div class="input-group">
                            <input type="text" class="form-control" id="payrexx_webhook_url"
                                value="{$content.webhookUrl}" readonly onclick="this.select();">
                            <span class="input-group-btn">
                                <button type="button" id="payrexx-copy-webhook-url" class="btn btn-default"
                                    data-copied-label="{$txt.webhook_url_copied}">{$txt.webhook_url_copy}</button>
                            </span>
                        </div>
                        <span class="help-block">{$txt.webhook_url_desc}</span>
                    </div>
                    <div class="col-sm-1">
                        <span class="tooltip-icon" data-gx-widget="tooltip_icon" data-tooltip_icon-type="info">{$txt.webhook_url_tooltip}</span>
                    </div>
                </div>
            </fieldset>
        </div>
        <div class="form-horizontal">
            <fieldset>
                <legend>{$txt.order_status_selection}</legend>
                <div class="form-group">
                    <label for="order-select-waiting-status" class="col-sm-4 control-label">{$txt.payment_waiting}</label>
                    <div class="col-sm-7">
                        <select id="order-select-waiting-status" class="form-control" name="configuration[PAYMENT_WAITING_STATUS_ID]">
                            {foreach from=$content.orderStatus key=statusId item=statusName}
                            <option value="{$statusId}" {if $content.configuration['PAYMENT_WAITING_STATUS_ID'] == $statusId} selected {/if}>{$statusName}</option>
                            {/foreach}
                        </select>
                    </div>
                    <div class="col-sm-1">
                        <span class="tooltip-icon" data-gx-widget="tooltip_icon" data-tooltip_icon-type="info">{$txt.payment_waiting_tooltip}</span>
                    </div>
                </div>
                <div class="form-group">
                    <label for="order-select-payment-success" class="col-sm-4 control-label">{$txt.payment_success}</label>
                    <div class="col-sm-7">
                        <select id="order-select-payment-success" class="form-control" name="configuration[PAYMENT_SUCCESS_STATUS_ID]">
                            {foreach from=$content.orderStatus key=statusId item=statusName}
                            <option value="{$statusId}" {if $content.configuration['PAYMENT_SUCCESS_STATUS_ID'] == $statusId} selected {/if}>{$statusName}</option>
                            {/foreach}
                        </select>
                    </div>
                    <div class="col-sm-1">
                        <span class="tooltip-icon" data-gx-widget="tooltip_icon" data-tooltip_icon-type="info">{$txt.payment_success_tooltip}</span>
                    </div>
                </div>
                <div class="form-group">
                    <label for="order-select-payment-failed" class="col-sm-4 control-label">{$txt.payment_failed}</label>
                    <div class="col-sm-7">
                        <select id="order-select-payment-failed" class="form-control" name="configuration[PAYMENT_FAILED_STATUS_ID]">
                            {foreach from=$content.orderStatus key=statusId item=statusName}
                            <option value="{$statusId}" {if $content.configuration['PAYMENT_FAILED_STATUS_ID'] == $statusId} selected {/if}>{$statusName}</option>
                            {/foreach}
                        </select>
                    </div>
                    <div class="col-sm-1">
                        <span class="tooltip-icon" data-gx-widget="tooltip_icon" data-tooltip_icon-type="info">{$txt.payment_failed_tooltip}</span>
                    </div>
                </div>
                <div class="form-group">
                    <label for="order-select-payment-refunded" class="col-sm-4 control-label">{$txt.payment_refunded}</label>
                    <div class="col-sm-7">
                        <select id="order-select-payment-refunded" class="form-control" name="configuration[PAYMENT_REFUNDED_STATUS_ID]">
                            {foreach from=$content.orderStatus key=statusId item=statusName}
                            <option value="{$statusId}" {if $content.configuration['PAYMENT_REFUNDED_STATUS_ID'] == $statusId} selected {/if}>{$statusName}</option>
                            {/foreach}
                        </select>
                    </div>
                    <div class="col-sm-1">
                        <span class="tooltip-icon" data-gx-widget="tooltip_icon" data-tooltip_icon-type="info">{$txt.payment_refunded_tooltip}</span>
                    </div>
                </div>
                <div class="form-group">
                    <label for="order-select-payment-partially-refunded" class="col-sm-4 control-label">{$txt.payment_partially_refunded}</label>
                    <div class="col-sm-7">
                        <select id="order-select-payment-partially-refunded" class="form-control" name="configuration[PAYMENT_PARTIALLY_REFUNDED_STATUS_ID]">
                            {foreach from=$content.orderStatus key=statusId item=statusName}
                            <option value="{$statusId}" {if $content.configuration['PAYMENT_PARTIALLY_REFUNDED_STATUS_ID'] == $statusId} selected {/if}>{$statusName}</option>
                            {/foreach}
                        </select>
                    </div>
                    <div class="col-sm-1">
                        <span class="tooltip-icon" data-gx-widget="tooltip_icon" data-tooltip_icon-type="info">{$txt.payment_partially_refunded_tooltip}</span>
                    </div>
                </div>
            </fieldset>
        </div>
        <div class="row">
            <div class="col-sm-12">
                <button type="submit" class="btn btn-primary pull-right">{$txt.save_configuration}</button>
            </div>
        </div>
    </form>
    {if $content.moduleVersion}
    <div class="row">
        <div class="col-sm-12">
            <p class="text-muted"><small>{$txt.module_version}: {$content.moduleVersion}</small></p>
        </div>
    </div>
    {/if}
</div>
<script src="{$content.connectJs}"></script>
<script>
    (function () {
        var button = document.getElementById('payrexx-copy-webhook-url');
        var input = document.getElementById('payrexx_webhook_url');
        if (!button || !input) {
            return;
        }
        var defaultLabel = button.textContent;
        var copiedLabel = button.getAttribute('data-copied-label') || defaultLabel;

        button.addEventListener('click', function () {
            var value = input.value;

            function showCopied() {
                button.textContent = copiedLabel;
                window.setTimeout(function () {
                    button.textContent = defaultLabel;
                }, 2000);
            }

            if (navigator.clipboard && navigator.clipboard.writeText) {
                navigator.clipboard.writeText(value).then(showCopied, function () {
                    input.select();
                    document.execCommand('copy');
                    showCopied();
                });
            } else {
                input.select();
                document.execCommand('copy');
                showCopied();
            }
        });
    })();
</script>
{/block}