<!-- Include Alpine.js @ Alpine AJAX -->
<script defer src="https://cdn.jsdelivr.net/npm/@imacrayon/alpine-ajax@0.10.2/dist/cdn.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.11.1/dist/cdn.min.js"></script>
<!-- Include Mock Server so we can mock the backend code -->
<script src="https://cdn.jsdelivr.net/npm/@imacrayon/alpine-ajax@0.10.2/dist/server.js"></script>

<script>
//  Here's our database of products and filtering logic. This would live on the backend
let database = {
  all: () => ([
    'Keyword: T-Shirt, Size: sm, Color: yellow',
    'Keyword: Sweater, Size: sm, Color: yellow',
    'Keyword: T-Shirt, Size: sm, Color: blue',
    'Keyword: T-Shirt, Size: sm, Color: red',
    'Keyword: T-Shirt, Size: lg, Color: red',
    'Keyword: T-Shirt, Size: md, Color: red',
  ]),
  filter(search = '', size = '', colours = []) {
    console.log(search, size, colours)
    colours = Array.isArray(colours) ? colours : [colours]
    return this.all()
      .filter(row => search ? row.includes(search) : true)
      .filter(row => size ? row.includes(size) : true)
      .filter(row => colours.length ? colours.some(colour => row.includes(colour)) : true)
  }
}

// This is the server endpoint that we are mocking
route('GET', '/products', (request) => {
  return index(database.filter(request.search || '', request.size || '', request.colours || []))
})

// This is the HTML template that the Mock Server should return when `/products` is requested
// The important code is the `x-target` & `@input` attributes on the `<form>`, this ensures
// when the filter options change the form is submitted without refreshing the whole page.
  
function index(rows)
{
return `
<section id="search" class="p-12 space-y-6"
    <h2 class="text-xl">Artist T-shirts</h2>

    <form action="/products" x-target="results" @input="$event.target.form.requestSubmit()" class="flex gap-8">
        <div class="w-56">
            <label for="search" class="block mb-1">Search</label>
            <input
                id="search"
                name="search"
                placeholder="Search..."
                type="text"
                class="w-full appearance-none px-3 py-2 border border-gray-300 rounded-sm"
            />
        </div>

        <fieldset class="w-56">
            <legend>Size</legend>
            <div><lable><input type="radio" name="size" value="">all</label></div>
            <div><lable><input type="radio" name="size" value="sm">sm</label></div>
            <div><lable><input type="radio" name="size" value="md">md</label></div>
            <div><lable><input type="radio" name="size" value="lg">lg</label></div>
        </fieldset>

        <fieldset class="w-56">
            <legend>Colours</legend>
            <div><label><input type="checkbox" name="colours" value="yellow">yellow</label></div>
            <div><label><input type="checkbox" name="colours" value="red">red</label></div>
            <div><label><input type="checkbox" name="colours" value="blue">blue</label></div>
        </fieldset>

    </form>
    
    <h2 class="text-xl pt-4 border-t">Search results</h2>
    <ul id="results">${rows.map(row => `<li>${row}</li>`).join('')}</ul>
</section>
`
}
  

//  This is just boilerplate code to render the response from our Mock Server on page load
document.addEventListener('DOMContentLoaded', () => {
  window.fetch('/products')
    .then(response => response.text())
    .then(html => document.getElementById('demo').innerHTML = html)
})
</script>

<div id="demo"></div>