{% extends "base.html" %}

{% block content %}
<center><button class="hidden-desktop" style="background-color: white;border: 1px solid black; color: black;" id="expand-button">Expand Columns</button></center>
<div class="center-table">
<table id="data" class="table">
    <thead>
      <tr>
        <th></th>
        <th style="text-align:center;margin:0px;" class="fixed-width hidden-mobile">ID</th>
        <th class="fixed-width hidden-mobile">Name</th>
        <th class="fixed-width">Color</th>
        <th style="text-align: center;" class="fixed-width">Qty</th>
        {% for i in json_file['unit'] %}
	  <th style="text-align: center;" class="fixed-width">Missing ({{ loop.index }})</th>
        {% endfor %}
      </tr>
    </thead>
    <tbody>
      {% for brick in inventory_file.results %}
      {% if brick.is_spare == False %}
        <tr>
	  {% if brick.element_id == None %}
	  <td><img src="{{ '/static/none.jpg' }}" class="lightbox-trigger" style="height: 50px; width: auto;"></td>
	  {% else %}
	  <td><img src="{{ '/static/parts/' + brick.element_id + '.jpg' }}" class="lightbox-trigger" style="height: 50px; width: auto;"></td>
	  {% endif %}
          <td  style="text-align:center;margin:0px;" class="hidden-mobile">{{ brick.part.part_num }}</td>
          <td class="hidden-mobile">{{ brick.part.name }}</td>
          <td>{{ brick.color.name }}</td>
          <td style="text-align:center;">{{ brick.quantity }}</td>
    	  {% for i in json_file['unit'] %}
        
    		  <td class="centered-cell">
			<div class="inputContainer">
    			{% set ns = namespace(count='') %}
			<form id="number-form" action="/{{ tmp }}/saveNumber" method="post">
    			<input type="hidden" name="brick.part.part_num" value="{{ brick.part.part_num }}">
    			<input type="hidden" name="count" value="{{ i }}">
          <input type="hidden" name="index" value="{{ loop.index0 }}">
          <input type="hidden" name="is_spare" value="{{ brick.is_spare }}">
    			<input type="hidden" name="brick.color.name" value="{{ brick.color.name }}">
    			{% for j in json_file['unit'][loop.index0]['bricks']['missing'] %}
    			  {% if j['brick']['ID'] == brick.part.part_num and j['brick']['color_name'] == brick.color.name %}

			  {% if j['brick']['is_spare']|lower == brick.is_spare|lower %} 

    			    {% set ns.count = j['brick']['amount'] %}
			    {% endif %} 
    			  {% endif %}
    			{% endfor %}
			<div class='inputField'>
	<input type="tel" style="text-align:center;" id="numberInput" name="numberInput" value="{{ ns.count }}" pattern="\d+">
	<button class="square-button" type="submit">
		<img src="/static/save.svg" alt="Save Icon">
	</button>
			</div>
    		      </form>
			</div>
    		  </td>
    	  {% endfor %}
        </tr>
	{% endif %}
      {% endfor %}
    </tbody>
  </table>
</div>

  <h1>Spares</h1>
