{config_load file=$language_path section="general"}
{config_load file=$language_path section="unzer"}

<style type="text/css">
    .hoover{
        text-decoration: line-through;
        cursor: pointer;
        color: red;
    }    
    #payment_info{
        padding: 4px;
        font-family: system, sans-serif, monospace;
    }
    #order_details_div{
        display: flex;
    }
    #order_details_div > div:nth-child(1){
        width: 50px;
    }
    #order_details_div > div:nth-child(2){
        width: 150px;
    }
    #order_details_div > div:nth-child(3){
        width: 150px;
        text-align: right;
        margin-right: 10px;
    }
</style>
<script>
var delete_event_confirm = '{#delete_event_confirm#}';
var text_delete = '{#delete#}';
var text_add_event = '{#add_event#}';
function unzer_webhook_add(){
    showPreloader();
    let val = $('form#add_webhook_form select[name="event"]').val();
    if(val == ''){
        return false;
    }
    $.ajax({
        url: 'unzer.php?action=add_webhook&event='+val,
        dataType: 'json',
        success: function( json ){
            if(json.MSG != ''){
                alert(json.MSG);
            }else{
                $('table#unzer_webhooks tbody').append(
                    '<tr><td id="id">'
                    +json.id+'</td><td>'
                    +json.event+'</td><td id="url">'
                    +json.url+'</td></tr>'
                );
                unzer_add_webhook_actions();
            }
            hidePreloader();
            $('#add_webhook').dialog('destroy');
        },
        error: function( xhr ){
            alert('Cant add unzer Webhook');
            hidePreloader();
        }
    });
}
function unzer_webhook_delete( id ){
    if(!confirm(delete_event_confirm)){
        return false;
    }
    showPreloader();
    $.ajax({
        url: 'unzer.php?action=delete_webhook&id='+id,
        dataType: 'json',
        success: function( json ){
            if(json.MSG != ''){
                alert(json.MSG);
            }else{
                $('table#unzer_webhooks tbody tr').each(function(){
                    let current_tr = $(this);
                    if(current_tr.children('td#id').text() == id){
                        current_tr.remove();
                    }
                });
            }
            hidePreloader();
        },
        error: function( xhr ){
            alert('Cant delete unzer Webhook');
            hidePreloader();
        }
    });
}
function unzer_add_webhook_actions(){
    $('table#unzer_webhooks tbody tr').each(function(){
        $(this).children('td#id').hover(  function() {
                $( this ).addClass( "hoover" );
        }, function() {
                $( this ).removeClass( "hoover" );
        }).attr('title',text_delete).on('click',function(){
            unzer_webhook_delete( $(this).text() );
        });
    });
}
function unzer_showPayment(paymentId){
        (async () => {
        const html = await getPaymentData(paymentId);
        $('#modal_window').dialog({
            title: 'Unzer Payment Status',
            modal: true,
        }).html(html);
        })();
}
{literal}
async function getPaymentData(paymentId) {
  try {
    showPreloader();

    // jqXHR ist thenable -> await funktioniert
    const json = await $.ajax({
      url: 'unzer.php',
      data: { action: 'status', paymentID: paymentId },
      dataType: 'json',
      method: 'GET'
    });

    if (json.MSG) {
      alert(json.MSG);
    }

    // HTML bauen
    const html =
      `<span style="font-size:1.3em;"><b>Status:</b> ` +
      `<span title="${json.state_info.description}">${json.state_info.title}</span></span><br>` +
      `<b>Total:</b> ${json.total} ${json.currency}<br>` +
      `<b>Charged:</b> ${json.charged} ${json.currency}<br>` +
      `<b>Canceled:</b> ${json.canceled} ${json.currency}<br>` +
      `<b>Remaining:</b> ${json.remaining} ${json.currency}<br>`;

    return html;

  } catch (err) {
    alert('Cant get Unzer Payment Status for Payment ID ' + paymentId);
    console.error(err);
    return '';
  } finally {
    hidePreloader();
  }
}
{/literal}

$(function(){
    $('a#add_event').on('click',function(){
        $('#add_webhook').dialog({
            title: text_add_event,
            width: 'auto',
            height: 'auto',
            modal: true
        });
    });
    $('input#save_new_webhook').on('click',function(){
        unzer_webhook_add();
    });
    unzer_add_webhook_actions();
    $('form#payment_status_form input#payment_status_button').on('click',function(){
        $('#payment_info').html('');
        let paymentID = $('form#payment_status_form input[name="paymentID"]').val();
        if(paymentID == ''){
            return false;
        }
        (async () => {
        const html = await getPaymentData(paymentID);
        $('#payment_info').html(html);
        })();
    });
    $('button#update_status_allocations').on('click',function(){
        $.ajax({
            url: 'unzer.php?action=update_status_allocation&'+$('table#unzer_states tbody td select').serialize(),
            dataType: 'json',
            success: function( json ){
                if(json.MSG != ''){
                    alert(json.MSG);
                }
            },
            error: function( xhr ){
                alert('Cant update status allocations');
            }
        });
    });
    $('table#unzer_transactions tbody tr td#id').each(function(){
        $(this).css('text-decoration','underline')
            .css('cursor','pointer')
            .on('click',function(){
                unzer_showPayment($(this).text());
            }).attr('title','Details');
    });
    $('table#unzer_transactions tbody tr td #order_details_div #order').each(function(){
        $(this).css('text-decoration','underline')
            .css('cursor','pointer')
            .on('click',function(){
                window.open('orders.php?action=edit&oID='+$(this).text());
            }).attr('title','Orders Edit');
    });
});
</script>    
{yes_admin_page_menu main_title=$HEADING_TITLE buttons=$PAGE_HEADING_MENU_BUTTONS additional_title=$ADDITIONAL_TITLE right_content=$RIGHT_CONTENT}
<div class="main">
    {if $CONFIG != ''}
        <p>Webhooks <a id="add_event" href="javascript:;" title="{#add#}">{icon type="add"}</a></p>
        <div id="add_webhook" style="display: none; margin-top: 15px;">
            <form id="add_webhook_form">
                <fieldset>
                    <label for="new_webhook">Event</label>
                    <select name="event" id="new_webhook">
                        <option value="">{#select#}</option>
                        <option value="all">All</option>
                    </select>
                    <input class="ui-button ui-corner-all ui-state-default" value="{#save#}" type="button" id="save_new_webhook"/>
                </fieldset>
            </form>
        </div>
        {$WEBHOOKS}

        <p>Status Zuweisung</p>
        {$UNZER_ORDERS_STATUS_ALLOCATIONS}
        <button style="padding: 4px;" type="button" id="update_status_allocations" class="ui-button ui-corner-all ui-state-default">{#text_unzer_payment_status_orders_status_allocation#} {#update#}</button>

    {else}<!-- end if $CONFIG != '' -->

    <form id="payment_status_form" onsubmit="return false;">
        <fieldset>
            <legend>Payment Status</legend>
            <label for="paymentID">Payment ID</label>
            <input type="text" value="" size="16" maxlength="16" name="paymentID" id="paymentID" />
            <input class="ui-button ui-corner-all ui-state-default" value="{#view#}" type="button" id="payment_status_button"/>
        </fieldset>
    </form>
    <div id="payment_info"></div>
    
    <p>Transactions</p>
    {$TRANSACTIONS}

    {/if}
</div>