{% extends 'base.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="max-width: 75vw; background-color: rgba(189, 216, 3, 0.9); padding: 3rem; padding-top:10rem;display:block">
<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 %}

    <div class="pin-card" style="margin-bottom: 2rem; background-color: #f8f9fa; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); overflow: hidden; display: flex; flex-wrap: wrap;">
      <div class="pin-image" style="flex: 0 0 250px; padding: 15px; display: flex; align-items: center; justify-content: center;">
      <img style="max-width: 100%; max-height: 200px; object-fit: cover; border-radius: 4px;" src="{{ pin.photo }}" alt="Foto de mejora urbana">
      </div>
      <div class="pin-data" style="flex: 1; padding: 15px;">
      <h4 style="margin-top: 0; color: #333;">{{ pin.typeofpin }}</h4>
      <p><strong>Agregado el:</strong> {{ pin.time }}</p>
      <p><strong>Descripción:</strong> {{ pin.description }}</p>
      <p><strong>Dirección:</strong> {{ pin.address }}</p>
      <p><small>Coordenadas: {{ pin.lat }}, {{ pin.lng }}</small></p>
      <div class="pin-actions" style="margin-top: 15px;">
        <button type="button" onclick="openEditModal('{{pin._id}}')" style="background-color: #007bff; color: white; border: none; padding: 6px 12px; border-radius: 4px; margin-right: 8px; cursor: pointer;">Editar</button>
        <a href="/remove_pin/{{pin._id}}"><button type="button" style="background-color: #dc3545; color: white; border: none; padding: 6px 12px; border-radius: 4px; cursor: pointer;">Eliminar</button></a>
      </div>
      </div>
    </div>

    <!-- 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>
        <select id="typeofpin{{pin._id}}" name="typeofpin" style="width:100%; padding:8px;">

        </select>
        </div>
        <div style="margin-bottom:15px;">
          <label for="fixed{{pin._id}}"><b>¿Está solucionado?</b></label>
          <select id="fixed{{pin._id}}" name="fixed" style="width:100%; padding:8px;">
            <option value="True" {% if pin.fixed %}selected{% endif %}>Sí, está solucionado</option>
            <option value="False" {% if not pin.fixed %}selected{% endif %}>No, sigue pendiente</option>
          </select>
        </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">
      
      var iconTypes2 = {
       'bache': '⚠️',
       'coladera': '⭕',
       'obra sin terminar': '🔧',
       'escombro': '🗑️',
       'robo-asalto': '💀',
       'biciestacionamiento': '🏁',
       'mala iluminación': '💡',
       'bici blanca': '🚲',
      'zapato blanco': '👟',
         };
      function openEditModal(id) {
      document.getElementById('editModal'+id).style.display = 'block';
      }
      
      function closeEditModal(id) {
      document.getElementById('editModal'+id).style.display = 'none';
      }
    </script>

    {% endfor %}
{% endif %}
</div>
<script>
  window.onload = function() {
    const typeofpins = document.getElementsByName('typeofpin');
    for (let i = 0; i < typeofpins.length; i++) {
      for (const iconType in iconTypes2) {
        const capitalizedIconType = iconType.charAt(0).toUpperCase() + iconType.slice(1);
        typeofpins[i].innerHTML += '<option value="'+iconType+'">'+iconTypes2[iconType]+' '+capitalizedIconType+'</option>';
      }
    }
  }
</script>
{% endblock %}