
function updateBuildMissAllNewNumber()
{
  let container = document.getElementById('button-bar-div-6');
  if(container){
    container.innerHTML = '';
    let newBoard = allMissed();
    container.appendChild(newBoard);
  }

}


function getMissedCounts() {
  

  const countContainer = styledDivMissed();
  countContainer.style.overflowX = 'hidden';
  const tableCounts = styledTableMissed();

  const theadCounts = document.createElement('thead');

  // Base
  const basetr = getBaseTh();

  // Street
  const trCounts = getStreetsTh();
  
  
  theadCounts.appendChild(trCounts);
  theadCounts.appendChild(basetr);
  tableCounts.appendChild(theadCounts);

  countContainer.appendChild(tableCounts);



  return countContainer;
}


function allMissed()
{


  const mainContainer = document.createElement('div');
 // mainContainer.style.display = 'flex';
  //mainContainer.style.marginTop = 'px';
  mainContainer.id = 'missed-tool';

  let savedColor = localStorage.getItem(mainContainer.id+'-containerIdbackgroundColor');
  if (savedColor) {
    mainContainer.style.backgroundColor = savedColor;
  }

  let colorChangerQuickSpin = quickSpin_colorChanger(mainContainer.id);
  mainContainer.append(colorChangerQuickSpin);


  let titleDiv = document.createElement('div');
  let title = document.createElement('span');
  title.style.display = 'inline-block';
  title.innerHTML = 'Misses in a row';
  title.style.marginTop = '5px';
  title.style.marginBottom = '-10px';
  title.style.marginLeft = '25px';
  titleDiv.appendChild(title);
  mainContainer.appendChild(titleDiv);




  const countContainer = styledDivMissed();
  countContainer.style.overflowX = 'hidden';

  
  

  const tableCounts = styledTableMissed();

  const theadCounts = document.createElement('thead');


  // Base
  const basetr = getBaseTh();

  // Street
  const st = getStreetsTh();
  
  //Double Street 1
  const ds1 = getDoubleStreet1Th();

  //Double Street 2
  const ds2 = getDoubleStreet2Th();

  //Dozens
  const doz = getDozensTh();

  // HighLow
  const hiLow = getHiLowTh();

  theadCounts.appendChild(hiLow);
  theadCounts.appendChild(doz);
  theadCounts.appendChild(ds2);
  theadCounts.appendChild(ds1);
  theadCounts.appendChild(st);
  theadCounts.appendChild(basetr);
  tableCounts.appendChild(theadCounts);


  // Evens
  const countContainerEvens = styledDivMissedEven();
  countContainerEvens.style.marginLeft = '300px';
  countContainerEvens.style.marginBottom = '50px';

  const theadCountsEvens = document.createElement('thead');
  const basetrEvens = getBaseThEvens();
  const evenCounts = getEvensTh();
  theadCountsEvens.appendChild(basetrEvens);
  theadCountsEvens.appendChild(evenCounts);

  countContainerEvens.appendChild(theadCountsEvens);

  // Final container
  countContainer.appendChild(tableCounts);
  countContainer.appendChild(document.createElement('br'));
  countContainer.appendChild(countContainerEvens);

  countContainer.appendChild(document.createElement('br'));

  mainContainer.appendChild(countContainer);


  return mainContainer;
}

function buildLinesMissed() {
  return [1, 4, 7, 10, 13, 16, 19, 22, 25, 28, 31, 34];
}

function buildLinesStreetMissed() {
  return [1, 4, 7, 10, 13, 16, 19, 22, 25, 28, 31, 34];
}




function getLinesTitleMissed(title) {
  let titleDiv = document.createElement('div');
  let titleSpan = document.createElement('span');
  titleSpan.innerHTML = `<h2>${title}</h2>`;
  titleDiv.style.marginLeft = '25px';
  titleDiv.appendChild(titleSpan);
  titleDiv.style.marginBottom = '-20px';
  return titleDiv;

}


function scrollToBottom() {
  const container = document.getElementById('tableContainer-lines');
  if (container) {
    container.scrollTop = container.scrollHeight;
  }

}

function styledDivMissed() {
  const countContainer = document.createElement('div');
  countContainer.id = 'missed-div';
  countContainer.style.width = '60%'; 
  //countContainer.style.overflowX = 'hidden'; 
  countContainer.style.marginTop = '35px';
  countContainer.style.marginLeft = '25px';
  countContainer.style.marginBottom = 'auto';
  countContainer.style.display = 'block';
  countContainer.style.border = '0px solid #ccc';
  countContainer.style.overflowY = 'auto'; 
  countContainer.style.height = 'auto';
  countContainer.style.position = 'relative';
  return countContainer;
}

