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

<style>
    button#button_add_characteristic, button#save_characteristic{
        padding: 4px;
    }
    #characteristic_container{
        margin-bottom: 40px;
    }
    .help{
        background-color:#f8da4e;
        color: black;
        padding: 5px;
    }
    #add_form_container{
        display: none;
    }
    table#add_char_table tr.odd{
        background-color:#f8da4e;
    }
    table#saved_characteristics_table{
        border: 1px solid #555;
        width: 100%;
    }
    table#saved_characteristics_table, table#saved_characteristics_table thead tr th{
        background-color: white;
    }
    .description{
        font-size: 0.9em;
        color: #777;
    }
</style>
<script>
    var icon_edit = '{icon type="edit"}';
    var icon_sets = '{icon type="list" title="Sets"}';
    var icon_delete = '{icon type="delete"}';
    var TEXT_TITLE = '{$TEXT_TITLE}';
    var TEXT_DELETE = '{#delete#}';
    var TEXT_EDIT = '{#edit#}';
    var JS_ERROR_TITLE_TO_SHORT = '{$JS_ERROR_TITLE_TO_SHORT}';
    var JS_CONFIRM_REALLY_DELETE_CHARACTERISTIC = '{$JS_CONFIRM_REALLY_DELETE_CHARACTERISTIC}';
    var TEXT_NO_SETS_0 = '{$TEXT_NO_SETS_0}';
    var TEXT_NO_SETS_1 = '{$TEXT_NO_SETS_1}';
    function save_characteristic(){
        let gcID = $('#add_form_container form input[name="products_characteristic_id"]').val();
        okay = true;
        if(gcID == ''){
            $('#add_form_container form input[name^="title["]').each(function(){
                    let val = $(this).val();
                    let trimmed = val.trim();
                    if(trimmed.length < 3){
                        alert(JS_ERROR_TITLE_TO_SHORT);
                        okay = false;
                        return false;
                    }
            });
        }
        if(okay){
            let data = $('#add_form_container form').serialize();
            $.ajax({
                        url: $('#add_form_container form').attr('action')+'&'+data,
                        dataType: 'json',
                        success: function( json ){
                            if(json.MSG != ''){
                                alert(json.MSG);
                                return false;
                            }
                            let no_sets = ($('#add_form_container form input[name="no_sets"]:checked').val()==0)?TEXT_NO_SETS_0:TEXT_NO_SETS_1;
                            let sort_order = $('#add_form_container form input[name="sort_order"]').val();
                            let visible = $('#add_form_container form input[name="visible"]').is(':checked') ? 1 : 0;
                            let ebay_visible = $('#add_form_container form input[name="ebay_visible"]').is(':checked') ? 1 : 0;
                            //let multiple = $('#add_form_container form input[name="multiple"]').is(':checked') ? 1 : 0;
                            let deny_filter = $('#add_form_container form input[name="deny_filter"]').is(':checked') ? 1 : 0;
                            let titledesc = '';
                            $('#add_form_container form input[name^="title["]').each(function(){    
                                let title = $(this).val();
                                let name_parts = $(this).attr('name').split('[');
                                let lang_id = parseInt(name_parts[1].replace(']',''));
                                let description = $('#add_form_container form input[name="description['+lang_id+']"]').val();;
                                titledesc += '<div class="title" id="title_'+lang_id+'">'+title+'</div><div class="description" id="description_'+lang_id+'">'+description+'</div>';
                            });
                            if( gcID == ''){
                                $('table#saved_characteristics_table tbody').append(
                                        '<tr data-characteristicid="'+json.products_characteristic_id+'">'
                                        +'<td data-inp="titledesc">'
                                        +titledesc
                                        +'</td>'
                                        +'<td data-inp="no_sets">'+no_sets+'</td>'
                                        +'<td data-inp="sort_order">'+sort_order+'</td>'
                                        +'<td data-inp="visible">'+visible+'</td>'
                                        +'<td data-inp="ebay_visible">'+ebay_visible+'</td>'
                                        //+'<td data-inp="multiple">'+multiple+'</td>'
                                        +'<td data-inp="deny_filter">'+deny_filter+'</td>'
                                        +'<td class="action"></td>'
                                        +'</tr>'
                                );
                            }else{
                                $('table#saved_characteristics_table tbody tr[data-characteristicid="'+gcID+'"] td[data-inp]').each(function(){
                                    let current_td = $(this);
                                    switch($(this).data('inp')){
                                        case 'titledesc':
                                            $('#add_form_container form input[name^="title["]').each(function(){    
                                                let title = $(this).val();
                                                let name_parts = $(this).attr('name').split('[');
                                                let lang_id = parseInt(name_parts[1].replace(']',''));
                                                let description = $('#add_form_container form input[name="description['+lang_id+']"]').val();;
                                                current_td.children('div#title_'+lang_id).text(title);
                                                current_td.children('div#description_'+lang_id).text(description);
                                            });
                                            break;
                                        case 'no_sets':
                                            current_td.text(no_sets);
                                            break;
                                        case 'sort_order':
                                            current_td.text(sort_order);
                                            break;
                                        case 'visible':
                                            current_td.text(visible);
                                            break;
                                        case 'ebay_visible':
                                            current_td.text(ebay_visible);
                                            break;
                                        /*case 'multiple':
                                            current_td.text(multiple);
                                            break;*/
                                        case 'deny_filter':
                                            current_td.text(deny_filter);
                                            break;
                                    }
                                });
                            }
                            update_table_actions();
                            $('#add_form_container').dialog('destroy');
                        },
                        error: function( xhr ){
                            alert('Cant add characteristic');
                        }
                    });
                }
    }
    $(function(){
        $('a#close_characteristic').on('click',function(){
           characteristics_close(); 
        });
        $('button#button_add_characteristic').on('click',function(){
            var dlg_title = $(this).text();
            let radio_checked = [];
            $('#add_form_container form input').each(function(){
                switch($(this).attr('type')){
                    case 'hidden':
                    case 'text':
                        $(this).val('');
                        break;
                    case 'radio':
                        if(radio_checked.indexOf( $(this).attr('name') )<0){
                            radio_checked.push($(this).attr('name'));
                            $(this).prop('checked',true);
                        }
                        break;
                    case 'number':
                        $(this).val(0);
                        break;
                    case 'checkbox':
                        $(this).prop('checked',false);
                        break;
                }
            });
            $('#add_form_container').dialog({
                modal: true,
                width: 'auto',
                height: 'auto',
                title: dlg_title,
            });
        });
        update_table_actions();
        $('button#save_characteristic').on('click',function(){
            return save_characteristic();
        });
    });
    function delete_characteristic( characteristic_id ){
        if(confirm(JS_CONFIRM_REALLY_DELETE_CHARACTERISTIC)){
                $.ajax({
                    url: 'groups.php?action=delete_characteristic&characteristic_id='+characteristic_id,
                    dataType: 'json',
                    success: function( json ){
                        if(json.MSG != ''){
                            alert(json.MSG);
                        }
                        $('table#saved_characteristics_table tbody tr[data-characteristicid="'+characteristic_id+'"]').remove();
                    },
                    error: function( xhr ){
                        alert('Cant delete characteristic');
                    }
                });
        }
    }
    
    function edit_characteristic( characteristic_id ){
        var dlg_title = TEXT_EDIT;
        $('#add_form_container form input').each(function(){
            let name = $(this).attr('name');
            switch($(this).attr('type')){
                case 'hidden':
                    $(this).val(characteristic_id);
                    break;
                case 'text':
                    if(name.indexOf('title[')>-1 || name.indexOf('description[')>-1){
                        var name_to_el = name.replace('[','_').replace(']','');
                        var val = $('table#saved_characteristics_table tbody tr[data-characteristicid="'+characteristic_id+'"] #'+name_to_el).text();
                        $(this).val( val );
                    }
                    break;
                case 'radio':
                    var val = $('table#saved_characteristics_table tbody tr[data-characteristicid="'+characteristic_id+'"] td[data-inp="'+name+'"]').text();
                    console.log(val, $(this).val());
                    if(val == 'Sets' && $(this).val() == 0){
                        $(this).prop('checked',true);
                    }else if(val == 'Freitext' && $(this).val() == 1){
                        $(this).prop('checked',true);
                    }else{
                        $(this).prop('checked',false);
                    }
                    break;
                case 'number':
                    var val = $('table#saved_characteristics_table tbody tr[data-characteristicid="'+characteristic_id+'"] td[data-inp="'+name+'"]').text();
                    $(this).val( val );
                    break;
                case 'checkbox':
                    var val = $('table#saved_characteristics_table tbody tr[data-characteristicid="'+characteristic_id+'"] td[data-inp="'+name+'"]').text();
                    $(this).prop('checked',(val == 1));
                    break;
            }
        });
        $('#add_form_container').dialog({
            modal: true,
            width: 'auto',
            height: 'auto',
            title: dlg_title,
        });
    }
    function characteristic_sets(characteristic_id){
        $('#modal_window').dialog({
            modal: true,
            width: 'auto',
            height: 'auto',
            title: TEXT_NO_SETS_0,
        }).load('groups.php?action=characteristic_sets&characteristic_id='+characteristic_id);
    }
    function update_table_actions(){
        $('table#saved_characteristics_table tbody tr').each(function(){
            let actions = '<a href="javascript:edit_characteristic('+$(this).data('characteristicid')+')">'+icon_edit+'</a>';
            if( $(this).children('td[data-inp="no_sets"]').text() == 'Sets' ){
                actions += '&nbsp;<a href="javascript:characteristic_sets('+$(this).data('characteristicid')+')">'+icon_sets+'</a>';
            }
            actions += '&nbsp;<a href="javascript:delete_characteristic('+$(this).data('characteristicid')+')">'+icon_delete+'</a>';
            $(this).children('td.action').html(actions);
        });
    }
