{config_load file=$language_path section="general"}
{config_load file=$language_path section="products"}
{config_load file=$language_path section="orders"}
<style>
.remove{
    cursor:pointer;
    color: red;
}
form.add_pallet_form textarea{
    padding: 10px;
}
#add_position_source{
    display: none;
}
#add_pallet{
    display: none;
    width: 350px;
}
button.add_pallet{
    margin-top: 20px;
}
#edit_notes{
    display: none;
}
.pallet_nr{
    font-weight: bold;
}
.formgrid {
    display: grid;
    grid-template-columns: 200px 1fr; /* linke Spalte fix, rechte flexibel */
    gap: 5px 10px; /* vertikal / horizontaler Abstand */
    align-items: start;
    width: 100%;
}

.formgrid label {
    padding-top: 6px;
}

.formgrid input,
.formgrid textarea {
    width: 100%;
    box-sizing: border-box;
}

.order_pallet{
    display: block;
}
.order_pallet_datarow{
    display: flex;
    width: 100%;
    border: 1px solid black;
    flex-direction: row;
}
.order_pallet .order_pallet_size{
    display: flex;
    flex: 1;
    flex-direction: row;
    justify-content: space-between;
    padding: 10px;
}
.order_pallet .order_pallet_size .length::before{
    content: '{#depth#}: ';
}
.order_pallet .order_pallet_size .width::before{
    content: '{#width#}: ';
}
.order_pallet .order_pallet_size .height::before{
    content: '{#height#}: ';
}
.order_pallet .order_pallet_size .weight_total::before{
    content: '{#weight#}: ';
}
.order_pallet .notes{
    font-style: italic;
    color: #666;
    margin-top: 5px;
    margin-bottom: 20px;
}
.order_pallet .quantity{
    font-weight: bold;
    font-size: 1.2em;
    text-align: center;
    padding: 10px;
    width: 60px;
    background-color: black;
    color: white;
}
table.order_pallets{
    margin-top: 20px;
}
table.order_pallets tbody tr td:not(.positions):not(.action) {
    text-decoration: underline;
    cursor: pointer;
}
</style>
<script>
    var BASEURL = '{$BASEURL}';
    var text_comment = '{#comment#}';
    var text_add_position = '{#add_order_pallets_position#}';
    var text_quantity = '{#quantity#}'
    var text_length = '{#depth#}';
    var text_width = '{#width#}';
    var text_height = '{#height#}';
    var text_weight = '{#weight#}';
    var text_edit = '{#item_edit#}';
    var really_update_pallet_size = '{#really_update_pallet_size#}'
    var really_delete = '{#item_really_delete#}';
    function add_pallet_position(id){
        $('form[name="add_position_source_form"] input[name="opsID"]').val(id);
        $('#add_position_source').dialog({
            modal: true,
            width: 'auto',
            height: 'auto',
            title: text_add_position
        })
    }
    function add_pallet_show(){
        $('#add_pallet').dialog({
            modal: true,
            width: 'auto',
            height: 'auto',
            title: text_add_position
        });
    }

    function delete_pallet(id){
        if(confirm(really_delete)){
            window.location.href = BASEURL+'&delete='+id;
        }
    }
    function edit_pallet(id,field){
        switch(field){
            case 'notes':
                var def = $('table.order_pallets tbody tr#'+id+' td.notes').text();
                $('#edit_notes').dialog({
                    width: 'auto',
                    height: 'auto',
                    modal: true,
                    title: text_edit,
                    open: function(){
                        $('#edit_notes button.update_notes_button').on('click',function(){
                            window.location.href = BASEURL+'&update_field='+field+'&value='+encodeURIComponent($('#edit_notes textarea').val())+'&opsID='+id;
                        });
                    }
                });
                $('#edit_notes textarea').text(def);
                break;
            case 'quantity':
                var def = parseInt($('table.order_pallets tbody tr#'+id+' td.quantity').text());
                var val = prompt(text_quantity,def);
                if(val.length > 0){
                    window.location.href = BASEURL+'&update_field='+field+'&value='+encodeURIComponent(val)+'&opsID='+id;
                }
                break;
            case 'weight_total':
                var _wght = $('table.order_pallets tbody tr#'+id+' td.weight_total').text();
                _wght = _wght.replace(',','.');
                var def = parseFloat(_wght);
                var val = prompt(text_weight,def);
                if(val === null){
                    return;
                }
                window.location.href = BASEURL+'&update_field='+field+'&value='+encodeURIComponent(val)+'&opsID='+id;
                break;
            case 'size':
                var def_length = $('table.order_pallets tbody tr#'+id+' td.size .length').text();
                var def_width = $('table.order_pallets tbody tr#'+id+' td.size .width').text();
                var def_height = $('table.order_pallets tbody tr#'+id+' td.size .height').text();
                var val_length = prompt(text_length+' (Step 1/3)',def_length);
                if(val_length === null){
                    return;
                }
                var val_width = prompt(text_width+' (Step 2/3)',def_width);
                if(val_width === null){
                    return;
                }
                var val_height = prompt(text_height+' (Step 3/3)',def_height);
                if(val_height === null){
                    return;
                }
                var new_size_str = def_length + ' x ' + def_width + ' x '+def_height + 'cm';
                if(confirm(really_update_pallet_size+new_size_str)){
                    window.location.href = BASEURL+'&update_field='+field+'&value='+encodeURIComponent(val_length+'-'+val_width+'-'+val_height)+'&opsID='+id;
                }
                break;
        }
        
        var weight_total = parseFloat($('table.order_pallets tbody tr#'+id+' td.weight_total').text());
        var notes = $('table.order_pallets tbody tr#'+id+' td.notes').text();
        var clone = $('#add_pallet').clone();
    }
    function remove_opiid(id){
        if(confirm(really_delete)){
            window.location.href = BASEURL+'&delete_opiid='+id;
        }
    }
    $(function(){
        var opids = {};
        $('table.order_pallets tbody tr td.positions .opp').each(function(){
            var opiid = $(this).data('opiid');
            var opid = $(this).data('opid');
            var qty = $(this).data('qty');
            opids[opid] =  (opids[opid] || 0) + qty;
        });
        for(opid in opids){
            var inorder = parseInt($('table#orders_products tbody tr#'+opid+' td.qty').data('inorder'));
            var qty = parseInt(opids[opid]);
            // ARTIKELUEBERSICHT AKTUALISIEREN
            if(qty == inorder){
                $('table#orders_products tbody tr#'+opid+' td.qty').html(qty+'/'+inorder+' <span style="color:green; font-weight:bold;">✓</span>');
            }else{
                $('table#orders_products tbody tr#'+opid+' td.qty').html(qty+'/'+inorder);
            }

            // ARTIKELAUSWAHL AKTUALISIEREN
            $('#add_position select[name="opID['+opid+']"] option').each(function(){
                let rest = inorder-qty;
                if($(this).val() > rest){
                    $(this).remove();
                }
                if(rest == 0){
                    $('.op[data-opid="'+opid+'"]').remove();
                }
            });
        }
        
    });
