[% WRAPPER 'base.tt2' %]
[% ctx.page_title = 'Invoicing' %]
<div dojoType="dijit.layout.ContentPane" style="height:100%">

    <div dojoType="dijit.layout.ContentPane" layoutAlign="client" class='oils-header-panel'>
        <div> Invoice </div>
        <div id="acq-view-invoice-receive" class="hidden">
            <button id="acq-view-invoice-receive-link">Receive Items</button>
        </div>
    </div>

    <div dojoType="dijit.layout.ContentPane" layoutAlign="client">
        <style>
            #acq-invoice-num-summary-table td {
                padding-right: 8px;
                padding-top: 5px;
                padding-bottom: 5px;
                border-bottom: 2px solid #888;
            }
            #acq-invoice-num-summary-table td[id] {
                font-weight:bold;
            }
        </style>
        <table id='acq-invoice-num-summary-table'>
            <tr><td>[% l("Lineitems: " ) %]</td><td id='acq-invoice-summary-count'>0</td></tr>
            <tr>
                <td>[% l("Expected Cost: " ) %]</td>
                <td id='acq-invoice-summary-cost'>0.00</td>
            </tr>
        </table>
        <br/>
    <div>

    <div dojoType="dijit.layout.ContentPane" layoutAlign="client">
        <div id='acq-invoice-summary'>
            <button id='acq-invoice-summary-toggle-off'>[% l('Hide Details') %]</button>
            <span class="hidden" id="ident-validation-spinner"><img src="[% ctx.media_prefix %]/opac/images/progressbar_green.gif" style="height: 16px; width: 16px" /></span>
            <div id='acq-view-invoice-div'></div>
        </div>
        <div id='acq-invoice-summary-small'>
            <button id='acq-invoice-summary-toggle-on'>[% l('Show Details') %]</button>
            <span style='font-weight:bold; font-size:120%' id='acq-invoice-summary-name'></span>
            <br/>
            <br/>
        </div>
    </div>

    <!--
    <div dojoType="dijit.layout.ContentPane" layoutAlign="client">
    -->

        <div dojoType="dijit.layout.TabContainer" style="width: 96%; height: 100%;" doLayout='false'>
            <div dojoType="dijit.layout.ContentPane" 
                class='oils-acq-detail-content-pane' title="Invoice" selected='true'>

                <script type='dojo/connect' event='onShow'>
                    // the table is left at display=none on subsequent tab views
                    dojo.byId('oils-acq-invoice-table').style.display = 'table'
                </script>

                <table id='oils-acq-invoice-table' class='oils-acq-invoice-table'>
                    <thead/>
                    <tbody id='acq-invoice-entry-header' class='hidden'>
                        <tr>
                            <td colspan='0'>
                                <h3>
                                    [% l('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-per-copy-col'>Per Copy</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' nowrap='nowrap'>
                                <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'></div></td>
                            <td><div name='amount_paid_per_copy'>0.00</div></td>
                            <td class='acq-invoice-paid-col'><div name='amount_paid'></div></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/>
                            <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'></div></td>
                            <td class='acq-invoice-center-col'><div name='fund'></div></td>
                            <td><div name='title'></div></td>
                            <td class='acq-invoice-center-col acq-invoice-billed-col'><div name='cost_billed'></div></td>
                            <td/>
                            <td class='acq-invoice-paid-col'><div name='amount_paid'></div></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 acq-invoice-billed-col'>Total</th>
                            <th/>
                            <th class='acq-invoice-paid-col'>Total</th>
                            <th class='acq-invoice-center-col 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();'>[% l('Save') %]</button>
                                <button jsId='invoiceSaveButton' class='hide-complete'
                                    dojoType='dijit.form.Button' onclick='saveChanges({clear:true});'>[% l('Save &amp; Clear') %]</button>
                                <button jsId='invoiceProrateButton' class='hide-complete'
                                    dojoType='dijit.form.Button' onclick='saveChanges({prorate:true});'>[% l('Prorate') %]</button>
                                <button jsId='invoiceCloseButton' class='hide-complete'
                                    dojoType='dijit.form.Button' onclick='saveChanges({close:true});'>[% l('Close') %]</button>
                                <span class='hidden' id='acq-invoice-reopen-button-wrapper'>
                                    <button jsId='invoiceReopenButton' 
                                        dojoType='dijit.form.Button' onclick='saveChanges({reopen:true});'>[% l('Reopen') %]</button>
                                </span>
                            </td>
                            <td class='acq-invoice-center-col'><div id='acq-total-invoiced-box'></div></td>
                            <td/>
                            <td class='acq-invoice-paid-col'><div id='acq-total-paid-box'></div></td>
                            <td class='acq-invoice-center-col'><div id='acq-total-balance-box'></div></td>
                        </tr>
                    </tbody>
                </table>
            </div> <!-- tab 1 -->

            <div dojoType="dijit.layout.ContentPane" 
                class='oils-acq-detail-content-pane' title="Search">
    
                <script type='dojo/connect' event='onShow'>
                    // hide summary info when opening the search tab
                    dojo.byId('acq-invoice-summary-toggle-off').onclick();
                    renderUnifiedSearch();
                </script>


                <!-- slim, inline unified search UI -->
                <div id='oils-acq-invoice-search' _class='hidden'>

                    <div id="acq-unified-form">
                        <div>
                            <label for="acq-unified-result-type">[% l('Search for') %]</label>
                            <select id="acq-unified-result-type" disabled='disabled'>
                                <option value="lineitem">line items</option>
                            </select>
                            <label for="acq-unified-conjunction">matching</label>
                            <select id="acq-unified-conjunction">
                                <option value="and">all</option>
                                <option value="or">any</option>
                            </select>
                            <label for="acq-unified-conjunction">
                                of the following terms:
                            </label>
                        </div>
                        <div id="acq-unified-terms">
                            <table id="acq-unified-terms-table">
                                <tbody id="acq-unified-terms-tbody">
                                    <tr id="acq-unified-terms-row-tmpl"
                                        class="acq-unified-terms-row">
                                        <td name="selector"
                                            class="acq-unified-terms-selector"></td>
                                        <td name="match"
                                            class="acq-unified-terms-match">
                                            <select>
                                                <option value="">is</option>
                                                <option value="__not">is NOT</option>
                                                <option value="__fuzzy" disabled="disabled">
                                                    contains
                                                </option>
                                                <option value="__not,__fuzzy"
                                                    disabled="disabled">
                                                    does NOT contain
                                                </option>
                                                <option value="__lte" disabled="disabled">
                                                    is on or BEFORE
                                                </option>
                                                <option value="__gte" disabled="disabled">
                                                    is on or AFTER
                                                </option>
                                                <option value="__in" disabled="disabled">
                                                    matches a term from a file
                                                </option>
                                            </select>
                                        </td>
                                        <td name="widget"
                                            class="acq-unified-terms-widget"></td>
                                        <td name="remove"
                                            class="acq-unified-terms-remove"></td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <div id="acq-unified-add-term">
                            <button onclick="termManager.addRow()">Add Search Term</button>
                        </div>
                        <table width='100%'><tr>
                            <td align='left'>
                                <button onclick="performSearch(0)">[% l('Search') %]</button>
                                <button onclick='addSelectedToInvoice()'>
                                    [% l('Add Selected Items to Invoice') %]
                                </button>
                                <span id='acq-inv-search-prev'>
                                    <a href='javascript:performSearch(-1)'>[% l('Previous') %]</a>
                                </span>
                                <span>
                                    <a href='javascript:performSearch(1)'>[% l('Next') %]</a>
                                </span>
                            </td>
                            <td align='right'>
                                <input type='checkbox' id='acq-invoice-search-sort-title'/>
                                [% l('Sort by title') %]
                                <span style='padding-left:8px;'>
                                <input type='checkbox' id='acq-invoice-search-limit-invoiceable' checked='checked'/>
                                [% l('Limit to Invoiceable Items') %]
                            </td>
                        </tr></table>
                    </div> <!-- end search form -->
                    <div style='border-bottom:1px solid #888;'>
                        <input type='checkbox' onclick='selectSearchResults()'>&nbsp;[% l('Select All') %]</input>
                    </div>
                    <div id='acq-unified-results-no_results'>
                        <b>[% l('No Results') %]</b>
                    </div>
                    <div id='acq-unified-results-lineitem'>
                        <style>
                            #acq-invoice-search-results-tbody  { width: 100%; }
                            #acq-invoice-search-results-tbody td { 
                                padding: 5px; 
                                border-bottom: 1px solid #888;
                            }
                            .search-resutls-select-td {
                                padding-right: 8px; border-right: 2px solid #888;
                            }
                            .search-results-content-td {
                                padding-left: 8px; border-left: 2px solid #888; 
                            }
                            .search-results-already-invoiced {
                                background-color: #E99;
                            }
                        </style>
                        <table>
                            <tbody id='acq-invoice-search-results-tbody'>
                                <tr id='acq-invoice-search-results-tr'>
                                    <td class='search-resutls-select-td'>
                                        <input type='checkbox' name='search-results-checkbox'/>
                                    </td>
                                    <td class='search-results-content-td'>
                                        <div name='search-results-content-div'>
                                            <img src='[% ctx.media_prefix %]/opac/images/progressbar_green.gif'/>
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div> <!-- tab 2 -->
        </div> <!-- end tabcontainer -->
    <!--</div>--> <!-- end contentpane -->
</div>
<div dojoType='openils.widget.ProgressDialog' jsId='progressDialog'></div>
<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">
    var invoiceId = '[% ctx.page_args.0 %]';
    window.unifiedSearchExternalMode = true;
</script>
<script type="text/javascript" src="[% ctx.media_prefix %]/js/ui/default/acq/common/base64.js"></script>
<script type="text/javascript" src="[% ctx.media_prefix %]/js/ui/default/acq/search/unified.js"></script>
<script type="text/javascript" src='[% ctx.media_prefix %]/js/ui/default/acq/invoice/view.js'> </script>
[% END %]