{% extends "base.html" %}

{% block content %}

<div class="center-table" >
<table id="data" class="table">
    <thead>
      <tr>
        <th class="fixed-width"></th>
        <th style="text-align:left;margin:0px;" class="fixed-width hidden-mobile name-class">Name</th>
        <th class="fixed-width hidden-mobile">Color</th>
        <th class="fixed-width" style="text-align: center;">Qty</th>
        <th class="fixed-width" style="text-align: center;">Missing</th>
      </tr>
    </thead>
    <tbody>
      {% for brick in inventory_list %}
        <tr>
          <td><img src="{{ '/static/parts/' + brick[5] + '.jpg' }}" class="lightbox-trigger" alt="{{ brick[3] }}" style="height: 50px; width: 50px;margin:0;padding: 0;"></td>
          <td style="text-align:left;margin:0px;" class="hidden-mobile name-class">{{ brick[3] }}</td>
          <td class="hidden-mobile">{{ brick[7] }}</td>
          <td style="text-align: center;">{{ brick[8] }}</td>
          <td class="centered-cell">
            <div class="inputContainer">
              {% set ns = namespace(count='') %}
              <form id="number-form">
                <input type="hidden" id="set_num" value="{{ brick[0] }}"> 
                <input type="hidden" id="id" value="{{ brick[1] }}"> 
                <input type="hidden" id="part_num" value="{{ brick[2] }}"> 
                <input type="hidden" id="color_id" value="{{ brick[6] }}"> 
                <input type="hidden" id="element_id" value="{{ brick[10] }}"> 
                <input type="hidden" id="u_id" value="{{ brick[11] }}"> 
                

                <div class='inputField'>
                  {% for missing in missing_list %}
                    {% if missing[1] == brick[1] and missing[2] == brick[2] and missing[3] == brick[6] and missing[5] == brick[10] %}
                      {% set ns.count = missing[4] %}
                    {% endif %}
                  {% endfor %}
                  <input type="tel" style="text-align:center;font-size: 16px;" id="missing" value="{{ ns.count }}" pattern="\d+">
                  <button class="square-button" id="bnumber-form" type="submit">
                    <img src="/static/save.svg" alt="Save Icon">
                  </button>
                </div>
              </form>
            </div>
          </td>
        </tr>
      {% endfor %}
    </tbody>
  </table>
</div>

{% if minifig_list | length > 0 %}

<h1 class="title">Minifigs</h1>
{% for fig in minifig_list %}
<h2 class="subtitle">{{ fig[2] }} ({{ fig[0] }})</h2>

<div style="display: flex; justify-content: center;">
  <div style="display: flex; align-items: center;">
    <img src="{{ '/static/minifigs/' + fig[0] + '.jpg' }}" class="lightbox-trigger" style="height: 100px; width: auto;" alt="{{ fig[2] }}">
    <span style="font-size: 50px; margin-left: 10px;">X {{ fig[3] }}</span>
  </div>
</div>

<div class="center-table" >
  <table id="data" class="table">
      <thead>
        <tr>
          <th class="fixed-width"></th>
          <th style="text-align:left;margin:0px;" class="fixed-width hidden-mobile name-class">Name</th>
          <th class="fixed-width hidden-mobile">Color</th>
          <th class="fixed-width" style="text-align: center;">Qty</th>
          <th class="fixed-width" style="text-align: center;">Missing</th>
        </tr>
      </thead>
      <tbody>
        
        {% for parts in minifig_inventory_list %}
        {% for part in parts %}
        
        {% if part[0] == fig[0] %}
        <tr>
            {% if part[5] == 'nil' %}
            <td><img src="{{ '/static/none.jpg' }}" class="lightbox-trigger" alt="{{ part[3] }}" style="height: 50px; width: 50px;margin:0;padding: 0;"></td>
            {% else %}
            <td><img src="{{ '/static/parts/' + part[5] + '.jpg' }}" class="lightbox-trigger" alt="{{ part[3] }}" style="height: 50px; width: 50px;margin:0;padding: 0;"></td>
            {% endif %}
            <td style="text-align:left;margin:0px;" class="hidden-mobile name-class">{{ part[3] }}</td>
            <td class="hidden-mobile">{{ part[7] }}</td>
            <td style="text-align: center;">{{ part[8] * fig[3] }}</td>
            <td class="centered-cell">
              <div class="inputContainer">
                {% set ns = namespace(count='') %}
                <form id="number-form">
                  <input type="hidden" id="set_num" value="{{ part[0] }}"> 
                  <input type="hidden" id="id" value="{{ part[1] }}"> 
                  <input type="hidden" id="part_num" value="{{ part[2] }}"> 
                  <input type="hidden" id="color_id" value="{{ part[6] }}"> 
                  <input type="hidden" id="element_id" value="{{ part[10] }}"> 
                  <input type="hidden" id="u_id" value="{{ part[11] }}"> 
                  
  
                  <div class='inputField'>
                    {% for missing in missing_list %}
                      {% if missing[1] == part[1] and missing[2] == part[2] and missing[3] == part[6] and (missing[5] == part[10] or missing[5] == 'part[10]') %}
                        {% set ns.count = missing[4] %}
                      {% endif %}
                    {% endfor %}
                    <input type="tel" style="text-align:center;font-size: 16px;" id="missing" value="{{ ns.count }}" pattern="\d+">
                    <button class="square-button" id="bnumber-form" type="submit">
                      <img src="/static/save.svg" alt="Save Icon">
                    </button>
                  </div>
                </form>
              </div>
            </td>
          </tr>
          {% endif %}
          {% endfor %}
        {% endfor %}
      </tbody>
    </table>
  </div>
  {% endfor %}
{% endif %}

<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>
// $(document).ready( function () {
//     $('#data').DataTable();
// } );


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

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

expandButton.addEventListener('click', () => {
  const hiddenColumns = myDataTable.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');
	textContent = '';
      console.log(element.getAttribute('alt'));
      textContent = element.getAttribute('alt');
	    //  textContent  = element.closest('tr').querySelector('td:nth-child(2)').textContent; // Adjust the index accordingly
      lightboxText.textContent = textContent;


      lightboxImage.setAttribute('src', imgSrc);
      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('missing');

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


$("body").on("submit", "#number-form", function (event) {
// $('#number-form').submit(function(event) {
	event.preventDefault();
	console.log($(this)[0]);

  set_num = $(this)[0][0].value;
  id = $(this)[0][1].value;
  part_num = $(this)[0][2].value;
  color_id = $(this)[0][3].value;
  element_id = $(this)[0][4].value;
  u_id = $(this)[0][5].value;
  missing = $(this)[0][6].value

  // console.log('set_num: ' + set_num);
  // console.log('id: ' + id);
  // console.log('part_num: ' + part_num);
  // console.log('color_id: ' + color_id);
  // console.log('element_id: ' + element_id);
  // console.log('u_id: ' + u_id);
  // console.log('missing: ' + missing);

  $.ajax({
    url: '/'+set_num+'/'+u_id,
    type: 'POST',
    data: {
      'set_num': set_num,
      'id': id,
      'part_num': part_num,
      'color_id': color_id,
      'element_id': element_id,
      'u_id': u_id,
      'missing': missing
    }

  });



  // part_num = request.form.get('brickpartpart_num')
  // color = request.form.get('brickcolorname')
  // index = request.form.get('index')
  // number = request.form.get('numberInput')
  // is_spare = request.form.get('is_spare')

});





</script>


{% endblock %}