{config_load file=$language_path section="general"}
{config_load file=$language_path section="groups"}
{yes_admin_page_menu main_title=$HEADING_TITLE buttons=$PAGE_HEADING_MENU_BUTTONS}
<style>
    #edit_group_template{
        display: none;
        padding: 10px;
    }
    #edit_group_template form input{
        margin-bottom: 10px;
    }
    a.edit, a.delete, a.characteristics{
        text-decoration: none;
        font-size: 18px;
    }
    tr.characteristics{
        background-color: lightblue;
    }
    table#groups_table{
        width: 1200px;
    }
    #importfile_form_container{
        display: none;
    }
</style>
<script>
var allocated_group_products_json = jQuery.parseJSON('{$allocated_group_products_json}');
var icon_edit = '{icon type="edit"}';
var icon_delete = '{icon type="delete"}';
var icon_list = '{icon type="list" title=$TEXT_LINK_ADD_CHARACTERISTICS}';
var icon_download = '{icon type="download" title=$TEXT_DOWNLOAD_PRODUCTS}';
var TEXT_LINK_ADD_CHARACTERISTICS = '{$TEXT_LINK_ADD_CHARACTERISTICS}';
var BUTTON_NEW_GROUP = '{$BUTTON_NEW_GROUP}';
var TEXT_EDIT = '{#edit#}';
var TEXT_DELETE = '{#delete#}';
var JS_CONFIRM_REALLY_DELETE = '{$JS_CONFIRM_REALLY_DELETE}';
var TEXT_DOWNLOAD_PRODUCTS = '{$TEXT_DOWNLOAD_PRODUCTS}';
var TEXT_ALLOCATED_PRODUCTS = '{$TEXT_ALLOCATED_PRODUCTS}';
function edit(groups_id){
    $('#edit_group_template form input').each(function(){
        switch($(this).attr('type')){
            case 'hidden':
                break;
            case 'text':
                $(this).val( $('table#groups_table tbody tr[data-groupsid="'+groups_id+'"] td.'+$(this).attr('name') ).text());
                break;
            case 'checkbox':
                let chk = ($('table#groups_table tbody tr[data-groupsid="'+groups_id+'"] td.'+$(this).attr('name') ).text() == 1) ? true : false;
                $(this).prop('checked', chk);
                break;
        }
    });
    $('#edit_group_template form input[name="groups_id"]').val( groups_id );
    $('#edit_group_template').dialog({
        title: TEXT_EDIT,
        width: 'auto',
        height: 'auto',
        modal: true,
    });
}
function add_submit(){
    var title = $('#edit_group_template form input[name="groups_title"').val();
    var visible = $('#edit_group_template form input[name="visible"').is(':checked');
    var ebay_visible = $('#edit_group_template form input[name="ebay_visible"').is(':checked')
    title = title.trim();
    if(title.length < 2){
        alert('Name mind. 2 Zeichen.');
        return false;
    }
    let data = $('#edit_group_template form').serialize();
    let groups_id = $('#edit_group_template form input[name="groups_id"]').val();
    if(groups_id != ''){
        data += '&action=update';
    }else{
        data += '&action=add';
    }
    $.ajax({
        url: 'groups.php',
        data: data,
        dataType: 'json',
        success: function(json){
            if(json.MSG != ''){
                alert(json.MSG);
                return false;
            }
            if(groups_id != ''){
                $('table#groups_table tbody tr[data-groupsid="'+groups_id+'"] td').each(function(){
                    var current_td = $(this);
                    var current_class = current_td.attr('class');
                    var val = '';
                    $('#edit_group_template form input').each(function(){
                        if($(this).attr('name') == current_class){
                            switch($(this).attr('type')){
                                case 'hidden':
                                    break;
                                case 'text':
                                    val = $(this).val();
                                    break;
                                case 'checkbox':
                                    val = ($(this).prop('checked'))?1:0;
                                    break;
                            }
                            current_td.text( val );
                        }
                    });
                });
            }else{
                groups_id = json.GROUPS_ID;
                $('#groups_table tbody').append(
                    '<tr data-groupsid="'+groups_id+'">'
                    +'<td class="groups_id">'+groups_id+'</td>'
                    +'<td class="groups_title">'+title+'</td>'
                    +'<td>gerade eben</td>'
                    +'<td>-</td>'
                    +'<td class="visible">'+((visible === true)?1:0)+'</td>'
                    +'<td class="ebay_visible">'+((ebay_visible===true)?1:0)+'</td>'
                    +'<td data-action="'+groups_id+'"></td>'
                    +'</tr>'
                );
            }
            $('#edit_group_template').dialog('destroy');
            update_table_actions()
        },
        error:function(xhr){
            alert('Cant add group');
        }
    });
    return false;
}
function add(){
    $('#edit_group_template form input[name="groups_id"]').val( '' );
    $('#edit_group_template form input[name="groups_title"]').val( '' );
    $('#edit_group_template').dialog({
        title: BUTTON_NEW_GROUP,
        width: 'auto',
        height: 'auto',
        modal: true,
    });
}   
function remove( groups_id ){
    if(confirm(JS_CONFIRM_REALLY_DELETE)){
        window.location.href='groups.php?action=delete&groups_id='+groups_id;
    }
}
function characteristics_close(){
    $('table#groups_table tbody tr.characteristics').remove();
    $('table#groups_table tbody tr').each(function(){
        $(this).removeClass('ui-state-default');
    });
}
function characteristics( groups_id ){
    characteristics_close();
    $('table#groups_table tbody tr[data-groupsid='+groups_id+']').after(
            '<tr class="characteristics"><td colspan="7"></td></tr>'
    ).addClass('ui-state-default');
    $('tr.characteristics td').load('groups.php?action=characteristics&groups_id='+groups_id);
}
function update_table_actions(){
    $('table#groups_table td[data-action]').each(function(){
        $(this).html('');
        var groups_id = $(this).data('action');
        var number_of_products = 0;
        $(allocated_group_products_json).each(function(index,element){
            if(element.id == groups_id){
                number_of_products += element.size;
            }
        });
        var icon_list2 = '{icon type="list" title=$TEXT_ALLOCATED_PRODUCTS}';
        if(number_of_products > 0){
            icon_list2 = icon_list2.replace('</span></button>','</span><span style="font-size: 0.7em;">'+(""+number_of_products)+'</span></button>');
            icon_list2 = icon_list2.replace('ui-state-default','ui-state-highlight');
        }
        $(this).append(
                '<a href="javascript: characteristics('+groups_id+')" class="characteristics" title="'+TEXT_LINK_ADD_CHARACTERISTICS+'">'+icon_list+'</a>'
                +'&nbsp;&nbsp;<a class="edit" href="javascript:edit('+groups_id+')" title="'+TEXT_EDIT+'">'+icon_edit+'</a>'
                +'&nbsp;&nbsp;<a class="list_products" href="categories.php?cPath=0&groups_id='+groups_id+'" title="'+TEXT_ALLOCATED_PRODUCTS+' ('+number_of_products+')">'+icon_list2+'</a>'
                +'&nbsp;&nbsp;<a class="download" href="javascript:download_products('+groups_id+')" title="'+TEXT_DOWNLOAD_PRODUCTS+'">'+icon_download+'</a>'
                +'&nbsp;&nbsp;<a class="delete" href="javascript:remove('+groups_id+')" title="'+TEXT_DELETE+'">'+icon_delete+'</a>'
        );
    });
}

