{% extends "base.html" %}
{% load static %}
{% load custom_filter_tag %}


{% block 'head' %}
<link rel="stylesheet" href="{% static 'mesas/css/mesas_map.css' %}">
<script src="{% static 'mesas/js/mesas_map.js' %}"></script>

{% endblock %}

{% block 'title' %}
RRB&C - Mapa de Mesas
{% endblock %}

{% block 'body' %}
{% csrf_token %}

<style>
  #mapa {
    justify-self: center;
    width: 1400px;
    height: 800px;
    border-radius: 15px;
    margin-bottom: 20px;
    background-image: url("{% static 'midia/mapMesa.webp' %}" );
    background-size: cover;
    position: relative;
  }
</style>

<h1>Mapa de Mesas</h1>
<div id="scroll">
<div id="mapa" >

  {% for eixo in eixosXY %}
    <div 
      id="{{eixo.x}}-{{eixo.y}}" 
      class="espaco"
      style="
        left: {{eixo.y}}px;
        top: {{eixo.x}}px;
        ">
    </div>
  {% endfor %}
</div>

</div>
<h2 style="justify-self: center;" >Depósito</h2>
<div id="drop" >
  {% for mesa in mesas %}

    {% if mesa.active == True %}

      <div
        id="{{mesa.id}}" 
        class="m-card" 
        
        ondragend="saveLocal()" 
        draggable="true">
          <button 
            class="button-popover"
            popovertarget="my-pop-{{mesa.id}}">
            {{mesa.name}} 
          </button>
        <input type="text" hidden value="{{mesa.location}}">
      </div>

      <div id="my-pop-{{mesa.id}}" popover class="popover">
        <h4>{{mesa.name}}</h4>
        {% for comanda in comandas %}
          {% if comanda.mesa.id == mesa.id %}
            <div >
              <a href="{% url 'viewcomanda' %}?parametro={{ comanda.id }}">
                {{comanda.name}}🔗
              </a>
              {{ comanda.id | total }}
            </div>
          {% endif %}
        {% endfor %}
        </div>

    {% else %}
        <div
          style="background-color: rgb(148, 255, 127);"
          id="{{mesa.id}}" 
          class="m-card" 
          ondragend="saveLocal()" 
          draggable="true" >
          {{mesa.name}} 
          <input type="text" hidden value="{{mesa.location}}">
        </div>
    {% endif %}
  
  {% endfor %}

</div>


{% endblock %}