{{header}}{{column_left}}
<div id="content">
    <div class="page-header">
        <div class="container-fluid">
            <div class="pull-right">
                <button type="submit" form="form-weight" data-toggle="tooltip" title="{{button_save}}" class="btn btn-primary"><i class="fa fa-save"></i></button>
                <a href="{{cancel}}" data-toggle="tooltip" title="{{button_cancel}}" class="btn btn-default"><i class="fa fa-reply"></i></a></div>
            <h1>{{heading_title}}</h1>
            <ul class="breadcrumb">
                {%for breadcrumb in breadcrumbs%}
                    <li><a href="{{breadcrumb['href']}}">{{breadcrumb['text']}}</a></li>
                    {%endfor%}
            </ul>
        </div>
    </div>
    <div class="container-fluid">
        {%  if error_warning%}
            <div class="alert alert-danger"><i class="fa fa-exclamation-circle"></i> {{error_warning}}
                <button type="button" class="close" data-dismiss="alert">&times;</button>
            </div>
        {%endif%}
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title"><i class="fa fa-pencil"></i> {{text_edit}}</h3>
            </div>
            <div class="panel-body">
                <form action="{{action}} " method="post" enctype="multipart/form-data" id="form-weight" class="form-horizontal">
                    <div class="row">
                        <div class="col-sm-2">
                            <ul class="nav nav-pills nav-stacked">
                                <li class="active"><a href="#tab-general" data-toggle="tab">{{tab_general}}</a></li>
                                    {%for geo_zone in geo_zones %}
                                    <li><a href="#tab-geo-zone{{geo_zone['geo_zone_id']}}" data-toggle="tab">{{geo_zone['name']}}</a></li>
                                    {%endfor%}
                            </ul>
                        </div>
                        <div class="col-sm-10">
                            <div class="tab-content">
                                <div class="tab-pane active" id="tab-general">
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label" for="input-tax-class">{{entry_heading}}</label>
                                        <div class="col-sm-10">
                                            <input type="text" name="shipping_total_based_heading" value="{{shipping_total_based_heading}}" class="form-control"  />
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label" for="input-tax-class">{{entry_tax_class}}</label>
                                        <div class="col-sm-10">
                                            <select name="shipping_total_based_tax_class_id" class="form-control" >
                                                <option value="0">{{text_none}}</option>
                                                {%for tax_class in  tax_classes%}
                                                    {% if tax_class['tax_class_id'] == shipping_total_based_tax_class_id%}
                                                        <option value="{{tax_class['tax_class_id']}}" selected="selected">{{tax_class['title']}}</option>
                                                    {%else%}
                                                        <option value="{{tax_class['tax_class_id']}}">{{tax_class['title']}}</option>
                                                    {%endif%}
                                                {%endfor%}
                                            </select>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label" for="input-status">{{ entry_status }}</label>
                                        <div class="col-sm-10">
                                            <select name="shipping_total_based_status" class="form-control">
                                                {% if shipping_total_based_status%}
                                                <option value="1" selected="selected">{{ text_enabled }}</option>
                                                <option value="0">{{ text_disabled }}</option>
                                                {%else%}
                                                <option value="1">{{ text_enabled }}</option>
                                                <option value="0" selected="selected">{{ text_disabled }}</option>
                                                {%endif%}
                                            </select>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label" for="input-sort-order">{{ entry_sort_order }}</label>
                                        <div class="col-sm-10">
                                            <input type="text" name="shipping_total_based_sort_order" value="{{ shipping_total_based_sort_order }}" size="1"   id="input-sort-order" class="form-control" />
                                        </div>
                                    </div>
                                </div>
                                {%set module_row = 0%}
                                {%for geo_zone in geo_zones%}
                                    <div class="tab-pane" id="tab-geo-zone{{ geo_zone['geo_zone_id'] }}">

                                        <div class="form-group">
                                            <div class="col-sm-2"></div>
                                            <div class="col-sm-10"><h3 class="panel-title">{{ text_shipping_rates_for}} <span style="text-decoration: underline;">{{ geo_zone['name'] }}</span></h3></div>

                                        </div>

                                        <div class="form-group">
                                            <label class="col-sm-2 control-label" for="input-rate{{ geo_zone['geo_zone_id'] }}">{{ entry_rate }}</label>
                                            <div class="col-sm-10">
                                                <div class="table-responsive">
                                                    <table class="table table-bordered table-hover tbl_module" id="module">
                                                        <thead>
                                                            <tr>
                                                                <td class="left" >From</td>
                                                                <td class="left"> To </td>
                                                                <td class="left" >Charge</td>
                                                                <td class="left" ></td>
                                                            </tr>
                                                        </thead>                                

                                                        {% set shipping_total_based_rates =  'shipping_total_based_' ~geo_zone['geo_zone_id'] ~ '_rate'%}
                                                        {% set geo_zone_id = geo_zone['geo_zone_id']%}
                                                        {%for key,shipping_total_based_rate in attribute(_context,shipping_total_based_rates)['from'] %}
                                                            <tbody id="module-row-{{ geo_zone_id}}-{{ module_row }}">                                          
                                                                <tr>
                                                                    <td class="left" style="width: 100px;">
                                                                        <input type="text" name="shipping_total_based_{{ geo_zone['geo_zone_id']}}_rate[from][{{ module_row }}]" value="{{ shipping_total_based_rate}}" class="form-control" style="width:100px;"  />                                           
                                                                    </td>
                                                                    <td class="left">
                                                                        <input type="text" name="shipping_total_based_{{ geo_zone['geo_zone_id']}}_rate[to][{{ module_row }}]" value="{{attribute(_context, shipping_total_based_rates)['to'][key]}}" class="form-control" style="width:100px;"  />   
                                                                    </td>
                                                                    <td class="left">
                                                                        <input type="text" name="shipping_total_based_{{ geo_zone['geo_zone_id']}}_rate[charge][{{ module_row }}]" value="{{attribute(_context, shipping_total_based_rates)['charge'][key]}}" class="form-control" style="width:100px;"  />         
                                                                    </td>

                                                                    <td class="left"><a onclick="$('#module-row-{{ geo_zone_id}}-{{ module_row }}').remove();" class="btn btn-danger"><i class="fa fa-trash-o"></i></a></td>
                                                                </tr>
                                                            </tbody>
                                                            {% set module_row = module_row+1%}
                                                        {%endfor%}


                                                        <tfoot id="{{ geo_zone_id}}">
                                                            <tr>
                                                                <td colspan="4"></td>
                                                                <td class="left"><a onclick="addModule('{{ geo_zone_id}}');" class="btn btn-primary"><i class="fa fa-plus"></i></a></td>
                                                            </tr>
                                                        </tfoot>

                                                    </table>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <label class="col-sm-2 control-label" for="input-status{{ geo_zone['geo_zone_id'] }}">{{ entry_status }}</label>
                                            <div class="col-sm-10">                      
                                                <select name="shipping_total_based_{{ geo_zone['geo_zone_id'] }}_status" class="form-control">
                                                    {% set shipping_total_geo_zone_status = 'shipping_total_based_'~geo_zone['geo_zone_id'] ~ '_status'%}
                                                   
                                                    {%  if (attribute(_context, shipping_total_geo_zone_status) ==1)%}
                                                        <option value="1" selected="selected">{{ text_enabled }}</option>
                                                        <option value="0">{{ text_disabled }} </option>
                                                    {%else%}
                                                        <option value="0" selected="selected">{{ text_disabled }}</option>
                                                        <option value="1">{{ text_enabled }}</option>                                                        
                                                    {%endif%}
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                {%endfor%}
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>



