<!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') }}"/>

        {% if session['user']['flags']['darkmode'] %}
        <link id="dark-mode" rel="stylesheet" href="{{ url_for('static', filename='css/dark-mode.css') }}"/>
        {% endif %}

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

    </head>

    {% if session['user']['flags']['darkmode'] %}
    <body class="uk-light">
    {% else %}
    <body>
    {% endif %}
        <nav class="uk-navbar-container">
            <div class="uk-container uk-container-expand">
                <div class="uk-navbar uk-navbar-primary">
                    <!-- Application Navigation-->
                    <div class="uk-navbar-left">
                        <ul class="uk-navbar-nav">
                            <li>
                                <a href>Apps</a>
                                <div class="uk-navbar-dropdown" uk-drop="mode: click; multi:false">
                                    <ul class="uk-nav uk-navbar-dropdown-nav">
                                        <li><a href="/recipes">Recipes</a></li>
                                        <li><a href="/shopping-lists">Shopping Lists</a></li>
                                        <li class="uk-nav-header">Logistics</li>
                                        <li><a href="/items">Items</a></li>
                                        <li><a href="/items/transaction">Transaction</a></li>
                                        <li><a href="/receipts">Receipts</a></li>
                                        <li class="uk-nav-header">Points of Ease</li>
                                        <li><a href="/poe/scanner">Transaction Scanner</a></li>
                                        <li><a href="/poe/receipts">Receipts Scanner</a></li>
                                    </ul>
                                </div>
                            </li>
                        </ul>

                    </div>
                    <!-- Breadcrumbs Navigation -->
                    <div class="uk-navbar-center uk-visible@m">
                        <ul class="uk-breadcrumb uk-margin-remove">
                            <li class="uk-disabled" style="cursor: pointer;"><span><strong>{{current_site}}</strong></span>
                                <div uk-dropdown="mode: hover">
                                    <ul class="uk-nav uk-dropdown-nav">
                                        <li class="uk-nav-header">Select Site</li>
                                        <li class="uk-nav-divider"></li>
                                        {% for site in sites %}
                                        {% if site == current_site %}
                                        <li><a class="uk-disabled" href="#">{{site}}</a></li>
                                        {% else %}
                                        <li><a onclick="changeSite('{{site}}')">{{site}}</a></li>
                                        {% endif %}
                                        {% endfor %}
                                    </ul>
                                </div>
                            </li>
                            <li style="cursor: default; user-select: none;" class="uk-disabled"><span>Logistics</span></li>
                            <li class="uk-disabled"><span>Receipts</span></li>
                            <li class="uk-disabled"><span>Processing Receipt</span></li>
                        </ul>
                    </div>
                    <!-- Profile/Management Navigation-->
                    <div class="uk-navbar-right">
                        <ul class="uk-navbar-nav">
                            <li>
                                <a href="#">
                                    <img src="{{session['user']['profile_pic_url']}}" alt="Profile Picture" class="profile-pic uk-visible@m" style="width: 40px; height: 40px; border-radius: 50%; margin-right: 5px;">
                                            {{username}}
                                </a>
                                <div class="uk-navbar-dropdown" uk-drop="mode: click; multi:false">
                                    <ul class="uk-nav uk-navbar-dropdown-nav">
                                        <li><a href="/profile">Profile</a></li>
                                        <li><a onclick="toggleDarkMode()">Dark Mode</a></li>
                                        <li><a href="/site-management">Site Management</a></li>
                                        <li><a href="/administration">System Management</a></li>
                                        <li><a href="/access/logout">Logout</a></li>
                                    </ul>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </nav>
        <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="openAddCustomLineModal()">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>
                <div id="searchItemsForm" onkeydown="ItemsModalSearch(event)" class="uk-search uk-search-default uk-align-center">
                    <input id="ItemsModalSearchInput" class="uk-search-input" type="search" placeholder="" aria-label="">
                    <span class="" uk-search-icon></span>
                </div>
                <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>
        <!-- ItemBarcodeSelect Modal -->
        <div id="ItemBarcodeSelectModal" class="uk-modal-container" uk-modal>
            <div id="ItemBarcodeSelectModalInner" 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 that you would like to associate this unknown barcode to...</p>
                <div id="ItemBarcodeSelectSearchForm" onkeydown="ItemBarcodeSelectModalSearch(event)" class="uk-search uk-search-default uk-align-center">
                    <input id="ItemBarcodeSelectSearchInput" class="uk-search-input" type="search" placeholder="" aria-label="">
                    <span class="" uk-search-icon></span>
                </div>
                <nav aria-label="Pagination">
                    <ul id="ItemBarcodeSelectModalPage" 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">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>In Exchange</th>
                            <th>Out Exchange</th>
                            <th>Descriptor</th>
                            <th>Operations</th>
                        </tr>
                    </thead>
                    <tbody id="ItemBarcodeSelectTable">
                    </tbody>
                </table>
            </div>
        </div>
        <!-- Custom Line Modal-->
        <div id="CustomLineModal" class="uk-modal-container" uk-modal>
            <div class="uk-modal-dialog uk-modal-body">
                <h2 class="uk-modal-title">Add a Custom Line...</h2>
                <p class="uk-text-meta">Custom lines are items where you would like to solely track them through receipts and nothing more. That means
                    that beyond saving the line on the receipt, nothing else will be saved, transacted, or handled by the over
                    all system. Keep that in mind as you choose to add a custom line.</p>
                <p class="uk-text-meta">Edit any fields here for the Custom Line and all the data will be saved.</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="CustomlineName" class="uk-input" type="text"></td>
                        </tr>
                        <tr>
                            <td>QTY</td>
                            <td><input id="CustomlineQty" class="uk-input" type="number"></td>
                        </tr>
                        <tr>
                            <td>UOM</td>
                            <td>
                                <select id="CustomlineUOM" 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="CustomlineCost" class="uk-input" type="text"></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="saveCustomLineButton" class="uk-button uk-button-primary" type="button">Save</button>
                </p>
            </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('receipt_api.static', filename='js/receiptHandler.js') }}"></script>
    <script>const receipt_id = {{id|tojson}}</script>
</html>