{{define "title"}}
Zamówienia
{{end}}
{{define "main"}}
<main>
    <form class="search-container" hx-get="/orders/search" hx-target="#results-table"
        hx-trigger="keyup delay:500ms, change">
        <label class="search-box">
            <input type="search" name="q" placeholder="Wyszukaj po numerze zamówienia">
        </label>
        <label>Data początkowa
            <input type="date" value="{{.First}}" name="from">
        </label>
        <label>Data końcowa
            <input type="date" value="{{.Last}}" name="to">
        </label>
    </form>
    <div id="results-table">
        {{template "orders-table" .Orders}}
    </div>
</main>
<style>
    .hidden {
        display: none;
    }

    .active {
        background-color: #e6f2ff;
    }
</style>
<script>
    function toggleDetails(row,event) {
        // Access the next row (details row)
        const detailsRow=row.nextElementSibling;

        // Check if the details row is hidden
        if(detailsRow.classList.contains('hidden')) {
            // If hidden, show it (HTMX will populate it)
            detailsRow.classList.remove('hidden');
            row.classList.add('active');
        } else {
            // If visible, hide it
            detailsRow.classList.add('hidden');
            row.classList.remove('active');

            // Prevent HTMX from making a request when we're just hiding
            if(event) {
                event.stopPropagation();
            }
        }
    }
</script>
{{end}}
{{define "orders-table"}}
<table id="orders_table">
    <thead>
        <tr>
            <th>Numer zamówienia</th>
            <th>Klient</th>
            <th>Lokalizacja</th>
            <th>Data zamówienia</th>
            <th>Pozostało do zapłaty</th>
            <th>Status</th>
        </tr>
    </thead>
    <tbody>
        {{range .}}
        <tr class="clickable" hx-get="/order_info/{{.ID}}" hx-target="next tr" hx-swap="innerHTML"
            onclick="toggleDetails(this, event)">
            <th><a href="/order/{{.ID}}">{{.ID}}</a></th>
            <th>{{.Surname}} {{.Name}} {{.Phone}}</th>
            <th>{{.Location}}</th>
            <th>{{.Date.Format "2006-01-02"}}</th>
            <th>{{.Total}}</th>
            <th>{{.Status}}</th>
        </tr>
        <tr class="hidden">
            <td colspan="6" class="details-content"></td>
        </tr>
        {{end}}
    </tbody>
</table>
{{end}}
{{define "order_info"}}
{{with .Order}}
<td colspan="6" class="details-content">
    <table>
        {{range .Cakes}}
        <tr>
            <th>{{.Name}}</th>
            <th>{{.Price}}</th>
            <th>{{.Amount}}</th>
        </tr>
        {{end}}
    </table>
</td>
{{end}}
{{end}}