{% extends "ereuse_devicehub/base_site.html" %}
{% block main %}

<div class="pagetitle">
  <h1>Inventory</h1>
  <nav>
    <ol class="breadcrumb">
      <li class="breadcrumb-item"><a href="{{ url_for('inventory.devicelist')}}">Inventory</a></li>
      {% if not lot %}
      <li class="breadcrumb-item active">Unassgined</li>
      {% elif lot.is_temporary %}
      <li class="breadcrumb-item active">Temporary Lot</li>
      <li class="breadcrumb-item active">{{ lot.name }}</li>
      {% elif lot.is_incoming %}
      <li class="breadcrumb-item active">Incoming Lot</li>
      <li class="breadcrumb-item active">{{ lot.name }}</li>
      {% elif lot.is_outgoing %}
      <li class="breadcrumb-item active">Outgoing Lot</li>
      <li class="breadcrumb-item active">{{ lot.name }}</li>
      {% endif %}
    </ol>
  </nav>
</div><!-- End Page Title -->

<section class="section profile">
  <div class="row">

    <div class="col-xl-12">

      {% if lot %}
      <div class="card">
        <div class="card-body pt-3">
          <!-- Bordered Tabs -->

          <div class="d-flex align-items-center justify-content-between">
            <h3><a href="{{ url_for('inventory.lot_edit', id=lot.id) }}">{{ lot.name }}</a></h3>

            <div><!-- lot actions -->
              {% if lot.is_temporary %}
                <span class="d-none" id="activeRemoveLotModal" data-bs-toggle="modal" data-bs-target="#btnRemoveLots"></span>
                <a class="me-2" href="javascript:removeLot()">
                  <i class="bi bi-trash"></i> Remove Lot
                </a>
                <a class="me-2" href="javascript:newTrade('user_from')">
                  <i class="bi bi-arrow-down-right"></i> Add supplier
                </a>
                <a href="javascript:newTrade('user_to')">
                  <i class="bi bi-arrow-up-right"></i> Add receiver
                </a>
              {% endif %}
            </div>
          </div>
        </div>
      </div>
      {% endif %}
      <div class="card">
        <div class="card-body pt-3" style="min-height: 650px;">
          <!-- Bordered Tabs -->
          {% if lot and not lot.is_temporary %}
          <ul class="nav nav-tabs nav-tabs-bordered">

            <li class="nav-item">
              <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#devices-list">Devices</button>
            </li>

            <li class="nav-item">
              <button class="nav-link" data-bs-toggle="tab" data-bs-target="#trade-documents-list">Documents</button>
            </li>

          </ul>
          {% endif %}
          <div class="tab-content pt-5">
            <div id="devices-list" class="tab-pane fade devices-list active show">

              <div class="btn-group dropdown ml-1">
                <button id="btnLots" type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
                  <i class="bi bi-folder2"></i>
                  Lots
                  <span class="caret"></span>
                </button>
                <span class="d-none" id="activeTradeModal" data-bs-toggle="modal" data-bs-target="#tradeLotModal"></span>
                <ul class="dropdown-menu" aria-labelledby="btnLots">
                  <li>
                    <a href="javascript:void()" class="dropdown-item" data-bs-toggle="modal" data-bs-target="#addingLotModal">
                      <i class="bi bi-plus"></i>
                      Add selected Devices to a lot
                    </a>
                  </li>
                  <li>
                    <a href="javascript:void()" class="dropdown-item" data-bs-toggle="modal" data-bs-target="#removeLotModal">
                      <i class="bi bi-x"></i>
                      Remove selected devices from a lot
                    </a>
                  </li>
                </ul>
              </div>
              <div class="btn-group dropdown ml-1" uib-dropdown="">
                <button id="btnActions" type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
                    <i class="bi bi-plus"></i>
                    New Actions
                </button>
                <span class="d-none" id="activeActionModal" data-bs-toggle="modal" data-bs-target="#actionModal"></span>
                <span class="d-none" id="activeAllocateModal" data-bs-toggle="modal" data-bs-target="#allocateModal"></span>
                <span class="d-none" id="activeDatawipeModal" data-bs-toggle="modal" data-bs-target="#datawipeModal"></span>
                <ul class="dropdown-menu" aria-labelledby="btnActions">
                  <li>
                      Status actions
                  </li>
                  <li>
                    <a href="javascript:newAction('Recycling')" class="dropdown-item">
                      <i class="bi bi-recycle"></i>
                      Recycling
                    </a>
                  </li>
                  <li>
                    <a href="javascript:newAction('Use')" class="dropdown-item">
                      <i class="bi bi-play-circle-fill"></i>
                      Use
                    </a>
                  </li>
                  <li>
                    <a href="javascript:newAction('Refurbish')" class="dropdown-item">
                      <i class="bi bi-tools"></i>
                      Refurbish
                    </a>
                  </li>
                  <li>
                    <a href="javascript:newAction('Management')" class="dropdown-item">
                      <i class="bi bi-mastodon"></i>
                      Management
                    </a>
                  </li>
                  <li>
                      Allocation
                  </li>
                  <li>
                    <a href="javascript:newAllocate('Allocate')" class="dropdown-item">
                      <i class="bi bi-house-fill"></i>
                      Allocate
                    </a>
                  </li>
                  <li>
                    <a href="javascript:newAllocate('Deallocate')" class="dropdown-item">
                      <i class="bi bi-house"></i>
                      Deallocate
                    </a>
                  </li>
                  <li>
                      Physical actions
                  </li>
                  <li>
                    <a href="javascript:newAction('ToPrepare')" class="dropdown-item">
                      <i class="bi bi-tools"></i>
                      ToPrepare
                    </a>
                  </li>
                  <li>
                    <a href="javascript:newAction('Prepare')" class="dropdown-item">
                      <i class="bi bi-egg"></i>
                      Prepare
                    </a>
                  </li>
                  <li>
                    <a href="javascript:newDataWipe('DataWipe')" class="dropdown-item">
                      <i class="bi bi-eraser-fill"></i>
                      DataWipe
                    </a>
                  </li>
                  <li>
                    <a href="javascript:newAction('ToRepair')" class="dropdown-item">
                      <i class="bi bi-screwdriver"></i>
                      ToRepair
                    </a>
                  </li>
                  <li>
                    <a href="javascript:newAction('Ready')" class="dropdown-item">
                      <i class="bi bi-check2-all"></i>
                      Ready
                    </a>
                  </li>
                </ul>
              </div>

              <div class="btn-group dropdown ml-1" uib-dropdown="">
                <button id="btnExport" type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
                    <i class="bi bi-reply"></i>
                    Exports
                </button>
                <span class="d-none" id="exportAlertModal" data-bs-toggle="modal" data-bs-target="#exportErrorModal"></span>
                <ul class="dropdown-menu" aria-labelledby="btnExport">
                  <li>
                    <a href="javascript:export_file('devices')" class="dropdown-item">
                      <i class="bi bi-file-spreadsheet"></i>
                      Devices Spreadsheet
                    </a>
                  </li>
                  <li>
                    <a href="javascript:export_file('metrics')" class="dropdown-item">
                      <i class="bi bi-file-spreadsheet"></i>
                      Metrics Spreadsheet
                    </a>
                  </li>
                  <li>
                    <a href="javascript:export_file('links')" class="dropdown-item">
                      <i class="bi bi-link-45deg"></i>
                      Public Links
                    </a>
                  </li>
                  <li>
                    <a href="javascript:export_file('certificates')" class="dropdown-item">
                      <i class="bi bi-eraser-fill"></i>
                      Erasure Certificate
                    </a>
                  </li>
                </ul>
              </div>

              <div class="btn-group dropdown ml-1" uib-dropdown="">
                <button id="btnTags" type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
                    <i class="bi bi-tag"></i>
                    Tags
                </button>
                <span class="d-none" id="unlinkTagAlertModal" data-bs-toggle="modal" data-bs-target="#unlinkTagErrorModal"></span>
                <span class="d-none" id="addTagAlertModal" data-bs-toggle="modal" data-bs-target="#addingTagModal"></span>
                <ul class="dropdown-menu" aria-labelledby="btnTags">
                  <li>
                    <a href="javascript:addTag()" class="dropdown-item">
                      <i class="bi bi-plus"></i>
                      Add Tag to selected Device
                    </a>
                  </li>
                  <li>
                    <a href="javascript:removeTag()" class="dropdown-item">
                      <i class="bi bi-x"></i>
                      Remove Tag from selected Device
                    </a>
                  </li>
                  <li>
                    <form id="print_labels" method="post" action="{{ url_for('labels.print_labels') }}">
                      {% for f in form_print_labels %}
                        {{ f }}
                      {% endfor %}
                      <a href="javascript:$('#print_labels').submit()" class="dropdown-item">
                        <i class="bi bi-x"></i>
                        Print labels
                      </a>
                    </form>
                  </li>
                </ul>
              </div>

              <div class="btn-group dropdown ml-1" uib-dropdown="">
                <button id="btnSnapshot" type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
                    <i class="bi bi-laptop"></i>
                    New Device
                </button>
                <ul class="dropdown-menu" aria-labelledby="btnSnapshot">
                  <li>
                    {% if lot %}
                    <a href="{{ url_for('inventory.lot_upload_snapshot', lot_id=lot.id) }}" class="dropdown-item">
                    {% else %}
                    <a href="{{ url_for('inventory.upload_snapshot') }}" class="dropdown-item">
                    {% endif %}
                      <i class="bi bi-plus"></i>
                      Upload a new Snapshot
                    </a>
                  </li>
                  <li>
                    {% if lot %}
                    <a href="{{ url_for('inventory.lot_device_add', lot_id=lot.id) }}" class="dropdown-item">
                    {% else %}
                    <a href="{{ url_for('inventory.device_add') }}" class="dropdown-item">
                    {% endif %}
                      <i class="bi bi-plus"></i>
                      Create a new Device
                    </a>
                  </li>
                </ul>
              </div>

              {% if lot and not lot.is_temporary %}
              <div class="btn-group dropdown ml-1" uib-dropdown="">
                <button id="btnSnapshot" type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
                    <i class="bi bi-book"></i>
                    Documents
                </button>
                <ul class="dropdown-menu" aria-labelledby="btnSnapshot">
                  <li>
                    <a href="{{ url_for('inventory.trade_document_add', lot_id=lot.id)}}" class="dropdown-item">
                      <i class="bi bi-plus"></i>
                      Add new document
                      <span class="caret"></span>
                    </a>
                  </li>
                </ul>
              </div>
              {% endif %}

              <div class="tab-content pt-2">
                <form method="get">
                  <div class="d-flex mt-4 mb-4">
                    {% for f in form_filter %}
                      {{ f }}
                    {% endfor %}
                    <input type="submit" class="ms-2 btn btn-primary" value="Filter" />
                  </div>
                </form>

                <p class="mt-3">
                  Displaying devices of type
                  <em>{{ form_filter.filter.data or "Computer" }}</em>
                </p>

                <table class="table">
                  <thead>
                    <tr>
                      <th scope="col">Select</th>
                      <th scope="col">Title</th>
                      <th scope="col">DHID</th>
                      <th scope="col">Tags</th>
                      <th scope="col">Status</th>
                      <th scope="col" data-type="date" data-format="DD-MM-YYYY">Update</th>
                    </tr>
                  </thead>
                  <tbody>
                    {% for dev in devices %}
                    <tr>
                      <td>
                          <input type="checkbox" class="deviceSelect" data="{{ dev.id }}"
                               data-device-type="{{ dev.type }}" data-device-manufacturer="{{ dev.manufacturer }}"
                               data-device-dhid="{{ dev.devicehub_id }}"
                               {% if form_new_allocate.type.data and dev.id in list_devices %}
                                 checked="checked"
                               {% endif %}
                               />
                      </td>
                      <td>
                        <a href="{{ url_for('inventory.device_details', id=dev.devicehub_id)}}">
                          {{ dev.verbose_name }}
                        </a>
                      </td>
                      <td>
                        <a href="{{ url_for('inventory.device_details', id=dev.devicehub_id)}}">
                          {{ dev.devicehub_id }}
                        </a>
                      </td>
                      <td>
                        {% for t in dev.tags | sort(attribute="id") %}
                         <a href="{{ url_for('labels.label_details', id=t.id)}}">{{ t.id }}</a>
                         {% if not loop.last %},{% endif %}
                        {% endfor %}
                      </td>
                      <td>{% if dev.status %}{{ dev.status }}{% endif %}</td>
                      <td>{{ dev.updated.strftime('%H:%M %d-%m-%Y') }}</td>
                    </tr>
                    {% endfor %}
                  </tbody>
                </table>

                </div>
              </div>
              {% if lot and not lot.is_temporary %}
              <div id="trade-documents-list" class="tab-pane fade trade-documents-list">
                <h5 class="card-title">Documents</h5>
                <table class="table">
                  <thead>
                    <tr>
                      <th scope="col">File</th>
                      <th scope="col" data-type="date" data-format="DD-MM-YYYY">Uploaded on</th>
                    </tr>
                  </thead>
                  <tbody>
                    {% for doc in lot.trade.documents %}
                    <tr>
                      <td>
                        {% if doc.url.to_text() %}
                          <a href="{{ doc.url.to_text() }}" target="_blank">{{ doc.file_name}}</a>
                        {% else %}
                          {{ doc.file_name}}
                        {% endif %}
                      </td>
                      <td>
                          {{ doc.created.strftime('%H:%M %d-%m-%Y')}}
                      </td>
                    </tr>
                    {% endfor %}
                  </tbody>
                </table>
              </div>
              {% endif %}

            </div><!-- End Bordered Tabs -->
          </div>
        </div>
      </div>

    </div>
  </div>
</section>
{% include "inventory/addDeviceslot.html" %}
{% include "inventory/addDevicestag.html" %}
{% include "inventory/removeDeviceslot.html" %}
{% include "inventory/removelot.html" %}
{% include "inventory/actions.html" %}
{% include "inventory/allocate.html" %}
{% include "inventory/data_wipe.html" %}
{% include "inventory/trade.html" %}
{% include "inventory/alert_export_error.html" %}
{% include "inventory/alert_unlink_tag_error.html" %}

<!-- Custom Code -->
<script>
  const table = new simpleDatatables.DataTable("table")
</script>
<script src="{{ url_for('static', filename='js/main_inventory.js') }}"></script>
{% endblock main %}