{% extends 'secondbase.html' %}
{% block content %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.js"></script>

<style>
  main {
    overflow-y: scroll;
  }
</style>
<div class="container-fluid" style="padding-top: 30px; max-width: 75vw; background-color: rgba(189, 216, 3, 0.9); padding: 3rem;">
<h3>Hola <span style="color: darkgreen;">{{current_user.username}}</span></h3>
<p>Aquí puedes ver los pines que has agregado y consultar tu enlace/QR de invitación. Cada vez que recargas esta página, tu enlace de invitacón cambia y el anterior se vuelve inválido.</p>
<div class="grid" style="padding-bottom: 2rem;">
  <div id="qrgen" style="padding-left: 5rem;">
  </div>
  <script type="text/javascript">
    var qrcode = new QRCode(document.getElementById("qrgen"), {
      text: "https://baches.qro.mx/registrame/{{invite_code}}",
      width: 256,
      height: 256,
      colorDark : "#000000",
      colorLight : "#e6e6fa",
      correctLevel : QRCode.CorrectLevel.L
    });
    </script>
  <div>
    <h2>Tu link es:</h2>
    <p><a href="https://baches.qro.mx/registrame/{{invite_code}}">https://baches.qro.mx/registrame/{{invite_code}}</a></p>
  </div>
</div>
{% if pins %}
    {% for pin in pins %}

    <table border="1" cellpadding="5" cellspacing="0">
      <tbody>
        <tr>
        <td><b>Agregado el</b></td>
        <td>{{ pin.time }}</td>
        </tr>
        <tr>
        <td><b>Tipo de Mejora Urbana:</b></td>
        <td>{{ pin.typeofpin }}</td>
        </tr>
        <tr>
        <td><b>Descripción</b></td>
        <td>{{ pin.description }}</td>
        </tr>
        <tr>
        <td><b>Dirección</b></td>
        <td>{{ pin.address }}</td>
        </tr>
        <tr>
        <td><b>Foto</b></td>
        <td><img style="max-height: 66px;" src="{{ pin.photo }}"></td>
        </tr>
        <tr>
        <td><b>Latitud:</b></td>
        <td>{{ pin.lat }}</td>
        </tr>
        <tr>
        <td><b>Longitud:</b></td>
        <td>{{ pin.lng }}</td>
        </tr>
        <tr>
        <td><b>Acciones:</b></td>
        <td>
          <a href="/remove_pin/{{pin._id}}"><button type="button">Eliminar</button></a>
          <button type="button" onclick="openEditModal('{{pin._id}}')">Editar</button>
        </td>
        </tr>
      </tbody>
    </table>

    <!-- Modal para editar pin -->
    <div id="editModal{{pin._id}}" class="modal" style="display:none; position:fixed; z-index:1000; left:0; top:0; width:100%; height:100%; background-color:rgba(0,0,0,0.4);">
      <div class="modal-content" style="background-color:#fff; margin:10% auto; padding:20px; width:70%; border-radius:5px;">
      <span class="close" onclick="closeEditModal('{{pin._id}}')" style="color:#aaa; float:right; font-size:28px; font-weight:bold; cursor:pointer;">&times;</span>
      <h2>Editar Pin</h2>
      <form action="/edit_pin/{{pin._id}}" method="post">
        <div style="margin-bottom:15px;">
        <label for="typeofpin{{pin._id}}"><b>Tipo de Mejora Urbana:</b></label>
        <input type="text" id="typeofpin{{pin._id}}" name="typeofpin" value="{{pin.typeofpin}}" style="width:100%; padding:8px;">
        </div>
        <div style="margin-bottom:15px;">
        <label for="description{{pin._id}}"><b>Descripción:</b></label>
        <textarea id="description{{pin._id}}" name="description" style="width:100%; padding:8px; height:100px;">{{pin.description}}</textarea>
        </div>
        <div style="margin-bottom:15px;">
        <label for="address{{pin._id}}"><b>Dirección:</b></label>
        <input type="text" id="address{{pin._id}}" name="address" value="{{pin.address}}" style="width:100%; padding:8px;">
        </div>
        <button type="submit" style="background-color:#4CAF50; color:white; padding:10px 15px; border:none; cursor:pointer; border-radius:4px;">Guardar cambios</button>
      </form>
      </div>
    </div>

    <script type="text/javascript">
      function openEditModal(id) {
      document.getElementById('editModal'+id).style.display = 'block';
      }
      
      function closeEditModal(id) {
      document.getElementById('editModal'+id).style.display = 'none';
      }
    </script></div>

    {% endfor %}
{% endif %}
</div>
{% endblock %}