{% 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" id="dash-container" style="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="display:flex;justify-content: center;">
  </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 style="display: grid; justify-content: center;">
    <input type="text" id="invite_code" value="{{invite_code}}" style="" hidden="true">
    <button id="copy-button" onclick="copyToClipboard()" style="background-color: rgb(255, 213, 0); color: rgb(0, 0, 0); border: none; padding: 12px 20px; border-radius: 25px; cursor: pointer; margin-top: 15px; display: flex; align-items: center; justify-content: center; font-size:1.2rem;font-weight: bold; box-shadow: 0 2px 5px rgba(0,0,0,0.2); transition: all 0.3s ease;">
      <span style="font-size: 2rem; margin-right: 10px;">📋</span> Copia tu link de invitación
    </button>
    <script>
      function copyToClipboard() {
        var copyText = document.getElementById("invite_code");
        copyText.select();
        // Modern clipboard API
        navigator.clipboard.writeText("https://baches.qro.mx/registrame/" + copyText.value).then(() => {
          console.log('Link copied successfully');
        }).catch(err => {
          // Fallback for browsers that don't support clipboard API
          document.execCommand("copy");
          console.log('Using fallback clipboard method');
        });
        
        var button = document.getElementById("copy-button");
        
        // Change to copied state
        button.style.backgroundColor = "green";
        button.style.color = "white";
        button.style.transition = "all 0.5s ease";
        button.innerHTML = "<span style=\"font-size: 2rem; margin-right: 10px;\">✓</span> ¡Copiado!";
        
        // Revert back after 2 seconds
        setTimeout(function() {
          button.style.backgroundColor = "rgb(255, 213, 0)";
          button.style.color = "rgb(0, 0, 0)";
          button.style.transition = "all 0.5s ease";
          button.innerHTML = "<span style=\"font-size: 2rem; margin-right: 10px;\">📋</span> Copia tu link de invitación";
        }, 2000);
      }
    </script>
    <p>¡Cada vez que recargas esta página, tu código de invitación cambia para prevenir malos usos! </p>
    <p>Asegúrate de que a quien invites use su invitación de inmediato 😈</p>
  </div>
</div>
{% if pins %}
    {% for pin in pins %}
    <div class="pin-card" style="{% if pin.reviewed and pin.reviewed == false %} background-color: rgb(255, 170, 0) {% endif %};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:</strong> {{ pin.time }}</p>
      {% if pin.reviewed and pin.reviewed == False %}<p><strong>Estado:</strong> Pendiente de revisión</p>{% endif %}
      <p><strong>Modificado:</strong> {% if pin.last_mod %} {{pin.last_mod}} {% endif %}</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 %}