{config_load file=$language_path section="general"}
<style>
{literal}    
button#save_allocation{
    padding: 3px;
}
ul.tax_rates_list{
    list-style-type: none;
    margin-left: 0;
    padding-left: 0;
}
ul.tax_rates_list li{
    margin-bottom: 6px;
}
{/literal}    
</style>
<script>
const TC_PRODUCTS_ID = '{$PRODUCTS_ID}';
const GROUPS_ID = '{$GROUPS_ID}';
const JS_ALERT_AUTOMATIC_TAX_ZONE_WARNINGS = '{$JS_ALERT_AUTOMATIC_TAX_ZONE_WARNINGS}';
const TEXT_SELECT = '{$TEXT_SELECT}';
const MSG_SAVED_TAX_ALLOCATION_REFRESH = '{$MSG_SAVED_TAX_ALLOCATION_REFRESH}';
{literal}
$(function(){
    $('select[name="copy_tax_class"]').prepend('<option value="">'+TEXT_SELECT+'</option>').val('');
    $('button#save_allocation').on('click',function(){
        const tax_rates = [];
        const params = (TC_PRODUCTS_ID !== '') ? '&pID='+TC_PRODUCTS_ID : '&gID='+GROUPS_ID;
        $.ajax({
            url: 'tax_rates.php?action=products_tax_classes'+params,
            data: $('form[name="tax_rates_allocation_form"]').serialize(),
            method: 'post',
            dataType: 'json',
            success: function( json ){
                $('#modal_window').dialog('destroy');
                alert(MSG_SAVED_TAX_ALLOCATION_REFRESH);
            },
            error: function(xhr){
                alert('Cant save tax rate allocations');
            }
        });
    });
    $('select[name="copy_tax_class"]').on('change',function(){
        const target_tax_class = $(this).val();
        if(target_tax_class == ''){
            return false;
        }
        const msg = [];
        $('ul.tax_rates_list li select').each(function(){
            const selectbox = $(this);
            var found = false;
            $(this).children('option').each(function(){
                if($(this).data('tax_class_id') == target_tax_class){
                    $(selectbox).val( $(this).val() );
                    found = true;
                }
            });
            if(!found){
                msg.push( $(this).parent().data('geo_zone') );
            }
        });
        if(msg.length){
            alert(JS_ALERT_AUTOMATIC_TAX_ZONE_WARNINGS+"\r\n\r\n"+msg.join("\r\n"));
        }
        $(this).val('');
    });
});
{/literal}    
</script>
<div class="main">
    {if $products_name}
    <h1>{$HEADING_TITLE_PRODUCTS_TAX_RATE_ALLOCATION} &raquo;{$products_name}&laquo;</h1>
    {else}
    <h1>{$HEADING_TITLE_GROUPS_TAX_RATE_ALLOCATION} &raquo;{$groups_name}&laquo;</h1>
    {/if}

    <div class="ui-widget-content" style="padding:4px; font-size: 0.8em; color: #666;">
    {$AUTOMATIC_TAX_ZONE_ALLOCATOR}
    {$tax_classes}
    </div>
    <form name="tax_rates_allocation_form">
    <ul class="tax_rates_list">
    {foreach from=$tax_rates item=tr key=tax_zone_id}
        <li data-geo_zone="{$tr.geo_zone}">
            {$tr.geo_zone}<br />
            <select name="tax_rate[{$tax_zone_id}]">
                {foreach from=$tr.tax_rates item=tax}
                <option 
                    data-tax_class_id="{$tax.tax_class_id}" 
                    value="{$tax.id}" 
                    {if $tax.selected} selected="selected"{/if}
                >{$tax.text}</option>
                {/foreach}
            </select>
        </li>
    {/foreach}
    </ul>
    </form>
    <div class="ui-state-error">{$TAX_ALLOCATION_INTRO}</div>
    <button class="ui-button ui-corner-all ui-state-default" id="save_allocation">{#save#}</button>
</div>