{*

/**
 * Copyright (c) 2015, Kairat Bakytow
 * All rights reserved.

 * ATTENTION: This commercial software is intended for use with Oxwall Free Community Software http://www.oxwall.org/
 * and is licensed under Oxwall Store Commercial License.
 * Full text of this license can be found at http://www.oxwall.org/store/oscl
 */

*}

{style}{literal}

.action_btn {
    width: 16px;
    height: 16px;
    display: inline-block;
}

{/literal}{/style}

{$menu}

<div class="ow_smallmargin ow_right">
    {decorator name='button_list_item' langLabel='smileys+add_smile_label' class='smile_add_btn'}
</div>


<ul class="ow_content_menu clearfix ow_stdmargin category_menu">
    {foreach $captions as $id => $caption}
        <li>
            <a href="javascript://" class="tab-category" data-category="{$id}">
                <span style="background-image: url({$smileysUrl}{$caption})">&nbsp;</span>
            </a>
        </li>
    {/foreach}
    <li>
        <a href="javascript://" id="add-category" title="Add category">
            <span class="ow_ic_add">&nbsp;</span>
        </a>
    </li>
</ul>

{if $isSingle}
    <table id="smileys" class="ow_table_2 smileys-single">
        <tr class="ow_tr_first">
            <th width="1">Order</th>
            <th>Smile</th>
            <th width="1">Code</th>
            <th width="1">Action</th>
        </tr>
        {foreach $smileys as $smile}
            <tr class="{cycle values="ow_alt1,ow_alt2"}" data-id="{$smile->id}">
                <td>
                    <div class="action_btn"><a href="javascript://" class="action_btn ow_ic_up_arrow" title="Up"></a></div>
                    <div class="action_btn"><a href="javascript://" class="action_btn ow_ic_down_arrow" title="Down"></a></div>
                </td>
                <td><img src="{$smileysUrl}{$smile->name}" /></td>
                <td>{$smile->code}</td>
                <td>
                    <div class="action_btn"><a href="javascript://" class="action_btn ow_ic_edit" title="Edit"></a></div>
                    <div class="action_btn"><a href="javascript://" class="action_btn ow_ic_delete" title="Delete"></a></div>
                </td>
            </tr>
        {foreachelse}
            <tr><td class="ow_center">No items</td></tr>
        {/foreach}
    </table>
{else}
    <div id="smileys">
        {foreach $smileys as $id => $category}
            <div id="smile-category-{$id}" style="display: none" class="smileys-cont">
                <table id="smileys-{$id}" class="ow_table_2">
                    <tr class="ow_tr_first">
                        <th width="1">Order</th>
                        <th>Smile</th>
                        <th width="1">Category Icon</th>
                        <th width="1">Code</th>
                        <th width="1">Action</th>
                    </tr>
                    {foreach $category as $smile}
                        <tr class="{cycle values="ow_alt1,ow_alt2"}" data-id="{$smile->id}">
                            <td>
                                <div class="action_btn"><a href="javascript://" class="action_btn ow_ic_up_arrow" title="Up"></a></div>
                                <div class="action_btn"><a href="javascript://" class="action_btn ow_ic_down_arrow" title="Down"></a></div>
                            </td>
                            <td><img src="{$smileysUrl}{$smile->name}" /></td>
                            <td><input type="radio" name="category-{$smile->category}" value="{$smile->category}" {if in_array($smile->name, $captions)} checked{/if}/></td>
                            <td>{$smile->code}</td>
                            <td>
                                <div class="action_btn"><a href="javascript://" class="action_btn ow_ic_edit" title="Edit"></a></div>
                                <div class="action_btn"><a href="javascript://" class="action_btn ow_ic_delete" title="Delete"></a></div>
                            </td>
                        </tr>
                        {if $smile@last}
                            <tr class="{cycle values="ow_alt1,ow_alt2"}" data-id="{$smile->category}">
                                <td colspan="5">
                                    <div class="action_btn"><a href="javascript://" class="action_btn ow_ic_delete delete_category" title="Delete category"></a></div>
                                </td>
                            </tr>
                        {/if}
                    {foreachelse}
                        <tr><td class="ow_center">No items</td></tr>
                    {/foreach}
                </table>
            </div>
        {/foreach}
    </div>
{/if}