function styledDivMissedEven() {
  const countContainer = document.createElement('div');
  countContainer.id = 'missed-div';
  countContainer.style.width = '450px'; 
  //countContainer.style.overflowX = 'hidden'; 
  countContainer.style.marginTop = '35px';
  countContainer.style.marginLeft = '25px';
  countContainer.style.marginBottom = 'auto';
  countContainer.style.display = 'block';
  countContainer.style.border = '0px solid #ccc';
  countContainer.style.overflowY = 'auto'; 
  countContainer.style.height = 'auto';
  countContainer.style.position = 'relative';
  return countContainer;
}

function styledTableMissed() {
  var table = document.createElement('table');
  table.id = 'missed-table'; 
  table.style.borderCollapse = 'collapse';
  table.style.width = '100%'; 
  table.style.tableLayout = 'fixed'; 
  return table;
}

function tableheader()
{
  const th = document.createElement('th');
    th.style.position = 'sticky';
    th.style.top = '0';
    th.style.backgroundColor = '#f9f9f9';
    th.style.zIndex = '10';
    th.style.padding = '8px';
    th.style.textAlign = 'center';
    th.style.border = '1px solid #ddd';
    th.style.boxSizing = 'border-box';
    return th;
}

function getBaseTh(){

  var black = '#2e2c2b';
  var red = '#eb3838';
  const basetr = document.createElement('tr');
  
  var th = tableheader();
  th.style.backgroundColor = red;
  th.style.color = 'white';
  th.textContent = 1;
  basetr.appendChild(th);

  var th = tableheader();
  th.style.backgroundColor = black;
  th.style.color = 'white';
  th.textContent = 4;
  basetr.appendChild(th);
  
  var th = tableheader();
  th.style.backgroundColor = red;
  th.style.color = 'white';
  th.textContent = 7;
  basetr.appendChild(th);

  var th = tableheader();
  th.style.backgroundColor = black;
  th.style.color = 'white';
  th.textContent = 10;
  basetr.appendChild(th);

  var th = tableheader();
  th.style.backgroundColor = black;
  th.style.color = 'white';
  th.textContent = 13;
  basetr.appendChild(th);

  var th = tableheader();
  th.style.backgroundColor = red;
  th.style.color = 'white';
  th.textContent = 16;
  basetr.appendChild(th);

  var th = tableheader();
  th.style.backgroundColor = red;
  th.style.color = 'white';
  th.textContent = 19;
  basetr.appendChild(th);

  var th = tableheader();
  th.style.backgroundColor = black;
  th.style.color = 'white';
  th.textContent = 22;
  basetr.appendChild(th);

  var th = tableheader();
  th.style.backgroundColor = red;
  th.style.color = 'white';
  th.textContent = 25;
  basetr.appendChild(th);

  var th = tableheader();
  th.style.backgroundColor = black;
  th.style.color = 'white';
  th.textContent = 28;
  basetr.appendChild(th);

  var th = tableheader();
  th.style.backgroundColor = black;
  th.style.color = 'white';
  th.textContent = 31;
  basetr.appendChild(th);

  var th = tableheader();
  th.style.backgroundColor = red;
  th.style.color = 'white';
  th.textContent = 34;
  basetr.appendChild(th);

  return basetr;
}

function getBaseThEvens(){

  var black = '#2e2c2b';
  var red = '#eb3838';
  const basetr = document.createElement('tr');
  
  var th = tableheader();
  th.textContent = 'Red';
  basetr.appendChild(th);

  var th = tableheader();
  th.textContent = 'Black';
  basetr.appendChild(th);
  
  var th = tableheader();
  th.textContent = 'Even';
  basetr.appendChild(th);

  var th = tableheader();
  th.textContent = 'Odd';
  basetr.appendChild(th);

  var th = tableheader();
  th.textContent = 'Row 1';
  th.style.whiteSpace = 'nowrap';
  basetr.appendChild(th);

  var th = tableheader();
  th.textContent = 'Row 2';
  th.style.whiteSpace = 'nowrap';
  basetr.appendChild(th);

  var th = tableheader();
  th.textContent = 'Row 3';
  th.style.whiteSpace = 'nowrap';
  basetr.appendChild(th);

  return basetr;
}

