[% WRAPPER 'default/base.tt2' %]
[% ctx.page_title = 'Invoicing' %]
<script type="text/javascript">var invoiceId = '[% ctx.page_args.0 %]';</script>
<div dojoType="dijit.layout.ContentPane" style="height:100%">

    <div dojoType="dijit.layout.ContentPane" layoutAlign="client" class='oils-header-panel'>
        <div> Invoice </div>
        <div> </div>
    </div>

    <div dojoType="dijit.layout.ContentPane" layoutAlign="client">
        <div id='acq-view-invoice-div'/>
    </div>

    <div dojoType="dijit.layout.ContentPane" layoutAlign="client">
        <table class='oils-acq-invoice-table'>
            <thead/>
            <tbody id='acq-invoice-entry-header' class='hidden'>
                <tr>
                    <td colspan='0'>
                        <h3>Bibliographic Items</h3>
                    </td>
                </tr>
            </tbody>
            <!-- acq.invoice_entry -->
            <thead id='acq-invoice-entry-thead' class='hidden'>
                <tr>
                    <th colspan='2'>Title Details</th>
                    <th class='acq-invoice-center-col'>#&nbsp;Invoiced&nbsp;/&nbsp;#&nbsp;Paid</th>
                    <th class='acq-invoice-center-col'>Billed</th>
                    <th class='acq-invoice-paid-col'>Paid</th>
                    <th class='acq-invoice-center-col hide-complete'>Detach</th>
                </tr>
            </thead>
            <tbody id='acq-invoice-entry-tbody' class='hidden'>
                <tr id='acq-invoice-entry-template' class='acq-invoice-row'>
                    <td colspan='2'>
                        <div name='title_details'></div>
                        <div name='note'></div>
                    </td>
                    <td class='acq-invoice-center-col'>
                        <span name='inv_item_count'></span>&nbsp;/&nbsp;<span name='phys_item_count'></span>
                    </td>
                    <td class='acq-invoice-billed-col'><div name='cost_billed'/></td>
                    <td class='acq-invoice-paid-col'><div name='amount_paid'/></td>
                    <td class='acq-invoice-center-col hide-complete'><a href='javascript:void(0);' name='detach'>Detach</a></td>
                </tr>
            </tbody>
            <tbody>
                <tr>
                    <td  style='margin-top:15px;' colspan='0'>
                        <h3>Direct Charges, Taxes, Fees, etc.</h3>
                    </td>
                </tr>
            </tbody>
            <!-- acq.invoice_item -->
            <thead>
                <tr>
                    <th>Charge Type</th>
                    <th class='acq-invoice-center-col'>Fund</th>
                    <th>Title/Description</th>
                    <th class='acq-invoice-center-col'>Billed</th>
                    <th class='acq-invoice-paid-col'>Paid</th>
                    <th class='acq-invoice-center-col hide-complete'>Delete</th>
                </tr>
            </thead>
            <tbody id='acq-invoice-item-tbody'>
                <tr id='acq-invoice-item-template' class='acq-invoice-row acq-invoice-item-row'>
                    <td><div name='inv_item_type'/></td>
                    <td class='acq-invoice-center-col'><div name='fund'/></td>
                    <td><div name='title'/></td>
                    <td class='acq-invoice-center-col' class='acq-invoice-billed-col'><div name='cost_billed'/></td>
                    <td class='acq-invoice-paid-col'><div name='amount_paid'/></td>
                    <td class='acq-invoice-center-col hide-complete'><a href='javascript:void(0);' name='delete'>Delete</a></td>
                </tr>
            </tbody>
            <tbody class='hide-complete'>
                <tr>
                    <td colspan='0'>
                        <a href='javascript:void(0);' id='acq-invoice-new-item'>Add Charge...</a>
                    </td>
                </tr>
            </tbody>
            <tbody>
                <tr>
                    <td style='margin-top:15px;' colspan='0'> 
                        <h3> </h3>
                    </td>
                </tr>
            </tbody>
            <thead>
                <tr>
                    <th colspan='3'/>
                    <th class='acq-invoice-center-col' class='acq-invoice-billed-col'>Total</th>
                    <th class='acq-invoice-paid-col'>Total</th>
                    <th class='acq-invoice-center-col' class='acq-invoice-balance-col'>Balance</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td colspan='3' style='text-align:right;'>
                        <button jsId='invoiceSaveButton' class='hide-complete'
                            dojoType='dijit.form.Button' onclick='saveChanges();'>Save</button>
                        <button jsId='invoiceProrateButton' class='hide-complete'
                            dojoType='dijit.form.Button' onclick='saveChanges(true);'>Save &amp; Prorate</button>
                        <button jsId='invoiceCloseButton' class='hide-complete'
                            dojoType='dijit.form.Button' onclick='saveChanges(false, true);'>Save &amp; Close</button>
                        <span class='hidden' id='acq-invoice-reopen-button-wrapper'>
                            <button jsId='invoiceReopenButton' 
                                dojoType='dijit.form.Button' onclick='saveChanges(false, false, true);'>Reopen Invoice</button>
                        </span>
                    </td>
                    <td class='acq-invoice-center-col'><div jsId='totalInvoicedBox' dojoType='dijit.form.CurrencyTextBox' style='width:9em;'/></td>
                    <td class='acq-invoice-paid-col'><div jsId='totalPaidBox' dojoType='dijit.form.CurrencyTextBox' style='width:9em;'/></td>
                    <td class='acq-invoice-center-col'><div jsId='balanceOwedBox' dojoType='dijit.form.CurrencyTextBox' style='width:9em;'/></td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
<div dojoType='openils.widget.ProgressDialog' jsId='progressDialog'/>
<div jsId='extraItemsDialog' dojoType="dijit.Dialog" title="Extra Items">
    <div dojoType="dijit.layout.ContentPane" style='text-align:center;'>
        <div id='acq-invoice-extra-copies-message'></div>
        <br/>
        Select a fund for the new items: <div id='acq-invoice-extra-copies-fund'></div>
        <br/><br/>
        <br/><br/>
        <span style='padding-right: 10px;'>
            <button dojoType='dijit.form.Button' jsId='extraCopiesCancel'>Cancel</button>
        </span>
        <button dojoType='dijit.form.Button' jsId='extraCopiesGo'>Add New Items</button>
    </div>
</div>
<script type="text/javascript" src='[% ctx.media_prefix %]/js/ui/default/acq/invoice/common.js'> </script>
<script type="text/javascript" src='[% ctx.media_prefix %]/js/ui/default/acq/invoice/view.js'> </script>
[% END %]