{% extends 'shared/base.html' %}
{% load custom_filters %}
{% load static %}
{% block content %}
<style>
  .card-clickable {
    cursor: pointer;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
  }

  .card-clickable:hover {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
    transform: translateY(-4px);
  }
</style>

<div id="messages" class="col-md-12">
  {% for message in messages %}
  <div class="alert alert-dismissible fade show {% if message.tags == 'success' %}alert-success {% elif message.tags == 'error' %}alert-danger {% endif %}">
    {{ message }}
  </div>
  {% endfor %}
</div>
<div class="content">
  <div class="card my-2">
    <div class="card-body bg-success bg-gradient text-white rounded-2">
      <div class="row flex-between-center">
        <div class="col-md d-flex align-items-center">
          <h5 class="mb-2 mb-md-0">Suas Notas</h5>
        </div>
        <div class="col-auto">
          <a href="{% url 'criar_nota' %}">
            <button class="btn btn-light me-1 mb-1" type="button">Criar Nova Nota <span class="fas fa-plus me-1" data-fa-transform="shrink-3"></span></button>
          </a>
        </div>
      </div>
    </div>
  </div>
  <div class="card">
    <div class="content">
      <div class="canvas-wrapper">
        <div class="row g-3 mb-4">
          <div class="row mt-4">
            {% for nota in notas %}
            <div class="col-md-4">
              <div class="card mb-3 shadow-sm card-clickable" data-bs-toggle="modal" data-bs-target="#notaModal"
              data-titulo="{{ nota.titulo }}" data-conteudo="{{ nota.conteudo|safe }}"
              data-data="{{ nota.data_criacao|date:"d/m/Y" }}">
              <div class="card-body">
                  <h5 class="card-title">{{ nota.titulo }}</h5>
                  <p class="card-text">{{ nota.conteudo|truncatewords:20|safe }}</p>
                  <p class="card-text"><small class="text-muted">Criada em: {{ nota.data_criacao|date:"d/m/Y" }}</small></p>
                  <a href="{% url 'editar_nota' nota.id %}" class="btn btn-primary">Editar</a>
                  <button class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#confirmDeleteModal"
                      data-nota-id="{{ nota.id }}" data-nota-titulo="{{ nota.titulo }}">Excluir</button>
              </div>
          </div>
          
            </div>
            {% endfor %}
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Modal -->
<div class="modal fade" id="notaModal" tabindex="-1" aria-labelledby="notaModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-xl">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="notaModalTitulo"></h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <div id="notaModalConteudo"></div>
        <p class="text-muted"><small>Criada em: <span id="notaModalDataCriacao"></span></small></p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fechar</button>
      </div>
    </div>
  </div>
</div>

<!-- Modal de Confirmação de Exclusão -->
<div class="modal fade" id="confirmDeleteModal" tabindex="-1" aria-labelledby="confirmDeleteModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="confirmDeleteModalLabel">Confirmar Exclusão</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        Tem certeza que deseja excluir a nota <strong id="notaTitulo"></strong>?
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
        <form id="deleteForm" method="post" action="">
          {% csrf_token %}
          <button type="submit" class="btn btn-danger">Excluir</button>
        </form>
      </div>
    </div>
  </div>
</div>


<script>
  var notaModal = document.getElementById('notaModal');
  notaModal.addEventListener('show.bs.modal', function (event) {
    var button = event.relatedTarget;
    var titulo = button.getAttribute('data-titulo');
    var conteudo = button.getAttribute('data-conteudo');
    var data = button.getAttribute('data-data');

    var modalTitulo = notaModal.querySelector('#notaModalTitulo');
    var modalConteudo = notaModal.querySelector('#notaModalConteudo');
    var modalDataCriacao = notaModal.querySelector('#notaModalDataCriacao');

    modalTitulo.textContent = titulo;
    modalConteudo.innerHTML = conteudo; // Use innerHTML to render HTML content
    modalDataCriacao.textContent = data;
  });
</script>

<script>
  var confirmDeleteModal = document.getElementById('confirmDeleteModal');
  confirmDeleteModal.addEventListener('show.bs.modal', function (event) {
    var button = event.relatedTarget;
    var notaId = button.getAttribute('data-nota-id');
    var notaTitulo = button.getAttribute('data-nota-titulo');

    var notaTituloElement = confirmDeleteModal.querySelector('#notaTitulo');
    var deleteForm = confirmDeleteModal.querySelector('#deleteForm');

    notaTituloElement.textContent = notaTitulo;
    deleteForm.action = `/excluir/${notaId}/`;  // Atualize o action para o URL correto
  });
</script>

{% endblock %}