<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8" />
        <title id="title"></title>
        
        
        <!-- Material Icons -->
        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
        <!-- Material Symbols - Outlined Set -->
        <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet" />
        <!-- Material Symbols - Rounded Set -->
        <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded" rel="stylesheet" />
        <!-- Material Symbols - Sharp Set -->
        <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp" rel="stylesheet" />
        
        <link rel="stylesheet" href="{{ url_for('static', filename='css/uikit.min.css') }}"/>

        <script src="{{ url_for('static', filename='js/uikit.min.js') }}"></script>
        <script src="{{ url_for('static', filename='js/uikit-icons.min.js') }}"></script>

    </head>


    <body>
        <div uk-sticky="sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky">
            <nav class="uk-navbar-container">
                <div class="uk-container uk-container-expand">
                    <div uk-navbar="dropbar: true">
                        <div id="offcanvas-slide" uk-offcanvas="mode: slide; overlay: true">
                            <div class="uk-offcanvas-bar uk-flex uk-flex-column">
                                <ul class="uk-nav uk-nav-secondary">  
                                    <img class="uk-align-center uk-border-circle" data-src="{{ url_for('static', filename='pictures/logo.jpg') }}" style="width: 150px; height: auto;" uk-img />
                                    <li class="uk-nav-header">Apps</li>
                                    <li><a href="/shopping-lists">Shopping Lists</a></li>
                                    <li><a href="/recipes">Recipes</a></li>
                                    <li class="uk-nav-header">Logistics</li>
                                    <li><a href="/items">Items</a></li>
                                    <li><a href="/transaction">Add Transaction</a></li>
                                    <li><a href="/workshop">Workshop</a></li>
                                    <li><a href="/receipts"><div class="uk-active">Receipts<div class="uk-nav-subtitle" disabled>You are currently editing a Receipt...</div></div></a></li>
                                    <li class="uk-nav-header">System Management</li>
                                    {% if system_admin %}
                                    <li><a href="/admin">Administration</a></li>
                                    {% endif %}
                                    <li><a href="" class="">{{username}}</a></li>
                                </ul>
                                <button class="uk-button uk-margin-small uk-position-top-right" uk-icon="icon: close" href=""></button>
                            </div>
                        </div>
                        <div class="uk-navbar-left uk-margin-small">
                            <a href="#offcanvas-slide" class="uk-button uk-button-default uk-button-small" uk-icon="icon: menu" uk-toggle></a>
                        </div>
                        <div class="uk-navbar-center uk-margin-small uk-visible@m">
                            <ul class="uk-breadcrumb">
                                <li style="cursor: default; user-select: none;"><span><strong>{{current_site}}</strong></span></li>
                                <li style="cursor: default; user-select: none;"><span>Logistics</span></li>
                                <li><a href="/receipts">Receipts</a></li>
                                <li class="uk-disabled"><span id="crumbID"></span></li>
                            </ul>
                        </div>
                        <div class="uk-navbar-right">
                            <a href="" class="" uk-icon="icon: user" uk-toggle>{{username}}</a>
                        </div>
                    </div>
                </div>
            </nav>
        </div>
        <div class="uk-container">
            <div class="uk-section">
                <div uk-grid>
                    <div class="uk-width-1-1">
                        <h1 class="uk-heading" id="receipt_id">test</h1>
                    </div>
                    <div class="uk-width-1-1 uk-margin-remove">
                        <hr class="uk-divider-icon">
                    </div>
                    <div class="uk-width-1-1 uk-margin-remove">
                        <p class="uk-text-meta">This is the basic information that is attached to your receipt. You can change the Vendor associated, manipulate your receipt lines,
                            and attach files to a receipt. Once a receipt has been fully resolved there is no way to reopen it without admin help so be sure to only 
                            resolve the receipt once you are sure you no longer need to change its information.
                        </p>
                    </div>
                    <div class="uk-width-1-1" uk-grid>
                        <div class="uk-width-1-2@m uk-margin-remove" uk-grid>
                            <div class="uk-width-1-1 uk-margin-remove">
                                <label class="uk-form-label" for="database_id">Database ID</label>
                                <div class="uk-form-controls">
                                    <input class="uk-input uk-disabled uk-form-blank" id="database_id" type="text" placeholder="Some text..." value="####">
                                </div>
                            </div>
                            <div class="uk-width-1-1 uk-margin-remove">
                                <label class="uk-form-label" for="date_submitted">Date Submitted</label>
                                <div class="uk-form-controls">
                                    <input class="uk-input uk-disabled uk-form-blank" id="date_submitted" type="text" placeholder="Some text..." value="####">
                                </div>
                            </div>
                            <div class="uk-width-1-1 uk-margin-remove">
                                <label class="uk-form-label" for="submitted_by">Submitted By</label>
                                <div class="uk-form-controls">
                                    <input class="uk-input uk-disabled uk-form-blank" id="submitted_by" type="text" placeholder="Some text..." value="####">
                                </div>
                            </div>
                            <div class="uk-width-1-1 uk-margin-remove">
                                <label class="uk-form-label" for="receipt_status">Receipt Status</label>
                                <div class="uk-form-controls">
                                    <input class="uk-input uk-disabled uk-form-blank" id="receipt_status" type="text" placeholder="Some text..." value="####">
                                </div>
                            </div>
                            <div class="uk-width-1-1 uk-margin-remove">
                                <button id="resolveReceiptButton" onclick="resolveReceipt()" class="uk-button uk-button-default">Resolve Receipt</button>
                            </div>
                        </div>
                        <div class="uk-width-1-2@m uk-grid-small uk-margin-remove" uk-grid>
                            <div id="vendorSelectDiv" class="uk-width-1-2@m">
                                <label class="uk-form-label" for="vendor_id">Vendor ID</label>
                                <input class="uk-input uk-disabled" id="vendor_id" type="text" placeholder="Some text..." value="####">
                            </div>
                            <div id="vendorSelectButton" class="uk-width-1-2@m uk-flex uk-flex-bottom uk-margin">
                                <button onclick="openVendorsSelectModal()" class="uk-button">Select Vendor</button>
                            </div>
                            <div class="uk-width-1-1 uk-margin-remove">
                                <label class="uk-form-label" for="vendor_name">Vendor Name</label>
                                <div class="uk-form-controls">
                                    <input class="uk-input uk-disabled uk-form-blank" id="vendor_name" type="text" placeholder="Some text..." value="####">
                                </div>
                            </div>
                            <div class="uk-width-1-1 uk-margin-remove">
                                <label class="uk-form-label" for="vendor_address">Vendor Address</label>
                                <div class="uk-form-controls">
                                    <input class="uk-input uk-disabled uk-form-blank" id="vendor_address" type="text" placeholder="Some text..." value="####">
                                </div>
                            </div>
                            <div class="uk-width-1-1 uk-margin-remove">
                                <label class="uk-form-label" for="vendor_phone">Vendor Phone Number</label>
                                <div class="uk-form-controls">
                                    <input class="uk-input uk-disabled uk-form-blank" id="vendor_phone" type="text" placeholder="Some text..." value="####">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="uk-width-1-1">
                        <ul class="uk-child-width-expand" uk-tab>
                            <li class="uk-active"><a href="#">Lines</a></li>
                            <li><a href="#">Files</a></li>
                        </ul>
                        <div class="uk-switcher">
                            <!-- Lines -->
                            <div class="uk-grid-small" uk-grid>
                                <div class="uk-width-1-2@m">
                                    <p class="uk-text-meta">Here is where all the lines on this receipt are added, changed, manipulated, and resolved. Once a Line
                                        has been resolved, deleted, denied it cannot be opened again so proceed with caution.
                                    </p>
                                </div>
                                <div class="uk-width-1-2@m uk-flex uk-flex-right@m">
                                    <button id="lineAddButton" class="uk-button uk-button-default" type="button">Add Line <span uk-icon="icon: triangle-down"></span></button>
                                    <div id="addLineDropDown" uk-dropdown="mode: click">
                                        <ul class="uk-nav uk-dropdown-nav">
                                            <li><a onclick="openCustomModal()">Custom</a></li>
                                            <li><a onclick="openSKUModal()">SKU</a></li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="uk-width-1-1" >
                                    <caption>These are your Unresolved Lines</caption>
                                    <table id="unresolvedTable" class="uk-table uk-table-striped uk-table-middle uk-table-responsive">
                                        <thead>
                                            <tr>
                                                <th class="uk-table-shrink">Status</th>
                                                <th class="uk-table-shrink">Barcode</th>
                                                <th class="uk-table-shrink">Type</th>
                                                <th class="uk-table-expand uk-text-truncate">Name</th>
                                                <th>Operations</th>
                                            </tr>
                                        </thead>
                                        <tbody id="linesTableBody"></tbody>
                                    </table>
                                    
                                </div>
                                <div class="uk-width-1-1">
                                    <hr class="uk-divider-icon">
                                </div>
                                <div class="uk-width-1-1">
                                    <caption>These are your Resolved Lines</caption>
                                    <table class="uk-table uk-table-striped uk-table-middle uk-table-responsive">
                                        <thead>
                                            <tr>
                                                <th class="uk-table-shrink">Status</th>
                                                <th class="uk-table-shrink">Barcode</th>
                                                <th class="uk-table-shrink">Type</th>
                                                <th class="uk-table-expand uk-text-truncate">Name</th>
                                                <th>Operations</th>
                                            </tr>
                                        </thead>
                                        <tbody id="resolvedTableBody"></tbody>
                                    </table>
                                </div>
                                <div class="uk-width-1-1">
                                    <hr class="uk-divider-icon">
                                </div>
                                <div class="uk-width-1-1">
                                    <caption>These are your Denied Lines</caption>
                                    <table class="uk-table uk-table-striped uk-table-middle uk-table-responsive">
                                        <thead>
                                            <tr>
                                                <th class="uk-table-shrink">Status</th>
                                                <th class="uk-table-shrink">Barcode</th>
                                                <th class="uk-table-shrink">Type</th>
                                                <th class="uk-table-expand uk-text-truncate">Name</th>
                                                <th>Operations</th>
                                            </tr>
                                        </thead>
                                        <tbody id="deniedTableBody"></tbody>
                                    </table>
                                </div>
                            </div>
                            <!-- Files -->
                            <div>
                                <div class="uk-grid-small" uk-grid>
                                    <div class="uk-width-1-1 uk-margin">
                                        <p class="uk-text-meta">You may upload whatever files you may want to attach to a receipt to later download and view them.</p>
                                    </div>
                                    <div class="uk-width-1-1 uk-margin">
                                        <div id="fileUploadForm"uk-form-custom="target: true">
                                            <input type="file" aria-label="Custom controls">
                                            <input class="uk-input" type="text" placeholder="Select file" aria-label="Custom controls" disabled>
                                        </div>
                                        <button id="fileUploadButton" onclick="uploadFile()" class="uk-button uk-button-default">Submit</button>
                                    </div>
                                    <div class="uk-width-1-1 uk-margin">
                                        <div id="fileCards" class="uk-child-width-1-2@m uk-grid-small" uk-grid>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- SKU Modal -->
        <div id="itemsModal" class="uk-modal-container" uk-modal>
            <div id="itemsModalInner" class="uk-modal-dialog uk-modal-body " uk-overflow-auto>
                <h2 class="uk-modal-title">Select Item</h2>
                <p>Select an Item from the system...</p>
                <nav aria-label="Pagination">
                    <ul id="itemsPage" class="uk-pagination uk-flex-center" uk-margin>
                        <li><a href="#"><span uk-pagination-previous></span></a></li>
                        <li><a href="#">1</a></li>
                        <li class="uk-disabled"><span>…</span></li>
                        <li><a href="#">5</a></li>
                        <li><a href="#">6</a></li>
                        <li class="uk-active"><span aria-current="page">7</span></li>
                        <li><a href="#">8</a></li>
                        <li><a href="#"><span uk-pagination-next></span></a></li>
                    </ul>
                </nav>
                <table class="uk-table uk-table-striped uk-table-hover">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Barcode</th>
                            <th>Name</th>
                        </tr>
                    </thead>
                    <tbody id="itemsTableBody">
                    </tbody>
                </table>
            </div>
        </div>
        <!-- SKU LinkedList Modal -->
        <div id="linksModal" class="uk-modal-container" uk-modal>
            <div id="linksModalInner" class="uk-modal-dialog uk-modal-body " uk-overflow-auto>
                <h2 class="uk-modal-title">Select Linked List</h2>
                <p>Select an Linked List from the system...</p>
                <nav aria-label="Pagination">
                    <ul id="linksPage" class="uk-pagination uk-flex-center" uk-margin>
                        <li><a href="#"><span uk-pagination-previous></span></a></li>
                        <li><a href="#">1</a></li>
                        <li class="uk-disabled"><span>…</span></li>
                        <li><a href="#">5</a></li>
                        <li><a href="#">6</a></li>
                        <li class="uk-active"><span aria-current="page">7</span></li>
                        <li><a href="#">8</a></li>
                        <li><a href="#"><span uk-pagination-next></span></a></li>
                    </ul>
                </nav>
                <table class="uk-table uk-table-striped uk-table-hover">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Barcode</th>
                            <th>Name</th>
                            <th>Conversion Factor</th>
                            <th>Operations</th>
                        </tr>
                    </thead>
                    <tbody id="linksTableBody">
                    </tbody>
                </table>
            </div>
        </div>
        <!-- Line Edit Modal-->
        <div id="lineEditModal" class="uk-modal-container" uk-modal>
            <div class="uk-modal-dialog uk-modal-body">
                <h2 class="uk-modal-title">Edit Line...</h2>
                <p class="uk-text-meta">Edit any fields here for the selected Line and then save them.</p>
                <table class="uk-table uk-table-responsive uk-table-striped">
                    <thead>
                        <tr>
                            <th></th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>Name</td>
                            <td><input id="lineName" class="uk-input" type="text"></td>
                        </tr>
                        <tr>
                            <td>QTY</td>
                            <td><input id="lineQty" class="uk-input" type="text"></td>
                        </tr>
                        <tr>
                            <td>UOM</td>
                            <td>
                                <select id="lineUOM" class="uk-select" aria-label="Select">
                                    {% for unit in units %}
                                        <option value="{{unit['id']}}">{{unit['fullname']}}</option>
                                    {% endfor %}
                                </select>
                            </td>
                        </tr>
                        <tr>
                            <td>COST</td>
                            <td><input id="lineCost" class="uk-input" type="text"></td>
                        </tr>
                        <tr>
                            <td>EXPIRES</td>
                            <td><input id="lineExpires" class="uk-input" type="date"></td>
                        </tr>
                    </tbody>
                </table>
                <p class="uk-text-right">
                    <button class="uk-button uk-button-default uk-modal-close" type="button">Cancel</button>
                    <button id="saveLineButton" class="uk-button uk-button-primary" type="button">Save</button>
                </p>
            </div>
        </div>
        <!-- file view i fram-->
        <div id="iframeModal" uk-modal>
            <div class="uk-modal-dialog uk-width-auto">
                <button class="uk-modal-close-default" type="button" uk-close></button>
                <div class="uk-modal-header">
                    <h2 id="filenameiframemodal" class="uk-modal-title">Headline</h2>
                </div>
                <div style="height: 75vh;" id="iframeModalBody" class="uk-modal-body">
                </div>
            </div>
        </div>
        <!-- Vendors Select Modal -->
        <div id="vendorsModal" class="uk-modal-container" uk-modal>
            <div id="vendorsModalInner" class="uk-modal-dialog uk-modal-body " uk-overflow-auto>
                <h2 class="uk-modal-title">Select Vendor</h2>
                <p>Select an Vendor from the system...</p>
                <nav aria-label="Pagination">
                    <ul id="vendorsPage" class="uk-pagination uk-flex-center" uk-margin>
                        <li><a href="#"><span uk-pagination-previous></span></a></li>
                        <li><a href="#">1</a></li>
                        <li class="uk-disabled"><span>…</span></li>
                        <li><a href="#">5</a></li>
                        <li><a href="#">6</a></li>
                        <li class="uk-active"><span aria-current="page">7</span></li>
                        <li><a href="#">8</a></li>
                        <li><a href="#"><span uk-pagination-next></span></a></li>
                    </ul>
                </nav>
                <table class="uk-table uk-table-striped uk-table-hover">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Name</th>
                            <th>Phone #</th>
                            <th>Address</th>
                        </tr>
                    </thead>
                    <tbody id="vendorsTableBody">
                    </tbody>
                </table>
            </div>
        </div>
    </body>
    <script src="{{ url_for('static', filename='handlers/receiptHandler.js') }}"></script>
    <script>const receipt_id = {{id|tojson}}</script>
</html>