<div class="ow_clearfix ow_stdmargin">
    <div class="ow_right">
        {decorator name='button_list_item' langLabel='smileys+add_smile_label' class='smile_add_btn'}
    </div>    
</div>

{script}{literal}

var categoryId = 0;

$(".smile_add_btn").on("click", function( event )
{
    OW.ajaxFloatBox('SMILEYS_CMP_Add', [categoryId], {
        title: OW.getLanguageText('smileys', 'add_smile_label'),
        width: 550
    });
    
    event.stopImmediatePropagation();
});

$(".ow_ic_edit", ".smileys-cont,.smileys-single").on("click", function()
{
    var id = $(this).closest("tr").attr("data-id");
    
    OW.ajaxFloatBox('SMILEYS_CMP_Edit', [id], {
        title: OW.getLanguageText('smileys', 'edit_smile_label'),
        width: 550
    });
});

$(".ow_ic_delete", ".smileys-cont,.smileys-single").on("click", function()
{
    if ( !confirm(OW.getLanguageText('smileys', 'are_you_sure')) )
    {
        return;
    }
    
    $.ajax({
        url: "{/literal}{url_for_route for="smileys.admin_delete"}{literal}",
        data: {id: $(this).closest("tr").attr("data-id")},
        cache: false,
        type: 'POST',
        dataType: 'json',
        success: function( data )
        {
            if ( data && data.error )
            {
                OW.error(data.message);
            }
            else
            {
                window.location.reload(true);
            }
        }
    });
});

function reord( send )
{
    send = (send === undefined ? true : false);
    var table = $(".smileys-cont,.smileys-single");
    
    $(".ow_ic_up_arrow,.ow_ic_down_arrow", table).show();
    
    table.each(function()
    {
        $(".ow_ic_up_arrow", $(this).find("tr:eq(1)")).hide();
        $(".ow_ic_down_arrow", $(this).find("tr:eq(-2)")).hide();
    });
    
    $("tr:odd", table).removeClass().addClass("ow_alt1");
    $("tr:even", table).removeClass().addClass("ow_alt2");
    
    if ( send )
    {
        var data = {};
        
        $("tr", table).each(function( index )
        {
            var id = $(this).attr("data-id");
            
            if ( id === undefined )
            {
                return;
            }
            
            data[$(this).attr("data-id")] = index;
        });
        
        $.ajax({
            url: "{/literal}{url_for_route for="smileys.admin_reorder"}{literal}",
            data: data,
            cache: false,
            type: 'POST'
        });
    }
}

reord(false);

$(".ow_ic_up_arrow", "#smileys").on("click", function()
{
    var tr = $(this).closest("tr");
    
    tr.prev().before(tr);
    
    reord();
});

$(".ow_ic_down_arrow", "#smileys").on("click", function()
{
    var tr = $(this).closest("tr");
    
    tr.next().after(tr);
    
    reord();
});

$(".tab-category").on("click", function()
{
    $(".category_menu li").removeClass("active");
    $(this).closest("li").addClass("active");
    $(".smileys-cont").hide();
    $("#smile-category-" + $(this).attr("data-category")).show();
    categoryId = $(this).attr("data-category");
}).eq(0).trigger("click");

$("#add-category").on("click", function()
{
    OW.ajaxFloatBox('SMILEYS_CMP_AddCategory', [], {
        title: OW.getLanguageText('smileys', 'add_smile_category'),
        width: 550
    });
    
    event.stopImmediatePropagation();
});

$(".delete_category").on("click", function()
{
    if ( !confirm(OW.getLanguageText('smileys', 'are_you_sure')) )
    {
        return;
    }
    
    $.ajax({
        url: '{/literal}{url_for_route for="smileys.admin_delete_category"}{literal}',
        data: {id: $(this).closest("tr").attr("data-id")},
        cache: false,
        type: 'POST',
        dataType: 'json',
        success: function( data )
        {
            if ( data && data.error )
            {
                OW.error(data.message);
            }
            
            window.location.reload(true);
        }
    });
});

$(".smileys-cont input[name^='category-']").on("click", function()
{
    $.ajax({
        url: '{/literal}{url_for_route for="smileys.admin_set_category"}{literal}',
        data: {id: $(this).closest("tr").attr("data-id"), categoryId:this.value},
        cache: false,
        type: 'POST',
        success: function()
        {
            window.location.reload(true);
        }
    });
});
{/literal}{/script}