[% WRAPPER 'default/base.tt2' %]
<script>
    var fundingSourceID = [% ctx.page_args.0 %];
    function getFund(rowIndex) {
        data = fsAllocationGrid.model.getRow(rowIndex);
        if(data) {
            var fund = openils.acq.Fund.retrieve(data.fund);
            return '<a href="[% ctx.base_path %]/acq/fund/view/'+fund.id()+'">'+fund.code()+'</a>';
        }
    }
</script>

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

<div id='oils-acq-list-header' class='container'>
    <div id='oils-acq-list-header-label'>Funding Source 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>Apply Credit</span>
        <div dojoType="dijit.TooltipDialog" execute="applyFSCredit(arguments[0]);">
            <table class='dijitTooltipTable'>
                <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="note">Note: </label></td>
                    <td>
                        <input dojoType="dijit.form.TextBox" name="note"> </input>
                        <!-- XXX textarea makes more sense, but it's buggy in the dropdown dialog .. perhaps a height issue?
                        <textarea dojoType='dijit.form.Textarea' name="note" style='min-height:6em'> 
                        </textarea>
                        -->
                    </td>
                </tr>
                <tr>
                    <td colspan='2' align='center'>
                        <button dojoType=dijit.form.Button type="submit">Apply</button>
                    </td>
                </tr>
            </table>
        </div>
    </div> 
    <div dojoType="dijit.form.DropDownButton">
        <span>Allocate to Fund</span>
        <div dojoType="dijit.TooltipDialog" execute="applyFSAllocation(arguments[0]);">
            <script type='dojo/connect' event='onOpen'>
                openils.acq.Fund.createStore(
                    function(store) {
                        fundingSourceFundSelector.store = 
                            new dojo.data.ItemFileReadStore({data:store});
                        fundingSourceFundSelector.setValue(store.items[0].code);
                    }, 'MANAGE_FUND'
                );
            </script>
            <table class='dijitTooltipTable'>
                <tr>
                    <td><label for="amount">Fund: </label></td>
                    <td>
                        <input jsId='fundingSourceFundSelector' name="fund" 
                            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 type='dojo/connect' event='onShow'>loadFSGrid();</script>

            <div dojoType="dijit.layout.ContentPane" layoutAlign="top"> 
                <div dojoType="dijit.layout.ContentPane" layoutAlign="client" style='height:600px;'> 
                    <table jsId="fundingSourceGrid" dojoType="dojox.grid.DataGrid" query="{id: '*'}" rowSelector='20px'> 
                        <thead> 
                            <tr> 
                                <th field="id">ID</th> 
                                <th field="name" width='auto'>Name</th> 
                                <th field="code">Code</th> 
                                <th field="balance" get='getSummaryInfo'>Balance</th>
                                <th field="credit_total" get='getSummaryInfo'>Total Credits</th>
                                <th field="allocation_total" get='getSummaryInfo'>Total Debits</th>
                                <th field="currency_type">Currency Type</th> 
                                <th field="owner" width='auto' get='getOrgInfo'>Owner</th>
                            </tr> 
                        </thead> 
                    </table>     
                </div> 
            </div>               
 
        <div dojoType="dijit.layout.ContentPane" class='oils-acq-detail-content-pane' title="Credits">
            <script type='dojo/connect' event='onShow'>loadCreditGrid();
            </script> 
            <div dojoType="dijit.layout.ContentPane" layoutAlign="top"> 
                <div dojoType="dijit.layout.ContentPane" layoutAlign="client" style='height:600px;'> 
                    <table jsId="fsCreditGrid" dojoType="dojox.grid.DataGrid" query="{id: '*'}" rowSelector='20px'> 
                        <thead> 
                            <tr> 
                                <th field="id">ID</th> 
                                <th field="amount">Amount</th> 
                                <th field="note" width='auto'>Note</th> 
                            </tr> 
                        </thead> 
                    </table>     
                </div> 
            </div> 
            
        <div dojoType="dijit.layout.ContentPane" class='oils-acq-detail-content-pane' title="Allocations">
            <script type='dojo/connect' event='onShow'>loadAllocationGrid();</script> 
            <div dojoType="dijit.layout.ContentPane" layoutAlign="top"> 
                <div dojoType="dijit.layout.ContentPane" layoutAlign="client" style='height:600px;'> 
                    <table jsId="fsAllocationGrid" dojoType="dojox.grid.DataGrid" query="{id: '*'}" rowSelector='20px'> 
                        <thead> 
                            <tr> 
                                <th field="id">ID</th> 
                                <th field="fund" get='getFund'>Fund</th> 
                                <th field="amount">Amount</th> 
                                <th field="percent">Percent</th> 
                                <th field="allocator">Allocated By</th> 
                                <th field="note" width='auto'>Note</th> 
                            </tr> 
                        </thead> 
                    </table>     
                </div> 
            </div> 
        </div>
    </div>
</div>

[% END %]