{config_load file=$language_path section="general"}
{config_load file=$language_path section="orders"}
<style>
#customers_status > div,#split{
    display: flex;
}
#customers_status > div > div:nth-child(1){
    width: 450px;
    font-weight: bold;
}
.original_header, .copy_header{
    font-size: 1.4em;
    font-weight: bold;
}
fieldset {
    border: 1px solid #000;
    margin: 15px 0 15px 0;
    font-size: 1.2em;
}
fieldset label{
    font-weight: bold;
}
fieldset input{
    height: 20px;
    line-height: 20px;
    font-size: 18px;
    width: 120px;
}
#copy_order_delivery_address, #source_order_delivery_address, #source_order_totals, #copy_order_totals{
    width: 550px;
}
#order_recreate_screen{
    width: 1300px;
}
table.recreate_products{
    margin-top: 12px;
}
</style>
<script>
    var DEFAULT_CURRENCY = '{$DEFAULT_CURRENCY}';
    var TEXT_CANCEL = '{#cancel#}';
    var TEXT_SEARCH = '{#search#}';
    var REALLY_RECREATE_ORDER = '{$REALLY_RECREATE_ORDER}';
    function copy_ot( otid ){
        let copy = $('div[data-otid="'+otid+'"]').clone();
        $('div[data-otid="'+otid+'"] button').remove();
        let otclass = $('div[data-otid="'+otid+'"]').attr('data-otclass');
        copy.removeAttr('data-otclass').removeData('otclass');
        copy.attr('data-cotclass',otclass);


        var price_full_str = copy.find('div:nth-child(2)').text();
        let price_str = price_full_str.replace(' '+DEFAULT_CURRENCY,'');
        price_str = price_str.replace(',','.');

        var price = parseFloat(price_str).toFixed(2);
        var otname = copy.find('div:nth-child(1)').text();
        copy.find('button').remove();
        copy.on('click',function(){
            let _otname = $(this).find('div:nth-child(1)').text();
            let _price_full_str = $(this).find('div:nth-child(2)').text();
            let _price_str = _price_full_str.replace(' '+DEFAULT_CURRENCY,'');
            _price_str = _price_str.replace(',','.');
            let _price = parseFloat(_price_str ).toFixed(2);
            $('#copy_ot_edit input[name="name"]').val(_otname);
            $('#copy_ot_edit input[name="price"]').val(_price);
            $('#copy_ot_edit input[name="otid"]').val(otid);
            $('#copy_ot_edit').dialog('open');
        }).css('cursor','pointer').css('text-decoration','underline');

        let input_otname = 'ot_name['+otid+']';
        let input_otvalue = 'ot_value['+otid+']';
        let otvalue = price;
        copy.append('<input type="hidden" name="'+input_otname+'" value="'+encodeURIComponent(otname)+'" />');
        copy.append('<input type="hidden" name="'+input_otvalue+'" value="'+otvalue+'" />');
        $('#copy_order_totals div[data-cotclass="ot_total"]').before(copy);
        recalc_copy_totals();
    }
    function recalc_copy_totals(){
        let products_total = 0;
        let total = 0;
        $('table.recreate_products tbody tr td.price').each(function(){
            products_total += parseInt($(this).attr('data-quantity')) * parseFloat($(this).children('input').val());
        });
        total += products_total;
        products_total_str = products_total.toFixed(2).replace('.',',')+' '+DEFAULT_CURRENCY;
        let is_subtotal_no_tax = ($('#copy_order_totals div[data-cotclass="ot_subtotal_no_tax"]  div:nth-child(2)').length)?true:false;
        if(is_subtotal_no_tax === true){
            $('#copy_order_totals div[data-cotclass="ot_subtotal_no_tax"]  div:nth-child(2)').text(products_total_str);
        }else{
            $('#copy_order_totals div[data-cotclass="ot_subtotal"]  div:nth-child(2)').text(products_total_str);
        }

        // HINZUGEFUEGTE ORDER TOTALS
        $('#copy_order_totals div[data-cotclass]').each(function(){
            switch($(this).attr('data-cotclass')){
                case 'ot_total':
                case 'ot_subtotal':
                case 'ot_subtotal_no_tax':
                    break;
                default:
                    total += parseFloat($(this).attr('data-otvalue'));
                    break;
            }
        });
        total_str = total.toFixed(2).replace('.',',')+' '+DEFAULT_CURRENCY;

        $('#copy_order_totals div[data-cotclass="ot_total"]  div:nth-child(2)').text(total_str);
        $('#copy_order_totals').effect("puff", 'slow',function(){
            $(this).toggle()
        });
    }
    $(function(){
        var csID = $('#source_order_customers_status').attr('data-csid');
        $('#source_order_customers_status').load('customers_status.php?action=short_view&csID='+csID);
        var copy_csID = $('#copy_order_customers_status').attr('data-csid');
        $('#copy_order_customers_status').load('customers_status.php?action=short_view&csID='+copy_csID);
        $('#source_order_totals > .ui-widget-content > div').each(function(){
            switch($(this).attr('data-otclass')){
                case 'ot_subtotal':
                case 'ot_subtotal_no_tax':
                case 'ot_total':
                case 'ot_tax':
                    break;
                default:
                    var otid = $(this).attr('data-otid');
                    $(this).children('div:nth-child(2)').append('<button style="margin: 1px;" class="ui-state-highlight" type="button" onclick="copy_ot('+otid+')">+</button>');
                    break;
            }
        });
        $('table.recreate_products tbody tr td input').each(function(){
            $(this).on('change',function(){
                recalc_copy_totals();
            });
        });
        $("#copy_ot_edit").dialog({
            autoOpen: false,
            modal: true,
            buttons: {
                "OK": function() {
                    // Werte auslesen
                    let name = $('#copy_ot_edit input[name="name"]').val();
                    let price = $('#copy_ot_edit input[name="price"]').val();
                    let price_str = price.replace('.',',')+' '+DEFAULT_CURRENCY;
                    let otid = $('#copy_ot_edit input[name="otid"]').val();
                    let input_otname = 'ot_name['+otid+']';
                    if($('#copy_order_totals input[name="'+input_otname+'"]').length){
                        $('#copy_order_totals input[name="'+input_otname+'"]').val(encodeURIComponent(name));
                    }else{
                        $('#copy_order_totals').append('<input type="hidden" name="'+input_otname+'" value="'+encodeURIComponent(name)+'" />');
                    }
                    let input_otvalue = 'ot_value['+otid+']';
                    if($('#copy_order_totals input[name="'+input_otvalue+'"]').length){
                        $('#copy_order_totals input[name="'+input_otvalue+'"]').val(price);
                    }else{
                        $('#copy_order_totals').append('<input type="hidden" name="'+input_otvalue+'" value="'+price+'" />');
                    }
                    $('#copy_order_totals div[data-otid="'+otid+'"] div:nth-child(1)').text(name);
                    $('#copy_order_totals div[data-otid="'+otid+'"] div:nth-child(2)').text(price_str);
                    $('#copy_order_totals div[data-otid="'+otid+'"]').attr('data-otvalue',price);
                    recalc_copy_totals();
                    $(this).dialog("close");
                },
                [TEXT_CANCEL]: function() {
                    $(this).dialog("close");
                }
            }
        });
        $('button#customer_search').on('click',function(){
            $('#modal_window').dialog({
                modal: true,
                title: TEXT_SEARCH,
                width: 'auto',
                height: 'auto',
            }).load('start.php?action=header_quicksearch&qm=customers_inline_search',function(){
                $('#cname_suggest_field').focus();
            });
        });
        $('form[name="recreate_order_form"]').on('submit',function(){
            if(confirm(REALLY_RECREATE_ORDER)){
                return true;
            }
            return false;
        });
    });
    function customer_inline_search_on_select(customers_id){
        $('#order_recreate_screen input#customers_id').val(customers_id);
        $('#order_recreate_screen form').submit();
        showPreloader();
        $('#modal_window').dialog('destroy');
    }
