{% 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 %}
        {% if all_devices %}
          <li class="breadcrumb-item active">All devices</li>
        {% else %}
          <li class="breadcrumb-item active">Unassigned</li>
        {% endif %}
      {% elif lot.is_temporary %}
      <li class="breadcrumb-item active">Temporary</li>
      <li class="breadcrumb-item active">{{ lot.name }}</li>
      {% elif lot.is_incoming %}
      <li class="breadcrumb-item active">Incoming</li>
      <li class="breadcrumb-item active">{{ lot.name }}</li>
      {% elif lot.is_outgoing %}
      <li class="breadcrumb-item active">Outgoing</li>
      <li class="breadcrumb-item active">{{ lot.name }}</li>
      {% elif lot.is_shared %}
      <li class="breadcrumb-item active">Shared with me</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">

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

          <div class="d-flex align-items-center justify-content-between row">
            <div class="col-sm-12 col-md-5">
              <h3>
                <a href="{{ url_for('inventory.lot_edit', id=lot.id) }}">
                {{ lot.name }} {% if lot.is_shared %}<i class="bi bi-arrow-right"></i> {{ lot.owner.email }}{% endif %}
                </a>
              </h3>
            </div>

            <div class="col-sm-12 col-md-7 d-md-flex justify-content-md-end"><!-- lot actions -->
              {% if lot.is_temporary or not lot.transfer.closed %}

                {% if lot and lot.is_temporary %}
                    <a type="button" href="{{ url_for('inventory.lot_new_transfer', lot_id=lot.id, type_id='outgoing') }}" class="btn btn-primary doTransfer" >
                      Create Outgoing Lot
                    </a>
                    <a type="button" href="{{ url_for('inventory.lot_new_transfer', lot_id=lot.id, type_id='incoming') }}" class="btn btn-primary doTransfer">
                      Create Incoming Lot
                    </a>
                {% endif %}
                {% if not lot.is_shared %}
                <a class="text-danger" href="javascript:removeLot()">
                  <i class="bi bi-trash"></i> Delete Lot
                </a>
                <span class="d-none" id="activeRemoveLotModal" data-bs-toggle="modal" data-bs-target="#btnRemoveLots"></span>
                {% endif %}
              {% endif %}
            </div>
          </div>
        </div>
      {% endif %}
        <div class="card-body pt-3" style="min-height: 650px;">
          <!-- Bordered Tabs -->
          {% if lot %}
          <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>

            {% if lot and not lot.is_temporary and not lot.is_shared %}
            <li class="nav-item">
              <button class="nav-link" data-bs-toggle="tab" data-bs-target="#trade-documents-list">Documents</button>
            </li>

            {% if lot.transfer %}
            <li class="nav-item">
              <button class="nav-link" data-bs-toggle="tab" data-bs-target="#edit-transfer">
              Transfer ({% if lot.transfer.closed %}<span class="text-danger">Closed</span>{% else %}<span class="text-success">Open</span>{% endif %})
              </button>
            </li>
            <li class="nav-item">
              <button class="nav-link" data-bs-toggle="tab" data-bs-target="#edit-delivery-note">
                Delivery Note
              </button>
            </li>
            <li class="nav-item">
              <button class="nav-link" data-bs-toggle="tab" data-bs-target="#edit-receiver-note">
                Receiver Note
              </button>
            </li>
            <li class="nav-item">
              <button class="nav-link" data-bs-toggle="tab" data-bs-target="#edit-customer-details">
                Customer Details
              </button>
            </li>
            {% endif %}
            {% endif %}

          </ul>
          {% endif %}
          <div class="tab-content pt-1">
            <div id="devices-list" class="tab-pane fade devices-list active show">
              <label class="btn btn-primary " for="SelectAllBTN"><input type="checkbox" id="SelectAllBTN" autocomplete="off"></label>
              {% if not lot or not lot.is_shared %}
              <div class="btn-group dropdown ml-1">
                <button id="btnLots" type="button" onclick="processSelectedDevices()" 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" id="dropDownLotsSelector">
                  <div class="row w-100">
                    <div class="input-group mb-3 mx-2">
                      <div class="input-group-prepend">
                        <span class="input-group-text" id="basic-addon1"><i class="bi bi-search"></i></span>
                      </div>
                      <input type="text" class="form-control" id="lots-search" placeholder="search" aria-label="search" aria-describedby="basic-addon1">
                    </div>
                  </div>
                  <h6 class="dropdown-header">Select lots where to store the selected devices</h6>
                  <ul class="mx-3" id="LotsSelector"></ul>
                  <li><hr /></li>
                  <li>
                    <a href="#" class="dropdown-item" id="ApplyDeviceLots">
                      <i class="bi bi-check"></i>
                      Apply
                    </a>
                  </li>
                </ul>
              </div>
              <div class="btn-group dropdown m-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>
                    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('EraseDataWipe')" 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>
                  <li>
                    <a href="javascript:newAction('EWaste')" class="dropdown-item">
                      <i class="bi bi-trash-fill"></i>
                      E-Waste
                    </a>
                  </li>
                  <li>
                    <a href="javascript:newAction('Recycled')" class="dropdown-item">
                      <i class="bi bi-recycle"></i>
                      Recycled
                    </a>
                  </li>
                </ul>
              </div>

              <div class="btn-group dropdown m-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>
                    {% if not all_devices %}
                    <span class="dropdown-item" style="color: #999ea4;">
                      <i class="bi bi-file-spreadsheet"></i>
                      Devices Lots Spreadsheet
                    </span>
                    {% else %}
                    <a href="javascript:export_file('devices_lots')" class="dropdown-item">
                      <i class="bi bi-file-spreadsheet"></i>
                      Devices Lots Spreadsheet
                    </a>
                    {% endif %}
                  </li>
                  <li>
                    <a href="javascript:export_file('obada_standard')" class="dropdown-item">
                      <i class="bi bi-file-spreadsheet"></i>
                      Obada Standard Spreadsheet
                    </a>
                  </li>
                  <li>
                    <a href="javascript:export_file('certificates')" class="dropdown-item">
                      <i class="bi bi-eraser-fill"></i>
                      Device Sanitization
                    </a>
                  </li>
                </ul>
              </div>

              <div class="btn-group dropdown m-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>
                    Labels
                </button>
                <ul class="dropdown-menu" aria-labelledby="btnTags">
                  <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-printer"></i>
                        Print labels
                      </a>
                    </form>
                  </li>
                </ul>
              </div>

              <div class="btn-group dropdown m-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>
                    Placeholders
                </button>
                <ul class="dropdown-menu" aria-labelledby="btnSnapshot">
                  <li>
                    {% if lot %}
                    <a href="{{ url_for('inventory.lot_upload_placeholder', lot_id=lot.id) }}" class="dropdown-item">
                    {% else %}
                    <a href="{{ url_for('inventory.upload_placeholder') }}" class="dropdown-item">
                    {% endif %}
                      <i class="bi bi-upload"></i>
                      Upload Spreadsheet
                    </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
                    </a>
                  </li>
                </ul>
              </div>

              <div class="btn-group dropdown m-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>
                    Snapshots
                </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-upload"></i>
                      Upload files
                    </a>
                  </li>
                </ul>
              </div>
              {% endif %}
              {% if lot and lot.is_shared %}
              <div class="btn-group dropdown m-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>
                </ul>
              </div>
              {% endif %}

              <div id="select-devices-info" class="alert alert-info mb-0 mt-3 d-none" role="alert">
                If this text is showing is because there are an error
              </div>

              <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="hidden" class="d-none" value="1" name="page" />
                    <input type="hidden" class="d-none" value="{{ devices.per_page }}" name="per_page" />
                    <input type="submit" id="submit_filter" class="d-none 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>

                <div class="dataTable-top" style="float: left;">
                  <div class="dataTable-dropdown">
                    <label>
                      <select class="dataTable-selector">
                        <option value="5"{% if devices.per_page == 5 %} selected="selected"{% endif %}>
                          5
                        </option>
                        <option value="10"{% if devices.per_page == 10 %} selected="selected"{% endif %}>
                          10
                        </option>
                        <option value="15"{% if devices.per_page == 15 %} selected="selected"{% endif %}>
                          15
                        </option>
                        <option value="20"{% if devices.per_page == 20 %} selected="selected"{% endif %}>
                          20
                        </option>
                        <option value="25"{% if devices.per_page == 25 %} selected="selected"{% endif %}>
                          25
                        </option>
                        <option value="50"{% if devices.per_page == 50 %} selected="selected"{% endif %}>
                          50
                        </option>
                        <option value="100"{% if devices.per_page == 100 %} selected="selected"{% endif %}>
                          100
                        </option>
                      </select> entries per page
                    </label>
                  </div>
                  <div class="dataTable-search">
                  </div>
                </div>
                <div class="dataTable-container">
                <table class="table">
                  <thead>
                    <tr>
                      <th scope="col">Select</th>
                      <th scope="col">Title</th>
                      <th scope="col">DHID</th>
                      <th scope="col">PHID</th>
                      <th scope="col">Type</th>
                      <th scope="col">Unique Identifiers</th>
                      <th scope="col">Lifecycle Status</th>
                      <th scope="col">Allocated Status</th>
                      <th scope="col">Physical Status</th>
                      <th scope="col" data-type="date" data-format="YYYY-MM-DD">Updated in</th>
                      <th scope="col" data-type="date" data-format="YYYY-MM-DD hh:mm:ss">Registered in</th>
                      <th scope="col"></th>
                    </tr>
                  </thead>
                  <tbody>
                    {% for dev in devices.items %}
                    {% if dev.placeholder and (not dev.parent_id or dev.parent.placeholder.kangaroo) %}
                    <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 }}" data-device-vname="{{ dev.verbose_name }}"
                               {% 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)}}">
                        {% if dev.get_type_logo() %}
                        <i class="{{ dev.get_type_logo() }}" title="{{ dev.type }}"></i>
                        {% endif %}
                          {{ dev.verbose_name }}
                        </a>
                        {% if dev.lots | length > 0 %}
                        <h6 class="d-inline">
                          {% for lot in dev.get_lots_for_template() %}
                            <span class="badge rounded-pill bg-light text-dark">{{ lot }}</span>
                          {% endfor %}
                        </h6>
                        {% endif %}
                      </td>
                      <td>
                        <a href="{{ url_for('inventory.device_details', id=dev.devicehub_id)}}">
                          {{ dev.devicehub_id }}
                        </a>
                      </td>
                      <td>
                          {{ dev.binding and dev.binding.phid or dev.placeholder and dev.placeholder.phid  or '' }}
                      </td>
                      <td>
                          {{ dev.is_abstract() }}
                      </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.type }}{% endif %}</td>
                      <td>{% if dev.allocated_status %}{{ dev.allocated_status.type }}{% endif %}</td>
                      <td>{% if dev.physical_status %}{{ dev.physical_status.type }}{% endif %}</td>
                      <td>{{ dev.get_updated.strftime('%Y-%m-%d %H:%M:%S')}}</td>
                      <td>{{ dev.created.strftime('%Y-%m-%d %H:%M:%S')}}</td>
                      <td>
                        <a href="{{ dev.public_link }}" target="_blank">
                          <i class="bi bi-box-arrow-up-right"></i>
                        </a>
                      </td>
                    </tr>
                    {% endif %}
                    {% endfor %}
                  </tbody>
                </table>
                <div class="dataTable-bottom">
                  <div class="dataTable-info">
                    Showing {{ devices.first }} to {{ devices.last }} of {{ devices.total }} entries
                  </div>
                  <nav class="dataTable-pagination">
                    <ul class="dataTable-pagination-list">
                      {% if devices.has_prev %}
                        <li class="pager">
                          {% if all_devices %}
                            <a href="{{ url_for('inventory.alldevicelist', page=devices.prev_num, per_page=devices.per_page, filter=filter) }}">‹</a>
                          {% elif lot %}
                            <a href="{{ url_for('inventory.lotdevicelist', lot_id=lot.id, page=devices.prev_num, per_page=devices.per_page, filter=filter) }}">‹</a>
                          {% else %}
                            <a href="{{ url_for('inventory.devicelist', page=devices.prev_num, per_page=devices.per_page, filter=filter) }}">‹</a>
                          {% endif %}
                        </li>
                      {% endif %}
                      {% for page in devices.iter_pages() %}
                        {% if page %}
                          {% if page == devices.page %}
                            <li class="active"><a href="javascript:void()">{{ page }}</a></li>
                          {% else %}
                            <li class="">
                            {% if all_devices %}
                              <a href="{{ url_for('inventory.alldevicelist', page=page, per_page=devices.per_page, filter=filter) }}">
                            {% elif lot %}
                              <a href="{{ url_for('inventory.lotdevicelist', lot_id=lot.id, page=page, per_page=devices.per_page, filter=filter) }}">
                            {% else %}
                              <a href="{{ url_for('inventory.devicelist', page=page, per_page=devices.per_page, filter=filter) }}">
                            {% endif %}
                                {{ page }}
                              </a>
                            </li>
                          {% endif %}
                        {% endif %}
                      {% endfor %}
                      {% if devices.has_next %}
                        <li class="pager">
                          {% if all_devices %}
                          <a href="{{ url_for('inventory.alldevicelist', page=devices.next_num, per_page=devices.per_page, filter=filter) }}">›</a>
                          {% elif lot %}
                          <a href="{{ url_for('inventory.lotdevicelist', lot_id=lot.id, page=devices.next_num, per_page=devices.per_page, filter=filter) }}">›</a>
                          {% else %}
                          <a href="{{ url_for('inventory.devicelist', page=devices.next_num, per_page=devices.per_page, filter=filter) }}">›</a>
                          {% endif %}
                        </li>
                      {% endif %}
                    </ul>
                  </nav>
                </div>
              </div>

                </div>
              </div>
              {% if lot and not lot.is_temporary and not lot.is_shared %}
              <div id="trade-documents-list" class="tab-pane fade trade-documents-list">
                <div class="btn-group dropdown ml-1 mt-1" uib-dropdown="">
                  <a href="{{ url_for('inventory.transfer_document_add', lot_id=lot.id)}}" class="btn btn-primary">
                    <i class="bi bi-plus"></i>
                    Add new document
                    <span class="caret"></span>
                  </a>
                </div>

                <h5 class="card-title">Documents</h5>
                <table class="table">
                  <thead>
                    <tr>
                      <th scope="col">File</th>
                      <th scope="col">Description</th>
                      <th scope="col" data-type="date" data-format="YYYY-MM-DD hh:mm">Uploaded on</th>
                      <th></th>
                    </tr>
                  </thead>
                  <tbody>
                    {% for doc in lot.documents %}
                    <tr>
                      <td>
                        {% if doc.get_url() %}
                          <a href="{{ doc.get_url() }}" target="_blank">{{ doc.file_name}}</a>
                        {% else %}
                          {{ doc.file_name}}
                        {% endif %}
                      </td>
                      <td>
                          {% if doc.description %}
                          {{ doc.description|truncate(30, True) }}
                          {% endif %}
                      </td>
                      <td>
                          {{ doc.created.strftime('%Y-%m-%d %H:%M')}}
                      </td>
                      <td>
                          <a href="{{ url_for('inventory.transfer_document_edit', lot_id=lot.id, doc_id=doc.id)}}" title="Edit document">
                            <i class="bi bi-pencil-square"></i>
                          </a>
                      </td>
                      <td>
                          <a href="javascript:javascript:void(0)" data-bs-toggle="modal" data-bs-target="#btnRemoveDocument{{ loop.index }}" title="Remove document">
                            <i class="bi bi-trash-fill"></i>
                          </a>
                          <div class="modal fade" id="btnRemoveDocument{{ loop.index }}" tabindex="-1" style="display: none;" aria-hidden="true">
                            <div class="modal-dialog">
                              <div class="modal-content">

                                <div class="modal-header">
                                  <h5 class="modal-title">Delete Document</h5>
                                  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                </div>

                                  <div class="modal-body">
                                      Are you sure that you want to delete this Document?<br />
                                      <strong>{{ doc.file_name }}</strong>
                                      <p class="text-danger">
                                        This action cannot be undone.
                                      </p>
                                  </div>

                                  <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary-outline" data-bs-dismiss="modal">Cancel</button>
                                    <a href="{{ url_for('inventory.document_del', lot_id=lot.id, doc_id=doc.id) }}" type="button" class="btn btn-danger">
                                      Delete it!
                                    </a>
                                  </div>

                              </div>
                            </div>
                          </div>
                      </td>
                    </tr>
                    {% endfor %}
                    {% for doc in lot.trade.documents %}
                    <tr>
                      <td>
                        {% if doc.get_url() %}
                          <a href="{{ doc.get_url() }}" target="_blank">{{ doc.file_name}}</a>
                        {% else %}
                          {{ doc.file_name}}
                        {% endif %}
                      </td>
                      <td>
                          {{ doc.created.strftime('%Y-%m-%d %H:%M')}}
                      </td>
                      <td>
                          <a href="javascript:void(0)"><i class="bi bi-trash-fill"></i></a>
                      </td>
                    </tr>
                    {% endfor %}
                  </tbody>
                </table>
              </div>
              <div id="edit-transfer" class="tab-pane fade edit-transfer">
                {% if form_transfer.date.data %}
                <div class="btn-group dropdown ml-1 mt-1" uib-dropdown="">
                  <a href="{{ url_for('inventory.open_transfer', lot_id=lot.id)}}" class="btn btn-primary">
                    <i class="bi bi-plus"></i>
                    Reopen a transfer
                    <span class="caret"></span>
                  </a>
                </div>
                {% endif %}
                <h5 class="card-title">Transfer</h5>
                <form method="post" action="{{ url_for('inventory.edit_transfer', lot_id=lot.id) }}" class="row g-3 needs-validation" novalidate>
                  {{ form_transfer.csrf_token }}

                  {% for field in form_transfer %}
                    {% if field != form_transfer.csrf_token %}
                      <div class="col-12">
                      {% if field != form_transfer.type %}
                        {{ field.label(class_="form-label") }}
                        {% if field == form_transfer.code %}
                        <span class="text-danger">*</span>
                        {% endif %}
                        {{ field }}
                        <small class="text-muted">{{ field.description }}</small>
                        {% if field.errors %}
                          <p class="text-danger">
                            {% for error in field.errors %}
                              {{ error }}<br/>
                            {% endfor %}
                          </p>
                        {% endif %}
                      {% endif %}
                      </div>
                    {% endif %}
                  {% endfor %}

                  <div>
                    <a href="{{ url_for('inventory.lotdevicelist', lot_id=lot.id) }}" class="btn btn-danger">Cancel</a>
                    <button class="btn btn-primary" type="submit">Save</button>
                  </div>
                </form>
              </div>
              <div id="edit-delivery-note" class="tab-pane fade edit-delivery-note">
                <h5 class="card-title">Delivery Note</h5>
                <form method="post" action="{{ url_for('inventory.delivery_note', lot_id=lot.id) }}" class="row g-3 needs-validation" novalidate>
                  {{ form_delivery.csrf_token }}

                  {% for field in form_delivery %}
                    {% if field != form_delivery.csrf_token %}
                      <div class="col-12">
                      {% if field != form_delivery.type %}
                        {{ field.label(class_="form-label") }}
                        {{ field }}
                        <small class="text-muted">{{ field.description }}</small>
                        {% if field.errors %}
                          <p class="text-danger">
                            {% for error in field.errors %}
                              {{ error }}<br/>
                            {% endfor %}
                          </p>
                        {% endif %}
                      {% endif %}
                      </div>
                    {% endif %}
                  {% endfor %}

                  {% if lot.transfer and form_receiver.is_editable() %}
                  <div>
                    <a href="{{ url_for('inventory.lotdevicelist', lot_id=lot.id) }}" class="btn btn-danger">Cancel</a>
                    <button class="btn btn-primary" type="submit">Save</button>
                  </div>
                  {% endif %}
                </form>
              </div>
              <div id="edit-receiver-note" class="tab-pane fade edit-receiver-note">
                <h5 class="card-title">Receiver Note</h5>
                <form method="post" action="{{ url_for('inventory.receiver_note', lot_id=lot.id) }}" class="row g-3 needs-validation" novalidate>
                  {{ form_receiver.csrf_token }}

                  {% for field in form_receiver %}
                    {% if field != form_receiver.csrf_token %}
                      <div class="col-12">
                      {% if field != form_receiver.type %}
                        {{ field.label(class_="form-label") }}
                        {{ field }}
                        <small class="text-muted">{{ field.description }}</small>
                        {% if field.errors %}
                          <p class="text-danger">
                            {% for error in field.errors %}
                              {{ error }}<br/>
                            {% endfor %}
                          </p>
                        {% endif %}
                      {% endif %}
                      </div>
                    {% endif %}
                  {% endfor %}

                  {% if lot.transfer and form_receiver.is_editable() %}
                  <div>
                    <a href="{{ url_for('inventory.lotdevicelist', lot_id=lot.id) }}" class="btn btn-danger">Cancel</a>
                    <button class="btn btn-primary" type="submit">Save</button>
                  </div>
                  {% endif %}
                </form>
              </div>

              <div id="edit-customer-details" class="tab-pane fade edit-customer-details">
                <h5 class="card-title">Customer Details</h5>
                <form method="post" action="{{ url_for('inventory.customer_details', lot_id=lot.id) }}" class="row g-3 needs-validation" novalidate>
                  {{ form_customer_details.csrf_token }}

                  {% for field in form_customer_details %}
                    {% if field != form_customer_details.csrf_token %}
                      <div class="col-12">
                      {% if field != form_customer_details.type %}
                        {{ field.label(class_="form-label") }}
                        {{ field }}
                        <small class="text-muted">{{ field.description }}</small>
                        {% if field.errors %}
                          <p class="text-danger">
                            {% for error in field.errors %}
                              {{ error }}<br/>
                            {% endfor %}
                          </p>
                        {% endif %}
                      {% endif %}
                      </div>
                    {% endif %}
                  {% endfor %}

                  <div>
                    <a href="{{ url_for('inventory.lotdevicelist', lot_id=lot.id) }}" class="btn btn-danger">Cancel</a>
                    <button class="btn btn-primary" type="submit">Save</button>
                  </div>
                </form>
              </div>
              {% endif %}

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

      <div id="NotificationsContainer" style="position: absolute; bottom: 0; right: 0; margin: 10px; margin-top: 70px; width: calc(100% - 310px);"></div>

    </div>
  </div>
</section>
{% include "inventory/lot_delete_modal.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_lots_changes.html" %}

<!-- Custom Code -->
<script>
  $(document).ready(() => {
    $(".dataTable-selector").on("change", function() {
        const per_page = $('.dataTable-selector').val();
        {% if all_devices %}
        window.location.href = "{{ url_for('inventory.alldevicelist', page=1) }}&filter={{ filter }}&per_page="+per_page;
        {% elif lot %}
        window.location.href = "{{ url_for('inventory.lotdevicelist', lot_id=lot.id, page=1) }}&filter={{ filter }}&per_page="+per_page;
        {% else %}
        window.location.href = "{{ url_for('inventory.devicelist', page=1) }}&filter={{ filter }}&per_page="+per_page;
        {% endif %}
    });
  });
</script>
<script>
  let table = new simpleDatatables.DataTable("table", {
    footer: false,
    paging: false,
    
  })
</script>
{% if config['DEBUG'] %}
  <script src="{{ url_for('static', filename='js/main_inventory.js') }}"></script>
{% else %}
  <script src="{{ url_for('static', filename='js/main_inventory.build.js') }}"></script>
{% endif %}


{% endblock main %}