{% extends "datavis/index.html" %}
{% load static %}

{% block nav %}
{% include "datavis/common_nav.html" %}
{% endblock %}

{% block content %}
<main class="h-full flex flex-col">
        <section class="flex w-full mb-3">
            <div>
                <h1 class="text-3xl">Windrow Dashboard</h1>
            </div>
            <div class="ml-auto">
                <button class="bg-brand text-on-brand py-2 px-4 rounded-lg hover:">Download Report</button>
            </div>
        </section>

        <article class="flex flex-col flex-1 rounded-xl border border-solid border-outline-primary overflow-hidden">

            <!-- Action Row -->
<!--            <section class="flex-0 p-4 flex gap-3 border-b-solid border-b-1 border-b-outline-primary">-->
            <form action="" method="get" class="flex-0 p-4 flex gap-3 border-b-solid border-b-1 border-b-outline-primary">
<!--                <form action="" method="get" class="">-->
                <!-- Row Select -->
                <div class="rounded border border-solid border-outline-primary flex items-center px-2">
                    <label for="row-selection" class="border-r-1 border-r-outline-primary px-1 text-on-surface-primary font-medium">
                        Row
                    </label>
                    <select id="row-selection" name="row" class="py-1 px-3 text-on-surface-secondary">
                        {% for k, row in customer.windrows.items %}
                        <option value="{{row.id}}">{{row.name}}</option>
                        {% endfor %}
                    </select>
                </div>
                <!-- Cycle Select -->
                <div class="rounded border border-solid border-outline-primary flex items-center px-2">
                    <label for="cycle-selection" class="border-r-1 border-r-outline-primary px-1 text-on-surface-primary font-medium">
                        Cycle
                    </label>
                    <select id="cycle-selection" name="cycle" class="py-1 px-3 text-on-surface-secondary">
                        <option>Cycle 1</option>
                    </select>
                </div>
                <!-- Date Select -->
                <div class="rounded border border-solid border-outline-primary flex items-center px-2">
                    <label for="date-selection" class="border-r-1 border-r-outline-primary px-1 text-on-surface-primary font-medium">
                        Date
                    </label>
                    <input type="date" id="date-selection" name="date" placeholder="HH-MM-YYYY"  class="py-1 px-3 text-on-surface-secondary"/>
                </div>
                <!-- Configuration -->
                <div class="rounded border border-solid border-outline-primary flex items-center px-2 relative">
                    <details class="">
                        <summary class="border-r-1 border-r-outline-primary px-1 text-on-surface-primary font-medium">Configure</summary>
                        <section class="absolute z-10 top-[calc(100%+12px)] -left-px bg-surface-container-lowest rounded border border-solid border-outline-primary text-on-surface-primary p-2 min-w-max md:w-sm shadow-sm">
                            <div class="py-3 border-b-1 border-b-outline-primary">
                                <h2>Temperature Unit</h2>
                                <div class="flex p-1 bg-surface-container-low text-on-surface-secondary rounded border border-solid border-outline-primary ml-auto flex gap-2 text-center">
                                    <div class="flex flex-1">
                                        <input type="radio" id="celcius-option" value="c" name="temperature_unit" class="hidden peer" required="" {% if temperature_unit == "c" %}checked{% endif %}>
                                        <label for="celcius-option" class="flex-1 peer-checked:bg-surface-container-lowest peer-checked:shadow-sm peer-checked:text-on-surface-primary rounded peer-checked:border peer-checked:border-solid peer-checked:border-outline-primary py-1 px-2">
                                            &#176;C
                                        </label>
                                    </div>
                                    <div class="flex flex-1">
                                        <input type="radio" id="fahrenheit-option" value="f" name="temperature_unit" class="hidden peer" {% if temperature_unit == "f" %}checked{% endif %}>
                                        <label for="fahrenheit-option" class="flex-1 peer-checked:bg-surface-container-lowest peer-checked:shadow-sm peer-checked:text-on-surface-primary rounded peer-checked:border peer-checked:border-solid peer-checked:border-outline-primary py-1 px-2">
                                            &#176;F
                                        </label>
                                    </div>
                                </div>
                                <div class="py-3 border-b-1 border-b-outline-primary">
                                    <h2>Sensor Depth</h2>
                                    <div class="flex p-1 bg-surface-container-low text-on-surface-secondary rounded border border-solid border-outline-primary ml-auto flex gap-2 text-center">
                                        <div class="flex flex-1">
                                            <input type="radio" id="18inch-option" value="18" name="depth" class="hidden peer" {% if depth == "18" %}checked{% endif %}>
                                            <label for="18inch-option" class="flex-1 peer-checked:bg-surface-container-lowest peer-checked:shadow-sm peer-checked:text-on-surface-primary rounded peer-checked:border peer-checked:border-solid peer-checked:border-outline-primary py-1 px-2">
                                               18"
                                            </label>
                                        </div>
                                        <div class="flex flex-1">
                                            <input type="radio" id="36inch-option" value="36" name="depth" class="hidden peer" {% if depth == "36" %}checked{% endif %}>
                                            <label for="36inch-option" class="flex-1 peer-checked:bg-surface-container-lowest peer-checked:shadow-sm peer-checked:text-on-surface-primary rounded peer-checked:border peer-checked:border-solid peer-checked:border-outline-primary py-1 px-2">
                                               36"
                                            </label>
                                        </div>
                                        <div class="flex-0 border-r-1 border-r-outline-primary"></div>
                                        <div class="flex flex-1">
                                            <input type="radio" id="all-option" value="all" name="depth" class="hidden peer" {% if depth == "all" %}checked{% endif %}>
                                            <label for="all-option" class="flex-1 peer-checked:bg-surface-container-lowest peer-checked:shadow-sm peer-checked:text-on-surface-primary rounded peer-checked:border peer-checked:border-solid peer-checked:border-outline-primary py-1 px-2">
                                               Both
                                            </label>
                                        </div>
                                    </div>
                                </div>
                                <div class="pt-3">
                                    <h2 class="pb-1">Display on Chart</h2>
                                    <div class="flex flex-col gap-1">
                                        <label for="display-average-temperature">
                                            <input type="checkbox" name="display-average-temperature" id="display-average-temperature" {% if show_average_temp %}checked{% endif %}/>
                                            <span class="">Average Temperature</span>
                                        </label>
                                        <label for="display-ambient-humidity">
                                            <input type="checkbox" name="display-ambient-humidity" id="display-ambient-humidity" {% if show_ambient_humidity %}checked{% endif %}/>
                                            <span class="">Ambient Humidity</span>
                                        </label>
                                        <label for="display-ambient-temperature">
                                            <input type="checkbox" name="display-ambient-temperature" id="display-ambient-temperature" {% if show_ambient_temp %}checked{% endif %}/>
                                            <span class="">Ambient Temperature</span>
                                        </label>
                                        <label for="display-motion-events">
                                            <input type="checkbox" name="display-motion-events" id="display-motion-events" {% if show_motion_events %}checked{% endif %}/>
                                            <span class="">Motion Events</span>
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </section>
                    </details>
                </div>

                <button type="submit" class="rounded border border-solid border-outline-primary flex items-center px-2 bg-button text-white hover:bg-button-hover hover:cursor-pointer"><span class="px-1">Apply</span><div class="**:stroke-white">{% include "datavis/icons/filter.svg" %}</div></button>



                <div class="flex p-1 bg-surface-container-low text-on-surface-secondary rounded border border-solid border-outline-primary ml-auto flex gap-2 text-center">
                    <div class="flex flex-1">
                        <input type="radio" id="show-as-chart" value="chart" name="display" class="hidden peer" {% if display == "chart" %}checked{% endif %}>
                        <label for="show-as-chart" class="flex-1 peer-checked:bg-surface-container-lowest peer-checked:shadow-sm peer-checked:text-on-surface-primary rounded peer-checked:border peer-checked:border-solid peer-checked:border-outline-primary py-1 px-2">
                           Chart
                        </label>
                    </div>
                    <div class="flex flex-1">
                        <input type="radio" id="show-as-table" value="table" name="display" class="hidden peer" {% if display == "table" %}checked{% endif %}>
                        <label for="show-as-table" class="flex-1 peer-checked:bg-surface-container-lowest peer-checked:shadow-sm peer-checked:text-on-surface-primary rounded peer-checked:border peer-checked:border-solid peer-checked:border-outline-primary py-1 px-2">
                           Table
                        </label>
                    </div>
                        {% comment %}
                    {% if visualize_as == "chart" %}
                    <div class="flex-1 bg-surface-container-lowest shadow-sm text-on-surface-primary rounded border border-solid border-outline-primary py-1 px-2">Chart</div>
                    <div class="flex-1 py-1 px-2 cursor-pointer hover:bg-surface-container-lowest hover:shadow-sm hover:text-on-surface-primary hover:rounded">Table</div>
                    {% else %}
                    <div class="flex-1 py-1 px-2 cursor-pointer hover:bg-surface-container-lowest hover:shadow-sm hover:text-on-surface-primary hover:rounded">Chart</div>
                    <div class="flex-1 bg-surface-container-lowest shadow-sm text-on-surface-primary rounded border border-solid border-outline-primary py-1 px-2">Table</div>
                    {% endif %}
                        {% endcomment %}
                </div>
            </form>