function buildLinesCountsMissed() {
  var lines = buildLinesStreetMissed();
  var missedCounts = new Array(lines.length).fill(0);

  const spins = [...numbers];

  spins.forEach(spin => {
    lines.forEach((line, index) => {
      if (line === 0) {
        missedCounts[0] = line === spin ? 0 : missedCounts[0] + 1;
      }
      else {
        missedCounts[index] = (line === spin || line + 1 === spin || line + 2 === spin) ? 0 : missedCounts[index] + 1;
      }

    });
  });
  
  missedCounts.push('Streets');

  return missedCounts;
}
function getStreetsTh()
{
  const trCounts = document.createElement('tr');

  const lineCounts = buildLinesCountsMissed();
  lineCounts.forEach((count, index) => {
    const th = document.createElement('th');
    th.textContent = count;
    th.style.position = 'sticky';
    th.style.top = '0';
    th.style.backgroundColor = '#f9f9f9';
    th.style.zIndex = '10';
    th.style.padding = '8px';
    if(index === 12)
    {
      th.style.textAlign = 'left';
      th.colSpan = '1';
      th.style.width = '100px';
    }
    else
    {
      th.style.textAlign = 'center';
      
    }
    th.style.border = '1px solid #ddd';
    th.style.boxSizing = 'border-box';
    trCounts.appendChild(th);
  });
  return trCounts;
}
function doubleStreet1Counts() {

  var street1 = [
    [1, 2, 3, 4, 5, 6],
    [7, 8, 9, 10, 11, 12],
    [13, 14, 15, 16, 17, 18],
    [19, 20, 21, 22, 23, 24],
    [25, 26, 27, 28, 29, 30],
    [31, 32, 33, 34, 35, 36]
  ];
  var missedCounts = new Array(street1.length).fill(0);


  const spins = [...numbers];

  spins.forEach(spin => {
    street1.forEach((line, index) => {

      if (!line.includes(spin)) {
        missedCounts[index]++;
      } else {

        missedCounts[index] = 0;
      }
    });
  });


  missedCounts.push('Double Street 1');

  return missedCounts;
}

function getDoubleStreet1Th()
{
  const trCounts = document.createElement('tr');

  const lineCounts = doubleStreet1Counts();
  lineCounts.forEach((count, index) => {
    const th = document.createElement('th');
    th.textContent = count;
    th.style.position = 'sticky';
    th.colSpan = '2';
    th.style.top = '0';
    th.style.backgroundColor = '#f9f9f9';
    th.style.zIndex = '10';
    th.style.padding = '8px';
    if(index === 6)
    {
      th.style.textAlign = 'left';
      th.colSpan = '1';
    }
    else
    {
      th.style.textAlign = 'center';
    }
    th.style.border = '1px solid #ddd';
    th.style.boxSizing = 'border-box';
    th.style.whiteSpace = 'nowrap';
    trCounts.appendChild(th);
  });
  return trCounts;
}
function doubleStreet2Counts() {

  var street1 = [[],
    [4,5,6,7,8,9],
    [10, 11, 12,13,14,15],
    [16, 17, 18,19,20,21],
    [22, 23, 24,25,26,27],
    [28, 29, 30,31,32,33],
    []
  ];
  var missedCounts = new Array(street1.length).fill(0);


  const spins = [...numbers];

  spins.forEach(spin => {
    street1.forEach((line, index) => {

      if (!line.includes(spin)) {
        missedCounts[index]++;
      } else {

        missedCounts[index] = 0;
      }
    });
  });


  missedCounts.push('Double Street 2');

  return missedCounts;
}
function getDoubleStreet2Th()
{
  const trCounts = document.createElement('tr');

  const lineCounts = doubleStreet2Counts();
  lineCounts.forEach((count, index) => {
    const th = document.createElement('th');
    
    th.style.position = 'sticky';
    if (index === 0 || index === 6) {
      th.colSpan = '1';
      th.textContent = ``;
    }else
    {
      th.colSpan = '2';
      th.textContent = count;
    }
    
    th.style.whiteSpace = 'nowrap';
    th.style.top = '0';
    th.style.backgroundColor = '#f9f9f9';
    th.style.zIndex = '10';
    th.style.padding = '8px';
    if(index === 7)
    {
      th.style.textAlign = 'left';
      th.colSpan = '1';
    }
    else
    {
      th.style.textAlign = 'center';
    }
    th.style.border = '1px solid #ddd';
    th.style.boxSizing = 'border-box';
    trCounts.appendChild(th);
  });
  return trCounts;
}


function dozensCounts() {

  var street1 = [
    [1,2,3,4,5,6,7,8,9,10,11,12],
    [13,14,15,16,17,18,19,20,21,22,23,24],
    [25,26,27,28,29,30,31,32,33,34,35,36]
  ];
  var missedCounts = new Array(street1.length).fill(0);


  const spins = [...numbers];

  spins.forEach(spin => {
    street1.forEach((line, index) => {

      if (!line.includes(spin)) {
        missedCounts[index]++;
      } else {

        missedCounts[index] = 0;
      }
    });
  });


  missedCounts.push('Dozens');

  return missedCounts;
}

