<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<dynamic>" %>
<table id="dgLight" class="easyui-datagrid" style="width: 100%; height: auto;" data-options="
            toolbar: '#tbLight',
			border: false,
			singleSelect: true,
			pagination: true,
			pageSize: 20,
			rownumbers: true,
			striped: true,
			sortName: 'ID',
			sortOrder: 'asc',
			fit: true,
			fitColumns: true,
			idField: 'ID',
			method: 'POST',
			url: '/MobileApp/LoadLightsByPage/'
		">
    <thead>
        <tr>
            <th data-options="field:'Outlet',resizable:false">
                <%: Html.Language("DeliveryOutlet")%>
            </th>
            <th data-options="field:'Name',width:30,resizable:false">
                <%: Html.Language("Name")%>
            </th>
             <th data-options="field:'EnglishName',width:100,resizable:false">
                <%: Html.Language("EnglishName")%>
            </th>
            <th data-options="field:'Type',resizable:false">
                <%: Html.Language("Type")%>
            </th>
            <th data-options="
				field: 'AppApply',
				align: 'center',
				formatter: lightAppApplyFormatter,
				resizable:false
			">
                <%: Html.Language("Display")%>
            </th>
        </tr>
    </thead>
</table>
<div id="tbLight">
    <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-reload',plain:true"
        onclick="$('#dgLight').datagrid('reload')">
        <%: Html.Language("Refresh")%></a>
    <label>
        <%: Html.Language("RoomType")%></label>
    <select id="cbxLightRoomType" class="easyui-combobox" style="width: 100px;" data-options="
			valueField: 'ID',
			textField: 'Name',
			required: true,
			panelHeight: 'auto',
			editable: false,
			url: '/RoomType/LoadRoomType/',
            onSelect: cbxLightRoomTypeOnSelect
		">
    </select>
</div>
<script type="text/javascript">

    function cbxLightRoomTypeOnSelect(r) {
        $("#dgLight").datagrid('reload', { RoomTypeID: r.ID });
    }

    function lightAppApplyFormatter(val, row) {
        if (val) {
            return '<input type="checkbox" checked="checked" onchange="lightAppApplyOnChange(this,\'' + row.ID + '\')" />';
        } else {
            return '<input type="checkbox" onchange="lightAppApplyOnChange(this,\'' + row.ID + '\')" />';
        }
    }
    function lightAppApplyOnChange(sender, id) {

        var params = { ID: id, AppApply: $(sender).is(":checked") };

        $.tools.post(params, '/MobileApp/SaveLight/');
    }
</script>
