{% comment %} basic table html {% endcomment %}

<table style="border-collapse: collapse; width: 100%; text-align: left; border: 1px solid #000;">
  <thead>
    <tr style="background-color: #333; color: white;">
      <th style="border: 1px solid #000; padding: 8px;">Column 1</th>
      <th style="border: 1px solid #000; padding: 8px;">Column 2</th>
      <th style="border: 1px solid #000; padding: 8px;">Column 3</th>
    </tr>
  </thead>
  <tbody>
    <tr style="background-color: #f2f2f2;">
      <td style="border: 1px solid #000; padding: 8px;">Row 1, Cell 1</td>
      <td style="border: 1px solid #000; padding: 8px;">Row 1, Cell 2</td>
      <td style="border: 1px solid #000; padding: 8px;">Row 1, Cell 3</td>
    </tr>
    <tr style="background-color: #ffffff;">
      <td style="border: 1px solid #000; padding: 8px;">Row 2, Cell 1</td>
      <td style="border: 1px solid #000; padding: 8px;">Row 2, Cell 2</td>
      <td style="border: 1px solid #000; padding: 8px;">Row 2, Cell 3</td>
    </tr>
  </tbody>
</table>
___________________________________________________________________________________________________
{% for block in section.blocks %}
  {% if block.type == 'csv_file' %}
    {% assign csv_url = block.settings.csv_file_url %}
    {% assign csv_data = csv_url | file_url | parse_csv %}
    
    <table style="border-collapse: collapse; width: 100%; text-align: left; border: 1px solid #000;">
      <thead>
        <tr style="background-color: #333; color: white;">
          {% for column in csv_data.first %}
            <th style="border: 1px solid #000; padding: 8px;">{{ column }}</th>
          {% endfor %}
        </tr>
      </thead>
      <tbody>
        {% for row in csv_data offset:1 %}
          <tr style="background-color: {% cycle '#f2f2f2', '#ffffff' %};">
            {% for cell in row %}
              <td style="border: 1px solid #000; padding: 8px;">{{ cell }}</td>
            {% endfor %}
          </tr>
        {% endfor %}
      </tbody>
    </table>
  {% endif %}
{% endfor %}

