
{*{extends file="helpers/list/list_header.tpl"}*}
{*
{block name=override_header}
    <ul class="breadcrumb cat_bar2">

        <li>
            <i class="icon-home"></i>
            {if {$category_line|count}>0}<a href="{$action_url}">{/if}
                {l s="Home" mod="myswissstyle"}
                {if {$category_line|count}>0}</a>{/if}
        </li>
        {$i=0}
        {foreach $category_line as $category}
            <li>
                {if $category@iteration < $category_line|count}
                    <a href="{$action_url}&category_id={$category.category_id}">
                        {$category.title|escape:'html':'UTF-8'}
                    </a>
                {else}
                    {$category.title|escape:'html':'UTF-8'}
                {/if}
            </li>
        {/foreach}
    </ul>
{/block}{**}


{$css_block}
<div class="panel col-lg-12">
    <div class="panel-heading">
        {l s="Cliparts" mod="myswissstyle"}
        <span class="badge">{$cliparts|count}</span>
    </div>
    <div class="table-responsive-row clearfix">
        <table id="table-category" class="table tableDnD category">
            <thead>
            <tr class="nodrag nodrop">
                <th class="fixed-width-xs center">
                        <span class="title_box">
                            {l s="ID" mod="myswissstyle"}
                        </span>
                </th>
                <th class="">
                        <span class="title_box">
                            {l s="Name" mod="myswissstyle"}
                        </span>
                </th>
                <th class="">
                        <span class="title_box">
                            {l s="Preview" mod="myswissstyle"}
                        </span>
                </th>
                <th class="fixed-width-xs center">
                        <span class="title_box active">
                            {l s="Position" mod="myswissstyle"}
                        </span>
                </th>
                <th class="fixed-width-xs center">
                        <span class="title_box">
                            {l s="Displayed" mod="myswissstyle"}
                        </span>
                </th>
                <th></th>
            </tr>
            </thead>
            <tbody id="categoryList">
            {foreach $cliparts as $clipart}
                <tr id="tr_{$clipart@key}_{$clipart.id}" class="{if !($clipart@iteration%2 == 0)} odd{/if}">
                    <td class="pointer fixed-width-xs center" onclick="document.location='{$action_url}&clipart_id={$clipart.id}'">
                        {$clipart.id}
                    </td>
                    <td class="pointer"  onclick="document.location='{$action_url}&edit_clipart_id={$clipart.id}'">
                        {if $clipart.name == true}{$clipart.name}{else}{$clipart.orig_file_name}{/if}
                    </td>
                    <td class="pointer">
                        <div class="preview_container">
                            <div class="thumb" style="background: url(/{$clipart.url.small}) scroll 0 0 / contain #fff no-repeat">
                                <div class="big_preview" img_src="/{$clipart.url.medium}"></div>
                            </div>
                        </div>
                    </td>
                    <td id="td_{$clipart@key}_{$clipart.id}" class="pointer dragHandle center">
                        <div class="dragGroup">
                            <div class="positions" clipart_id="{$clipart.id}">
                                {$clipart@iteration}
                            </div>
                        </div>
                    </td>
                    <td class="pointer fixed-width-xs center">
                            <span clipart_id="{$clipart.id}" class="list-action-enable {if $clipart.status}action-enabled{else}action-disabled{/if}">
                                <i class="icon-check {if !$clipart.status} hidden{/if}"></i>
                                <i class="icon-remove {if $clipart.status} hidden{/if}"></i>
                            </span>
                    </td>
                    <td class="text-right">
                        <div class="btn-group-action">
                            <div class="btn-group pull-right">
                                <a class="edit btn btn-default" title="Edit"
                                   href="{$action_url}&edit_clipart_id={$clipart.id}&category_id={$selected_category_id}"
                                        >
                                    <i class="icon-pencil"></i>
                                    {l s="Edit" mod="myswisstyle"}
                                </a>
                                <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                                    <i class="icon-caret-down"></i>
                                </button>
                                <ul class="dropdown-menu">
                                    <li class="divider">
                                    </li>
                                    <li>
                                        <a href="{$action_url}&action=remove&clipart_id={$clipart.id}&category_id={$selected_category_id}" class="delete_button" title="Delete" category_id="{$clipart.id}">
                                            <i class="icon-trash"></i>
                                            {l s="Delete" mod="myswisstyle"}
                                        </a>
                                    </li>
                                </ul>

                            </div>
                        </div>
                    </td>
                </tr>
                {foreachelse}
                <tr>
                    <td class="list-empty" colspan="6">
                        <div class="list-empty-msg">
                            <i class="icon-warning-sign list-empty-icon"></i>
                            {l s='No records found'}
                        </div>
                    </td>
                </tr>
            {/foreach}
            </tbody>
        </table>
    </div>
    <div class="row"></div>
</div>


<script type="text/javascript">
    //Ready Function
    $(document).ready(function() {

        var $document = $(document);

        $document.off('mouseover','.preview_container .thumb');
        $document.on('mouseover','.preview_container .thumb',function() {
            var $preview = $(this).find('.big_preview');

            $preview.css('background', 'url(' + $preview.attr('img_src') + ') scroll 0 0 / contain #fff no-repeat');
            $preview.show();

        });

        $document.off('mouseout','.preview_container .thumb');
        $document.on('mouseout','.preview_container .thumb',function(){
            var $preview = $(this).find('.big_preview');
            $preview.hide();
        });

        $document.off('click', '.list-action-enable i');
        $document.on('click', '.list-action-enable i', function() {

            var $this = $(this);
            var $parent = $this.parents('.list-action-enable');

            $.ajax({
                type: 'POST',
                headers: { "cache-control": "no-cache" },
                async: false,
                url: '{$ajax_route}?subject=Admin&action=change_clipart_status&token={$token}',
                data: {
                    clipart_id: $parent.attr('clipart_id'),
                    clipart_status: $parent.hasClass('action-enabled')
                },
                success: function(data) {
                    data = $.parseJSON(data);

                    if (data.status == 'success') {
                        document.location.reload();
                    }
                }
            });

        });
/*
        $document.off('click', '.delete_button');
        $document.on('click', '.delete_button', function(){
            var $this = $(this);

            $.ajax({
                type: 'POST',
                headers: { "cache-control": "no-cache" },
                async: false,
                url: '{$ajax_route}?subject=Admin&action=remove_clipart_category&token={$token}',
                data: {
                    category_id: $this.attr('category_id')
                },
                success: function(data) {
                    data = $.parseJSON(data);

                    if (data.status == 'success') {
                        document.location.reload();
                    }
                }
            });

            return false;
        });/**/

        var originalOrder = false;
        $("#table-category").tableDnD({
            dragHandle: 'dragHandle',
            onDragClass: 'myDragClass',
            onDragStart: function(table, row) {
                originalOrder = $.tableDnD.serialize();
                reOrder = ':even';
                if (table.tBodies[0].rows[1] && $('#' + table.tBodies[0].rows[1].id).hasClass('alt_row'))
                    reOrder = ':odd';
                $(table).find('#' + row.id).parent('tr').addClass('myDragClass');
                return false;
            },
            onDrop: function(table, row) {
                if (originalOrder != $.tableDnD.serialize()) {

                    var category_list = [];
                    $.each($("#categoryList .positions"), function(key, item) {
                        category_list[category_list.length] = $(item).attr('clipart_id');
                    });
                    $.ajax({
                        type: 'POST',
                        headers: { "cache-control": "no-cache" },
                        async: false,
                        url: '{$ajax_route}?subject=Admin&action=save_cliparts_positions&token={$token}',
                        data: {
                            clipart_ids: category_list
                        },
                        success: function(data) {
                            data = $.parseJSON(data);

                            if (data.status == 'success') {
                                var i = 1;
                                $.each($("#categoryList .positions"), function(key, item) {
                                    $(item).html(i++);
                                });
                            }
                        }
                    });
                }
                return false;
            }
        });
        $('.fancybox').fancybox();
    });
</script>