<div class="center-table">
<table id="data" class="table">
    <thead>
      <tr>
        <th></th>
        <th style="text-align:center;margin:0px;" class="fixed-width hidden-mobile">ID</th>
        <th class="fixed-width hidden-mobile">Name</th>
        <th class="fixed-width">Color</th>
        <th style="text-align: center;" class="fixed-width">Qty</th>
        {% for i in json_file['unit'] %}
    <th style="text-align: center;" class="fixed-width">Missing ({{ loop.index }})</th>
        {% endfor %}
      </tr>
    </thead>
    <tbody>
      {% for brick in inventory_file.results %}
      {% if brick.is_spare == True %}
        <tr>
    {% if brick.element_id == None %}
    <td><img src="{{ '/static/none.jpg' }}" class="lightbox-trigger" style="height: 50px; width: auto;"></td>
    {% else %}
    <td><img src="{{ '/static/parts/' + brick.element_id + '.jpg' }}" class="lightbox-trigger" style="height: 50px; width: auto;"></td>
    {% endif %}
          <td  style="text-align:center;margin:0px;" class="hidden-mobile">{{ brick.part.part_num }}</td>
          <td class="hidden-mobile">{{ brick.part.name }}</td>
          <td>{{ brick.color.name }}</td>
          <td style="text-align:center;">{{ brick.quantity }}</td>
        {% for i in json_file['unit'] %}
        
          <td class="centered-cell">
      <div class="inputContainer">
          {% set ns = namespace(count='') %}
      <form id="number-form" action="/{{ tmp }}/saveNumber" method="post">
          <input type="hidden" name="brick.part.part_num" value="{{ brick.part.part_num }}">
          <input type="hidden" name="count" value="{{ i }}">
          <input type="hidden" name="index" value="{{ loop.index0 }}">
          <input type="hidden" name="is_spare" value="{{ brick.is_spare }}">
          <input type="hidden" name="brick.color.name" value="{{ brick.color.name }}">
          {% for j in json_file['unit'][loop.index0]['bricks']['missing'] %}
            {% if j['brick']['ID'] == brick.part.part_num and j['brick']['color_name'] == brick.color.name %}

        {% if j['brick']['is_spare']|lower == brick.is_spare|lower %} 

              {% set ns.count = j['brick']['amount'] %}
          {% endif %} 
            {% endif %}
          {% endfor %}
      <div class='inputField'>
  <input type="tel" style="text-align:center;" id="numberInput" name="numberInput" value="{{ ns.count }}" pattern="\d+">
  <button class="square-button" type="submit">
    <img src="/static/save.svg" alt="Save Icon">
  </button>
      </div>
              </form>
      </div>
          </td>
        {% endfor %}
        </tr>
  {% endif %}
      {% endfor %}
    </tbody>
  </table>
</div>






<div id="lightbox-modal">
  <div class="lightbox-wrapper">
    <span class="close">&times;</span>
    <img class="lightbox-content" id="lightbox-image">
    <div class="text-container" id="lightbox-text"></div>
  </div>
</div>


  {% endblock %}



{% block scripts %}
<script>

	function goToPage(url) {
		window.location.href = url;
	}

	const expandButton = document.getElementById('expand-button');
const dataTable = document.getElementById('data');
let isExpanded = false;

expandButton.addEventListener('click', () => {
  const hiddenColumns = dataTable.querySelectorAll('.hidden-mobile');
  hiddenColumns.forEach(column => {
    if (isExpanded) {
      column.style.display = 'none';
      expandButton.textContent = 'Expand Columns';
    } else {
      column.style.display = 'table-cell';
      expandButton.textContent = 'Hide Columns';
    }
  });
  isExpanded = !isExpanded;
});

document.addEventListener('DOMContentLoaded', function () {
  const lightboxTrigger = document.querySelectorAll('.lightbox-trigger');
  const lightboxModal = document.getElementById('lightbox-modal');
  const lightboxImage = document.getElementById('lightbox-image');
  const lightboxText = document.getElementById('lightbox-text');
  const closeModal = document.querySelector('.close');

  lightboxTrigger.forEach(function (element) {
    element.addEventListener('click', function () {
      const imgSrc = element.getAttribute('src');
      const textContent = element.closest('tr').querySelector('td:nth-child(3)').textContent; // Adjust the index accordingly
      lightboxImage.setAttribute('src', imgSrc);
      lightboxText.textContent = textContent;
      lightboxModal.style.display = 'block';
    });
  });

  closeModal.addEventListener('click', function () {
    lightboxModal.style.display = 'none';
  });

  lightboxModal.addEventListener('click', function (event) {
    if (event.target === lightboxModal || event.target === lightboxImage || event.target === lightboxText) {
      // Dismiss only if the clicked element is part of the content area
      lightboxModal.style.display = 'none';
    }
  });

  // Dismiss the lightbox when clicking outside the content area (i.e., the background)
  lightboxModal.addEventListener('click', function (event) {
    if (event.target != lightboxModal) {
      lightboxModal.style.display = 'none';
    }
  });
});

	document.addEventListener('DOMContentLoaded', function () {
  const numberInput = document.getElementById('numberInput');

  // Add event listener to input to prevent non-numeric input
  numberInput.addEventListener('input', function () {
    // Remove non-numeric characters
    this.value = this.value.replace(/\D/g, '');
  });

  // Force numeric keyboard on mobile devices
  numberInput.setAttribute('inputmode', 'numeric');
});

</script>

{% endblock %}