{% extends "base_search.html" %}
{% comment %}
Copyright (C) 2018-2025 by BDE ENS Paris-Saclay
SPDX-License-Identifier: GPL-3.0-or-later
{% endcomment %}
{% load render_table from django_tables2 %}
{% load i18n %}

{% block content %}
<div class="card bg-light">
  <h3 class="card-header text-center">
      {{ title }}
  </h3>
  <div class="card-body">
    <style>
      input[type=number]::-webkit-inner-spin-button,
      input[type=number]::-webkit-outer-spin-button {
          -webkit-appearance: none;
          margin: 0;
      }
      input[type=number] {
          appearance: textfield;
          padding: 6px;
          border: 1px solid #ccc;
          border-radius: 4px;
          width: 100px;
      }
    </style>
    <div class="d-flex align-items-center" style="max-width: 300px;">
      <form method="get" action="{% url 'food:redirect_view' %}" class="d-flex w-100">
        <input type="number" name="slug" placeholder="QR-code" required class="form-control form-control-sm" style="max-width: 120px;">
        <button type="submit" class="btn btn-sm btn-primary">{% trans "View food" %}</button>
      </form>
    </div>
  </div>
  <div class="card-body">
    <div class="form-check">
      <label for="stock_only" class="form-check-label">
          <input id="stock_only" name="stock_only" type="checkbox" class="checkboxinput form-check-input" checked>
          {% trans "Filter with only food in stock" %}
      </label>
    </div>
      <input id="searchbar" type="text" class="form-control"
          placeholder="{% trans "Search by attribute such as name..." %}">
  </div>

  {% block extra_inside_card %}
  {% endblock %}

  <div id="dynamic-table">
      {% if table.data %}
      {% render_table table %}
      {% else %}
      <div class="card-body">
          <div class="alert alert-warning">
              {% trans "There is no results." %}
          </div>
      </div>
      {% endif %}
  </div>
</div>
<br>
<div class="card bg-light mb-3">
  <h3 class="card-header text-center">
    {% trans "Meal served" %}
  </h3>
  <div class="card-footer">
    {% if can_add_meal %}
    <a class="btn btn-sm btn-primary" href="{% url 'food:transformedfood_create' %}">
      {% trans "New meal" %}
    </a>
    {% endif %}
    {% if can_view_recipes %}
    <a class="btn btn-sm btn-secondary" href="{% url 'food:recipe_list' %}">
      {% trans "View recipes" %}
    </a>
    {% endif %}
    {% if can_add_recipe %}
    <a class="btn btn-sm btn-primary" href="{% url 'food:recipe_create' %}">
      {% trans "New recipe" %}
    </a>
    {% endif %}
    {% for activity in open_activities %}
      <a class="btn btn-sm btn-secondary" href="{% url 'food:dish_list' activity_pk=activity.pk %}">
      {% trans "View" %} {{ activity.name }}
    </a>
    {% endfor %}
  </div>

  {% if served.data %}
  {% render_table served %}
  {% else %}
  <div class="card-body">
    <div class="alert alert-warning">
      {% trans "There is no meal served." %}
    </div>
  </div>
</div>
  {% endif %}
<div class="card bg-light mb-3">
  <h3 class="card-header text-center">
    {% trans "Free food" %}
  </h3>
  {% if open.data %}
  {% render_table open %}
  {% else %}
  <div class="card-body">
    <div class="alert alert-warning">
      {% trans "There is no free food." %}
    </div>
  </div>
  {% endif %}
</div>
{% if club_tables %}
<div class="card bg-light mb-3">
  <h3 class="card-header text-center">
    {% trans "Food of your clubs" %}
  </h3>
</div>
  {% for table in club_tables %}
<div class="card bg-light mb-3">
  <h3 class="card-header text-center">
    {% trans "Food of club" %} {{ table.prefix }} 
  </h3>
  {% if table.data %}
    {% render_table table %}
  {% else %}
  <div class="card-body">
    <div class="alert alert-warning">
      {% trans "Yours club has not food yet." %}
    </div>
  </div>
  {% endif %}
</div>
  {% endfor %}
  {% endif %}
</div>

<script type="text/javascript">

    let old_pattern = null;
    let searchbar_obj = $("#searchbar");
    let stock_only_obj = $("#stock_only");

    function reloadTable() {
        let pattern = searchbar_obj.val();

        $("#dynamic-table").load(location.pathname + "?search=" + pattern.replace(" ", "%20") + (
            stock_only_obj.is(':checked') ? "" : "&stock=1") + " #dynamic-table");
    }

    searchbar_obj.keyup(reloadTable);
    stock_only_obj.change(reloadTable);

    $(document).on("click", ".table-row", function () {
        window.document.location = $(this).data("href");
    });
</script>
<script>
  document.addEventListener('DOMContentLoaded', function() {
      document.getElementById('goButton').addEventListener('click', function(event) {
          event.preventDefault();
          const slug = document.getElementById('slugInput').value;
          if (slug && !isNaN(slug)) {
              window.location.href = `/food/${slug}/`;
          } else {
              alert("Veuillez entrer un nombre valide.");
          }
      });
  });
  </script>

{% endblock %}