[% WRAPPER 'default/base.tt2' %]
<script>
    var fundID = [% ctx.page_args.0 %]
    function getFundingSource(rowIndex) {
        data = fundAllocationGrid.model.getRow(rowIndex);
        if(data) {
            var fs = openils.acq.FundingSource.retrieve(data.funding_source);
            return '<a href="[% ctx.base_uri %]/acq/funding_source/view/'+fs.id()+'">'+fs.name()+'</a>';
        }
    }
</script>

<!-- load the page-specific JS -->
<script src='[% ctx.media_prefix %]/js/ui/default/acq/financial/view_fund.js'> </script>

<div id='oils-acq-list-header' class='container'>
    <div id='oils-acq-list-header-label'>Fund Details</div>
</div>

<div class='oils-acq-actions-div' style='margin:8px;'> <!-- XXX CSS -->
    <!-- Dropdown menu for creating a new funding source credit -->
    <div dojoType="dijit.form.DropDownButton">
        <span>Create Allocation</span>
        <div dojoType="dijit.TooltipDialog" execute="createAllocation(arguments[0]);">
            <script type='dojo/connect' event='onOpen'>
                openils.acq.FundingSource.createStore(
                    function(store) {
                        fundingSourceSelector.store = 
                            new dojo.data.ItemFileReadStore({data:store});
                        fundingSourceSelector.setValue(store.items[0].code);
                    }, 'MANAGE_FUNDING_SOURCE'
                );
            </script>
            <table class='dijitTooltipTable'>
                <tr>
                    <td><label for="amount">Funding Source: </label></td>
                    <td>
                        <input jsId='fundingSourceSelector' name="funding_source" 
                            dojoType="dijit.form.FilteringSelect" searchAttr='code' labelAttr='code'>
                        </input>
                    </td>
                </tr>
                <tr>
                    <td><label for="amount">Amount: </label></td>
                    <td>
                        <!-- XXX get currency from funding source ... -->
                        <input dojoType="dijit.form.CurrencyTextBox" name="amount" currency='USD'> </input>
                    </td>
                </tr>
                <tr>
                    <td><label for="amount">Percent: </label></td>
                    <td>
                        <input 
                            dojoType="dijit.form.NumberTextBox" 
                            constraints="{min:0,max:100}" 
                            promptMessage="Please enter an amount between 0 and 100"
                            name="percent"> 
                        </input>
                    </td>
                </tr>
                <tr>
                    <td><label for="note">Note: </label></td>
                    <td>
                        <input dojoType="dijit.form.TextBox" name="note"> </input>
                    </td>
                </tr>
                <tr>
                    <td colspan='2' align='center'>
                        <button dojoType=dijit.form.Button type="submit">Apply</button>
                    </td>
                </tr>
            </table>
        </div>
    </div> 
</div>


<div dojoType="dijit.layout.ContentPane" layoutAlign="top">
    <div dojoType="dijit.layout.TabContainer">
        <div dojoType="dijit.layout.ContentPane" 
                class='oils-acq-detail-content-pane' title="Summary" selected='true'>
            <script>
                /** Define the columns for the fund grid ----- */
                var fundGridLayout = [{
                    cells : [[
                        {name: 'ID', field: 'id'},
                        {name: 'Name', field: "name", width:'auto'}, 
                        {name: 'Code', field: "code"},
                        {name: 'Currency Type', field: "currency_type"},
                        {name: 'Owner', get:getOrgInfo}, 
                        /*
                        {name: 'Balance (Total - (Spent + Encumbrances))")}', get:getSummaryInfo},
                        {name: 'Amount Allocated to this Fund")}', get:getSummaryInfo},
                        {name: 'Spent Balance (Total - Spent)")}', get:getSummaryInfo},
                        {name: 'Total Debits (Spent + Encumbered)")}', get:getSummaryInfo},
                        */
                        {name: 'Balance', get:getSummaryInfo, field:'combined_balance'},
                        {name: 'Total Allocated', get:getSummaryInfo, field:'allocation_total'},
                        {name: 'Spent Balance', get:getSummaryInfo, field:'spent_balance'},
                        {name: 'Total Debits', get:getSummaryInfo, field:'debit_total'},
                        {name: 'Total Spent', get:getSummaryInfo, field:'spent_total'},
                        {name: 'Total Encumbered', get:getSummaryInfo, field:'encumbrance_total'}
                    ]]
                }];
            </script>
            <div jsId='fundGrid' dojoType="dojox.Grid" structure='fundGridLayout'> </div>
        </div>
        <div dojoType="dijit.layout.ContentPane" class='oils-acq-detail-content-pane' title="Allocations">
            <script type='dojo/connect' event='onShow'>loadAllocationGrid();</script>
            <script>
                /** Define the columns for the funding source allocations grid ----- */
                var fundAllocationGridLayout = [{
                    cells : [[
                        {name: 'ID', field: 'id'},
                        {name: 'Funding Source', field: "fund", get:getFundingSource}, 
                        {name: 'Amount', field: "amount"}, 
                        {name: 'Percent', field: "percent"}, 
                        {name: 'Allocated By', field: "allocator"}, 
                        {name: 'Note', field: "note", width:'auto'}, 
                    ]]
                }];
            </script>
            <div jsId='fundAllocationGrid' dojoType="dojox.Grid" structure='fundAllocationGridLayout'> </div>
        </div>
        <div dojoType="dijit.layout.ContentPane" class='oils-acq-detail-content-pane' title="Debits">
            <script type='dojo/connect' event='onShow'>loadDebitGrid();</script>
            <script>
                /** Define the columns for the funding source credits grid ----- */
                var fundDebitGridLayout = [{
                    cells : [[
                        {name: 'ID', field: 'id'},
                        {name: 'Origin Amount', field: "origin_amount"}, 
                        {name: 'Origin Currency Type', field: "origin_currency_type"}, 
                        {name: 'Amount', field: "amount"}, 
                        {name: 'Encumbrance', field: "encumbrance"}, 
                        {name: 'Debit Type', field: "debit_type"}, 
                        {name: 'Transfer Destination', field: "xfer_destination", get:getXferDest}, 
                    ]]
                }];
            </script>
            <div jsId='fundDebitGrid' dojoType="dojox.Grid" structure='fundDebitGridLayout'> </div>
        </div>
    </div>
</div>
[% END %]