function getDozensTh()
{
  const trCounts = document.createElement('tr');

  const lineCounts = dozensCounts();
  lineCounts.forEach((count, index) => {
    const th = document.createElement('th');
    
    th.style.position = 'sticky';
    th.colSpan = '4';
    th.textContent = count;
    th.style.top = '0';
    th.style.backgroundColor = '#f9f9f9';
    th.style.zIndex = '10';
    th.style.padding = '8px';
    if(index === 3)
    {
      th.style.textAlign = 'left';
      th.colSpan = '1';
      th.style.width = '150px';
    }
    else
    {
      th.style.textAlign = 'center';
    }
    
    th.style.border = '1px solid #ddd';
    th.style.boxSizing = 'border-box';
    trCounts.appendChild(th);
  });
  return trCounts;
}

function hiLowCounts() {

  var street1 = [
    [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18],
    [19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36]
  ];
  var missedCounts = new Array(street1.length).fill(0);


  const spins = [...numbers];

  spins.forEach(spin => {
    street1.forEach((line, index) => {

      if (!line.includes(spin)) {
        missedCounts[index]++;
      } else {

        missedCounts[index] = 0;
      }
    });
  });


  missedCounts.push('Low / High');

  return missedCounts;
}
function getHiLowTh()
{
  const trCounts = document.createElement('tr');

  const lineCounts = hiLowCounts();
  lineCounts.forEach((count, index) => {
    const th = document.createElement('th');
    
    th.style.position = 'sticky';
    th.colSpan = '6';
    th.textContent = count;
    th.style.top = '0';
    th.style.backgroundColor = '#f9f9f9';
    th.style.zIndex = '10';
    th.style.padding = '8px';
    if(index === 2)
    {
      th.style.textAlign = 'left';
      th.colSpan = '1';
      th.style.width = '150px';
    }
    else
    {
      th.style.textAlign = 'center';
    }
    
    th.style.border = '1px solid #ddd';
    th.style.boxSizing = 'border-box';
    trCounts.appendChild(th);
  });
  return trCounts;
}


function buildEvensMissed() {
  var missedCounts = [];

  const spins = [...numbers];

  var missed_red = 0;
  var missed_black = 0;
  var missed_even = 0;
  var missed_odd = 0;
  var  missed_column1 = 0
  var missed_column2 = 0;
  var missed_column3 = 0;
  var red = [1, 3, 5, 7, 9, 12, 14, 16, 18, 19, 21, 23, 25, 27, 30, 32, 34, 36];
  var black = [2, 4, 6, 8, 10, 11, 13, 15, 17, 20, 22, 24, 26, 28, 29, 31, 33, 35];
  var column1 = [1, 4, 7, 10, 13, 16, 19, 22, 25, 28, 31, 34];
  var column2 = [2, 5, 8, 11, 14, 17, 20, 23, 26, 29, 32, 35];
  var column3 = [3, 6, 9, 12, 15, 18, 21, 24, 27, 30, 33, 36];

  spins.forEach(spin => { 
    red.includes(spin)? missed_red = 0 : missed_red  += 1;
    black.includes(spin)? missed_black = 0 : missed_black  += 1;
    (spin % 2 === 0 && spin !== 0)? missed_even = 0 : missed_even += 1;
    (spin % 2 === 1 && spin !== 0)? missed_odd = 0 : missed_odd += 1;
    column1.includes(spin)? missed_column1 = 0: missed_column1 += 1;
    column2.includes(spin)? missed_column2 = 0: missed_column2 += 1;
    column3.includes(spin)? missed_column3 = 0: missed_column3 += 1;
    
  });

  missedCounts.push(missed_red);
  missedCounts.push(missed_black);
  missedCounts.push(missed_even);
  missedCounts.push(missed_odd);
  missedCounts.push(missed_column1);
  missedCounts.push(missed_column2);
  missedCounts.push(missed_column3);
  
  return missedCounts;
}

function getEvensTh()
{
  const trCounts = document.createElement('tr');

  const lineCounts = buildEvensMissed();
  lineCounts.forEach((count, index) => {
    const th = document.createElement('th');
    th.textContent = count;
    th.style.position = 'sticky';
    th.style.top = '0';
    th.style.backgroundColor = '#f9f9f9';
    th.style.zIndex = '10';
    th.style.padding = '8px';

    th.style.textAlign = 'center';

    th.style.border = '1px solid #ddd';
    th.style.boxSizing = 'border-box';
    trCounts.appendChild(th);
  });
  return trCounts;
}