{% schema %}
{
  "name": "Dynamic CSV Table",
  "blocks": [
    {
      "type": "csv_file",
      "name": "CSV File",
      "settings": [
        {
          "type": "url",
          "id": "csv_file_url",
          "label": "CSV File URL"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Dynamic CSV Table",
      "blocks": [
        {
          "type": "csv_file"
        }
      ]
    }
  ]
}
{% endschema %}
___________________________________________________________________________________________________

{% schema %}
{
  "name": "Tabs Section",
  "blocks": [
    {
      "type": "applications_table",
      "name": "Applications Table",
      "settings": [
        {
          "type": "text",
          "id": "csv_url",
          "label": "CSV File URL",
          "default": "https://cdn.shopify.com/s/files/your-file-url.csv"
        }
      ]
    }
  ]
}
{% endschema %}

{% for block in section.blocks %}
  {% if block.type == "applications_table" %}
    <table style="border-collapse: collapse; width: 100%; text-align: left;">
      <thead>
        <tr style="background-color: #333; color: white;">
          <th style="border: 1px solid #000; padding: 8px;">Make</th>
          <th style="border: 1px solid #000; padding: 8px;">Model</th>
          <th style="border: 1px solid #000; padding: 8px;">Year</th>
          <th style="border: 1px solid #000; padding: 8px;">Part Number</th>
        </tr>
      </thead>
      <tbody>
        {% for row in block.settings.csv_url | split: '\n' %}
          {% assign cols = row | split: ',' %}
          {% if forloop.index > 1 %}
          <tr style="background-color: {% cycle '#f2f2f2', '#ffffff' %};">
            <td style="border: 1px solid #000; padding: 8px;">{{ cols[0] }}</td>
            <td style="border: 1px solid #000; padding: 8px;">{{ cols[1] }}</td>
            <td style="border: 1px solid #000; padding: 8px;">{{ cols[2] }}</td>
            <td style="border: 1px solid #000; padding: 8px;">
              {% if cols[4] != blank %}
                <a href="{{ cols[4] }}" style="color: blue; text-decoration: underline;">{{ cols[3] }}</a>
              {% else %}
                {{ cols[3] }}
              {% endif %}
            </td>
          </tr>
          {% endif %}
        {% endfor %}
      </tbody>
    </table>
  {% endif %}
{% endfor %}
___________________________________________________________________________________________________

{% schema %}
{
  "name": "Applications Table",
  "settings": [
    {
      "type": "text",
      "id": "csv_url",
      "label": "CSV File URL",
      "default": "https://cdn.shopify.com/s/files/your-file-url.csv"
    }
  ],
  "presets": [
    {
      "name": "Applications Table",
      "category": "Custom"
    }
  ]
}
{% endschema %}

<table style="border-collapse: collapse; width: 100%; text-align: left;">
  <thead>
    <tr style="background-color: #333; color: white;">
      <th style="border: 1px solid #000; padding: 8px;">Make</th>
      <th style="border: 1px solid #000; padding: 8px;">Model</th>
      <th style="border: 1px solid #000; padding: 8px;">Year</th>
      <th style="border: 1px solid #000; padding: 8px;">Part Number</th>
    </tr>
  </thead>
  <tbody>
    {% for row in section.settings.csv_url | split: '\n' %}
      {% assign cols = row | split: ',' %}
      {% if forloop.index > 1 %} {%- comment -%} Skip header row {%- endcomment -%}
      <tr style="background-color: {% cycle '#f2f2f2', '#ffffff' %};">
        <td style="border: 1px solid #000; padding: 8px;">{{ cols[0] }}</td>
        <td style="border: 1px solid #000; padding: 8px;">{{ cols[1] }}</td>
        <td style="border: 1px solid #000; padding: 8px;">{{ cols[2] }}</td>
        <td style="border: 1px solid #000; padding: 8px;">
          {% if cols[4] != blank %}
            <a href="{{ cols[4] }}" style="color: blue; text-decoration: underline;">{{ cols[3] }}</a>
          {% else %}
            {{ cols[3] }}
          {% endif %}
        </td>
      </tr>
      {% endif %}
    {% endfor %}
  </tbody>
</table>
___________________________________________________________________________________________________{% schema %}
{
  "name": "Dynamic Table Block",
  "target": "section",
  "settings": [
    {
      "type": "text",
      "id": "table_title",
      "label": "Table Title"
    },
    {
      "type": "textarea",
      "id": "csv_data",
      "label": "CSV Data (comma-separated)",
      "info": "Enter rows with values separated by commas, new rows on a new line."
    }
  ],
  "presets": [
    {
      "name": "Dynamic Table Block"
    }
  ]
}
{% endschema %}

<div class="table-container">
  {% if section.settings.table_title != blank %}
    <h2>{{ section.settings.table_title }}</h2>
  {% endif %}

  <input type="search" id="table-search" placeholder="Search by Model">

  <table class="dynamic-table">
    <thead>
      <tr>
        <th>Model</th>
        <th>Years</th>
        <th>Ford Nine Inch H.D. Housings</th>
        <th>Ford 9″ Ultra Fab Housing</th>
        <th>Alloy Axles</th>
        <th>Pro Race Axles</th>
      </tr>
    </thead>
    <tbody>
      {% assign rows = section.settings.csv_data | split: "\n" %}
      {% for row in rows %}
        {% assign columns = row | split: "," %}
        <tr>
          {% for column in columns %}
            <td>{{ column | strip }}</td>
          {% endfor %}
        </tr>
      {% endfor %}
    </tbody>
  </table>
</div>

<style>
  .dynamic-table {
    width: 100%;
    border-collapse: collapse;
  }
  .dynamic-table th, .dynamic-table td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
  }
  .dynamic-table th {
    background-color: rgb(194, 0, 0);
    color: white;
  }
  .dynamic-table tr:nth-child(even) {
    background-color: #f9f9f9;
  }
  #table-search {
    margin-bottom: 10px;
    padding: 5px;
    width: 100%;
  }