function download_products( groups_id ){
    window.location.href='groups.php?action=export_products&groups_id='+groups_id;
}
$(function(){
    $('button.edit_submit').on('click',function(){
        add_submit();
    });
    $('#upload-button').on('click',function(){
        if($('form#importfile_form input[name="import_file"]').val().length < 1){
           return false;
        }
        $.ajax({
            // Your server script to process the upload
            url: 'groups.php?action=import',
            type: 'POST',
            dataType: 'json',

            // Form data
            data: new FormData($('form#importfile_form')[0]),

            // Tell jQuery not to process data or worry about content-type
            // You *must* include these options!
            cache: false,
            contentType: false,
            processData: false,

            // Custom XMLHttpRequest
            xhr: function() {
                var myXhr = $.ajaxSettings.xhr();
                return myXhr;
            },
            success: function(json){
                if(json.ERROR){
                    alert(json.ERROR);
                    return false;
                }else{
                    if(json.MSG != ''){
                        alert(json.MSG);
                    }
                    $('#importfile_form_container').dialog('destroy');
                    return true;
                }
            },
            error: function(XMLHttpRequest, textStatus, errorThrown){
                alert(XMLHttpRequest.status+"\r\n"+XMLHttpRequest.responseText+': '+errorThrown);
            }
        });
    });
    update_table_actions();
});
function import_file(){
    $('#importfile_form_container').dialog({
        modal: true,
        width: 'auto',
        height: 'auto',
        title: 'Import'
    });
}
</script>
<table class="yesListTable_minimal" id="groups_table">
    <thead>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>{#date_created#}</th>
            <th>{#date_last_modified#}</th>
            <th>{$TABLE_HEADING_VISIBLE}</th>
            <th>eBay {$TABLE_HEADING_VISIBLE}</th>
            <th>&nbsp;</th>
        </tr>
    </thead>
    <tbody>
        {foreach from=$groups->groups item=g}
        <tr data-groupsid="{$g.groups_id}">
            <td class="groups_id">{$g.groups_id}</td>
            <td class="groups_title">{$g.groups_title}</td>
            <td>{yes_date_short date=$g.groups_created}</td>
            <td>{yes_date_short date=$g.groups_last_changed}</td>
            <td class="visible">{$g.visible}</td>
            <td class="ebay_visible">{$g.ebay_visible}</td>
            <td data-action="{$g.groups_id}"></td>
        </tr>
        {/foreach}
    </tbody>
</table>

<div id="edit_group_template">
    <form action="?action=add" method="post" onsubmit="return false">
        <input type="hidden" name="groups_id" value="" />
        <fieldset>
            <label for="groups_title">Name</label>
            <input type="text" name="groups_title" value="" id="groups_title" />
            <br />
            <label for="visible">{$TABLE_HEADING_VISIBLE}</label>
            <input type="checkbox" name="visible" value="1" id="visible" />
            <br />
            <label for="ebay_visible">eBay {$TABLE_HEADING_VISIBLE}</label>
            <input type="checkbox" name="ebay_visible" value="1" id="ebay_visible" />
            <br />
            <button class="edit_submit" type="button" class="ui-button ui-corner-all ui-state-default" style="padding: 4px;">{#save#}</button>
        </fieldset>
    </form>
</div>

<div id="importfile_form_container">
    <p>{$TEXT_IMPORT_FILE_INTRO}</p>
    <form id="importfile_form" enctype="multipart/form-data" method="post">
        <input type="file" class="ui-button ui-corner-all ui-state-default" name="import_file"/>
        <br />
        <input type="button" id="upload-button"  class="ui-button ui-corner-all ui-state-highlight" value="Upload" />
    </form>
</div>