<!--            </section>-->

            <!-- Chart Row -->
            <section class="flex-1 min-h-0 pt-4 px-2 border-b-solid border-b-1 border-b-outline-primary relative">
                <canvas id="myChart"></canvas>
<!--                <svg-->
<!--                    id="chart-root"-->
<!--                    class="h-full w-full"-->
<!--                    viewBox="0 0 800 400"-->
<!--                ></svg>-->
                <script src="{% static "datavis/d3.v7.min.js" %}"></script>
                <script src="{% static "datavis/sample_chart.js" %}"></script>
                <script>
                    window.onload = ()=>{
                      const ctx = document.getElementById('myChart');

                      const data = {
                          labels: ['January', 'February', 'March', 'April'],
                          datasets: [
                            {
                              label: 'Dataset 1',
                              data: [1, 3, 5, 7, 9, 11],
                              borderColor: "#aaffffff",
                              backgroundColor: "#aaaaaaaa",
                            },
                            {
                              label: 'Dataset 2',
                              data: [2, 4, 6, 8, 13, 15],
                              borderColor: "#aaaaffff",
                              backgroundColor: "#aaffaaaa",
                            }
                          ]
                        };

                      new Chart(ctx,
                      {
                          type: 'line',
                          data: data,
                          options: {
                            responsive: true,
                            maintainAspectRatio: false,
                            plugins: {
                              legend: {
                                position: 'top',
                                display: false
                              },
                              title: {
                                display: false,
                                text: 'Row Data'
                              }
                            }
                          },
                        });
                    }
                </script>
            </section>

            <!-- Temperature Site Toggle Row -->
            <section class="flex-0 flex gap-2 p-4 text-sm">