</style>

<script>
  document.getElementById('table-search').addEventListener('keyup', function() {
    let searchValue = this.value.toLowerCase();
    let rows = document.querySelectorAll('.dynamic-table tbody tr');
    rows.forEach(row => {
      let text = row.innerText.toLowerCase();
      row.style.display = text.includes(searchValue) ? '' : 'none';
    });
  });
</script>
____________________________________________________________________________________________________{% schema %}
{
  "name": "Dynamic Table Block",
  "target": "section",
  "settings": [
    {
      "type": "text",
      "id": "table_title",
      "label": "Table Title"
    },
    {
      "type": "textarea",
      "id": "table_headers",
      "label": "Table Headers (comma-separated)",
      "info": "Enter column headers separated by commas."
    },
    {
      "type": "textarea",
      "id": "csv_data",
      "label": "CSV Data (comma-separated)",
      "info": "Enter rows with values separated by commas, new rows on a new line."
    }
  ],
  "presets": [
    {
      "name": "Dynamic Table Block"
    }
  ]
}
{% endschema %}

<div class="table-container">
  {% if section.settings.table_title != blank %}
    <h2>{{ section.settings.table_title }}</h2>
  {% endif %}

  <input type="search" id="table-search" placeholder="Search by Model">

  <table class="dynamic-table">
    <thead>
      <tr>
        {% assign headers = section.settings.table_headers | split: "," %}
        {% for header in headers %}
          <th>{{ header | strip }}</th>
        {% endfor %}
      </tr>
    </thead>
    <tbody>
      {% assign rows = section.settings.csv_data | split: "\n" %}
      {% for row in rows %}
        {% assign columns = row | split: "," %}
        <tr>
          {% for column in columns %}
            <td>{{ column | strip }}</td>
          {% endfor %}
        </tr>
      {% endfor %}
    </tbody>
  </table>
</div>

<style>
  .dynamic-table {
    width: 100%;
    border-collapse: collapse;
  }
  .dynamic-table th, .dynamic-table td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
  }
  .dynamic-table th {
    background-color: rgb(194, 0, 0);
    color: white;
  }
  .dynamic-table tr:nth-child(even) {
    background-color: #f9f9f9;
  }
  #table-search {
    margin-bottom: 10px;
    padding: 5px;
    width: 100%;
  }
</style>

<script>
  document.getElementById('table-search').addEventListener('keyup', function() {
    let searchValue = this.value.toLowerCase();
    let rows = document.querySelectorAll('.dynamic-table tbody tr');
    rows.forEach(row => {
      let text = row.innerText.toLowerCase();
      row.style.display = text.includes(searchValue) ? '' : 'none';
    });
  });
</script>
____________________________________________________________________________________________________
{% schema %}
{
  "name": "Dynamic Table Block",
  "target": "section",
  "settings": [
    {
      "type": "text",
      "id": "table_title",
      "label": "Table Title"
    },
    {
      "type": "textarea",
      "id": "table_headers",
      "label": "Table Headers (comma-separated)",
      "info": "Enter column headers separated by commas."
    },
    {
      "type": "url",
      "id": "csv_file",
      "label": "CSV File URL",
      "info": "Upload a CSV file to Shopify's Files section and paste the URL here."
    }
  ],
  "presets": [
    {
      "name": "Dynamic Table Block"
    }
  ]
}
{% endschema %}

<div class="table-container">
  {% if section.settings.table_title != blank %}
    <h2>{{ section.settings.table_title }}</h2>
  {% endif %}

  <input type="search" id="table-search" placeholder="Search by Model">

  <table class="dynamic-table">
    <thead>
      <tr id="table-header-row"></tr>
    </thead>
    <tbody id="table-body"></tbody>
  </table>
</div>

<style>
  .dynamic-table {
    width: 100%;
    border-collapse: collapse;
  }
  .dynamic-table th, .dynamic-table td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
  }
  .dynamic-table th {
    background-color: rgb(194, 0, 0);
    color: white;
  }
  .dynamic-table tr:nth-child(even) {
    background-color: #f9f9f9;
  }
  #table-search {
    margin-bottom: 10px;
    padding: 5px;
    width: 100%;
  }
