{$state_name = [
    'new' => '[`New`]',
    'process' => '[`Processing`]',
    'complete' => '[`Complete`]',
    'deleted' => '[`Deleted`]'
]}
{$state_icon = [
    'new' => 'ss new',
    'process' => 'ss confirmed',
    'complete' => 'ss completed',
    'deleted' => 'ss trash',
    'all' => ''
]}


<div class="block double-padded">
    <h1>[`Callback`] &mdash; {if !empty($state_name[$state])}{$state_name[$state]}{else}[`All`]{/if}</h1>

    <div class="block top-padded">
    {if !empty($data.items)}
    <table class="zebra">
        <thead>
        <tr>
            <th class="min-width">[`State`]</th>
            {foreach $fields as $field}
            <th>{$field.name}</th>
            {/foreach}
            <th>[`Date`]</th>
        </tr>
        </thead>
        <tbody>
        {foreach $data.items as $item}
        <tr>
            <td>
                <select data-callback-id="{$item.id|escape}">
                    {html_options options=$state_name selected=$item.state}
                </select>
            </td>
            {foreach $fields as $fid => $field}
            <td>{$item[$fid]|escape|nl2br}</td>
            {/foreach}
            <td>{$item.create_datetime|wa_datetime:'humandatetime'}</td>
        </tr>
        {/foreach}
        </tbody>

    </table>

    <div class="block" id="callback-pagination">{wa_pagination total=$pages_total attrs=['class' => 'menu-h']}</div>
    {else}
        <p>[`No data matched selected period. Please select another request status or choose another date range.`]</p>
    {/if}
    </div>
</div>


<script>
(function ($) {
$(function(){
    document.title = '[`Callback report`]';
    $('a', $('#callback-pagination')).click(function(e){
        var a = $(this);
        $('#reportscontent').load(a.prop('href'));
        e.preventDefault();
    });
    $('[data-callback-id]').change(function () {
        var id = $(this).data('callback-id'),
            state = $(this).val()

        $.post('?plugin=callback&module=report&action=edit', { request : { id:id, state:state }}, function (r) {
            if(r.status==='fail') {
                alert(r.errors.join('\n'));
            }
        }, 'json')
    })
});
})(jQuery);
</script>