</script>
{yes_admin_page_menu main_title=$HEADING_TITLE buttons=$PAGE_HEADING_MENU_BUTTONS additional_title=$ADDITIONAL_HEADING_TITLE}
<div class="main">
<p><b>{$ORDER_TITLE} {#products#}</b></p>
<table id="orders_products" class="yesListTable_minimal">
    <thead>
        <tr>
            <th>Pos.</th>
            <th>{#quantity#}</th>
            <th>pID</th>
            <th>Name</th>
            <th>{#weight#}</th>
        </tr>
    </thead>
    <tbody>
    {foreach from=$YES_ORDERS_PRODUCTS.POSITIONS item=op}
        {if $op.PRODUCTS_ID > 0}
        <tr id="{$op.ORDERS_PRODUCTS_ID}">
            <td class="pos">{$op.POSITION}</td>
            <td class="qty" data-inorder="{$op.QUANTITY}">{$op.QUANTITY}</td>
            <td class="pid"><a title="Info pID {$op.PRODUCTS_ID}" rel="products.php?action=ajax_view&pID={$op.PRODUCTS_ID}" class="yes_dynamic_tooltip products_name_info"><u>{$op.PRODUCTS_ID}</u></a></td>
            <td class="name">{$op.TITLE}{if $op.PRODUCTS_MODEL != ''}<br /><i>{#products_model#}: {$op.PRODUCTS_MODEL}</i>{/if}</td>
            <td class="weight">
                Total: {$op.TOTAL_WEIGHT}
                {if $op.OWN_WEIGHT_TOTAL > 0}
                <br /><i>{#own_weight#}: {$op.OWN_WEIGHT_TOTAL}</i>
                {/if}
            </td>
        </tr>
        {/if}
    {/foreach}
    </tbody>
</table>


{$TABLE}
<div id="add_pallet">
    <form id="add_pallet_form" method="POST" action="{$BASEURL}">
        <fieldset>
            <legend>{#item_add#}</legend>
            <div class="formgrid">
                <label for="quantity">{#quantity#}</label>
                <input min="1" type="number" name="quantity" id="quantity" value="1" />
                <label for="length">{#depth#} <i>cm</i></label>
                <input type="number" step="0.01" name="length" id="length" value="0" />
                <label for="width">{#width#} <i>cm</i></label>
                <input type="number" step="0.01" name="width" id="width" value="0" />
                <label for="height">{#height#} <i>cm</i></label>
                <input type="number" step="0.01" name="height" id="height" value="0" />
                <label for="weight">{#weight#} <i>kg</i></label>
                <input type="number" step="0.01" name="weight" id="weight" value="0" />
            </div>
            <br />
            <label for="notes">{#comment#}<br /></label>
            <textarea name="notes" id="notes" cols="45" rows="2" style="width:90%;"></textarea>
            <br />
            <button type="submit" class="ui-button ui-corner-all ui-state-default">{#save#}</button>
        </fieldset>
    
    </form>
</div>

<div id="add_position_source">
    <form action="{$BASEURL}" method="post" name="add_position_source_form">
        <input type="hidden" name="opsID" value="" />
    <p><b>{#add_order_pallets_position#}</b></p>
    <div id="add_position" class="main">
    {foreach from=$ORDERS_PRODUCTS item=op}
        <div class="op" data-opid="{$op.opID}">
            {$op.input}
            x pID {$op.id} {$op.name}<br />
        </div>
    {/foreach}
    <br />
    <button type="submit" class="ui-button ui-corner-all ui-state-default">{#save#}</button>
    </div>
    </form>
</div>

<div id="edit_notes">
    {#comments#}:<br />
    <textarea name="value" cols="45" rows="2"></textarea>
    <br />
    <button type="button" class="update_notes_button ui-button ui-corner-all ui-state-default">{#update#}</button>
</div>
</div>