</style>

<script>
  document.getElementById('table-search').addEventListener('keyup', function() {
    let searchValue = this.value.toLowerCase();
    let rows = document.querySelectorAll('.dynamic-table tbody tr');
    rows.forEach(row => {
      let text = row.innerText.toLowerCase();
      row.style.display = text.includes(searchValue) ? '' : 'none';
    });
  });

  function loadCSVData(csvUrl) {
    fetch(csvUrl)
      .then(response => response.text())
      .then(data => {
        let rows = data.split('\n').map(row => row.split(','));
        let tableHeaderRow = document.getElementById('table-header-row');
        let tableBody = document.getElementById('table-body');
        tableHeaderRow.innerHTML = '';
        tableBody.innerHTML = '';

        if (rows.length > 0) {
          rows[0].forEach(header => {
            let th = document.createElement('th');
            th.textContent = header.trim();
            tableHeaderRow.appendChild(th);
          });
        }

        rows.slice(1).forEach(row => {
          let tr = document.createElement('tr');
          row.forEach(cell => {
            let td = document.createElement('td');
            td.textContent = cell.trim();
            tr.appendChild(td);
          });
          tableBody.appendChild(tr);
        });
      })
      .catch(error => console.error('Error loading CSV:', error));
  }

  let csvFileUrl = {{ section.settings.csv_file | json }};
  if (csvFileUrl) {
    loadCSVData(csvFileUrl);
  }
</script>
____________________________________________________________________________________________________
{% schema %}
{
  "name": "Dynamic Table Block",
  "target": "section",
  "settings": [
    {
      "type": "text",
      "id": "table_title",
      "label": "Table Title"
    },
    {
      "type": "url",
      "id": "csv_file",
      "label": "CSV File URL",
      "info": "Upload a CSV file to Shopify's Files section and paste the URL here."
    }
  ],
  "presets": [
    {
      "name": "Dynamic Table Block"
    }
  ]
}
{% endschema %}

<div class="table-container">
  {% if section.settings.table_title != blank %}
    <h2>{{ section.settings.table_title }}</h2>
  {% endif %}

  <input type="search" id="table-search" placeholder="Search by Model">

  <table class="dynamic-table">
    <thead>
      <tr id="table-header-row"></tr>
    </thead>
    <tbody id="table-body"></tbody>
  </table>
</div>

<style>
  .dynamic-table {
    width: 100%;
    border-collapse: collapse;
  }
  .dynamic-table th, .dynamic-table td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
  }
  .dynamic-table th {
    background-color: rgb(194, 0, 0);
    color: white;
  }
  .dynamic-table tr:nth-child(even) {
    background-color: #f9f9f9;
  }
  #table-search {
    margin-bottom: 10px;
    padding: 5px;
    width: 100%;
  }
</style>

<script>
  document.getElementById('table-search').addEventListener('keyup', function() {
    let searchValue = this.value.toLowerCase();
    let rows = document.querySelectorAll('.dynamic-table tbody tr');
    rows.forEach(row => {
      let text = row.innerText.toLowerCase();
      row.style.display = text.includes(searchValue) ? '' : 'none';
    });
  });

  function loadCSVData(csvUrl) {
    fetch(csvUrl)
      .then(response => response.text())
      .then(data => {
        let rows = data.split('\n').map(row => row.split(','));
        let tableHeaderRow = document.getElementById('table-header-row');
        let tableBody = document.getElementById('table-body');
        tableHeaderRow.innerHTML = '';
        tableBody.innerHTML = '';

        if (rows.length > 0) {
          rows[0].forEach(header => {
            let th = document.createElement('th');
            th.textContent = header.trim();
            tableHeaderRow.appendChild(th);
          });
        }

        rows.slice(1).forEach(row => {
          let tr = document.createElement('tr');
          row.forEach(cell => {
            let td = document.createElement('td');
            td.textContent = cell.trim();
            tr.appendChild(td);
          });
          tableBody.appendChild(tr);
        });
      })
      .catch(error => console.error('Error loading CSV:', error));
  }

  let csvFileUrl = {{ section.settings.csv_file | json }};
  if (csvFileUrl) {
    loadCSVData(csvFileUrl);
  }
