<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WireCapture.aspx.cs" Inherits="APC.Forms.UserControls.WireCapture" %>
<%@ Register assembly="Ext.Net" namespace="Ext.Net" tagprefix="ext"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="../../Scripts/script.js" type="text/javascript"></script>
<script type="text/javascript">
    var total = 0;
    function updateTotal(control, amount, type) 
    {
        // routine to update the total when the selection changes
        if (type == 0)
            total -= amount;
        else
            total += amount;
        control.setValue(Ext.util.Format.usMoney(total));
    }
    function getRowClass(record) {
        if (record.data.Style == 'selected') {
            return 'current-row';
        }
    }
</script>
 <style>
    .current-row .x-grid-cell, .dirty-row .x-grid-rowwrap-div
    {
        background-color:orange !important;
        color:white !important;
    }
</style>
</head>
<body>
    <form id="form1" runat="server">
     <ext:ResourceManager ID="ResourceManager" runat="server"  Theme="Gray" />
        <ext:Viewport ID="Viewport1" runat="server" Layout="BorderLayout">
        <Items>
               <ext:Panel ID="pnlContainer" runat="server" Layout="BorderLayout" Region="Center" Border="false">
                <Items>

            <ext:Panel ID="pnlPayeeInfo" runat="server" Region="West" Width="500" Frame="true" Layout="AnchorLayout" Disabled="true">
                <Items>
                    <ext:UserControlLoader runat="server" ID="PayeeInfo" Path="~/Forms/UserControls/ExtPayeeInfo.ascx"/>
                </Items>
            </ext:Panel>
            <ext:Panel Split="true" Collapsible="false" runat="server" Region="Center" Title="Outstanding Payments" ID="pnlPayeePaymentList" Frame="true" AutoScroll="true" Icon="Information">
            <Items>
             <ext:GridPanel ID="grdData" runat="server" AnchorHorizontal="100%" AnchorVertical="100%">
            <Store>
                <ext:Store ID="storeItems" runat="server" OnReadData="ItemList_Refresh">
                <Model>
                    <ext:Model ID="modelItems" runat="server" IDProperty="Oid">
                    <Fields>
                        <ext:ModelField Name="RequestDate" SortType="AsDate" Type="Date" />
                        <ext:ModelField Name="AuthDate" SortType=AsDate Type=Date />
                        <ext:ModelField Name="Programme"/>
                        <ext:ModelField Name="Project"/>
                        <ext:ModelField Name="Style"/>
                        <ext:ModelField Name="Amount" SortType="AsFloat" Type="Float"/>
                    </Fields>
                </ext:Model>
                </Model>
                </ext:Store>
               </Store>
                <ColumnModel>
                <Columns>
                 <ext:Column ID="colID" runat="server" Text="Request Id" DataIndex="Oid" Width="80" Sortable="True"/>
                 <ext:DateColumn ID="colRequestDate" Format="yyyy-MM-dd" runat="server" Text="Request Date" DataIndex="RequestDate" Width="130" Sortable="True"/>             
                  <ext:Column ID="colAmount" runat="server" Text="Amount" DataIndex="Amount" Width="150" SummaryType="Sum" Align="Right">
                     <Renderer Format="UsMoney"/>
                  </ext:Column>
                   <ext:DateColumn ID="colAuthDate" Format="yyyy-MM-dd" runat="server" Text="Auth Date" DataIndex="AuthDate" Width="130" Sortable="True"/>             
                   <ext:Column ID="colProgramme" runat="server" Text="Programme" DataIndex="Programme" Width="150" Sortable="True"/>
                   <ext:Column ID="colProject" runat="server" Text="Project" DataIndex="Project" Width="150" Sortable="True"/>
            </Columns>            
        </ColumnModel> 
        <Features>               
                <ext:Summary ID="Summary1" runat="server" />                   
        </Features>
        <SelectionModel>
            <ext:CheckboxSelectionModel>
            <Listeners>
                <BeforeDeselect Handler="if (record == null) {return true;} else {return (record.data.style != 'selected');}"/>
                <BeforeSelect Handler="if (record == null) {return true;} else {return (record.data.style != 'selected');}" />
                <Select Handler="updateTotal(#{txtPaymentTotal}, record.data.Amount,1);" />
                <DeSelect Handler="updateTotal(#{txtPaymentTotal}, record.data.Amount,0);" />
            </Listeners>
        </ext:CheckboxSelectionModel>
        </SelectionModel>
           <View>
             <ext:GridView runat="server">
                 <GetRowClass Fn="getRowClass" />
            </ext:GridView>
          </View>
