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

<style>
    #edit_characteristic_set_container{
        display: none;
    }
    button#save_characteristic_set_button,button#characteristic_set_add_button{
        padding: 4px;
    }
</style>
<script>
    var icon_edit = '{icon type="edit"}';
    var icon_delete = '{icon type="delete"}';
    var JS_CONFIRM_REALLY_DELETE_SET = '{$JS_CONFIRM_REALLY_DELETE_SET}';
    var CHARACTERISTIC_ID = '{$CHARACTERISTIC_ID}';
    var TEXT_EDIT = '{#edit#}';
    var TEXT_DELETE = '{#delete#}';
    $(function(){
        $('#save_characteristic_set_button').on('click',function(){
            var okay = true;
            var update = ($('#edit_characteristic_set_container input[name="products_characteristic_set_id"]').val() != '') ? true : false;
            var params = [];
            var titles_update = [];
            $('#edit_characteristic_set_container input[name^="title["]').each(function(){
                let name_parts = $(this).attr('name').split('[');
                let lang_id = name_parts[1].replace(']','');
                let title = $(this).val().trim();
                if(title.length < 1){
                    alert('Titel muss mind. 1 Zeichen lang sein.');
                    okay = false;
                    return false;
                }
                params.push($(this).attr('name')+'='+$(this).val());
                titles_update.push('<td>'+title+'</td>');
            });
            params.push('sort_order='+$('#edit_characteristic_set_container input[name="sort_order"]').val());
            params.push('characteristic_id='+CHARACTERISTIC_ID);
            if(update){
                params.push('products_characteristic_set_id='+$('#edit_characteristic_set_container input[name="products_characteristic_set_id"]').val());
            }
            $.ajax({
                url: 'groups.php?action=add_characteristic_set&'+params.join('&'),
                dataType: 'json',
                success: function( json ){
                    if(json.MSG != ''){
                        alert(json.MSG);
                    }
                    if(update){
                        $('table#characteristic_sets_table tbody tr[data-characteristicsetid="'+json.characteristic_set_id+'"] td[data-inp="sort_order"]').text( $('#edit_characteristic_set_container input[name="sort_order"]').val() );
                        $('#edit_characteristic_set_container input[name^="title["]').each(function(){
                            let name_parts = $(this).attr('name').split('[');
                            let lang_id = name_parts[1].replace(']','');
                            let title = $(this).val();
                            $('table#characteristic_sets_table tbody tr[data-characteristicsetid="'+json.characteristic_set_id+'"] #title_'+lang_id).text(title);
                        });
                    }else{
                        $('table#characteristic_sets_table tbody').append(
                            '<tr data-characteristicsetid="'+json.characteristic_set_id+'">'+titles_update.join('')
                            +'<td>'+$('#edit_characteristic_set_container input[name="sort_order"]').val()+'</td><td class="action"></td>'
                            +'</tr>'
                        );
                        characteristic_set_actions();
                    }
                    $('#edit_characteristic_set_container').dialog('destroy');
                },
                error: function(xhr){
                    alert('Cant save characteristic set');
                }
            });
        });
        $('button#characteristic_set_add_button').on('click',function(){
            let dlg_title = $(this).text();
            $('#edit_characteristic_set_container input').each(function(){
                switch($(this).attr('type')){
                    case 'number':
                        $(this).val(0);
                        break;
                    case 'hidden':
                    case 'text':
                        $(this).val('');
                        break;
                }
            });
            $('#edit_characteristic_set_container').dialog({
                modal: true,
                width: 'auto',
                height: 'auto',
                title: dlg_title,
            });
        });
        characteristic_set_actions();
    });
    function characteristic_set_actions(){
        $('table#characteristic_sets_table tbody tr').each(function(){
            var characteristic_set_id = $(this).data('characteristicsetid');
            var actions = [];
            actions.push('<a href="javascript:edit_characteristic_set( '+characteristic_set_id+' )">'+icon_edit+'</a>');
            actions.push('<a href="javascript:delete_characteristic_set( '+characteristic_set_id+' )">'+icon_delete+'</a>');
            $(this).children('td.action').html(actions.join('&nbsp;'));
        });
    }
    function edit_characteristic_set( characteristic_set_id ){
            var sort_order = $('table#characteristic_sets_table tr[data-characteristicsetid="'+characteristic_set_id+'"] td[data-inp="sort_order"]').text();
            let dlg_title = $(this).text();
            $('#edit_characteristic_set_container input[name="sort_order"]').val(sort_order);
            $('#edit_characteristic_set_container input[name="products_characteristic_set_id"]').val(characteristic_set_id);
            $('table#characteristic_sets_table tbody tr[data-characteristicsetid="'+characteristic_set_id+'"] .title').each(function(){
                let name_params = $(this).attr('id').split('_');
                let lang_id = name_params[1];
                $('#edit_characteristic_set_container input[name="title['+lang_id+']"]').val( $(this).text());
            });
            
            $('#edit_characteristic_set_container').dialog({
                modal: true,
                width: 'auto',
                height: 'auto',
                title: dlg_title,
            });
    }
    function delete_characteristic_set( characteristic_set_id ){
        if(confirm(JS_CONFIRM_REALLY_DELETE_SET)){
            $.ajax({
               url: 'groups.php?action=delete_characteristic_set&characteristic_set_id=' + characteristic_set_id,
               dataType: 'json',
               success: function( json ){
                   if(json.MSG != ''){
                       alert(json.MSG);
                       return false;
                   }
                   $('table#characteristic_sets_table tbody tr[data-characteristicsetid="'+characteristic_set_id+'"]').remove();
                   $('#edit_characteristic_set_container').dialog('destroy');
               },
               error: function( xhr ){
                   alert('Cant delete characteristic set');
               }
            });
        }
    }
</script>
<div id="characteristic_set_container" class="main">
<table class="yesListTable_minimal" id="characteristic_sets_table">
    <thead>
        <tr>
            {foreach from=$LANGUAGES item=lang}
            <th>{$lang.name}</th>
            {/foreach}
            <th>{#sort_order#}</th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        {foreach from=$SETS item=set}
        <tr data-characteristicsetid="{$set->products_characteristic_set_id}">
                {foreach from=$LANGUAGES item=lang}
                    {foreach from=$set->description key=k item=d}
                        {if $lang.id == $d->language_id}
            <td>
                <div class="title" id="title_{$d->language_id}">{$d->title}</div>
            </td>
                        {/if}
                    {/foreach}
                {/foreach}
            <td data-inp="sort_order">{$set->sort_order}</td>
            <td class="action"></td>
        </tr>
        {/foreach}
    </tbody>
</table>

<button id="characteristic_set_add_button" class="ui-button ui-corner-all ui-state-default">{#add#}</button>

<div id="edit_characteristic_set_container">
    <input type="hidden" name="products_characteristic_set_id" value="" />
    <table border="0" class="edit_characteristic_set_table">
    {foreach from=$LANGUAGES item=lang}
        <tr>
            <td>[{$lang.name}] {$TEXT_EDIT_SET_TITLE}</td>
            <td><input type="text" name="title[{$lang.id}]" value="" /></td>
        </tr>
    {/foreach}    
        <tr>
            <td>{#sort_order#}</td>
            <td><input type="number" name="sort_order" value="0" /></td>
        </tr>
    </table>
    <button id="save_characteristic_set_button" class="ui-button ui-corner-all ui-state-default">{#save#}</button>
</div>
</div>