</script>
____________________________________________________________________________________________________
{% schema %}
{
  "name": "Dynamic Table Block",
  "target": "section",
  "settings": [
    {
      "type": "text",
      "id": "table_title",
      "label": "Table Title"
    },
    {
      "type": "textarea",
      "id": "table_headers",
      "label": "Table Headers (comma-separated)",
      "info": "Enter column headers separated by commas."
    },
    {
      "type": "url",
      "id": "csv_file",
      "label": "CSV File URL",
      "info": "Upload a CSV file to Shopify's Files section and paste the URL here."
    }
  ],
  "presets": [
    {
      "name": "Dynamic Table Block"
    }
  ]
}
{% endschema %}

<div class="table-container">
  {% if section.settings.table_title != blank %}
    <h2>{{ section.settings.table_title }}</h2>
  {% endif %}

  <input type="search" id="table-search" placeholder="Search by Model">

  <table class="dynamic-table">
    <thead>
      <tr id="table-header-row"></tr>
    </thead>
    <tbody id="table-body"></tbody>
  </table>
</div>

<style>
  .dynamic-table {
    width: 100%;
    border-collapse: collapse;
  }
  .dynamic-table th, .dynamic-table td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
    white-space: nowrap; /* Prevent text from breaking into multiple lines */
  }
  .dynamic-table th {
    background-color: rgb(194, 0, 0);
    color: white;
  }
  .dynamic-table tr:nth-child(even) {
    background-color: #f9f9f9;
  }
  #table-search {
    margin-bottom: 10px;
    padding: 5px;
    width: 100%;
  }
</style>

<script>
  document.getElementById('table-search').addEventListener('keyup', function() {
    let searchValue = this.value.toLowerCase();
    let rows = document.querySelectorAll('.dynamic-table tbody tr');
    rows.forEach(row => {
      let text = row.innerText.toLowerCase();
      row.style.display = text.includes(searchValue) ? '' : 'none';
    });
  });

  function loadCSVData(csvUrl) {
    fetch(csvUrl)
      .then(response => response.text())
      .then(data => {
        let rows = data.split('\n').map(row => row.split(','));
        let tableHeaderRow = document.getElementById('table-header-row');
        let tableBody = document.getElementById('table-body');
        tableHeaderRow.innerHTML = '';
        tableBody.innerHTML = '';

        if (rows.length > 0) {
          rows[0].forEach(header => {
            let th = document.createElement('th');
            th.textContent = header.trim();
            tableHeaderRow.appendChild(th);
          });
        }

        rows.slice(1).forEach(row => {
          let tr = document.createElement('tr');
          row.forEach(cell => {
            let td = document.createElement('td');
            td.textContent = cell.trim();
            tr.appendChild(td);
          });
          tableBody.appendChild(tr);
        });
      })
      .catch(error => console.error('Error loading CSV:', error));
  }

  let csvFileUrl = {{ section.settings.csv_file | json }};
  if (csvFileUrl) {
    loadCSVData(csvFileUrl);
  }
</script>
____________________________________________________________________________________________________
// for tabs.liquid
{% for block in section.blocks %}
  {% if block.type == 'dynamic_table' %}
    {% render 'dynamic-table', block: block %}
  {% endif %}
{% endfor %}
// make sure schema includes table block
{% schema %}
{
  "name": "Tab Section",
  "settings": [],
  "blocks": [
    {
      "type": "dynamic_table",
      "name": "Dynamic Table",
      "settings": [
        {
          "type": "text",
          "id": "table_title",
          "label": "Table Title"
        },
        {
          "type": "textarea",
          "id": "table_headers",
          "label": "Table Headers (comma-separated)"
        },
        {
          "type": "url",
          "id": "csv_file",
          "label": "CSV File URL"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Tab Section",
      "blocks": [
        {
          "type": "dynamic_table"
        }
      ]
    }
  ]
}
{% endschema %}