{config_load file=$language_path section="general"}
<style>
    {literal}
    .tax_classes button{
        font-size: 0.9em;
        padding: 3px;
    }
    .add_tax_form{
        display: none;
    }
    {/literal}
</style>
<script>
    var JS_ERROR_TITLE_LENGTH = '{$JS_ERROR_TITLE_LENGTH}';
    var text_edit = '{#edit#}';
    var text_delete = '{#delete#}';
    var TABLE_HEADING_TITLE = '{$TABLE_HEADING_TITLE}';
    var REALLY_DELETE_TAX_CLASS = '{$REALLY_DELETE_TAX_CLASS}';
    {literal}
    $(function(){
        $('button.new_tax_class').on('click',function(){
            $('.add_tax_form').show();
        });
    });
    function check_add_tax_class_form(formInstance){
        var tax_class_title = $(formInstance).find('input[name="tax_class_title"]').val();
        if(tax_class_title.trim().length  > 2){
            $.ajax({
               url: 'tax_classes.php?action=ajax_insert',
               data: $(formInstance).serialize(),
               dataType: 'json',
               success: function(json){
                    $('table.tax_classes tbody').append(
                            '<tr data-tax_class_id="'+json.id+'"><td>'+json.id+'</td><td>'+tax_class_title+'</td><td align="right">'+
                            '<button onClick="edit_tc(this)" data-tax_class_id="'+json.id+'" class="ui-button ui-corner-all edit_tax_class">'+text_edit+'</button>'+
                            '<button onClick="delete_tc(this)" data-tax_class_id="'+json.id+'" class="ui-button ui-corner-all ui-state-error delete_tax_class">'+text_delete+'</button>'+
                            '</td></tr>'
                    );
                   
               },
               error: function(xhr){
                   alert('Cant add tax class');
               }
            });
            return false;
        }else{
            alert(JS_ERROR_TITLE_LENGTH);
            return false;
        }
    }
    function edit_tc(btn){
        const tr = $('table.tax_classes tbody tr[data-tax_class_id="'+$(btn).data('tax_class_id')+'"]');
        const current_value = $(tr).find('td.tax_class_title').text();
        const input_value = prompt(TABLE_HEADING_TITLE,current_value);
        if(input_value !== null && input_value.trim().length > 2 && input_value !== current_value){
            $.ajax({
               url: 'tax_classes.php?action=ajax_update&id='+$(btn).data('tax_class_id')+'&tax_class_title='+encodeURIComponent(input_value),
               dataType: 'json',
               success: function(json){
                    $(tr).find('td.tax_class_title').text(input_value);
               },
               error: function(xhr){
                   alert('Cant delete tax class');
               }
            });
        }
    }
    function delete_tc(btn){
        if(confirm(REALLY_DELETE_TAX_CLASS)){
            $.ajax({
               url: 'tax_classes.php?action=ajax_delete&id='+$(btn).data('tax_class_id'),
               dataType: 'json',
               success: function(json){
                    $('table.tax_classes tbody tr[data-tax_class_id="'+$(btn).data('tax_class_id')+'"]').remove();                   
               },
               error: function(xhr){
                   alert('Cant delete tax class');
               }
            });
        }
    }
    {/literal}
</script>
<div class="main tax_classes">
    <button class="ui-button ui-corner-all ui-state-default new_tax_class">{$TEXT_INFO_HEADING_NEW_TAX_CLASS}</button>
    <div class="add_tax_form">
        <form name="add_tax_form" onSubmit="return check_add_tax_class_form(this)">
            <label for="tax_class_title">{$TABLE_HEADING_TITLE}</label>
            <input id="tax_class_title" name="tax_class_title" value="" />
            <input class="ui-button ui-corner-all ui-state-highlight" type="submit" value="{#add#}" />
        </form>
    </div>    
    
    <table class="yesListTable_minimal tax_classes" width="100%">
        <thead>
            <tr>
                <th>ID</th>
                <th>{$TABLE_HEADING_TITLE}</th>
                <th>&nbsp;</th>
            </tr>
        </thead>
        <tbody>
    {foreach from=$tax_classes item=tc}
            <tr data-tax_class_id="{$tc.tax_class_id}">
                <td class="tax_class_id">{$tc.tax_class_id}</td>
                <td class="tax_class_title">{$tc.tax_class_title}</td>
                <td class="actions" align="right">
                    <button onClick="edit_tc(this)" data-tax_class_id="{$tc.tax_class_id}" class="ui-button ui-corner-all edit_tax_class">{#edit#}</button>
                    <button onClick="delete_tc(this)"data-tax_class_id="{$tc.tax_class_id}" class="ui-button ui-corner-all ui-state-error delete_tax_class">{#delete#}</button>
                </td>
            </tr>
    {/foreach}
        </tbody>
    </table>
</div>