</script>
{yes_admin_page_menu main_title=$HEADING_TITLE buttons=$PAGE_HEADING_MENU_BUTTONS additional_title=$ADDITIONAL_TITLE right_content=$RIGHT_CONTENT}
<div id="order_recreate_screen">
    {$FORM}
    <fieldset id="custsearch">
        <legend>{$RECREATE_CUSTOMERS_ID}</legend>
        <label for="customers_id">{#customers_id#}</label>
        {$INPUT_CUSTOMERS_ID}
        <button class="ui-button ui-corner-all ui-state-highlight" type="button" name="customer_search" id="customer_search"><b>{#search#}</b></button>
    </fieldset>
    </fieldset>
    </form>

    {$FORM_ORDER}

    <div id="split">
        <div style="width: 50%;">
            <div class="original_header">Original</div>
            <div id="source_order_customers_status" data-csid="{$SOURCE_ORDER_CUSTOMERS_STATUS_ID}"></div>
            <div id="source_order_delivery_address">
                <div class="ui-widget-header">{#shipping_address#}</div>
                <div class="ui-widget-content">
                    {$SOURCE_DELIVERY_ADDRESS}
                    <br />
                    &#128231; <i>{$SOURCE_EMAIL_ADDRESS}</i>
                </div>
            </div>
            <div id="source_order_totals">
                <div class="ui-widget-header">Order Totals</div>
                <div class="ui-widget-content">
                    {foreach from=$SOURCE_ORDER_TOTALS item=ot}
                    <div style="display: flex;" data-otvalue="{$ot.value}" data-otclass="{$ot.class}" data-otid="{$ot.otid}">
                        <div style="width:70%;">{$ot.title}</div>
                        <div style="text-align:right;width: 30%;">{$ot.text}</div>
                    </div>
                    {/foreach}
                </div>
            </div>
        </div>
        {if $COPY_ORDER_CUSTOMERS_STATUS_ID}
        <div style="width: 50%;">
            <div class="copy_header">Copy</div>
            <div id="copy_order_customers_status" data-csid="{$COPY_ORDER_CUSTOMERS_STATUS_ID}"></div>
            <div id="copy_order_delivery_address">
                <div class="ui-widget-header">
                    {#shipping_address#}
                </div>
                <div class="ui-widget-content">
                    {$COPY_DELIVERY_ADDRESS}
                    <br />
                    &#128231; <i>{$COPY_EMAIL_ADDRESS}</i>
                </div>
            </div>
            <div id="copy_order_totals">
                <div class="ui-widget-header">Order Totals</div>
                <div class="ui-widget-content">
                    {foreach from=$COPY_ORDER_TOTALS item=cot}
                    <div style="display: flex;" data-cotclass="{$cot.class}">
                        <div style="width:70%;">{$cot.title}</div>
                        <div style="text-align:right;width: 30%;">{$cot.text}</div>
                    </div>
                    {/foreach}
                </div>
            </div>
        </div>
        {/if}
    </div>

    {$COPY_PRODUCTS_TABLE}

    <button class="ui-button ui-corner-all ui-state-default" type="submit">{#save#}</button>
    </fieldset>
    </form>
</div>



<div id="copy_ot_edit" title="{#edit#}" style="display:none;">
  <form>
    <input type="hidden" name="otid" value="" />
    <label for="name">Name:</label><br>
    <input type="text" id="name" name="name"><br><br>

    <label for="price">{#price#}:</label><br>
    <input type="number" id="price" name="price" step="0.01"><br><br>
  </form>
</div>