<!--                <div class="flex items-center justify-center p-1 border border-solid border-outline-primary text-on-surface-secondary cursor-pointer hover:bg-surface-container-low">-->
                <div class="p-1 flex gap-2 items-center rounded border border-solid border-outline-primary cursor-pointer hover:bg-surface-container-low">
                    <div class="w-1 h-full bg-gray-200"></div>
                    <div>Toggle all</div>
                    {% if not no_temperature_sites_selected %}
                    <div>{% include "datavis/icons/eye-open.svg" %}</div>
                    {% else %}
                    <div>{% include "datavis/icons/eye-closed.svg" %}</div>
                    {% endif %}
                </div>

                {% for id, temp_site in windrow_temperature_sites.items %}
                {% if temp_site.id in selected_temperature_sites %}
                <div class="p-1 flex gap-2 items-center rounded border border-solid border-outline-primary cursor-pointer hover:bg-surface-container">
                    <div class="w-1 h-full bg-red-200"></div>
                    <div>T&#176; Site {{temp_site.id}}</div>
                    <div>{% include "datavis/icons/eye-open.svg" %}</div>
                </div>
                {% else %}
                <div class="p-1 flex gap-2 items-center rounded text-on-surface-secondary border border-solid border-outline-primary cursor-pointer hover:bg-surface-container">
                    <div class="w-1 h-full bg-red-200"></div>
                    <div>T&#176; Site {{temp_site.id}}</div>
                    <div>{% include "datavis/icons/eye-closed.svg" %}</div>
                </div>
                {% endif %}
                {% endfor %}
            </section>
        </article>
</main>
{% endblock content %}