</script>
<div id="characteristic_container">
    <table border="0" width="100%">
        <tr>
            <td width="30"><a id="close_characteristic" href="javascript:;">{icon type="close"}</button></td>
            <td style="font-size: 1.4em;font-weight: bold;">{$INFO_STRING}</td>
        </tr>
    </table>
<table border="0" id="saved_characteristics_table">
    <thead>
        <tr>
            <th>{$TEXT_TITLE}</th>
            <th>Type</th>
            <th>{#sort_order#}</th>
            <th>{$TEXT_VISIBLE}</th>
            <th>{$TEXT_EBAY_VISIBLE}</th>
            {*<th>{$TEXT_MULTIPLE}</th>*}
            <th>{$TEXT_DENY_FILTER}</th>
            <th>&nbsp;</th>
        </tr>
    </thead>
    <tbody>
        {foreach from=$CHARACTERISTICS item=c}
        <tr data-characteristicid="{$c->products_characteristic_id}">
            <td data-inp="titledesc">
                {foreach from=$c->description key=lID item=d}
                <div class="title" id="title_{$lID}">{$d->title}</div>
                <div class="description" id="description_{$lID}">{$d->description}</div>
                {/foreach}
            </td>
            <td data-inp="no_sets">{if $c->no_sets == 0}{$TEXT_NO_SETS_0}{else}{$TEXT_NO_SETS_1}{/if}</td>
            <td data-inp="sort_order">{$c->sort_order}</td>
            <td data-inp="visible">{$c->visible}</td>
            <td data-inp="ebay_visible">{$c->ebay_visible}</td>
            {*<td data-inp="multiple">{$c->multiple}</td>*}
            <td data-inp="deny_filter">{$c->deny_filter}</td>
            <td class="action"></td>
        </tr>
        {/foreach}
    </tbody>
</table>


<button class="ui-button ui-corner-all ui-state-default" id="button_add_characteristic">{$TEXT_ADD_CHARACTERISTIC}</button>
<div id="add_form_container">
{$ADD_FORM}
    <input type="hidden" name="products_characteristic_id" value="" />
    <table border="0" id="add_char_table">
        {foreach from=$LANGUAGES item=l}
        <tr class="odd">
            <td colspan="2"><b>{$l.name}</b></td>
        </tr>
        <tr>
            <td>{$TEXT_TITLE}</td>
            <td><input type="text" name="title[{$l.id}]" value="" /></td>
        </tr>
        <tr>
            <td>{$TEXT_DESCRIPTION}</td>
            <td><input type="text" name="description[{$l.id}]" value="" /></td>
        </tr>
        {/foreach}
        <tr>
            <td colspan="2">&nbsp;</td>
        </tr>
        <tr class="odd">
            <td>
                <b>Werte</b>
            </td><td>
                <input type="radio" name="no_sets" id="no_sets" value="0" /> {$TEXT_NO_SETS_0}
                &nbsp;&nbsp;&nbsp;&nbsp;
                <input type="radio" name="no_sets" id="no_sets" value="1" /> {$TEXT_NO_SETS_1} 
            </td>
        </tr>
        <tr>
            <td>{#sort_order#}</td>
            <td><input type="number" size="3" name="sort_order" id="sort_order" value="0" /></td>
        </tr>
        <tr>
            <td>{$TEXT_VISIBLE}</td>
            <td><input type="checkbox" name="visible" id="visible" value="1" /></td>
        </tr>
        <tr>
            <td>{$TEXT_EBAY_VISIBLE}</td>
            <td><input type="checkbox" name="ebay_visible" id="ebay_visible" value="1" /></td>
        </tr>
        {*
        <tr>
            <td>{$TEXT_MULTIPLE}</td>
            <td><input type="checkbox" name="multiple" id="multiple" value="1" /></td>
        </tr>
        *}
        <tr>
            <td>{$TEXT_DENY_FILTER}</td>
            <td><input type="checkbox" name="deny_filter" id="deny_filter" value="1" /><span title="{$TEXT_DENY_FILTER_DESC}" class="help">?</span></td>
        </tr>
    </table>
    <button class="ui-button ui-corner-all ui-state-default" id="save_characteristic">{#save#}</button>
</form>
</div>

</div>