<script type="text/javascript">
    var module_row = {{module_row}};
            function addModule(geo_zone_id) {
                html = '<tbody id="module-row-' + geo_zone_id + '-' + module_row + '">';
                html += '  <tr>';
                html += '   <td class="left">';
                html += '       <input type="text" name="shipping_total_based_' + geo_zone_id + '_rate[from][' + module_row + ']" value="" class="form-control" style="width:100px;"/>  ';
                html += '   </td>';
                html += '    <td class="left">';
                html += '       <input type="text" name="shipping_total_based_' + geo_zone_id + '_rate[to][' + module_row + ']" value="" class="form-control" style="width:100px;"  />  ';
                html += '   </td>';
                html += '    <td class="left">';
                html += '       <input type="text" name="shipping_total_based_' + geo_zone_id + '_rate[charge][' + module_row + ']" value="" class="form-control" style="width:100px;"  />  ';
                html += '    </td>';
                html += '    <td class="left"><a onclick="$(\'#module-row-' + geo_zone_id + '-' + module_row + '\').remove();" class="btn btn-danger"><i class="fa fa-trash-o"></i></a></td>';
                html += '  </tr>';
                html += '</tbody>';
                //alert( $('.cls'+geo_zone_id).html());
                $('.tbl_module tfoot#' + geo_zone_id).before(html);

                module_row++;
            }

</script> 
<script type="text/javascript"><!--
$('.vtabs a').tabs();
    //--></script> 
    {{ footer }}
