{config_load file=$language_path section="general"}
{if $ZONES_MODE}
    <style>
    {literal}
    #add_allocation_div{
        display: none;
        padding: 4px;
    }
    button.add_allocation{
        padding: 3px;
    }
    ul.allocated_zones {
        list-style-type: none;
        margin-left: 0;
        padding-left: 0;
        
    }
    ul.allocated_zones li {
        display: block;
        float: left;
        box-sizing: border-box;
        width: 250px;
        padding: 6px;
        cursor: pointer;
    }
    ul.allocated_zones li a:hover{
        text-decoration: line-through;
        color: red;
    }
    ul.allocated_zones li .zone{
        padding-left: 10px;
    }
    {/literal}
    </style>
    <script>
    const gzID = '{$GEO_ZONES_ID}';
    const JS_CONFIRM_ADD_COUNTRY_TO_GEO_ZONE = '{$JS_CONFIRM_ADD_COUNTRY_TO_GEO_ZONE}';
    const TEXT_ALL = '{$TEXT_ALL}';
    const JS_CONFIRM_REALLY_DELETE_COUNTRY_ALLOCATION = '{$JS_CONFIRM_REALLY_DELETE_COUNTRY_ALLOCATION}';
    const TEXT_INFO_HEADING_EDIT_SUB_ZONE = '{$TEXT_INFO_HEADING_EDIT_SUB_ZONE}';
    {literal}
    $(function(){
        $('ul.allocated_zones li a').each(function(){
            $(this).on('click',function(){
                delete_country_allocation($(this));
            });
        });
        
        $('ul.allocated_zones li .zone').each(function(){
            $(this).on('click',function(){
                $('#modal2').dialog({
                    title: TEXT_INFO_HEADING_EDIT_SUB_ZONE,
                    width: 'auto',
                    height: 'auto',
                    modal: true,
                }).load('?action=update_country_allocation&id='+$(this).parent().data('association_id'));
            });
        });
        
        
        $('button.add_allocation').on('click',function(){
            $('#add_allocation_div').toggle();
            $('#countries_id_input').focus();
        });
        $( '#countries_id_input' ).autocomplete({
            source: "geo_zones.php?gzID="+gzID,
            minLength: 2,
            select: function( event, ui ) {
                if(confirm(JS_CONFIRM_ADD_COUNTRY_TO_GEO_ZONE.replace('%s',ui.item.value))){
                    $.ajax({
                        url: '?action=ajax_add_country_allocation&gzID='+gzID+'&id='+ui.item.id,
                        dataType: 'json',
                        success: function( json ){
                            var new_li = $('<li data-association_id="'+json.insert_id+'"><a href="javascript:;">'+ui.item.value+'</a><span class="zone">'+TEXT_ALL+'</span></li>');
                            $('ul.allocated_zones').append(new_li);
                            $(this).val('');
                            $('#add_allocation_div').toggle();

                            $(new_li).find('a').on('click',function(){
                                delete_country_allocation($(this));
                            });
                            return false;
                        },
                        error: function(xhr){
                            alert('Cant add country allocation');
                        }
                    });
                }
            }
        });        
        
    });
    function delete_country_allocation(el){
        if(confirm(JS_CONFIRM_REALLY_DELETE_COUNTRY_ALLOCATION)){
            $.ajax({
                url: '?action=ajax_delete_country_allocation&id='+$(el).parent().data('association_id'),
                dataType: 'json',
                success: function( json ){
                    $(el).parent().remove();
                },
                error: function(xhr){
                    alert('Cant delete country allocation');
                }
            });
        }
    }
    {/literal}
        
    </script>
    
    <div class="main">
        <h3>{$GEO_ZONE_NAME}</h3>
        <div id="modal2"></div>
        <button class="ui-button ui-corner-all ui-state-default add_allocation">{$TEXT_INFO_HEADING_NEW_SUB_ZONE}</button>
        <div id="add_allocation_div" class="ui-widget-content">
                {#search#} {#country#} <input type="text" name="countries_id" id="countries_id_input"/>
        </div>
        <ul class="allocated_zones">
        {foreach from=$zones item=zone}
        <li data-association_id="{$zone.association_id}"><a href="javascript:;">{$zone.country_name}</a><span class="zone"{if $zone.zone == $PLEASE_SELECT} title="{$PLEASE_SELECT}"{/if}>{if $zone.zone == $PLEASE_SELECT}{$TEXT_ALL}{else}{$zone.zone}{/if}</span></li>
        {/foreach}
        </ul>
    </div>


{else}


    {yes_admin_page_menu main_title=$HEADING_TITLE buttons=$PAGE_HEADING_MENU_BUTTONS}
    <style>
    {literal}
    table tbody td button.geobutton{
            padding: 3px;
            font-size: 0.9em;
    }
    {/literal}
    </style>

    <script>
    const HEADING_TITLE_LIST = '{$HEADING_TITLE_LIST}';
    const TEXT_INFO_HEADING_EDIT_ZONE = '{$TEXT_INFO_HEADING_EDIT_ZONE}';
    const JS_REALLY_DELETE_GEO_ZONE = '{$JS_REALLY_DELETE_GEO_ZONE}';
    {literal}
    const geo_zone_list = id => {
        $('#modal_window').dialog({
            title: HEADING_TITLE_LIST,
            width: 850,
            height: 'auto',
            modal: true,
        }).load('?action=ajax_list&zID='+id);
    }
    const geo_zone_edit = id => {
        var geo_zone_name = $('table#geo-zones-table tbody tr[data-geo_zone_id="'+id+'"] td.geo_zone_name').text();
        var new_geo_zone_name = prompt(TEXT_INFO_HEADING_EDIT_ZONE,geo_zone_name);
        if(new_geo_zone_name !== null && new_geo_zone_name.trim().length > 2 && new_geo_zone_name != geo_zone_name){
            $.ajax({
               url:'?action=ajax_update&id=' + id + '&geo_zone_name='+encodeURIComponent(new_geo_zone_name),
               dataType: 'json',
               success: function(json){
                  $('table#geo-zones-table tbody tr[data-geo_zone_id="'+id+'"] td.geo_zone_name').text( new_geo_zone_name.trim() );        
                  $('table#geo-zones-table tbody tr[data-geo_zone_id="'+id+'"] td.last_modified').text( json.now );        
               },
               error: function(xhr){
                   alert('Cant update geo zone name');
               }
            });
        }
    };
    const update_country_allocation = association_id => {
        var zone_id = $('select[name="zone_id"]').val();
        $.ajax({
           url: '?action=update_country_allocation_process&zone_id='+zone_id+'&id='+association_id,
           dataType: 'json',
           success: function( json ){
               $('ul.allocated_zones li[data-association_id="'+association_id+'"] .zone').text( $('select[name="zone_id"] option:selected').text() );
               $('#modal2').dialog('destroy').html('');
               return false;
           },
           error: function(xhr){
               alert('Cant update country allocation');
           }
           
        });
    }
    const delete_geo_zone = id => {
        if(confirm(JS_REALLY_DELETE_GEO_ZONE)){
            $.ajax({
                url: '?action=ajax_delete&id='+id,
                dataType: 'json',
                success: function(json){
                    $('table#geo-zones-table tbody tr[data-geo_zone_id="'+id+'"]').remove();
                },
                error: function( xhr ){
                    alert('Cant delete geo zone');
                }
            });
        }
    }
    const add_new_geo_zone = () => {
        const geo_zone_name = $('.add_geo_zone input[name="geo_zone_name"]').val();
        const geo_zone_desc = $('.add_geo_zone input[name="geo_zone_description"]').val();
        if(geo_zone_name.trim().length > 2){
            $.ajax({
                url:'?action=ajax_insert',
                dataType: 'json',
                data: {
                    geo_zone_name: geo_zone_name,
                    geo_zone_desc: geo_zone_desc
                },
                method: 'post',
                success: function(json){
                    window.location.href='geo_zones.php';
                },
                error: function(xhr){
                    alert('Cant create geo zone '+geo_zone_name);
                }
                
            });
        }
    }
    {/literal}
    </script>
    
    <form>
        <fieldset>
            <label for="search_country_allocation">
                {$TEXT_SEARCH_COUNTRY_ALLOCATION}
            </label>
            {$INPUT_SEARCH_COUNTRY_ALLOCATION}
            <input type="submit" value="{#search#}" class="ui-button ui-corner-all ui-state-default" />
        </fieldset>
    </form>

    <table class="yesListTable" id="geo-zones-table">
        <thead>
            <tr>
                <th>{$TABLE_HEADING_TAX_ZONES}</th>
                <th>{$LIST_ZONE_ALLOCATIONS}</th>
                <th>{$TEXT_INFO_DATE_ADDED}</th>
                <th>{$TEXT_INFO_LAST_MODIFIED}</th>
                <th>{$TABLE_HEADING_ACTION}</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th colspan="5">{$PAGER}</th>
            </tr>
        </tfoot>
        <tbody>
            {foreach from=$geo_zones item=gz}
            <tr data-geo_zone_id="{$gz.geo_zone_id}">
                <td class="geo_zone_name">{$gz.geo_zone_name}</td>
                <td align="right">{$gz.num_zones}</td>
                <td>{yes_date_short date=$gz.date_added}</td>
                <td class="last_modified">{yes_date_short date=$gz.last_modified}</td>
                <td>
                    <button class="geobutton ui-button ui-corner-all ui-state-default" onClick="geo_zone_edit({$gz.geo_zone_id})">{#edit#}</button>
                    <button class="geobutton ui-button ui-corner-all ui-state-default" onClick="geo_zone_list({$gz.geo_zone_id})">{$LIST_ZONE_ALLOCATIONS}</button>
                    <button class="geobutton ui-button ui-corner-all ui-state-error" onClick="delete_geo_zone({$gz.geo_zone_id})">{#delete#}</button>
                </td>
            </tr>
            {/foreach}
        </tbody>
    </table>
{/if} <!-- not zones //-->