</ext:GridPanel>
</Items>
         </ext:Panel>
            <ext:Panel ID="pnlPayeeFooterInstruct" runat="server" Title="Payment Summary" Icon="Information" Margins="0 0 0 0" BodyPadding="0"  Layout="VBoxLayout" Frame="true" Visible=false Region="South">
                    <LayoutConfig>
                    <ext:VBoxLayoutConfig Align="Stretch"></ext:VBoxLayoutConfig>
                    </LayoutConfig>
                    <Items>
                        <ext:DisplayField ID="txtPaymentTotal" runat=server FieldLabel="Wire Total" AnchorHorizontal="100%" LabelStyle="font-weight:bold"/>
                        <ext:Container ID="Container1" runat="server" Layout="Column" AnchorHorizontal="100%">
                        <Items>
                            <ext:DisplayField ID="txtTotal" runat="server" FieldLabel="Request Total"  ColumnWidth=".5" Padding="2" LabelStyle="font-weight:bold"/>
                            <ext:DisplayField ID="txtPayeeTotal" runat="server" FieldLabel="Payee Authorised"  ColumnWidth=".5" Padding="2" LabelStyle="font-weight:bold"/>
                        </Items>
                        </ext:Container>
                        
                    </Items>
            </ext:Panel>
            <ext:Panel ID="pnlPayeeFooterConfirm" runat="server" Title="Payment Summary" Icon="Information" Margins="0 0 0 0" BodyPadding="0"  Layout="VBoxLayout" Frame="true" Visible=false Region="South">
                    <LayoutConfig>
                    <ext:VBoxLayoutConfig Align="Stretch"></ext:VBoxLayoutConfig>
                    </LayoutConfig>
                    <Items>
                    <ext:DisplayField ID="txtPaymentTotalIns" runat="server" FieldLabel="Wire Total" AnchorHorizontal="100%" LabelStyle="font-weight:bold"/>
                    <ext:TextField ID="txtReference" runat="server" FieldLabel="Reference" EmptyText="Please provide a Wire Reference" AllowBlank="false" LabelStyle="font-weight:bold" MsgTarget="Side"/>
                    <ext:DateField ID="dteWireDate" runat="server" FieldLabel="Date" Name="WireDate" Format="yyyy-MM-dd" AllowBlank="False" MsgTarget="Side" LabelStyle="font-weight:bold"/>
                    <ext:FileUploadField ID="WireUploadField" runat="server" EmptyText="Select an attachment" FieldLabel="Wire Confirmation"  ButtonText="" Icon="ImageAdd" AllowBlank="false" AnchorHorizontal="100%" MsgTarget=Side />
                    </Items>
            </ext:Panel>
             <ext:Panel ID="pnlPayeeFooterFinal" runat="server" Title="Payment Summary" Icon="Information" Margins="0 0 0 0" BodyPadding="0"  Layout="VBoxLayout" Frame="true" Visible=true Region="South">
                    <LayoutConfig>
                    <ext:VBoxLayoutConfig Align="Stretch"></ext:VBoxLayoutConfig>
                    </LayoutConfig>
                    <Items>
                                <ext:Container ID="Container2" runat="server" Layout="Column" AnchorHorizontal="100%">
                    <Items>
                        <ext:DisplayField ID="txtPaymentTotalFinal" runat="server" FieldLabel="Wire Total"  ColumnWidth=".5" Padding="2" LabelStyle="font-weight:bold"/>
                        <ext:HyperLink ID="hyperReference" runat="server" Icon="DiskMagnify" Target="_blank"  NavigateUrl="http://www.ext.net" Text="http://www.ext.net"/>
                   </Items>
                     </ext:Container>
                    </Items>
            </ext:Panel>
</Items>
</ext:Panel>
        </Items>
       </ext:Viewport>
    </form>
</body>
</html>
