<!--
Author		: Wahyu / 20-11-2014
Revision	:
-->
<div class="easyui-layout" data-options="fit:true,border:false">
    <div data-options="region:'north',border:false" style="height:30px">
        <div style="padding:2px">				
            <a href="#" class="easyui-linkbutton" id="refresh-linkbutton" data-options="plain:true,iconCls:'icon-reload'" onclick="refresh_datagrid('#grid')">Refresh</a>
            <a href="#" class="easyui-linkbutton" id="preview-linkbutton" data-options="plain:true,iconCls:'icon-print'" onclick="clickPreview()">Print Preview</a>
        </div>
    </div>

    <div data-options="region:'west',split:true,border:true" title="Filter"style="width:190px;background-color:#CCCCFF;padding:5px;">
        <form class="form-filter">
            <table width="100%" cellpadding="0" cellspacing="0">
                <tr>
                    <td width="190" align="left" style="padding-bottom:8px;">
                        <b>by Payment Type</b>
                    </td>
                </tr>
                <tr>
                    <td align="left">
                        <input type="checkbox" name="chk_TransStatus" value="0" onClick="search_data()"/> Purchase(CPV)
                    </td>
                </tr>
                <tr>
                    <td align="left">
                        <input type="checkbox" name="chk_TransStatus" value="1" onClick="search_data()"/> Sales(CRV)
                    </td>
                </tr>
                <tr><td><div class="tr-divider"></div></td></tr>
                <tr>
                    <td style="padding-bottom:8px;">
                        <b>by Date</b>
                        <input type="checkbox" name="chk_ByDate" value="1" id="chk_ByDate" style="float:right;" />
                    </td>
                </tr>
                <tr>
                    <td width="" align="left">
                        From
                        <span style="float:right;">
                            <input name="txt_DateFrom" id="txt_DateFrom" type="text" class="easyui-datebox filter_date" style="width:100px;height:22px;" onSelect="search_data()" editable="false" disabled />
                        </span>
                    </td>
                </tr>
                <tr>
                    <td width="" align="left">
                        To
                        <span style="float:right;">
                            <input name="txt_DateTo" id="txt_DateTo" type="text" class="easyui-datebox filter_date" style="width:100px;height:22px;" onSelect="search_data()" editable="false" disabled />
                        </span>
                    </td>
                </tr>
            </table>
        </form>
    </div>

    <div data-options="region:'center',border:false,iconCls:'icon-ok'">		
        <table id="grid" class="easyui-datagrid"
               title="" iconCls="icon-edit" 
               singleSelect="true" rowNumbers="true" 
               pageSize="50" 
               fitColumns="true" remoteSort="false" 
               url="<?= base_url() . $menu_link ?>/ajax_payment_listing" 
               style="width:auto;height:560px" 
               data-options = "border:false,view:scrollview,autoRowheight:false"
               >
            <thead>
                <tr>
                    <!-- <th data-options="field:'EPayNumber',width:170,halign:'center',align:'center'">EpayNumber</th> -->
                    <th data-options="field:'BranchName',width:170,halign:'center',align:'center'">Branch</th>
                    <th data-options="field:'DepartmentName',width:170,halign:'center',align:'center'">Department</th>
                    <th data-options="field:'EmployeeName',width:170,halign:'center',align:'center'">Employee</th>				
                    <th data-options="field:'EBonDate',width:80,halign:'center',align:'center'">Cash-Bon Date</th>
                    <th data-options="field:'EBonAmount',width:110,halign:'center',align:'right'" formatter="formatRp">Cashbon Amount</th>
                    <th data-options="field:'EPayDate',width:80,halign:'center',align:'center'">Payment Date</th>
                    <th data-options="field:'ExpenseAmount',width:110,halign:'center',align:'right'" formatter="formatRp">Payment Amount</th>
                    <th data-options="field:'amount_crv',width:110,halign:'center',align:'right'" formatter="formatRp">CRV Amount</th>
                    <th data-options="field:'amount_cpv',width:110,halign:'center',align:'right'" formatter="formatRp">CPV Amount</th>
                </tr>
            </thead>
        </table>
    </div>
</div>

<script type="text/javascript">
    $(document).ready(function () {
        $('.filter_date').datebox({
            onSelect: function (date) {
                search_data();
            }
        });

        $('#chk_ByDate').click(function () {
            if ($(this).is(':checked')) {
                $('#txt_DateFrom').datebox('enable', true);
                $('#txt_DateTo').datebox('enable', true);
                $('#txt_DateFrom').datebox('setValue', '<?= date('01-m-Y') ?>');
                $('#txt_DateTo').datebox('setValue', 'today');
            }
            else {
                $('#txt_DateFrom').datebox('disable', true);
                $('#txt_DateTo').datebox('disable', true);
                $('#txt_DateFrom').datebox('setValue', '');
                $('#txt_DateTo').datebox('setValue', '');
            }
            search_data();
        });
    });
    function clickPreview() {
        var arr_string = sendParamJson();
        parent.tab_add('Print Payment List', 'list/payment_listing', 'icon-print', 'to_preview/' + arr_string);
//        parent.tab_add('Print Payment List', 'list/payment_listing', 'icon-print', 'to_preview');
    }
</script>